| 1 | import '@kano/styles/typography.js';
|
| 2 | import '@kano/styles/color.js';
|
| 3 | import '@kano/code/dist/app/elements/kc-player/kc-player.js';
|
| 4 | import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
|
| 5 | import './elements/kwc-code-display.js';
|
| 6 | import './highlight-theme/app.js';
|
| 7 | /**
|
| 8 | `kwc-app-player`
|
| 9 | Player UI component for kano code shares.
|
| 10 |
|
| 11 | @demo demo/index-app.html
|
| 12 | */
|
| 13 | class KwcAppPlayer extends PolymerElement {
|
| 14 | static get template() {
|
| 15 | return html`
|
| 16 | <div class="app">
|
| 17 | <kc-player id="player" src="[[_appUrl]]" show-toolbar></kc-player>
|
| 18 | </div>
|
| 19 | <template is="dom-if" if="[[displayCode]]">
|
| 20 | <kwc-code-display code="[[_mdCode]]" lines="[[_lines]]" code-type="Javascript" on-hide-code="_hideCode"></kwc-code-display>
|
| 21 | </template>
|
| 22 | `;
|
| 23 | }
|
| 24 | static get properties() {
|
| 25 | return {
|
| 26 | /**
|
| 27 | * The code that creates this share.
|
| 28 | * @type {String}
|
| 29 | */
|
| 30 | _code: {
|
| 31 | type: String,
|
| 32 | value: null,
|
| 33 | },
|
| 34 | /**
|
| 35 | * Flag to indicate whether the code display element is visible.
|
| 36 | * @type {Boolean}
|
| 37 | */
|
| 38 | displayCode: {
|
| 39 | type: Boolean,
|
| 40 | value: false,
|
| 41 | },
|
| 42 | /**
|
| 43 | * An array of line numbers for rendering the code display.
|
| 44 | * @type {Array}
|
| 45 | */
|
| 46 | _lines: {
|
| 47 | type: Array,
|
| 48 | computed: '_computeLines(_mdCode)',
|
| 49 | },
|
| 50 | /**
|
| 51 | * The markdown version of the share code to display in the
|
| 52 | * code display element.
|
| 53 | * @type {String}
|
| 54 | */
|
| 55 | _mdCode: {
|
| 56 | type: String,
|
| 57 | value: null,
|
| 58 | },
|
| 59 | _appUrl: {
|
| 60 | type: String,
|
| 61 | value: null,
|
| 62 | },
|
| 63 | /**
|
| 64 | * The current share to be played.
|
| 65 | * @type {Object}
|
| 66 | */
|
| 67 | share: {
|
| 68 | type: Object,
|
| 69 | observer: '_shareChanged',
|
| 70 | },
|
| 71 | };
|
| 72 | }
|
| 73 | /** OBSERVERS * */
|
| 74 | /**
|
| 75 | * Computed the number of lines in the share's code and
|
| 76 | * populated an array with the list of numbers.
|
| 77 | * @param {String} mdCode Markdown string of share code
|
| 78 | * @return{Array} List of numbers.
|
| 79 | */
|
| 80 | _computeLines(mdCode) {
|
| 81 | if (!mdCode) {
|
| 82 | return [];
|
| 83 | }
|
| 84 | const newLines = mdCode.match(/\n(?!$)/g);
|
| 85 |
|
| 86 |
|
| 87 | const lineCount = newLines ? newLines.length : 1;
|
| 88 | const lines = [];
|
| 89 | /* Don't include the header */
|
| 90 | for (let i = 1; i < lineCount; i += 1) {
|
| 91 | lines.push(i);
|
| 92 | }
|
| 93 | return lines;
|
| 94 | }
|
| 95 | /**
|
| 96 | * Load any code from storage and compute the markdown for
|
| 97 | * display in the display code element.
|
| 98 | * @param {Object} share Current share data
|
| 99 | */
|
| 100 | _shareChanged(share) {
|
| 101 | if (!share) {
|
| 102 | return;
|
| 103 | }
|
| 104 | const attachment = this.share.attachment_url;
|
| 105 | if (attachment) {
|
| 106 | this._appUrl = attachment;
|
| 107 | }
|
| 108 | }
|
| 109 | /** EVENT HANDLERS* */
|
| 110 | /**
|
| 111 | * Proxy the hide code event from the code display element.
|
| 112 | *
|
| 113 | * @event hide-code
|
| 114 | */
|
| 115 | _hideCode() {
|
| 116 | this.this.dispatchEvent(new CustomEvent('hide-code'));
|
| 117 | }
|
| 118 | }
|
| 119 |
|
| 120 | customElements.define('kwc-app-player', KwcAppPlayer);
|