Issue #2850131 by mondrake: Add a JQuery Colorpicker color selector p…

…lugin

README.md

@@ -83,9 +83,11 @@ for further information.
 - Check Image Effects configuration page (_Manage > Configuration > Media >
   Image Effects_), and choose the UI components that effects provided by this
   module should use:
-  - _Color selector_ - allows to use either a 'color' HTML element for selecting
-    colors, or a color picker provided by the Farbtastic library. Alternative
-    selectors may be added by other modules.
+  - _Color selector_ - allows to specify a UI component to select colors in the
+    image effects. It can use a 'color' HTML element, or a color picker
+    provided by the Farbtastic library, or a JQuery Colorpicker (if the _JQuery
+    Colorpicker_ module is installed). Alternative selectors may be added by
+    other modules.
   - _Image selector_ - some effects (e.g. Watermark) require to define an image
     file to be used. This setting allows to use either a basic text field where
     the URI/path to the image can be entered, or a 'dropdown' select that will

css/image_effects.jquery_colorpicker_color_selector.css

@@ -0,0 +1,7 @@
+/* JQuery Colorpicker Color selector */
+
+div.image-effects-jquery-colorpicker-color-selector  span.image-effects-color-suffix {
+  left: 40px;
+  position: absolute;
+  top: 6px;
+}

image_effects.libraries.yml

@@ -24,6 +24,16 @@ image_effects.html_color_selector:
     component:
       css/image_effects.html_color_selector.css: {}
 
+image_effects.jquery_colorpicker_color_selector:
+  version: VERSION
+  js:
+    js/image_effects.jquery_colorpicker_color_selector.js: {}
+  css:
+    component:
+      css/image_effects.jquery_colorpicker_color_selector.css: {}
+  dependencies:
+    - jquery_colorpicker/element
+
 image_effects.text_overlay_preview:
   version: VERSION
   css:

image_effects.services.yml

@@ -14,3 +14,9 @@ services:
     class: Drupal\image_effects\Plugin\ImageEffectsPluginManager
     parent: default_plugin_manager
     arguments: ['font_selector', '@config.factory']
+  image_effects.uninstall_validator:
+    class: Drupal\image_effects\ImageEffectsUninstallValidator
+    tags:
+      - { name: module_install.uninstall_validator }
+    arguments: ['@config.factory', '@string_translation']
+    lazy: true

js/image_effects.jquery_colorpicker_color_selector.js

@@ -0,0 +1,22 @@
+/**
+ * @file
+ *
+ * JQuery Colorpicker color selector.
+ *
+ * Alters field_suffix form element after change to the color field.
+ */
+
+(function ($) {
+  'use strict';
+  Drupal.behaviors.imageEffectsJqueryColorpickerColorSelector = {
+    attach: function (context, settings) {
+      $('.image-effects-jquery-colorpicker-color-selector .image-effects-jquery-colorpicker', context).once('image-effects-jquery-colorpicker-color-selector').each(function (index) {
+        $(this).parent().append('<span class="image-effects-color-suffix">#' + this.value.toUpperCase() + '</div>');
+        $(this).on('change', function (event) {
+          var suffix = $(this).parent().find('.image-effects-color-suffix').get(0);
+          $(suffix).text('#' + this.value.toUpperCase());
+        });
+      });
+    }
+  };
+})(jQuery);

