Commit fb6898d0 authored by mondrake's avatar mondrake

- added a color selector plugin for the Farbtastic library

- added initial settings form to allow setting the color selector plugin
parent e49768d2
/* HTML Color selector */
div.image-effects-html-color-selector span.field-suffix {
vertical-align: -webkit-baseline-middle;
}
/* Farbtastic color picker */
div.image-effects-farbtastic-color-selector input.image-effects-color-textfield {
vertical-align: top;
}
div.image-effects-farbtastic-color-selector span.field-suffix {
display: inline-block;
}
/**
* @file
*
* HTML color selector.
*
* Alters field_suffix form element after change to the color field.
*/
(function ($) {
"use strict";
Drupal.behaviors.imageEffectsHtmlColorSelector = {
attach: function (context, settings) {
$('.image-effects-html-color-selector .form-color', context).once('image-effects-html-color-selector').each(function (index) {
$(this).on('change', function (event) {
var suffix = $(this).parents('.image-effects-html-color-selector').find('.field-suffix').get(0);
$(suffix).text(this.value.toUpperCase());
});
});
}
};
})(jQuery);
......@@ -3,3 +3,6 @@ core: 8.x
name: Image Effects
description: 'Provides effects and operations for the Image API.'
package: Media
configure: image_effects.settings
dependencies:
- image
# Libraries are defined in alphabetical order.
image_effects.farbtastic_color_selector:
version: VERSION
js:
js/image_effects.farbtastic_color_selector.js: {}
css:
component:
css/image_effects.farbtastic_color_selector.css: {}
dependencies:
- core/jquery.farbtastic
image_effects.html_color_selector:
version: VERSION
js:
......
image_effects.settings:
title: 'Image Effects'
description: 'Configure Image Effects settings.'
parent: system.admin_config_media
route_name: image_effects.settings
# image_effects module routes
image_effects.settings:
path: '/admin/config/media/image_effects'
defaults:
_form: '\Drupal\image_effects\Form\SettingsForm'
_title: 'Image Effects'
requirements:
_permission: 'administer site configuration'
/**
* @file
*
* Farbtastic color selector.
*/
(function ($) {
"use strict";
Drupal.behaviors.imageEffectsFarbtasticColorSelector = {
attach: function(context, settings) {
$('.image-effects-farbtastic-color-selector', context).once('image-effects-farbtastic-color-selector').each(function (index) {
// Configure picker to be attached to the text field.
var target = $(this).find('.image-effects-color-textfield');
var picker = $(this).find('.farbtastic-colorpicker');
$.farbtastic($(picker), target);
});
}
}
})(jQuery);
<?php
/**
* @file
* Contains \Drupal\image_effects\Form\SettingsForm.
*/
namespace Drupal\image_effects\Form;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Image\ImageFactory;
use Drupal\Core\StreamWrapper\StreamWrapperInterface;
use Drupal\Core\StreamWrapper\StreamWrapperManager;
use Drupal\image_effects\Plugin\ImageEffectsPluginManager;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Main image_effects settings admin form.
*/
class SettingsForm extends ConfigFormBase {
/**
* The stream wrapper manager.
*
* @var \Drupal\Core\StreamWrapper\StreamWrapperManager
*/
protected $streamWrapperManager;
/**
* The color selector plugin manager.
*
* @var \Drupal\image_effects\Plugin\ImageEffectsPluginManager
*/
protected $colorManager;
/**
* Constructs the class for image_effects settings form.
*
* @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
* The factory for configuration objects.
* @param \Drupal\Core\StreamWrapper\StreamWrapperManager $stream_wrapper_manager
* The stream wrapper manager.
* @param \Drupal\image_effects\Plugin\ImageEffectsPluginManager $color_plugin_manager
* The color selector plugin manager.
*/
public function __construct(ConfigFactoryInterface $config_factory, StreamWrapperManager $stream_wrapper_manager, ImageEffectsPluginManager $color_plugin_manager) {
parent::__construct($config_factory);
$this->colorManager = $color_plugin_manager;
$this->streamWrapperManager = $stream_wrapper_manager;
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('config.factory'),
$container->get('stream_wrapper_manager'),
$container->get('plugin.manager.image_effects.color_selector')
);
}
/**
* {@inheritdoc}
*/
public function getFormID() {
return 'image_effects_settings';
}
/**
* {@inheritdoc}
*/
protected function getEditableConfigNames() {
return ['image_effects.settings'];
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
$config = $this->config('image_effects.settings');
$ajaxing = (bool) $form_state->getValues();
// Color selector plugin.
$color_plugin_id = $ajaxing ? $form_state->getValue(['settings', 'color_selector', 'plugin_id']) : $config->get('color_selector.plugin_id');
$color_plugin = $this->colorManager->getPlugin($color_plugin_id);
if ($ajaxing && $form_state->hasValue(['settings', 'color_selector', 'plugin_settings'])) {
$color_plugin->setConfiguration($form_state->getValue(['settings', 'color_selector', 'plugin_settings']));
}
// AJAX messages
$form['ajax_messages'] = array(
'#type' => 'container',
'#attributes' => [
'id' => 'image-effects-ajax-messages',
],
);
// AJAX settings.
$ajax_settings = ['callback' => [$this, 'processAjax']];
// Main part of settings form.
$form['settings'] = array(
'#type' => 'container',
'#tree' => TRUE,
'#attributes' => [
'id' => 'image-effects-settings-main',
],
);
// Color selector.
$form['settings']['color_selector'] = array(
'#type' => 'details',
'#open' => TRUE,
'#title' => $this->t('Color selector'),
'#tree' => TRUE,
);
$form['settings']['color_selector']['plugin_id'] = array(
'#type' => 'radios',
'#options' => $this->colorManager->getPluginOptions(),
'#default_value' => $color_plugin->getPluginId(),
'#required' => TRUE,
'#ajax' => $ajax_settings,
);
$form['settings']['color_selector']['plugin_settings'] = $color_plugin->buildConfigurationForm(array(), $form_state, $ajax_settings);
return parent::buildForm($form, $form_state);
}
/**
* {@inheritdoc}
*/
public function validateForm(array &$form, FormStateInterface $form_state) { }
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state) {
$config = $this->config('image_effects.settings');
// Color plugin.
$color_plugin = $this->colorManager->getPlugin($form_state->getValue(['settings', 'color_selector', 'plugin_id']));
if ($form_state->hasValue(['settings', 'color_selector', 'plugin_settings'])) {
$color_plugin->setConfiguration($form_state->getValue(['settings', 'color_selector', 'plugin_settings']));
}
$config
->set('color_selector.plugin_id', $color_plugin->getPluginId())
->set('color_selector.plugin_settings.' . $color_plugin->getPluginId(), $color_plugin->getConfiguration());
$config->save();
parent::submitForm($form, $form_state);
}
/**
* AJAX callback.
*/
public function processAjax($form, FormStateInterface $form_state) {
$response = new AjaxResponse();
$status_messages = array('#type' => 'status_messages');
$response->addCommand(new HtmlCommand('#image-effects-ajax-messages', $status_messages));
$response->addCommand(new HtmlCommand('#image-effects-settings-main', $form['settings']));
return $response;
}
}
......@@ -7,6 +7,7 @@
namespace Drupal\image_effects\Plugin;
use Drupal\Component\Utility\SafeMarkup;
use Drupal\Core\Cache\CacheBackendInterface;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Extension\ModuleHandlerInterface;
......@@ -91,7 +92,7 @@ class ImageEffectsPluginManager extends DefaultPluginManager {
public function getPluginOptions() {
$options = array();
foreach ($this->getAvailablePlugins() as $plugin) {
$options[$plugin['id']] = '<b>' . $plugin['short_title'] . '</b> - ' . $plugin['help'];
$options[$plugin['id']] = SafeMarkup::format('<b>@title</b> - @description', ['@title' => $plugin['short_title'], '@description' => $plugin['help']]);
}
return $options;
}
......
<?php
/**
* @file
* Contains \Drupal\image_effects\Plugin\image_effects\color_selector\Farbtastic.
*/
namespace Drupal\image_effects\Plugin\image_effects\color_selector;
use Drupal\Core\Form\FormStateInterface;
use Drupal\image_effects\Plugin\ImageEffectsPluginBase;
/**
* Farbtastic color selector plugin.
*
* @Plugin(
* id = "farbtastic",
* title = @Translation("Farbtastic color selector"),
* short_title = @Translation("Farbtastic"),
* help = @Translation("Use a Farbtastic color picker to select colors.")
* )
*/
class Farbtastic extends ImageEffectsPluginBase {
/**
* {@inheritdoc}
*/
public function selectionElement(array $options = array()) {
return [
'#type' => 'textfield',
'#title' => isset($options['#title']) ? $options['#title'] : $this->t('Color'),
'#description' => isset($options['#description']) ? $options['#description'] : NULL,
'#default_value' => $options['#default_value'],
'#field_suffix' => '<div class="farbtastic-colorpicker" style="float:right;"></div>',
'#maxlength' => 7,
'#size' => 7,
'#wrapper_attributes' => ['class' => ['image-effects-farbtastic-color-selector']],
'#attributes' => ['class' => ['image-effects-color-textfield']],
'#attached' => ['library' => ['image_effects/image_effects.farbtastic_color_selector']],
];
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment