lib/editor/atto/plugins/media/yui/build/moodle-atto_media-button/moodle-atto_media-button.js

   1 YUI.add('moodle-atto_media-button', function (Y, NAME) {
   2
   3 // This file is part of Moodle - http://moodle.org/
   4 //
   5 // Moodle is free software: you can redistribute it and/or modify
   6 // it under the terms of the GNU General Public License as published by
   7 // the Free Software Foundation, either version 3 of the License, or
   8 // (at your option) any later version.
   9 //
  10 // Moodle is distributed in the hope that it will be useful,
  11 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  12 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13 // GNU General Public License for more details.
  14 //
  15 // You should have received a copy of the GNU General Public License
  16 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  17
  18 /*
  19  * @package    atto_media
  20  * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
  21  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22  */
  23
  24 /**
  25  * @module moodle-atto_media-button
  26  */
  27
  28 /**
  29  * Atto media selection tool.
  30  *
  31  * @namespace M.atto_media
  32  * @class Button
  33  * @extends M.editor_atto.EditorPlugin
  34  */
  35
  36 var COMPONENTNAME = 'atto_media',
  37     MEDIA_TYPES = {LINK: 'LINK', VIDEO: 'VIDEO', AUDIO: 'AUDIO'},
  38     TRACK_KINDS = {
  39         SUBTITLES: 'SUBTITLES',
  40         CAPTIONS: 'CAPTIONS',
  41         DESCRIPTIONS: 'DESCRIPTIONS',
  42         CHAPTERS: 'CHAPTERS',
  43         METADATA: 'METADATA'
  44     },
  45     CSS = {
  46         SOURCE: 'atto_media_source',
  47         TRACK: 'atto_media_track',
  48         MEDIA_SOURCE: 'atto_media_media_source',
  49         LINK_SOURCE: 'atto_media_link_source',
  50         POSTER_SOURCE: 'atto_media_poster_source',
  51         TRACK_SOURCE: 'atto_media_track_source',
  52         DISPLAY_OPTIONS: 'atto_media_display_options',
  53         NAME_INPUT: 'atto_media_name_entry',
  54         TITLE_INPUT: 'atto_media_title_entry',
  55         URL_INPUT: 'atto_media_url_entry',
  56         POSTER_SIZE: 'atto_media_poster_size',
  57         LINK_SIZE: 'atto_media_link_size',
  58         WIDTH_INPUT: 'atto_media_width_entry',
  59         HEIGHT_INPUT: 'atto_media_height_entry',
  60         TRACK_KIND_INPUT: 'atto_media_track_kind_entry',
  61         TRACK_LABEL_INPUT: 'atto_media_track_label_entry',
  62         TRACK_LANG_INPUT: 'atto_media_track_lang_entry',
  63         TRACK_DEFAULT_SELECT: 'atto_media_track_default',
  64         MEDIA_CONTROLS_TOGGLE: 'atto_media_controls',
  65         MEDIA_AUTOPLAY_TOGGLE: 'atto_media_autoplay',
  66         MEDIA_MUTE_TOGGLE: 'atto_media_mute',
  67         MEDIA_LOOP_TOGGLE: 'atto_media_loop',
  68         ADVANCED_SETTINGS: 'atto_media_advancedsettings',
  69         LINK: MEDIA_TYPES.LINK.toLowerCase(),
  70         VIDEO: MEDIA_TYPES.VIDEO.toLowerCase(),
  71         AUDIO: MEDIA_TYPES.AUDIO.toLowerCase(),
  72         TRACK_SUBTITLES: TRACK_KINDS.SUBTITLES.toLowerCase(),
  73         TRACK_CAPTIONS: TRACK_KINDS.CAPTIONS.toLowerCase(),
  74         TRACK_DESCRIPTIONS: TRACK_KINDS.DESCRIPTIONS.toLowerCase(),
  75         TRACK_CHAPTERS: TRACK_KINDS.CHAPTERS.toLowerCase(),
  76         TRACK_METADATA: TRACK_KINDS.METADATA.toLowerCase()
  77     },
  78     SELECTORS = {
  79         SOURCE: '.' + CSS.SOURCE,
  80         TRACK: '.' + CSS.TRACK,
  81         MEDIA_SOURCE: '.' + CSS.MEDIA_SOURCE,
  82         POSTER_SOURCE: '.' + CSS.POSTER_SOURCE,
  83         TRACK_SOURCE: '.' + CSS.TRACK_SOURCE,
  84         DISPLAY_OPTIONS: '.' + CSS.DISPLAY_OPTIONS,
  85         NAME_INPUT: '.' + CSS.NAME_INPUT,
  86         TITLE_INPUT: '.' + CSS.TITLE_INPUT,
  87         URL_INPUT: '.' + CSS.URL_INPUT,
  88         POSTER_SIZE: '.' + CSS.POSTER_SIZE,
  89         LINK_SIZE: '.' + CSS.LINK_SIZE,
  90         WIDTH_INPUT: '.' + CSS.WIDTH_INPUT,
  91         HEIGHT_INPUT: '.' + CSS.HEIGHT_INPUT,
  92         TRACK_KIND_INPUT: '.' + CSS.TRACK_KIND_INPUT,
  93         TRACK_LABEL_INPUT: '.' + CSS.TRACK_LABEL_INPUT,
  94         TRACK_LANG_INPUT: '.' + CSS.TRACK_LANG_INPUT,
  95         TRACK_DEFAULT_SELECT: '.' + CSS.TRACK_DEFAULT_SELECT,
  96         MEDIA_CONTROLS_TOGGLE: '.' + CSS.MEDIA_CONTROLS_TOGGLE,
  97         MEDIA_AUTOPLAY_TOGGLE: '.' + CSS.MEDIA_AUTOPLAY_TOGGLE,
  98         MEDIA_MUTE_TOGGLE: '.' + CSS.MEDIA_MUTE_TOGGLE,
  99         MEDIA_LOOP_TOGGLE: '.' + CSS.MEDIA_LOOP_TOGGLE,
 100         ADVANCED_SETTINGS: '.' + CSS.ADVANCED_SETTINGS,
 101         LINK_TAB: 'li[data-medium-type="' + CSS.LINK + '"]',
 102         LINK_PANE: '.tab-pane[data-medium-type="' + CSS.LINK + '"]',
 103         VIDEO_TAB: 'li[data-medium-type="' + CSS.VIDEO + '"]',
 104         VIDEO_PANE: '.tab-pane[data-medium-type="' + CSS.VIDEO + '"]',
 105         AUDIO_TAB: 'li[data-medium-type="' + CSS.AUDIO + '"]',
 106         AUDIO_PANE: '.tab-pane[data-medium-type="' + CSS.AUDIO + '"]',
 107         TRACK_SUBTITLES_TAB: 'li[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]',
 108         TRACK_SUBTITLES_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]',
 109         TRACK_CAPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]',
 110         TRACK_CAPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]',
 111         TRACK_DESCRIPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]',
 112         TRACK_DESCRIPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]',
 113         TRACK_CHAPTERS_TAB: 'li[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]',
 114         TRACK_CHAPTERS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]',
 115         TRACK_METADATA_TAB: 'li[data-track-kind="' + CSS.TRACK_METADATA + '"]',
 116         TRACK_METADATA_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_METADATA + '"]'
 117     },
 118     TEMPLATES = {
 119         ROOT: '' +
 120             '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' +
 121                 '<ul class="root nav nav-tabs m-b-1" role="tablist">' +
 122                     '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' +
 123                         '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' +
 124                             '{{get_string "link" component}}' +
 125                         '</a>' +
 126                     '</li>' +
 127                     '<li data-medium-type="{{CSS.VIDEO}}" class="nav-item">' +
 128                         '<a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">' +
 129                             '{{get_string "video" component}}' +
 130                         '</a>' +
 131                     '</li>' +
 132                     '<li data-medium-type="{{CSS.AUDIO}}" class="nav-item">' +
 133                         '<a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">' +
 134                             '{{get_string "audio" component}}' +
 135                         '</a>' +
 136                     '</li>' +
 137                 '</ul>' +
 138                 '<div class="root tab-content">' +
 139                     '<div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">' +
 140                         '{{> tab_panes.link}}' +
 141                     '</div>' +
 142                     '<div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">' +
 143                         '{{> tab_panes.video}}' +
 144                     '</div>' +
 145                     '<div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">' +
 146                         '{{> tab_panes.audio}}' +
 147                     '</div>' +
 148                 '</div>' +
 149                 '<div class="mdl-align">' +
 150                     '<br/>' +
 151                     '<button class="btn btn-default submit" type="submit">{{get_string "createmedia" component}}</button>' +
 152                 '</div>' +
 153             '</form>',
 154         TAB_PANES: {
 155             LINK: '' +
 156                 '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' +
 157                 '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' +
 158                 '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' +
 159                         'size="32" required="true"/>',
 160             VIDEO: '' +
 161                 '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' +
 162                     ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
 163                 '<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options">' +
 164                     '<input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">' +
 165                     '<legend class="ftoggler">{{get_string "displayoptions" component}}</legend>' +
 166                     '<div class="fcontainer">' +
 167                         '{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}' +
 168                     '</div>' +
 169                 '</fieldset>' +
 170                 '<fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings">' +
 171                     '<input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">' +
 172                     '<legend class="ftoggler">{{get_string "advancedsettings" component}}</legend>' +
 173                     '<div class="fcontainer">' +
 174                         '{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}' +
 175                     '</div>' +
 176                 '</fieldset>' +
 177                 '<fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks">' +
 178                     '<input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">' +
 179                     '<legend class="ftoggler">{{get_string "tracks" component}} {{{helpStrings.tracks}}}</legend>' +
 180                     '<div class="fcontainer">' +
 181                         '{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}' +
 182                     '</div>' +
 183                 '</fieldset>',
 184             AUDIO: '' +
 185                 '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel"' +
 186                     ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' +
 187                 '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options">' +
 188                     '<input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">' +
 189                     '<legend class="ftoggler">{{get_string "displayoptions" component}}</legend>' +
 190                     '<div class="fcontainer">' +
 191                         '{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}' +
 192                     '</div>' +
 193                 '</fieldset>' +
 194                 '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings">' +
 195                     '<input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">' +
 196                     '<legend class="ftoggler">{{get_string "advancedsettings" component}}</legend>' +
 197                     '<div class="fcontainer">' +
 198                         '{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}' +
 199                     '</div>' +
 200                 '</fieldset>' +
 201                 '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks">' +
 202                     '<input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">' +
 203                     '<legend class="ftoggler">{{get_string "tracks" component}} {{{helpStrings.tracks}}}</legend>' +
 204                     '<div class="fcontainer">' +
 205                         '{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}' +
 206                     '</div>' +
 207                 '</fieldset>'
 208         },
 209         FORM_COMPONENTS: {
 210             SOURCE: '' +
 211                 '<div class="{{CSS.SOURCE}} {{id}}">' +
 212                     '<div class="m-b-1">' +
 213                         '<label for="url-input">' +
 214                         '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' +
 215                         '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' +
 216                         '</label>' +
 217                         '<div class="input-group input-append w-100">' +
 218                             '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' +
 219                             '<span class="input-group-append">' +
 220                                 '<button class="btn btn-default openmediabrowser" type="button">' +
 221                                 '{{get_string "browserepositories" component}}</button>' +
 222                             '</span>' +
 223                         '</div>' +
 224                     '</div>' +
 225                     '{{#multisource}}' +
 226                         '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' +
 227                             ' help=../addsourcehelp}}' +
 228                     '{{/multisource}}' +
 229                 '</div>',
 230             ADD_COMPONENT: '' +
 231                 '<div>' +
 232                     '<a href="#" class="addcomponent">' +
 233                         '{{#label}}{{get_string ../label ../component}}{{/label}}' +
 234                         '{{^label}}{{get_string "add" ../component}}{{/label}}' +
 235                     '</a>' +
 236                     '{{#help}}{{{../help}}}{{/help}}' +
 237                 '</div>',
 238             REMOVE_COMPONENT: '' +
 239                 '<div>' +
 240                     '<a href="#" class="removecomponent">' +
 241                         '{{#label}}{{get_string ../label ../component}}{{/label}}' +
 242                         '{{^label}}{{get_string "remove" ../component}}{{/label}}' +
 243                     '</a>' +
 244                 '</div>',
 245             DISPLAY_OPTIONS: '' +
 246                 '<div class="{{CSS.DISPLAY_OPTIONS}}">' +
 247                     '<div class="m-b-1">' +
 248                         '<label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label>' +
 249                         '<input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"' +
 250                             'size="32"/>' +
 251                     '</div>' +
 252                     '<div class="clearfix"></div>' +
 253                     '{{#mediatype_video}}' +
 254                     '<div class="m-b-1">' +
 255                         '<label>{{get_string "size" component}}</label>' +
 256                         '<div class="form-inline {{CSS.POSTER_SIZE}}">' +
 257                             '<label class="accesshide">{{get_string "videowidth" component}}</label>' +
 258                             '<input type="text" class="form-control m-r-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' +
 259                             ' x ' +
 260                             '<label class="accesshide">{{get_string "videoheight" component}}</label>' +
 261                             '<input type="text" class="form-control m-l-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' +
 262                         '</div>' +
 263                     '</div>' +
 264                     '<div class="clearfix"></div>' +
 265                     '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' +
 266                     '{{/mediatype_video}}' +
 267                 '<div>',
 268             ADVANCED_SETTINGS: '' +
 269                 '<div class="{{CSS.ADVANCED_SETTINGS}}">' +
 270                     '<div class="form-check">' +
 271                         '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' +
 272                         'id="{{id}}_media-controls-toggle"/>' +
 273                         '<label class="form-check-label" for="{{id}}_media-controls-toggle">' +
 274                         '{{get_string "controls" component}}' +
 275                         '</label>' +
 276                     '</div>' +
 277                     '<div class="form-check">' +
 278                         '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' +
 279                         'id="{{id}}_media-autoplay-toggle"/>' +
 280                         '<label class="form-check-label" for="{{id}}_media-autoplay-toggle">' +
 281                         '{{get_string "autoplay" component}}' +
 282                         '</label>' +
 283                     '</div>' +
 284                     '<div class="form-check">' +
 285                         '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" ' +
 286                             'id="{{id}}_media-mute-toggle"/>' +
 287                         '<label class="form-check-label" for="{{id}}_media-mute-toggle">' +
 288                         '{{get_string "mute" component}}' +
 289                         '</label>' +
 290                     '</div>' +
 291                     '<div class="form-check">' +
 292                         '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" ' +
 293                             'id="{{id}}_media-loop-toggle"/>' +
 294                         '<label class="form-check-label" for="{{id}}_media-loop-toggle">' +
 295                         '{{get_string "loop" component}}' +
 296                         '</label>' +
 297                     '</div>' +
 298                 '</div>',
 299             TRACK_TABS: '' +
 300                 '<ul class="nav nav-tabs mb-3">' +
 301                     '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' +
 302                         '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' +
 303                             ' role="tab" data-toggle="tab">' +
 304                             '{{get_string "subtitles" component}}' +
 305                         '</a>' +
 306                     '</li>' +
 307                     '<li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item">' +
 308                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">' +
 309                             '{{get_string "captions" component}}' +
 310                         '</a>' +
 311                     '</li>' +
 312                     '<li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}"  class="nav-item">' +
 313                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"' +
 314                             ' role="tab" data-toggle="tab">' +
 315                             '{{get_string "descriptions" component}}' +
 316                         '</a>' +
 317                     '</li>' +
 318                     '<li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item">' +
 319                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">' +
 320                             '{{get_string "chapters" component}}' +
 321                         '</a>' +
 322                     '</li>' +
 323                     '<li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item">' +
 324                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">' +
 325                             '{{get_string "metadata" component}}' +
 326                         '</a>' +
 327                     '</li>' +
 328                 '</ul>' +
 329                 '<div class="tab-content">' +
 330                     '<div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active"' +
 331                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}">' +
 332                         '<div class="trackhelp">{{{helpStrings.subtitles}}}</div>' +
 333                         '{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel"' +
 334                             ' addcomponentlabel="addsubtitlestrack"}}' +
 335                     '</div>' +
 336                     '<div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane"' +
 337                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}">' +
 338                         '<div class="trackhelp">{{{helpStrings.captions}}}</div>' +
 339                         '{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel"' +
 340                             ' addcomponentlabel="addcaptionstrack"}}' +
 341                     '</div>' +
 342                     '<div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane"' +
 343                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}">' +
 344                         '<div class="trackhelp">{{{helpStrings.descriptions}}}</div>' +
 345                         '{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel"' +
 346                             ' addcomponentlabel="adddescriptionstrack"}}' +
 347                     '</div>' +
 348                     '<div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane"' +
 349                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}">' +
 350                         '<div class="trackhelp">{{{helpStrings.chapters}}}</div>' +
 351                         '{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel"' +
 352                             ' addcomponentlabel="addchapterstrack"}}' +
 353                     '</div>' +
 354                     '<div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane"' +
 355                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}">' +
 356                         '<div class="trackhelp">{{{helpStrings.metadata}}}</div>' +
 357                         '{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel"' +
 358                             ' addcomponentlabel="addmetadatatrack"}}' +
 359                     '</div>' +
 360                 '</div>',
 361             TRACK: '' +
 362                 '<div class="m-b-1 {{CSS.TRACK}}">' +
 363                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
 364                     '<div class="form-group">' +
 365                         '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
 366                         '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
 367                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
 368                                 '{{#langsinstalled}}' +
 369                                     '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' +
 370                                 '{{/langsinstalled}}' +
 371                             '</optgroup>' +
 372                             '<optgroup label="{{get_string "languagesavailable" component}} ">' +
 373                                 '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' +
 374                             '</optgroup>' +
 375                         '</select>' +
 376                     '</div>' +
 377                     '<div class="form-group">' +
 378                         '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
 379                         '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
 380                     '</div>' +
 381                     '<div class="form-check">' +
 382                         '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' +
 383                         '<label class="form-check-label">{{get_string "default" component}}</label>' +
 384                     '</div>' +
 385                     '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' +
 386                 '</div>'
 387         },
 388         HTML_MEDIA: {
 389             VIDEO: '' +
 390                 '&nbsp;<video ' +
 391                     '{{#width}}width="{{../width}}" {{/width}}' +
 392                     '{{#height}}height="{{../height}}" {{/height}}' +
 393                     '{{#poster}}poster="{{../poster}}" {{/poster}}' +
 394                     '{{#showControls}}controls="true" {{/showControls}}' +
 395                     '{{#loop}}loop="true" {{/loop}}' +
 396                     '{{#muted}}muted="true" {{/muted}}' +
 397                     '{{#autoplay}}autoplay="true" {{/autoplay}}' +
 398                     '{{#title}}title="{{../title}}" {{/title}}' +
 399                 '>' +
 400                     '{{#sources}}<source src="{{source}}">{{/sources}}' +
 401                     '{{#tracks}}' +
 402                         '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' +
 403                             ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' +
 404                     '{{/tracks}}' +
 405                     '{{#description}}{{../description}}{{/description}}' +
 406                 '</video>&nbsp',
 407             AUDIO: '' +
 408                 '&nbsp;<audio ' +
 409                     '{{#showControls}}controls="true" {{/showControls}}' +
 410                     '{{#loop}}loop="true" {{/loop}}' +
 411                     '{{#muted}}muted="true" {{/muted}}' +
 412                     '{{#autoplay}}autoplay="true" {{/autoplay}}' +
 413                     '{{#title}}title="{{../title}}" {{/title}}' +
 414                 '>' +
 415                     '{{#sources}}<source src="{{source}}">{{/sources}}' +
 416                     '{{#tracks}}' +
 417                         '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' +
 418                             ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' +
 419                     '{{/tracks}}' +
 420                     '{{#description}}{{../description}}{{/description}}' +
 421                 '</audio>&nbsp',
 422             LINK: '' +
 423                 '<a href="{{url}}" ' +
 424                     '{{#width}}data-width="{{../width}}" {{/width}}' +
 425                     '{{#height}}data-height="{{../height}}"{{/height}}' +
 426                 '>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>'
 427          }
 428     };
 429
 430 Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
 431
 432     initializer: function() {
 433         if (this.get('host').canShowFilepicker('media')) {
 434             this.editor.delegate('dblclick', this._displayDialogue, 'video', this);
 435             this.editor.delegate('click', this._handleClick, 'video', this);
 436
 437             this.addButton({
 438                 icon: 'e/insert_edit_video',
 439                 callback: this._displayDialogue,
 440                 tags: 'video, audio',
 441                 tagMatchRequiresAll: false
 442             });
 443         }
 444     },
 445
 446     /**
 447      * Gets the root context for all templates, with extra supplied context.
 448      *
 449      * @method _getContext
 450      * @param  {Object} extra The extra context to add
 451      * @return {Object}
 452      * @private
 453      */
 454     _getContext: function(extra) {
 455         return Y.merge({
 456             elementid: this.get('host').get('elementid'),
 457             component: COMPONENTNAME,
 458             langsinstalled: this.get('langs').installed,
 459             langsavailable: this.get('langs').available,
 460             helpStrings: this.get('help'),
 461             CSS: CSS
 462         }, extra);
 463     },
 464
 465     /**
 466      * Handles a click on a media element.
 467      *
 468      * @method _handleClick
 469      * @param  {EventFacade} e
 470      * @private
 471      */
 472     _handleClick: function(e) {
 473         var medium = e.target;
 474
 475         var selection = this.get('host').getSelectionFromNode(medium);
 476         if (this.get('host').getSelection() !== selection) {
 477             this.get('host').setSelection(selection);
 478         }
 479     },
 480
 481     /**
 482      * Display the media editing tool.
 483      *
 484      * @method _displayDialogue
 485      * @private
 486      */
 487     _displayDialogue: function() {
 488         if (this.get('host').getSelection() === false) {
 489             return;
 490         }
 491
 492         if (!('renderPartial' in Y.Handlebars.helpers)) {
 493             (function smashPartials(chain, obj) {
 494                 Y.each(obj, function(value, index) {
 495                     chain.push(index);
 496                     if (typeof value !== "object") {
 497                         Y.Handlebars.registerPartial(chain.join('.').toLowerCase(), value);
 498                     } else {
 499                         smashPartials(chain, value);
 500                     }
 501                     chain.pop();
 502                 });
 503             })([], TEMPLATES);
 504
 505             Y.Handlebars.registerHelper('renderPartial', function(partialName, options) {
 506                 if (!partialName) {
 507                     return '';
 508                 }
 509
 510                 var partial = Y.Handlebars.partials[partialName];
 511                 var parentContext = options.hash.context ? Y.clone(options.hash.context) : {};
 512                 var context = Y.merge(parentContext, options.hash);
 513                 delete context.context;
 514
 515                 if (!partial) {
 516                     return '';
 517                 }
 518                 return new Y.Handlebars.SafeString(Y.Handlebars.compile(partial)(context));
 519             });
 520         }
 521
 522         var dialogue = this.getDialogue({
 523             headerContent: M.util.get_string('createmedia', COMPONENTNAME),
 524             focusAfterHide: true,
 525             width: 660,
 526             focusOnShowSelector: SELECTORS.URL_INPUT
 527         });
 528
 529         // Set the dialogue content, and then show the dialogue.
 530         dialogue.set('bodyContent', this._getDialogueContent(this.get('host').getSelection())).show();
 531         M.form.shortforms({formid: this.get('host').get('elementid') + '_atto_media_form'});
 532     },
 533
 534     /**
 535      * Returns the dialogue content for the tool.
 536      *
 537      * @method _getDialogueContent
 538      * @param  {WrappedRange[]} selection Current editor selection
 539      * @return {Y.Node}
 540      * @private
 541      */
 542     _getDialogueContent: function(selection) {
 543         var content = Y.Node.create(
 544             Y.Handlebars.compile(TEMPLATES.ROOT)(this._getContext())
 545         );
 546
 547         var medium = this.get('host').getSelectedNodes().filter('video,audio').shift();
 548         var mediumProperties = medium ? this._getMediumProperties(medium) : false;
 549         return this._attachEvents(this._applyMediumProperties(content, mediumProperties), selection);
 550     },
 551
 552     /**
 553      * Attaches required events to the content node.
 554      *
 555      * @method _attachEvents
 556      * @param  {Y.Node}         content The content to which events will be attached
 557      * @param  {WrappedRange[]} selection Current editor selection
 558      * @return {Y.Node}
 559      * @private
 560      */
 561     _attachEvents: function(content, selection) {
 562         // Delegate add component link for media source fields.
 563         content.delegate('click', function(e) {
 564             e.preventDefault();
 565             this._addMediaSourceComponent(e.currentTarget);
 566         }, SELECTORS.MEDIA_SOURCE + ' .addcomponent', this);
 567
 568         // Delegate add component link for track fields.
 569         content.delegate('click', function(e) {
 570             e.preventDefault();
 571             this._addTrackComponent(e.currentTarget);
 572         }, SELECTORS.TRACK + ' .addcomponent', this);
 573
 574         // Only allow one track per tab to be selected as "default".
 575         content.delegate('click', function(e) {
 576             var element = e.currentTarget;
 577             if (element.get('checked')) {
 578                 var getKind = function(el) {
 579                     return this._getTrackTypeFromTabPane(el.ancestor('.tab-pane'));
 580                 }.bind(this);
 581
 582                 element.ancestor('.root.tab-content').all(SELECTORS.TRACK_DEFAULT_SELECT).each(function(select) {
 583                     if (select !== element && getKind(element) === getKind(select)) {
 584                         select.set('checked', false);
 585                     }
 586                 });
 587             }
 588         }, SELECTORS.TRACK_DEFAULT_SELECT, this);
 589
 590         // Set up filepicker click event.
 591         content.delegate('click', function(e) {
 592             var element = e.currentTarget;
 593             var fptype = (element.ancestor(SELECTORS.POSTER_SOURCE) && 'image') ||
 594                     (element.ancestor(SELECTORS.TRACK_SOURCE) && 'subtitle') ||
 595                     'media';
 596             e.preventDefault();
 597             this.get('host').showFilepicker(fptype, this._getFilepickerCallback(element, fptype), this);
 598         }, '.openmediabrowser', this);
 599
 600         // This is a nasty hack. Basically we are using BS4 markup for the tabs
 601         // but it isn't completely backwards compatible with BS2. The main problem is
 602         // that the "active" class goes on a different node. So the idea is to put it
 603         // the node for BS4, and then use CSS to make it look right in BS2. However,
 604         // once another tab is clicked, everything sorts itself out, more or less. Except
 605         // that the original "active" tab hasn't had the BS4 "active" class removed
 606         // (so the styles will still apply to it). So we need to remove the "active"
 607         // class on the BS4 node so that BS2 is happy.
 608         //
 609         // This doesn't upset BS4 since it removes this class anyway when clicking on
 610         // another tab.
 611         content.all('.nav-item').on('click', function(elem) {
 612             elem.currentTarget.get('parentNode').all('.active').removeClass('active');
 613         });
 614
 615         content.one('.submit').on('click', function(e) {
 616             e.preventDefault();
 617             var mediaHTML = this._getMediaHTML(e.currentTarget.ancestor('.atto_form')),
 618                 host = this.get('host');
 619             this.getDialogue({
 620                 focusAfterHide: null
 621             }).hide();
 622             if (mediaHTML) {
 623                 host.setSelection(selection);
 624                 host.insertContentAtFocusPoint(mediaHTML);
 625                 this.markUpdated();
 626             }
 627         }, this);
 628
 629         return content;
 630     },
 631
 632     /**
 633      * Applies medium properties to the content node.
 634      *
 635      * @method _applyMediumProperties
 636      * @param  {Y.Node} content The content to apply the properties to
 637      * @param  {object} properties The medium properties to apply
 638      * @return {Y.Node}
 639      * @private
 640      */
 641     _applyMediumProperties: function(content, properties) {
 642         if (!properties) {
 643             return content;
 644         }
 645
 646         var applyTrackProperties = function(track, properties) {
 647             track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.src);
 648             track.one(SELECTORS.TRACK_LANG_INPUT).set('value', properties.srclang);
 649             track.one(SELECTORS.TRACK_LABEL_INPUT).set('value', properties.label);
 650             track.one(SELECTORS.TRACK_DEFAULT_SELECT).set('checked', properties.defaultTrack);
 651         };
 652
 653         var tabPane = content.one('.root.tab-content > .tab-pane#' + this.get('host').get('elementid') +
 654                               '_' + properties.type.toLowerCase());
 655
 656         // Populate sources.
 657         tabPane.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.sources[0]);
 658         Y.Array.each(properties.sources.slice(1), function(source) {
 659             this._addMediaSourceComponent(tabPane.one(SELECTORS.MEDIA_SOURCE + ' .addcomponent'), function(newComponent) {
 660                 newComponent.one(SELECTORS.URL_INPUT).set('value', source);
 661             });
 662         }, this);
 663
 664         // Populate tracks.
 665         Y.Object.each(properties.tracks, function(value, key) {
 666             var trackData = value.length ? value : [{src: '', srclang: '', label: '', defaultTrack: false}];
 667             var paneSelector = SELECTORS['TRACK_' + key.toUpperCase() + '_PANE'];
 668
 669             applyTrackProperties(tabPane.one(paneSelector + ' ' + SELECTORS.TRACK), trackData[0]);
 670             Y.Array.each(trackData.slice(1), function(track) {
 671                 this._addTrackComponent(
 672                     tabPane.one(paneSelector + ' ' + SELECTORS.TRACK + ' .addcomponent'), function(newComponent) {
 673                     applyTrackProperties(newComponent, track);
 674                 });
 675             }, this);
 676         }, this);
 677
 678         // Populate values.
 679         tabPane.one(SELECTORS.TITLE_INPUT).set('value', properties.title);
 680         tabPane.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).set('checked', properties.controls);
 681         tabPane.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).set('checked', properties.autoplay);
 682         tabPane.one(SELECTORS.MEDIA_MUTE_TOGGLE).set('checked', properties.muted);
 683         tabPane.one(SELECTORS.MEDIA_LOOP_TOGGLE).set('checked', properties.loop);
 684
 685         // Determine medium type.
 686         var mediumType = this._getMediumTypeFromTabPane(tabPane);
 687
 688         if (mediumType === 'video') {
 689             // Populate values unique for video.
 690             tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster);
 691             tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width);
 692             tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height);
 693         }
 694
 695         // Switch to the correct tab.
 696         // Remove active class from all tabs + tab panes.
 697         tabPane.siblings('.active').removeClass('active');
 698         content.all('.root.nav-tabs .nav-item a').removeClass('active');
 699
 700         // Add active class to the desired tab and tab pane.
 701         tabPane.addClass('active');
 702         content.one(SELECTORS[mediumType.toUpperCase() + '_TAB'] + ' a').addClass('active');
 703
 704         return content;
 705     },
 706
 707     /**
 708      * Extracts medium properties.
 709      *
 710      * @method _getMediumProperties
 711      * @param  {Y.Node} medium The medium node from which to extract
 712      * @return {Object}
 713      * @private
 714      */
 715     _getMediumProperties: function(medium) {
 716         var boolAttr = function(elem, attr) {
 717             return elem.getAttribute(attr) ? true : false;
 718         };
 719
 720         var tracks = {
 721             subtitles: [],
 722             captions: [],
 723             descriptions: [],
 724             chapters: [],
 725             metadata: []
 726         };
 727
 728         medium.all('track').each(function(track) {
 729             tracks[track.getAttribute('kind')].push({
 730                 src: track.getAttribute('src'),
 731                 srclang: track.getAttribute('srclang'),
 732                 label: track.getAttribute('label'),
 733                 defaultTrack: boolAttr(track, 'default')
 734             });
 735         });
 736
 737         return {
 738             type: medium.test('video') ? MEDIA_TYPES.VIDEO : MEDIA_TYPES.AUDIO,
 739             sources: medium.all('source').get('src'),
 740             poster: medium.getAttribute('poster'),
 741             title: medium.getAttribute('title'),
 742             width: medium.getAttribute('width'),
 743             height: medium.getAttribute('height'),
 744             autoplay: boolAttr(medium, 'autoplay'),
 745             loop: boolAttr(medium, 'loop'),
 746             muted: boolAttr(medium, 'muted'),
 747             controls: boolAttr(medium, 'controls'),
 748             tracks: tracks
 749         };
 750     },
 751
 752     /**
 753      * Adds a track form component.
 754      *
 755      * @method _addTrackComponent
 756      * @param  {Y.Node}   element    The element which was used to trigger this function
 757      * @param  {Function} [callback] Function to be called when the new component is added
 758      *     @param {Y.Node}    callback.newComponent The compiled component
 759      * @private
 760      */
 761     _addTrackComponent: function(element, callback) {
 762         var trackType = this._getTrackTypeFromTabPane(element.ancestor('.tab-pane'));
 763         var context = this._getContext({
 764             sourcelabel: trackType + 'sourcelabel',
 765             addcomponentlabel: 'add' + trackType + 'track'
 766         });
 767
 768         this._addComponent(element, TEMPLATES.FORM_COMPONENTS.TRACK, SELECTORS.TRACK, context, callback);
 769     },
 770
 771     /**
 772      * Adds a media source form component.
 773      *
 774      * @method _addMediaSourceComponent
 775      * @param  {Y.Node}   element    The element which was used to trigger this function
 776      * @param  {Function} [callback] Function to be called when the new component is added
 777      *     @param {Y.Node}    callback.newComponent The compiled component
 778      * @private
 779      */
 780     _addMediaSourceComponent: function(element, callback) {
 781         var mediumType = this._getMediumTypeFromTabPane(element.ancestor('.tab-pane'));
 782         var context = this._getContext({
 783             multisource: true,
 784             id: CSS.MEDIA_SOURCE,
 785             entersourcelabel: mediumType + 'sourcelabel',
 786             addcomponentlabel: 'addsource',
 787             addsourcehelp: this.get('help').addsource
 788         });
 789         this._addComponent(element, TEMPLATES.FORM_COMPONENTS.SOURCE, SELECTORS.MEDIA_SOURCE, context, callback);
 790     },
 791
 792     /**
 793      * Adds an arbitrary form component.
 794      *
 795      * This function Compiles and adds the provided component in the supplied 'ancestor' container.
 796      * It will also add links to add/remove the relevant components, attaching the
 797      * necessary events.
 798      *
 799      * @method _addComponent
 800      * @param  {Y.Node}   element    The element which was used to trigger this function
 801      * @param  {String}   component  The component to compile and add
 802      * @param  {String}   ancestor   A selector used to find an ancestor of 'component', to which
 803      *                               the compiled component will be appended
 804      * @param  {Object}   context    The context with which to render the component
 805      * @param  {Function} [callback] Function to be called when the new component is added
 806      *     @param {Y.Node}    callback.newComponent The compiled component
 807      * @private
 808      */
 809     _addComponent: function(element, component, ancestor, context, callback) {
 810         var currentComponent = element.ancestor(ancestor),
 811             newComponent = Y.Node.create(Y.Handlebars.compile(component)(context)),
 812             removeNodeContext = this._getContext(context);
 813
 814         removeNodeContext.label = "remove";
 815         var removeNode = Y.Node.create(Y.Handlebars.compile(TEMPLATES.FORM_COMPONENTS.REMOVE_COMPONENT)(removeNodeContext));
 816
 817         removeNode.one('.removecomponent').on('click', function(e) {
 818             e.preventDefault();
 819             currentComponent.remove(true);
 820         });
 821
 822         currentComponent.insert(newComponent, 'after');
 823         element.ancestor().insert(removeNode, 'after');
 824         element.ancestor().remove(true);
 825
 826         if (callback) {
 827             callback.call(this, newComponent);
 828         }
 829     },
 830
 831     /**
 832      * Returns the callback for the file picker to call after a file has been selected.
 833      *
 834      * @method _getFilepickerCallback
 835      * @param  {Y.Node} element The element which triggered the callback
 836      * @param  {String} fptype  The file pickertype (as would be passed to `showFilePicker`)
 837      * @return {Function} The function to be used as a callback when the file picker returns the file
 838      * @private
 839      */
 840     _getFilepickerCallback: function(element, fptype) {
 841         return function(params) {
 842             if (params.url !== '') {
 843                 var tabPane = element.ancestor('.tab-pane');
 844                 element.ancestor(SELECTORS.SOURCE).one(SELECTORS.URL_INPUT).set('value', params.url);
 845
 846                 // Links (and only links) have a name field.
 847                 if (tabPane.get('id') === this.get('host').get('elementid') + '_' + CSS.LINK) {
 848                     tabPane.one(SELECTORS.NAME_INPUT).set('value', params.file);
 849                 }
 850
 851                 if (fptype === 'subtitle') {
 852                     var subtitleLang = params.file.split('.vtt')[0].split('-').slice(-1)[0];
 853                     var langObj = this.get('langs').available.reduce(function(carry, lang) {
 854                         return lang.code === subtitleLang ? lang : carry;
 855                     }, false);
 856                     if (langObj) {
 857                         element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LABEL_INPUT).set('value',
 858                                 langObj.lang.substr(0, langObj.lang.lastIndexOf(' ')));
 859                         element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LANG_INPUT).set('value', langObj.code);
 860                     }
 861                 }
 862             }
 863         };
 864     },
 865
 866     /**
 867      * Given a "medium" tab pane, returns what kind of medium it contains.
 868      *
 869      * @method _getMediumTypeFromTabPane
 870      * @param  {Y.Node} tabPane The tab pane
 871      * @return {String} The type of medium in the pane
 872      */
 873     _getMediumTypeFromTabPane: function(tabPane) {
 874         return tabPane.getAttribute('data-medium-type');
 875     },
 876
 877     /**
 878      * Given a "track" tab pane, returns what kind of track it contains.
 879      *
 880      * @method _getTrackTypeFromTabPane
 881      * @param  {Y.Node} tabPane The tab pane
 882      * @return {String} The type of track in the pane
 883      */
 884     _getTrackTypeFromTabPane: function(tabPane) {
 885         return tabPane.getAttribute('data-track-kind');
 886     },
 887
 888     /**
 889      * Returns the HTML to be inserted to the text area.
 890      *
 891      * @method _getMediaHTML
 892      * @param  {Y.Node} form The form from which to extract data
 893      * @return {String} The compiled markup
 894      * @private
 895      */
 896     _getMediaHTML: function(form) {
 897         var mediumType = this._getMediumTypeFromTabPane(form.one('.root.tab-content > .tab-pane.active'));
 898         var tabContent = form.one(SELECTORS[mediumType.toUpperCase() + '_PANE']);
 899
 900         return this['_getMediaHTML' + mediumType[0].toUpperCase() + mediumType.substr(1)](tabContent);
 901     },
 902
 903     /**
 904      * Returns the HTML to be inserted to the text area for the link tab.
 905      *
 906      * @method _getMediaHTMLLink
 907      * @param  {Y.Node} tab The tab from which to extract data
 908      * @return {String} The compiled markup
 909      * @private
 910      */
 911     _getMediaHTMLLink: function(tab) {
 912         var context = {
 913             url: tab.one(SELECTORS.URL_INPUT).get('value'),
 914             name: tab.one(SELECTORS.NAME_INPUT).get('value') || false
 915         };
 916
 917         return context.url ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.LINK)(context) : '';
 918     },
 919
 920     /**
 921      * Returns the HTML to be inserted to the text area for the video tab.
 922      *
 923      * @method _getMediaHTMLVideo
 924      * @param  {Y.Node} tab The tab from which to extract data
 925      * @return {String} The compiled markup
 926      * @private
 927      */
 928     _getMediaHTMLVideo: function(tab) {
 929         var context = this._getContextForMediaHTML(tab);
 930         context.width = tab.one(SELECTORS.WIDTH_INPUT).get('value') || false;
 931         context.height = tab.one(SELECTORS.HEIGHT_INPUT).get('value') || false;
 932         context.poster = tab.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') || false;
 933
 934         return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.VIDEO)(context) : '';
 935     },
 936
 937     /**
 938      * Returns the HTML to be inserted to the text area for the audio tab.
 939      *
 940      * @method _getMediaHTMLAudio
 941      * @param  {Y.Node} tab The tab from which to extract data
 942      * @return {String} The compiled markup
 943      * @private
 944      */
 945     _getMediaHTMLAudio: function(tab) {
 946         var context = this._getContextForMediaHTML(tab);
 947
 948         return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.AUDIO)(context) : '';
 949     },
 950
 951     /**
 952      * Returns the context with which to render a media template.
 953      *
 954      * @method _getContextForMediaHTML
 955      * @param  {Y.Node} tab The tab from which to extract data
 956      * @return {Object}
 957      * @private
 958      */
 959     _getContextForMediaHTML: function(tab) {
 960         var tracks = [];
 961
 962         tab.all(SELECTORS.TRACK).each(function(track) {
 963             tracks.push({
 964                 track: track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value'),
 965                 kind: this._getTrackTypeFromTabPane(track.ancestor('.tab-pane')),
 966                 label: track.one(SELECTORS.TRACK_LABEL_INPUT).get('value') ||
 967                     track.one(SELECTORS.TRACK_LANG_INPUT).get('value'),
 968                 srclang: track.one(SELECTORS.TRACK_LANG_INPUT).get('value'),
 969                 defaultTrack: track.one(SELECTORS.TRACK_DEFAULT_SELECT).get('checked') ? "true" : null
 970             });
 971         }, this);
 972
 973         return {
 974             sources: tab.all(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value').filter(function(source) {
 975                 return !!source;
 976             }).map(function(source) {
 977                 return {source: source};
 978             }),
 979             description: tab.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') || false,
 980             tracks: tracks.filter(function(track) {
 981                 return !!track.track;
 982             }),
 983             showControls: tab.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).get('checked'),
 984             autoplay: tab.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).get('checked'),
 985             muted: tab.one(SELECTORS.MEDIA_MUTE_TOGGLE).get('checked'),
 986             loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked'),
 987             title: tab.one(SELECTORS.TITLE_INPUT).get('value') || false
 988         };
 989     }
 990 }, {
 991     ATTRS: {
 992         langs: {},
 993         help: {}
 994     }
 995 });
 996
 997
 998 }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "moodle-form-shortforms"]});