Commit 46225e4a authored by NickWilde's avatar NickWilde

Issue #2827198 by frogdog_tech, cheeky-micah, rwam, NickWilde: Spectrum: Defining a palette

parent 6545b8d6
<?php
use Drupal\Core\Entity\Entity\EntityFormDisplay;
/**
* @file Contains post update functionality for the color field module.
*/
/**
* Update spectrum widget configuration to allow multiple palettes.
*/
function color_field_post_update_spectrum_palette() {
/** @var EntityFormDisplay $entity_form_display */
foreach (EntityFormDisplay::loadMultiple() as $entity_form_display) {
$changed = FALSE;
foreach ($entity_form_display->getComponents() as $name => $options) {
if (isset($options['type']) && $options['type'] === 'color_field_widget_spectrum') {
if ($options['settings']['palette']) {
$palette = explode(',', $options['settings']['palette']);
foreach ($palette as &$color) { $color = '"' . trim($color) . '"';}
$options['settings']['palette'] = '[' . join(',', $palette) . ']';
$entity_form_display->setComponent($name, $options);
$changed = TRUE;
}
}
}
if ($changed) {
$entity_form_display->save();
}
}
return t('The new palette format for spectrum color field widgets has been applied.');
}
......@@ -34,7 +34,7 @@
showAlpha: spectrum_settings.show_alpha,
showPalette: spectrum_settings.show_palette,
showPaletteOnly: spectrum_settings.show_palette_only,
palette: spectrum_settings.palette,
palette: JSON.parse('[' + spectrum_settings.palette + ']'),
showButtons: spectrum_settings.show_buttons,
allowEmpty: spectrum_settings.allow_empty,
......
......@@ -57,7 +57,7 @@ class ColorFieldWidgetSpectrum extends WidgetBase {
'#type' => 'textarea',
'#title' => $this->t('Color Palette'),
'#default_value' => $this->getSetting('palette'),
'#description' => $this->t('Selectable color palette to accompany the Spectrum Widget'),
'#description' => $this->t('Selectable color palette to accompany the Spectrum Widget. Separate values with a comma, and group them with square brackets. Ex: <br> ["#fff","#aaa","#f00","#00f"],<br>["#414141","#242424","#0a8db9"]'),
'#states' => [
'visible' => [
':input[name="fields[' . $this->fieldDefinition->getName() . '][settings_edit_form][settings][show_palette]"]' => ['checked' => TRUE],
......
......@@ -16,12 +16,6 @@
* @ingroup themeable
*/
#}
{%
set title_classes = [
required ? 'js-form-required',
required ? 'form-required',
]
%}
{{ label }}
......
......@@ -17,15 +17,14 @@
*/
#}
{%
set title_classes = [
required ? 'js-form-required',
required ? 'form-required',
]
set classes = [
'js-color-field-widget-spectrum',
]
%}
{{ label }}
<div class="js-color-field-widget-spectrum">
<div {{ attributes.addClass(classes) }}>
{{ color }}
{{ opacity }}
</div>
......
......@@ -128,4 +128,51 @@ class ColorFieldWidgetJavascriptTests extends JavascriptTestBase {
}
/**
* Test color_field_widget_spectrum widget.
*
* Unfortunately since the spectrum library uses clickable divs instead of
* buttons, we can't use full interaction of clicks with elements. So instead
* we just confirm that the right html has been generated and assume that the
* library tests itself.
*/
public function testColorFieldSpectrum() {
$this->form
->setComponent('field_color_repeat', [
'type' => 'color_field_widget_spectrum',
'settings' => [
'palette' => '["#0678BE","#53B0EB", "#96BC44"]',
'show_palette' => FALSE,
],
])
->setComponent('field_color', [
'type' => 'color_field_widget_spectrum',
'settings' => [
'palette' => '["#005493","#F5AA1C","#C63527","002754"]',
'show_palette' => TRUE,
],
])
->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', '.sp-preview');
// Confirm that two fields aren't sharing settings.
// Also confirms that custom palette is being used correctly
// and that the one field's palette isn't shown.
$boxes = $page->findAll('css', '.sp-thumb-el');
$this->assertEquals(4, count($boxes));
}
}
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