MDL-63431 atto_media: Fix non-unique id issues and extend tests.
[moodle.git] / 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) {
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/>.
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  */
24 /**
25  * @module moodle-atto_media-button
26  */
28 /**
29  * Atto media selection tool.
30  *
31  * @namespace M.atto_media
32  * @class Button
33  * @extends M.editor_atto.EditorPlugin
34  */
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}}" id="{{id}}_media-mute-toggle"/>' +
286                         '<label class="form-check-label" for="{{id}}_media-mute-toggle">' +
287                         '{{get_string "mute" component}}' +
288                         '</label>' +
289                     '</div>' +
290                     '<div class="form-check">' +
291                         '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="{{id}}_media-loop-toggle"/>' +
292                         '<label class="form-check-label" for="{{id}}_media-loop-toggle">' +
293                         '{{get_string "loop" component}}' +
294                         '</label>' +
295                     '</div>' +
296                 '</div>',
297             TRACK_TABS: '' +
298                 '<ul class="nav nav-tabs mb-3">' +
299                     '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' +
300                         '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' +
301                             ' role="tab" data-toggle="tab">' +
302                             '{{get_string "subtitles" component}}' +
303                         '</a>' +
304                     '</li>' +
305                     '<li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item">' +
306                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">' +
307                             '{{get_string "captions" component}}' +
308                         '</a>' +
309                     '</li>' +
310                     '<li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}"  class="nav-item">' +
311                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"' +
312                             ' role="tab" data-toggle="tab">' +
313                             '{{get_string "descriptions" component}}' +
314                         '</a>' +
315                     '</li>' +
316                     '<li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item">' +
317                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">' +
318                             '{{get_string "chapters" component}}' +
319                         '</a>' +
320                     '</li>' +
321                     '<li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item">' +
322                         '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">' +
323                             '{{get_string "metadata" component}}' +
324                         '</a>' +
325                     '</li>' +
326                 '</ul>' +
327                 '<div class="tab-content">' +
328                     '<div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active"' +
329                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}">' +
330                         '<div class="trackhelp">{{{helpStrings.subtitles}}}</div>' +
331                         '{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel"' +
332                             ' addcomponentlabel="addsubtitlestrack"}}' +
333                     '</div>' +
334                     '<div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane"' +
335                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}">' +
336                         '<div class="trackhelp">{{{helpStrings.captions}}}</div>' +
337                         '{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel"' +
338                             ' addcomponentlabel="addcaptionstrack"}}' +
339                     '</div>' +
340                     '<div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane"' +
341                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}">' +
342                         '<div class="trackhelp">{{{helpStrings.descriptions}}}</div>' +
343                         '{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel"' +
344                             ' addcomponentlabel="adddescriptionstrack"}}' +
345                     '</div>' +
346                     '<div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane"' +
347                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}">' +
348                         '<div class="trackhelp">{{{helpStrings.chapters}}}</div>' +
349                         '{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel"' +
350                             ' addcomponentlabel="addchapterstrack"}}' +
351                     '</div>' +
352                     '<div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane"' +
353                         ' id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}">' +
354                         '<div class="trackhelp">{{{helpStrings.metadata}}}</div>' +
355                         '{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel"' +
356                             ' addcomponentlabel="addmetadatatrack"}}' +
357                     '</div>' +
358                 '</div>',
359             TRACK: '' +
360                 '<div class="m-b-1 {{CSS.TRACK}}">' +
361                     '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' +
362                     '<div class="form-group">' +
363                         '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' +
364                         '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' +
365                             '<optgroup label="{{get_string "languagesinstalled" component}}">' +
366                                 '{{#langsinstalled}}' +
367                                     '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' +
368                                 '{{/langsinstalled}}' +
369                             '</optgroup>' +
370                             '<optgroup label="{{get_string "languagesavailable" component}} ">' +
371                                 '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' +
372                             '</optgroup>' +
373                         '</select>' +
374                     '</div>' +
375                     '<div class="form-group">' +
376                         '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' +
377                         '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' +
378                     '</div>' +
379                     '<div class="form-check">' +
380                         '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' +
381                         '<label class="form-check-label">{{get_string "default" component}}</label>' +
382                     '</div>' +
383                     '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' +
384                 '</div>'
385         },
386         HTML_MEDIA: {
387             VIDEO: '' +
388                 '&nbsp;<video ' +
389                     '{{#width}}width="{{../width}}" {{/width}}' +
390                     '{{#height}}height="{{../height}}" {{/height}}' +
391                     '{{#poster}}poster="{{../poster}}" {{/poster}}' +
392                     '{{#showControls}}controls="true" {{/showControls}}' +
393                     '{{#loop}}loop="true" {{/loop}}' +
394                     '{{#muted}}muted="true" {{/muted}}' +
395                     '{{#autoplay}}autoplay="true" {{/autoplay}}' +
396                     '{{#title}}title="{{../title}}" {{/title}}' +
397                 '>' +
398                     '{{#sources}}<source src="{{source}}">{{/sources}}' +
399                     '{{#tracks}}' +
400                         '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' +
401                             ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' +
402                     '{{/tracks}}' +
403                     '{{#description}}{{../description}}{{/description}}' +
404                 '</video>&nbsp',
405             AUDIO: '' +
406                 '&nbsp;<audio ' +
407                     '{{#showControls}}controls="true" {{/showControls}}' +
408                     '{{#loop}}loop="true" {{/loop}}' +
409                     '{{#muted}}muted="true" {{/muted}}' +
410                     '{{#autoplay}}autoplay="true" {{/autoplay}}' +
411                     '{{#title}}title="{{../title}}" {{/title}}' +
412                 '>' +
413                     '{{#sources}}<source src="{{source}}">{{/sources}}' +
414                     '{{#tracks}}' +
415                         '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' +
416                             ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' +
417                     '{{/tracks}}' +
418                     '{{#description}}{{../description}}{{/description}}' +
419                 '</audio>&nbsp',
420             LINK: '' +
421                 '<a href="{{url}}" ' +
422                     '{{#width}}data-width="{{../width}}" {{/width}}' +
423                     '{{#height}}data-height="{{../height}}"{{/height}}' +
424                 '>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>'
425          }
426     };
428 Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
430     initializer: function() {
431         if (this.get('host').canShowFilepicker('media')) {
432             this.editor.delegate('dblclick', this._displayDialogue, 'video', this);
433             this.editor.delegate('click', this._handleClick, 'video', this);
435             this.addButton({
436                 icon: 'e/insert_edit_video',
437                 callback: this._displayDialogue,
438                 tags: 'video, audio',
439                 tagMatchRequiresAll: false
440             });
441         }
442     },
444     /**
445      * Gets the root context for all templates, with extra supplied context.
446      *
447      * @method _getContext
448      * @param  {Object} extra The extra context to add
449      * @return {Object}
450      * @private
451      */
452     _getContext: function(extra) {
453         return Y.merge({
454             elementid: this.get('host').get('elementid'),
455             component: COMPONENTNAME,
456             langsinstalled: this.get('langs').installed,
457             langsavailable: this.get('langs').available,
458             helpStrings: this.get('help'),
459             CSS: CSS
460         }, extra);
461     },
463     /**
464      * Handles a click on a media element.
465      *
466      * @method _handleClick
467      * @param  {EventFacade} e
468      * @private
469      */
470     _handleClick: function(e) {
471         var medium = e.target;
473         var selection = this.get('host').getSelectionFromNode(medium);
474         if (this.get('host').getSelection() !== selection) {
475             this.get('host').setSelection(selection);
476         }
477     },
479     /**
480      * Display the media editing tool.
481      *
482      * @method _displayDialogue
483      * @private
484      */
485     _displayDialogue: function() {
486         if (this.get('host').getSelection() === false) {
487             return;
488         }
490         if (!('renderPartial' in Y.Handlebars.helpers)) {
491             (function smashPartials(chain, obj) {
492                 Y.each(obj, function(value, index) {
493                     chain.push(index);
494                     if (typeof value !== "object") {
495                         Y.Handlebars.registerPartial(chain.join('.').toLowerCase(), value);
496                     } else {
497                         smashPartials(chain, value);
498                     }
499                     chain.pop();
500                 });
501             })([], TEMPLATES);
503             Y.Handlebars.registerHelper('renderPartial', function(partialName, options) {
504                 if (!partialName) {
505                     return '';
506                 }
508                 var partial = Y.Handlebars.partials[partialName];
509                 var parentContext = options.hash.context ? Y.clone(options.hash.context) : {};
510                 var context = Y.merge(parentContext, options.hash);
511                 delete context.context;
513                 if (!partial) {
514                     return '';
515                 }
516                 return new Y.Handlebars.SafeString(Y.Handlebars.compile(partial)(context));
517             });
518         }
520         var dialogue = this.getDialogue({
521             headerContent: M.util.get_string('createmedia', COMPONENTNAME),
522             focusAfterHide: true,
523             width: 660,
524             focusOnShowSelector: SELECTORS.URL_INPUT
525         });
527         // Set the dialogue content, and then show the dialogue.
528         dialogue.set('bodyContent', this._getDialogueContent(this.get('host').getSelection())).show();
529         M.form.shortforms({formid: this.get('host').get('elementid') + '_atto_media_form'});
530     },
532     /**
533      * Returns the dialogue content for the tool.
534      *
535      * @method _getDialogueContent
536      * @param  {WrappedRange[]} selection Current editor selection
537      * @return {Y.Node}
538      * @private
539      */
540     _getDialogueContent: function(selection) {
541         var content = Y.Node.create(
542             Y.Handlebars.compile(TEMPLATES.ROOT)(this._getContext())
543         );
545         var medium = this.get('host').getSelectedNodes().filter('video,audio').shift();
546         var mediumProperties = medium ? this._getMediumProperties(medium) : false;
547         return this._attachEvents(this._applyMediumProperties(content, mediumProperties), selection);
548     },
550     /**
551      * Attaches required events to the content node.
552      *
553      * @method _attachEvents
554      * @param  {Y.Node}         content The content to which events will be attached
555      * @param  {WrappedRange[]} selection Current editor selection
556      * @return {Y.Node}
557      * @private
558      */
559     _attachEvents: function(content, selection) {
560         // Delegate add component link for media source fields.
561         content.delegate('click', function(e) {
562             e.preventDefault();
563             this._addMediaSourceComponent(e.currentTarget);
564         }, SELECTORS.MEDIA_SOURCE + ' .addcomponent', this);
566         // Delegate add component link for track fields.
567         content.delegate('click', function(e) {
568             e.preventDefault();
569             this._addTrackComponent(e.currentTarget);
570         }, SELECTORS.TRACK + ' .addcomponent', this);
572         // Only allow one track per tab to be selected as "default".
573         content.delegate('click', function(e) {
574             var element = e.currentTarget;
575             if (element.get('checked')) {
576                 var getKind = function(el) {
577                     return this._getTrackTypeFromTabPane(el.ancestor('.tab-pane'));
578                 }.bind(this);
580                 element.ancestor('.root.tab-content').all(SELECTORS.TRACK_DEFAULT_SELECT).each(function(select) {
581                     if (select !== element && getKind(element) === getKind(select)) {
582                         select.set('checked', false);
583                     }
584                 });
585             }
586         }, SELECTORS.TRACK_DEFAULT_SELECT, this);
588         // Set up filepicker click event.
589         content.delegate('click', function(e) {
590             var element = e.currentTarget;
591             var fptype = (element.ancestor(SELECTORS.POSTER_SOURCE) && 'image') ||
592                     (element.ancestor(SELECTORS.TRACK_SOURCE) && 'subtitle') ||
593                     'media';
594             e.preventDefault();
595             this.get('host').showFilepicker(fptype, this._getFilepickerCallback(element, fptype), this);
596         }, '.openmediabrowser', this);
598         // This is a nasty hack. Basically we are using BS4 markup for the tabs
599         // but it isn't completely backwards compatible with BS2. The main problem is
600         // that the "active" class goes on a different node. So the idea is to put it
601         // the node for BS4, and then use CSS to make it look right in BS2. However,
602         // once another tab is clicked, everything sorts itself out, more or less. Except
603         // that the original "active" tab hasn't had the BS4 "active" class removed
604         // (so the styles will still apply to it). So we need to remove the "active"
605         // class on the BS4 node so that BS2 is happy.
606         //
607         // This doesn't upset BS4 since it removes this class anyway when clicking on
608         // another tab.
609         content.all('.nav-item').on('click', function(elem) {
610             elem.currentTarget.get('parentNode').all('.active').removeClass('active');
611         });
613         content.one('.submit').on('click', function(e) {
614             e.preventDefault();
615             var mediaHTML = this._getMediaHTML(e.currentTarget.ancestor('.atto_form')),
616                 host = this.get('host');
617             this.getDialogue({
618                 focusAfterHide: null
619             }).hide();
620             if (mediaHTML) {
621                 host.setSelection(selection);
622                 host.insertContentAtFocusPoint(mediaHTML);
623                 this.markUpdated();
624             }
625         }, this);
627         return content;
628     },
630     /**
631      * Applies medium properties to the content node.
632      *
633      * @method _applyMediumProperties
634      * @param  {Y.Node} content The content to apply the properties to
635      * @param  {object} properties The medium properties to apply
636      * @return {Y.Node}
637      * @private
638      */
639     _applyMediumProperties: function(content, properties) {
640         if (!properties) {
641             return content;
642         }
644         var applyTrackProperties = function(track, properties) {
645             track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.src);
646             track.one(SELECTORS.TRACK_LANG_INPUT).set('value', properties.srclang);
647             track.one(SELECTORS.TRACK_LABEL_INPUT).set('value', properties.label);
648             track.one(SELECTORS.TRACK_DEFAULT_SELECT).set('checked', properties.defaultTrack);
649         };
651         var tabPane = content.one('.root.tab-content > .tab-pane#' + this.get('host').get('elementid') +
652                               '_' + properties.type.toLowerCase());
654         // Populate sources.
655         tabPane.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.sources[0]);
656         Y.Array.each(properties.sources.slice(1), function(source) {
657             this._addMediaSourceComponent(tabPane.one(SELECTORS.MEDIA_SOURCE + ' .addcomponent'), function(newComponent) {
658                 newComponent.one(SELECTORS.URL_INPUT).set('value', source);
659             });
660         }, this);
662         // Populate tracks.
663         Y.Object.each(properties.tracks, function(value, key) {
664             var trackData = value.length ? value : [{src: '', srclang: '', label: '', defaultTrack: false}];
665             var paneSelector = SELECTORS['TRACK_' + key.toUpperCase() + '_PANE'];
667             applyTrackProperties(tabPane.one(paneSelector + ' ' + SELECTORS.TRACK), trackData[0]);
668             Y.Array.each(trackData.slice(1), function(track) {
669                 this._addTrackComponent(
670                     tabPane.one(paneSelector + ' ' + SELECTORS.TRACK + ' .addcomponent'), function(newComponent) {
671                     applyTrackProperties(newComponent, track);
672                 });
673             }, this);
674         }, this);
676         // Populate values.
677         tabPane.one(SELECTORS.TITLE_INPUT).set('value', properties.title);
678         tabPane.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).set('checked', properties.controls);
679         tabPane.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).set('checked', properties.autoplay);
680         tabPane.one(SELECTORS.MEDIA_MUTE_TOGGLE).set('checked', properties.muted);
681         tabPane.one(SELECTORS.MEDIA_LOOP_TOGGLE).set('checked', properties.loop);
683         // Determine medium type.
684         var mediumType = this._getMediumTypeFromTabPane(tabPane);
686         if (mediumType === 'video') {
687             // Populate values unique for video.
688             tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster);
689             tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width);
690             tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height);
691         }
693         // Switch to the correct tab.
694         // Remove active class from all tabs + tab panes.
695         tabPane.siblings('.active').removeClass('active');
696         content.all('.root.nav-tabs .nav-item a').removeClass('active');
698         // Add active class to the desired tab and tab pane.
699         tabPane.addClass('active');
700         content.one(SELECTORS[mediumType.toUpperCase() + '_TAB'] + ' a').addClass('active');
702         return content;
703     },
705     /**
706      * Extracts medium properties.
707      *
708      * @method _getMediumProperties
709      * @param  {Y.Node} medium The medium node from which to extract
710      * @return {Object}
711      * @private
712      */
713     _getMediumProperties: function(medium) {
714         var boolAttr = function(elem, attr) {
715             return elem.getAttribute(attr) ? true : false;
716         };
718         var tracks = {
719             subtitles: [],
720             captions: [],
721             descriptions: [],
722             chapters: [],
723             metadata: []
724         };
726         medium.all('track').each(function(track) {
727             tracks[track.getAttribute('kind')].push({
728                 src: track.getAttribute('src'),
729                 srclang: track.getAttribute('srclang'),
730                 label: track.getAttribute('label'),
731                 defaultTrack: boolAttr(track, 'default')
732             });
733         });
735         return {
736             type: medium.test('video') ? MEDIA_TYPES.VIDEO : MEDIA_TYPES.AUDIO,
737             sources: medium.all('source').get('src'),
738             poster: medium.getAttribute('poster'),
739             title: medium.getAttribute('title'),
740             width: medium.getAttribute('width'),
741             height: medium.getAttribute('height'),
742             autoplay: boolAttr(medium, 'autoplay'),
743             loop: boolAttr(medium, 'loop'),
744             muted: boolAttr(medium, 'muted'),
745             controls: boolAttr(medium, 'controls'),
746             tracks: tracks
747         };
748     },
750     /**
751      * Adds a track form component.
752      *
753      * @method _addTrackComponent
754      * @param  {Y.Node}   element    The element which was used to trigger this function
755      * @param  {Function} [callback] Function to be called when the new component is added
756      *     @param {Y.Node}    callback.newComponent The compiled component
757      * @private
758      */
759     _addTrackComponent: function(element, callback) {
760         var trackType = this._getTrackTypeFromTabPane(element.ancestor('.tab-pane'));
761         var context = this._getContext({
762             sourcelabel: trackType + 'sourcelabel',
763             addcomponentlabel: 'add' + trackType + 'track'
764         });
766         this._addComponent(element, TEMPLATES.FORM_COMPONENTS.TRACK, SELECTORS.TRACK, context, callback);
767     },
769     /**
770      * Adds a media source form component.
771      *
772      * @method _addMediaSourceComponent
773      * @param  {Y.Node}   element    The element which was used to trigger this function
774      * @param  {Function} [callback] Function to be called when the new component is added
775      *     @param {Y.Node}    callback.newComponent The compiled component
776      * @private
777      */
778     _addMediaSourceComponent: function(element, callback) {
779         var mediumType = this._getMediumTypeFromTabPane(element.ancestor('.tab-pane'));
780         var context = this._getContext({
781             multisource: true,
782             id: CSS.MEDIA_SOURCE,
783             entersourcelabel: mediumType + 'sourcelabel',
784             addcomponentlabel: 'addsource',
785             addsourcehelp: this.get('help').addsource
786         });
787         this._addComponent(element, TEMPLATES.FORM_COMPONENTS.SOURCE, SELECTORS.MEDIA_SOURCE, context, callback);
788     },
790     /**
791      * Adds an arbitrary form component.
792      *
793      * This function Compiles and adds the provided component in the supplied 'ancestor' container.
794      * It will also add links to add/remove the relevant components, attaching the
795      * necessary events.
796      *
797      * @method _addComponent
798      * @param  {Y.Node}   element    The element which was used to trigger this function
799      * @param  {String}   component  The component to compile and add
800      * @param  {String}   ancestor   A selector used to find an ancestor of 'component', to which
801      *                               the compiled component will be appended
802      * @param  {Object}   context    The context with which to render the component
803      * @param  {Function} [callback] Function to be called when the new component is added
804      *     @param {Y.Node}    callback.newComponent The compiled component
805      * @private
806      */
807     _addComponent: function(element, component, ancestor, context, callback) {
808         var currentComponent = element.ancestor(ancestor),
809             newComponent = Y.Node.create(Y.Handlebars.compile(component)(context)),
810             removeNodeContext = this._getContext(context);
812         removeNodeContext.label = "remove";
813         var removeNode = Y.Node.create(Y.Handlebars.compile(TEMPLATES.FORM_COMPONENTS.REMOVE_COMPONENT)(removeNodeContext));
815         removeNode.one('.removecomponent').on('click', function(e) {
816             e.preventDefault();
817             currentComponent.remove(true);
818         });
820         currentComponent.insert(newComponent, 'after');
821         element.ancestor().insert(removeNode, 'after');
822         element.ancestor().remove(true);
824         if (callback) {
825             callback.call(this, newComponent);
826         }
827     },
829     /**
830      * Returns the callback for the file picker to call after a file has been selected.
831      *
832      * @method _getFilepickerCallback
833      * @param  {Y.Node} element The element which triggered the callback
834      * @param  {String} fptype  The file pickertype (as would be passed to `showFilePicker`)
835      * @return {Function} The function to be used as a callback when the file picker returns the file
836      * @private
837      */
838     _getFilepickerCallback: function(element, fptype) {
839         return function(params) {
840             if (params.url !== '') {
841                 var tabPane = element.ancestor('.tab-pane');
842                 element.ancestor(SELECTORS.SOURCE).one(SELECTORS.URL_INPUT).set('value', params.url);
844                 // Links (and only links) have a name field.
845                 if (tabPane.get('id') === this.get('host').get('elementid') + '_' + CSS.LINK) {
846                     tabPane.one(SELECTORS.NAME_INPUT).set('value', params.file);
847                 }
849                 if (fptype === 'subtitle') {
850                     var subtitleLang = params.file.split('.vtt')[0].split('-').slice(-1)[0];
851                     var langObj = this.get('langs').available.reduce(function(carry, lang) {
852                         return lang.code === subtitleLang ? lang : carry;
853                     }, false);
854                     if (langObj) {
855                         element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LABEL_INPUT).set('value',
856                                 langObj.lang.substr(0, langObj.lang.lastIndexOf(' ')));
857                         element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LANG_INPUT).set('value', langObj.code);
858                     }
859                 }
860             }
861         };
862     },
864     /**
865      * Given a "medium" tab pane, returns what kind of medium it contains.
866      *
867      * @method _getMediumTypeFromTabPane
868      * @param  {Y.Node} tabPane The tab pane
869      * @return {String} The type of medium in the pane
870      */
871     _getMediumTypeFromTabPane: function(tabPane) {
872         return tabPane.getAttribute('data-medium-type');
873     },
875     /**
876      * Given a "track" tab pane, returns what kind of track it contains.
877      *
878      * @method _getTrackTypeFromTabPane
879      * @param  {Y.Node} tabPane The tab pane
880      * @return {String} The type of track in the pane
881      */
882     _getTrackTypeFromTabPane: function(tabPane) {
883         return tabPane.getAttribute('data-track-kind');
884     },
886     /**
887      * Returns the HTML to be inserted to the text area.
888      *
889      * @method _getMediaHTML
890      * @param  {Y.Node} form The form from which to extract data
891      * @return {String} The compiled markup
892      * @private
893      */
894     _getMediaHTML: function(form) {
895         var mediumType = this._getMediumTypeFromTabPane(form.one('.root.tab-content > .tab-pane.active'));
896         var tabContent = form.one(SELECTORS[mediumType.toUpperCase() + '_PANE']);
898         return this['_getMediaHTML' + mediumType[0].toUpperCase() + mediumType.substr(1)](tabContent);
899     },
901     /**
902      * Returns the HTML to be inserted to the text area for the link tab.
903      *
904      * @method _getMediaHTMLLink
905      * @param  {Y.Node} tab The tab from which to extract data
906      * @return {String} The compiled markup
907      * @private
908      */
909     _getMediaHTMLLink: function(tab) {
910         var context = {
911             url: tab.one(SELECTORS.URL_INPUT).get('value'),
912             name: tab.one(SELECTORS.NAME_INPUT).get('value') || false
913         };
915         return context.url ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.LINK)(context) : '';
916     },
918     /**
919      * Returns the HTML to be inserted to the text area for the video tab.
920      *
921      * @method _getMediaHTMLVideo
922      * @param  {Y.Node} tab The tab from which to extract data
923      * @return {String} The compiled markup
924      * @private
925      */
926     _getMediaHTMLVideo: function(tab) {
927         var context = this._getContextForMediaHTML(tab);
928         context.width = tab.one(SELECTORS.WIDTH_INPUT).get('value') || false;
929         context.height = tab.one(SELECTORS.HEIGHT_INPUT).get('value') || false;
930         context.poster = tab.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') || false;
932         return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.VIDEO)(context) : '';
933     },
935     /**
936      * Returns the HTML to be inserted to the text area for the audio tab.
937      *
938      * @method _getMediaHTMLAudio
939      * @param  {Y.Node} tab The tab from which to extract data
940      * @return {String} The compiled markup
941      * @private
942      */
943     _getMediaHTMLAudio: function(tab) {
944         var context = this._getContextForMediaHTML(tab);
946         return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.AUDIO)(context) : '';
947     },
949     /**
950      * Returns the context with which to render a media template.
951      *
952      * @method _getContextForMediaHTML
953      * @param  {Y.Node} tab The tab from which to extract data
954      * @return {Object}
955      * @private
956      */
957     _getContextForMediaHTML: function(tab) {
958         var tracks = [];
960         tab.all(SELECTORS.TRACK).each(function(track) {
961             tracks.push({
962                 track: track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value'),
963                 kind: this._getTrackTypeFromTabPane(track.ancestor('.tab-pane')),
964                 label: track.one(SELECTORS.TRACK_LABEL_INPUT).get('value') ||
965                     track.one(SELECTORS.TRACK_LANG_INPUT).get('value'),
966                 srclang: track.one(SELECTORS.TRACK_LANG_INPUT).get('value'),
967                 defaultTrack: track.one(SELECTORS.TRACK_DEFAULT_SELECT).get('checked') ? "true" : null
968             });
969         }, this);
971         return {
972             sources: tab.all(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value').filter(function(source) {
973                 return !!source;
974             }).map(function(source) {
975                 return {source: source};
976             }),
977             description: tab.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') || false,
978             tracks: tracks.filter(function(track) {
979                 return !!track.track;
980             }),
981             showControls: tab.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).get('checked'),
982             autoplay: tab.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).get('checked'),
983             muted: tab.one(SELECTORS.MEDIA_MUTE_TOGGLE).get('checked'),
984             loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked'),
985             title: tab.one(SELECTORS.TITLE_INPUT).get('value') || false
986         };
987     }
988 }, {
989     ATTRS: {
990         langs: {},
991         help: {}
992     }
993 });
996 }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "moodle-form-shortforms"]});