[Summary view] [Print] [Text view]

   1  YUI.add('moodle-atto_media-button', function (Y, NAME) {
   2  
   3  // This file is part of Moodle - http://moodle.org/
   4  //
   5  // Moodle is free software: you can redistribute it and/or modify
   6  // it under the terms of the GNU General Public License as published by
   7  // the Free Software Foundation, either version 3 of the License, or
   8  // (at your option) any later version.
   9  //
  10  // Moodle is distributed in the hope that it will be useful,
  11  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  // GNU General Public License for more details.
  14  //
  15  // You should have received a copy of the GNU General Public License
  16  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  17  
  18  /*
  19   * @package    atto_media
  20   * @copyright  2013 Damyon Wiese  <damyon@moodle.com>
  21   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22   */
  23  
  24  /**
  25   * @module moodle-atto_media-button
  26   */
  27  
  28  /**
  29   * Atto media selection tool.
  30   *
  31   * @namespace M.atto_media
  32   * @class Button
  33   * @extends M.editor_atto.EditorPlugin
  34   */
  35  
  36  var COMPONENTNAME = 'atto_media',
  37      CSS = {
  38          URLINPUT: 'atto_media_urlentry',
  39          NAMEINPUT: 'atto_media_nameentry'
  40      },
  41      SELECTORS = {
  42          URLINPUT: '.' + CSS.URLINPUT,
  43          NAMEINPUT: '.' + CSS.NAMEINPUT
  44      },
  45      TEMPLATE = '' +
  46          '<form class="atto_form">' +
  47              '<label for="{{elementid}}_atto_media_urlentry">{{get_string "enterurl" component}}</label>' +
  48              '<input class="fullwidth {{CSS.URLINPUT}}" type="url" id="{{elementid}}_atto_media_urlentry" size="32"/><br/>' +
  49              '<button class="openmediabrowser" type="button">{{get_string "browserepositories" component}}</button>' +
  50              '<label for="{{elementid}}_atto_media_nameentry">{{get_string "entername" component}}</label>' +
  51              '<input class="fullwidth {{CSS.NAMEINPUT}}" type="text" id="{{elementid}}_atto_media_nameentry"' +
  52                      'size="32" required="true"/>' +
  53              '<div class="mdl-align">' +
  54                  '<br/>' +
  55                  '<button class="submit" type="submit">{{get_string "createmedia" component}}</button>' +
  56              '</div>' +
  57          '</form>';
  58  
  59  Y.namespace('M.atto_media').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
  60  
  61      /**
  62       * A reference to the current selection at the time that the dialogue
  63       * was opened.
  64       *
  65       * @property _currentSelection
  66       * @type Range
  67       * @private
  68       */
  69      _currentSelection: null,
  70  
  71      /**
  72       * A reference to the dialogue content.
  73       *
  74       * @property _content
  75       * @type Node
  76       * @private
  77       */
  78      _content: null,
  79  
  80      initializer: function() {
  81          if (this.get('host').canShowFilepicker('media')) {
  82              this.addButton({
  83                  icon: 'e/insert_edit_video',
  84                  callback: this._displayDialogue
  85              });
  86          }
  87      },
  88  
  89      /**
  90       * Display the media editing tool.
  91       *
  92       * @method _displayDialogue
  93       * @private
  94       */
  95      _displayDialogue: function() {
  96          // Store the current selection.
  97          this._currentSelection = this.get('host').getSelection();
  98          if (this._currentSelection === false) {
  99              return;
 100          }
 101  
 102          var dialogue = this.getDialogue({
 103              headerContent: M.util.get_string('createmedia', COMPONENTNAME),
 104              focusAfterHide: true,
 105              focusOnShowSelector: SELECTORS.URLINPUT
 106          });
 107  
 108          // Set the dialogue content, and then show the dialogue.
 109          dialogue.set('bodyContent', this._getDialogueContent())
 110                  .show();
 111      },
 112  
 113      /**
 114       * Return the dialogue content for the tool, attaching any required
 115       * events.
 116       *
 117       * @method _getDialogueContent
 118       * @return {Node} The content to place in the dialogue.
 119       * @private
 120       */
 121      _getDialogueContent: function() {
 122          var template = Y.Handlebars.compile(TEMPLATE);
 123  
 124          this._content = Y.Node.create(template({
 125              component: COMPONENTNAME,
 126              elementid: this.get('host').get('elementid'),
 127              CSS: CSS
 128          }));
 129  
 130          this._content.one('.submit').on('click', this._setMedia, this);
 131          this._content.one('.openmediabrowser').on('click', function(e) {
 132              e.preventDefault();
 133              this.get('host').showFilepicker('media', this._filepickerCallback, this);
 134          }, this);
 135  
 136          return this._content;
 137      },
 138  
 139      /**
 140       * Update the dialogue after an media was selected in the File Picker.
 141       *
 142       * @method _filepickerCallback
 143       * @param {object} params The parameters provided by the filepicker
 144       * containing information about the image.
 145       * @private
 146       */
 147      _filepickerCallback: function(params) {
 148          if (params.url !== '') {
 149              this._content.one(SELECTORS.URLINPUT)
 150                      .set('value', params.url);
 151              this._content.one(SELECTORS.NAMEINPUT)
 152                      .set('value', params.file);
 153          }
 154      },
 155  
 156      /**
 157       * Update the media in the contenteditable.
 158       *
 159       * @method setMedia
 160       * @param {EventFacade} e
 161       * @private
 162       */
 163      _setMedia: function(e) {
 164          e.preventDefault();
 165          this.getDialogue({
 166              focusAfterHide: null
 167          }).hide();
 168  
 169          var form = e.currentTarget.ancestor('.atto_form'),
 170              url = form.one(SELECTORS.URLINPUT).get('value'),
 171              name = form.one(SELECTORS.NAMEINPUT).get('value'),
 172              host = this.get('host');
 173  
 174          if (url !== '' && name !== '') {
 175              host.setSelection(this._currentSelection);
 176              var mediahtml = '<a href="' + Y.Escape.html(url) + '">' + name + '</a>';
 177  
 178              host.insertContentAtFocusPoint(mediahtml);
 179              this.markUpdated();
 180          }
 181      }
 182  });
 183  
 184  
 185  }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin"]});