Commit b04dabab authored by targoo's avatar targoo

Issue #2615142 by targoo: Implement Spectrum widget

parent 08730f40
...@@ -15,6 +15,23 @@ color-field-widget-box: ...@@ -15,6 +15,23 @@ color-field-widget-box:
- core/jquery - core/jquery
- core/drupalSettings - core/drupalSettings
color-field-widget-spectrum:
remote: https://github.com/bgrins/spectrum
version: 1.6.0
js:
/libraries/spectrum/spectrum.js: {}
js/color_field_widget_spectrum.jquery.js: {}
css:
component:
/libraries/spectrum/spectrum.css: {}
license:
name: MIT
url: https://github.com/bgrins/spectrum/blob/master/LICENSE
gpl-compatible: true
dependencies:
- core/jquery
- core/drupalSettings
color-field-formatter-swatch: color-field-formatter-swatch:
css: css:
component: component:
......
...@@ -51,6 +51,10 @@ function color_field_theme() { ...@@ -51,6 +51,10 @@ function color_field_theme() {
'render element' => 'element', 'render element' => 'element',
); );
$theme['color_field_widget_spectrum'] = array(
'render element' => 'element',
);
return $theme; return $theme;
} }
...@@ -95,7 +99,50 @@ function template_preprocess_color_field_widget_box(&$variables) { ...@@ -95,7 +99,50 @@ function template_preprocess_color_field_widget_box(&$variables) {
$variables['color'] = $element['color']; $variables['color'] = $element['color'];
$variables['opacity'] = $element['opacity']; if (!empty($element['opacity'])) {
$variables['opacity'] = $element['opacity'];
}
// Suppress error messages.
$variables['errors'] = NULL;
if (!empty($element['#description'])) {
$variables['description'] = $element['#description'];
}
$variables['required'] = FALSE;
if (!empty($element['#required'])) {
$variables['required'] = TRUE;
}
}
/**
* Prepares variables for color_field widget box wrapper template.
*
* Default template: color-field-widget-box.html.twig.
*
* @param array $variables
* An associative array containing:
* - element: An associative array containing the properties of the element.
* Properties used: #title, #children, #required, #attributes.
*/
function template_preprocess_color_field_widget_spectrum(&$variables) {
$element = $variables['element'];
if (!empty($element['#title'])) {
$variables['title'] = $element['#title'];
}
if (!empty($element['#description'])) {
$variables['description'] = $element['#description'];
}
$variables['color'] = $element['color'];
if (!empty($element['opacity'])) {
$variables['opacity'] = $element['opacity'];
}
// Suppress error messages. // Suppress error messages.
$variables['errors'] = NULL; $variables['errors'] = NULL;
......
/**
* @file
* Javascript for Color Field.
*/
(function ($) {
"use strict";
Drupal.behaviors.color_field_spectrum = {
attach: function (context, settings) {
var $context = $(context);
var settings = settings.color_field.color_field_widget_spectrum;
$context.find('.js-color-field-widget-spectrum').each(function (index, element) {
var $element = $(element);
var $element_color = $element.find('.js-color-field-widget-spectrum__color');
var $element_opacity = $element.find('.js-color-field-widget-spectrum__opacity');
$element_color.spectrum({
showInitial: true,
preferredFormat: "hex",
showInput: settings.show_input,
showAlpha: settings.show_alpha,
showPalette: settings.show_palette,
showPaletteOnly: !!settings.show_palette_only,
palette:[settings.palette],
showButtons: settings.show_buttons,
allowEmpty: settings.allow_empty,
change: function(tinycolor) {
$element_color.val(tinycolor.toHexString());
$element_opacity.val(tinycolor._roundA);
}
});
// Set alpha value on load.
if (!!settings.show_alpha) {
var tinycolor = $element_color.spectrum("get");
var alpha = $element_opacity.val();
if (alpha > 0) {
tinycolor.setAlpha(alpha);
$element_color.spectrum("set", tinycolor);
}
}
});
}
};
})(jQuery);
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/** /**
* @file * @file
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldSpectrumWidget. * Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetSpectrum.
*/ */
namespace Drupal\color_field\Plugin\Field\FieldWidget; namespace Drupal\color_field\Plugin\Field\FieldWidget;
...@@ -12,18 +12,18 @@ use Drupal\Core\Field\WidgetBase; ...@@ -12,18 +12,18 @@ use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Form\FormStateInterface;
/** /**
* Plugin implementation of the 'color_field_default' widget. * Plugin implementation of the color_field spectrum widget.
* *
* @FieldWidget( * @FieldWidget(
* id = "color_field_spectrum", * id = "color_field_widget_spectrum",
* module = "color_field", * module = "color_field",
* label = @Translation("Color field Spectrum"), * label = @Translation("Color Spectrum"),
* field_types = { * field_types = {
* "color_field" * "color_field_type"
* } * }
* ) * )
*/ */
class ColorFieldSpectrumWidget extends WidgetBase { class ColorFieldWidgetSpectrum extends WidgetBase {
/** /**
* {@inheritdoc} * {@inheritdoc}
...@@ -93,21 +93,6 @@ class ColorFieldSpectrumWidget extends WidgetBase { ...@@ -93,21 +93,6 @@ class ColorFieldSpectrumWidget extends WidgetBase {
public function settingsSummary() { public function settingsSummary() {
$summary = array(); $summary = array();
$placeholder_color = $this->getSetting('placeholder_color');
$placeholder_opacity = $this->getSetting('placeholder_opacity');
if (!empty($placeholder_color)) {
$summary[] = t('Color placeholder: @placeholder_color', array('@placeholder_color' => $placeholder_color));
}
if (!empty($placeholder_opacity)) {
$summary[] = t('Opacity placeholder: @placeholder_opacity', array('@placeholder_opacity' => $placeholder_opacity));
}
if (empty($summary)) {
$summary[] = t('No placeholder');
}
return $summary; return $summary;
} }
...@@ -115,26 +100,38 @@ class ColorFieldSpectrumWidget extends WidgetBase { ...@@ -115,26 +100,38 @@ class ColorFieldSpectrumWidget extends WidgetBase {
* {@inheritdoc} * {@inheritdoc}
*/ */
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) { public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
// We are nesting some sub-elements inside the parent, so we need a wrapper.
// We also need to add another #title attribute at the top level for ease in
// identifying this item in error messages. We do not want to display this
// title because the actual title display is handled at a higher level by
// the Field module.
$element['#theme_wrappers'] = array('color_field_widget_spectrum');
$element['#attached']['library'][] = 'color_field/color-field-widget-spectrum';
// Set Drupal settings.
$settings = $this->getSettings();
$settings['show_alpha'] = $this->getFieldSetting('opacity');
$element['#attached']['drupalSettings']['color_field']['color_field_widget_spectrum'] = $settings;
$element['color'] = array( $element['color'] = array(
'#title' => t('Color'),
'#type' => 'textfield', '#type' => 'textfield',
'#maxlength' => 6, '#maxlength' => 7,
'#size' => 6, '#size' => 7,
'#required' => $element['#required'], '#required' => $element['#required'],
'#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL, '#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
'#attributes' => array('class' => array('js-color-field-widget-spectrum__color')),
); );
if ($this->getFieldSetting('opacity')) { if ($this->getFieldSetting('opacity')) {
$element['color']['#prefix'] = '<div class="container-inline">';
$element['opacity'] = array( $element['opacity'] = array(
'#title' => t('Opacity'),
'#type' => 'textfield', '#type' => 'textfield',
'#maxlength' => 3, '#maxlength' => 4,
'#size' => 3, '#size' => 4,
'#required' => $element['#required'], '#required' => $element['#required'],
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL, '#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
'#suffix' => '</div>', '#attributes' => array('class' => array('js-color-field-widget-spectrum__opacity', 'visually-hidden')),
); );
} }
......
{#
/**
* @file
* Default theme implementation of a color box form wrapper.
*
* Available variables:
* - content: The form element to be output, usually a datelist, or datetime.
* - title: The title of the form element.
* - title_attributes: HTML attributes for the title wrapper.
* - description: Description text for the form element.
* - required: An indicator for whether the associated form element is required.
*
* @see template_preprocess()
* @see template_preprocess_color_field_widget_box()
*
* @ingroup themeable
*/
#}
{%
set title_classes = [
required ? 'js-form-required',
required ? 'form-required',
]
%}
{% if title %}
<h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
{% endif %}
<div class="js-color-field-widget-spectrum">
{{ color }}
{{ opacity }}
</div>
{% if errors %}
<div>
{{ errors }}
</div>
{% endif %}
{{ description }}
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