Issue #3278061: Cannot configure the color picker with anything but swatches (f8426d88) · Commits · project / coloris

js/coloris.js

+38 −3

Original line number	Diff line number	Diff line
		@@ -24,13 +24,48 @@
		document.querySelectorAll('.coloris').forEach(el => {
		if (!el.classList.contains('coloris--processed')) {
		let id = el.getAttribute('id');
		let parentString = el.getAttribute("data-parent");
		let wrapString = el.getAttribute("data-wrap");
		let themeString = el.getAttribute("data-theme");
		let themeModeString = el.getAttribute("data-theme-mode");
		let marginString = el.getAttribute("data-margin");
		let formatString = el.getAttribute("data-format");
		let formatToggleString = el.getAttribute("data-format-toggle");
		let alphaString = el.getAttribute("data-alpha");
		let swatchesOnlyString = el.getAttribute("data-swatches-only");
		let focusInputString = el.getAttribute("data-focus-input");
		let clearButtonShowString = el.getAttribute("data-clear-button-show");
		let clearButtonLabelString = el.getAttribute("data-clear-button-label");
		let inlineString = el.getAttribute("data-inline");
		let defaultColorString = el.getAttribute("data-default-color");
		let swatchesString = el.getAttribute("data-swatches");
		let swatchesObject = JSON.parse(decodeURIComponent(swatchesString));

		Coloris({
		let settings = {
		el: '#' + id,
		swatches: swatchesObject
		});
		wrap: wrapString === 'true',
		theme: themeString,
		themeMode: themeModeString,
		margin: marginString,
		format: formatString,
		formatToggle: formatToggleString === 'true',
		alpha: alphaString === 'true',
		swatchesOnly: swatchesOnlyString === 'true',
		focusInput: focusInputString === 'true',
		clearButton: {
		show: clearButtonShowString === 'true',
		label: clearButtonLabelString
		},
		swatches: swatchesObject,
		inline: inlineString === 'true',
		defaultColor: defaultColorString
		}

		if (parentString !== null) {
		settings.parent = parentString;
		}

		Coloris(settings);

		}
		}

src/Element/ColorisWidget.php

+33 −0

Original line number	Diff line number	Diff line
		@@ -45,7 +45,20 @@ class ColorisWidget extends FormElement {
		*/
		public static function processFormElement(array &$element, FormStateInterface $form_state, &$complete_form) : array {

		$parent = $element['#parent'] ?? FALSE;
		$wrap = isset($element['#wrap']) && $element['#wrap'] === FALSE ? 'false' : 'true';
		$theme = $element['#theme'] ?? 'default';
		$theme_mode = $element['#theme_mode'] ?? 'light';
		$margin = $element['#margin'] ?? 2;
		$format = $element['#format'] ?? 'hex';
		$format_toggle = isset($element['#format_toggle']) && $element['#format_toggle'] === TRUE ? 'true' : 'false';
		$alpha = isset($element['#alpha']) && $element['#alpha'] === FALSE ? 'false' : 'true';
		$swatches_only = isset($element['#swatches_only']) && $element['#swatches_only'] === TRUE ? 'true' : 'false';
		$focus_input = isset($element['#focus_input']) && $element['#focus_input'] === FALSE ? 'false' : 'true';
		$clear_button_show = isset($element['#clear_button_show']) && $element['#clear_button_show'] === TRUE ? 'true' : 'false';
		$clear_button_label = $element['#clear_button_label'] ?? t('Clear');
		$swatches = $element['#swatches'] ?? [];
		$inline = isset($element['#inline']) && $element['#inline'] === TRUE ? 'true' : 'false';
		$element['coloris'] = [
		'#prefix' => '<div class="coloris-wrapper">',
		'#suffix' => '</div>',
		@@ -53,7 +66,19 @@ class ColorisWidget extends FormElement {
		'#attributes' => [
		'class' => ['coloris'],
		'id' => Html::getUniqueId('coloris'),
		'data-wrap' => $wrap,
		'data-theme' => $theme,
		'data-theme-mode' => $theme_mode,
		'data-margin' => $margin,
		'data-format' => $format,
		'data-format-toggle' => $format_toggle,
		'data-alpha' => $alpha,
		'data-swatches-only' => $swatches_only,
		'data-focus-input' => $focus_input,
		'data-clear-button-show' => $clear_button_show,
		'data-clear-button-label' => $clear_button_label,
		'data-swatches' => json_encode($swatches),
		'data-inline' => $inline,
		],
		'#required' => $element['#required'],
		'#default_value' => $element['#default_value'],
		@@ -61,6 +86,14 @@ class ColorisWidget extends FormElement {
		'#description' => $element['#description'],
		];

		if ($parent !== FALSE) {
		$element['coloris']['#attributes']['data-parent'] = $parent;
		}

		if (isset($element['#default_color'])) {
		$element['coloris']['#attributes']['data-default-color'] = $element['#default_color'];
		}

		$element['coloris']['#attached']['library'][] = 'coloris/element.coloris';
		return $element;
		}