Commit eff0487b authored by NickWilde's avatar NickWilde

Issue #2653462 by NickWilde, reekris, Boobaa, jimafisk: Improve Color Box...

Issue #2653462 by NickWilde, reekris, Boobaa, jimafisk: Improve Color Box display widget functionality
parent ddce0a3a
.color_field_widget_box__square {
border: 1px solid #ffffff;
cursor: pointer;
font-family: monospace;
font-size: 1.2em;
margin: 0 3px;
padding: 1px 8px;
height: 16px;
margin: 2px;
width: 16px;
box-shadow: 0 0 1px #000;
}
.color_field_widget_box__square.active,
.color_field_widget_box__square:hover {
padding: 9px 16px;
height: 32px;
width: 32px;
}
.color_field_widget_box__square--transparent {
background-image: url("../images/transparent_box16.gif");
background-position: 0 3px;
background-repeat: no-repeat;
margin: 0 3px;
padding: 2px 8px;
height: 16px;
margin: 2px;
width: 16px;
}
.color_field_widget_box__square--transparent.active,
.color_field_widget_box__square--transparent:hover {
background-image: url(../images/transparent_box32.gif);
background-position: 0 3px;
background-repeat: no-repeat;
padding: 10px 16px;
height: 32px;
width: 32px;
}
......@@ -20,16 +20,17 @@
var $context = $(context);
var default_colors = settings.color_field.color_field_widget_box.settings.default_colors;
$context.find('.color-field-widget-box-form').each(function (index, element) {
var $element = $(element);
var $input = $element.prev().find('input');
var props = settings.color_field.color_field_widget_box.settings[$element.prop('id')];
$element.empty().addColorPicker({
currentColor: $input.val(),
colors: default_colors,
colors: props.palette,
blotchClass:'color_field_widget_box__square',
blotchTransparentClass:'color_field_widget_box__square--transparent',
addTransparentBlotch: !props.required,
clickCallback: function (color) {
$input.val(color).trigger('change');
}
......
......@@ -7,15 +7,18 @@
jQuery.fn.addColorPicker = function (props) {
'use strict';
if (!props) {
props = [];
}
props = jQuery.extend({
currentColor:'',
blotchElemType: 'span',
blotchElemType: 'button',
blotchClass:'colorBox',
blotchTransparentClass:'transparentBox',
addTransparentBlotch: true,
clickCallback: function (ignoredColor) {},
iterationCallback: null,
fillString: ' ',
......@@ -29,11 +32,9 @@ jQuery.fn.addColorPicker = function (props) {
]
}, props);
var count = props.colors.length;
for (var i = 0; i < count; ++i) {
var color = props.colors[i];
this.addBlotchElement = function(color, blotchClass) {
var elem = jQuery('<' + props.blotchElemType + '/>')
.addClass(props.blotchClass)
.addClass(blotchClass)
.attr('color',color)
.css('background-color',color);
// Jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
......@@ -41,8 +42,9 @@ jQuery.fn.addColorPicker = function (props) {
elem.addClass('active');
}
if (props.clickCallback) {
elem.click(function () {
jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
elem.click(function (event) {
event.preventDefault();
jQuery(this).parent().children().removeClass('active');
jQuery(this).addClass('active');
props.clickCallback(jQuery(this).attr('color'));
});
......@@ -53,25 +55,13 @@ jQuery.fn.addColorPicker = function (props) {
}
}
var elem = jQuery('<' + props.blotchElemType + '/>')
.addClass(props.blotchTransparentClass)
.attr('color', '')
.css('background-color', '');
if (props.currentColor == '') {
elem.addClass('active');
for (var i = 0; i < props.colors.length; ++i) {
var color = props.colors[i];
this.addBlotchElement(color, props.blotchClass);
}
if (props.clickCallback) {
elem.click(function () {
jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
jQuery(this).addClass('active');
props.clickCallback(jQuery(this).attr('color'));
});
}
this.append(elem);
if (props.iterationCallback) {
props.iterationCallback(this, elem, color, i);
if (props.addTransparentBlotch) {
this.addBlotchElement('', props.blotchTransparentClass);
}
return this;
......
......@@ -2,6 +2,7 @@
namespace Drupal\color_field\Plugin\Field\FieldWidget;
use Drupal\Component\Utility\Html;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;
......@@ -82,15 +83,18 @@ class ColorFieldWidgetBox extends WidgetBase {
// the Field module.
$element['#theme_wrappers'] = ['color_field_widget_box'];
$element['#attributes']['class'][] = 'container-inline';
$box_id = Html::getUniqueId('color-box-' . $this->fieldDefinition->getName());
$element['#attached']['library'][] = 'color_field/color-field-widget-box';
// Set Drupal settings.
$settings = [];
$settings[$box_id] = [
'required' => $this->fieldDefinition->isRequired(),
];
$default_colors = $this->getSetting('default_colors');
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
foreach ($default_colors as $color) {
$settings['palette'][] = $color[0];
$settings[$box_id]['palette'][] = $color[0];
}
$element['#attached']['drupalSettings']['color_field']['color_field_widget_box']['settings'] = $settings;
......@@ -114,7 +118,7 @@ class ColorFieldWidgetBox extends WidgetBase {
'#default_value' => $color,
'#attributes' => ['class' => ['visually-hidden']],
];
$element['color']['#suffix'] = "<div class='color-field-widget-box-form'></div>";
$element['color']['#suffix'] = "<div class='color-field-widget-box-form' id='$box_id'></div>";
if ($this->getFieldSetting('opacity')) {
$element['opacity'] = [
......
<?php
namespace Drupal\Tests\color_field\FunctionalJavascript;
use Drupal\field\Entity\FieldConfig;
use Drupal\field\Entity\FieldStorageConfig;
use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
/**
* Tests for form grouping elements.
*
* @group form
*/
class ColorFieldWidgetJavascriptTests extends JavascriptTestBase {
/**
* Modules to enable.
*
* @var array
*/
public static $modules = [
'field',
'node',
'color_field',
];
/**
* The Entity View Display for the article node type.
*
* @var \Drupal\Core\Entity\Entity\EntityViewDisplay
*/
protected $display;
/**
* The Entity Form Display for the article node type.
*
* @var \Drupal\Core\Entity\Entity\EntityFormDisplay
*/
protected $form;
/**
* {@inheritdoc}
*/
protected function setUp() {
parent::setUp();
$this->drupalCreateContentType(['type' => 'article']);
$user = $this->drupalCreateUser(['create article content', 'edit own article content']);
$this->drupalLogin($user);
$entityTypeManager = $this->container->get('entity_type.manager');
FieldStorageConfig::create([
'field_name' => 'field_color',
'entity_type' => 'node',
'type' => 'color_field_type',
])->save();
FieldConfig::create([
'field_name' => 'field_color',
'label' => 'Freeform Color',
'description' => 'Color field description',
'entity_type' => 'node',
'bundle' => 'article',
'required' => TRUE,
])->save();
FieldStorageConfig::create([
'field_name' => 'field_color_repeat',
'entity_type' => 'node',
'type' => 'color_field_type',
])->save();
FieldConfig::create([
'field_name' => 'field_color_repeat',
'label' => 'Repeat Color',
'description' => 'Color repeat description',
'entity_type' => 'node',
'bundle' => 'article',
'required' => FALSE,
])->save();
$this->form = $entityTypeManager->getStorage('entity_form_display')
->load('node.article.default');
$this->display = $entityTypeManager->getStorage('entity_view_display')
->load('node.article.default');
}
/**
* Test color_field_widget_box.
*/
public function testColorFieldWidgetBox() {
$this->form
->setComponent('field_color_repeat', [
'type' => 'color_field_widget_box',
'settings' => [
'default_colors' => '#FF0000,#FFFFFF',
],
])
->setComponent('field_color', [
'type' => 'color_field_widget_box',
'settings' => [
'default_colors' => '#007749,#000000,#FFFFFF,#FFB81C,#E03C31,#001489',
],
])
->save();
$session = $this->getSession();
$web_assert = $this->assertSession();
// Request the group details testing page.
$this->drupalGet('node/add/article');
$page = $session->getPage();
// Wait for elements to be generated.
$web_assert->waitForElementVisible('css', '#color-box-field-color_repeat button');
$boxes = $page->findAll('css', '#color-box-field-color-repeat button');
$this->assertEquals(3, count($boxes));
// Confirm that two fields aren't sharing settings.
$boxes = $page->findAll('css', '#color-box-field-color button');
$this->assertEquals(6, count($boxes));
/** @var \Behat\Mink\Element\NodeElement $box */
$box = $boxes[0];
$this->assertEquals('#007749', $box->getAttribute('color'));
// Confirm that clicking the swatch sets the field value.
$box->click();
$field = $page->findField('field_color[0][color]');
$this->assertEquals('#007749', $field->getValue());
}
}
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