src/ImageEffectsUninstallValidator.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace Drupal\image_effects;
+
+use Drupal\Core\Config\ConfigFactoryInterface;
+use Drupal\Core\Extension\ModuleUninstallValidatorInterface;
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\Core\StringTranslation\TranslationInterface;
+
+/**
+ * Prevents uninstalling modules that Image Effects configuration require.
+ */
+class ImageEffectsUninstallValidator implements ModuleUninstallValidatorInterface {
+
+  use StringTranslationTrait;
+
+  /**
+   * The configuration factory.
+   *
+   * @var \Drupal\Core\Config\ConfigFactoryInterface
+   */
+  protected $configFactory;
+
+  /**
+   * Constructs a new ImageEffectsUninstallValidator.
+   *
+   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
+   *   The configuration factory.
+   * @param \Drupal\Core\StringTranslation\TranslationInterface $string_translation
+   *   The string translation service.
+   */
+  public function __construct(ConfigFactoryInterface $config_factory, TranslationInterface $string_translation) {
+    $this->configFactory = $config_factory;
+    $this->stringTranslation = $string_translation;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validate($module) {
+    $reasons = [];
+    // Prevents uninstalling 'jquery_colorpicker' if its color selector plugin
+    // is in use.
+    if ($module == 'jquery_colorpicker' && $this->configFactory->get('image_effects.settings')->get('color_selector.plugin_id') === 'jquery_colorpicker') {
+      $reasons[] = $this->t('The <em>Image Effects</em> module is using the <em>JQuery Colorpicker</em> color selector');
+    }
+    return $reasons;
+  }
+
+}

src/Plugin/image_effects/ColorSelector/JqueryColorPicker.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Drupal\image_effects\Plugin\image_effects\ColorSelector;
+
+use Drupal\Component\Utility\Unicode;
+use Drupal\image_effects\Plugin\ImageEffectsPluginBase;
+
+/**
+ * JQuery Colorpicker color selector plugin.
+ *
+ * @Plugin(
+ *   id = "jquery_colorpicker",
+ *   title = @Translation("JQuery Colorpicker color selector"),
+ *   short_title = @Translation("JQuery Colorpicker"),
+ *   help = @Translation("Use a JQuery color picker to select colors.")
+ * )
+ */
+class JqueryColorPicker extends ImageEffectsPluginBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function selectionElement(array $options = []) {
+    return [
+      '#type' => 'jquery_colorpicker',
+      '#title' => isset($options['#title']) ? $options['#title'] : $this->t('Color'),
+      '#default_value' => Unicode::substr($options['#default_value'], -6),
+      '#attributes' => ['class' => ['image-effects-jquery-colorpicker']],
+      '#wrapper_attributes' => ['class' => ['image-effects-jquery-colorpicker-color-selector']],
+      '#attached' => ['library' => ['image_effects/image_effects.jquery_colorpicker_color_selector']],
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function isAvailable() {
+    return \Drupal::service('module_handler')->moduleExists('jquery_colorpicker');
+  }
+
+}

src/ProxyClass/ImageEffectsUninstallValidator.php

@@ -0,0 +1,88 @@
+<?php
+// @codingStandardsIgnoreFile
+
+/**
+ * This file was generated via php core/scripts/generate-proxy-class.php 'Drupal\image_effects\ImageEffectsUninstallValidator' "modules/image_effects/src".
+ */
+
+namespace Drupal\image_effects\ProxyClass {
+
+    /**
+     * Provides a proxy class for \Drupal\image_effects\ImageEffectsUninstallValidator.
+     *
+     * @see \Drupal\Component\ProxyBuilder
+     */
+    class ImageEffectsUninstallValidator implements \Drupal\Core\Extension\ModuleUninstallValidatorInterface
+    {
+
+        use \Drupal\Core\DependencyInjection\DependencySerializationTrait;
+
+        /**
+         * The id of the original proxied service.
+         *
+         * @var string
+         */
+        protected $drupalProxyOriginalServiceId;
+
+        /**
+         * The real proxied service, after it was lazy loaded.
+         *
+         * @var \Drupal\image_effects\ImageEffectsUninstallValidator
+         */
+        protected $service;
+
+        /**
+         * The service container.
+         *
+         * @var \Symfony\Component\DependencyInjection\ContainerInterface
+         */
+        protected $container;
+
+        /**
+         * Constructs a ProxyClass Drupal proxy object.
+         *
+         * @param \Symfony\Component\DependencyInjection\ContainerInterface $container
+         *   The container.
+         * @param string $drupal_proxy_original_service_id
+         *   The service ID of the original service.
+         */
+        public function __construct(\Symfony\Component\DependencyInjection\ContainerInterface $container, $drupal_proxy_original_service_id)
+        {
+            $this->container = $container;
+            $this->drupalProxyOriginalServiceId = $drupal_proxy_original_service_id;
+        }
+
+        /**
+         * Lazy loads the real service from the container.
+         *
+         * @return object
+         *   Returns the constructed real service.
+         */
+        protected function lazyLoadItself()
+        {
+            if (!isset($this->service)) {
+                $this->service = $this->container->get($this->drupalProxyOriginalServiceId);
+            }
+
+            return $this->service;
+        }
+
+        /**
+         * {@inheritdoc}
+         */
+        public function validate($module)
+        {
+            return $this->lazyLoadItself()->validate($module);
+        }
+
+        /**
+         * {@inheritdoc}
+         */
+        public function setStringTranslation(\Drupal\Core\StringTranslation\TranslationInterface $translation)
+        {
+            return $this->lazyLoadItself()->setStringTranslation($translation);
+        }
+
+    }
+
+}

src/Tests/ImageEffectsSettingsFormTest.php

@@ -11,7 +11,7 @@
  */
 class ImageEffectsSettingsFormTest extends WebTestBase {
 
-  public static $modules = ['image_effects'];
+  public static $modules = ['image_effects', 'jquery_colorpicker'];
 
   /**
    * {@inheritdoc}
@@ -69,4 +69,35 @@ public function testSettingsForm() {
     $this->assertEqual(['path' => 'public://'], \Drupal::config('image_effects.settings')->get('font_selector.plugin_settings.dropdown'));
   }
 
+  /**
+   * Test JQuery Colorpicker color selector.
+   */
+  public function testJqueryColorpickerSelector() {
+    $admin_path = '/admin/config/media/image_effects';
+
+    // Get the settings form.
+    $this->drupalGet($admin_path);
+
+    // Change the default color selector.
+    $edit = [
+      'settings[color_selector][plugin_id]' => 'jquery_colorpicker',
+    ];
+    $this->drupalPostForm(NULL, $edit, t('Save configuration'));
+
+    // Check config changed.
+    $this->assertEqual('jquery_colorpicker', \Drupal::config('image_effects.settings')->get('color_selector.plugin_id'));
+
+    // Verify that the 'jquery_colorpicker' module cannot be uninstalled.
+    $this->assertNotEqual([], \Drupal::service('module_installer')->validateUninstall(['jquery_colorpicker']));
+
+    // Back to the default color selector.
+    $edit = [
+      'settings[color_selector][plugin_id]' => 'html_color',
+    ];
+    $this->drupalPostForm(NULL, $edit, t('Save configuration'));
+
+    // Verify that the 'jquery_colorpicker' module can be uninstalled now.
+    $this->assertTrue(\Drupal::service('module_installer')->uninstall(['jquery_colorpicker']));
+  }
+
 }