lib/yui/src/notification/js/dialogue.js

   1 /**
   2  * The generic dialogue class for use in Moodle.
   3  *
   4  * @module moodle-core-notification
   5  * @submodule moodle-core-notification-dialogue
   6  */
   7
   8 var DIALOGUE_NAME = 'Moodle dialogue',
   9     DIALOGUE,
  10     DIALOGUE_FULLSCREEN_CLASS,
  11     DIALOGUE_HIDDEN_CLASS,
  12     EXISTING_WINDOW_SELECTOR,
  13     NOSCROLLING_CLASS;
  14
  15 DIALOGUE_MODAL_CLASS = 'yui3-widget-modal';
  16 DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX+'-fullscreen';
  17 DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX+'-hidden';
  18 EXISTING_WINDOW_SELECTOR = '[role=dialog]';
  19 NOSCROLLING_CLASS = 'no-scrolling';
  20
  21 /**
  22  * A re-usable dialogue box with Moodle classes applied.
  23  *
  24  * @param {Object} config Object literal specifying the dialogue configuration properties.
  25  * @constructor
  26  * @class M.core.dialogue
  27  * @extends Y.Panel
  28  */
  29 DIALOGUE = function(config) {
  30     COUNT++;
  31     var id = 'moodle-dialogue-'+COUNT;
  32     config.notificationBase =
  33         Y.Node.create('<div class="'+CSS.BASE+'">')
  34               .append(Y.Node.create('<div id="'+id+'" role="dialog" aria-labelledby="'+id+'-header-text" class="'+CSS.WRAP+'"></div>')
  35               .append(Y.Node.create('<div id="'+id+'-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
  36               .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
  37               .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>')));
  38     Y.one(document.body).append(config.notificationBase);
  39
  40     if (config.additionalBaseClass) {
  41         config.notificationBase.addClass(config.additionalBaseClass);
  42     }
  43
  44     config.srcNode =    '#'+id;
  45     config.width =      config.width || '400px';
  46     config.visible =    config.visible || false;
  47     config.center =     config.centered && true;
  48     config.centered =   false;
  49     config.COUNT = COUNT;
  50
  51     if (config.width === 'auto') {
  52         delete config.width;
  53     }
  54
  55     // lightbox param to keep the stable versions API.
  56     if (config.lightbox !== false) {
  57         config.modal = true;
  58     }
  59     delete config.lightbox;
  60
  61     // closeButton param to keep the stable versions API.
  62     if (config.closeButton === false) {
  63         config.buttons = null;
  64     } else {
  65         config.buttons = [
  66             {
  67                 section: Y.WidgetStdMod.HEADER,
  68                 classNames: 'closebutton',
  69                 action: function () {
  70                     this.hide();
  71                 }
  72             }
  73         ];
  74     }
  75     DIALOGUE.superclass.constructor.apply(this, [config]);
  76
  77     if (config.closeButton !== false) {
  78         // The buttons constructor does not allow custom attributes
  79         this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
  80     }
  81 };
  82 Y.extend(DIALOGUE, Y.Panel, {
  83     // Window resize event listener.
  84     _resizeevent : null,
  85     // Orientation change event listener.
  86     _orientationevent : null,
  87
  88     /**
  89      * Initialise the dialogue.
  90      *
  91      * @method initializer
  92      * @return void
  93      */
  94     initializer : function(config) {
  95         var bb;
  96
  97         this.render();
  98         this.show();
  99         this.after('visibleChange', this.visibilityChanged, this);
 100         if (config.center) {
 101             this.centerDialogue();
 102         }
 103         if (!config.visible) {
 104             this.hide();
 105         }
 106         this.set('COUNT', COUNT);
 107
 108         // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
 109         // and allow setting of z-index in theme.
 110         bb = this.get('boundingBox');
 111
 112         if (config.extraClasses) {
 113             Y.Array.each(config.extraClasses, bb.addClass, bb);
 114         }
 115         if (config.visible) {
 116             this.applyZIndex();
 117         }
 118     },
 119
 120     /**
 121      * Either set the zindex to the supplied value, or set it to one more than the highest existing
 122      * dialog in the page.
 123      *
 124      * @method visibilityChanged
 125      * @return void
 126      */
 127     applyZIndex : function() {
 128         var highestzindex = 0,
 129             zindex,
 130             bb;
 131
 132         bb = this.get('boundingBox');
 133         if (this.get('zIndex')) {
 134             // The zindex was specified so we should use that.
 135             bb.setStyle('zIndex', this.get('zIndex'));
 136         } else {
 137             // Determine the correct zindex by looking at all existing dialogs in the page.
 138             // Get the zindex of the parent of each wrapper node.
 139             Y.all(EXISTING_WINDOW_SELECTOR).each(function (node) {
 140                 zindex = node.getStyle('zIndex');
 141
 142                 // In most cases the zindex is set on the parent of the dialog.
 143                 if (!zindex) {
 144                     zindex = node.get('parentNode').getStyle('zIndex');
 145                 }
 146
 147                 if (zindex) {
 148                     zindex = parseInt(zindex, 10);
 149
 150                     if (zindex > highestzindex) {
 151                         highestzindex = zindex;
 152                     }
 153                 }
 154             });
 155             // Only set the zindex if we found a wrapper.
 156             if (highestzindex > 0) {
 157                 bb.setStyle('zIndex', highestzindex + 1);
 158             }
 159         }
 160     },
 161
 162     /**
 163      * Enable or disable document scrolling (see if there are any modal or fullscreen popups).
 164      *
 165      * @method toggleDocumentScrolling
 166      * @param Boolean scroll - If true, allow document scrolling.
 167      * @return void
 168      */
 169     toggleDocumentScrolling : function() {
 170         var windowroot = Y.one(Y.config.doc.body),
 171             scroll = true,
 172             search;
 173
 174         search = '.' + DIALOGUE_FULLSCREEN_CLASS + ', .' + DIALOGUE_MODAL_CLASS;
 175         Y.all(search).each(function (node) {
 176             if (!node.hasClass(DIALOGUE_HIDDEN_CLASS)) {
 177                 scroll = false;
 178             }
 179         });
 180
 181         if (Y.UA.ie > 0) {
 182             // Remember the previous value:
 183             windowroot = Y.one('html');
 184         }
 185         if (scroll) {
 186             if (windowroot.hasClass(NOSCROLLING_CLASS)) {
 187                 windowroot.removeClass(NOSCROLLING_CLASS);
 188             }
 189         } else {
 190             windowroot.addClass(NOSCROLLING_CLASS);
 191         }
 192     },
 193
 194     /**
 195      * Event listener for the visibility changed event.
 196      *
 197      * @method visibilityChanged
 198      * @return void
 199      */
 200     visibilityChanged : function(e) {
 201         var titlebar;
 202         if (e.attrName === 'visible') {
 203             this.get('maskNode').addClass(CSS.LIGHTBOX);
 204             if (e.prevVal && !e.newVal) {
 205                 if (this._resizeevent) {
 206                     this._resizeevent.detach();
 207                     this._resizeevent = null;
 208                 }
 209                 if (this._orientationevent) {
 210                     this._orientationevent.detach();
 211                     this._orientationevent = null;
 212                 }
 213             }
 214             if (!e.prevVal && e.newVal) {
 215                 // This needs to be done each time the dialog is shown as new dialogs may have been opened.
 216                 this.applyZIndex();
 217                 // This needs to be done each time the dialog is shown as the window may have been resized.
 218                 this.makeResponsive();
 219                 if (!this.shouldResizeFullscreen()) {
 220                     if (this.get('draggable')) {
 221                         titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
 222                         this.plug(Y.Plugin.Drag, {handles : [titlebar]});
 223                         Y.one(titlebar).setStyle('cursor', 'move');
 224                     }
 225                 }
 226             }
 227             if (this.get('center') && !e.prevVal && e.newVal) {
 228                 this.centerDialogue();
 229             }
 230             this.toggleDocumentScrolling();
 231         }
 232     },
 233     /**
 234      * If the responsive attribute is set on the dialog, and the window size is
 235      * smaller than the responsive width - make the dialog fullscreen.
 236      *
 237      * @method makeResponsive
 238      * @return void
 239      */
 240     makeResponsive : function() {
 241         var bb = this.get('boundingBox'),
 242             content;
 243
 244         if (this.shouldResizeFullscreen()) {
 245             // Make this dialogue fullscreen on a small screen.
 246             // Disable the page scrollbars.
 247
 248             // Size and position the fullscreen dialog.
 249
 250             bb.addClass(DIALOGUE_PREFIX+'-fullscreen');
 251             bb.setStyles({'left' : null, 'top' : null, 'width' : null, 'height' : null});
 252
 253             content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
 254             content.setStyle('overflow', 'auto');
 255         } else {
 256             if (this.get('responsive')) {
 257                 // We must reset any of the fullscreen changes.
 258                 bb.removeClass(DIALOGUE_PREFIX+'-fullscreen')
 259                     .setStyles({'overflow' : 'inherit',
 260                                 'width' : this.get('width'),
 261                                 'height' : this.get('height')});
 262                 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
 263                 content.setStyle('overflow', 'inherit');
 264
 265             }
 266         }
 267     },
 268     /**
 269      * Center the dialog on the screen.
 270      *
 271      * @method centerDialogue
 272      * @return void
 273      */
 274     centerDialogue : function() {
 275         var bb = this.get('boundingBox'),
 276             hidden = bb.hasClass(DIALOGUE_HIDDEN_CLASS),
 277             x,
 278             y;
 279
 280         // Don't adjust the position if we are in full screen mode.
 281         if (this.shouldResizeFullscreen()) {
 282             return;
 283         }
 284         if (hidden) {
 285             bb.setStyle('top', '-1000px').removeClass(DIALOGUE_HIDDEN_CLASS);
 286         }
 287         x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
 288         y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
 289         bb.setStyles({ 'left' : x, 'top' : y});
 290
 291         if (hidden) {
 292             bb.addClass(DIALOGUE_HIDDEN_CLASS);
 293         }
 294     },
 295     /**
 296      * Return if this dialogue should be fullscreen or not.
 297      * Responsive attribute must be true and we should not be in an iframe and the screen width should
 298      * be less than the responsive width.
 299      *
 300      * @method shouldResizeFullscreen
 301      * @return Boolean
 302      */
 303     shouldResizeFullscreen : function() {
 304         return (window === window.parent) && this.get('responsive') &&
 305                Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
 306     },
 307
 308     /**
 309      * Override the show method to set keyboard focus on the dialogue.
 310      *
 311      * @method show
 312      * @return void
 313      */
 314     show : function() {
 315         var result = null,
 316             header = this.headerNode,
 317             content = this.bodyNode;
 318
 319         result = DIALOGUE.superclass.show.call(this);
 320         if (header && header !== '') {
 321             header.focus();
 322         } else if (content && content !== '') {
 323             content.focus();
 324         }
 325         return result;
 326     }
 327 }, {
 328     NAME : DIALOGUE_NAME,
 329     CSS_PREFIX : DIALOGUE_PREFIX,
 330     ATTRS : {
 331         notificationBase : {
 332
 333         },
 334
 335         /**
 336          * Whether to display the dialogue modally and with a
 337          * lightbox style.
 338          *
 339          * @attribute lightbox
 340          * @type Boolean
 341          * @default true
 342          */
 343         lightbox : {
 344             validator : Y.Lang.isBoolean,
 345             value : true
 346         },
 347
 348         /**
 349          * Whether to display a close button on the dialogue.
 350          *
 351          * Note, we do not recommend hiding the close button as this has
 352          * potential accessibility concerns.
 353          *
 354          * @attribute closeButton
 355          * @type Boolean
 356          * @default true
 357          */
 358         closeButton : {
 359             validator : Y.Lang.isBoolean,
 360             value : true
 361         },
 362
 363         /**
 364          * The title for the close button if one is to be shown.
 365          *
 366          * @attribute closeButtonTitle
 367          * @type String
 368          * @default 'Close'
 369          */
 370         closeButtonTitle : {
 371             validator : Y.Lang.isString,
 372             value : 'Close'
 373         },
 374
 375         /**
 376          * Whether to display the dialogue centrally on the screen.
 377          *
 378          * @attribute center
 379          * @type Boolean
 380          * @default true
 381          */
 382         center : {
 383             validator : Y.Lang.isBoolean,
 384             value : true
 385         },
 386
 387         /**
 388          * Whether to make the dialogue movable around the page.
 389          *
 390          * @attribute draggable
 391          * @type Boolean
 392          * @default false
 393          */
 394         draggable : {
 395             validator : Y.Lang.isBoolean,
 396             value : false
 397         },
 398
 399         /**
 400          * Used to generate a unique id for the dialogue.
 401          *
 402          * @attribute COUNT
 403          * @type Integer
 404          * @default 0
 405          */
 406         COUNT: {
 407             value: 0
 408         },
 409
 410         /**
 411          * Used to disable the fullscreen resizing behaviour if required.
 412          *
 413          * @attribute responsive
 414          * @type Boolean
 415          * @default true
 416          */
 417         responsive : {
 418             validator : Y.Lang.isBoolean,
 419             value : true
 420         },
 421
 422         /**
 423          * The width that this dialogue should be resized to fullscreen.
 424          *
 425          * @attribute responsiveWidth
 426          * @type Integer
 427          * @default 768
 428          */
 429         responsiveWidth : {
 430             value : 768
 431         }
 432     }
 433 });
 434
 435 M.core.dialogue = DIALOGUE;