lib/yui/src/chooserdialogue/js/chooserdialogue.js

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