message/output/airnotifier/yui/src/toolboxes/js/toolboxes.js

   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