Commit bdd34570 authored by targoo's avatar targoo

WIP: add color widget box

parent f0eb8f93
......@@ -2,11 +2,11 @@ color-field-box:
remote: https://github.com/targoo/color_field_box
version: 1.0.0
js:
js/color_field.js: {}
js/color_field.jquery.js: {}
js/color_field_box.js: {}
js/color_field_box.jquery.js: {}
css:
theme:
css/color_field.css: {}
component:
css/color_field_box.css: {}
license:
name: MIT
url: https://github.com/targoo/color_field_box/LICENSE-MIT
......
......@@ -38,15 +38,16 @@ function color_field_help($route_name, RouteMatchInterface $route_match) {
function color_field_theme() {
$theme = [];
$theme['color_field_swatch'] = array(
$theme['color_field_formatter_swatch'] = array(
'variables' => array(
'shape' => NULL,
'color' => NULL,
'width' => NULL,
'height' => NULL,
),
);
$theme['color_widget_box'] = array(
$theme['color_field_widget_box'] = array(
'render element' => 'element',
);
......@@ -54,11 +55,11 @@ function color_field_theme() {
}
/**
* Prepares variables for the color swatch templates.
* Prepares variables for the color formatter swatch template.
*
* This template outputs a separate title and link.
* This template outputs a color swatch.
*
* Default template: link-formatter-link-separate.html.twig.
* Default template: color-field-formatter-swatch.html.twig.
*
* @param array $variables
* An associative array containing:
......@@ -66,27 +67,36 @@ function color_field_theme() {
* - width: The width of the color swatch.
* - height: The height of the color swatch.
*/
function template_preprocess_color_field_swatch(&$variables) {
function template_preprocess_color_field_formatter_swatch(&$variables) {
}
/**
* Prepares variables for color widget box wrapper templates.
* Prepares variables for color widget box wrapper template.
*
* Default template: color-widget-box.html.twig.
* Default template: color-field-widget-box.html.twig.
*
* @param array $variables
* An associative array containing:
* - element: An associative array containing the properties of the element.
* Properties used: #title, #children, #required, #attributes.
*/
function template_preprocess_color_widget_box(&$variables) {
function template_preprocess_color_field_widget_box(&$variables) {
$element = $variables['element'];
if (!empty($element['#title'])) {
$variables['title'] = $element['#title'];
}
if (!empty($element['#description'])) {
$variables['description'] = $element['#description'];
}
$variables['color'] = $element['color'];
$element['opacity']['#attributes']['class'][] = 'visually-hidden';
$variables['opacity'] = $element['opacity'];
// Suppress error messages.
$variables['errors'] = NULL;
......@@ -99,5 +109,53 @@ function template_preprocess_color_widget_box(&$variables) {
$variables['required'] = TRUE;
}
$variables['content'] = $element['#children'];
//$variables['content'] = $element['#children'];
/*
// Javascript settings.
$settings = array();
$settings['id'] = $element['rgb']['#id'];
$settings['divid'] = 'div-' . $element['rgb']['#id'];
$settings['value'] = (isset($element['#value']['rgb'])) ? $element['#value']['rgb'] : '';
$default_colors = (isset($element['#instance_settings']['default_colors'])) ? $element['#instance_settings']['default_colors'] : '';
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
foreach ($default_colors as $color) {
$settings['colors'][] = $color[0];
}
// Attach javascript and style.
$element['rgb']['#attached'] = array(
'js' => array(
drupal_get_path('module', 'color_field') . '/color_field_default_widget/color_field.js',
drupal_get_path('module', 'color_field') . '/color_field_default_widget/color_field.jquery.js',
array(
'data' => array('color_field' => array('#' . $settings['id'] => $settings)),
'type' => 'setting',
),
),
'css' => array(drupal_get_path('module', 'color_field') . '/color_field_default_widget/color_field.css'),
);
$element['rgb']['#title'] = (isset($element['rgb']['#title'])) ? $element['rgb']['#title'] : '';
$element['rgb']['#suffix'] = '<label> ' . $element['rgb']['#title'] . ' </label><div id=div-' . $settings['id'] . '></div><div class="description">' . $element['rgb']['#description'] . '</div>';
unset($element['rgb']['#title']);
unset($element['rgb']['#description']);
// Hide the input field.
$element['rgb']['#attributes']['class'] = array('element-invisible');
$output = '';
$output .= '<div class="link-field-subrow clearfix">';
$output .= '<div class="link-field-title color-field-column">' . drupal_render($element['rgb']) . '</div>';
if (isset($element['opacity'])) {
$output .= '<div class="link-field-title color-field-column">' . drupal_render($element['opacity']) . '</div>';
}
$output .= '</div>';
$output .= drupal_render_children($element);
return $output;
*/
}
# Schema for the configuration files of the Color Fied module.
# Widget.
entity_form_display.field.color_field_default:
type: entity_field_form_display_base
label: 'Telephone default format settings'
mapping:
settings:
type: mapping
label: 'Settings'
mapping:
placeholder_color:
type: label
label: 'Placeholder for the color property'
placeholder_opacity:
type: label
label: 'Placeholder for the opacity property'
# Formater.
entity_view_display.field.color_field_swatch:
type: entity_field_view_display_base
label: 'Telephone link format settings'
mapping:
settings:
type: mapping
label: 'Settings'
mapping:
title:
type: label
label: 'Title to replace basic numeric telephone number display'
# Formater.
entity_view_display.field.color_field_text:
type: entity_field_view_display_base
label: 'Telephone link format settings'
mapping:
settings:
type: mapping
label: 'Settings'
mapping:
title:
type: label
label: 'Title to replace basic numeric telephone number display'
......@@ -27,12 +27,10 @@
.hide_input {
diplay: none;
}
.color-field-column {
float: left;
width: 48%;
}
.color-field-column .form-text {
width: 95%;
}
......@@ -19,9 +19,10 @@
* Does not discriminate based on element type, so allows you to set the active
* class on any element: a, li…
*/
Drupal.behaviors.colorfield = {
attach: function (context) {
Drupal.behaviors.color_field = {
attach: function (context, settings) {
console.log(context);
console.log(settings);
console.log(drupalSettings);
// Start by finding all potentially active links.
......
......@@ -82,15 +82,16 @@ class ColorWidgetBox extends WidgetBase {
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = [];
// Retrieve field label and description.
$element['#title'] = $this->fieldDefinition->getLabel();;
$element['#description'] = $this->fieldDefinition->getDescription();
$element['#required'] = TRUE;
$element['#attributes']['class'][] = 'container-inline';
$element['#theme_wrappers'] = array('color_widget_box');
// Theme.
$element['#theme_wrappers'] = array('color_field_widget_box');
// Attached js.
$element['#attached']['library'][] = 'color_field/color-field-box';
$element['drupalSettings']['color_field']['color_widget_box']['settings'] = $this->getSettings();
$element['#attached']['drupalSettings']['color_field']['color_widget_box']['settings'] = $this->getSettings();
$element['color'] = array(
'#maxlength' => 7,
......
{#
/**
* @file
* Default theme implementation of a color swatch.
* Default theme implementation of a color swatch formatter.
*
* Available variables:
* - color: The color background.
* - width: The width of the color swatch.
* - height: The height of the color swatch.
* - shape: The shape of the color swatch.
*
* @see template_preprocess()
* @see template_preprocess_color_field_swatch()
* @see template_preprocess_link_formatter_link_separate()
* @see template_preprocess_color_field_formatter_swatch()
*
* @ingroup themeable
*/
......
{#
/**
* @file
* Default theme implementation of a datetime form wrapper.
* Default theme implementation of a color box form wrapper.
*
* Available variables:
* - content: The form element to be output, usually a datelist, or datetime.
......@@ -10,7 +10,8 @@
* - description: Description text for the form element.
* - required: An indicator for whether the associated form element is required.
*
* @see template_preprocess_color_widget_box()
* @see template_preprocess()
* @see template_preprocess_color_field_widget_box()
*
* @ingroup themeable
*/
......@@ -25,10 +26,16 @@ required ? 'form-required',
{% if title %}
<h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
{% endif %}
{{ content }}
<div class="container-inline">
{{ color }}
{{ opacity }}
</div>
{% if errors %}
<div>
{{ errors }}
</div>
{% endif %}
{{ description }}
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