off-canvas.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal, debounce, displace) {
  8. Drupal.offCanvas = {
  9. minDisplaceWidth: 768,
  10. $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
  11. isOffCanvas: function isOffCanvas($element) {
  12. return $element.is('#drupal-off-canvas');
  13. },
  14. removeOffCanvasEvents: function removeOffCanvasEvents($element) {
  15. $element.off('.off-canvas');
  16. $(document).off('.off-canvas');
  17. $(window).off('.off-canvas');
  18. },
  19. beforeCreate: function beforeCreate(_ref) {
  20. var settings = _ref.settings,
  21. $element = _ref.$element;
  22. Drupal.offCanvas.removeOffCanvasEvents($element);
  23. $('body').addClass('js-off-canvas-dialog-open');
  24. settings.position = {
  25. my: 'left top',
  26. at: Drupal.offCanvas.getEdge() + ' top',
  27. of: window
  28. };
  29. settings.height = $(window).height();
  30. },
  31. beforeClose: function beforeClose(_ref2) {
  32. var $element = _ref2.$element;
  33. $('body').removeClass('js-off-canvas-dialog-open');
  34. Drupal.offCanvas.removeOffCanvasEvents($element);
  35. Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
  36. },
  37. afterCreate: function afterCreate(_ref3) {
  38. var $element = _ref3.$element,
  39. settings = _ref3.settings;
  40. var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
  41. $element.on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize).on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
  42. Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
  43. $(window).on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
  44. },
  45. render: function render(_ref4) {
  46. var settings = _ref4.settings;
  47. $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
  48. },
  49. handleDialogResize: function handleDialogResize(event) {
  50. var $element = event.data.$element;
  51. var $container = Drupal.offCanvas.getContainer($element);
  52. var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
  53. var offset = 0;
  54. $element.css({ height: 'auto' });
  55. var modalHeight = $container.height();
  56. $offsets.each(function (i, e) {
  57. offset += $(e).outerHeight();
  58. });
  59. var scrollOffset = $element.outerHeight() - $element.height();
  60. $element.height(modalHeight - offset - scrollOffset);
  61. },
  62. resetSize: function resetSize(event) {
  63. var offsets = displace.offsets;
  64. var $element = event.data.$element;
  65. var container = Drupal.offCanvas.getContainer($element);
  66. var topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
  67. var adjustedOptions = {
  68. position: {
  69. my: Drupal.offCanvas.getEdge() + ' top',
  70. at: Drupal.offCanvas.getEdge() + ' top' + topPosition,
  71. of: window
  72. }
  73. };
  74. container.css({
  75. position: 'fixed',
  76. height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
  77. });
  78. $element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
  79. },
  80. bodyPadding: function bodyPadding(event) {
  81. if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
  82. return;
  83. }
  84. var $element = event.data.$element;
  85. var $container = Drupal.offCanvas.getContainer($element);
  86. var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
  87. var width = $container.outerWidth();
  88. var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
  89. if (width !== mainCanvasPadding) {
  90. $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
  91. $container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
  92. displace();
  93. }
  94. },
  95. getContainer: function getContainer($element) {
  96. return $element.dialog('widget');
  97. },
  98. getEdge: function getEdge() {
  99. return document.documentElement.dir === 'rtl' ? 'left' : 'right';
  100. }
  101. };
  102. Drupal.behaviors.offCanvasEvents = {
  103. attach: function attach() {
  104. $(window).once('off-canvas').on({
  105. 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
  106. if (Drupal.offCanvas.isOffCanvas($element)) {
  107. Drupal.offCanvas.beforeCreate({ dialog: dialog, $element: $element, settings: settings });
  108. }
  109. },
  110. 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
  111. if (Drupal.offCanvas.isOffCanvas($element)) {
  112. Drupal.offCanvas.render({ dialog: dialog, $element: $element, settings: settings });
  113. Drupal.offCanvas.afterCreate({ $element: $element, settings: settings });
  114. }
  115. },
  116. 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
  117. if (Drupal.offCanvas.isOffCanvas($element)) {
  118. Drupal.offCanvas.beforeClose({ dialog: dialog, $element: $element });
  119. }
  120. }
  121. });
  122. }
  123. };
  124. })(jQuery, Drupal, Drupal.debounce, Drupal.displace);