��ѧۧݧ�ӧ�� ާ֧ߧ֧էا֧�

��ѧۧݧ�ӧ�� ާ֧ߧ֧էا֧� - ��֧էѧܧ�ڧ��ӧѧ�� - /home3/cpr76684/public_html/media.tar

��ѧ٧ѧ�
styles.css��0000644��00000000126�15152164372�0006606 0��ustar�00��.atto_form.atto_media > .tab-content { max-height: 45vh; overflow-x: hidden; }��tests/behat/media.feature��0000644��00000041160�15152164372�0011435 0��ustar�00��@editor @editor_atto @atto @atto_media @_file_upload Feature: Add media to Atto To write rich text - I need to add media. Background: Given the following "blocks" exist: \| blockname \| contextlevel \| reference \| pagetypepattern \| defaultregion \| \| private_files \| System \| 1 \| my-index \| side-post \| And I log in as "admin" And I change window size to "large" And I follow "Manage private files..." And I upload "lib/editor/atto/tests/fixtures/moodle-logo.webm" file to "Files" filemanager And I upload "lib/editor/atto/tests/fixtures/moodle-logo.mp4" file to "Files" filemanager And I upload "lib/editor/atto/tests/fixtures/moodle-logo.png" file to "Files" filemanager And I upload "lib/editor/atto/tests/fixtures/pretty-good-en.vtt" file to "Files" filemanager And I upload "lib/editor/atto/tests/fixtures/pretty-good-sv.vtt" file to "Files" filemanager And I click on "Save changes" "button" And I follow "Profile" in the user menu And I follow "Blog entries" And I follow "Add a new entry" And I set the field "Blog entry body" to "<p>Media test</p>" And I select the text in the "Blog entry body" Atto editor And I set the field "Entry title" to "The best video in the entire world (not really)" And I click on "Insert or edit an audio/video file" "button" @javascript Scenario: Insert some media as a link Given I click on "Browse repositories..." "button" in the "#id_summary_editor_link .atto_media_source.atto_media_link_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.webm" "link" And I click on "Select this file" "button" And the field "Enter name" matches value "moodle-logo.webm" And I wait until the page is ready And I click on "Insert media" "button" When I click on "Save changes" "button" Then "//a[. = 'moodle-logo.webm']" "xpath_element" should exist @javascript @atto_media_video Scenario: Insert some media as a plain video Given I click on "Video" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.webm" "link" And I click on "Select this file" "button" And I click on "Add alternative source" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source:nth-of-type(2)" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.mp4" "link" And I click on "Select this file" "button" When I click on "Insert media" "button" Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][descendant::source[contains(@src, 'moodle-logo.mp4')]]" "xpath_element" should exist @javascript @atto_media_video Scenario: Insert some media as a video with display settings Given I click on "Video" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.webm" "link" And I click on "Select this file" "button" And I click on "Display options" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_poster_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "moodle-logo.png" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I set the field with xpath "//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_width_entry ')]" to "420" And I set the field with xpath "//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_height_entry ')]" to "69" And I set the field "Enter title" to "VideoTitle" And I click on "Display options" "link" When I click on "Insert media" "button" Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][contains(@poster, 'moodle-logo.png')][@width=420][@height=69][@title='VideoTitle']" "xpath_element" should exist @javascript @atto_media_video Scenario: Insert some media as a video with advanced settings Given I click on "Video" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.webm" "link" And I click on "Select this file" "button" And I click on "Advanced settings" "link" And the field "Show controls" matches value "1" And I set the field "Play automatically" to "1" And I set the field "Muted" to "1" And I set the field "Loop" to "1" When I click on "Insert media" "button" Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][@controls='true'][@loop='true'][@autoplay='true'][@autoplay='true']" "xpath_element" should exist @javascript @atto_media_video Scenario: Insert some media as a video with tracks Given I click on "Video" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.webm" "link" And I click on "Select this file" "button" And I click on "Subtitles and captions" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_subtitles .atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-sv.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And the field "Label" matches value "Swedish" And the field "Language" matches value "sv" And I click on "Add subtitle track" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_subtitles .atto_media_track~.atto_media_track .atto_media_source.atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-en.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[2]" matches value "English" And I set the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_default ')])[1]" to "1" And I click on "Captions" "link" in the ".nav-item[data-track-kind='captions']" "css_element" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_captions .atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-sv.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[3]" matches value "Swedish" And I click on "Add caption track" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_captions .atto_media_track~.atto_media_track .atto_media_source.atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-en.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[4]" matches value "English" And I set the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_default ')])[4]" to "1" And I click on "Descriptions" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_descriptions .atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-sv.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[5]" matches value "Swedish" And I click on "Add description track" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_descriptions .atto_media_track~.atto_media_track .atto_media_source.atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-en.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[6]" matches value "English" And I set the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_default ')])[5]" to "1" And I click on "Chapters" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_chapters .atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-sv.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[7]" matches value "Swedish" And I click on "Add chapter track" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_chapters .atto_media_track~.atto_media_track .atto_media_source.atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-en.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[8]" matches value "English" And I set the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_default ')])[8]" to "1" And I click on "Metadata" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_metadata .atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-sv.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[9]" matches value "Swedish" And I click on "Add metadata track" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_video_metadata .atto_media_track~.atto_media_track .atto_media_source.atto_media_track_source" "css_element" And I click on "Private files" "link" in the ".moodle-dialogue-base[aria-hidden='false'] .fp-repo-area" "css_element" And I click on "pretty-good-en.vtt" "link" And I click on "Select this file" "button" in the ".moodle-dialogue-base[aria-hidden='false']" "css_element" And I click on "Overwrite" "button" And the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_label_entry ')])[10]" matches value "English" And I set the field with xpath "(//[contains(concat(' ', normalize-space(@class), ' '), ' atto_media_track_default ')])[9]" to "1" When I click on "Insert media" "button" Then "//video[descendant::source[contains(@src, 'moodle-logo.webm')]][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='subtitles'][@label='Swedish'][@srclang='sv'][@default='true']][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='subtitles'][@label='English'][@srclang='en'][not(@default)]][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='captions'][@label='Swedish'][@srclang='sv'][not(@default)]][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='captions'][@label='English'][@srclang='en'][@default='true']][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='descriptions'][@label='Swedish'][@srclang='sv'][@default='true']][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='descriptions'][@label='English'][@srclang='en'][not(@default)]][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='chapters'][@label='Swedish'][@srclang='sv'][not(@default)]][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='chapters'][@label='English'][@srclang='en'][@default='true']][descendant::track[contains(@src, 'pretty-good-sv.vtt')][@kind='metadata'][@label='Swedish'][@srclang='sv'][@default='true']][descendant::track[contains(@src, 'pretty-good-en.vtt')][@kind='metadata'][@label='English'][@srclang='en'][not(@default)]]" "xpath_element" should exist @javascript @atto_media_audio Scenario: Insert some media as a plain audio Given I click on "Audio" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_audio .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.mp4" "link" And I click on "Select this file" "button" When I click on "Insert media" "button" Then "//audio[descendant::source[contains(@src, 'moodle-logo.mp4')]]" "xpath_element" should exist @javascript @atto_media_audio Scenario: Insert some media as an audio with display settings Given I click on "Audio" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_audio .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.mp4" "link" And I click on "Select this file" "button" And I click on "Display options" "link" in the "#id_summary_editor_audio" "css_element" And I set the field "audio_media-title-entry" to "AudioTitle" When I click on "Insert media" "button" Then "//audio[descendant::source[contains(@src, 'moodle-logo.mp4')]][@title='AudioTitle']" "xpath_element" should exist @javascript @atto_media_audio Scenario: Insert some media as an audio with advanced settings Given I click on "Audio" "link" And I click on "Browse repositories..." "button" in the "#id_summary_editor_audio .atto_media_source.atto_media_media_source" "css_element" And I click on "Private files" "link" in the ".fp-repo-area" "css_element" And I click on "moodle-logo.mp4" "link" And I click on "Select this file" "button" And I click on "Advanced settings" "link" in the "#id_summary_editor_audio" "css_element" And the field "audio_media-controls-toggle" matches value "1" And I set the field "audio_media-autoplay-toggle" to "1" And I set the field "audio_media-mute-toggle" to "1" And I set the field "audio_media-loop-toggle" to "1" When I click on "Insert media" "button" Then "//audio[descendant::source[contains(@src, 'moodle-logo.mp4')]][@controls='true'][@loop='true'][@autoplay='true'][@autoplay='true']" "xpath_element" should exist ��styles_clean.css��0000644��00000000737�15152164372�0007760 0��ustar�00��.nav-tabs > .nav-item a.active { color: #555; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; } .atto_form.atto_media .atto_media_track_lang_entry, .atto_form.atto_media .atto_media_track_label_entry { width: 124px; } .atto_form.atto_media .atto_media_source > label { width: calc(100% - 168px); } .langlabel { width: 42%; } .labellabel { width: 44%; } .defaultlabel { width: 14%; } ��lib.php��0000644��00000012637�15152164372�0006042 0��ustar�00��<?php // This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. /** * Atto text editor integration version file. * * @package atto_media * @copyright 2013 Damyon Wiese <damyon@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / /* * Initialise the js strings required for this plugin / function atto_media_strings_for_js() { global $PAGE; $PAGE->requires->strings_for_js(array('add', 'addcaptionstrack', 'addchapterstrack', 'adddescriptionstrack', 'addmetadatatrack', 'addsource', 'addsubtitlestrack', 'addtrack', 'advancedsettings', 'audio', 'audiosourcelabel', 'autoplay', 'browserepositories', 'browserepositories', 'captions', 'captionssourcelabel', 'chapters', 'chapterssourcelabel', 'controls', 'createmedia', 'default', 'descriptions', 'descriptionssourcelabel', 'displayoptions', 'entername', 'entertitle', 'entersource', 'enterurl', 'height', 'kind', 'label', 'languagesavailable', 'languagesinstalled', 'link', 'loop', 'metadata', 'metadatasourcelabel', 'mute', 'poster', 'remove', 'size', 'srclang', 'subtitles', 'subtitlessourcelabel', 'track', 'tracks', 'video', 'videoheight', 'videosourcelabel', 'videowidth', 'width'), 'atto_media'); $PAGE->requires->strings_for_js(array('expand', 'collapse'), 'moodle'); } /* * Sends the parameters to the JS module. * * @return array / function atto_media_params_for_js() { global $OUTPUT; global $PAGE; $currentlang = current_language(); $langsinstalled = get_string_manager()->get_list_of_translations(true); $langsavailable = get_string_manager()->get_list_of_languages(); $params = [ 'langs' => ['installed' => [], 'available' => []], 'help' => [] ]; foreach ($langsinstalled as $code => $name) { $params['langs']['installed'][] = [ 'lang' => $name, 'code' => $code, 'default' => $currentlang == $code ]; } foreach ($langsavailable as $code => $name) { // See MDL-50829 for an explanation of this lrm thing. $lrm = json_decode('"\u200E"'); $params['langs']['available'][] = [ 'lang' => $name . ' ' . $lrm . '(' . $code . ')' . $lrm, 'code' => $code]; } $params['help'] = [ 'addsource' => $OUTPUT->help_icon('addsource', 'atto_media'), 'tracks' => $OUTPUT->help_icon('tracks', 'atto_media'), 'subtitles' => $OUTPUT->help_icon('subtitles', 'atto_media'), 'captions' => $OUTPUT->help_icon('captions', 'atto_media'), 'descriptions' => $OUTPUT->help_icon('descriptions', 'atto_media'), 'chapters' => $OUTPUT->help_icon('chapters', 'atto_media'), 'metadata' => $OUTPUT->help_icon('metadata', 'atto_media') ]; return $params; } ��version.php��0000644��00000002244�15152164372�0006752 0��ustar�00��<?php // This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. /* * Atto text editor integration version file. * * @package atto_media * @copyright 2013 Damyon Wiese <damyon@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / defined('MOODLE_INTERNAL') \|\| die(); $plugin->version = 2022112800; // The current plugin version (Date: YYYYMMDDXX). $plugin->requires = 2022111800; // Requires this Moodle version. $plugin->component = 'atto_media'; // Full name of the plugin (used for diagnostics). ��classes/privacy/provider.php��0000644��00000002773�15152164372�0012240 0��ustar�00��<?php // This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. /* * Privacy Subsystem implementation for block_activity_modules. * * @package atto_media * @copyright 2018 Andrew Nicols <andrew@nicols.co.uk> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / namespace atto_media\privacy; defined('MOODLE_INTERNAL') \|\| die(); /* * Privacy Subsystem for atto_media implementing null_provider. * * @copyright 2018 Andrew Nicols <andrew@nicols.co.uk> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / class provider implements \core_privacy\local\metadata\null_provider { /* * Get the language string identifier with the component's language * file to explain why this plugin stores no data. * * @return string / public static function get_reason() : string { return 'privacy:metadata'; } } ��yui/build/moodle-atto_media-button/moodle-atto_media-button.js��0000644��00000146655�15152164372�0020626 0��ustar�00��YUI.add('moodle-atto_media-button', function (Y, NAME) { // This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. / * @package atto_media * @copyright 2013 Damyon Wiese <damyon@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / /* * @module moodle-atto_media-button / /* * Atto media selection tool. * * @namespace M.atto_media * @class Button * @extends M.editor_atto.EditorPlugin / var COMPONENTNAME = 'atto_media', MEDIA_TYPES = {LINK: 'LINK', VIDEO: 'VIDEO', AUDIO: 'AUDIO'}, TRACK_KINDS = { SUBTITLES: 'SUBTITLES', CAPTIONS: 'CAPTIONS', DESCRIPTIONS: 'DESCRIPTIONS', CHAPTERS: 'CHAPTERS', METADATA: 'METADATA' }, CSS = { SOURCE: 'atto_media_source', TRACK: 'atto_media_track', MEDIA_SOURCE: 'atto_media_media_source', LINK_SOURCE: 'atto_media_link_source', POSTER_SOURCE: 'atto_media_poster_source', TRACK_SOURCE: 'atto_media_track_source', DISPLAY_OPTIONS: 'atto_media_display_options', NAME_INPUT: 'atto_media_name_entry', TITLE_INPUT: 'atto_media_title_entry', URL_INPUT: 'atto_media_url_entry', POSTER_SIZE: 'atto_media_poster_size', LINK_SIZE: 'atto_media_link_size', WIDTH_INPUT: 'atto_media_width_entry', HEIGHT_INPUT: 'atto_media_height_entry', TRACK_KIND_INPUT: 'atto_media_track_kind_entry', TRACK_LABEL_INPUT: 'atto_media_track_label_entry', TRACK_LANG_INPUT: 'atto_media_track_lang_entry', TRACK_DEFAULT_SELECT: 'atto_media_track_default', MEDIA_CONTROLS_TOGGLE: 'atto_media_controls', MEDIA_AUTOPLAY_TOGGLE: 'atto_media_autoplay', MEDIA_MUTE_TOGGLE: 'atto_media_mute', MEDIA_LOOP_TOGGLE: 'atto_media_loop', ADVANCED_SETTINGS: 'atto_media_advancedsettings', LINK: MEDIA_TYPES.LINK.toLowerCase(), VIDEO: MEDIA_TYPES.VIDEO.toLowerCase(), AUDIO: MEDIA_TYPES.AUDIO.toLowerCase(), TRACK_SUBTITLES: TRACK_KINDS.SUBTITLES.toLowerCase(), TRACK_CAPTIONS: TRACK_KINDS.CAPTIONS.toLowerCase(), TRACK_DESCRIPTIONS: TRACK_KINDS.DESCRIPTIONS.toLowerCase(), TRACK_CHAPTERS: TRACK_KINDS.CHAPTERS.toLowerCase(), TRACK_METADATA: TRACK_KINDS.METADATA.toLowerCase() }, SELECTORS = { SOURCE: '.' + CSS.SOURCE, TRACK: '.' + CSS.TRACK, MEDIA_SOURCE: '.' + CSS.MEDIA_SOURCE, POSTER_SOURCE: '.' + CSS.POSTER_SOURCE, TRACK_SOURCE: '.' + CSS.TRACK_SOURCE, DISPLAY_OPTIONS: '.' + CSS.DISPLAY_OPTIONS, NAME_INPUT: '.' + CSS.NAME_INPUT, TITLE_INPUT: '.' + CSS.TITLE_INPUT, URL_INPUT: '.' + CSS.URL_INPUT, POSTER_SIZE: '.' + CSS.POSTER_SIZE, LINK_SIZE: '.' + CSS.LINK_SIZE, WIDTH_INPUT: '.' + CSS.WIDTH_INPUT, HEIGHT_INPUT: '.' + CSS.HEIGHT_INPUT, TRACK_KIND_INPUT: '.' + CSS.TRACK_KIND_INPUT, TRACK_LABEL_INPUT: '.' + CSS.TRACK_LABEL_INPUT, TRACK_LANG_INPUT: '.' + CSS.TRACK_LANG_INPUT, TRACK_DEFAULT_SELECT: '.' + CSS.TRACK_DEFAULT_SELECT, MEDIA_CONTROLS_TOGGLE: '.' + CSS.MEDIA_CONTROLS_TOGGLE, MEDIA_AUTOPLAY_TOGGLE: '.' + CSS.MEDIA_AUTOPLAY_TOGGLE, MEDIA_MUTE_TOGGLE: '.' + CSS.MEDIA_MUTE_TOGGLE, MEDIA_LOOP_TOGGLE: '.' + CSS.MEDIA_LOOP_TOGGLE, ADVANCED_SETTINGS: '.' + CSS.ADVANCED_SETTINGS, LINK_TAB: 'li[data-medium-type="' + CSS.LINK + '"]', LINK_PANE: '.tab-pane[data-medium-type="' + CSS.LINK + '"]', VIDEO_TAB: 'li[data-medium-type="' + CSS.VIDEO + '"]', VIDEO_PANE: '.tab-pane[data-medium-type="' + CSS.VIDEO + '"]', AUDIO_TAB: 'li[data-medium-type="' + CSS.AUDIO + '"]', AUDIO_PANE: '.tab-pane[data-medium-type="' + CSS.AUDIO + '"]', TRACK_SUBTITLES_TAB: 'li[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]', TRACK_SUBTITLES_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]', TRACK_CAPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]', TRACK_CAPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]', TRACK_DESCRIPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]', TRACK_DESCRIPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]', TRACK_CHAPTERS_TAB: 'li[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]', TRACK_CHAPTERS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]', TRACK_METADATA_TAB: 'li[data-track-kind="' + CSS.TRACK_METADATA + '"]', TRACK_METADATA_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_METADATA + '"]' }, TEMPLATES = { ROOT: '' + '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' + '<ul class="root nav nav-tabs mb-1" role="tablist">' + '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' + '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' + '{{get_string "link" component}}' + '</a>' + '</li>' + '<li data-medium-type="{{CSS.VIDEO}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">' + '{{get_string "video" component}}' + '</a>' + '</li>' + '<li data-medium-type="{{CSS.AUDIO}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">' + '{{get_string "audio" component}}' + '</a>' + '</li>' + '</ul>' + '<div class="root tab-content">' + '<div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">' + '{{> tab_panes.link}}' + '</div>' + '<div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">' + '{{> tab_panes.video}}' + '</div>' + '<div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">' + '{{> tab_panes.audio}}' + '</div>' + '</div>' + '<div class="mdl-align">' + '<br/>' + '<button class="btn btn-secondary submit" type="submit">{{get_string "createmedia" component}}</button>' + '</div>' + '</form>', TAB_PANES: { LINK: '' + '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' + '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' + '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' + 'size="32" required="true"/>', VIDEO: '' + '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' + ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options">' + '<input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vdisplayoptions" name="displayoptions"}}' + '<div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings">' + '<input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}' + '<div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks">' + '<input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vtracks" name="tracks" help=helpStrings.tracks}}' + '<div id="vtracks" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}' + '</div>' + '</fieldset>', AUDIO: '' + '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel"' + ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options">' + '<input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">' + '{{renderPartial "form_components.section" context=this id="adisplayoptions" name="displayoptions"}}' + '<div id="adisplayoptions" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings">' + '<input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">' + '{{renderPartial "form_components.section" context=this id="aadvancedsettings" name="advancedsettings"}}' + '<div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks">' + '<input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">' + '{{renderPartial "form_components.section" context=this id="atracks" name="tracks" help=helpStrings.tracks}}' + '<div id="atracks" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' }, FORM_COMPONENTS: { SOURCE: '' + '<div class="{{CSS.SOURCE}} {{id}}">' + '<div class="mb-1">' + '<label for="url-input">' + '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' + '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' + '</label>' + '<div class="input-group input-append w-100">' + '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' + '<span class="input-group-append">' + '<button class="btn btn-secondary openmediabrowser" type="button">' + '{{get_string "browserepositories" component}}</button>' + '</span>' + '</div>' + '</div>' + '{{#multisource}}' + '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' + ' help=../addsourcehelp}}' + '{{/multisource}}' + '</div>', ADD_COMPONENT: '' + '<div>' + '<a href="#" class="addcomponent">' + '{{#label}}{{get_string ../label ../component}}{{/label}}' + '{{^label}}{{get_string "add" ../component}}{{/label}}' + '</a>' + '{{#help}}{{{../help}}}{{/help}}' + '</div>', REMOVE_COMPONENT: '' + '<div>' + '<a href="#" class="removecomponent">' + '{{#label}}{{get_string ../label ../component}}{{/label}}' + '{{^label}}{{get_string "remove" ../component}}{{/label}}' + '</a>' + '</div>', DISPLAY_OPTIONS: '' + '<div class="{{CSS.DISPLAY_OPTIONS}}">' + '<div class="mb-1">' + '<label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label>' + '<input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"' + 'size="32"/>' + '</div>' + '<div class="clearfix"></div>' + '{{#mediatype_video}}' + '<div class="mb-1">' + '<label>{{get_string "size" component}}</label>' + '<div class="form-inline {{CSS.POSTER_SIZE}}">' + '<label class="accesshide">{{get_string "videowidth" component}}</label>' + '<input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' + ' x ' + '<label class="accesshide">{{get_string "videoheight" component}}</label>' + '<input type="text" class="form-control ml-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' + '</div>' + '</div>' + '<div class="clearfix"></div>' + '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' + '{{/mediatype_video}}' + '<div>', ADVANCED_SETTINGS: '' + '<div class="{{CSS.ADVANCED_SETTINGS}}">' + '<div class="form-check">' + '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' + 'id="{{id}}_media-controls-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-controls-toggle">' + '{{get_string "controls" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' + 'id="{{id}}_media-autoplay-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-autoplay-toggle">' + '{{get_string "autoplay" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" ' + 'id="{{id}}_media-mute-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-mute-toggle">' + '{{get_string "mute" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" ' + 'id="{{id}}_media-loop-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-loop-toggle">' + '{{get_string "loop" component}}' + '</label>' + '</div>' + '</div>', TRACK_TABS: '' + '<ul class="nav nav-tabs mb-3">' + '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' + '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' + ' role="tab" data-toggle="tab">' + '{{get_string "subtitles" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">' + '{{get_string "captions" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"' + ' role="tab" data-toggle="tab">' + '{{get_string "descriptions" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">' + '{{get_string "chapters" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">' + '{{get_string "metadata" component}}' + '</a>' + '</li>' + '</ul>' + '<div class="tab-content">' + '<div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}">' + '<div class="trackhelp">{{{helpStrings.subtitles}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel"' + ' addcomponentlabel="addsubtitlestrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}">' + '<div class="trackhelp">{{{helpStrings.captions}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel"' + ' addcomponentlabel="addcaptionstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}">' + '<div class="trackhelp">{{{helpStrings.descriptions}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel"' + ' addcomponentlabel="adddescriptionstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}">' + '<div class="trackhelp">{{{helpStrings.chapters}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel"' + ' addcomponentlabel="addchapterstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}">' + '<div class="trackhelp">{{{helpStrings.metadata}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel"' + ' addcomponentlabel="addmetadatatrack"}}' + '</div>' + '</div>', TRACK: '' + '<div class="mb-1 {{CSS.TRACK}}">' + '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' + '<div class="form-group">' + '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' + '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' + '<optgroup label="{{get_string "languagesinstalled" component}}">' + '{{#langsinstalled}}' + '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' + '{{/langsinstalled}}' + '</optgroup>' + '<optgroup label="{{get_string "languagesavailable" component}} ">' + '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' + '</optgroup>' + '</select>' + '</div>' + '<div class="form-group">' + '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' + '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' + '<label class="form-check-label">{{get_string "default" component}}</label>' + '</div>' + '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' + '</div>', SECTION: '' + '<legend class="d-flex align-items-center px-1">' + '<div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">' + '<a role="button" data-toggle="collapse" href="#{{id}}" aria-expanded="false"' + 'aria-controls="{{id}}"' + 'class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">' + '<span class="expanded-icon icon-no-margin p-2" title="{{get_string "collapse" "moodle"}}">' + '<i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>' + '</span>' + '<span class="collapsed-icon icon-no-margin p-2" title="{{get_string "expand" "moodle"}}">' + '<span class="dir-rtl-hide">' + '<i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>' + '</span>' + '<span class="dir-ltr-hide">' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '</span>' + '</span>' + '<span class="sr-only">{{get_string name component}}</span>' + '</a>' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '{{get_string name component}}' + '</h3>' + '</div>' + '{{#help}}{{{../help}}}{{/help}}' + '</legend>' }, HTML_MEDIA: { VIDEO: '' + ' <video ' + '{{#width}}width="{{../width}}" {{/width}}' + '{{#height}}height="{{../height}}" {{/height}}' + '{{#poster}}poster="{{../poster}}" {{/poster}}' + '{{#showControls}}controls="true" {{/showControls}}' + '{{#loop}}loop="true" {{/loop}}' + '{{#muted}}muted="true" {{/muted}}' + '{{#autoplay}}autoplay="true" {{/autoplay}}' + '{{#title}}title="{{../title}}" {{/title}}' + '>' + '{{#sources}}<source src="{{source}}">{{/sources}}' + '{{#tracks}}' + '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' + ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' + '{{/tracks}}' + '{{#description}}{{../description}}{{/description}}' + '</video>&nbsp', AUDIO: '' + ' <audio ' + '{{#showControls}}controls="true" {{/showControls}}' + '{{#loop}}loop="true" {{/loop}}' + '{{#muted}}muted="true" {{/muted}}' + '{{#autoplay}}autoplay="true" {{/autoplay}}' + '{{#title}}title="{{../title}}" {{/title}}' + '>' + '{{#sources}}<source src="{{source}}">{{/sources}}' + '{{#tracks}}' + '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' + ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' + '{{/tracks}}' + '{{#description}}{{../description}}{{/description}}' + '</audio>&nbsp', LINK: '' + '<a href="{{url}}" ' + '{{#width}}data-width="{{../width}}" {{/width}}' + '{{#height}}data-height="{{../height}}"{{/height}}' + '>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>' } }; Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { initializer: function() { if (this.get('host').canShowFilepicker('media')) { this.editor.delegate('dblclick', this._displayDialogue, 'video', this); this.editor.delegate('click', this._handleClick, 'video', this); // For some reason, clicking the video on Firefox does not trigger the click event, while in Chrome it does. // We also need to handle the play/pause instead. this._attachPlayPauseEvents(); var changeHandler = this._attachPlayPauseEvents.bind(this); this.get('host').on('change', changeHandler, null); this.addButton({ icon: 'e/insert_edit_video', callback: this._displayDialogue, tags: 'video, audio', tagMatchRequiresAll: false }); } }, /* * Attaches Play/Pause events to the video nodes. * * @private / _attachPlayPauseEvents: function() { if (this._handlePlayEndBound === undefined) { this._handlePlayEndBound = this._handlePlayEnd.bind(this); } var videos = this.editor.getDOMNode().querySelectorAll('video'); videos.forEach(function(video) { // Prevent duplicated event listeners. video.removeEventListener('play', this._handlePlayEndBound); video.removeEventListener('pause', this._handlePlayEndBound); // Add event listeners. video.addEventListener('play', this._handlePlayEndBound); video.addEventListener('pause', this._handlePlayEndBound); }.bind(this)); }, /* * Gets the root context for all templates, with extra supplied context. * * @method _getContext * @param {Object} extra The extra context to add * @return {Object} * @private / _getContext: function(extra) { return Y.merge({ elementid: this.get('host').get('elementid'), component: COMPONENTNAME, langsinstalled: this.get('langs').installed, langsavailable: this.get('langs').available, helpStrings: this.get('help'), CSS: CSS }, extra); }, /* * Handles a click on a media element. * * @method _handleClick * @param {EventFacade} e * @private / _handleClick: function(e) { var medium = e.target; var selection = this.get('host').getSelectionFromNode(medium); if (this.get('host').getSelection() !== selection) { this.get('host').setSelection(selection); } }, /* * Handles a play/end on a media element. * * @method _handlePlayEnd * @param {Event} e * @private / _handlePlayEnd: function(e) { var medium = Y.one(e.target); var selection = this.get('host').getSelectionFromNode(medium); if (this.get('host').getSelection() !== selection) { this.get('host').setSelection(selection); this.get('host')._hasSelectionChanged(e); } }, /* * Display the media editing tool. * * @method _displayDialogue * @private / _displayDialogue: function() { if (this.get('host').getSelection() === false) { return; } if (!('renderPartial' in Y.Handlebars.helpers)) { (function smashPartials(chain, obj) { Y.each(obj, function(value, index) { chain.push(index); if (typeof value !== "object") { Y.Handlebars.registerPartial(chain.join('.').toLowerCase(), value); } else { smashPartials(chain, value); } chain.pop(); }); })([], TEMPLATES); Y.Handlebars.registerHelper('renderPartial', function(partialName, options) { if (!partialName) { return ''; } var partial = Y.Handlebars.partials[partialName]; var parentContext = options.hash.context ? Y.clone(options.hash.context) : {}; var context = Y.merge(parentContext, options.hash); delete context.context; if (!partial) { return ''; } return new Y.Handlebars.SafeString(Y.Handlebars.compile(partial)(context)); }); } var dialogue = this.getDialogue({ headerContent: M.util.get_string('createmedia', COMPONENTNAME), focusAfterHide: true, width: 660, focusOnShowSelector: SELECTORS.URL_INPUT }); // Set the dialogue content, and then show the dialogue. dialogue.set('bodyContent', this._getDialogueContent(this.get('host').getSelection())).show(); M.form.shortforms({formid: this.get('host').get('elementid') + '_atto_media_form'}); }, /* * Returns the dialogue content for the tool. * * @method _getDialogueContent * @param {WrappedRange[]} selection Current editor selection * @return {Y.Node} * @private / _getDialogueContent: function(selection) { var content = Y.Node.create( Y.Handlebars.compile(TEMPLATES.ROOT)(this._getContext()) ); var medium = this.get('host').getSelectedNodes().filter('video,audio').shift(); var mediumProperties = medium ? this._getMediumProperties(medium) : false; return this._attachEvents(this._applyMediumProperties(content, mediumProperties), selection); }, /* * Attaches required events to the content node. * * @method _attachEvents * @param {Y.Node} content The content to which events will be attached * @param {WrappedRange[]} selection Current editor selection * @return {Y.Node} * @private / _attachEvents: function(content, selection) { // Delegate add component link for media source fields. content.delegate('click', function(e) { e.preventDefault(); this._addMediaSourceComponent(e.currentTarget); }, SELECTORS.MEDIA_SOURCE + ' .addcomponent', this); // Delegate add component link for track fields. content.delegate('click', function(e) { e.preventDefault(); this._addTrackComponent(e.currentTarget); }, SELECTORS.TRACK + ' .addcomponent', this); // Only allow one track per tab to be selected as "default". content.delegate('click', function(e) { var element = e.currentTarget; if (element.get('checked')) { var getKind = function(el) { return this._getTrackTypeFromTabPane(el.ancestor('.tab-pane')); }.bind(this); element.ancestor('.root.tab-content').all(SELECTORS.TRACK_DEFAULT_SELECT).each(function(select) { if (select !== element && getKind(element) === getKind(select)) { select.set('checked', false); } }); } }, SELECTORS.TRACK_DEFAULT_SELECT, this); // Set up filepicker click event. content.delegate('click', function(e) { var element = e.currentTarget; var fptype = (element.ancestor(SELECTORS.POSTER_SOURCE) && 'image') \|\| (element.ancestor(SELECTORS.TRACK_SOURCE) && 'subtitle') \|\| 'media'; e.preventDefault(); this.get('host').showFilepicker(fptype, this._getFilepickerCallback(element, fptype), this); }, '.openmediabrowser', this); // This is a nasty hack. Basically we are using BS4 markup for the tabs // but it isn't completely backwards compatible with BS2. The main problem is // that the "active" class goes on a different node. So the idea is to put it // the node for BS4, and then use CSS to make it look right in BS2. However, // once another tab is clicked, everything sorts itself out, more or less. Except // that the original "active" tab hasn't had the BS4 "active" class removed // (so the styles will still apply to it). So we need to remove the "active" // class on the BS4 node so that BS2 is happy. // // This doesn't upset BS4 since it removes this class anyway when clicking on // another tab. content.all('.nav-item').on('click', function(elem) { elem.currentTarget.get('parentNode').all('.active').removeClass('active'); }); content.one('.submit').on('click', function(e) { e.preventDefault(); var mediaHTML = this._getMediaHTML(e.currentTarget.ancestor('.atto_form')), host = this.get('host'); this.getDialogue({ focusAfterHide: null }).hide(); if (mediaHTML) { host.setSelection(selection); host.insertContentAtFocusPoint(mediaHTML); this.markUpdated(); } }, this); return content; }, /* * Applies medium properties to the content node. * * @method _applyMediumProperties * @param {Y.Node} content The content to apply the properties to * @param {object} properties The medium properties to apply * @return {Y.Node} * @private / _applyMediumProperties: function(content, properties) { if (!properties) { return content; } var applyTrackProperties = function(track, properties) { track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.src); track.one(SELECTORS.TRACK_LANG_INPUT).set('value', properties.srclang); track.one(SELECTORS.TRACK_LABEL_INPUT).set('value', properties.label); track.one(SELECTORS.TRACK_DEFAULT_SELECT).set('checked', properties.defaultTrack); }; var tabPane = content.one('.root.tab-content > .tab-pane#' + this.get('host').get('elementid') + '_' + properties.type.toLowerCase()); // Populate sources. tabPane.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.sources[0]); Y.Array.each(properties.sources.slice(1), function(source) { this._addMediaSourceComponent(tabPane.one(SELECTORS.MEDIA_SOURCE + ' .addcomponent'), function(newComponent) { newComponent.one(SELECTORS.URL_INPUT).set('value', source); }); }, this); // Populate tracks. Y.Object.each(properties.tracks, function(value, key) { var trackData = value.length ? value : [{src: '', srclang: '', label: '', defaultTrack: false}]; var paneSelector = SELECTORS['TRACK_' + key.toUpperCase() + '_PANE']; applyTrackProperties(tabPane.one(paneSelector + ' ' + SELECTORS.TRACK), trackData[0]); Y.Array.each(trackData.slice(1), function(track) { this._addTrackComponent( tabPane.one(paneSelector + ' ' + SELECTORS.TRACK + ' .addcomponent'), function(newComponent) { applyTrackProperties(newComponent, track); }); }, this); }, this); // Populate values. tabPane.one(SELECTORS.TITLE_INPUT).set('value', properties.title); tabPane.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).set('checked', properties.controls); tabPane.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).set('checked', properties.autoplay); tabPane.one(SELECTORS.MEDIA_MUTE_TOGGLE).set('checked', properties.muted); tabPane.one(SELECTORS.MEDIA_LOOP_TOGGLE).set('checked', properties.loop); // Determine medium type. var mediumType = this._getMediumTypeFromTabPane(tabPane); if (mediumType === 'video') { // Populate values unique for video. tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster); tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width); tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height); } // Switch to the correct tab. // Remove active class from all tabs + tab panes. tabPane.siblings('.active').removeClass('active'); content.all('.root.nav-tabs .nav-item a').removeClass('active'); // Add active class to the desired tab and tab pane. tabPane.addClass('active'); content.one(SELECTORS[mediumType.toUpperCase() + '_TAB'] + ' a').addClass('active'); return content; }, /* * Extracts medium properties. * * @method _getMediumProperties * @param {Y.Node} medium The medium node from which to extract * @return {Object} * @private / _getMediumProperties: function(medium) { var boolAttr = function(elem, attr) { // As explained in MDL-64175, some OS (like Ubuntu), are removing the value for these attributes. // So in order to check if attr="true", we need to check if the attribute exists and if the value is empty or true. return (elem.hasAttribute(attr) && (elem.getAttribute(attr) \|\| elem.getAttribute(attr) === '')); }; var tracks = { subtitles: [], captions: [], descriptions: [], chapters: [], metadata: [] }; medium.all('track').each(function(track) { tracks[track.getAttribute('kind')].push({ src: track.getAttribute('src'), srclang: track.getAttribute('srclang'), label: track.getAttribute('label'), defaultTrack: boolAttr(track, 'default') }); }); return { type: medium.test('video') ? MEDIA_TYPES.VIDEO : MEDIA_TYPES.AUDIO, sources: medium.all('source').get('src'), poster: medium.getAttribute('poster'), title: medium.getAttribute('title'), width: medium.getAttribute('width'), height: medium.getAttribute('height'), autoplay: boolAttr(medium, 'autoplay'), loop: boolAttr(medium, 'loop'), muted: boolAttr(medium, 'muted'), controls: boolAttr(medium, 'controls'), tracks: tracks }; }, /* * Adds a track form component. * * @method _addTrackComponent * @param {Y.Node} element The element which was used to trigger this function * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addTrackComponent: function(element, callback) { var trackType = this._getTrackTypeFromTabPane(element.ancestor('.tab-pane')); var context = this._getContext({ sourcelabel: trackType + 'sourcelabel', addcomponentlabel: 'add' + trackType + 'track' }); this._addComponent(element, TEMPLATES.FORM_COMPONENTS.TRACK, SELECTORS.TRACK, context, callback); }, /* * Adds a media source form component. * * @method _addMediaSourceComponent * @param {Y.Node} element The element which was used to trigger this function * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addMediaSourceComponent: function(element, callback) { var mediumType = this._getMediumTypeFromTabPane(element.ancestor('.tab-pane')); var context = this._getContext({ multisource: true, id: CSS.MEDIA_SOURCE, entersourcelabel: mediumType + 'sourcelabel', addcomponentlabel: 'addsource', addsourcehelp: this.get('help').addsource }); this._addComponent(element, TEMPLATES.FORM_COMPONENTS.SOURCE, SELECTORS.MEDIA_SOURCE, context, callback); }, /* * Adds an arbitrary form component. * * This function Compiles and adds the provided component in the supplied 'ancestor' container. * It will also add links to add/remove the relevant components, attaching the * necessary events. * * @method _addComponent * @param {Y.Node} element The element which was used to trigger this function * @param {String} component The component to compile and add * @param {String} ancestor A selector used to find an ancestor of 'component', to which * the compiled component will be appended * @param {Object} context The context with which to render the component * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addComponent: function(element, component, ancestor, context, callback) { var currentComponent = element.ancestor(ancestor), newComponent = Y.Node.create(Y.Handlebars.compile(component)(context)), removeNodeContext = this._getContext(context); removeNodeContext.label = "remove"; var removeNode = Y.Node.create(Y.Handlebars.compile(TEMPLATES.FORM_COMPONENTS.REMOVE_COMPONENT)(removeNodeContext)); removeNode.one('.removecomponent').on('click', function(e) { e.preventDefault(); currentComponent.remove(true); }); currentComponent.insert(newComponent, 'after'); element.ancestor().insert(removeNode, 'after'); element.ancestor().remove(true); if (callback) { callback.call(this, newComponent); } }, /* * Returns the callback for the file picker to call after a file has been selected. * * @method _getFilepickerCallback * @param {Y.Node} element The element which triggered the callback * @param {String} fptype The file pickertype (as would be passed to `showFilePicker`) * @return {Function} The function to be used as a callback when the file picker returns the file * @private / _getFilepickerCallback: function(element, fptype) { return function(params) { if (params.url !== '') { var tabPane = element.ancestor('.tab-pane'); element.ancestor(SELECTORS.SOURCE).one(SELECTORS.URL_INPUT).set('value', params.url); // Links (and only links) have a name field. if (tabPane.get('id') === this.get('host').get('elementid') + '_' + CSS.LINK) { tabPane.one(SELECTORS.NAME_INPUT).set('value', params.file); } if (fptype === 'subtitle') { var subtitleLang = params.file.split('.vtt')[0].split('-').slice(-1)[0]; var langObj = this.get('langs').available.reduce(function(carry, lang) { return lang.code === subtitleLang ? lang : carry; }, false); if (langObj) { element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LABEL_INPUT).set('value', langObj.lang.substr(0, langObj.lang.lastIndexOf(' '))); element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LANG_INPUT).set('value', langObj.code); } } } }; }, /* * Given a "medium" tab pane, returns what kind of medium it contains. * * @method _getMediumTypeFromTabPane * @param {Y.Node} tabPane The tab pane * @return {String} The type of medium in the pane / _getMediumTypeFromTabPane: function(tabPane) { return tabPane.getAttribute('data-medium-type'); }, /* * Given a "track" tab pane, returns what kind of track it contains. * * @method _getTrackTypeFromTabPane * @param {Y.Node} tabPane The tab pane * @return {String} The type of track in the pane / _getTrackTypeFromTabPane: function(tabPane) { return tabPane.getAttribute('data-track-kind'); }, /* * Returns the HTML to be inserted to the text area. * * @method _getMediaHTML * @param {Y.Node} form The form from which to extract data * @return {String} The compiled markup * @private / _getMediaHTML: function(form) { var mediumType = this._getMediumTypeFromTabPane(form.one('.root.tab-content > .tab-pane.active')); var tabContent = form.one(SELECTORS[mediumType.toUpperCase() + '_PANE']); return this['_getMediaHTML' + mediumType[0].toUpperCase() + mediumType.substr(1)](tabContent); }, /* * Returns the HTML to be inserted to the text area for the link tab. * * @method _getMediaHTMLLink * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLLink: function(tab) { var context = { url: tab.one(SELECTORS.URL_INPUT).get('value'), name: tab.one(SELECTORS.NAME_INPUT).get('value') \|\| false }; return context.url ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.LINK)(context) : ''; }, /* * Returns the HTML to be inserted to the text area for the video tab. * * @method _getMediaHTMLVideo * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLVideo: function(tab) { var context = this._getContextForMediaHTML(tab); context.width = tab.one(SELECTORS.WIDTH_INPUT).get('value') \|\| false; context.height = tab.one(SELECTORS.HEIGHT_INPUT).get('value') \|\| false; context.poster = tab.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') \|\| false; return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.VIDEO)(context) : ''; }, /* * Returns the HTML to be inserted to the text area for the audio tab. * * @method _getMediaHTMLAudio * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLAudio: function(tab) { var context = this._getContextForMediaHTML(tab); return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.AUDIO)(context) : ''; }, /* * Returns the context with which to render a media template. * * @method _getContextForMediaHTML * @param {Y.Node} tab The tab from which to extract data * @return {Object} * @private / _getContextForMediaHTML: function(tab) { var tracks = []; tab.all(SELECTORS.TRACK).each(function(track) { tracks.push({ track: track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value'), kind: this._getTrackTypeFromTabPane(track.ancestor('.tab-pane')), label: track.one(SELECTORS.TRACK_LABEL_INPUT).get('value') \|\| track.one(SELECTORS.TRACK_LANG_INPUT).get('value'), srclang: track.one(SELECTORS.TRACK_LANG_INPUT).get('value'), defaultTrack: track.one(SELECTORS.TRACK_DEFAULT_SELECT).get('checked') ? "true" : null }); }, this); return { sources: tab.all(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value').filter(function(source) { return !!source; }).map(function(source) { return {source: source}; }), description: tab.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') \|\| false, tracks: tracks.filter(function(track) { return !!track.track; }), showControls: tab.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).get('checked'), autoplay: tab.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).get('checked'), muted: tab.one(SELECTORS.MEDIA_MUTE_TOGGLE).get('checked'), loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked'), title: tab.one(SELECTORS.TITLE_INPUT).get('value') \|\| false }; } }, { ATTRS: { langs: {}, help: {} } }); }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "moodle-form-shortforms"]}); ��yui/build/moodle-atto_media-button/moodle-atto_media-button-debug.js��0000644��00000146655�15152164372�0021712 0��ustar�00��YUI.add('moodle-atto_media-button', function (Y, NAME) { // This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. / * @package atto_media * @copyright 2013 Damyon Wiese <damyon@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / /* * @module moodle-atto_media-button / /* * Atto media selection tool. * * @namespace M.atto_media * @class Button * @extends M.editor_atto.EditorPlugin / var COMPONENTNAME = 'atto_media', MEDIA_TYPES = {LINK: 'LINK', VIDEO: 'VIDEO', AUDIO: 'AUDIO'}, TRACK_KINDS = { SUBTITLES: 'SUBTITLES', CAPTIONS: 'CAPTIONS', DESCRIPTIONS: 'DESCRIPTIONS', CHAPTERS: 'CHAPTERS', METADATA: 'METADATA' }, CSS = { SOURCE: 'atto_media_source', TRACK: 'atto_media_track', MEDIA_SOURCE: 'atto_media_media_source', LINK_SOURCE: 'atto_media_link_source', POSTER_SOURCE: 'atto_media_poster_source', TRACK_SOURCE: 'atto_media_track_source', DISPLAY_OPTIONS: 'atto_media_display_options', NAME_INPUT: 'atto_media_name_entry', TITLE_INPUT: 'atto_media_title_entry', URL_INPUT: 'atto_media_url_entry', POSTER_SIZE: 'atto_media_poster_size', LINK_SIZE: 'atto_media_link_size', WIDTH_INPUT: 'atto_media_width_entry', HEIGHT_INPUT: 'atto_media_height_entry', TRACK_KIND_INPUT: 'atto_media_track_kind_entry', TRACK_LABEL_INPUT: 'atto_media_track_label_entry', TRACK_LANG_INPUT: 'atto_media_track_lang_entry', TRACK_DEFAULT_SELECT: 'atto_media_track_default', MEDIA_CONTROLS_TOGGLE: 'atto_media_controls', MEDIA_AUTOPLAY_TOGGLE: 'atto_media_autoplay', MEDIA_MUTE_TOGGLE: 'atto_media_mute', MEDIA_LOOP_TOGGLE: 'atto_media_loop', ADVANCED_SETTINGS: 'atto_media_advancedsettings', LINK: MEDIA_TYPES.LINK.toLowerCase(), VIDEO: MEDIA_TYPES.VIDEO.toLowerCase(), AUDIO: MEDIA_TYPES.AUDIO.toLowerCase(), TRACK_SUBTITLES: TRACK_KINDS.SUBTITLES.toLowerCase(), TRACK_CAPTIONS: TRACK_KINDS.CAPTIONS.toLowerCase(), TRACK_DESCRIPTIONS: TRACK_KINDS.DESCRIPTIONS.toLowerCase(), TRACK_CHAPTERS: TRACK_KINDS.CHAPTERS.toLowerCase(), TRACK_METADATA: TRACK_KINDS.METADATA.toLowerCase() }, SELECTORS = { SOURCE: '.' + CSS.SOURCE, TRACK: '.' + CSS.TRACK, MEDIA_SOURCE: '.' + CSS.MEDIA_SOURCE, POSTER_SOURCE: '.' + CSS.POSTER_SOURCE, TRACK_SOURCE: '.' + CSS.TRACK_SOURCE, DISPLAY_OPTIONS: '.' + CSS.DISPLAY_OPTIONS, NAME_INPUT: '.' + CSS.NAME_INPUT, TITLE_INPUT: '.' + CSS.TITLE_INPUT, URL_INPUT: '.' + CSS.URL_INPUT, POSTER_SIZE: '.' + CSS.POSTER_SIZE, LINK_SIZE: '.' + CSS.LINK_SIZE, WIDTH_INPUT: '.' + CSS.WIDTH_INPUT, HEIGHT_INPUT: '.' + CSS.HEIGHT_INPUT, TRACK_KIND_INPUT: '.' + CSS.TRACK_KIND_INPUT, TRACK_LABEL_INPUT: '.' + CSS.TRACK_LABEL_INPUT, TRACK_LANG_INPUT: '.' + CSS.TRACK_LANG_INPUT, TRACK_DEFAULT_SELECT: '.' + CSS.TRACK_DEFAULT_SELECT, MEDIA_CONTROLS_TOGGLE: '.' + CSS.MEDIA_CONTROLS_TOGGLE, MEDIA_AUTOPLAY_TOGGLE: '.' + CSS.MEDIA_AUTOPLAY_TOGGLE, MEDIA_MUTE_TOGGLE: '.' + CSS.MEDIA_MUTE_TOGGLE, MEDIA_LOOP_TOGGLE: '.' + CSS.MEDIA_LOOP_TOGGLE, ADVANCED_SETTINGS: '.' + CSS.ADVANCED_SETTINGS, LINK_TAB: 'li[data-medium-type="' + CSS.LINK + '"]', LINK_PANE: '.tab-pane[data-medium-type="' + CSS.LINK + '"]', VIDEO_TAB: 'li[data-medium-type="' + CSS.VIDEO + '"]', VIDEO_PANE: '.tab-pane[data-medium-type="' + CSS.VIDEO + '"]', AUDIO_TAB: 'li[data-medium-type="' + CSS.AUDIO + '"]', AUDIO_PANE: '.tab-pane[data-medium-type="' + CSS.AUDIO + '"]', TRACK_SUBTITLES_TAB: 'li[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]', TRACK_SUBTITLES_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]', TRACK_CAPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]', TRACK_CAPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]', TRACK_DESCRIPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]', TRACK_DESCRIPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]', TRACK_CHAPTERS_TAB: 'li[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]', TRACK_CHAPTERS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]', TRACK_METADATA_TAB: 'li[data-track-kind="' + CSS.TRACK_METADATA + '"]', TRACK_METADATA_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_METADATA + '"]' }, TEMPLATES = { ROOT: '' + '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' + '<ul class="root nav nav-tabs mb-1" role="tablist">' + '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' + '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' + '{{get_string "link" component}}' + '</a>' + '</li>' + '<li data-medium-type="{{CSS.VIDEO}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">' + '{{get_string "video" component}}' + '</a>' + '</li>' + '<li data-medium-type="{{CSS.AUDIO}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">' + '{{get_string "audio" component}}' + '</a>' + '</li>' + '</ul>' + '<div class="root tab-content">' + '<div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">' + '{{> tab_panes.link}}' + '</div>' + '<div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">' + '{{> tab_panes.video}}' + '</div>' + '<div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">' + '{{> tab_panes.audio}}' + '</div>' + '</div>' + '<div class="mdl-align">' + '<br/>' + '<button class="btn btn-secondary submit" type="submit">{{get_string "createmedia" component}}</button>' + '</div>' + '</form>', TAB_PANES: { LINK: '' + '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' + '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' + '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' + 'size="32" required="true"/>', VIDEO: '' + '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' + ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options">' + '<input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vdisplayoptions" name="displayoptions"}}' + '<div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings">' + '<input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}' + '<div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks">' + '<input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vtracks" name="tracks" help=helpStrings.tracks}}' + '<div id="vtracks" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}' + '</div>' + '</fieldset>', AUDIO: '' + '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel"' + ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options">' + '<input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">' + '{{renderPartial "form_components.section" context=this id="adisplayoptions" name="displayoptions"}}' + '<div id="adisplayoptions" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings">' + '<input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">' + '{{renderPartial "form_components.section" context=this id="aadvancedsettings" name="advancedsettings"}}' + '<div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks">' + '<input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">' + '{{renderPartial "form_components.section" context=this id="atracks" name="tracks" help=helpStrings.tracks}}' + '<div id="atracks" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' }, FORM_COMPONENTS: { SOURCE: '' + '<div class="{{CSS.SOURCE}} {{id}}">' + '<div class="mb-1">' + '<label for="url-input">' + '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' + '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' + '</label>' + '<div class="input-group input-append w-100">' + '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' + '<span class="input-group-append">' + '<button class="btn btn-secondary openmediabrowser" type="button">' + '{{get_string "browserepositories" component}}</button>' + '</span>' + '</div>' + '</div>' + '{{#multisource}}' + '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' + ' help=../addsourcehelp}}' + '{{/multisource}}' + '</div>', ADD_COMPONENT: '' + '<div>' + '<a href="#" class="addcomponent">' + '{{#label}}{{get_string ../label ../component}}{{/label}}' + '{{^label}}{{get_string "add" ../component}}{{/label}}' + '</a>' + '{{#help}}{{{../help}}}{{/help}}' + '</div>', REMOVE_COMPONENT: '' + '<div>' + '<a href="#" class="removecomponent">' + '{{#label}}{{get_string ../label ../component}}{{/label}}' + '{{^label}}{{get_string "remove" ../component}}{{/label}}' + '</a>' + '</div>', DISPLAY_OPTIONS: '' + '<div class="{{CSS.DISPLAY_OPTIONS}}">' + '<div class="mb-1">' + '<label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label>' + '<input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"' + 'size="32"/>' + '</div>' + '<div class="clearfix"></div>' + '{{#mediatype_video}}' + '<div class="mb-1">' + '<label>{{get_string "size" component}}</label>' + '<div class="form-inline {{CSS.POSTER_SIZE}}">' + '<label class="accesshide">{{get_string "videowidth" component}}</label>' + '<input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' + ' x ' + '<label class="accesshide">{{get_string "videoheight" component}}</label>' + '<input type="text" class="form-control ml-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' + '</div>' + '</div>' + '<div class="clearfix"></div>' + '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' + '{{/mediatype_video}}' + '<div>', ADVANCED_SETTINGS: '' + '<div class="{{CSS.ADVANCED_SETTINGS}}">' + '<div class="form-check">' + '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' + 'id="{{id}}_media-controls-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-controls-toggle">' + '{{get_string "controls" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' + 'id="{{id}}_media-autoplay-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-autoplay-toggle">' + '{{get_string "autoplay" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" ' + 'id="{{id}}_media-mute-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-mute-toggle">' + '{{get_string "mute" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" ' + 'id="{{id}}_media-loop-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-loop-toggle">' + '{{get_string "loop" component}}' + '</label>' + '</div>' + '</div>', TRACK_TABS: '' + '<ul class="nav nav-tabs mb-3">' + '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' + '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' + ' role="tab" data-toggle="tab">' + '{{get_string "subtitles" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">' + '{{get_string "captions" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"' + ' role="tab" data-toggle="tab">' + '{{get_string "descriptions" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">' + '{{get_string "chapters" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">' + '{{get_string "metadata" component}}' + '</a>' + '</li>' + '</ul>' + '<div class="tab-content">' + '<div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}">' + '<div class="trackhelp">{{{helpStrings.subtitles}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel"' + ' addcomponentlabel="addsubtitlestrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}">' + '<div class="trackhelp">{{{helpStrings.captions}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel"' + ' addcomponentlabel="addcaptionstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}">' + '<div class="trackhelp">{{{helpStrings.descriptions}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel"' + ' addcomponentlabel="adddescriptionstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}">' + '<div class="trackhelp">{{{helpStrings.chapters}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel"' + ' addcomponentlabel="addchapterstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}">' + '<div class="trackhelp">{{{helpStrings.metadata}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel"' + ' addcomponentlabel="addmetadatatrack"}}' + '</div>' + '</div>', TRACK: '' + '<div class="mb-1 {{CSS.TRACK}}">' + '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' + '<div class="form-group">' + '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' + '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' + '<optgroup label="{{get_string "languagesinstalled" component}}">' + '{{#langsinstalled}}' + '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' + '{{/langsinstalled}}' + '</optgroup>' + '<optgroup label="{{get_string "languagesavailable" component}} ">' + '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' + '</optgroup>' + '</select>' + '</div>' + '<div class="form-group">' + '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' + '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' + '<label class="form-check-label">{{get_string "default" component}}</label>' + '</div>' + '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' + '</div>', SECTION: '' + '<legend class="d-flex align-items-center px-1">' + '<div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">' + '<a role="button" data-toggle="collapse" href="#{{id}}" aria-expanded="false"' + 'aria-controls="{{id}}"' + 'class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">' + '<span class="expanded-icon icon-no-margin p-2" title="{{get_string "collapse" "moodle"}}">' + '<i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>' + '</span>' + '<span class="collapsed-icon icon-no-margin p-2" title="{{get_string "expand" "moodle"}}">' + '<span class="dir-rtl-hide">' + '<i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>' + '</span>' + '<span class="dir-ltr-hide">' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '</span>' + '</span>' + '<span class="sr-only">{{get_string name component}}</span>' + '</a>' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '{{get_string name component}}' + '</h3>' + '</div>' + '{{#help}}{{{../help}}}{{/help}}' + '</legend>' }, HTML_MEDIA: { VIDEO: '' + ' <video ' + '{{#width}}width="{{../width}}" {{/width}}' + '{{#height}}height="{{../height}}" {{/height}}' + '{{#poster}}poster="{{../poster}}" {{/poster}}' + '{{#showControls}}controls="true" {{/showControls}}' + '{{#loop}}loop="true" {{/loop}}' + '{{#muted}}muted="true" {{/muted}}' + '{{#autoplay}}autoplay="true" {{/autoplay}}' + '{{#title}}title="{{../title}}" {{/title}}' + '>' + '{{#sources}}<source src="{{source}}">{{/sources}}' + '{{#tracks}}' + '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' + ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' + '{{/tracks}}' + '{{#description}}{{../description}}{{/description}}' + '</video>&nbsp', AUDIO: '' + ' <audio ' + '{{#showControls}}controls="true" {{/showControls}}' + '{{#loop}}loop="true" {{/loop}}' + '{{#muted}}muted="true" {{/muted}}' + '{{#autoplay}}autoplay="true" {{/autoplay}}' + '{{#title}}title="{{../title}}" {{/title}}' + '>' + '{{#sources}}<source src="{{source}}">{{/sources}}' + '{{#tracks}}' + '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' + ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' + '{{/tracks}}' + '{{#description}}{{../description}}{{/description}}' + '</audio>&nbsp', LINK: '' + '<a href="{{url}}" ' + '{{#width}}data-width="{{../width}}" {{/width}}' + '{{#height}}data-height="{{../height}}"{{/height}}' + '>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>' } }; Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { initializer: function() { if (this.get('host').canShowFilepicker('media')) { this.editor.delegate('dblclick', this._displayDialogue, 'video', this); this.editor.delegate('click', this._handleClick, 'video', this); // For some reason, clicking the video on Firefox does not trigger the click event, while in Chrome it does. // We also need to handle the play/pause instead. this._attachPlayPauseEvents(); var changeHandler = this._attachPlayPauseEvents.bind(this); this.get('host').on('change', changeHandler, null); this.addButton({ icon: 'e/insert_edit_video', callback: this._displayDialogue, tags: 'video, audio', tagMatchRequiresAll: false }); } }, /* * Attaches Play/Pause events to the video nodes. * * @private / _attachPlayPauseEvents: function() { if (this._handlePlayEndBound === undefined) { this._handlePlayEndBound = this._handlePlayEnd.bind(this); } var videos = this.editor.getDOMNode().querySelectorAll('video'); videos.forEach(function(video) { // Prevent duplicated event listeners. video.removeEventListener('play', this._handlePlayEndBound); video.removeEventListener('pause', this._handlePlayEndBound); // Add event listeners. video.addEventListener('play', this._handlePlayEndBound); video.addEventListener('pause', this._handlePlayEndBound); }.bind(this)); }, /* * Gets the root context for all templates, with extra supplied context. * * @method _getContext * @param {Object} extra The extra context to add * @return {Object} * @private / _getContext: function(extra) { return Y.merge({ elementid: this.get('host').get('elementid'), component: COMPONENTNAME, langsinstalled: this.get('langs').installed, langsavailable: this.get('langs').available, helpStrings: this.get('help'), CSS: CSS }, extra); }, /* * Handles a click on a media element. * * @method _handleClick * @param {EventFacade} e * @private / _handleClick: function(e) { var medium = e.target; var selection = this.get('host').getSelectionFromNode(medium); if (this.get('host').getSelection() !== selection) { this.get('host').setSelection(selection); } }, /* * Handles a play/end on a media element. * * @method _handlePlayEnd * @param {Event} e * @private / _handlePlayEnd: function(e) { var medium = Y.one(e.target); var selection = this.get('host').getSelectionFromNode(medium); if (this.get('host').getSelection() !== selection) { this.get('host').setSelection(selection); this.get('host')._hasSelectionChanged(e); } }, /* * Display the media editing tool. * * @method _displayDialogue * @private / _displayDialogue: function() { if (this.get('host').getSelection() === false) { return; } if (!('renderPartial' in Y.Handlebars.helpers)) { (function smashPartials(chain, obj) { Y.each(obj, function(value, index) { chain.push(index); if (typeof value !== "object") { Y.Handlebars.registerPartial(chain.join('.').toLowerCase(), value); } else { smashPartials(chain, value); } chain.pop(); }); })([], TEMPLATES); Y.Handlebars.registerHelper('renderPartial', function(partialName, options) { if (!partialName) { return ''; } var partial = Y.Handlebars.partials[partialName]; var parentContext = options.hash.context ? Y.clone(options.hash.context) : {}; var context = Y.merge(parentContext, options.hash); delete context.context; if (!partial) { return ''; } return new Y.Handlebars.SafeString(Y.Handlebars.compile(partial)(context)); }); } var dialogue = this.getDialogue({ headerContent: M.util.get_string('createmedia', COMPONENTNAME), focusAfterHide: true, width: 660, focusOnShowSelector: SELECTORS.URL_INPUT }); // Set the dialogue content, and then show the dialogue. dialogue.set('bodyContent', this._getDialogueContent(this.get('host').getSelection())).show(); M.form.shortforms({formid: this.get('host').get('elementid') + '_atto_media_form'}); }, /* * Returns the dialogue content for the tool. * * @method _getDialogueContent * @param {WrappedRange[]} selection Current editor selection * @return {Y.Node} * @private / _getDialogueContent: function(selection) { var content = Y.Node.create( Y.Handlebars.compile(TEMPLATES.ROOT)(this._getContext()) ); var medium = this.get('host').getSelectedNodes().filter('video,audio').shift(); var mediumProperties = medium ? this._getMediumProperties(medium) : false; return this._attachEvents(this._applyMediumProperties(content, mediumProperties), selection); }, /* * Attaches required events to the content node. * * @method _attachEvents * @param {Y.Node} content The content to which events will be attached * @param {WrappedRange[]} selection Current editor selection * @return {Y.Node} * @private / _attachEvents: function(content, selection) { // Delegate add component link for media source fields. content.delegate('click', function(e) { e.preventDefault(); this._addMediaSourceComponent(e.currentTarget); }, SELECTORS.MEDIA_SOURCE + ' .addcomponent', this); // Delegate add component link for track fields. content.delegate('click', function(e) { e.preventDefault(); this._addTrackComponent(e.currentTarget); }, SELECTORS.TRACK + ' .addcomponent', this); // Only allow one track per tab to be selected as "default". content.delegate('click', function(e) { var element = e.currentTarget; if (element.get('checked')) { var getKind = function(el) { return this._getTrackTypeFromTabPane(el.ancestor('.tab-pane')); }.bind(this); element.ancestor('.root.tab-content').all(SELECTORS.TRACK_DEFAULT_SELECT).each(function(select) { if (select !== element && getKind(element) === getKind(select)) { select.set('checked', false); } }); } }, SELECTORS.TRACK_DEFAULT_SELECT, this); // Set up filepicker click event. content.delegate('click', function(e) { var element = e.currentTarget; var fptype = (element.ancestor(SELECTORS.POSTER_SOURCE) && 'image') \|\| (element.ancestor(SELECTORS.TRACK_SOURCE) && 'subtitle') \|\| 'media'; e.preventDefault(); this.get('host').showFilepicker(fptype, this._getFilepickerCallback(element, fptype), this); }, '.openmediabrowser', this); // This is a nasty hack. Basically we are using BS4 markup for the tabs // but it isn't completely backwards compatible with BS2. The main problem is // that the "active" class goes on a different node. So the idea is to put it // the node for BS4, and then use CSS to make it look right in BS2. However, // once another tab is clicked, everything sorts itself out, more or less. Except // that the original "active" tab hasn't had the BS4 "active" class removed // (so the styles will still apply to it). So we need to remove the "active" // class on the BS4 node so that BS2 is happy. // // This doesn't upset BS4 since it removes this class anyway when clicking on // another tab. content.all('.nav-item').on('click', function(elem) { elem.currentTarget.get('parentNode').all('.active').removeClass('active'); }); content.one('.submit').on('click', function(e) { e.preventDefault(); var mediaHTML = this._getMediaHTML(e.currentTarget.ancestor('.atto_form')), host = this.get('host'); this.getDialogue({ focusAfterHide: null }).hide(); if (mediaHTML) { host.setSelection(selection); host.insertContentAtFocusPoint(mediaHTML); this.markUpdated(); } }, this); return content; }, /* * Applies medium properties to the content node. * * @method _applyMediumProperties * @param {Y.Node} content The content to apply the properties to * @param {object} properties The medium properties to apply * @return {Y.Node} * @private / _applyMediumProperties: function(content, properties) { if (!properties) { return content; } var applyTrackProperties = function(track, properties) { track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.src); track.one(SELECTORS.TRACK_LANG_INPUT).set('value', properties.srclang); track.one(SELECTORS.TRACK_LABEL_INPUT).set('value', properties.label); track.one(SELECTORS.TRACK_DEFAULT_SELECT).set('checked', properties.defaultTrack); }; var tabPane = content.one('.root.tab-content > .tab-pane#' + this.get('host').get('elementid') + '_' + properties.type.toLowerCase()); // Populate sources. tabPane.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.sources[0]); Y.Array.each(properties.sources.slice(1), function(source) { this._addMediaSourceComponent(tabPane.one(SELECTORS.MEDIA_SOURCE + ' .addcomponent'), function(newComponent) { newComponent.one(SELECTORS.URL_INPUT).set('value', source); }); }, this); // Populate tracks. Y.Object.each(properties.tracks, function(value, key) { var trackData = value.length ? value : [{src: '', srclang: '', label: '', defaultTrack: false}]; var paneSelector = SELECTORS['TRACK_' + key.toUpperCase() + '_PANE']; applyTrackProperties(tabPane.one(paneSelector + ' ' + SELECTORS.TRACK), trackData[0]); Y.Array.each(trackData.slice(1), function(track) { this._addTrackComponent( tabPane.one(paneSelector + ' ' + SELECTORS.TRACK + ' .addcomponent'), function(newComponent) { applyTrackProperties(newComponent, track); }); }, this); }, this); // Populate values. tabPane.one(SELECTORS.TITLE_INPUT).set('value', properties.title); tabPane.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).set('checked', properties.controls); tabPane.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).set('checked', properties.autoplay); tabPane.one(SELECTORS.MEDIA_MUTE_TOGGLE).set('checked', properties.muted); tabPane.one(SELECTORS.MEDIA_LOOP_TOGGLE).set('checked', properties.loop); // Determine medium type. var mediumType = this._getMediumTypeFromTabPane(tabPane); if (mediumType === 'video') { // Populate values unique for video. tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster); tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width); tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height); } // Switch to the correct tab. // Remove active class from all tabs + tab panes. tabPane.siblings('.active').removeClass('active'); content.all('.root.nav-tabs .nav-item a').removeClass('active'); // Add active class to the desired tab and tab pane. tabPane.addClass('active'); content.one(SELECTORS[mediumType.toUpperCase() + '_TAB'] + ' a').addClass('active'); return content; }, /* * Extracts medium properties. * * @method _getMediumProperties * @param {Y.Node} medium The medium node from which to extract * @return {Object} * @private / _getMediumProperties: function(medium) { var boolAttr = function(elem, attr) { // As explained in MDL-64175, some OS (like Ubuntu), are removing the value for these attributes. // So in order to check if attr="true", we need to check if the attribute exists and if the value is empty or true. return (elem.hasAttribute(attr) && (elem.getAttribute(attr) \|\| elem.getAttribute(attr) === '')); }; var tracks = { subtitles: [], captions: [], descriptions: [], chapters: [], metadata: [] }; medium.all('track').each(function(track) { tracks[track.getAttribute('kind')].push({ src: track.getAttribute('src'), srclang: track.getAttribute('srclang'), label: track.getAttribute('label'), defaultTrack: boolAttr(track, 'default') }); }); return { type: medium.test('video') ? MEDIA_TYPES.VIDEO : MEDIA_TYPES.AUDIO, sources: medium.all('source').get('src'), poster: medium.getAttribute('poster'), title: medium.getAttribute('title'), width: medium.getAttribute('width'), height: medium.getAttribute('height'), autoplay: boolAttr(medium, 'autoplay'), loop: boolAttr(medium, 'loop'), muted: boolAttr(medium, 'muted'), controls: boolAttr(medium, 'controls'), tracks: tracks }; }, /* * Adds a track form component. * * @method _addTrackComponent * @param {Y.Node} element The element which was used to trigger this function * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addTrackComponent: function(element, callback) { var trackType = this._getTrackTypeFromTabPane(element.ancestor('.tab-pane')); var context = this._getContext({ sourcelabel: trackType + 'sourcelabel', addcomponentlabel: 'add' + trackType + 'track' }); this._addComponent(element, TEMPLATES.FORM_COMPONENTS.TRACK, SELECTORS.TRACK, context, callback); }, /* * Adds a media source form component. * * @method _addMediaSourceComponent * @param {Y.Node} element The element which was used to trigger this function * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addMediaSourceComponent: function(element, callback) { var mediumType = this._getMediumTypeFromTabPane(element.ancestor('.tab-pane')); var context = this._getContext({ multisource: true, id: CSS.MEDIA_SOURCE, entersourcelabel: mediumType + 'sourcelabel', addcomponentlabel: 'addsource', addsourcehelp: this.get('help').addsource }); this._addComponent(element, TEMPLATES.FORM_COMPONENTS.SOURCE, SELECTORS.MEDIA_SOURCE, context, callback); }, /* * Adds an arbitrary form component. * * This function Compiles and adds the provided component in the supplied 'ancestor' container. * It will also add links to add/remove the relevant components, attaching the * necessary events. * * @method _addComponent * @param {Y.Node} element The element which was used to trigger this function * @param {String} component The component to compile and add * @param {String} ancestor A selector used to find an ancestor of 'component', to which * the compiled component will be appended * @param {Object} context The context with which to render the component * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addComponent: function(element, component, ancestor, context, callback) { var currentComponent = element.ancestor(ancestor), newComponent = Y.Node.create(Y.Handlebars.compile(component)(context)), removeNodeContext = this._getContext(context); removeNodeContext.label = "remove"; var removeNode = Y.Node.create(Y.Handlebars.compile(TEMPLATES.FORM_COMPONENTS.REMOVE_COMPONENT)(removeNodeContext)); removeNode.one('.removecomponent').on('click', function(e) { e.preventDefault(); currentComponent.remove(true); }); currentComponent.insert(newComponent, 'after'); element.ancestor().insert(removeNode, 'after'); element.ancestor().remove(true); if (callback) { callback.call(this, newComponent); } }, /* * Returns the callback for the file picker to call after a file has been selected. * * @method _getFilepickerCallback * @param {Y.Node} element The element which triggered the callback * @param {String} fptype The file pickertype (as would be passed to `showFilePicker`) * @return {Function} The function to be used as a callback when the file picker returns the file * @private / _getFilepickerCallback: function(element, fptype) { return function(params) { if (params.url !== '') { var tabPane = element.ancestor('.tab-pane'); element.ancestor(SELECTORS.SOURCE).one(SELECTORS.URL_INPUT).set('value', params.url); // Links (and only links) have a name field. if (tabPane.get('id') === this.get('host').get('elementid') + '_' + CSS.LINK) { tabPane.one(SELECTORS.NAME_INPUT).set('value', params.file); } if (fptype === 'subtitle') { var subtitleLang = params.file.split('.vtt')[0].split('-').slice(-1)[0]; var langObj = this.get('langs').available.reduce(function(carry, lang) { return lang.code === subtitleLang ? lang : carry; }, false); if (langObj) { element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LABEL_INPUT).set('value', langObj.lang.substr(0, langObj.lang.lastIndexOf(' '))); element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LANG_INPUT).set('value', langObj.code); } } } }; }, /* * Given a "medium" tab pane, returns what kind of medium it contains. * * @method _getMediumTypeFromTabPane * @param {Y.Node} tabPane The tab pane * @return {String} The type of medium in the pane / _getMediumTypeFromTabPane: function(tabPane) { return tabPane.getAttribute('data-medium-type'); }, /* * Given a "track" tab pane, returns what kind of track it contains. * * @method _getTrackTypeFromTabPane * @param {Y.Node} tabPane The tab pane * @return {String} The type of track in the pane / _getTrackTypeFromTabPane: function(tabPane) { return tabPane.getAttribute('data-track-kind'); }, /* * Returns the HTML to be inserted to the text area. * * @method _getMediaHTML * @param {Y.Node} form The form from which to extract data * @return {String} The compiled markup * @private / _getMediaHTML: function(form) { var mediumType = this._getMediumTypeFromTabPane(form.one('.root.tab-content > .tab-pane.active')); var tabContent = form.one(SELECTORS[mediumType.toUpperCase() + '_PANE']); return this['_getMediaHTML' + mediumType[0].toUpperCase() + mediumType.substr(1)](tabContent); }, /* * Returns the HTML to be inserted to the text area for the link tab. * * @method _getMediaHTMLLink * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLLink: function(tab) { var context = { url: tab.one(SELECTORS.URL_INPUT).get('value'), name: tab.one(SELECTORS.NAME_INPUT).get('value') \|\| false }; return context.url ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.LINK)(context) : ''; }, /* * Returns the HTML to be inserted to the text area for the video tab. * * @method _getMediaHTMLVideo * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLVideo: function(tab) { var context = this._getContextForMediaHTML(tab); context.width = tab.one(SELECTORS.WIDTH_INPUT).get('value') \|\| false; context.height = tab.one(SELECTORS.HEIGHT_INPUT).get('value') \|\| false; context.poster = tab.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') \|\| false; return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.VIDEO)(context) : ''; }, /* * Returns the HTML to be inserted to the text area for the audio tab. * * @method _getMediaHTMLAudio * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLAudio: function(tab) { var context = this._getContextForMediaHTML(tab); return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.AUDIO)(context) : ''; }, /* * Returns the context with which to render a media template. * * @method _getContextForMediaHTML * @param {Y.Node} tab The tab from which to extract data * @return {Object} * @private / _getContextForMediaHTML: function(tab) { var tracks = []; tab.all(SELECTORS.TRACK).each(function(track) { tracks.push({ track: track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value'), kind: this._getTrackTypeFromTabPane(track.ancestor('.tab-pane')), label: track.one(SELECTORS.TRACK_LABEL_INPUT).get('value') \|\| track.one(SELECTORS.TRACK_LANG_INPUT).get('value'), srclang: track.one(SELECTORS.TRACK_LANG_INPUT).get('value'), defaultTrack: track.one(SELECTORS.TRACK_DEFAULT_SELECT).get('checked') ? "true" : null }); }, this); return { sources: tab.all(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value').filter(function(source) { return !!source; }).map(function(source) { return {source: source}; }), description: tab.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') \|\| false, tracks: tracks.filter(function(track) { return !!track.track; }), showControls: tab.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).get('checked'), autoplay: tab.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).get('checked'), muted: tab.one(SELECTORS.MEDIA_MUTE_TOGGLE).get('checked'), loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked'), title: tab.one(SELECTORS.TITLE_INPUT).get('value') \|\| false }; } }, { ATTRS: { langs: {}, help: {} } }); }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "moodle-form-shortforms"]}); ��yui/build/moodle-atto_media-button/moodle-atto_media-button-min.js��0000644��00000063673�15152164372�0021405 0��ustar�00��YUI.add("moodle-atto_media-button",function(l,e){var t="atto_media",i={LINK:"LINK",VIDEO:"VIDEO",AUDIO:"AUDIO"},a={SUBTITLES:"SUBTITLES",CAPTIONS:"CAPTIONS",DESCRIPTIONS:"DESCRIPTIONS",CHAPTERS:"CHAPTERS",METADATA:"METADATA"},o={SOURCE:"atto_media_source",TRACK:"atto_media_track",MEDIA_SOURCE:"atto_media_media_source",LINK_SOURCE:"atto_media_link_source",POSTER_SOURCE:"atto_media_poster_source",TRACK_SOURCE:"atto_media_track_source",DISPLAY_OPTIONS:"atto_media_display_options",NAME_INPUT:"atto_media_name_entry",TITLE_INPUT:"atto_media_title_entry",URL_INPUT:"atto_media_url_entry",POSTER_SIZE:"atto_media_poster_size",LINK_SIZE:"atto_media_link_size",WIDTH_INPUT:"atto_media_width_entry",HEIGHT_INPUT:"atto_media_height_entry",TRACK_KIND_INPUT:"atto_media_track_kind_entry",TRACK_LABEL_INPUT:"atto_media_track_label_entry",TRACK_LANG_INPUT:"atto_media_track_lang_entry",TRACK_DEFAULT_SELECT:"atto_media_track_default",MEDIA_CONTROLS_TOGGLE:"atto_media_controls",MEDIA_AUTOPLAY_TOGGLE:"atto_media_autoplay",MEDIA_MUTE_TOGGLE:"atto_media_mute",MEDIA_LOOP_TOGGLE:"atto_media_loop",ADVANCED_SETTINGS:"atto_media_advancedsettings",LINK:i.LINK.toLowerCase(),VIDEO:i.VIDEO.toLowerCase(),AUDIO:i.AUDIO.toLowerCase(),TRACK_SUBTITLES:a.SUBTITLES.toLowerCase(),TRACK_CAPTIONS:a.CAPTIONS.toLowerCase(),TRACK_DESCRIPTIONS:a.DESCRIPTIONS.toLowerCase(),TRACK_CHAPTERS:a.CHAPTERS.toLowerCase(),TRACK_METADATA:a.METADATA.toLowerCase()},s={SOURCE:"."+o.SOURCE,TRACK:"."+o.TRACK,MEDIA_SOURCE:"."+o.MEDIA_SOURCE,POSTER_SOURCE:"."+o.POSTER_SOURCE,TRACK_SOURCE:"."+o.TRACK_SOURCE,DISPLAY_OPTIONS:"."+o.DISPLAY_OPTIONS,NAME_INPUT:"."+o.NAME_INPUT,TITLE_INPUT:"."+o.TITLE_INPUT,URL_INPUT:"."+o.URL_INPUT,POSTER_SIZE:"."+o.POSTER_SIZE,LINK_SIZE:"."+o.LINK_SIZE,WIDTH_INPUT:"."+o.WIDTH_INPUT,HEIGHT_INPUT:"."+o.HEIGHT_INPUT,TRACK_KIND_INPUT:"."+o.TRACK_KIND_INPUT,TRACK_LABEL_INPUT:"."+o.TRACK_LABEL_INPUT,TRACK_LANG_INPUT:"."+o.TRACK_LANG_INPUT,TRACK_DEFAULT_SELECT:"."+o.TRACK_DEFAULT_SELECT,MEDIA_CONTROLS_TOGGLE:"."+o.MEDIA_CONTROLS_TOGGLE,MEDIA_AUTOPLAY_TOGGLE:"."+o.MEDIA_AUTOPLAY_TOGGLE,MEDIA_MUTE_TOGGLE:"."+o.MEDIA_MUTE_TOGGLE,MEDIA_LOOP_TOGGLE:"."+o.MEDIA_LOOP_TOGGLE,ADVANCED_SETTINGS:"."+o.ADVANCED_SETTINGS,LINK_TAB:'li[data-medium-type="'+o.LINK+'"]',LINK_PANE:'.tab-pane[data-medium-type="'+o.LINK+'"]',VIDEO_TAB:'li[data-medium-type="'+o.VIDEO+'"]',VIDEO_PANE:'.tab-pane[data-medium-type="'+o.VIDEO+'"]',AUDIO_TAB:'li[data-medium-type="'+o.AUDIO+'"]',AUDIO_PANE:'.tab-pane[data-medium-type="'+o.AUDIO+'"]',TRACK_SUBTITLES_TAB:'li[data-track-kind="'+o.TRACK_SUBTITLES+'"]',TRACK_SUBTITLES_PANE:'.tab-pane[data-track-kind="'+o.TRACK_SUBTITLES+'"]',TRACK_CAPTIONS_TAB:'li[data-track-kind="'+o.TRACK_CAPTIONS+'"]',TRACK_CAPTIONS_PANE:'.tab-pane[data-track-kind="'+o.TRACK_CAPTIONS+'"]',TRACK_DESCRIPTIONS_TAB:'li[data-track-kind="'+o.TRACK_DESCRIPTIONS+'"]',TRACK_DESCRIPTIONS_PANE:'.tab-pane[data-track-kind="'+o.TRACK_DESCRIPTIONS+'"]',TRACK_CHAPTERS_TAB:'li[data-track-kind="'+o.TRACK_CHAPTERS+'"]',TRACK_CHAPTERS_PANE:'.tab-pane[data-track-kind="'+o.TRACK_CHAPTERS+'"]',TRACK_METADATA_TAB:'li[data-track-kind="'+o.TRACK_METADATA+'"]',TRACK_METADATA_PANE:'.tab-pane[data-track-kind="'+o.TRACK_METADATA+'"]'},d={ROOT:'<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form"><ul class="root nav nav-tabs mb-1" role="tablist"><li data-medium-type="{{CSS.LINK}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">{{get_string "link" component}}</a></li><li data-medium-type="{{CSS.VIDEO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">{{get_string "video" component}}</a></li><li data-medium-type="{{CSS.AUDIO}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">{{get_string "audio" component}}</a></li></ul><div class="root tab-content"><div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">{{> tab_panes.link}}</div><div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">{{> tab_panes.video}}</div><div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">{{> tab_panes.audio}}</div></div><div class="mdl-align"><br/><button class="btn btn-secondary submit" type="submit">{{get_string "createmedia" component}}</button></div></form>',TAB_PANES:{LINK:'{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label><input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"size="32" required="true"/>', VIDEO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options"><input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">{{renderPartial "form_components.section" context=this id="vdisplayoptions" name="displayoptions"}}<div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings"><input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">{{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}<div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks"><input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">{{renderPartial "form_components.section" context=this id="vtracks" name="tracks" help=helpStrings.tracks}}<div id="vtracks" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}</div></fieldset>',AUDIO:'{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel" addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options"><input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">{{renderPartial "form_components.section" context=this id="adisplayoptions" name="displayoptions"}}<div id="adisplayoptions" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings"><input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">{{renderPartial "form_components.section" context=this id="aadvancedsettings" name="advancedsettings"}}<div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}</div></fieldset><fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks"><input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">{{renderPartial "form_components.section" context=this id="atracks" name="tracks" help=helpStrings.tracks}}<div id="atracks" class="fcontainer collapseable collapse px-1">{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}</div></fieldset>'},FORM_COMPONENTS:{SOURCE:'<div class="{{CSS.SOURCE}} {{id}}"><div class="mb-1"><label for="url-input">{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}</label><div class="input-group input-append w-100"><input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/><span class="input-group-append"><button class="btn btn-secondary openmediabrowser" type="button">{{get_string "browserepositories" component}}</button></span></div></div>{{#multisource}}{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel help=../addsourcehelp}}{{/multisource}}</div>',ADD_COMPONENT:'<div><a href="#" class="addcomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "add" ../component}}{{/label}}</a>{{#help}}{{{../help}}}{{/help}}</div>',REMOVE_COMPONENT:'<div><a href="#" class="removecomponent">{{#label}}{{get_string ../label ../component}}{{/label}}{{^label}}{{get_string "remove" ../component}}{{/label}}</a></div>',DISPLAY_OPTIONS:'<div class="{{CSS.DISPLAY_OPTIONS}}"><div class="mb-1"><label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label><input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"size="32"/></div><div class="clearfix"></div>{{#mediatype_video}}<div class="mb-1"><label>{{get_string "size" component}}</label><div class="form-inline {{CSS.POSTER_SIZE}}"><label class="accesshide">{{get_string "videowidth" component}}</label><input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/> x <label class="accesshide">{{get_string "videoheight" component}}</label><input type="text" class="form-control ml-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/></div></div><div class="clearfix"></div>{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}{{/mediatype_video}}<div>', ADVANCED_SETTINGS:'<div class="{{CSS.ADVANCED_SETTINGS}}"><div class="form-check"><input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"id="{{id}}_media-controls-toggle"/><label class="form-check-label" for="{{id}}_media-controls-toggle">{{get_string "controls" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"id="{{id}}_media-autoplay-toggle"/><label class="form-check-label" for="{{id}}_media-autoplay-toggle">{{get_string "autoplay" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" id="{{id}}_media-mute-toggle"/><label class="form-check-label" for="{{id}}_media-mute-toggle">{{get_string "mute" component}}</label></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" id="{{id}}_media-loop-toggle"/><label class="form-check-label" for="{{id}}_media-loop-toggle">{{get_string "loop" component}}</label></div></div>',TRACK_TABS:'<ul class="nav nav-tabs mb-3"><li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item"><a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}" role="tab" data-toggle="tab">{{get_string "subtitles" component}}</a></li><li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">{{get_string "captions" component}}</a></li><li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}" role="tab" data-toggle="tab">{{get_string "descriptions" component}}</a></li><li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">{{get_string "chapters" component}}</a></li><li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item"><a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">{{get_string "metadata" component}}</a></li></ul><div class="tab-content"><div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active" id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"><div class="trackhelp">{{{helpStrings.subtitles}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel" addcomponentlabel="addsubtitlestrack"}}</div><div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}"><div class="trackhelp">{{{helpStrings.captions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel" addcomponentlabel="addcaptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"><div class="trackhelp">{{{helpStrings.descriptions}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel" addcomponentlabel="adddescriptionstrack"}}</div><div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}"><div class="trackhelp">{{{helpStrings.chapters}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel" addcomponentlabel="addchapterstrack"}}</div><div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane" id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}"><div class="trackhelp">{{{helpStrings.metadata}}}</div>{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel" addcomponentlabel="addmetadatatrack"}}</div></div>',TRACK:'<div class="mb-1 {{CSS.TRACK}}">{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}<div class="form-group"><label class="w-100" for="lang-input">{{get_string "srclang" component}}</label><select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}"><optgroup label="{{get_string "languagesinstalled" component}}">{{#langsinstalled}}<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>{{/langsinstalled}}</optgroup><optgroup label="{{get_string "languagesavailable" component}} ">{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}</optgroup></select></div><div class="form-group"><label class="w-100" for="track-input">{{get_string "label" component}}</label><input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/></div><div class="form-check"><input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/><label class="form-check-label">{{get_string "default" component}}</label></div>{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}</div>',SECTION:'<legend class="d-flex align-items-center px-1"><div class="position-relative d-flex ftoggler align-items-center position-relative mr-1"><a role="button" data-toggle="collapse" href="#{{id}}" aria-expanded="false"aria-controls="{{id}}"class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed"><span class="expanded-icon icon-no-margin p-2" title="{{get_string "collapse" "moodle"}}"><i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i></span><span class="collapsed-icon icon-no-margin p-2" title="{{get_string "expand" "moodle"}}"><span class="dir-rtl-hide"><i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i></span><span class="dir-ltr-hide"><i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i></span></span><span class="sr-only">{{get_string name component}}</span></a><h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">{{get_string name component}}</h3></div>{{#help}}{{{../help}}}{{/help}}</legend>'},HTML_MEDIA:{ VIDEO:' <video {{#width}}width="{{../width}}" {{/width}}{{#height}}height="{{../height}}" {{/height}}{{#poster}}poster="{{../poster}}" {{/poster}}{{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}{{#title}}title="{{../title}}" {{/title}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</video>&nbsp',AUDIO:' <audio {{#showControls}}controls="true" {{/showControls}}{{#loop}}loop="true" {{/loop}}{{#muted}}muted="true" {{/muted}}{{#autoplay}}autoplay="true" {{/autoplay}}{{#title}}title="{{../title}}" {{/title}}>{{#sources}}<source src="{{source}}">{{/sources}}{{#tracks}}<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}" {{#defaultTrack}}default="true"{{/defaultTrack}}>{{/tracks}}{{#description}}{{../description}}{{/description}}</audio>&nbsp',LINK:'<a href="{{url}}" {{#width}}data-width="{{../width}}" {{/width}}{{#height}}data-height="{{../height}}"{{/height}}>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>'}};l.namespace("M.atto_media").Button=l.Base.create("button",l.M.editor_atto.EditorPlugin,[],{initializer:function(){var e;this.get("host").canShowFilepicker("media")&&(this.editor.delegate("dblclick",this._displayDialogue,"video",this),this.editor.delegate("click",this._handleClick,"video",this),this._attachPlayPauseEvents(),e=this._attachPlayPauseEvents.bind(this),this.get("host").on("change",e,null),this.addButton({icon:"e/insert_edit_video",callback:this._displayDialogue,tags:"video, audio",tagMatchRequiresAll:!1}))},_attachPlayPauseEvents:function(){this._handlePlayEndBound===undefined&&(this._handlePlayEndBound=this._handlePlayEnd.bind(this)),this.editor.getDOMNode().querySelectorAll("video").forEach(function(e){e.removeEventListener("play",this._handlePlayEndBound),e.removeEventListener("pause",this._handlePlayEndBound),e.addEventListener("play",this._handlePlayEndBound),e.addEventListener("pause",this._handlePlayEndBound)}.bind(this))},_getContext:function(e){return l.merge({elementid:this.get("host").get("elementid"),component:t,langsinstalled:this.get("langs").installed,langsavailable:this.get("langs").available,helpStrings:this.get("help"),CSS:o},e)},_handleClick:function(e){e=e.target,e=this.get("host").getSelectionFromNode(e);this.get("host").getSelection()!==e&&this.get("host").setSelection(e)},_handlePlayEnd:function(e){var t=l.one(e.target),t=this.get("host").getSelectionFromNode(t);this.get("host").getSelection()!==t&&(this.get("host").setSelection(t),this.get("host")._hasSelectionChanged(e))},_displayDialogue:function(){!1!==this.get("host").getSelection()&&("renderPartial"in l.Handlebars.helpers\|\|(function i(a,e){l.each(e,function(e,t){a.push(t),"object"!=typeof e?l.Handlebars.registerPartial(a.join(".").toLowerCase(),e):i(a,e),a.pop()})}([],d),l.Handlebars.registerHelper("renderPartial",function(e,t){var a;return e?(e=l.Handlebars.partials[e],a=t.hash.context?l.clone(t.hash.context):{},delete(a=l.merge(a,t.hash)).context,e?new l.Handlebars.SafeString(l.Handlebars.compile(e)(a)):""):""})),this.getDialogue({headerContent:M.util.get_string("createmedia",t),focusAfterHide:!0,width:660,focusOnShowSelector:s.URL_INPUT}).set("bodyContent",this._getDialogueContent(this.get("host").getSelection())).show(),M.form.shortforms({formid:this.get("host").get("elementid")+"_atto_media_form"}))},_getDialogueContent:function(e){var t=l.Node.create(l.Handlebars.compile(d.ROOT)(this._getContext())),a=this.get("host").getSelectedNodes().filter("video,audio").shift(),a=!!a&&this._getMediumProperties(a);return this._attachEvents(this._applyMediumProperties(t,a),e)},_attachEvents:function(e,a){return e.delegate("click",function(e){e.preventDefault(),this._addMediaSourceComponent(e.currentTarget)},s.MEDIA_SOURCE+" .addcomponent",this),e.delegate("click",function(e){e.preventDefault(),this._addTrackComponent(e.currentTarget)},s.TRACK+" .addcomponent",this),e.delegate("click",function(e){var t,a=e.currentTarget;a.get("checked")&&(t=function(e){return this._getTrackTypeFromTabPane(e.ancestor(".tab-pane"))}.bind(this),a.ancestor(".root.tab-content").all(s.TRACK_DEFAULT_SELECT).each(function(e){e!==a&&t(a)===t(e)&&e.set("checked",!1)}))},s.TRACK_DEFAULT_SELECT,this),e.delegate("click",function(e){var t=e.currentTarget,a=(t.ancestor(s.POSTER_SOURCE)?"image":t.ancestor(s.TRACK_SOURCE)&&"subtitle")\|\|"media";e.preventDefault(),this.get("host").showFilepicker(a,this._getFilepickerCallback(t,a),this)},".openmediabrowser",this),e.all(".nav-item").on("click",function(e){e.currentTarget.get("parentNode").all(".active").removeClass("active")}),e.one(".submit").on("click",function(e){e.preventDefault();var e=this._getMediaHTML(e.currentTarget.ancestor(".atto_form")),t=this.get("host");this.getDialogue({focusAfterHide:null}).hide(),e&&(t.setSelection(a),t.insertContentAtFocusPoint(e),this.markUpdated())},this),e},_applyMediumProperties:function(e,t){var i,n,a;return t&&(i=function(e,t){e.one(s.TRACK_SOURCE+" "+s.URL_INPUT).set("value",t.src),e.one(s.TRACK_LANG_INPUT).set("value",t.srclang),e.one(s.TRACK_LABEL_INPUT).set("value",t.label),e.one(s.TRACK_DEFAULT_SELECT).set("checked",t.defaultTrack)},(n=e.one(".root.tab-content > .tab-pane#"+this.get("host").get("elementid")+"_"+t.type.toLowerCase())).one(s.MEDIA_SOURCE+" "+s.URL_INPUT).set("value",t.sources[0]),l.Array.each(t.sources.slice(1),function(t){this._addMediaSourceComponent(n.one(s.MEDIA_SOURCE+" .addcomponent"),function(e){e.one(s.URL_INPUT).set("value",t)})},this),l.Object.each(t.tracks,function(e,t){var e=e.length?e:[{src:"",srclang:"",label:"",defaultTrack:!1}],a=s["TRACK_"+t.toUpperCase()+"_PANE"];i(n.one(a+" "+s.TRACK),e[0]),l.Array.each(e.slice(1),function(t){this._addTrackComponent(n.one( a+" "+s.TRACK+" .addcomponent"),function(e){i(e,t)})},this)},this),n.one(s.TITLE_INPUT).set("value",t.title),n.one(s.MEDIA_CONTROLS_TOGGLE).set("checked",t.controls),n.one(s.MEDIA_AUTOPLAY_TOGGLE).set("checked",t.autoplay),n.one(s.MEDIA_MUTE_TOGGLE).set("checked",t.muted),n.one(s.MEDIA_LOOP_TOGGLE).set("checked",t.loop),"video"===(a=this._getMediumTypeFromTabPane(n))&&(n.one(s.POSTER_SOURCE+" "+s.URL_INPUT).setAttribute("value",t.poster),n.one(s.WIDTH_INPUT).set("value",t.width),n.one(s.HEIGHT_INPUT).set("value",t.height)),n.siblings(".active").removeClass("active"),e.all(".root.nav-tabs .nav-item a").removeClass("active"),n.addClass("active"),e.one(s[a.toUpperCase()+"_TAB"]+" a").addClass("active")),e},_getMediumProperties:function(e){var t=function(e,t){return e.hasAttribute(t)&&(e.getAttribute(t)\|\|""===e.getAttribute(t))},a={subtitles:[],captions:[],descriptions:[],chapters:[],metadata:[]};return e.all("track").each(function(e){a[e.getAttribute("kind")].push({src:e.getAttribute("src"),srclang:e.getAttribute("srclang"),label:e.getAttribute("label"),defaultTrack:t(e,"default")})}),{type:e.test("video")?i.VIDEO:i.AUDIO,sources:e.all("source").get("src"),poster:e.getAttribute("poster"),title:e.getAttribute("title"),width:e.getAttribute("width"),height:e.getAttribute("height"),autoplay:t(e,"autoplay"),loop:t(e,"loop"),muted:t(e,"muted"),controls:t(e,"controls"),tracks:a}},_addTrackComponent:function(e,t){var a=this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),a=this._getContext({sourcelabel:a+"sourcelabel",addcomponentlabel:"add"+a+"track"});this._addComponent(e,d.FORM_COMPONENTS.TRACK,s.TRACK,a,t)},_addMediaSourceComponent:function(e,t){var a=this._getMediumTypeFromTabPane(e.ancestor(".tab-pane")),a=this._getContext({multisource:!0,id:o.MEDIA_SOURCE,entersourcelabel:a+"sourcelabel",addcomponentlabel:"addsource",addsourcehelp:this.get("help").addsource});this._addComponent(e,d.FORM_COMPONENTS.SOURCE,s.MEDIA_SOURCE,a,t)},_addComponent:function(e,t,a,i,n){var o=e.ancestor(a),a=l.Node.create(l.Handlebars.compile(t)(i)),t=this._getContext(i);t.label="remove",(i=l.Node.create(l.Handlebars.compile(d.FORM_COMPONENTS.REMOVE_COMPONENT)(t))).one(".removecomponent").on("click",function(e){e.preventDefault(),o.remove(!0)}),o.insert(a,"after"),e.ancestor().insert(i,"after"),e.ancestor().remove(!0),n&&n.call(this,a)},_getFilepickerCallback:function(i,n){return function(e){var a,t;""!==e.url&&(t=i.ancestor(".tab-pane"),i.ancestor(s.SOURCE).one(s.URL_INPUT).set("value",e.url),t.get("id")===this.get("host").get("elementid")+"_"+o.LINK&&t.one(s.NAME_INPUT).set("value",e.file),"subtitle"===n&&(a=e.file.split(".vtt")[0].split("-").slice(-1)[0],(t=this.get("langs").available.reduce(function(e,t){return t.code===a?t:e},!1))&&(i.ancestor(s.TRACK).one(s.TRACK_LABEL_INPUT).set("value",t.lang.substr(0,t.lang.lastIndexOf(" "))),i.ancestor(s.TRACK).one(s.TRACK_LANG_INPUT).set("value",t.code))))}},_getMediumTypeFromTabPane:function(e){return e.getAttribute("data-medium-type")},_getTrackTypeFromTabPane:function(e){return e.getAttribute("data-track-kind")},_getMediaHTML:function(e){var t=this._getMediumTypeFromTabPane(e.one(".root.tab-content > .tab-pane.active")),e=e.one(s[t.toUpperCase()+"_PANE"]);return this["_getMediaHTML"+t[0].toUpperCase()+t.substr(1)](e)},_getMediaHTMLLink:function(e){e={url:e.one(s.URL_INPUT).get("value"),name:e.one(s.NAME_INPUT).get("value")\|\|!1};return e.url?l.Handlebars.compile(d.HTML_MEDIA.LINK)(e):""},_getMediaHTMLVideo:function(e){var t=this._getContextForMediaHTML(e);return t.width=e.one(s.WIDTH_INPUT).get("value")\|\|!1,t.height=e.one(s.HEIGHT_INPUT).get("value")\|\|!1,t.poster=e.one(s.POSTER_SOURCE+" "+s.URL_INPUT).get("value")\|\|!1,t.sources.length?l.Handlebars.compile(d.HTML_MEDIA.VIDEO)(t):""},_getMediaHTMLAudio:function(e){e=this._getContextForMediaHTML(e);return e.sources.length?l.Handlebars.compile(d.HTML_MEDIA.AUDIO)(e):""},_getContextForMediaHTML:function(e){var t=[];return e.all(s.TRACK).each(function(e){t.push({track:e.one(s.TRACK_SOURCE+" "+s.URL_INPUT).get("value"),kind:this._getTrackTypeFromTabPane(e.ancestor(".tab-pane")),label:e.one(s.TRACK_LABEL_INPUT).get("value")\|\|e.one(s.TRACK_LANG_INPUT).get("value"),srclang:e.one(s.TRACK_LANG_INPUT).get("value"),defaultTrack:e.one(s.TRACK_DEFAULT_SELECT).get("checked")?"true":null})},this),{sources:e.all(s.MEDIA_SOURCE+" "+s.URL_INPUT).get("value").filter(function(e){return!!e}).map(function(e){return{source:e}}),description:e.one(s.MEDIA_SOURCE+" "+s.URL_INPUT).get("value")\|\|!1,tracks:t.filter(function(e){return!!e.track}),showControls:e.one(s.MEDIA_CONTROLS_TOGGLE).get("checked"),autoplay:e.one(s.MEDIA_AUTOPLAY_TOGGLE).get("checked"),muted:e.one(s.MEDIA_MUTE_TOGGLE).get("checked"),loop:e.one(s.MEDIA_LOOP_TOGGLE).get("checked"),title:e.one(s.TITLE_INPUT).get("value")\|\|!1}}},{ATTRS:{langs:{},help:{}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-form-shortforms"]});��yui/src/button/meta/button.json��0000644��00000000232�15152164372�0012613 0��ustar�00��{ "moodle-atto_media-button": { "requires": [ "moodle-editor_atto-plugin", "moodle-form-shortforms" ] } } ��yui/src/button/build.json��0000644��00000000223�15152164372�0011451 0��ustar�00��{ "name": "moodle-atto_media-button", "builds": { "moodle-atto_media-button": { "jsfiles": [ "button.js" ] } } } ��yui/src/button/js/button.js��0000644��00000146431�15152164372�0011760 0��ustar�00��// This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. / * @package atto_media * @copyright 2013 Damyon Wiese <damyon@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / /* * @module moodle-atto_media-button / /* * Atto media selection tool. * * @namespace M.atto_media * @class Button * @extends M.editor_atto.EditorPlugin / var COMPONENTNAME = 'atto_media', MEDIA_TYPES = {LINK: 'LINK', VIDEO: 'VIDEO', AUDIO: 'AUDIO'}, TRACK_KINDS = { SUBTITLES: 'SUBTITLES', CAPTIONS: 'CAPTIONS', DESCRIPTIONS: 'DESCRIPTIONS', CHAPTERS: 'CHAPTERS', METADATA: 'METADATA' }, CSS = { SOURCE: 'atto_media_source', TRACK: 'atto_media_track', MEDIA_SOURCE: 'atto_media_media_source', LINK_SOURCE: 'atto_media_link_source', POSTER_SOURCE: 'atto_media_poster_source', TRACK_SOURCE: 'atto_media_track_source', DISPLAY_OPTIONS: 'atto_media_display_options', NAME_INPUT: 'atto_media_name_entry', TITLE_INPUT: 'atto_media_title_entry', URL_INPUT: 'atto_media_url_entry', POSTER_SIZE: 'atto_media_poster_size', LINK_SIZE: 'atto_media_link_size', WIDTH_INPUT: 'atto_media_width_entry', HEIGHT_INPUT: 'atto_media_height_entry', TRACK_KIND_INPUT: 'atto_media_track_kind_entry', TRACK_LABEL_INPUT: 'atto_media_track_label_entry', TRACK_LANG_INPUT: 'atto_media_track_lang_entry', TRACK_DEFAULT_SELECT: 'atto_media_track_default', MEDIA_CONTROLS_TOGGLE: 'atto_media_controls', MEDIA_AUTOPLAY_TOGGLE: 'atto_media_autoplay', MEDIA_MUTE_TOGGLE: 'atto_media_mute', MEDIA_LOOP_TOGGLE: 'atto_media_loop', ADVANCED_SETTINGS: 'atto_media_advancedsettings', LINK: MEDIA_TYPES.LINK.toLowerCase(), VIDEO: MEDIA_TYPES.VIDEO.toLowerCase(), AUDIO: MEDIA_TYPES.AUDIO.toLowerCase(), TRACK_SUBTITLES: TRACK_KINDS.SUBTITLES.toLowerCase(), TRACK_CAPTIONS: TRACK_KINDS.CAPTIONS.toLowerCase(), TRACK_DESCRIPTIONS: TRACK_KINDS.DESCRIPTIONS.toLowerCase(), TRACK_CHAPTERS: TRACK_KINDS.CHAPTERS.toLowerCase(), TRACK_METADATA: TRACK_KINDS.METADATA.toLowerCase() }, SELECTORS = { SOURCE: '.' + CSS.SOURCE, TRACK: '.' + CSS.TRACK, MEDIA_SOURCE: '.' + CSS.MEDIA_SOURCE, POSTER_SOURCE: '.' + CSS.POSTER_SOURCE, TRACK_SOURCE: '.' + CSS.TRACK_SOURCE, DISPLAY_OPTIONS: '.' + CSS.DISPLAY_OPTIONS, NAME_INPUT: '.' + CSS.NAME_INPUT, TITLE_INPUT: '.' + CSS.TITLE_INPUT, URL_INPUT: '.' + CSS.URL_INPUT, POSTER_SIZE: '.' + CSS.POSTER_SIZE, LINK_SIZE: '.' + CSS.LINK_SIZE, WIDTH_INPUT: '.' + CSS.WIDTH_INPUT, HEIGHT_INPUT: '.' + CSS.HEIGHT_INPUT, TRACK_KIND_INPUT: '.' + CSS.TRACK_KIND_INPUT, TRACK_LABEL_INPUT: '.' + CSS.TRACK_LABEL_INPUT, TRACK_LANG_INPUT: '.' + CSS.TRACK_LANG_INPUT, TRACK_DEFAULT_SELECT: '.' + CSS.TRACK_DEFAULT_SELECT, MEDIA_CONTROLS_TOGGLE: '.' + CSS.MEDIA_CONTROLS_TOGGLE, MEDIA_AUTOPLAY_TOGGLE: '.' + CSS.MEDIA_AUTOPLAY_TOGGLE, MEDIA_MUTE_TOGGLE: '.' + CSS.MEDIA_MUTE_TOGGLE, MEDIA_LOOP_TOGGLE: '.' + CSS.MEDIA_LOOP_TOGGLE, ADVANCED_SETTINGS: '.' + CSS.ADVANCED_SETTINGS, LINK_TAB: 'li[data-medium-type="' + CSS.LINK + '"]', LINK_PANE: '.tab-pane[data-medium-type="' + CSS.LINK + '"]', VIDEO_TAB: 'li[data-medium-type="' + CSS.VIDEO + '"]', VIDEO_PANE: '.tab-pane[data-medium-type="' + CSS.VIDEO + '"]', AUDIO_TAB: 'li[data-medium-type="' + CSS.AUDIO + '"]', AUDIO_PANE: '.tab-pane[data-medium-type="' + CSS.AUDIO + '"]', TRACK_SUBTITLES_TAB: 'li[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]', TRACK_SUBTITLES_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_SUBTITLES + '"]', TRACK_CAPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]', TRACK_CAPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CAPTIONS + '"]', TRACK_DESCRIPTIONS_TAB: 'li[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]', TRACK_DESCRIPTIONS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_DESCRIPTIONS + '"]', TRACK_CHAPTERS_TAB: 'li[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]', TRACK_CHAPTERS_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_CHAPTERS + '"]', TRACK_METADATA_TAB: 'li[data-track-kind="' + CSS.TRACK_METADATA + '"]', TRACK_METADATA_PANE: '.tab-pane[data-track-kind="' + CSS.TRACK_METADATA + '"]' }, TEMPLATES = { ROOT: '' + '<form class="mform atto_form atto_media" id="{{elementid}}_atto_media_form">' + '<ul class="root nav nav-tabs mb-1" role="tablist">' + '<li data-medium-type="{{CSS.LINK}}" class="nav-item">' + '<a class="nav-link active" href="#{{elementid}}_{{CSS.LINK}}" role="tab" data-toggle="tab">' + '{{get_string "link" component}}' + '</a>' + '</li>' + '<li data-medium-type="{{CSS.VIDEO}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{CSS.VIDEO}}" role="tab" data-toggle="tab">' + '{{get_string "video" component}}' + '</a>' + '</li>' + '<li data-medium-type="{{CSS.AUDIO}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{CSS.AUDIO}}" role="tab" data-toggle="tab">' + '{{get_string "audio" component}}' + '</a>' + '</li>' + '</ul>' + '<div class="root tab-content">' + '<div data-medium-type="{{CSS.LINK}}" class="tab-pane active" id="{{elementid}}_{{CSS.LINK}}">' + '{{> tab_panes.link}}' + '</div>' + '<div data-medium-type="{{CSS.VIDEO}}" class="tab-pane" id="{{elementid}}_{{CSS.VIDEO}}">' + '{{> tab_panes.video}}' + '</div>' + '<div data-medium-type="{{CSS.AUDIO}}" class="tab-pane" id="{{elementid}}_{{CSS.AUDIO}}">' + '{{> tab_panes.audio}}' + '</div>' + '</div>' + '<div class="mdl-align">' + '<br/>' + '<button class="btn btn-secondary submit" type="submit">{{get_string "createmedia" component}}</button>' + '</div>' + '</form>', TAB_PANES: { LINK: '' + '{{renderPartial "form_components.source" context=this id=CSS.LINK_SOURCE}}' + '<label for="{{elementid}}_link_nameentry">{{get_string "entername" component}}</label>' + '<input class="form-control fullwidth {{CSS.NAME_INPUT}}" type="text" id="{{elementid}}_link_nameentry"' + 'size="32" required="true"/>', VIDEO: '' + '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="videosourcelabel"' + ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-display-options">' + '<input name="mform_isexpanded_{{elementid}}_video-display-options" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vdisplayoptions" name="displayoptions"}}' + '<div id="vdisplayoptions" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.display_options" context=this id=CSS.VIDEO mediatype_video=true}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-advanced-settings">' + '<input name="mform_isexpanded_{{elementid}}_video-advanced-settings" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vadvancedsettings" name="advancedsettings"}}' + '<div id="vadvancedsettings" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.advanced_settings" context=this id=CSS.VIDEO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_video-tracks">' + '<input name="mform_isexpanded_{{elementid}}_video-tracks" type="hidden">' + '{{renderPartial "form_components.section" context=this id="vtracks" name="tracks" help=helpStrings.tracks}}' + '<div id="vtracks" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.track_tabs" context=this id=CSS.VIDEO}}' + '</div>' + '</fieldset>', AUDIO: '' + '{{renderPartial "form_components.source" context=this id=CSS.MEDIA_SOURCE entersourcelabel="audiosourcelabel"' + ' addcomponentlabel="addsource" multisource="true" addsourcehelp=helpStrings.addsource}}' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-display-options">' + '<input name="mform_isexpanded_{{elementid}}_audio-display-options" type="hidden">' + '{{renderPartial "form_components.section" context=this id="adisplayoptions" name="displayoptions"}}' + '<div id="adisplayoptions" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.display_options" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-advanced-settings">' + '<input name="mform_isexpanded_{{elementid}}_audio-advanced-settings" type="hidden">' + '{{renderPartial "form_components.section" context=this id="aadvancedsettings" name="advancedsettings"}}' + '<div id="aadvancedsettings" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.advanced_settings" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' + '<fieldset class="collapsible collapsed" id="{{elementid}}_audio-tracks">' + '<input name="mform_isexpanded_{{elementid}}_audio-tracks" type="hidden">' + '{{renderPartial "form_components.section" context=this id="atracks" name="tracks" help=helpStrings.tracks}}' + '<div id="atracks" class="fcontainer collapseable collapse px-1">' + '{{renderPartial "form_components.track_tabs" context=this id=CSS.AUDIO}}' + '</div>' + '</fieldset>' }, FORM_COMPONENTS: { SOURCE: '' + '<div class="{{CSS.SOURCE}} {{id}}">' + '<div class="mb-1">' + '<label for="url-input">' + '{{#entersourcelabel}}{{get_string ../entersourcelabel ../component}}{{/entersourcelabel}}' + '{{^entersourcelabel}}{{get_string "entersource" ../component}}{{/entersourcelabel}}' + '</label>' + '<div class="input-group input-append w-100">' + '<input id="url-input" class="form-control {{CSS.URL_INPUT}}" type="url" size="32"/>' + '<span class="input-group-append">' + '<button class="btn btn-secondary openmediabrowser" type="button">' + '{{get_string "browserepositories" component}}</button>' + '</span>' + '</div>' + '</div>' + '{{#multisource}}' + '{{renderPartial "form_components.add_component" context=../this label=../addcomponentlabel ' + ' help=../addsourcehelp}}' + '{{/multisource}}' + '</div>', ADD_COMPONENT: '' + '<div>' + '<a href="#" class="addcomponent">' + '{{#label}}{{get_string ../label ../component}}{{/label}}' + '{{^label}}{{get_string "add" ../component}}{{/label}}' + '</a>' + '{{#help}}{{{../help}}}{{/help}}' + '</div>', REMOVE_COMPONENT: '' + '<div>' + '<a href="#" class="removecomponent">' + '{{#label}}{{get_string ../label ../component}}{{/label}}' + '{{^label}}{{get_string "remove" ../component}}{{/label}}' + '</a>' + '</div>', DISPLAY_OPTIONS: '' + '<div class="{{CSS.DISPLAY_OPTIONS}}">' + '<div class="mb-1">' + '<label for="{{id}}_media-title-entry">{{get_string "entertitle" component}}</label>' + '<input class="form-control fullwidth {{CSS.TITLE_INPUT}}" type="text" id="{{id}}_media-title-entry"' + 'size="32"/>' + '</div>' + '<div class="clearfix"></div>' + '{{#mediatype_video}}' + '<div class="mb-1">' + '<label>{{get_string "size" component}}</label>' + '<div class="form-inline {{CSS.POSTER_SIZE}}">' + '<label class="accesshide">{{get_string "videowidth" component}}</label>' + '<input type="text" class="form-control mr-1 {{CSS.WIDTH_INPUT}} input-mini" size="4"/>' + ' x ' + '<label class="accesshide">{{get_string "videoheight" component}}</label>' + '<input type="text" class="form-control ml-1 {{CSS.HEIGHT_INPUT}} input-mini" size="4"/>' + '</div>' + '</div>' + '<div class="clearfix"></div>' + '{{renderPartial "form_components.source" context=this id=CSS.POSTER_SOURCE entersourcelabel="poster"}}' + '{{/mediatype_video}}' + '<div>', ADVANCED_SETTINGS: '' + '<div class="{{CSS.ADVANCED_SETTINGS}}">' + '<div class="form-check">' + '<input type="checkbox" checked="true" class="form-check-input {{CSS.MEDIA_CONTROLS_TOGGLE}}"' + 'id="{{id}}_media-controls-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-controls-toggle">' + '{{get_string "controls" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_AUTOPLAY_TOGGLE}}"' + 'id="{{id}}_media-autoplay-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-autoplay-toggle">' + '{{get_string "autoplay" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_MUTE_TOGGLE}}" ' + 'id="{{id}}_media-mute-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-mute-toggle">' + '{{get_string "mute" component}}' + '</label>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.MEDIA_LOOP_TOGGLE}}" ' + 'id="{{id}}_media-loop-toggle"/>' + '<label class="form-check-label" for="{{id}}_media-loop-toggle">' + '{{get_string "loop" component}}' + '</label>' + '</div>' + '</div>', TRACK_TABS: '' + '<ul class="nav nav-tabs mb-3">' + '<li data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="nav-item">' + '<a class="nav-link active" href="#{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}"' + ' role="tab" data-toggle="tab">' + '{{get_string "subtitles" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}" role="tab" data-toggle="tab">' + '{{get_string "captions" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}"' + ' role="tab" data-toggle="tab">' + '{{get_string "descriptions" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}" role="tab" data-toggle="tab">' + '{{get_string "chapters" component}}' + '</a>' + '</li>' + '<li data-track-kind="{{CSS.TRACK_METADATA}}" class="nav-item">' + '<a class="nav-link" href="#{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}" role="tab" data-toggle="tab">' + '{{get_string "metadata" component}}' + '</a>' + '</li>' + '</ul>' + '<div class="tab-content">' + '<div data-track-kind="{{CSS.TRACK_SUBTITLES}}" class="tab-pane active"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_SUBTITLES}}">' + '<div class="trackhelp">{{{helpStrings.subtitles}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="subtitlessourcelabel"' + ' addcomponentlabel="addsubtitlestrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_CAPTIONS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CAPTIONS}}">' + '<div class="trackhelp">{{{helpStrings.captions}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="captionssourcelabel"' + ' addcomponentlabel="addcaptionstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_DESCRIPTIONS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_DESCRIPTIONS}}">' + '<div class="trackhelp">{{{helpStrings.descriptions}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="descriptionssourcelabel"' + ' addcomponentlabel="adddescriptionstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_CHAPTERS}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_CHAPTERS}}">' + '<div class="trackhelp">{{{helpStrings.chapters}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="chapterssourcelabel"' + ' addcomponentlabel="addchapterstrack"}}' + '</div>' + '<div data-track-kind="{{CSS.TRACK_METADATA}}" class="tab-pane"' + ' id="{{elementid}}_{{id}}_{{CSS.TRACK_METADATA}}">' + '<div class="trackhelp">{{{helpStrings.metadata}}}</div>' + '{{renderPartial "form_components.track" context=this sourcelabel="metadatasourcelabel"' + ' addcomponentlabel="addmetadatatrack"}}' + '</div>' + '</div>', TRACK: '' + '<div class="mb-1 {{CSS.TRACK}}">' + '{{renderPartial "form_components.source" context=this id=CSS.TRACK_SOURCE entersourcelabel=sourcelabel}}' + '<div class="form-group">' + '<label class="w-100" for="lang-input">{{get_string "srclang" component}}</label>' + '<select id="lang-input" class="custom-select {{CSS.TRACK_LANG_INPUT}}">' + '<optgroup label="{{get_string "languagesinstalled" component}}">' + '{{#langsinstalled}}' + '<option value="{{code}}" {{#default}}selected="selected"{{/default}}>{{lang}}</option>' + '{{/langsinstalled}}' + '</optgroup>' + '<optgroup label="{{get_string "languagesavailable" component}} ">' + '{{#langsavailable}}<option value="{{code}}">{{lang}}</option>{{/langsavailable}}' + '</optgroup>' + '</select>' + '</div>' + '<div class="form-group">' + '<label class="w-100" for="track-input">{{get_string "label" component}}</label>' + '<input id="track-input" class="form-control {{CSS.TRACK_LABEL_INPUT}}" type="text"/>' + '</div>' + '<div class="form-check">' + '<input type="checkbox" class="form-check-input {{CSS.TRACK_DEFAULT_SELECT}}"/>' + '<label class="form-check-label">{{get_string "default" component}}</label>' + '</div>' + '{{renderPartial "form_components.add_component" context=this label=addcomponentlabel}}' + '</div>', SECTION: '' + '<legend class="d-flex align-items-center px-1">' + '<div class="position-relative d-flex ftoggler align-items-center position-relative mr-1">' + '<a role="button" data-toggle="collapse" href="#{{id}}" aria-expanded="false"' + 'aria-controls="{{id}}"' + 'class="btn btn-icon mr-1 icons-collapse-expand stretched-link fheader collapsed">' + '<span class="expanded-icon icon-no-margin p-2" title="{{get_string "collapse" "moodle"}}">' + '<i class="icon fa fa-chevron-down fa-fw " aria-hidden="true"></i>' + '</span>' + '<span class="collapsed-icon icon-no-margin p-2" title="{{get_string "expand" "moodle"}}">' + '<span class="dir-rtl-hide">' + '<i class="icon fa fa-chevron-right fa-fw " aria-hidden="true"></i>' + '</span>' + '<span class="dir-ltr-hide">' + '<i class="icon fa fa-chevron-left fa-fw " aria-hidden="true"></i>' + '</span>' + '</span>' + '<span class="sr-only">{{get_string name component}}</span>' + '</a>' + '<h3 class="d-flex align-self-stretch align-items-center mb-0" aria-hidden="true">' + '{{get_string name component}}' + '</h3>' + '</div>' + '{{#help}}{{{../help}}}{{/help}}' + '</legend>' }, HTML_MEDIA: { VIDEO: '' + ' <video ' + '{{#width}}width="{{../width}}" {{/width}}' + '{{#height}}height="{{../height}}" {{/height}}' + '{{#poster}}poster="{{../poster}}" {{/poster}}' + '{{#showControls}}controls="true" {{/showControls}}' + '{{#loop}}loop="true" {{/loop}}' + '{{#muted}}muted="true" {{/muted}}' + '{{#autoplay}}autoplay="true" {{/autoplay}}' + '{{#title}}title="{{../title}}" {{/title}}' + '>' + '{{#sources}}<source src="{{source}}">{{/sources}}' + '{{#tracks}}' + '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' + ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' + '{{/tracks}}' + '{{#description}}{{../description}}{{/description}}' + '</video>&nbsp', AUDIO: '' + ' <audio ' + '{{#showControls}}controls="true" {{/showControls}}' + '{{#loop}}loop="true" {{/loop}}' + '{{#muted}}muted="true" {{/muted}}' + '{{#autoplay}}autoplay="true" {{/autoplay}}' + '{{#title}}title="{{../title}}" {{/title}}' + '>' + '{{#sources}}<source src="{{source}}">{{/sources}}' + '{{#tracks}}' + '<track src="{{track}}" kind="{{kind}}" srclang="{{srclang}}" label="{{label}}"' + ' {{#defaultTrack}}default="true"{{/defaultTrack}}>' + '{{/tracks}}' + '{{#description}}{{../description}}{{/description}}' + '</audio>&nbsp', LINK: '' + '<a href="{{url}}" ' + '{{#width}}data-width="{{../width}}" {{/width}}' + '{{#height}}data-height="{{../height}}"{{/height}}' + '>{{#name}}{{../name}}{{/name}}{{^name}}{{../url}}{{/name}}</a>' } }; Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], { initializer: function() { if (this.get('host').canShowFilepicker('media')) { this.editor.delegate('dblclick', this._displayDialogue, 'video', this); this.editor.delegate('click', this._handleClick, 'video', this); // For some reason, clicking the video on Firefox does not trigger the click event, while in Chrome it does. // We also need to handle the play/pause instead. this._attachPlayPauseEvents(); var changeHandler = this._attachPlayPauseEvents.bind(this); this.get('host').on('change', changeHandler, null); this.addButton({ icon: 'e/insert_edit_video', callback: this._displayDialogue, tags: 'video, audio', tagMatchRequiresAll: false }); } }, /* * Attaches Play/Pause events to the video nodes. * * @private / _attachPlayPauseEvents: function() { if (this._handlePlayEndBound === undefined) { this._handlePlayEndBound = this._handlePlayEnd.bind(this); } var videos = this.editor.getDOMNode().querySelectorAll('video'); videos.forEach(function(video) { // Prevent duplicated event listeners. video.removeEventListener('play', this._handlePlayEndBound); video.removeEventListener('pause', this._handlePlayEndBound); // Add event listeners. video.addEventListener('play', this._handlePlayEndBound); video.addEventListener('pause', this._handlePlayEndBound); }.bind(this)); }, /* * Gets the root context for all templates, with extra supplied context. * * @method _getContext * @param {Object} extra The extra context to add * @return {Object} * @private / _getContext: function(extra) { return Y.merge({ elementid: this.get('host').get('elementid'), component: COMPONENTNAME, langsinstalled: this.get('langs').installed, langsavailable: this.get('langs').available, helpStrings: this.get('help'), CSS: CSS }, extra); }, /* * Handles a click on a media element. * * @method _handleClick * @param {EventFacade} e * @private / _handleClick: function(e) { var medium = e.target; var selection = this.get('host').getSelectionFromNode(medium); if (this.get('host').getSelection() !== selection) { this.get('host').setSelection(selection); } }, /* * Handles a play/end on a media element. * * @method _handlePlayEnd * @param {Event} e * @private / _handlePlayEnd: function(e) { var medium = Y.one(e.target); var selection = this.get('host').getSelectionFromNode(medium); if (this.get('host').getSelection() !== selection) { this.get('host').setSelection(selection); this.get('host')._hasSelectionChanged(e); } }, /* * Display the media editing tool. * * @method _displayDialogue * @private / _displayDialogue: function() { if (this.get('host').getSelection() === false) { return; } if (!('renderPartial' in Y.Handlebars.helpers)) { (function smashPartials(chain, obj) { Y.each(obj, function(value, index) { chain.push(index); if (typeof value !== "object") { Y.Handlebars.registerPartial(chain.join('.').toLowerCase(), value); } else { smashPartials(chain, value); } chain.pop(); }); })([], TEMPLATES); Y.Handlebars.registerHelper('renderPartial', function(partialName, options) { if (!partialName) { return ''; } var partial = Y.Handlebars.partials[partialName]; var parentContext = options.hash.context ? Y.clone(options.hash.context) : {}; var context = Y.merge(parentContext, options.hash); delete context.context; if (!partial) { return ''; } return new Y.Handlebars.SafeString(Y.Handlebars.compile(partial)(context)); }); } var dialogue = this.getDialogue({ headerContent: M.util.get_string('createmedia', COMPONENTNAME), focusAfterHide: true, width: 660, focusOnShowSelector: SELECTORS.URL_INPUT }); // Set the dialogue content, and then show the dialogue. dialogue.set('bodyContent', this._getDialogueContent(this.get('host').getSelection())).show(); M.form.shortforms({formid: this.get('host').get('elementid') + '_atto_media_form'}); }, /* * Returns the dialogue content for the tool. * * @method _getDialogueContent * @param {WrappedRange[]} selection Current editor selection * @return {Y.Node} * @private / _getDialogueContent: function(selection) { var content = Y.Node.create( Y.Handlebars.compile(TEMPLATES.ROOT)(this._getContext()) ); var medium = this.get('host').getSelectedNodes().filter('video,audio').shift(); var mediumProperties = medium ? this._getMediumProperties(medium) : false; return this._attachEvents(this._applyMediumProperties(content, mediumProperties), selection); }, /* * Attaches required events to the content node. * * @method _attachEvents * @param {Y.Node} content The content to which events will be attached * @param {WrappedRange[]} selection Current editor selection * @return {Y.Node} * @private / _attachEvents: function(content, selection) { // Delegate add component link for media source fields. content.delegate('click', function(e) { e.preventDefault(); this._addMediaSourceComponent(e.currentTarget); }, SELECTORS.MEDIA_SOURCE + ' .addcomponent', this); // Delegate add component link for track fields. content.delegate('click', function(e) { e.preventDefault(); this._addTrackComponent(e.currentTarget); }, SELECTORS.TRACK + ' .addcomponent', this); // Only allow one track per tab to be selected as "default". content.delegate('click', function(e) { var element = e.currentTarget; if (element.get('checked')) { var getKind = function(el) { return this._getTrackTypeFromTabPane(el.ancestor('.tab-pane')); }.bind(this); element.ancestor('.root.tab-content').all(SELECTORS.TRACK_DEFAULT_SELECT).each(function(select) { if (select !== element && getKind(element) === getKind(select)) { select.set('checked', false); } }); } }, SELECTORS.TRACK_DEFAULT_SELECT, this); // Set up filepicker click event. content.delegate('click', function(e) { var element = e.currentTarget; var fptype = (element.ancestor(SELECTORS.POSTER_SOURCE) && 'image') \|\| (element.ancestor(SELECTORS.TRACK_SOURCE) && 'subtitle') \|\| 'media'; e.preventDefault(); this.get('host').showFilepicker(fptype, this._getFilepickerCallback(element, fptype), this); }, '.openmediabrowser', this); // This is a nasty hack. Basically we are using BS4 markup for the tabs // but it isn't completely backwards compatible with BS2. The main problem is // that the "active" class goes on a different node. So the idea is to put it // the node for BS4, and then use CSS to make it look right in BS2. However, // once another tab is clicked, everything sorts itself out, more or less. Except // that the original "active" tab hasn't had the BS4 "active" class removed // (so the styles will still apply to it). So we need to remove the "active" // class on the BS4 node so that BS2 is happy. // // This doesn't upset BS4 since it removes this class anyway when clicking on // another tab. content.all('.nav-item').on('click', function(elem) { elem.currentTarget.get('parentNode').all('.active').removeClass('active'); }); content.one('.submit').on('click', function(e) { e.preventDefault(); var mediaHTML = this._getMediaHTML(e.currentTarget.ancestor('.atto_form')), host = this.get('host'); this.getDialogue({ focusAfterHide: null }).hide(); if (mediaHTML) { host.setSelection(selection); host.insertContentAtFocusPoint(mediaHTML); this.markUpdated(); } }, this); return content; }, /* * Applies medium properties to the content node. * * @method _applyMediumProperties * @param {Y.Node} content The content to apply the properties to * @param {object} properties The medium properties to apply * @return {Y.Node} * @private / _applyMediumProperties: function(content, properties) { if (!properties) { return content; } var applyTrackProperties = function(track, properties) { track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.src); track.one(SELECTORS.TRACK_LANG_INPUT).set('value', properties.srclang); track.one(SELECTORS.TRACK_LABEL_INPUT).set('value', properties.label); track.one(SELECTORS.TRACK_DEFAULT_SELECT).set('checked', properties.defaultTrack); }; var tabPane = content.one('.root.tab-content > .tab-pane#' + this.get('host').get('elementid') + '_' + properties.type.toLowerCase()); // Populate sources. tabPane.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).set('value', properties.sources[0]); Y.Array.each(properties.sources.slice(1), function(source) { this._addMediaSourceComponent(tabPane.one(SELECTORS.MEDIA_SOURCE + ' .addcomponent'), function(newComponent) { newComponent.one(SELECTORS.URL_INPUT).set('value', source); }); }, this); // Populate tracks. Y.Object.each(properties.tracks, function(value, key) { var trackData = value.length ? value : [{src: '', srclang: '', label: '', defaultTrack: false}]; var paneSelector = SELECTORS['TRACK_' + key.toUpperCase() + '_PANE']; applyTrackProperties(tabPane.one(paneSelector + ' ' + SELECTORS.TRACK), trackData[0]); Y.Array.each(trackData.slice(1), function(track) { this._addTrackComponent( tabPane.one(paneSelector + ' ' + SELECTORS.TRACK + ' .addcomponent'), function(newComponent) { applyTrackProperties(newComponent, track); }); }, this); }, this); // Populate values. tabPane.one(SELECTORS.TITLE_INPUT).set('value', properties.title); tabPane.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).set('checked', properties.controls); tabPane.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).set('checked', properties.autoplay); tabPane.one(SELECTORS.MEDIA_MUTE_TOGGLE).set('checked', properties.muted); tabPane.one(SELECTORS.MEDIA_LOOP_TOGGLE).set('checked', properties.loop); // Determine medium type. var mediumType = this._getMediumTypeFromTabPane(tabPane); if (mediumType === 'video') { // Populate values unique for video. tabPane.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).setAttribute('value', properties.poster); tabPane.one(SELECTORS.WIDTH_INPUT).set('value', properties.width); tabPane.one(SELECTORS.HEIGHT_INPUT).set('value', properties.height); } // Switch to the correct tab. // Remove active class from all tabs + tab panes. tabPane.siblings('.active').removeClass('active'); content.all('.root.nav-tabs .nav-item a').removeClass('active'); // Add active class to the desired tab and tab pane. tabPane.addClass('active'); content.one(SELECTORS[mediumType.toUpperCase() + '_TAB'] + ' a').addClass('active'); return content; }, /* * Extracts medium properties. * * @method _getMediumProperties * @param {Y.Node} medium The medium node from which to extract * @return {Object} * @private / _getMediumProperties: function(medium) { var boolAttr = function(elem, attr) { // As explained in MDL-64175, some OS (like Ubuntu), are removing the value for these attributes. // So in order to check if attr="true", we need to check if the attribute exists and if the value is empty or true. return (elem.hasAttribute(attr) && (elem.getAttribute(attr) \|\| elem.getAttribute(attr) === '')); }; var tracks = { subtitles: [], captions: [], descriptions: [], chapters: [], metadata: [] }; medium.all('track').each(function(track) { tracks[track.getAttribute('kind')].push({ src: track.getAttribute('src'), srclang: track.getAttribute('srclang'), label: track.getAttribute('label'), defaultTrack: boolAttr(track, 'default') }); }); return { type: medium.test('video') ? MEDIA_TYPES.VIDEO : MEDIA_TYPES.AUDIO, sources: medium.all('source').get('src'), poster: medium.getAttribute('poster'), title: medium.getAttribute('title'), width: medium.getAttribute('width'), height: medium.getAttribute('height'), autoplay: boolAttr(medium, 'autoplay'), loop: boolAttr(medium, 'loop'), muted: boolAttr(medium, 'muted'), controls: boolAttr(medium, 'controls'), tracks: tracks }; }, /* * Adds a track form component. * * @method _addTrackComponent * @param {Y.Node} element The element which was used to trigger this function * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addTrackComponent: function(element, callback) { var trackType = this._getTrackTypeFromTabPane(element.ancestor('.tab-pane')); var context = this._getContext({ sourcelabel: trackType + 'sourcelabel', addcomponentlabel: 'add' + trackType + 'track' }); this._addComponent(element, TEMPLATES.FORM_COMPONENTS.TRACK, SELECTORS.TRACK, context, callback); }, /* * Adds a media source form component. * * @method _addMediaSourceComponent * @param {Y.Node} element The element which was used to trigger this function * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addMediaSourceComponent: function(element, callback) { var mediumType = this._getMediumTypeFromTabPane(element.ancestor('.tab-pane')); var context = this._getContext({ multisource: true, id: CSS.MEDIA_SOURCE, entersourcelabel: mediumType + 'sourcelabel', addcomponentlabel: 'addsource', addsourcehelp: this.get('help').addsource }); this._addComponent(element, TEMPLATES.FORM_COMPONENTS.SOURCE, SELECTORS.MEDIA_SOURCE, context, callback); }, /* * Adds an arbitrary form component. * * This function Compiles and adds the provided component in the supplied 'ancestor' container. * It will also add links to add/remove the relevant components, attaching the * necessary events. * * @method _addComponent * @param {Y.Node} element The element which was used to trigger this function * @param {String} component The component to compile and add * @param {String} ancestor A selector used to find an ancestor of 'component', to which * the compiled component will be appended * @param {Object} context The context with which to render the component * @param {Function} [callback] Function to be called when the new component is added * @param {Y.Node} callback.newComponent The compiled component * @private / _addComponent: function(element, component, ancestor, context, callback) { var currentComponent = element.ancestor(ancestor), newComponent = Y.Node.create(Y.Handlebars.compile(component)(context)), removeNodeContext = this._getContext(context); removeNodeContext.label = "remove"; var removeNode = Y.Node.create(Y.Handlebars.compile(TEMPLATES.FORM_COMPONENTS.REMOVE_COMPONENT)(removeNodeContext)); removeNode.one('.removecomponent').on('click', function(e) { e.preventDefault(); currentComponent.remove(true); }); currentComponent.insert(newComponent, 'after'); element.ancestor().insert(removeNode, 'after'); element.ancestor().remove(true); if (callback) { callback.call(this, newComponent); } }, /* * Returns the callback for the file picker to call after a file has been selected. * * @method _getFilepickerCallback * @param {Y.Node} element The element which triggered the callback * @param {String} fptype The file pickertype (as would be passed to `showFilePicker`) * @return {Function} The function to be used as a callback when the file picker returns the file * @private / _getFilepickerCallback: function(element, fptype) { return function(params) { if (params.url !== '') { var tabPane = element.ancestor('.tab-pane'); element.ancestor(SELECTORS.SOURCE).one(SELECTORS.URL_INPUT).set('value', params.url); // Links (and only links) have a name field. if (tabPane.get('id') === this.get('host').get('elementid') + '_' + CSS.LINK) { tabPane.one(SELECTORS.NAME_INPUT).set('value', params.file); } if (fptype === 'subtitle') { var subtitleLang = params.file.split('.vtt')[0].split('-').slice(-1)[0]; var langObj = this.get('langs').available.reduce(function(carry, lang) { return lang.code === subtitleLang ? lang : carry; }, false); if (langObj) { element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LABEL_INPUT).set('value', langObj.lang.substr(0, langObj.lang.lastIndexOf(' '))); element.ancestor(SELECTORS.TRACK).one(SELECTORS.TRACK_LANG_INPUT).set('value', langObj.code); } } } }; }, /* * Given a "medium" tab pane, returns what kind of medium it contains. * * @method _getMediumTypeFromTabPane * @param {Y.Node} tabPane The tab pane * @return {String} The type of medium in the pane / _getMediumTypeFromTabPane: function(tabPane) { return tabPane.getAttribute('data-medium-type'); }, /* * Given a "track" tab pane, returns what kind of track it contains. * * @method _getTrackTypeFromTabPane * @param {Y.Node} tabPane The tab pane * @return {String} The type of track in the pane / _getTrackTypeFromTabPane: function(tabPane) { return tabPane.getAttribute('data-track-kind'); }, /* * Returns the HTML to be inserted to the text area. * * @method _getMediaHTML * @param {Y.Node} form The form from which to extract data * @return {String} The compiled markup * @private / _getMediaHTML: function(form) { var mediumType = this._getMediumTypeFromTabPane(form.one('.root.tab-content > .tab-pane.active')); var tabContent = form.one(SELECTORS[mediumType.toUpperCase() + '_PANE']); return this['_getMediaHTML' + mediumType[0].toUpperCase() + mediumType.substr(1)](tabContent); }, /* * Returns the HTML to be inserted to the text area for the link tab. * * @method _getMediaHTMLLink * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLLink: function(tab) { var context = { url: tab.one(SELECTORS.URL_INPUT).get('value'), name: tab.one(SELECTORS.NAME_INPUT).get('value') \|\| false }; return context.url ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.LINK)(context) : ''; }, /* * Returns the HTML to be inserted to the text area for the video tab. * * @method _getMediaHTMLVideo * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLVideo: function(tab) { var context = this._getContextForMediaHTML(tab); context.width = tab.one(SELECTORS.WIDTH_INPUT).get('value') \|\| false; context.height = tab.one(SELECTORS.HEIGHT_INPUT).get('value') \|\| false; context.poster = tab.one(SELECTORS.POSTER_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') \|\| false; return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.VIDEO)(context) : ''; }, /* * Returns the HTML to be inserted to the text area for the audio tab. * * @method _getMediaHTMLAudio * @param {Y.Node} tab The tab from which to extract data * @return {String} The compiled markup * @private / _getMediaHTMLAudio: function(tab) { var context = this._getContextForMediaHTML(tab); return context.sources.length ? Y.Handlebars.compile(TEMPLATES.HTML_MEDIA.AUDIO)(context) : ''; }, /* * Returns the context with which to render a media template. * * @method _getContextForMediaHTML * @param {Y.Node} tab The tab from which to extract data * @return {Object} * @private / _getContextForMediaHTML: function(tab) { var tracks = []; tab.all(SELECTORS.TRACK).each(function(track) { tracks.push({ track: track.one(SELECTORS.TRACK_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value'), kind: this._getTrackTypeFromTabPane(track.ancestor('.tab-pane')), label: track.one(SELECTORS.TRACK_LABEL_INPUT).get('value') \|\| track.one(SELECTORS.TRACK_LANG_INPUT).get('value'), srclang: track.one(SELECTORS.TRACK_LANG_INPUT).get('value'), defaultTrack: track.one(SELECTORS.TRACK_DEFAULT_SELECT).get('checked') ? "true" : null }); }, this); return { sources: tab.all(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value').filter(function(source) { return !!source; }).map(function(source) { return {source: source}; }), description: tab.one(SELECTORS.MEDIA_SOURCE + ' ' + SELECTORS.URL_INPUT).get('value') \|\| false, tracks: tracks.filter(function(track) { return !!track.track; }), showControls: tab.one(SELECTORS.MEDIA_CONTROLS_TOGGLE).get('checked'), autoplay: tab.one(SELECTORS.MEDIA_AUTOPLAY_TOGGLE).get('checked'), muted: tab.one(SELECTORS.MEDIA_MUTE_TOGGLE).get('checked'), loop: tab.one(SELECTORS.MEDIA_LOOP_TOGGLE).get('checked'), title: tab.one(SELECTORS.TITLE_INPUT).get('value') \|\| false }; } }, { ATTRS: { langs: {}, help: {} } }); ��lang/en/atto_media.php��0000644��00000010152�15152164372�0010713 0��ustar�00��<?php // This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see <http://www.gnu.org/licenses/>. /* * Strings for component 'atto_media', language 'en'. * * @package atto_media * @copyright 2013 Damyon Wiese <damyon@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ $string['add'] = 'Add'; $string['addcaptionstrack'] = 'Add caption track'; $string['addchapterstrack'] = 'Add chapter track'; $string['adddescriptionstrack'] = 'Add description track'; $string['addmetadatatrack'] = 'Add metadata track'; $string['addsource'] = 'Add alternative source'; $string['addsource_help'] = 'It is recommended that an alternative media source is provided, since desktop and mobile browsers vary in which file formats they support.'; $string['addsubtitlestrack'] = 'Add subtitle track'; $string['addtrack'] = 'Add track'; $string['advancedsettings'] = 'Advanced settings'; $string['audio'] = 'Audio'; $string['audiosourcelabel'] = 'Audio source URL'; $string['autoplay'] = 'Play automatically'; $string['browserepositories'] = 'Browse repositories...'; $string['captions'] = 'Captions'; $string['captions_help'] = 'Captions may be used to describe everything happening in the track, including non-verbal sounds such as a phone ringing.'; $string['captionssourcelabel'] = 'Caption track URL'; $string['chapters'] = 'Chapters'; $string['chapters_help'] = 'Chapter titles may be provided for use in navigating the media resource.'; $string['chapterssourcelabel'] = 'Chapter track URL'; $string['controls'] = 'Show controls'; $string['createmedia'] = 'Insert media'; $string['default'] = 'Default'; $string['descriptions'] = 'Descriptions'; $string['descriptions_help'] = 'Audio descriptions may be used to provide a narration which explains visual details not apparent from the audio alone.'; $string['descriptionssourcelabel'] = 'Description track URL'; $string['displayoptions'] = 'Display options'; $string['entername'] = 'Enter name'; $string['entertitle'] = 'Enter title'; $string['entersource'] = 'Source URL'; $string['enterurl'] = 'Enter URL'; $string['height'] = 'Height'; $string['kind'] = 'Type'; $string['label'] = 'Label'; $string['languagesavailable'] = 'Languages available'; $string['languagesinstalled'] = 'Languages installed'; $string['link'] = 'Link'; $string['loop'] = 'Loop'; $string['metadata'] = 'Metadata'; $string['metadata_help'] = 'Metadata tracks, for use from a script, may be used only if the player supports metadata.'; $string['metadatasourcelabel'] = 'Metadata track URL'; $string['mute'] = 'Muted'; $string['pluginname'] = 'Insert or edit an audio/video file'; $string['poster'] = 'Thumbnail URL'; $string['remove'] = 'Remove'; $string['size'] = 'Size'; $string['srclang'] = 'Language'; $string['subtitles'] = 'Subtitles'; $string['subtitles_help'] = 'Subtitles may be used to provide a transcription or translation of the dialogue.'; $string['subtitlessourcelabel'] = 'Subtitle track URL'; $string['track'] = 'Track URL'; $string['tracks'] = 'Subtitles and captions'; $string['tracks_help'] = 'Subtitles, captions, chapters and descriptions can be added via a WebVTT (Web Video Text Tracks) format file. Track labels will be shown in the selection drop-down menu. For each type of track, any track set as default will be pre-selected at the start of the video.'; $string['video'] = 'Video'; $string['videoheight'] = 'Video height'; $string['videosourcelabel'] = 'Video source URL'; $string['videowidth'] = 'Video width'; $string['width'] = 'Width'; $string['privacy:metadata'] = 'The atto_media plugin does not store any personal data.'; ��

| ver. 1.4 | Github | . | PHP 7.4.33 | ��֧ߧ֧�ѧ�ڧ� ��ѧߧڧ��: 0 | proxy | phpinfo | ��ѧ��ۧܧ