--- /dev/null
+/**
+ * @file
+ * Defines the behaviors needed for cropper integration.
+ */
+
+(function ($, Drupal, drupalSettings) {
+ 'use strict';
+
+ var cropperSelector = '.crop-preview-wrapper__preview-image';
+ var cropperValuesSelector = '.crop-preview-wrapper__value';
+ var cropWrapperSelector = '.image-data__crop-wrapper';
+ var cropWrapperSummarySelector = 'div > a[role="button"], summary';
+ var verticalTabsSelector = '.vertical-tabs';
+ var verticalTabsMenuItemSelector = '.vertical-tabs__menu-item, .vertical-tab-button';
+ var resetSelector = '.crop-preview-wrapper__crop-reset';
+ var detailsWrapper = cropWrapperSelector + ' > div:first-child';
+ var detailsParentSelector = '.image-widget-data';
+ var table = '.responsive-enabled';
+ var boostrapTable = '.panel-body.panel-collapse';
+ var cropperOptions = {
+ background: false,
+ zoomable: false,
+ viewMode: 1,
+ autoCropArea: 1,
+ responsive: false,
+ // Callback function, fires when crop is applied.
+ cropend: function (e) {
+ var $this = $(this);
+ var $values = $this.siblings(cropperValuesSelector);
+ var data = $this.cropper('getData');
+ // Calculate delta between original and thumbnail images.
+ var delta = $this.data('original-height') / $this.prop('naturalHeight');
+ /*
+ * All data returned by cropper plugin multiple with delta in order to get
+ * proper crop sizes for original image.
+ */
+ $values.find('.crop-x').val(Math.round(data.x * delta));
+ $values.find('.crop-y').val(Math.round(data.y * delta));
+ $values.find('.crop-width').val(Math.round(data.width * delta));
+ $values.find('.crop-height').val(Math.round(data.height * delta));
+ $values.find('.crop-applied').val(1);
+ Drupal.imageWidgetCrop.updateCropSummaries($this);
+ }
+ };
+
+ Drupal.imageWidgetCrop = {};
+
+ /**
+ * Initialize cropper on the ImageWidgetCrop widget.
+ *
+ * @param {Object} context - Element to initialize cropper on.
+ */
+ Drupal.imageWidgetCrop.initialize = function (context) {
+ var $cropWrapper = $(cropWrapperSelector, context);
+ var $cropWrapperSummary = $cropWrapper.children(detailsWrapper).find(cropWrapperSummarySelector);
+ var $verticalTabs = $(verticalTabsSelector, context);
+ var $verticalTabsMenuItem = $verticalTabs.find(verticalTabsMenuItemSelector);
+ var $reset = $(resetSelector, context);
+
+ /*
+ * Cropper initialization on click events on vertical tabs and details
+ * summaries (for smaller screens).
+ */
+ $verticalTabsMenuItem.add($cropWrapperSummary).click(function () {
+ var tabId = $(this).find('a').attr('href');
+ var $cropper = $(this).parent().find(cropperSelector);
+ if (typeof tabId !== 'undefined') {
+ $cropper = $(tabId).find(cropperSelector);
+ }
+ var ratio = Drupal.imageWidgetCrop.getRatio($cropper);
+ Drupal.imageWidgetCrop.initializeCropper($cropper, ratio);
+ });
+
+ // Handling click event for opening/closing vertical tabs, we use "find" instead "children" to support other themes.
+ $cropWrapper.find(cropWrapperSummarySelector).once('imageWidgetCrop').click(function (evt) {
+ // Work only on bigger screens where $verticalTabsMenuItem is not empty.
+ if ($verticalTabsMenuItem.length !== 0) {
+ // If detailsWrapper is not visible display it and initialize cropper.
+ if (!$(this).siblings(detailsWrapper).is(':visible')) {
+ evt.preventDefault();
+ // We check if the "structure" of element are more "standard" or have changed.
+ if ($(this).parent().is('details')) {
+ $(this).parent().attr('open','open');
+ $(table).addClass('responsive-enabled--opened');
+ $(this).parent().find(detailsWrapper).show();
+ Drupal.imageWidgetCrop.initializeCropperOnChildren($(this).parent());
+ } else {
+ // To support boostrap theme we need to add specifics, attributes required by them @see #2803407
+ $(this).attr('aria-expanded', 'true');
+ $(boostrapTable).addClass('in');
+ $(boostrapTable).css('height', '');
+ // Boostrap theme add two level in element, ATM that work but found better way...
+ $(this).parent().parent().find(detailsWrapper).show();
+ Drupal.imageWidgetCrop.initializeCropperOnChildren($(this).parent().parent());
+ }
+ evt.stopImmediatePropagation();
+ }
+ // If detailsWrapper is visible hide it.
+ else {
+ $(this).parent().removeAttr('open');
+ $(table).removeClass('responsive-enabled--opened');
+ $(this).parent().find(detailsWrapper).hide();
+ }
+ }
+ });
+
+ $reset.on('click', function (e) {
+ e.preventDefault();
+ var $element = $(this).siblings(cropperSelector);
+ Drupal.imageWidgetCrop.reset($element);
+ return false;
+ });
+
+ // Handling cropping when viewport resizes.
+ $(window).resize(function () {
+ $(detailsParentSelector).each(function () {
+ // Find only opened widgets.
+ var cropperDetailsWrapper = $(this).children('details[open="open"], .image-data__crop-wrapper > div[aria-expanded="true"]');
+ cropperDetailsWrapper.each(function () {
+ // Find all croppers for opened widgets.
+ var $croppers = $(this).find(cropperSelector);
+ $croppers.each(function () {
+ var $this = $(this);
+ if ($this.parent().parent().parent().css('display') !== 'none') {
+ // Get previous data for cropper.
+ var canvasDataOld = $this.cropper('getCanvasData');
+ var cropBoxData = $this.cropper('getCropBoxData');
+
+ // Re-render cropper.
+ $this.cropper('render');
+
+ // Get new data for cropper and calculate resize ratio.
+ var canvasDataNew = $this.cropper('getCanvasData');
+ var ratio = 1;
+ if (canvasDataOld.width !== 0) {
+ ratio = canvasDataNew.width / canvasDataOld.width;
+ }
+
+ // Set new data for crop box.
+ $.each(cropBoxData, function (index, value) {
+ cropBoxData[index] = value * ratio;
+ });
+ $this.cropper('setCropBoxData', cropBoxData);
+
+ Drupal.imageWidgetCrop.updateHardLimits($this);
+ Drupal.imageWidgetCrop.checkSoftLimits($this);
+ Drupal.imageWidgetCrop.updateCropSummaries($this);
+ }
+ });
+ });
+ });
+ });
+
+ // Correctly updating messages of summaries.
+ Drupal.imageWidgetCrop.updateAllCropSummaries();
+ };
+
+ /**
+ * Get ratio data and determine if an available ratio or free crop.
+ *
+ * @param {Object} $element - Element to initialize cropper on its children.
+ */
+ Drupal.imageWidgetCrop.getRatio = function ($element) {
+ var ratio = $element.data('ratio');
+ var regex = /:/;
+
+ if ((regex.exec(ratio)) !== null) {
+ var int = ratio.split(":");
+ if ($.isArray(int) && ($.isNumeric(int[0]) && $.isNumeric(int[1]))) {
+ return int[0] / int[1];
+ }
+ else {
+ return "NaN";
+ }
+ }
+ else {
+ return ratio;
+ }
+ };
+
+ /**
+ * Initialize cropper on an element.
+ *
+ * @param {Object} $element - Element to initialize cropper on.
+ * @param {number} ratio - The ratio of the image.
+ */
+ Drupal.imageWidgetCrop.initializeCropper = function ($element, ratio) {
+ var data = null;
+ var $values = $element.siblings(cropperValuesSelector);
+
+ // Calculate minimal height for cropper container (minimal width is 200).
+ var minDelta = ($element.data('original-width') / 200);
+ cropperOptions['minContainerHeight'] = $element.data('original-height') / minDelta;
+
+ var options = cropperOptions;
+ var delta = $element.data('original-height') / $element.prop('naturalHeight');
+
+ // If 'Show default crop' is checked show crop box.
+ options.autoCrop = drupalSettings['crop_default'];
+
+ if (parseInt($values.find('.crop-applied').val()) === 1) {
+ data = {
+ x: Math.round(parseInt($values.find('.crop-x').val()) / delta),
+ y: Math.round(parseInt($values.find('.crop-y').val()) / delta),
+ width: Math.round(parseInt($values.find('.crop-width').val()) / delta),
+ height: Math.round(parseInt($values.find('.crop-height').val()) / delta),
+ rotate: 0,
+ scaleX: 1,
+ scaleY: 1
+ };
+ options.autoCrop = true;
+ }
+
+ // React on crop move and check soft limits.
+ options.cropmove = function (e) {
+ Drupal.imageWidgetCrop.checkSoftLimits($(this));
+ };
+
+ options.data = data;
+ options.aspectRatio = ratio;
+
+ $element.cropper(options);
+
+ // Hard and soft limits we need to check for fist time when cropper
+ // finished it initialization.
+ $element.on('built.cropper', function (e) {
+ var $this = $(this);
+ Drupal.imageWidgetCrop.updateHardLimits($this);
+ Drupal.imageWidgetCrop.checkSoftLimits($this);
+ });
+
+ // If 'Show default crop' is checked apply default crop.
+ if (drupalSettings['crop_default']) {
+ var dataDefault = $element.cropper('getData');
+ // Calculate delta between original and thumbnail images.
+ var deltaDefault = $element.data('original-height') / $element.prop('naturalHeight');
+ /*
+ * All data returned by cropper plugin multiple with delta in order to get
+ * proper crop sizes for original image.
+ */
+ Drupal.imageWidgetCrop.updateCropValues($values, dataDefault, deltaDefault);
+ Drupal.imageWidgetCrop.updateCropSummaries($element);
+ }
+ };
+
+ /**
+ * Update crop values in hidden inputs.
+ *
+ * @param {Object} $element - Cropper values selector.
+ * @param {Array} $data - Cropper data.
+ * @param {number} $delta - Delta between original and thumbnail images.
+ */
+ Drupal.imageWidgetCrop.updateCropValues = function ($element, $data, $delta) {
+ $element.find('.crop-x').val(Math.round($data.x * $delta));
+ $element.find('.crop-y').val(Math.round($data.y * $delta));
+ $element.find('.crop-width').val(Math.round($data.width * $delta));
+ $element.find('.crop-height').val(Math.round($data.height * $delta));
+ $element.find('.crop-applied').val(1);
+ };
+
+ /**
+ * Converts horizontal and vertical dimensions to canvas dimensions.
+ *
+ * @param {Object} $element - Crop element.
+ * @param {Number} x - horizontal dimension in image space.
+ * @param {Number} y - vertical dimension in image space.
+ */
+ Drupal.imageWidgetCrop.toCanvasDimensions = function ($element, x, y) {
+ var imageData = $element.data('cropper').getImageData();
+ return {
+ width: imageData.width * (x / $element.data('original-width')),
+ height: imageData.height * (y / $element.data('original-height'))
+ }
+ };
+
+ /**
+ * Converts horizontal and vertical dimensions to image dimensions.
+ *
+ * @param {Object} $element - Crop element.
+ * @param {Number} x - horizontal dimension in canvas space.
+ * @param {Number} y - vertical dimension in canvas space.
+ */
+ Drupal.imageWidgetCrop.toImageDimensions = function ($element, x, y) {
+ var imageData = $element.data('cropper').getImageData();
+ return {
+ width: x * ($element.data('original-width') / imageData.width),
+ height: y * ($element.data('original-height') / imageData.height)
+ }
+ };
+
+ /**
+ * Update hard limits for given element.
+ *
+ * @param {Object} $element - Crop element.
+ */
+ Drupal.imageWidgetCrop.updateHardLimits = function ($element) {
+ var cropName = $element.data('name');
+
+ // Check first that we have configuration for this crop.
+ if (!drupalSettings.image_widget_crop.hasOwnProperty(cropName)) {
+ return;
+ }
+
+ var cropConfig = drupalSettings.image_widget_crop[cropName];
+ var cropper = $element.data('cropper');
+ var options = cropper.options;
+
+ // Limits works in canvas so we need to convert dimensions.
+ var converted = Drupal.imageWidgetCrop.toCanvasDimensions($element, cropConfig.hard_limit.width, cropConfig.hard_limit.height);
+ options.minCropBoxWidth = converted.width;
+ options.minCropBoxHeight = converted.height;
+
+ // After updating the options we need to limit crop box.
+ cropper.limitCropBox(true, false);
+ };
+
+ /**
+ * Check soft limit for given crop element.
+ *
+ * @param {Object} $element - Crop element.
+ */
+ Drupal.imageWidgetCrop.checkSoftLimits = function ($element) {
+ var cropName = $element.data('name');
+
+ // Check first that we have configuration for this crop.
+ if (!drupalSettings.image_widget_crop.hasOwnProperty(cropName)) {
+ return;
+ }
+
+ var cropConfig = drupalSettings.image_widget_crop[cropName];
+
+ var minSoftCropBox = {
+ 'width': Number(cropConfig.soft_limit.width) || 0,
+ 'height': Number(cropConfig.soft_limit.height) || 0
+ };
+
+ // We do comparison in image dimensions so lets convert first.
+ var cropBoxData = $element.cropper('getCropBoxData');
+ var converted = Drupal.imageWidgetCrop.toImageDimensions($element, cropBoxData.width, cropBoxData.height);
+
+ var dimensions = ['width', 'height'];
+
+ for (var i = 0; i < dimensions.length; ++i) {
+ // @todo - setting up soft limit status in data attribute is not ideal
+ // but current architecture is like that. When we convert to proper
+ // one imageWidgetCrop object per crop widget we will be able to fix
+ // this also. @see https://www.drupal.org/node/2660788.
+ var softLimitReached = $element.data(dimensions[i] + '-soft-limit-reached');
+
+ if (converted[dimensions[i]] < minSoftCropBox[dimensions[i]]) {
+ if (!softLimitReached) {
+ softLimitReached = true;
+ Drupal.imageWidgetCrop.softLimitChanged($element, dimensions[i], softLimitReached);
+ }
+ }
+ else if (softLimitReached) {
+ softLimitReached = false;
+ Drupal.imageWidgetCrop.softLimitChanged($element, dimensions[i], softLimitReached);
+ }
+ }
+ };
+
+ /**
+ * React on soft limit change.
+ *
+ * @param {Object} $element - Crop element.
+ * @param {boolean} newSoftLimitState - new soft imit state, true if it
+ * reached, or false.
+ */
+ Drupal.imageWidgetCrop.softLimitChanged = function ($element, dimension, newSoftLimitState) {
+ var $cropperWrapper = $element.siblings('.cropper-container');
+ if (newSoftLimitState) {
+ $cropperWrapper.addClass('cropper--' + dimension + '-soft-limit-reached');
+ }
+ else {
+ $cropperWrapper.removeClass('cropper--' + dimension + '-soft-limit-reached');
+ }
+
+ // @todo - use temporary storage while we are waiting for [#2660788].
+ $element.data(dimension + '-soft-limit-reached', newSoftLimitState);
+
+ Drupal.imageWidgetCrop.updateSingleCropSummary($element);
+ };
+
+ /**
+ * Initialize cropper on all children of an element.
+ *
+ * @param {Object} $element - Element to initialize cropper on its children.
+ */
+ Drupal.imageWidgetCrop.initializeCropperOnChildren = function ($element) {
+ var visibleCropper = $element.find(cropperSelector + ':visible');
+ var ratio = Drupal.imageWidgetCrop.getRatio($(visibleCropper));
+ Drupal.imageWidgetCrop.initializeCropper($(visibleCropper), ratio);
+ };
+
+ /**
+ * Update single crop summary of an element.
+ *
+ * @param {Object} $element - The element cropping on which has been changed.
+ */
+ Drupal.imageWidgetCrop.updateSingleCropSummary = function ($element) {
+ var $values = $element.siblings(cropperValuesSelector);
+ var croppingApplied = parseInt($values.find('.crop-applied').val());
+ var summaryMessages = [];
+
+ $element.closest('details').drupalSetSummary(function (context) {
+ if (croppingApplied === 1) {
+ summaryMessages.push(Drupal.t('Cropping applied.'));
+ }
+
+ if ($element.data('height-soft-limit-reached') || $element.data('width-soft-limit-reached')) {
+ summaryMessages.push(Drupal.t('Soft limit reached.'));
+ }
+
+ return summaryMessages.join('<br>');
+ });
+ };
+
+ /**
+ * Update common crop summary of an element.
+ *
+ * @param {Object} $element - The element cropping on which has been changed.
+ */
+ Drupal.imageWidgetCrop.updateCommonCropSummary = function ($element) {
+ var croppingApplied = parseInt($element.find('.crop-applied[value="1"]').length);
+ var wrapperText = Drupal.t('Crop image');
+ if (croppingApplied) {
+ wrapperText = Drupal.t('Crop image (cropping applied)');
+ }
+ $element.find(cropWrapperSummarySelector).text(wrapperText);
+ };
+
+ /**
+ * Update crop summaries after cropping cas been set or reset.
+ *
+ * @param {Object} $element - The element cropping on which has been changed.
+ */
+ Drupal.imageWidgetCrop.updateCropSummaries = function ($element) {
+ var $details = $element.closest('details' + cropWrapperSelector);
+ Drupal.imageWidgetCrop.updateSingleCropSummary($element);
+ Drupal.imageWidgetCrop.updateCommonCropSummary($details);
+ };
+
+ /**
+ * Update crop summaries of all elements.
+ */
+ Drupal.imageWidgetCrop.updateAllCropSummaries = function () {
+ var $croppers = $(cropperSelector);
+ $croppers.each(function () {
+ Drupal.imageWidgetCrop.updateSingleCropSummary($(this));
+ });
+ var $cropWrappers = $(cropWrapperSelector);
+ $cropWrappers.each(function () {
+ Drupal.imageWidgetCrop.updateCommonCropSummary($(this));
+ });
+ };
+
+ /**
+ * Reset cropping for an element.
+ *
+ * @param {Object} $element - The element to reset cropping on.
+ */
+ Drupal.imageWidgetCrop.reset = function ($element) {
+ var $valuesDefault = $element.siblings(cropperValuesSelector);
+ var options = cropperOptions;
+ // If 'Show default crop' is not checked re-initialize cropper.
+ if (!drupalSettings['crop_default']) {
+ $element.cropper('destroy');
+ options.autoCrop = false;
+ $element.cropper(options);
+ $valuesDefault.find('.crop-applied').val(0);
+ $valuesDefault.find('.crop-x').val('');
+ $valuesDefault.find('.crop-y').val('');
+ $valuesDefault.find('.crop-width').val('');
+ $valuesDefault.find('.crop-height').val('');
+ }
+ else {
+ // Reset cropper.
+ $element.cropper('reset').cropper('options', options);
+ var dataDefault = $element.cropper('getData');
+ // Calculate delta between original and thumbnail images.
+ var deltaDefault = $element.data('original-height') / $element.prop('naturalHeight');
+ /*
+ * All data returned by cropper plugin multiple with delta in order to get
+ * proper crop sizes for original image.
+ */
+ Drupal.imageWidgetCrop.updateCropValues($valuesDefault, dataDefault, deltaDefault);
+ }
+ Drupal.imageWidgetCrop.updateCropSummaries($element);
+ };
+
+ Drupal.behaviors.imageWidgetCrop = {
+ attach: function (context) {
+ Drupal.imageWidgetCrop.initialize(context);
+ Drupal.imageWidgetCrop.updateAllCropSummaries();
+ }
+ };
+
+}(jQuery, Drupal, drupalSettings));
projects / yaffs-website / blobdiff