Commit 36e3167f authored by targoo's avatar targoo

Fix jquery for box widget

parent a1ec12f0
......@@ -94,7 +94,6 @@ function template_preprocess_color_field_widget_box(&$variables) {
$variables['color'] = $element['color'];
$element['opacity']['#attributes']['class'][] = 'visually-hidden';
$variables['opacity'] = $element['opacity'];
// Suppress error messages.
......@@ -109,53 +108,4 @@ function template_preprocess_color_field_widget_box(&$variables) {
$variables['required'] = TRUE;
}
//$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;
*/
}
......@@ -3,37 +3,32 @@
* Attaches behaviors for Drupal's color field.
*/
(function (Drupal, drupalSettings) {
(function (Drupal, drupalSettings, $) {
"use strict";
/**
* Append active class.
*
* The link is only active if its path corresponds to the current path, the
* language of the linked path is equal to the current language, and if the
* query parameters of the link equal those of the current request, since the
* same request with different query parameters may yield a different page
* (e.g. pagers, exposed View filters).
*
* Does not discriminate based on element type, so allows you to set the active
* class on any element: a, li…
*/
Drupal.behaviors.color_field = {
attach: function (context, settings) {
console.log(context);
console.log(settings);
console.log(drupalSettings);
// Start by finding all potentially active links.
//var path = drupalSettings.path;
//var queryString = JSON.stringify(path.currentQuery);
//var querySelector = path.currentQuery ? "[data-drupal-link-query='" + queryString + "']" : ':not([data-drupal-link-query])';
//var originalSelectors = ['[data-drupal-link-system-path="' + path.currentPath + '"]'];
//var selectors;
var $context = $(context);
var default_colors = settings.color_field.color_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');
$element.empty().addColorPicker({
currentColor: $input.val(),
colors: default_colors,
clickCallback: function(color) {
$input.val(color).trigger('change');
}
});
});
},
detach: function (context, settings, trigger) {
}
};
})(Drupal, drupalSettings);
\ No newline at end of file
})(Drupal, drupalSettings, jQuery);
......@@ -80,25 +80,38 @@ class ColorWidgetBox extends WidgetBase {
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = [];
// We are nesting some sub-elements inside the parent, so we need a wrapper.
// We also need to add another #title attribute at the top level for ease in
// identifying this item in error messages. We do not want to display this
// title because the actual title display is handled at a higher level by
// the Field module.
// Retrieve field label and description.
$element['#title'] = $this->fieldDefinition->getLabel();;
$element['#description'] = $this->fieldDefinition->getDescription();
// Theme.
$element['#theme_wrappers'] = array('color_field_widget_box');
$element['#attributes']['class'][] = 'container-inline';
// Attached js.
$element['#attached']['library'][] = 'color_field/color-field-box';
$element['#attached']['drupalSettings']['color_field']['color_widget_box']['settings'] = $this->getSettings();
// Set Drupal settings.
$settings = [];
$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];
}
$element['#attached']['drupalSettings']['color_field']['color_widget_box']['settings'] = $settings;
// Retrieve field label and description.
$element['#title'] = $this->fieldDefinition->getLabel();;
$element['#description'] = $this->fieldDefinition->getDescription();
$element['color'] = array(
'#maxlength' => 7,
'#size' => 7,
'#type' => 'textfield',
'#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
);
'#attributes' => array('class' => array('visually-hidden')),
);
$element['color']['#suffix'] = "<div class='color-field-widget-box-form'>" . 111 . "</div>";
if ($this->getFieldSetting('opacity')) {
$element['opacity'] = array(
......
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