Commit e558e8e6 authored by targoo's avatar targoo

wip on new targoo field widget

parent 5482b692
# Custom js and dependencies.
simpleWidget:
remote: https://github.com/targoo/Respond
version: 1.0.0
js:
js/color_field.js: {}
js/color_field.jquery.js: {}
css:
css/color_field.css: {}
license:
name: MIT
url: https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
gpl-compatible: true
dependencies:
- core/jquery
.colorBox {
border: 1px solid #ffffff;
cursor: pointer;
font-family: monospace;
font-size: 1.2em;
margin: 0 3px;
padding: 1px 8px;
}
.colorBox.active,
.colorBox:hover {
padding: 9px 16px;
}
.transparentBox {
background-image: url("../images/transparentBox16.gif");
background-position: 0 3px;
background-repeat: no-repeat;
margin: 0 3px;
padding: 2px 8px;
}
.transparentBox.active,
.transparentBox:hover {
background-image: url(../images/transparentBox32.gif);
background-position: 0 3px;
background-repeat: no-repeat;
padding: 10px 16px;
}
.hide_input {
diplay: none;
}
.color-field-column {
float: left;
width: 48%;
}
.color-field-column .form-text {
width: 95%;
}
/**
* @file
* Attaches behaviors for Drupal's color field.
*/
(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.colorfield = {
attach: function (context) {
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;
},
detach: function (context, settings, trigger) {
}
};
})(Drupal, drupalSettings);
/*(function ($) {
Drupal.behaviors.color_field = {
attach: function (context) {
$.each(Drupal.settings.color_field, function (selector) {
// selector is the textfield.
// Try to get the current selected value so we don't lose the value
// if the form si submitted but not valid.
var value = $(selector).val();
if (value == '') value = this.value;
$('#' + this.divid).empty().addColorPicker({
currentColor:value,
colors:this.colors,
clickCallback: function(c) {
$(selector).val(c).trigger('change');
}
});
});
}
};
})(jQuery);
*/
\ No newline at end of file
/**
* Color Field jQuery
*/
(function ($) {
jQuery.fn.addColorPicker = function (props) {
if (!props) { props = []; }
props = jQuery.extend({
currentColor:'',
blotchElemType: 'span',
blotchClass:'colorBox',
clickCallback: function(ignoredColor) {},
iterationCallback: null,
fillString: ' ',
fillStringX: '?',
colors: [
'#AC725E','#D06B64','#F83A22', '#FA573C', '#FF7537', '#FFAD46',
'#42D692','#16A765', '#7BD148','#B3DC6C','#FBE983',
'#92E1C0', '#9FE1E7', '#9FC6E7', '#4986E7','#9A9CFF',
'#B99AFF','#C2C2C2','#CABDBF','#CCA6AC','#F691B2',
'#CD74E6','#A47AE2',
]
}, props);
var count = props.colors.length;
for (var i = 0; i < count; ++i) {
var color = props.colors[i];
var elem = jQuery('<' + props.blotchElemType + '/>')
.addClass(props.blotchClass)
.attr('color',color)
.css('background-color',color);
// jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
if (props.currentColor == color) {
elem.addClass('active');
}
if (props.clickCallback) {
elem.click(function() {
jQuery(this).parent().children('.colorBox').removeClass('active');
jQuery(this).addClass('active');
props.clickCallback(jQuery(this).attr('color'));
});
}
this.append(elem);
if (props.iterationCallback) {
props.iterationCallback(this, elem, color, i);
}
}
var elem = jQuery('<' + props.blotchElemType + '/>')
.addClass('transparentBox')
.attr('color', '')
.css('background-color', '');
if (props.currentColor == '') {
elem.addClass('active');
}
if (props.clickCallback) {
elem.click(function() {
jQuery(this).parent().children('.colorBox').removeClass('active');
jQuery(this).addClass('active');
props.clickCallback(jQuery(this).attr('color'));
});
}
this.append(elem);
if (props.iterationCallback) {
props.iterationCallback(this, elem, color, i);
}
return this;
};
})(jQuery);
<?php
/**
* @file
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldSimpleWidget.
*/
namespace Drupal\color_field\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Plugin implementation of the 'color_field_default' widget.
*
* @FieldWidget(
* id = "color_field_simple",
* module = "color_field",
* label = @Translation("Color field simple"),
* field_types = {
* "color_field"
* }
* )
*/
class ColorFieldSimpleWidget extends WidgetBase {
/**
* {@inheritdoc}
*/
public static function defaultSettings() {
return array(
'cell_width' => 10,
'cell_height' => 10,
'cell_margin' => 1,
'box_width' => 115,
'box_height' => 20,
'columns' => 16,
) + parent::defaultSettings();
}
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $form_state) {
$element['cell_width'] = array(
'#type' => 'textfield',
'#title' => t('Cell width'),
'#default_value' => $this->getSetting('cell_width'),
'#required' => TRUE,
'#description' => t('Width of each individual color cell.'),
);
$element['cell_height'] = array(
'#type' => 'textfield',
'#title' => t('Height width'),
'#default_value' => $this->getSetting('cell_height'),
'#required' => TRUE,
'#description' => t('Height of each individual color cell.'),
);
$element['cell_margin'] = array(
'#type' => 'textfield',
'#title' => t('Cell margin'),
'#default_value' => $this->getSetting('cell_margin'),
'#required' => TRUE,
'#description' => t('Margin of each individual color cell.'),
);
$element['box_width'] = array(
'#type' => 'textfield',
'#title' => t('Box width'),
'#default_value' => $this->getSetting('box_width'),
'#required' => TRUE,
'#description' => t('Width of the color display box.'),
);
$element['box_height'] = array(
'#type' => 'textfield',
'#title' => t('Box height'),
'#default_value' => $this->getSetting('box_height'),
'#required' => TRUE,
'#description' => t('Height of the color display box.'),
);
$element['columns'] = array(
'#type' => 'textfield',
'#title' => t('Columns number'),
'#default_value' => $this->getSetting('columns'),
'#required' => TRUE,
'#description' => t('Number of columns to display. Color order may look strange if this is altered.'),
);
return $element;
}
/**
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = array();
$cell_width = $this->getSetting('cell_width');
$cell_height = $this->getSetting('cell_height');
$cell_margin = $this->getSetting('cell_margin');
$box_width = $this->getSetting('box_width');
$box_height = $this->getSetting('box_height');
$columns = $this->getSetting('columns');
if (!empty($cell_width)) {
$summary[] = t('Cell width: @cell_width', array('@cell_width' => $cell_width));
}
if (!empty($cell_height)) {
$summary[] = t('Cell height: @cell_height', array('@cell_height' => $cell_height));
}
if (!empty($cell_margin)) {
$summary[] = t('Cell margin: @cell_margin', array('@cell_margin' => $cell_margin));
}
if (!empty($box_width)) {
$summary[] = t('Box width: @box_width', array('@box_width' => $box_width));
}
if (!empty($box_height)) {
$summary[] = t('Box height: @box_height', array('@box_height' => $box_height));
}
if (!empty($columns)) {
$summary[] = t('Columns: @columns', array('@columns' => $columns));
}
if (empty($summary)) {
$summary[] = t('No placeholder');
}
return $summary;
}
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element['color'] = array(
'#title' => t('Color'),
'#type' => 'textfield',
'#maxlength' => 6,
'#size' => 6,
'#required' => $element['#required'],
'#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
);
if ($this->getFieldSetting('opacity')) {
$element['color']['#prefix'] = '<div class="container-inline">';
$element['opacity'] = array(
'#title' => t('Opacity'),
'#type' => 'textfield',
'#maxlength' => 3,
'#size' => 3,
'#required' => $element['#required'],
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
'#suffix' => '</div>',
);
}
// Attach library containing css and js files.
$element['#attached']['library'][] = 'color_field/simpleWidget';
$element['#attached']['drupalSettings']['color_field']['settings'] = $this->getSettings();
return $element;
}
}
<?php
/**
* @file
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldTargooWidget.
*/
namespace Drupal\color_field\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Plugin implementation of the 'color_field_default' widget.
*
* @FieldWidget(
* id = "color_field_targoo",
* module = "color_field",
* label = @Translation("Color field Targoo"),
* field_types = {
* "color_field"
* }
* )
*/
class ColorFieldTargooWidget extends WidgetBase {
/**
* {@inheritdoc}
*/
public static function defaultSettings() {
return array(
'default_colors' => '
#AC725E,#D06B64,#F83A22,#FA573C,#FF7537,#FFAD46
#42D692,#16A765,#7BD148,#B3DC6C,#FBE983
#92E1C0,#9FE1E7,#9FC6E7,#4986E7,#9A9CFF
#B99AFF,#C2C2C2,#CABDBF,#CCA6AC,#F691B2
#CD74E6,#A47AE2',
) + parent::defaultSettings();
}
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $form_state) {
$element['default_colors'] = array(
'#type' => 'textarea',
'#title' => t('Default colors'),
'#default_value' => $this->getSetting('default_colors'),
'#required' => TRUE,
'#description' => t('Default colors for pre-selected color boxes'),
);
return $element;
}
/**
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = array();
$colors = array();
$default_colors = $this->getSetting('default_colors');
if (!empty($default_colors)) {
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
foreach ($default_colors as $color) {
$colors = $color[0];
$summary[] = $colors;
}
}
if (empty($summary)) {
$summary[] = t('No default colors');
}
return $summary;
}
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element['color'] = array(
'#title' => t('Color'),
'#type' => 'textfield',
'#maxlength' => 6,
'#size' => 6,
'#required' => $element['#required'],
'#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
);
if ($this->getFieldSetting('opacity')) {
$element['color']['#prefix'] = '<div class="container-inline">';
$element['opacity'] = array(
'#title' => t('Opacity'),
'#type' => 'textfield',
'#maxlength' => 3,
'#size' => 3,
'#required' => $element['#required'],
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
'#suffix' => '</div>',
);
}
// Attach library containing css and js files.
$element['#attached']['library'][] = 'color_field/simpleWidget';
$element['#attached']['drupalSettings']['color_field_targoo']['settings'] = $this->getSettings();
return $element;
}
}
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