Commit deb6a0c7 authored by targoo's avatar targoo

Issue #2615170 by targoo: Add Jquery simple color

parent 012378e7
......@@ -32,6 +32,23 @@ color-field-widget-spectrum:
- core/jquery
- core/drupalSettings
color-field-widget-grid:
remote: https://github.com/recurser/jquery-simple-color
version: 1.2.1
js:
/libraries/jquery-simple-color/jquery.simple-color.min.js: {}
js/color_field_widget_grid.jquery.js: {}
css:
component:
css/color_field_widget_grid.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:
css:
component:
......
.simpleColorDisplay {
float: left;
}
.simpleColorContainer {
float: left;
}
.simpleColorChooser {
z-index: 1;
}
/**
* @file
* Javascript for Color Field.
*/
(function ($) {
"use strict";
Drupal.behaviors.color_field_jquery_simple_color = {
attach: function (context, settings) {
var $context = $(context);
var settings = settings.color_field.color_field_widget_grid;
$context.find('.js-color-field-widget-grid__color').each(function (index, element) {
var $element = $(element);
$element.simpleColor({
cellWidth: settings.cell_width,
cellHeight: settings.cell_height,
cellMargin: settings.cell_margin,
boxWidth: settings.box_width,
boxHeight: settings.box_height
});
});
}
};
})(jQuery);
......@@ -17,7 +17,7 @@ use Drupal\Core\Form\FormStateInterface;
* @FieldWidget(
* id = "color_field_widget_default",
* module = "color_field",
* label = @Translation("Color field default"),
* label = @Translation("Color default"),
* field_types = {
* "color_field_type"
* }
......
......@@ -2,7 +2,7 @@
/**
* @file
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldSimpleWidget.
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetGrid.
*/
namespace Drupal\color_field\Plugin\Field\FieldWidget;
......@@ -15,15 +15,15 @@ use Drupal\Core\Form\FormStateInterface;
* Plugin implementation of the 'color_field_default' widget.
*
* @FieldWidget(
* id = "color_field_simple",
* id = "color_field_widget_grid",
* module = "color_field",
* label = @Translation("Color field simple"),
* label = @Translation("Color grid"),
* field_types = {
* "color_field"
* "color_field_type"
* }
* )
*/
class ColorFieldSimpleWidget extends WidgetBase {
class ColorFieldWidgetGrid extends WidgetBase {
/**
* {@inheritdoc}
......@@ -92,7 +92,7 @@ class ColorFieldSimpleWidget extends WidgetBase {
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = array();
$summary = [];
$cell_width = $this->getSetting('cell_width');
$cell_height = $this->getSetting('cell_height');
......@@ -136,13 +136,28 @@ class ColorFieldSimpleWidget extends WidgetBase {
* {@inheritdoc}
*/
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_grid');
$element['#attached']['library'][] = 'color_field/color-field-widget-grid';
// Set Drupal settings.
$settings = $this->getSettings();
$element['#attached']['drupalSettings']['color_field']['color_field_widget_grid'] = $settings;
$element['color'] = array(
'#title' => t('Color'),
'#type' => 'textfield',
'#maxlength' => 6,
'#size' => 6,
'#maxlength' => 7,
'#size' => 7,
'#required' => $element['#required'],
'#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
'#attributes' => array('class' => array('js-color-field-widget-grid__color')),
);
if ($this->getFieldSetting('opacity')) {
......@@ -159,10 +174,6 @@ class ColorFieldSimpleWidget extends WidgetBase {
);
}
// Attach library containing css and js files.
$element['#attached']['library'][] = 'color_field/simpleWidget';
$element['#attached']['drupalSettings']['color_field']['settings'] = $this->getSettings();
return $element;
}
......
......@@ -17,7 +17,7 @@ use Drupal\Core\Form\FormStateInterface;
* @FieldWidget(
* id = "color_field_widget_spectrum",
* module = "color_field",
* label = @Translation("Color Spectrum"),
* label = @Translation("Color spectrum"),
* field_types = {
* "color_field_type"
* }
......
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