lib/yui/chooserdialogue/chooserdialogue.js

   1 YUI.add('moodle-core-chooserdialogue', function(Y) {
   2
   3     var CHOOSERDIALOGUE = function() {
   4         CHOOSERDIALOGUE.superclass.constructor.apply(this, arguments);
   5     }
   6
   7     Y.extend(CHOOSERDIALOGUE, Y.Base, {
   8         // The overlay widget
   9         overlay: null,
  10
  11         // The submit button - we disable this until an element is set
  12         submitbutton : null,
  13
  14         // The chooserdialogue container
  15         container : null,
  16
  17         // Any event listeners we may need to cancel later
  18         listenevents : [],
  19
  20         setup_chooser_dialogue : function(bodycontent, headercontent, config) {
  21             // Set Default options
  22             var params = {
  23                 bodyContent : bodycontent.get('innerHTML'),
  24                 headerContent : headercontent.get('innerHTML'),
  25                 draggable : true,
  26                 visible : false, // Hide by default
  27                 zindex : 100, // Display in front of other items
  28                 lightbox : true, // This dialogue should be modal
  29                 shim : true
  30             }
  31
  32             // Override with additional options
  33             for (paramkey in config) {
  34               params[paramkey] = config[paramkey];
  35             }
  36
  37             // Create the overlay
  38             this.overlay = new M.core.dialogue(params);
  39
  40             // Remove the template for the chooser
  41             bodycontent.remove();
  42             headercontent.remove();
  43
  44             // Hide and then render the overlay
  45             this.overlay.hide();
  46             this.overlay.render();
  47
  48             // Set useful links
  49             this.container = this.overlay.get('boundingBox').one('.choosercontainer');
  50             this.options = this.container.all('.option input[type=radio]');
  51
  52             // Add the chooserdialogue class to the container for styling
  53             this.overlay.get('boundingBox').addClass('chooserdialogue');
  54         },
  55
  56         /**
  57          * Display the module chooser
  58          *
  59          * @param e Event Triggering Event
  60          * @return void
  61          */
  62         display_chooser : function (e) {
  63             // Stop the default event actions before we proceed
  64             e.preventDefault();
  65
  66             var bb = this.overlay.get('boundingBox');
  67             var dialogue = this.container.one('.alloptions');
  68
  69             var thisevent;
  70
  71             // These will trigger a check_options call to display the correct help
  72             thisevent = this.container.on('click', this.check_options, this);
  73             this.listenevents.push(thisevent);
  74             thisevent = this.container.on('key_up', this.check_options, this);
  75             this.listenevents.push(thisevent);
  76             thisevent = this.container.on('dblclick', function(e) {
  77                 if (e.target.ancestor('div.option')) {
  78                     this.check_options();
  79
  80                     // Prevent duplicate submissions
  81                     this.submitbutton.setAttribute('disabled', 'disabled');
  82                     this.options.setAttribute('disabled', 'disabled');
  83                     this.cancel_listenevents();
  84
  85                     this.container.one('form').submit();
  86                 }
  87             }, this);
  88             this.listenevents.push(thisevent);
  89
  90             this.container.one('form').on('submit', function(e) {
  91                 // Prevent duplicate submissions on submit
  92                 this.submitbutton.setAttribute('disabled', 'disabled');
  93                 this.options.setAttribute('disabled', 'disabled');
  94                 this.cancel_listenevents();
  95             }, this);
  96
  97             // Hook onto the cancel button to hide the form
  98             this.container.one('#addcancel').on('click', this.cancel_popup, this);
  99
 100             // Grab global keyup events and handle them
 101             Y.one('document').on('keyup', this.handle_key_press, this);
 102
 103             // Add references to various elements we adjust
 104             this.jumplink     = this.container.one('#jump');
 105             this.submitbutton = this.container.one('#submitbutton');
 106
 107             // Disable the submit element until the user makes a selection
 108             this.submitbutton.set('disabled', 'true');
 109
 110             // Ensure that the options are shown
 111             this.options.removeAttribute('disabled');
 112
 113             // Display the overlay
 114             this.overlay.show();
 115
 116             // Re-centre the dialogue after we've shown it.
 117             this.center_dialogue(dialogue);
 118
 119             // Finally, focus the first radio element - this enables form selection via the keyboard
 120             this.container.one('.option input[type=radio]').focus();
 121
 122             // Trigger check_options to set the initial jumpurl
 123             this.check_options();
 124         },
 125
 126         /**
 127          * Cancel any listen events in the listenevents queue
 128          *
 129          * Several locations add event handlers which should only be called before the form is submitted. This provides
 130          * a way of cancelling those events.
 131          *
 132          * @return void
 133          */
 134         cancel_listenevents : function () {
 135             // Detach all listen events to prevent duplicate triggers
 136             var thisevent;
 137             while (thisevent = this.listenevents.shift()) {
 138                 thisevent.detach();
 139             }
 140         },
 141
 142         /**
 143          * Calculate the optimum height of the chooser dialogue
 144          *
 145          * This tries to set a sensible maximum and minimum to ensure that some options are always shown, and preferably
 146          * all, whilst fitting the box within the current viewport.
 147          *
 148          * @param dialogue Y.Node The dialogue
 149          * @return void
 150          */
 151         center_dialogue : function(dialogue) {
 152             var bb = this.overlay.get('boundingBox');
 153
 154             var winheight = bb.get('winHeight');
 155             var offsettop = 0;
 156
 157             // Try and set a sensible max-height -- this must be done before setting the top
 158             // Set a default height of 640px
 159             var newheight = this.get('maxheight');
 160             if (winheight <= newheight) {
 161                 // Deal with smaller window sizes
 162                 if (winheight <= this.get('minheight')) {
 163                     newheight = this.get('minheight');
 164                 } else {
 165                     newheight = winheight;
 166                 }
 167             }
 168
 169             // Set a fixed position if the window is large enough
 170             if (newheight > this.get('minheight')) {
 171                 bb.setStyle('position', 'fixed');
 172             } else {
 173                 bb.setStyle('position', 'absolute');
 174                 offsettop = Y.one('window').get('scrollTop');
 175             }
 176
 177             // Take off 15px top and bottom for borders, plus 40px each for the title and button area before setting the
 178             // new max-height
 179             var totalheight = newheight;
 180             newheight = newheight - (15 + 15 + 40 + 40);
 181             dialogue.setStyle('max-height', newheight + 'px');
 182             dialogue.setStyle('height', newheight + 'px');
 183
 184             // Re-calculate the location now that we've changed the size
 185             var dialoguetop = Math.max(12, ((winheight - totalheight) / 2)) + offsettop;
 186
 187             // We need to set the height for the yui3-widget - can't work
 188             // out what we're setting at present -- shoud be the boudingBox
 189             bb.setStyle('top', dialoguetop + 'px');
 190         },
 191
 192         handle_key_press : function(e) {
 193             if (e.keyCode == 27) {
 194                 this.cancel_popup(e);
 195             }
 196         },
 197
 198         cancel_popup : function (e) {
 199             // Prevent normal form submission before hiding
 200             e.preventDefault();
 201             this.hide();
 202         },
 203
 204         hide : function() {
 205             // Detach the global keypress handler before hiding
 206             Y.one('document').detach('keyup', this.handle_key_press, this);
 207             this.container.detachAll();
 208             this.overlay.hide();
 209         },
 210
 211         check_options : function(e) {
 212             // Check which options are set, and change the parent class
 213             // to show/hide help as required
 214             this.options.each(function(thisoption) {
 215                 var optiondiv = thisoption.get('parentNode').get('parentNode');
 216                 if (thisoption.get('checked')) {
 217                     optiondiv.addClass('selected');
 218
 219                     // Trigger any events for this option
 220                     this.option_selected(thisoption);
 221
 222                     // Ensure that the form may be submitted
 223                     this.submitbutton.removeAttribute('disabled');
 224
 225                     // Ensure that the radio remains focus so that keyboard navigation is still possible
 226                     thisoption.focus();
 227                 } else {
 228                     optiondiv.removeClass('selected');
 229                 }
 230             }, this);
 231         },
 232
 233         option_selected : function(e) {
 234         }
 235     },
 236     {
 237         NAME : 'moodle-core-chooserdialogue',
 238         ATTRS : {
 239             minheight : {
 240                 value : 300
 241             },
 242             maxheight : {
 243                 value : 660
 244             }
 245         }
 246     });
 247     M.core = M.core || {};
 248     M.core.chooserdialogue = CHOOSERDIALOGUE;
 249 },
 250 '@VERSION@', {
 251     requires:['base', 'overlay', 'moodle-enrol-notification']
 252 }
 253 );