Commit 235185b9 authored by targoo's avatar targoo

Fix swatch formatter

parent 96b9ef85
......@@ -14,3 +14,8 @@ color-field-box:
dependencies:
- core/jquery
- core/drupalSettings
color-field-formater-swatch:
css:
component:
css/color_field_formatter_swatch.css: {}
......@@ -64,6 +64,7 @@ function color_field_theme() {
* @param array $variables
* An associative array containing:
* - color: The color background.
* - shape: The shape of the color swatch.
* - width: The width of the color swatch.
* - height: The height of the color swatch.
*/
......
/* https://css-tricks.com/examples/ShapesOfCSS/*/
.color_field {}
.color_field__swatch {}
.color_field__swatch--square {
}
.color_field__swatch--circle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.color_field__swatch--parallelogram {
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
......@@ -46,6 +46,13 @@ class ColorFormatterSwatch extends FormatterBase {
$elements = [];
$elements['shape'] = array(
'#type' => 'select',
'#title' => t('Shape'),
'#options' => $this->getShape(),
'#default_value' => $this->getSetting('shape'),
'#description' => t(''),
);
$elements['width'] = array(
'#type' => 'number',
'#title' => t('Width'),
......@@ -72,6 +79,22 @@ class ColorFormatterSwatch extends FormatterBase {
return $elements;
}
/**
* @param string $shape
* @return array|string
*/
protected function getShape($shape = NULL) {
$formats = [];
$formats['square'] = $this->t('Square');
$formats['circle'] = $this->t('Circle');
$formats['parallelogram'] = $this->t('Parallelogram');
if ($shape) {
return $formats[$shape];
}
return $formats;
}
/**
* {@inheritdoc}
*/
......@@ -81,6 +104,10 @@ class ColorFormatterSwatch extends FormatterBase {
$summary = [];
$summary[] = t('@shape', array(
'@shape' => $this->getShape($settings['shape']),
));
$summary[] = t('Width: @width Height: @height', array(
'@width' => $settings['width'],
'@height' => $settings['height']
......@@ -101,10 +128,13 @@ class ColorFormatterSwatch extends FormatterBase {
$elements = [];
$elements['#attached']['library'][] = 'color_field/color-field-formater-swatch';
foreach ($items as $delta => $item) {
$elements[$delta] = array(
'#theme' => 'color_field_swatch',
'#theme' => 'color_field_formatter_swatch',
'#color' => $this->viewValue($item),
'#shape' => $settings['shape'],
'#width' => $settings['width'],
'#height' => $settings['height'],
);
......
......@@ -16,4 +16,4 @@
*/
#}
<div style="background-color: {{ color }}; width: {{ width }}px; height: {{ height }}px;"></div>
<div class='color_field__swatch--{{ shape }}' style="background-color: {{ color }}; width: {{ width }}px; height: {{ height }}px;"></div>
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