www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/outside_in/js/off-canvas.js

   1 /**
   2  * @file
   3  * Drupal's off-canvas library.
   4  *
   5  * @todo This functionality should extracted into a new core library or a part
   6  *  of the current drupal.dialog.ajax library.
   7  *  https://www.drupal.org/node/2784443
   8  */
   9
  10 (function ($, Drupal, debounce, displace) {
  11
  12   'use strict';
  13
  14   // The minimum width to use body displace needs to match the width at which
  15   // the tray will be %100 width. @see outside_in.module.css
  16   var minDisplaceWidth = 768;
  17
  18   /**
  19    * The edge of the screen that the dialog should appear on.
  20    *
  21    * @type {string}
  22    */
  23   var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
  24
  25   var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
  26
  27   /**
  28    * Resets the size of the dialog.
  29    *
  30    * @param {jQuery.Event} event
  31    *   The event triggered.
  32    */
  33   function resetSize(event) {
  34     var offsets = displace.offsets;
  35     var $element = event.data.$element;
  36     var $widget = $element.dialog('widget');
  37
  38     var adjustedOptions = {
  39       // @see http://api.jqueryui.com/position/
  40       position: {
  41         my: edge + ' top',
  42         at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
  43         of: window
  44       }
  45     };
  46
  47     $widget.css({
  48       position: 'fixed',
  49       height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
  50     });
  51
  52     $element
  53       .dialog('option', adjustedOptions)
  54       .trigger('dialogContentResize.off-canvas');
  55   }
  56
  57   /**
  58    * Adjusts the dialog on resize.
  59    *
  60    * @param {jQuery.Event} event
  61    *   The event triggered.
  62    */
  63   function handleDialogResize(event) {
  64     var $element = event.data.$element;
  65     var $widget = $element.dialog('widget');
  66
  67     var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
  68     var offset = 0;
  69     var modalHeight;
  70
  71     // Let scroll element take all the height available.
  72     $element.css({height: 'auto'});
  73     modalHeight = $widget.height();
  74     $offsets.each(function () { offset += $(this).outerHeight(); });
  75
  76     // Take internal padding into account.
  77     var scrollOffset = $element.outerHeight() - $element.height();
  78     $element.height(modalHeight - offset - scrollOffset);
  79   }
  80
  81   /**
  82    * Adjusts the body padding when the dialog is resized.
  83    *
  84    * @param {jQuery.Event} event
  85    *   The event triggered.
  86    */
  87   function bodyPadding(event) {
  88     if ($('body').outerWidth() < minDisplaceWidth) {
  89       return;
  90     }
  91     var $element = event.data.$element;
  92     var $widget = $element.dialog('widget');
  93
  94     var width = $widget.outerWidth();
  95     var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
  96     if (width !== mainCanvasPadding) {
  97       $mainCanvasWrapper.css('padding-' + edge, width + 'px');
  98       $widget.attr('data-offset-' + edge, width);
  99       displace();
 100     }
 101   }
 102
 103   /**
 104    * Attaches off-canvas dialog behaviors.
 105    *
 106    * @type {Drupal~behavior}
 107    *
 108    * @prop {Drupal~behaviorAttach} attach
 109    *   Attaches event listeners for off-canvas dialogs.
 110    */
 111   Drupal.behaviors.offCanvasEvents = {
 112     attach: function () {
 113       $(window).once('off-canvas').on({
 114         'dialog:aftercreate': function (event, dialog, $element, settings) {
 115           if ($element.is('#drupal-off-canvas')) {
 116             var eventData = {settings: settings, $element: $element};
 117             $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
 118
 119             $element
 120               .on('dialogresize.off-canvas', eventData, debounce(bodyPadding, 100))
 121               .on('dialogContentResize.off-canvas', eventData, handleDialogResize)
 122               .on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100))
 123               .trigger('dialogresize.off-canvas');
 124
 125             $element.dialog('widget').attr('data-offset-' + edge, '');
 126
 127             $(window)
 128               .on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100))
 129               .trigger('resize.off-canvas');
 130           }
 131         },
 132         'dialog:beforecreate': function (event, dialog, $element, settings) {
 133           if ($element.is('#drupal-off-canvas')) {
 134             $('body').addClass('js-tray-open');
 135             // @see http://api.jqueryui.com/position/
 136             settings.position = {
 137               my: 'left top',
 138               at: edge + ' top',
 139               of: window
 140             };
 141             settings.dialogClass += ' ui-dialog-off-canvas';
 142             // Applies initial height to dialog based on window height.
 143             // See http://api.jqueryui.com/dialog for all dialog options.
 144             settings.height = $(window).height();
 145           }
 146         },
 147         'dialog:beforeclose': function (event, dialog, $element) {
 148           if ($element.is('#drupal-off-canvas')) {
 149             $('body').removeClass('js-tray-open');
 150             // Remove all *.off-canvas events
 151             $(document).off('.off-canvas');
 152             $(window).off('.off-canvas');
 153             $mainCanvasWrapper.css('padding-' + edge, 0);
 154           }
 155         }
 156       });
 157     }
 158   };
 159
 160 })(jQuery, Drupal, Drupal.debounce, Drupal.displace);