www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/image_widget_crop/js/ImageWidgetCrop.js

   1 /**
   2  * @file
   3  * Defines the behaviors needed for cropper integration.
   4  */
   5
   6 (function ($, Drupal, debounce) {
   7   'use strict';
   8
   9   var $window = $(window);
  10
  11   /**
  12    * @class Drupal.ImageWidgetCrop
  13    *
  14    * @param {HTMLElement|jQuery} element
  15    *   The wrapper element.
  16    */
  17   Drupal.ImageWidgetCrop = function (element) {
  18
  19     /**
  20      * The wrapper element.
  21      *
  22      * @type {jQuery}
  23      */
  24     this.$wrapper = $(element);
  25
  26     /**
  27      * The summary element.
  28      *
  29      * @type {jQuery}
  30      */
  31     this.$summary = this.$wrapper.find(this.selectors.summary).first();
  32
  33     /**
  34      * Flag indicating whether the instance has been initialized.
  35      *
  36      * @type {Boolean}
  37      */
  38     this.initialized = false;
  39
  40     /**
  41      * The current summary text.
  42      *
  43      * @type {String}
  44      */
  45     this.summary = Drupal.t('Crop image');
  46
  47     /**
  48      * The individual ImageWidgetCropType instances.
  49      *
  50      * @type {Array.<Drupal.ImageWidgetCropType>}
  51      */
  52     this.types = [];
  53
  54     // Initialize the instance.
  55     this.init();
  56   };
  57
  58   /**
  59    * The selectors used to identify elements for this module.
  60    *
  61    * @type {Object.<String, String>}
  62    */
  63   Drupal.ImageWidgetCrop.prototype.selectors = {
  64     // Unfortunately, core does not provide a way to inject attributes into the
  65     // wrapper element's "summary" in a stable way. So, we can only target
  66     // the immediate children known to be the likely elements. Contrib can
  67     // extend this selector if needed.
  68     summary: '> summary, > legend',
  69     types: '[data-drupal-iwc=type]',
  70     wrapper: '[data-drupal-iwc=wrapper]'
  71   };
  72
  73   /**
  74    * Destroys this instance.
  75    */
  76   Drupal.ImageWidgetCrop.prototype.destroy = function () {
  77     this.types.forEach(function (type) {
  78       type.destroy();
  79     });
  80   };
  81
  82   /**
  83    * Initializes the instance.
  84    */
  85   Drupal.ImageWidgetCrop.prototype.init = function () {
  86     if (this.initialized) {
  87       return;
  88     }
  89
  90     // Find all the types.
  91     var _this = this;
  92     this.$wrapper.find(this.selectors.types).each(function () {
  93       _this.types.push(new Drupal.ImageWidgetCropType(_this, this));
  94     });
  95
  96     // Debounce resize event to prevent any issues.
  97     $window.on('resize.iwc', debounce(this.resize.bind(this), 250));
  98
  99     // Update the summary when triggered from vertical tabs underneath it.
 100     this.$wrapper.on('summaryUpdated', this.updateSummary.bind(this));
 101
 102     // Trigger the initial summaryUpdate event.
 103     this.$wrapper.trigger('summaryUpdated');
 104   };
 105
 106   /**
 107    * The "resize" event callback.
 108    *
 109    * @see Drupal.ImageWidgetCropType.prototype.resize
 110    */
 111   Drupal.ImageWidgetCrop.prototype.resize = function () {
 112     var args = arguments;
 113
 114     // Proxy the resize event to each ImageWidgetCropType instance.
 115     this.types.forEach(function (type) {
 116       type.resize.apply(type, args);
 117     });
 118   };
 119
 120   /**
 121    * Updates the summary of the wrapper.
 122    */
 123   Drupal.ImageWidgetCrop.prototype.updateSummary = function () {
 124     var text = Drupal.t('Crop image');
 125
 126     // Determine if any ImageWidgetCropType has been applied.
 127     for (var i = 0, l = this.types.length; i < l; i++) {
 128       var type = this.types[i];
 129       if (type.getValue('applied')) {
 130         text = Drupal.t('Crop image (cropping applied)');
 131         break;
 132       }
 133     }
 134
 135     if (this.summary !== text) {
 136       this.$summary.text(this.summary = text);
 137     }
 138   };
 139
 140 }(jQuery, Drupal, Drupal.debounce));