[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   * Action selector.
  18   *
  19   * To handle 'save' events use: actionselector.on('save')
  20   * This will receive the information to display in popup.
  21   * The actions have the format [{'text': sometext, 'value' : somevalue}].
  22   *
  23   * @package    tool_lp
  24   * @copyright  2016 Serge Gauthier - <serge.gauthier.2@umontreal.ca>
  25   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  26   */
  27  
  28  define(['jquery',
  29          'core/notification',
  30          'core/ajax',
  31          'core/templates',
  32          'tool_lp/dialogue',
  33          'tool_lp/event_base'],
  34          function($, Notification, Ajax, Templates, Dialogue, EventBase) {
  35  
  36      /**
  37       * Action selector class.
  38       * @param {String} title The title of popup.
  39       * @param {String} message The message to display.
  40       * @param {object} actions The actions that can be selected.
  41       * @param {String} confirm Text for confirm button.
  42       * @param {String} cancel Text for cancel button.
  43       */
  44      var ActionSelector = function(title, message, actions, confirm, cancel) {
  45          var self = this;
  46  
  47          EventBase.prototype.constructor.apply(this, []);
  48          self._title = title;
  49          self._message = message;
  50          self._actions = actions;
  51          self._confirm = confirm;
  52          self._cancel = cancel;
  53          self._selectedValue = null;
  54          self._reset();
  55      };
  56  
  57      ActionSelector.prototype = Object.create(EventBase.prototype);
  58  
  59      /** @type {String} The value that was selected. */
  60      ActionSelector.prototype._selectedValue = null;
  61      /** @type {Dialogue} The reference to the dialogue. */
  62      ActionSelector.prototype._popup = null;
  63      /** @type {String} The title of popup. */
  64      ActionSelector.prototype._title = null;
  65      /** @type {String} The message in popup. */
  66      ActionSelector.prototype._message = null;
  67      /** @type {object} The information for radion buttons. */
  68      ActionSelector.prototype._actions = null;
  69      /** @type {String} The text for confirm button. */
  70      ActionSelector.prototype._confirm = null;
  71      /** @type {String} The text for cancel button. */
  72      ActionSelector.prototype._cancel = null;
  73  
  74      /**
  75       * Hook to executed after the view is rendered.
  76       *
  77       * @method _afterRender
  78       */
  79      ActionSelector.prototype._afterRender = function() {
  80          var self = this;
  81  
  82          // Confirm button is disabled until a choice is done.
  83          self._find('[data-action="action-selector-confirm"]').attr('disabled', 'disabled');
  84  
  85          // Add listener for radio buttons change.
  86          self._find('[data-region="action-selector-radio-buttons"]').change(function() {
  87              self._selectedValue = $("input[type='radio']:checked").val();
  88              self._find('[data-action="action-selector-confirm"]').removeAttr('disabled');
  89              self._refresh.bind(self);
  90          });
  91  
  92          // Add listener for cancel.
  93          self._find('[data-action="action-selector-cancel"]').click(function(e) {
  94              e.preventDefault();
  95              self.close();
  96          });
  97  
  98          // Add listener for confirm.
  99          self._find('[data-action="action-selector-confirm"]').click(function(e) {
 100              e.preventDefault();
 101              if (!self._selectedValue.length) {
 102                  return;
 103              }
 104              self._trigger('save', {action: self._selectedValue});
 105              self.close();
 106          });
 107      };
 108  
 109      /**
 110       * Close the dialogue.
 111       *
 112       * @method close
 113       */
 114      ActionSelector.prototype.close = function() {
 115          var self = this;
 116          self._popup.close();
 117          self._reset();
 118      };
 119  
 120      /**
 121       * Opens the action selector.
 122       *
 123       * @method display
 124       * @return {Promise}
 125       */
 126      ActionSelector.prototype.display = function() {
 127          var self = this;
 128          return self._render().then(function(html) {
 129              self._popup = new Dialogue(
 130                  self._title,
 131                  html,
 132                  self._afterRender.bind(self)
 133              );
 134          }).fail(Notification.exception);
 135      };
 136  
 137      /**
 138       * Find a node in the dialogue.
 139       *
 140       * @param {String} selector
 141       * @return {JQuery} The node
 142       * @method _find
 143       */
 144      ActionSelector.prototype._find = function(selector) {
 145          return $(this._popup.getContent()).find(selector);
 146      };
 147  
 148      /**
 149       * Refresh the view.
 150       *
 151       * @method _refresh
 152       * @return {Promise}
 153       */
 154      ActionSelector.prototype._refresh = function() {
 155          var self = this;
 156          return self._render().then(function(html) {
 157              self._find('[data-region="action-selector"]').replaceWith(html);
 158              self._afterRender();
 159          });
 160      };
 161  
 162      /**
 163       * Render the dialogue.
 164       *
 165       * @method _render
 166       * @return {Promise}
 167       */
 168      ActionSelector.prototype._render = function() {
 169          var self = this;
 170          var choices = [];
 171          for (var i in self._actions) {
 172              choices.push(self._actions[i]);
 173          }
 174          var content = {'message': self._message, 'choices': choices,
 175              'confirm': self._confirm, 'cancel': self._cancel};
 176  
 177          return Templates.render('tool_lp/action_selector', content);
 178      };
 179  
 180      /**
 181       * Reset the dialogue properties.
 182       *
 183       * This does not reset everything, just enough to reset the UI.
 184       *
 185       * @method _reset
 186       */
 187      ActionSelector.prototype._reset = function() {
 188          this._popup = null;
 189          this._selectedValue = '';
 190      };
 191  
 192      return /** @alias module:tool_lp/actionselector */ ActionSelector;
 193  
 194  });