[Summary view] [Print] [Text view]

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