www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/entity_browser/js/entity_browser.modal.js

   1 /**
   2  * @file entity_browser.modal.js
   3  *
   4  * Defines the behavior of the entity browser's modal display.
   5  */
   6
   7 (function ($, Drupal, drupalSettings) {
   8
   9   'use strict';
  10
  11   Drupal.entityBrowserModal = {};
  12
  13   Drupal.AjaxCommands.prototype.select_entities = function (ajax, response, status) {
  14     var uuid = drupalSettings.entity_browser.modal.uuid;
  15
  16     $(':input[data-uuid="' + uuid + '"]').trigger('entities-selected', [uuid, response.entities])
  17       .removeClass('entity-browser-processed').unbind('entities-selected');
  18   };
  19
  20   /**
  21    * Registers behaviours related to modal display.
  22    */
  23   Drupal.behaviors.entityBrowserModal = {
  24     attach: function (context) {
  25       _.each(drupalSettings.entity_browser.modal, function (instance) {
  26         _.each(instance.js_callbacks, function (callback) {
  27           // Get the callback.
  28           callback = callback.split('.');
  29           var fn = window;
  30
  31           for (var j = 0; j < callback.length; j++) {
  32             fn = fn[callback[j]];
  33           }
  34
  35           if (typeof fn === 'function') {
  36             $(':input[data-uuid="' + instance.uuid + '"]').not('.entity-browser-processed')
  37               .bind('entities-selected', fn).addClass('entity-browser-processed');
  38           }
  39         });
  40         if (instance.auto_open) {
  41           $('input[data-uuid="' + instance.uuid + '"]').click();
  42         }
  43       });
  44     }
  45   };
  46
  47   /**
  48    * Registers behaviours related to modal open and windows resize for fluid modal.
  49    */
  50   Drupal.behaviors.fluidModal = {
  51     attach: function (context) {
  52
  53       // Recalculate dialog size on window resize.
  54       $(window).resize(function (context) {
  55         Drupal.entityBrowserModal.fluidDialog();
  56       });
  57
  58       // Catch dialog if opened within a viewport smaller than the dialog width
  59       // and recalculate size of all open dialogs.
  60       $(document).on('dialogopen', '.ui-dialog', function (event, ui) {
  61         Drupal.entityBrowserModal.fluidDialog();
  62       });
  63
  64       // Disable scrolling of the whole browser window to not interfere with the
  65       // iframe scrollbar.
  66       $(window).on({
  67         'dialog:aftercreate': function (event, dialog, $element, settings) {
  68           $('body').css({overflow: 'hidden'});
  69         },
  70         'dialog:beforeclose': function (event, dialog, $element) {
  71           $('body').css({overflow: 'inherit'});
  72         }
  73       });
  74     }
  75   };
  76
  77   /**
  78    * Recalculates size of the modal.
  79    */
  80   Drupal.entityBrowserModal.fluidDialog = function () {
  81
  82     var $visible = $('.ui-dialog:visible');
  83     // For each open dialog.
  84     $visible.each(function () {
  85       var $this = $(this);
  86       var dialog = $this.find('.ui-dialog-content').data('ui-dialog');
  87       // If fluid option == true.
  88       if (dialog.options.fluid) {
  89         var wWidth = $(window).width();
  90         // Check window width against dialog width.
  91         if (dialog.options.maxWidth && (wWidth > parseInt(dialog.options.maxWidth) + 50)) {
  92           dialog.option('width', dialog.options.maxWidth);
  93         }
  94         else {
  95           // If no maxWidth is defined, make it responsive.
  96           dialog.option('width', '92%');
  97         }
  98
  99         var vHeight = $(window).height();
 100         // Check window width against dialog width.
 101         if (dialog.options.maxHeight && vHeight > (parseInt(dialog.options.maxHeight) + 50)) {
 102           dialog.option('height', dialog.options.maxHeight);
 103         }
 104         else {
 105           // If no maxHeight is defined, make it responsive.
 106           dialog.option('height', vHeight - 100);
 107
 108           // Because there is no iframe height 100% in HTML 5, we have to set
 109           // the height of the iframe as well.
 110           var contentHeight = $this.find('.ui-dialog-content').height() - 20;
 111           $this.find('iframe').css('height', contentHeight);
 112         }
 113
 114         // Reposition dialog.
 115         dialog.option('position', dialog.options.position);
 116       }
 117     });
 118   };
 119
 120 }(jQuery, Drupal, drupalSettings));