[Summary view] [Print] [Text view]

   1  /**
   2   * Provides a tool for enabling/disabling elements using AJAX/REST.
   3   *
   4   * @module moodle-message_airnotifier-toolboxes
   5   */
   6  
   7  WAITICON = {
   8      'pix':"i/loading_small",
   9      'component':'moodle'
  10  };
  11  // The CSS selectors we use.
  12  var CSS = {
  13      AIRNOTIFIERCONTENT : 'fieldset#messageprocessor_airnotifier',
  14      HIDEDEVICE : 'a.hidedevice',
  15      DEVICELI : 'li.airnotifierdevice',
  16      DIMCLASS : 'dimmed',
  17      DIMMEDTEXT : 'dimmed_text',
  18      DEVICEIDPREFIX : 'deviceid-'
  19  };
  20  
  21  /**
  22   * The toolbox classes
  23   *
  24   * TOOLBOX is a generic class which should never be directly instantiated
  25   * DEVICETOOLBOX is a class extending TOOLBOX containing code specific to devices
  26   */
  27  var TOOLBOX = function() {
  28      TOOLBOX.superclass.constructor.apply(this, arguments);
  29  };
  30  
  31  Y.extend(TOOLBOX, Y.Base, {
  32      /**
  33       * Replace the button click at the selector with the specified
  34       * callback
  35       *
  36       * @param toolboxtarget The selector of the working area
  37       * @param selector The 'button' to replace
  38       * @param callback The callback to apply
  39       * @param cursor An optional cursor style to apply
  40       */
  41      replace_button : function(toolboxtarget, selector, callback, cursor) {
  42          if (!cursor) {
  43              // Set the default cursor type to pointer to match the anchor.
  44              cursor = 'pointer';
  45          }
  46          var button = Y.one(toolboxtarget).all(selector)
  47          .setStyle('cursor', cursor);
  48  
  49          // On isn't chainable and will return an event.
  50          button.on('click', callback, this);
  51  
  52          return button;
  53      },
  54      /**
  55       * Toggle the visibility and availability for the specified
  56       * device show/hide button
  57       */
  58      toggle_hide_device_ui : function(button) {
  59  
  60          var element = button.ancestor(CSS.DEVICELI);
  61          var hideicon = button.one('img');
  62  
  63          var toggle_class = CSS.DIMMEDTEXT;
  64  
  65          var status = '';
  66          if (element.hasClass(toggle_class)) {
  67              status = 'hide';
  68          } else {
  69              status = 'show';
  70          }
  71  
  72          // Change the UI.
  73          element.toggleClass(toggle_class);
  74          // We need to toggle dimming on the description too element.all(CSS.CONTENTAFTERLINK).toggleClass(CSS.DIMMEDTEXT);.
  75          var newstring = M.util.get_string(status, 'moodle');
  76          hideicon.setAttrs({
  77              'alt' : newstring,
  78              'title' : newstring,
  79              'src'   : M.util.image_url('t/' + status)
  80          });
  81          button.set('title', newstring);
  82          button.set('className', 'editing_' + status);
  83      },
  84      /**
  85       * Send a request using the REST API
  86       *
  87       * @param data The data to submit
  88       * @param statusspinner (optional) A statusspinner which may contain a section loader
  89       * @param callbacksuccess Call back on success
  90       * @return response responseText field from responce
  91       */
  92      send_request : function(data, statusspinner, callbacksuccess) {
  93          // Default data structure
  94          if (!data) {
  95              data = {};
  96          }
  97          // Handle any variables which we must pass back through to.
  98          var pageparams = this.get('config').pageparams,
  99              varname;
 100          for (varname in pageparams) {
 101              data[varname] = pageparams[varname];
 102          }
 103  
 104          if (statusspinner) {
 105              statusspinner.show();
 106          }
 107  
 108          data.sesskey = M.cfg.sesskey;
 109  
 110          var uri = M.cfg.wwwroot + this.get('ajaxurl');
 111  
 112          // Define the configuration to send with the request.
 113          var responsetext = [];
 114          var config = {
 115              method: 'POST',
 116              data: data,
 117              on: {
 118                  success: function(tid, response) {
 119                      try {
 120                          responsetext = Y.JSON.parse(response.responseText);
 121                          if (responsetext.error) {
 122                              Y.use('moodle-core-notification-ajaxexception', function() {
 123                                  return new M.core.ajaxException(responsetext).show();
 124                              });
 125                          } else if (responsetext.success) {
 126                              callbacksuccess();
 127                          }
 128                      } catch (e) {}
 129                      if (statusspinner) {
 130                          statusspinner.hide();
 131                      }
 132                  },
 133                  failure : function(tid, response) {
 134                      if (statusspinner) {
 135                          statusspinner.hide();
 136                      }
 137                      Y.use('moodle-core-notification-ajaxexception', function() {
 138                          return new M.core.ajaxException(response).show();
 139                      });
 140                  }
 141              },
 142              context: this,
 143              sync: false
 144          };
 145  
 146          // Send the request.
 147          Y.io(uri, config);
 148          return responsetext;
 149      },
 150      /**
 151       * Return the module ID for the specified element
 152       *
 153       * @param element The <li> element to determine a module-id number for
 154       * @return string The module ID
 155       */
 156      get_element_id : function(element) {
 157          return element.get('id').replace(CSS.DEVICEIDPREFIX, '');
 158      }
 159  },
 160  {
 161      NAME : 'device-toolbox',
 162      ATTRS : {
 163          ajaxurl : {
 164              'value' : 0
 165          },
 166          config : {
 167              'value' : 0
 168          }
 169      }
 170  }
 171  );
 172  
 173  var DEVICETOOLBOX = function() {
 174      DEVICETOOLBOX.superclass.constructor.apply(this, arguments);
 175  };
 176  
 177  Y.extend(DEVICETOOLBOX, TOOLBOX, {
 178  
 179      /**
 180       * Initialize the device toolbox
 181       *
 182       * Updates all span.commands with relevant handlers and other required changes
 183       */
 184      initializer : function() {
 185          this.setup_for_device();
 186      },
 187      /**
 188       * Update any span.commands within the scope of the specified
 189       * selector with AJAX equivelants
 190       *
 191       * @param baseselector The selector to limit scope to
 192       * @return void
 193       */
 194      setup_for_device : function(baseselector) {
 195          if (!baseselector) {
 196              baseselector = CSS.AIRNOTIFIERCONTENT;
 197          }
 198  
 199          Y.all(baseselector).each(this._setup_for_device, this);
 200      },
 201      _setup_for_device : function(toolboxtarget) {
 202  
 203          // Show/Hide.
 204          this.replace_button(toolboxtarget, CSS.HIDEDEVICE, this.toggle_hide_device);
 205      },
 206      toggle_hide_device : function(e) {
 207          // Prevent the default button action.
 208          e.preventDefault();
 209  
 210          // Get the element we're working on.
 211          var element = e.target.ancestor(CSS.DEVICELI);
 212  
 213          var button = e.target.ancestor('a', true);
 214  
 215          var value;
 216          // Enable the device in case the CSS is dimmed.
 217          if (element.hasClass(CSS.DIMMEDTEXT)) {
 218              value = 1;
 219          } else {
 220              value = 0;
 221          }
 222  
 223          // Send the request.
 224          var data = {
 225              'field' : 'enable',
 226              'enable' : value,
 227              'id'    : this.get_element_id(element)
 228          };
 229          var spinner = M.util.add_spinner(Y, element);
 230  
 231          var context = this;
 232          var callback = function() {
 233              context.toggle_hide_device_ui(button);
 234          };
 235          this.send_request(data, spinner, callback);
 236      }
 237  }, {
 238      NAME : 'message-device-toolbox',
 239      ATTRS : {
 240  }
 241  });
 242  
 243  M.message = M.message || {};
 244  
 245  M.message.init_device_toolbox = function(config) {
 246      return new DEVICETOOLBOX(config);
 247  };
 248