New modal crop widget. Integration with Entity Browser.

README.md

@@ -147,6 +147,7 @@ $form['image_crop'] = [
   '#crop_preview_image_style' => $crop_config->get('settings.crop_preview_
    image_style'),
   '#show_default_crop' => $crop_config->get('settings.show_default_crop'),
+  '#show_reset_crop' => $crop_config->get('settings.show_reset_crop'),
   '#show_crop_area' => $crop_config->get('settings.show_crop_area'),
   '#warn_mupltiple_usages' => $crop_config->get('settings.warn_
    mupltiple_usages'),
@@ -160,6 +161,7 @@ $form['image_crop'] = [
   '#crop_type_list' => ['crop_16_9', 'crop_free'],
   '#crop_preview_image_style' => 'crop_thumbnail',
   '#show_default_crop' => FALSE,
+  '#show_reset_crop' => FALSE,
   '#show_crop_area' => FALSE,
   '#warn_mupltiple_usages' => FALSE,
 ];

config/install/image_widget_crop.settings.yml

@@ -5,3 +5,4 @@ settings:
   crop_list: []
   warn_multiple_usages: FALSE
   show_default_crop: TRUE
+  show_reset_crop: TRUE

config/schema/image_widget_crop.schema.yml

@@ -27,6 +27,9 @@ field.widget.settings.image_widget_crop:
     show_default_crop:
       type: boolean
       label: 'Show default crop area'
+    show_reset_crop:
+      type: boolean
+      label: 'Show "Reset crop" button'
 
 image_widget_crop.settings:
   type: config_object
@@ -55,6 +58,55 @@ image_widget_crop.settings:
         show_default_crop:
           type: boolean
           label: 'Show default crop area'
+        show_reset_crop:
+          type: boolean
+          label: 'Show "Reset crop" button'
         show_crop_area:
           type: boolean
           label: 'Always expand crop area'
+
+field.widget.settings.image_widget_modal_crop:
+  type: mapping
+  label: 'Image field display format settings'
+  mapping:
+    progress_indicator:
+      type: string
+      label: 'Progress indicator'
+    preview_image_style:
+      type: string
+      label: 'Preview image style'
+    crop_preview_image_style:
+      type: string
+      label: 'Preview crop image style'
+    crop_list:
+      type: sequence
+      label: 'The preview image will be cropped'
+      sequence:
+        type: string
+    warn_multiple_usages:
+      type: boolean
+      label: 'Warn user when a file have multiple usages'
+    show_crop_area:
+      type: boolean
+      label: 'Always expand crop area'
+    show_default_crop:
+      type: boolean
+      label: 'Show default crop area'
+    show_reset_crop:
+      type: boolean
+      label: 'Show "Reset crop" button'
+    modal_title:
+      type: string
+      label: 'Modal dialog title'
+    modal_width:
+      type: integer
+      label: 'Modal dialog width'
+    modal_height:
+      type: integer
+      label: 'Modal dialog height'
+    modal_min_width:
+      type: integer
+      label: 'Modal dialog min width'
+    modal_min_height:
+      type: integer
+      label: 'Modal dialog min height'

image_widget_crop.libraries.yml

@@ -19,3 +19,9 @@ cropper.integration:
     - core/drupal
     - core/drupal.debounce
     - image_widget_crop/cropper
+
+modal:
+  js:
+    js/ImageWidgetModalCrop.js: {}
+  dependencies:
+    - core/drupal.dialog.ajax

image_widget_crop.module

@@ -154,6 +154,7 @@ function image_widget_crop_form_file_form_alter(&$form, FormStateInterface $form
       '#crop_type_list' => $crop_config->get('settings.crop_list'),
       '#crop_preview_image_style' => $crop_config->get('settings.crop_preview_image_style'),
       '#show_default_crop' => $crop_config->get('settings.show_default_crop'),
+      '#show_reset_crop' => $crop_config->get('settings.show_reset_crop'),
       '#warn_mupltiple_usages' => $crop_config->get('settings.warn_mupltiple_usages'),
     ];
     $form['actions']['submit']['#submit'][] = 'image_widget_crop_form_submit';

js/ImageWidgetModalCrop.js

@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Defines the behaviors needed for modal widget integration.
+ */
+
+(function ($, Drupal) {
+  'use strict';
+
+  Drupal.behaviors.imageWidgetModalCrop = {
+    attach: function (context) {
+
+      // Handle click on "Apply" button in dialog.
+      $('.image-crop-apply', context).click(function() {
+        var $wrapper = $('.crop-preview-wrapper__value', context);
+
+        // Copy crop values from the dialog inside the real form.
+        $.each($('input', $wrapper), function(key, input) {
+          var name = $(input).attr('name');
+          var value = $(input).attr('value');
+          $('input[name="' + name + '"]').val(value);
+        });
+
+        // Close the modal dialog.
+        Drupal.dialog('#drupal-modal').close();
+      });
+
+    }
+  };
+
+}(jQuery, Drupal));

modules/image_widget_crop_examples/config/optional/core.entity_form_display.media.image_with_crop.default.yml

@@ -23,6 +23,7 @@ content:
   field_media_image:
     settings:
       show_default_crop: true
+      show_reset_crop: true
       warn_multiple_usages: true
       preview_image_style: thumbnail
       crop_preview_image_style: crop_thumbnail

modules/image_widget_crop_examples/config/optional/core.entity_form_display.node.crop_responsive_example.default.yml

@@ -36,6 +36,7 @@ content:
     weight: 1
     settings:
       show_default_crop: true
+      show_reset_crop: true
       warn_multiple_usages: true
       preview_image_style: thumbnail
       crop_preview_image_style: crop_thumbnail

modules/image_widget_crop_examples/config/optional/core.entity_form_display.node.crop_simple_example.default.yml

@@ -37,6 +37,7 @@ content:
     settings:
       show_crop_area: true
       show_default_crop: true
+      show_reset_crop: true
       warn_multiple_usages: true
       preview_image_style: thumbnail
       crop_preview_image_style: crop_thumbnail

modules/image_widget_crop_examples/config/optional/image_widget_crop.settings.yml

@@ -8,6 +8,7 @@ settings:
     crop_free_ratio: crop_free_ratio
   warn_multiple_usages: false
   show_default_crop: true
+  show_reset_crop: true
 _core:
   default_config_hash: QjLJUHJAzic-efSYtJnhoz7in-eT3A1PriLW3i11DFg
 langcode: en

modules/image_widget_crop_examples/image_widget_crop_examples.install

@@ -20,6 +20,7 @@ function image_widget_crop_examples_install() {
     ->getEditable('image_widget_crop.settings')
     ->set('settings.crop_preview_image_style', 'crop_thumbnail')
     ->set('settings.show_default_crop', TRUE)
+    ->set('settings.show_reset_crop', TRUE)
     ->set('settings.warn_multiple_usages', FALSE)
     ->set('settings.crop_list', [
       'crop_16_9' => 'crop_16_9',

modules/image_widget_crop_examples/src/Form/ImageWidgetCropExamplesForm.php

@@ -122,6 +122,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
         '#crop_type_list' => ['crop_16_9'],
         '#crop_preview_image_style' => 'crop_thumbnail',
         '#show_default_crop' => TRUE,
+        '#show_reset_crop' => TRUE,
         '#show_crop_area' => FALSE,
         '#warn_mupltiple_usages' => TRUE,
       ];

src/Element/ImageCrop.php

@@ -33,9 +33,10 @@ public function getInfo() {
       '#crop_type_list' => [],
       '#warn_multiple_usages' => FALSE,
       '#show_default_crop' => TRUE,
+      '#show_reset_crop' => TRUE,
       '#show_crop_area' => FALSE,
       '#attached' => [
-        'library' => 'image_widget_crop/cropper.integration',
+        'library' => ['image_widget_crop/cropper.integration'],
       ],
       '#tree' => TRUE,
     ];
@@ -95,6 +96,12 @@ public static function processCrop(array &$element, FormStateInterface $form_sta
         $available_crop_types = $iwc_manager->getAvailableCropType(CropType::getCropTypeNames());
         $crop_type_list = array_keys($available_crop_types);
       }
+
+      // In some cases we restrict crope list to be a single value.
+      if (!is_array($crop_type_list)) {
+        $crop_type_list = [$crop_type_list];
+      }
+
       $element['crop_wrapper'] = [
         '#type' => 'details',
         '#title' => t('Crop image'),
@@ -172,15 +179,17 @@ public static function processCrop(array &$element, FormStateInterface $form_sta
             '#weight' => -10,
           ];
 
-          $element['crop_wrapper'][$type]['crop_container']['reset'] = [
-            '#type' => 'button',
-            '#value' => t('Reset crop'),
-            '#attributes' => [
-              'class' => ['crop-preview-wrapper__crop-reset'],
-              'data-drupal-iwc' => 'reset',
-            ],
-            '#weight' => -10,
-          ];
+          if ($element['#show_reset_crop']) {
+            $element['crop_wrapper'][$type]['crop_container']['reset'] = [
+              '#type' => 'button',
+              '#value' => t('Reset crop'),
+              '#attributes' => [
+                'class' => ['crop-preview-wrapper__crop-reset'],
+                'data-drupal-iwc' => 'reset',
+              ],
+              '#weight' => -10,
+            ];
+          }
 
           // Generation of html List with image & crop information.
           $element['crop_wrapper'][$type]['crop_container']['values'] = [
@@ -396,7 +405,7 @@ public static function validateHardLimit(array $element, FormStateInterface $for
             '@hard_limit' => $hard_limit[$element_name],
             '@crop_name' => $crop_type->label(),
           ]
-          ));
+        ));
       }
     }
   }