Cambio do modulo de seleccion de cores.
This commit is contained in:
parent
a77f3b6f1b
commit
0b9c73d8f3
62 changed files with 7919 additions and 1461 deletions
4
site/modules/.FieldtypeColor/.gitattributes
vendored
Normal file
4
site/modules/.FieldtypeColor/.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
# Show correct language for ProcessWire .module
|
||||
*.module linguist-language=PHP
|
||||
5
site/modules/.FieldtypeColor/.gitignore
vendored
Normal file
5
site/modules/.FieldtypeColor/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
dematte/*
|
||||
jscolor-2.0.4/*
|
||||
colorpicker/*
|
||||
InputfieldColor.js
|
||||
.DS_Store
|
||||
336
site/modules/.FieldtypeColor/FieldtypeColor.module
Normal file
336
site/modules/.FieldtypeColor/FieldtypeColor.module
Normal file
|
|
@ -0,0 +1,336 @@
|
|||
<?php namespace ProcessWire;
|
||||
|
||||
/**
|
||||
* ProcessWire Color Fieldtype
|
||||
* Field that stores an 32Bit unsigned integer value to hold RGB colors and Alpha channel
|
||||
*
|
||||
* @author Christoph Thelen aka @kixe 2017/07/03
|
||||
* @copyright © 2017 Christoph Thelen
|
||||
* @license Licensed under GNU/GPL v3
|
||||
* @link https://processwire.com/talk/topic/...
|
||||
* @version 1.1.8
|
||||
*
|
||||
*
|
||||
* @since 1.0.1 2017/07/05 - better validation, spectrum options modifiable
|
||||
* @since 1.0.2 2017/07/09 - added default value option
|
||||
* @since 1.0.3 2017/07/09 - added option for custom javascript
|
||||
* @since 1.0.4 2017/08/18 - made # optional for input (pattern attribute)
|
||||
* @since 1.0.5 2017/08/28 - optimized default color handling, added output format option array()
|
||||
* @since 1.0.6 2017/10/07 - changed dec to hex conversion in function wakeupValue() from dechex() to base_convert() to be safe on 32bit systems
|
||||
* @since 1.0.7 2017/10/08 - changed dec to hex conversion in function wakeupValue() from dechex() to custom function to be safe on 32bit systems
|
||||
* @since 1.0.8 2018/09/08 - Installation error if PHP is running on 32-bit system and BCMath extension is not installed
|
||||
* @since 1.0.9 2019/01/12 - fixed number format bug for rgba() and hsla() alpha channel if comma is forced as decimal separator by locale settings
|
||||
* @since 1.1.0 2019/08/12 - better input check formatColorString()
|
||||
* @since 1.1.1 2019/09/01 - fixed bug missing opacity if 0
|
||||
* @since 1.1.2 2019/09/04 - fixed bug #5 FieldtypeColor index typo in var in function RGB2HSL() thanks to @junoforno
|
||||
* @since 1.1.3 2019/10/10 - fixed bug #1 InputfieldColor - remove pattern attribute if spectrum color picker is used to prevent error in Chrome
|
||||
* @since 1.1.4 2020/03/21 - fixed number format bug for hsl() output: use dot instead of comma as decimal separator independent from language setup
|
||||
* @since 1.1.5 2020/05/15 switched to ProcessWire namespace
|
||||
* @since 1.1.6 2021/10/04 added comparison functions getClosestColorName(), getColorDistance(), getLuminanceDistance()
|
||||
* @since 1.1.7 2021/10/10 added output format option: array([0,255], [0,255], [0,255]) indexed array: R,G,B
|
||||
* @since 1.1.8 2023/07/17 added output format option: array([0,255], [0,255], [0,255]) indexed array: H,S,L
|
||||
*
|
||||
* made for ProcessWire 3.x by Ryan Cramer
|
||||
* https://processwire.com
|
||||
*
|
||||
*/
|
||||
|
||||
class FieldtypeColor extends Fieldtype {
|
||||
|
||||
public static function getModuleInfo() {
|
||||
return array(
|
||||
'title' => 'Color',
|
||||
'version' => 118,
|
||||
'summary' => 'Field that stores a color value as 32bit integer reflecting a RGBA value. Many options for Input (HTML5 Inputfield Color, Textfield with changing background, various jQuery/JS ColorPickers, custom jQuery/JS/CSS) and Output (RGB, RGBA, HSL, HSLA, HEX, Array).',
|
||||
'installs' => 'InputfieldColor',
|
||||
'href' => 'https://processwire.com/talk/topic/16679-fieldtypecolor/'
|
||||
);
|
||||
}
|
||||
|
||||
public function ___getCompatibleFieldtypes(Field $field) {
|
||||
$fieldtypes = $this->wire(new Fieldtypes());
|
||||
foreach($this->wire('fieldtypes') as $fieldtype) {
|
||||
if(!$fieldtype instanceof FieldtypeInteger &&
|
||||
!$fieldtype instanceof FieldtypeColor &&
|
||||
$fieldtype != 'FieldtypeText') {
|
||||
$fieldtypes->remove($fieldtype);
|
||||
}
|
||||
}
|
||||
return $fieldtypes;
|
||||
}
|
||||
|
||||
public function getInputfield(Page $page, Field $field) {
|
||||
$inputfield = $this->modules->get('InputfieldColor');
|
||||
$inputfield->initValue = $this->sanitizeValue($page, $field, $field->defaultValue);
|
||||
$inputfield->class = $this->className();
|
||||
return $inputfield;
|
||||
}
|
||||
|
||||
public function sanitizeValue(Page $page, Field $field, $value) {
|
||||
if (!$value) return $value;
|
||||
$value = ltrim($value, '#');
|
||||
if (strlen($value) == 8) return $value;
|
||||
else if (strlen($value) == 6) return 'ff'.$value; // add alpha channel
|
||||
else throw New WireException('Expecting Hex color string (length 6 or 8 digits) with optional leading \'#\'');
|
||||
|
||||
}
|
||||
|
||||
public function sleepValue(Page $page, Field $field, $value) {
|
||||
return hexdec($value);
|
||||
}
|
||||
|
||||
public function wakeupValue(Page $page, Field $field, $value) {
|
||||
if (!$value) return $value;
|
||||
if (function_exists("bcmod")) return str_pad(self::bcdechex($value), 8, '0', STR_PAD_LEFT); // BCMath extension required
|
||||
return str_pad(dechex($value), 8, '0', STR_PAD_LEFT); // 64-bit system required
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a number from decimal to hex (BCMath extension required)
|
||||
* returns precice result even if number is bigger than PHP_INT_MAX (safe for 32bit systems)
|
||||
*
|
||||
* @param int/string/float number
|
||||
* @return string
|
||||
*
|
||||
* @see http://php.net/manual/en/ref.bc.php#99130
|
||||
*/
|
||||
public static function bcdechex($dec) {
|
||||
$last = bcmod("$dec", 16);
|
||||
$remain = bcdiv(bcsub("$dec", $last), 16);
|
||||
if($remain == 0) return dechex($last);
|
||||
else return self::bcdechex($remain).dechex($last);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a RGB color value to HSL. Conversion formula
|
||||
* @param array of 3 color values R, G, and B [0, 255]
|
||||
* @return array The HSL representation
|
||||
*
|
||||
* @see https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion/9493060#9493060
|
||||
* @see http://en.wikipedia.org/wiki/HSL_color_space
|
||||
*/
|
||||
public function RGB2HSL(array $rgb) {
|
||||
$rgb = array_map(function($v) { return $v/ 255; }, $rgb);
|
||||
$max = max($rgb);
|
||||
$min = min($rgb);
|
||||
$hue = $sat = $light = ($max + $min) / 2;
|
||||
|
||||
if($max == $min) {
|
||||
$hue = $sat = 0; // achromatic
|
||||
} else {
|
||||
$d = $max - $min;
|
||||
$sat = $light > 0.5 ? $d / (2 - $max - $min) : $d / ($max + $min);
|
||||
switch($max) {
|
||||
case $rgb[0]:
|
||||
$hue = ($rgb[1] - $rgb[2]) / $d + ($rgb[1] < $rgb[1] ? 6 : 0);
|
||||
break;
|
||||
case $rgb[1]:
|
||||
$hue = ($rgb[2] - $rgb[0]) / $d + 2;
|
||||
break;
|
||||
case $rgb[2]:
|
||||
$hue = ($rgb[0] - $rgb[1]) / $d + 4;
|
||||
break;
|
||||
}
|
||||
$hue = $hue / 6;
|
||||
}
|
||||
// round and convert float to string with dot as decimal separator in any language
|
||||
$hue = str_replace(',', '.', round($hue * 360));
|
||||
$sat = str_replace(',', '.', round($sat * 100, 1));
|
||||
$light = str_replace(',', '.', round($light * 100, 1));
|
||||
|
||||
return [$hue, $sat, $light];
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the "naive" difference between two colors.
|
||||
* @see https://php.tutorialink.com/finding-nearest-match-rgb-color-from-array-of-colors/
|
||||
* @param int[] $color_a Three-element array with R,G,B color values 0-255.
|
||||
* @param int[] $color_b Three-element array with R,G,B color values 0-255.
|
||||
* @return int
|
||||
*/
|
||||
public function getColorDistance(array $color_a, array $color_b): int {
|
||||
return
|
||||
abs($color_a[0] - $color_b[0]) +
|
||||
abs($color_a[1] - $color_b[1]) +
|
||||
abs($color_a[2] - $color_b[2]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the difference between two colors' luminance values.
|
||||
* @see https://php.tutorialink.com/finding-nearest-match-rgb-color-from-array-of-colors/
|
||||
* @param int[] $color_a Three-element array with R,G,B color values 0-255.
|
||||
* @param int[] $color_b Three-element array with R,G,B color values 0-255.
|
||||
* @return int
|
||||
*/
|
||||
public function getLuminanceDistance(array $color_a, array $color_b): int {
|
||||
$luminance_f = function ($red, $green, $blue): int {
|
||||
// Source: https://en.wikipedia.org/wiki/Relative_luminance
|
||||
$luminance = (int) (0.2126 * $red + 0.7152 * $green + 0.0722 * $blue);
|
||||
return $luminance;
|
||||
};
|
||||
|
||||
return abs(
|
||||
$luminance_f($color_a[0], $color_a[1], $color_a[2]) -
|
||||
$luminance_f($color_b[0], $color_b[1], $color_b[2])
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the closest named color
|
||||
* @param hexcolor
|
||||
* @return string
|
||||
*/
|
||||
public function getClosestColorName(string $color) {
|
||||
$color = ltrim($color, '#');
|
||||
if (strlen($color) == 6) $color = "ff$color";
|
||||
if (strlen($color) != 8) throw new WireException("Invalid parameter. Expected hex string of 6 or 8 digits length with or without leading '#'.");
|
||||
$color = $this->formatColorString($color, 9);
|
||||
$palette = json_decode(file_get_contents(__DIR__ . '/colornames.json'), true);
|
||||
$min = 765;
|
||||
$match = null;
|
||||
foreach ($palette as $name => $pcolor) {
|
||||
$pcolor = $this->formatColorString("ff$pcolor", 9);
|
||||
if ($pcolor === $color) return $name; // quick exit if full match
|
||||
$distance = $this->getColorDistance($pcolor, $color);
|
||||
if ($distance >= $min) continue;
|
||||
$min = $distance;
|
||||
$match = $name;
|
||||
}
|
||||
return $match;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format value for output
|
||||
*
|
||||
*/
|
||||
public function ___formatValue(Page $page, Field $field, $value) {
|
||||
if (!$value) return null;
|
||||
if ($field->outputFormat === 7) return $this->sleepValue($page, $field, $value);
|
||||
return $this->formatColorString($value, $field->outputFormat);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format color string
|
||||
*
|
||||
* @param $value string - hex string of 8 chiffres, first 2 is the alpha channel
|
||||
* @param $of int - output format
|
||||
* @return string formatted color string
|
||||
* @throws object WireException - if input doesn't match (check for length, detailed check in debug mode)
|
||||
*
|
||||
*/
|
||||
public function formatColorString($value, $of = 0) {
|
||||
|
||||
// simple length check or preg_match in debug mode
|
||||
if (strlen($value) != 8 || ($this->wire('config')->debug && !preg_match('/[A-Fa-f0-9]{8}/', $value))) {
|
||||
throw new WireException("Invalid input: $value. Expected hex string of 8 digits length.");
|
||||
}
|
||||
|
||||
if ($of === 6) return $value;
|
||||
if ($of === 0) return "#".substr($value,2);
|
||||
if ($of === 1) return "#".$value;
|
||||
|
||||
$hexVals = str_split($value, 2);
|
||||
$value = array_map('hexdec', $hexVals);
|
||||
|
||||
// opacity
|
||||
$opacity = '0';
|
||||
if ($value[0] > 1 && in_array($of ,array(3,5,8,10,12))) {
|
||||
$opacity = round($value[0] / 255, 2); // float
|
||||
$opacity = rtrim(number_format($opacity, 2, '.', ''),'.0'); // convert float to string with dot as decimal separator
|
||||
}
|
||||
|
||||
if ($of === 9) return [$value[1], $value[2], $value[3]];
|
||||
if ($of === 10) return [$value[1], $value[2], $value[3], $opacity];
|
||||
|
||||
if ($of === 8) {
|
||||
$assocArray = array(
|
||||
'o' => $opacity,
|
||||
'r' => $value[1],
|
||||
'g' => $value[2],
|
||||
'b' => $value[3],
|
||||
'ox' => $hexVals[0],
|
||||
'rx' => $hexVals[1],
|
||||
'gx' => $hexVals[2],
|
||||
'bx' => $hexVals[3],
|
||||
);
|
||||
return array_merge($value, $assocArray);
|
||||
}
|
||||
|
||||
if ($of === 2) return "rgb($value[1], $value[2], $value[3])";
|
||||
if ($of === 3) return "rgba($value[1], $value[2], $value[3], $opacity)";
|
||||
|
||||
$hsl = $this->RGB2HSL(array_slice($value,1,3));
|
||||
|
||||
if ($of === 11) return $hsl;
|
||||
|
||||
if ($of === 12) {
|
||||
$hsla = $hsl;
|
||||
$hsla[] = $opacity;
|
||||
return $hsla;
|
||||
}
|
||||
|
||||
if ($of === 4) return "hsl($hsl[0], $hsl[1]%, $hsl[2]%)";
|
||||
if ($of === 5) return "hsla($hsl[0], $hsl[1]%, $hsl[2]%, $opacity)";
|
||||
}
|
||||
|
||||
public function getDatabaseSchema(Field $field) {
|
||||
$schema = parent::getDatabaseSchema($field);
|
||||
$schema['data'] = "int UNSIGNED NOT NULL";
|
||||
return $schema;
|
||||
}
|
||||
|
||||
public function ___getConfigInputfields(Field $field) {
|
||||
|
||||
$inputfields = $this->wire(new InputfieldWrapper());
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldRadios');
|
||||
$f->attr('name', 'outputFormat');
|
||||
$f->label = $this->_('Output Format');
|
||||
$f->description = $this->_('Choose your preferred output format.');
|
||||
|
||||
$f->addOption(0, $this->_('string 6-digit hex color *#4496dd*'));
|
||||
$f->addOption(1, $this->_('string 8-digit hex color *#fa4496dd* (limited browser support)'));
|
||||
$f->addOption(2, $this->_('string *rgb(68, 100, 221)*'));
|
||||
$f->addOption(3, $this->_('string *rgba(68, 100, 221, 0.98)*'));
|
||||
$f->addOption(4, $this->_('string *hsl(227, 69.2%, 56.7%)*'));
|
||||
$f->addOption(5, $this->_('string *hsla(227, 69.2%, 56.7%, 0.98)*'));
|
||||
$f->addOption(6, $this->_('string 8-digit raw hex *fa4496dd* (unformatted)'));
|
||||
$f->addOption(7, $this->_('int 32bit (storage)'));
|
||||
$f->addOption(8, $this->_('array(r[0,255], g[0,255], b[0,255], o[0,1], rx[00,ff], gx[00,ff], bx[00,ff], ox[00,ff])'));
|
||||
$f->addOption(9, $this->_('array([0,255], [0,255], [0,255]) indexed array: R,G,B'));
|
||||
$f->addOption(10, $this->_('array([0,255], [0,255], [0,255], [0,1]) indexed array: R,G,B,Alpha'));
|
||||
$f->addOption(11, $this->_('array([0,360], [69.2%], [56.7%]) indexed array: H,S,L'));
|
||||
$f->addOption(12, $this->_('array([0,360], [69.2%], [56.7%], [0,1]) indexed array: H,S,L,Alpha'));
|
||||
|
||||
$f->attr('value', (int) $field->outputFormat);
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldColor');
|
||||
$f->attr('name', 'defaultValue');
|
||||
$f->label = $this->_('Default value');
|
||||
|
||||
$f->inputType = $field->inputType;
|
||||
$f->spectrum = $field->spectrum;
|
||||
$f->initJS = $field->initJS;
|
||||
$f->fileJS = $field->fileJS;
|
||||
$f->fileCSS = $field->fileCSS;
|
||||
$f->jqueryCore = $field->jqueryCore;
|
||||
$f->jqueryUI = $field->jqueryUI;
|
||||
$f->alpha = $field->alpha;
|
||||
|
||||
$f->description = $this->_('This value is assigned as the default for blank fields and on newly created pages.');
|
||||
$f->collapsed = Inputfield::collapsedBlank;
|
||||
$f->attr('value', strlen($field->defaultValue) ? $this->sanitizeValue($this->wire('page'), $field, $field->defaultValue) : null);
|
||||
|
||||
$inputfields->add($f);
|
||||
|
||||
return $inputfields;
|
||||
}
|
||||
|
||||
public function ___install() {
|
||||
if (function_exists("bcmod") === false && PHP_INT_SIZE < 8) {
|
||||
throw new WireException($this->_('The BCMath extension is required if your system can not handle 64-bit integer values.'));
|
||||
}
|
||||
parent::___install();
|
||||
}
|
||||
}
|
||||
9
site/modules/.FieldtypeColor/InputfieldColor.css
Normal file
9
site/modules/.FieldtypeColor/InputfieldColor.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.InputfieldColor input[type=color], input[type=color].FieldtypeColor, input[type=color]#Inputfield_defaultValue {
|
||||
height:2em;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.AdminThemeUikit .InputfieldColor input[type=color], .AdminThemeUikit input[type=color].FieldtypeColor, .AdminThemeUikit input[type=color]#Inputfield_defaultValue {
|
||||
height:40px;
|
||||
width: 100% !important;
|
||||
}
|
||||
354
site/modules/.FieldtypeColor/InputfieldColor.module
Normal file
354
site/modules/.FieldtypeColor/InputfieldColor.module
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
<?php namespace ProcessWire;
|
||||
|
||||
/**
|
||||
* ProcessWire Color Inputfield
|
||||
*
|
||||
* @author Christoph Thelen aka @kixe 2017/07/03
|
||||
* @copyright © 2017 Christoph Thelen
|
||||
* @license Licensed under GNU/GPL v3
|
||||
* @link https://processwire.com/talk/topic/...
|
||||
* @version 1.1.6
|
||||
*
|
||||
* @since 1.0.1 2017/07/05 - better validation, spectrum options modifiable
|
||||
* @since 1.0.2 2017/07/09 - added default value option
|
||||
* @since 1.0.3 2017/07/09 - added option for custom javascript
|
||||
* @since 1.0.4 2017/08/18 - made # optional for input (pattern attribute)
|
||||
* @since 1.0.5 2017/08/28 - optimized default color handling, added output format option array()
|
||||
* @since 1.0.6 2017/12/17 - modified render() for usage in modules config
|
||||
* @since 1.0.7 2017/12/17 - sync version number to fieldtype
|
||||
* @since 1.0.8 2018/08/31 - added functions getTextColor() convertColorName()
|
||||
* @since 1.0.9 2019/01/12 - fixed number format bug for rgba() and hsla() alpha channel if comma is forced as decimal separator by locale settings, added data-input-type attribute for better JS handling
|
||||
* @since 1.1.0 2019/08/12 - better input check formatColorString()
|
||||
* @since 1.1.1 2019/09/01 - fixed bug missing opacity if 0
|
||||
* @since 1.1.2 2019/09/04 - fixed bug #5 FieldtypeColor index typo in var in function RGB2HSL() thanks to @junoforno
|
||||
* @since 1.1.3 2019/10/10 - fixed bug #1 InputfieldColor - remove pattern attribute if spectrum color picker is used to prevent error in Chrome
|
||||
* @since 1.1.4 2020/05/15 switched to ProcessWire namespace
|
||||
* @since 1.1.5 2021/10/10 set field value to 0 if the color parameter is null as a result of showEmpty option enabled on spectrum, bugfix (workaround): something went wrong in javascript spectrum
|
||||
* @since 1.1.6 added option to disable alpha channel for spectrum color picker
|
||||
*
|
||||
* made for ProcessWire 3.x by Ryan Cramer
|
||||
* https://processwire.com
|
||||
*
|
||||
* @todo
|
||||
* - include i18n support provided by spectrum color picker
|
||||
*
|
||||
*/
|
||||
|
||||
class InputfieldColor extends Inputfield {
|
||||
|
||||
public static function getModuleInfo() {
|
||||
return array(
|
||||
'title' => __('Color', __FILE__), // Module Title
|
||||
'summary' => __('Inputfield for colors', __FILE__), // Module Summary
|
||||
'version' => 116,
|
||||
'href' => 'https://processwire.com/talk/topic/16679-fieldtypecolor/'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Construct
|
||||
*
|
||||
* @throws WireException
|
||||
*
|
||||
*/
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->set('icon', 'paint-brush');
|
||||
$this->setAttribute('type', 'text');
|
||||
$this->setAttribute('size', 10);
|
||||
$this->setAttribute('placeholder', '#000000');
|
||||
$this->setAttribute('pattern', '(#?[a-fA-F\d]{6})?');
|
||||
}
|
||||
|
||||
public function init() {
|
||||
$this->inputType = 0;
|
||||
$this->spectrum = '';
|
||||
$this->initJS = '';
|
||||
$this->fileJS = '';
|
||||
$this->fileCSS = '';
|
||||
$this->jqueryCore = 0;
|
||||
$this->jqueryUI = 0;
|
||||
$this->alpha = 0; // int 0, 1 will be set dependend on inputType. To disable explicitly for inputType = 3 (spectrum color picker) set bool false
|
||||
parent::init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Called before the render method
|
||||
* checking for SpectrumColorPicker
|
||||
*
|
||||
* @param Inputfield $parent
|
||||
* @param bool $renderValueMode
|
||||
* @return $this
|
||||
*
|
||||
*/
|
||||
public function renderReady(Inputfield $parent = null, $renderValueMode = false) {
|
||||
$url = $this->config->urls->get('InputfieldColor');
|
||||
switch ($this->inputType) {
|
||||
case 3:
|
||||
$this->wire('modules')->get('JqueryCore');
|
||||
$this->config->scripts->add($url . 'spectrum/spectrum.js');
|
||||
$this->config->styles->add($url . 'spectrum/spectrum.css');
|
||||
break;
|
||||
case 4:
|
||||
if ($this->jqueryCore) $this->wire('modules')->get('JqueryCore');
|
||||
if ($this->jqueryUI) $this->wire('modules')->get('JqueryUI');
|
||||
if ($this->fileJS) $this->config->scripts->add($url . $this->fileJS);
|
||||
if ($this->fileCSS) $this->config->styles->add($url . $this->fileCSS);
|
||||
break;
|
||||
}
|
||||
parent::renderReady($parent, $renderValueMode);
|
||||
}
|
||||
|
||||
/**
|
||||
* get textcolor (light or dark) corresponding to the background for better contrast
|
||||
*
|
||||
* @param int/string $bgColor expecting string or int with 6 (24bit) or 8 (32bit) digits with or without leading '#'
|
||||
* @param int/string $textColorLight default: '#fff' (white)
|
||||
* @param int/string $textColorDark default: '#000' (black)
|
||||
* @return string $color light or dark
|
||||
*
|
||||
*/
|
||||
public function getTextColor($bgColor, $textColorLight = '#fff', $textColorDark = '#000') {
|
||||
if (!is_string($bgColor)) return $textColorDark;
|
||||
else if (!ctype_xdigit(ltrim($bgColor, '#'))) {
|
||||
$bgColor = $this->convertColorName($bgColor);
|
||||
if (false === $bgColor) return $textColorDark;
|
||||
}
|
||||
$bgColor = ltrim($bgColor, '#');
|
||||
$bgColor = str_pad($bgColor,8,'f',STR_PAD_LEFT);
|
||||
$ARGB = array_map('hexdec', str_split($bgColor, 2));
|
||||
$opacity = round($ARGB[0] / 255, 2);
|
||||
if ($opacity < 0.45) return $textColorDark;
|
||||
return ($ARGB[1]+6*$ARGB[2]+$ARGB[3])*3/8 > 460? $textColorDark : $textColorLight;
|
||||
}
|
||||
|
||||
/**
|
||||
* convert color name (hex -> html, html -> hex)
|
||||
*
|
||||
* @param $color
|
||||
* @param $to convert to 'hex' or 'html'
|
||||
* @return bool/ string
|
||||
*
|
||||
*/
|
||||
public function convertColorName($color, $to = 'hex') {
|
||||
$colorArray = $this->getX11ColorArray();
|
||||
if ($to = 'hex') {
|
||||
$key = array_search($color, array_column($colorArray, 0));
|
||||
return empty($colorArray[$key][1])? false : $colorArray[$key][1];
|
||||
}
|
||||
else if ($to = 'html') {
|
||||
$key = array_search($color, array_column($colorArray, 1));
|
||||
return empty($colorArray[$key][0])? false : $colorArray[$key][0];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* get multiple array with html color names and corresponding hex codes and rgb values
|
||||
*
|
||||
* @param $domain
|
||||
* @param $path file path
|
||||
* @return boolean
|
||||
*
|
||||
*/
|
||||
protected function getX11ColorArray() {
|
||||
$path = __DIR__ .'/x11color.txt';
|
||||
if (!file_exists($path)) throw new WireException("Missing file " . $path);
|
||||
$array = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
|
||||
if ($array === false) throw new WireException("Failed to open file: $path");
|
||||
return array_map(function($e) {
|
||||
return explode("\t", $e);
|
||||
}, $array);
|
||||
}
|
||||
|
||||
public function ___render() {
|
||||
if ($this->value === "" && strlen($this->initValue)) $this->value = $this->initValue;
|
||||
if (!$this->value) $this->value = null;
|
||||
|
||||
if ($this->value) {
|
||||
$this->value = str_pad(ltrim($this->value, '#'),8,'f',STR_PAD_LEFT);
|
||||
$color32 = "#".$this->value;
|
||||
$color24 = $bgColor = "#".substr($this->value,2,6);
|
||||
$value = array_map('hexdec', str_split($this->value, 2));
|
||||
} else {
|
||||
$color32 = $color24 = null;
|
||||
$value = array(255,255,255,255);
|
||||
$bgColor = '#fff';
|
||||
}
|
||||
|
||||
$opacity = round($value[0] / 255, 2);
|
||||
$opacity = $opacity? rtrim(number_format($opacity, 2, '.', ''),'.0') : '0';
|
||||
|
||||
$textColor = $this->getTextColor($this->value);
|
||||
$rgba = "rgba($value[1], $value[2], $value[3], $opacity)";
|
||||
$this->attr('value', $color24);
|
||||
$this->attr('data-input-type', $this->inputType);
|
||||
|
||||
switch ($this->inputType) {
|
||||
case 0:
|
||||
$this->attr('type', 'color');
|
||||
break;
|
||||
case 1:
|
||||
$this->attr('style', "color: $textColor; background: $bgColor;");
|
||||
break;
|
||||
case 2:
|
||||
$this->alpha = 1;
|
||||
$this->attr('value', $color32);
|
||||
$this->attr('style', "color: $textColor; background: $bgColor; background-image: linear-gradient($rgba, $rgba), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');");
|
||||
$this->attr('placeholder', '#ff000000');
|
||||
$this->attr('pattern', '(#?[a-fA-F\d]{8})?');
|
||||
break;
|
||||
case 3:
|
||||
if ($this->alpha !== false) $this->alpha = 1;
|
||||
if (!$color32) $color32 = '#00000000';
|
||||
$this->attr('value', $color32);
|
||||
$this->attr('placeholder', '#ff000000');
|
||||
$this->removeAttr('pattern');
|
||||
break;
|
||||
case 4:
|
||||
if ($this->alpha) $this->attr('value', $color32);
|
||||
else $this->attr('value', $color24);
|
||||
}
|
||||
|
||||
$attrs = $this->getAttributes();
|
||||
|
||||
$out = "<input " . $this->getAttributesString($attrs) . " />";
|
||||
if( $this->inputType == 3) {
|
||||
$options = $this->spectrum? str_replace(array(",\n","\n"),", ", trim($this->spectrum,",\t\n\r\0\x0B")).',' : '';
|
||||
$value = $color32? $color32 : null;
|
||||
$format = $this->alpha? 'toHex8String' : 'toHexString';
|
||||
$out .= "<script>
|
||||
$(\"#$this->id\").spectrum({
|
||||
$options
|
||||
color: \"$value\",
|
||||
change: function(color) {
|
||||
if (color === null) {
|
||||
this.value = 0;
|
||||
} else {
|
||||
this.value = color.$format();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
";
|
||||
}
|
||||
if( $this->inputType == 4) {
|
||||
$value = $color32? $color32 : null;
|
||||
if ($this->initJS) {
|
||||
$initJS = str_replace(array("{value}","{id}"), array($color24, $this->id), $this->initJS);
|
||||
$out .= "<script>
|
||||
$initJS
|
||||
</script>
|
||||
";
|
||||
}
|
||||
}
|
||||
return $out;
|
||||
}
|
||||
|
||||
public function ___processInput(WireInputData $input) {
|
||||
parent::___processInput($input);
|
||||
$value = $this->attr('value');
|
||||
if (!$value) return $this;
|
||||
// bugfix (workaround): something went wrong in javascript spectrum
|
||||
if (is_string($value) && in_array($value, ['hsva(0, 0%, 0%, 0)','hsla(0, 0%, 0%, 0)','rgba(0, 0, 0, 0)'])) {
|
||||
$this->attr('value', '00000000');
|
||||
return $this;
|
||||
}
|
||||
$pattern = $this->alpha? '/#?[a-fA-F\d]{8}/' : '/#?[a-fA-F\d]{6}/';
|
||||
if(!preg_match($pattern, $value)) $this->error("Submitted value: $value does not match required pattern: $pattern.");
|
||||
return $this;
|
||||
|
||||
}
|
||||
|
||||
public function getConfigInputfields() {
|
||||
$inputfields = parent::getConfigInputfields();
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldRadios');
|
||||
$f->attr('name', 'inputType');
|
||||
$f->label = $this->_('Inputfieldtype');
|
||||
$f->addOption(0, $this->_('Inputfield type=\'color\' (HTML5 - limited browser support)'));
|
||||
$f->addOption(1, $this->_('Inputfield type=\'text\' expects 24bit hexcode strings'));
|
||||
$f->addOption(2, $this->_('Inputfield type=\'text\' expects 32bit hexcode strings (alpha channel)'));
|
||||
$f->addOption(3, $this->_('Inputfield with Spectrum Color Picker (JavaScript)'));
|
||||
$f->addOption(4, $this->_('Inputfield type=\'text\' with custom JavaScript and/or CSS'));
|
||||
$f->attr('value', $this->inputType);
|
||||
$f->description = $this->_('');
|
||||
$f->columnWidth = 50;
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldTextarea');
|
||||
$f->attr('name', 'spectrum');
|
||||
$f->attr('rows', 10);
|
||||
$f->label = $this->_('Color Picker Options');
|
||||
$f->attr('value', $this->spectrum);
|
||||
$f->description = $this->_('Set or modify options for the **Spectrum Color Picker**. [Read more ...](https://bgrins.github.io/spectrum/#options)');
|
||||
$f->notes = $this->_("One option per line in the format: 'option: value'. The options: 'color' and 'change' are used by the system and not modifiable.");
|
||||
$f->columnWidth = 50;
|
||||
$f->showIf = "inputType=3";
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldTextarea');
|
||||
$f->attr('name', 'initJS');
|
||||
$f->attr('rows', 3);
|
||||
$f->label = $this->_('Initial JS');
|
||||
$f->attr('value', $this->initJS);
|
||||
$f->description = $this->_('JavaScript code initiating your custom JS color picker. Use {id} and {value} as placeholders for the related field attributes in your selector');
|
||||
$f->notes = sprintf($this->_('{id} will be replaced by the string "%s"'), $this->id);
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$f->requiredIf = "inputType=4";
|
||||
$inputfields->add($f);
|
||||
|
||||
$rootUrl = $this->config->urls->get('InputfieldColor');
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldURL');
|
||||
$f->attr('name', 'fileJS');
|
||||
$f->label = $this->_('Include JS File');
|
||||
$f->attr('value', $this->fileJS);
|
||||
$f->description = $this->_('Set the path to your custom JavaScript file.');
|
||||
$f->notes = sprintf($this->_('URL string relative to "%s"'), $rootUrl);
|
||||
$f->columnWidth = 34;
|
||||
$f->showIf = "inputType=4";
|
||||
$f->requiredIf = "inputType=4";
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldURL');
|
||||
$f->attr('name', 'fileCSS');
|
||||
$f->label = $this->_('Include CSS File');
|
||||
$f->attr('value', $this->fileCSS);
|
||||
$f->description = $this->_('Set the path to your custom stylesheet file.');
|
||||
$f->notes = sprintf($this->_('URL string relative to "%s"'), $rootUrl);
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$f->requiredIf = "inputType=4";
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->modules->get('InputfieldCheckbox');
|
||||
$f->attr('name', 'jqueryCore');
|
||||
$f->label = __('Enable JqueryCore');
|
||||
$f->attr('checked', $this->jqueryCore ? 'checked' : '' );
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$inputfields->append($f);
|
||||
|
||||
$f = $this->modules->get('InputfieldCheckbox');
|
||||
$f->attr('name', 'jqueryUI');
|
||||
$f->label = __('Enable JqueryUI');
|
||||
$f->attr('checked', $this->jqueryUI ? 'checked' : '' );
|
||||
$f->columnWidth = 34;
|
||||
$f->showIf = "inputType=4";
|
||||
$inputfields->append($f);
|
||||
|
||||
$f = $this->modules->get('InputfieldRadios');
|
||||
$f->attr('name', 'alpha');
|
||||
$f->addOption(0, $this->_('6 digits "#ff0000"'));
|
||||
$f->addOption(1, $this->_('8 digits "#ffff0000" (leading alpha channel)'));
|
||||
$f->label = __('Select value type');
|
||||
$f->attr('value', $this->alpha);
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$inputfields->append($f);
|
||||
|
||||
return $inputfields;
|
||||
}
|
||||
}
|
||||
107
site/modules/.FieldtypeColor/README.md
Normal file
107
site/modules/.FieldtypeColor/README.md
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
FieldtypeColor
|
||||
==============
|
||||
|
||||
## Fieldtype/Inputfield for ProcessWire 3.0
|
||||
|
||||
Field that stores colors. Many options for Input (HTML5 Inputfield Color, Textfield with changing background, various jQuery/JS ColorPickers, custom jQuery/JS/CSS) and Output (RGB, RGBA, HSL, HSLA, HEX). Package includes Fieldtype Color Select.
|
||||
|
||||
## Inputfield
|
||||
Select between **5 types of Inputfields**
|
||||
|
||||
+ Html5 Inputfield of type='color' (if supported by browser)
|
||||
+ Inputfield type='text' expecting a 24bit hexcode string (RGB). Input format: *'#4496dd'*
|
||||
The background color of the input fields shows selected color
|
||||
+ Inputfield of type='text' expecting 32bit hexcode strings (RGB + alpha channel) Input format: *'#fa4496dd'*
|
||||
+ Inputfield with **Spectrum Color Picker** (JavaScript)
|
||||
Options modifiable
|
||||
+ Inputfield type='text' with **custom JavaScript** and/or CSS
|
||||
|
||||
|
||||
## Output
|
||||
|
||||
Define output format under **Details** - Tab in field settings. Select from the following options:
|
||||
|
||||
+ *string* 6-digit hex color. Example: **'#4496dd'**
|
||||
+ *string* 8-digit hex color with leading Alpha channel (limited browser support). Example: **'#fa4496dd'**
|
||||
+ *string* CSS color value **RGB**. Example: **'rgb(68, 100, 221)'**
|
||||
+ *string* CSS color value **RGBA**. Example: **'rgba(68, 100, 221, 0.98)'**
|
||||
+ *string* CSS color value **HSL**. Example: **'hsl(227, 69.2%, 56.7%)'**
|
||||
+ *string* CSS color value **HSLA**. Example: **'hsla(227, 69.2%, 56.7%, 0.98)'**
|
||||
+ *string* 32bit raw hex value. Example: **'fa4496dd'** (unformatted output value)
|
||||
+ *int 32bit*. Example: **'4198799069'** (storage value)
|
||||
+ *array(R,G,B)*
|
||||
+ *array(R,G,B,Alpha)*
|
||||
+ *array(H,S,L)*
|
||||
+ *array(H,S,L,Alpha)*
|
||||
|
||||
|
||||
```
|
||||
array(
|
||||
[0] => 0-255, // opacity
|
||||
[1],['r'] => 0-255,
|
||||
[2],['g'] => 0-255,
|
||||
[3],['b'] => 0-255,
|
||||
['rx'] => 00-ff,
|
||||
['gx'] => 00-ff,
|
||||
['bx'] => 00-ff,
|
||||
['ox'] => 00-ff, // opacity
|
||||
['o'] => 0-1 // opacity
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
## Templates & API
|
||||
You can always modify values or output format via ProcessWire API.
|
||||
|
||||
**Modify output format**
|
||||
|
||||
```
|
||||
$f = $page->fields->get('myColorField');
|
||||
$f->outputFormat = 8;
|
||||
echo $page->color['rx'];
|
||||
```
|
||||
|
||||
**Modify values**
|
||||
|
||||
+ Delete the page field value by setting empty string or *NULL*.
|
||||
+ The values (int) 0, (string) '0', '00000000' and '#00000000' are similar and stored as (int) 0 (black, full transparent).
|
||||
|
||||
```
|
||||
$page->of(false);
|
||||
$page->myColorField = 'ff0000'; // red
|
||||
$page->save('myColorField');
|
||||
```
|
||||
|
||||
## Notes
|
||||
**Deleting values** is only possible with inputfields of type='text' and via API.
|
||||
|
||||
If a **default value** is set, the field is filled with it if the field is empty (for example on newly created pages).
|
||||
If Inputfield of type='text' 32bit is selected you can set the value to '#00000000' and the default value will be ignored.
|
||||
|
||||
The Fieldtype includes
|
||||
[**Spectrum Color Picker** by Brian Grinstead](https://github.com/bgrins/spectrum)
|
||||
|
||||
Any custom Javascript based Inputfield can be used.
|
||||
|
||||
If the **Inputfield** is **used as is** e.g. for Module Settings, the following properties are provided:
|
||||
|
||||
```
|
||||
$f->wire('modules')->get('InputfieldColor);
|
||||
$f->inputType = 0; // int 0 - 4
|
||||
$f->alpha = 0; // int 0 or 1, will be set automatically dependend on inputType. To disable explicitly for inputType = 3 (spectrum color picker) set to bool false
|
||||
$f->spectrum = ''; // options for spectrum Color Picker if inputType = 3 @see https://bgrins.github.io/spectrum/
|
||||
|
||||
// properties for inputType = 4 only
|
||||
$f->initJS = ''; // initial JS
|
||||
$f->fileJS = ''; // path to JS file
|
||||
$f->fileCSS = ''; // path to CSS file
|
||||
$f->jqueryCore = 0; // enable jqueryCore
|
||||
$f->jqueryUI = 0; // enable jqueryUI
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Fieldtype Select Color Options
|
||||
==============================
|
||||
|
||||
This fieldtype is included in the package. The module is an extension of the Core **FieldtypeOptions** module and offers colors as predefined selectable options via 4 different input field types (Select, SelectMultiple, Checkboxes and Radios).
|
||||
143
site/modules/.FieldtypeColor/colornames.json
Normal file
143
site/modules/.FieldtypeColor/colornames.json
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
{
|
||||
"AliceBlue": "f0f8ff",
|
||||
"AntiqueWhite": "faebd7",
|
||||
"Aqua": "00ffff",
|
||||
"AquaMarine": "7fffd4",
|
||||
"Azure": "f0ffff",
|
||||
"Beige": "f5f5dc",
|
||||
"Bisque": "ffe4c4",
|
||||
"Black": "000000",
|
||||
"BlanchedAlmond": "ffebcd",
|
||||
"Blue": "0000ff",
|
||||
"BlueViolet": "8a2be2",
|
||||
"Brown": "a52a2a",
|
||||
"BurlyWood": "deb887",
|
||||
"CadetBlue": "5f9ea0",
|
||||
"Chartreuse": "7fff00",
|
||||
"Chocolate": "d2691e",
|
||||
"Coral": "ff7f50",
|
||||
"CornFlowerBlue": "6495ed",
|
||||
"Cornsilk": "fff8dc",
|
||||
"Crimson": "dc143c",
|
||||
"Cyan": "00ffff",
|
||||
"DarkBlue": "00008b",
|
||||
"DarkCyan": "008b8b",
|
||||
"DarkGoldenRod": "b8860b",
|
||||
"DarkGray": "a9a9a9",
|
||||
"DarkGreen": "006400",
|
||||
"DarkKhaki": "bdb76b",
|
||||
"DarkMagenta": "8b008b",
|
||||
"DarkOliveGreen": "556b2f",
|
||||
"DarkOrange": "ff8c00",
|
||||
"DarkOrchid": "9932cc",
|
||||
"DarkRed": "8b0000",
|
||||
"DarkSalmon": "e9967a",
|
||||
"DarkSeaGreen": "8fbc8f",
|
||||
"DarkSlateBlue": "483d8b",
|
||||
"DarkSlateGray": "2f4f4f",
|
||||
"DarkTurquoise": "00ced1",
|
||||
"DarkViolet": "9400d3",
|
||||
"DeepPink": "ff1493",
|
||||
"DeepSkyBlue": "00bfff",
|
||||
"DimGray": "696969",
|
||||
"DodgerBlue": "1e90ff",
|
||||
"FireBrick": "b22222",
|
||||
"FloralWhite": "fffaf0",
|
||||
"ForestGreen": "228b22",
|
||||
"Fuchsia": "ff00ff",
|
||||
"Gainsboro": "dcdcdc",
|
||||
"GhostWhite": "f8f8ff",
|
||||
"Gold": "ffd700",
|
||||
"GoldenRod": "daa520",
|
||||
"Gray": "808080",
|
||||
"Green": "008000",
|
||||
"GreenYellow": "adff2f",
|
||||
"HoneyDew": "f0fff0",
|
||||
"HotPink": "ff69b4",
|
||||
"IndianRed": "cd5c5c",
|
||||
"Indigo": "4b0082",
|
||||
"Ivory": "fffff0",
|
||||
"Khaki": "f0e68c",
|
||||
"Lavender": "e6e6fa",
|
||||
"LavenderBlush": "fff0f5",
|
||||
"LawnGreen": "7cfc00",
|
||||
"LemonChiffon": "fffacd",
|
||||
"LightBlue": "add8e6",
|
||||
"LightCoral": "f08080",
|
||||
"LightCyan": "e0ffff",
|
||||
"LightGoldenrodYellow": "fafad2",
|
||||
"LightGray": "d3d3d3",
|
||||
"LightGreen": "90ee90",
|
||||
"LightPink": "ffb6c1",
|
||||
"LightSalmon": "ffa07a",
|
||||
"LightSeaGreen": "20b2aa",
|
||||
"LightSkyBlue": "87cefa",
|
||||
"LightSlateGray": "778899",
|
||||
"LightSteelBlue": "b0c4de",
|
||||
"LightYellow": "ffffe0",
|
||||
"Lime": "00ff00",
|
||||
"LimeGreen": "32cd32",
|
||||
"Linen": "faf0e6",
|
||||
"Magenta": "ff00ff",
|
||||
"Maroon": "800000",
|
||||
"MediumAquaMarine": "66cdaa",
|
||||
"MediumBlue": "0000cd",
|
||||
"MediumOrchid": "ba55d3",
|
||||
"MediumPurple": "9370d8",
|
||||
"MediumSeaGreen": "3cb371",
|
||||
"MediumSlateBlue": "7b68ee",
|
||||
"MediumSpringGreen": "00fa9a",
|
||||
"MediumTurquoise": "48d1cc",
|
||||
"MediumVioletRed": "c71585",
|
||||
"MidnightBlue": "191970",
|
||||
"MintCream": "f5fffa",
|
||||
"MistyRose": "ffe4e1",
|
||||
"Moccasin": "ffe4b5",
|
||||
"NavajoWhite": "ffdead",
|
||||
"Navy": "000080",
|
||||
"OldLace": "fdf5e6",
|
||||
"Olive": "808000",
|
||||
"OliveDrab": "6b8e23",
|
||||
"Orange": "ffa500",
|
||||
"OrangeRed": "ff4500",
|
||||
"Orchid": "da70d6",
|
||||
"PaleGoldenRod": "eee8aa",
|
||||
"PaleGreen": "98fb98",
|
||||
"PaleTurquoise": "afeeee",
|
||||
"PaleVioletRed": "db7093",
|
||||
"PapayaWhip": "ffefd5",
|
||||
"PeachPuff": "ffdab9",
|
||||
"Peru": "cd853f",
|
||||
"Pink": "ffc0cb",
|
||||
"Plum": "dda0dd",
|
||||
"PowderBlue": "b0e0e6",
|
||||
"Purple": "800080",
|
||||
"RebeccaPurple":"663399",
|
||||
"Red": "ff0000",
|
||||
"RosyBrown": "bc8f8f",
|
||||
"RoyalBlue": "4169e1",
|
||||
"SaddleBrown": "8b4513",
|
||||
"Salmon": "fa8072",
|
||||
"SandyBrown": "f4a460",
|
||||
"SeaGreen": "2e8b57",
|
||||
"SeaShell": "fff5ee",
|
||||
"Sienna": "a0522d",
|
||||
"Silver": "c0c0c0",
|
||||
"SkyBlue": "87ceeb",
|
||||
"SlateBlue": "6a5acd",
|
||||
"SlateGray": "708090",
|
||||
"Snow": "fffafa",
|
||||
"SpringGreen": "00ff7f",
|
||||
"SteelBlue": "4682b4",
|
||||
"Tan": "d2b48c",
|
||||
"Teal": "008080",
|
||||
"Thistle": "d8bfd8",
|
||||
"Tomato": "ff6347",
|
||||
"Turquoise": "40e0d0",
|
||||
"Violet": "ee82ee",
|
||||
"Wheat": "f5deb3",
|
||||
"White": "ffffff",
|
||||
"WhiteSmoke": "f5f5f5",
|
||||
"Yellow": "ffff00",
|
||||
"YellowGreen": "9acd32"
|
||||
}
|
||||
507
site/modules/.FieldtypeColor/spectrum/spectrum.css
Normal file
507
site/modules/.FieldtypeColor/spectrum/spectrum.css
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
/***
|
||||
Spectrum Colorpicker v1.8.1
|
||||
https://github.com/bgrins/spectrum
|
||||
Author: Brian Grinstead
|
||||
License: MIT
|
||||
***/
|
||||
|
||||
.sp-container {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display:inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||
z-index: 9999994;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fix for * { box-sizing: border-box; } */
|
||||
.sp-container,
|
||||
.sp-container * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
|
||||
.sp-top {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
display:inline-block;
|
||||
}
|
||||
.sp-top-inner {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
.sp-color {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:20%;
|
||||
}
|
||||
.sp-hue {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top:33px;
|
||||
height: 77.5%;
|
||||
}
|
||||
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
.sp-sat, .sp-val {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
.sp-alpha-enabled .sp-top {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.sp-alpha-enabled .sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position:absolute;
|
||||
top:-4px;
|
||||
bottom: -4px;
|
||||
width: 6px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 8px;
|
||||
}
|
||||
.sp-alpha-inner {
|
||||
border: solid 1px #333;
|
||||
}
|
||||
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-clear.sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Don't allow text selection */
|
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select: -moz-none;
|
||||
-o-user-select:none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-input-disabled .sp-input-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-buttons-disabled .sp-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-only .sp-picker-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-disabled .sp-palette-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
|
||||
/* IE filters do not support multiple color stops.
|
||||
Generate 6 divs, line them up, and do two color gradients for each.
|
||||
Yes, really.
|
||||
*/
|
||||
.sp-1 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
|
||||
.sp-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Clearfix hack */
|
||||
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
|
||||
.sp-cf:after { clear: both; }
|
||||
.sp-cf { *zoom: 1; }
|
||||
|
||||
/* Mobile devices, make hue slider bigger so it is easier to slide */
|
||||
@media (max-device-width: 480px) {
|
||||
.sp-color { right: 40%; }
|
||||
.sp-hue { left: 63%; }
|
||||
.sp-fill { padding-top: 60%; }
|
||||
}
|
||||
.sp-dragger {
|
||||
border-radius: 5px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top:0;
|
||||
cursor:pointer;
|
||||
height: 3px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
border: 1px solid #000;
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
/*
|
||||
Theme authors:
|
||||
Here are the basic themeable display options (colors, fonts, global widths).
|
||||
See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
*/
|
||||
|
||||
.sp-container {
|
||||
border-radius: 0;
|
||||
background-color: #ECECEC;
|
||||
border: solid 1px #f0c49B;
|
||||
padding: 0;
|
||||
}
|
||||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
|
||||
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sp-top {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.sp-color, .sp-hue, .sp-clear {
|
||||
border: solid 1px #666;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.sp-input-container {
|
||||
float:right;
|
||||
width: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sp-initial-disabled .sp-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
.sp-input {
|
||||
font-size: 12px !important;
|
||||
border: 1px inset;
|
||||
padding: 4px 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background:transparent;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
}
|
||||
.sp-input:focus {
|
||||
border: 1px solid orange;
|
||||
}
|
||||
.sp-input.sp-validation-error {
|
||||
border: 1px solid red;
|
||||
background: #fdd;
|
||||
}
|
||||
.sp-picker-container , .sp-palette-container {
|
||||
float:left;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-bottom: 300px;
|
||||
margin-bottom: -290px;
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: 172px;
|
||||
border-left: solid 1px #fff;
|
||||
}
|
||||
|
||||
/* Palettes */
|
||||
.sp-palette-container {
|
||||
border-right: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.sp-palette-only .sp-palette-container {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-el {
|
||||
display: block;
|
||||
position:relative;
|
||||
float:left;
|
||||
width: 24px;
|
||||
height: 15px;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
border:solid 2px transparent;
|
||||
}
|
||||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
border-color: orange;
|
||||
}
|
||||
.sp-thumb-el {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.sp-initial {
|
||||
float: left;
|
||||
border: solid 1px #333;
|
||||
}
|
||||
.sp-initial span {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border:none;
|
||||
display:block;
|
||||
float:left;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.sp-initial .sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
.sp-replacer {
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
padding: 4px;
|
||||
display:inline-block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
border: solid 1px #91765d;
|
||||
background: #eee;
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
border-color: #F0C49B;
|
||||
color: #111;
|
||||
}
|
||||
.sp-replacer.sp-disabled {
|
||||
cursor:default;
|
||||
border-color: silver;
|
||||
color: silver;
|
||||
}
|
||||
.sp-dd {
|
||||
padding: 2px 0;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
float:left;
|
||||
font-size:10px;
|
||||
}
|
||||
.sp-preview {
|
||||
position:relative;
|
||||
width:25px;
|
||||
height: 20px;
|
||||
border: solid 1px #222;
|
||||
margin-right: 5px;
|
||||
float:left;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sp-palette {
|
||||
*width: 220px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.sp-palette .sp-thumb-el {
|
||||
width:16px;
|
||||
height: 16px;
|
||||
margin:2px 1px;
|
||||
border: solid 1px #d0d0d0;
|
||||
}
|
||||
|
||||
.sp-container {
|
||||
padding-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/* Buttons: http://hellohappy.org/css3-buttons/ */
|
||||
.sp-container button {
|
||||
background-color: #eeeeee;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 5px 4px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-container button:hover {
|
||||
background-color: #dddddd;
|
||||
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
|
||||
border: 1px solid #bbb;
|
||||
border-bottom: 1px solid #999;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #ddd;
|
||||
}
|
||||
.sp-container button:active {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: 1px solid #888;
|
||||
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
}
|
||||
.sp-cancel {
|
||||
font-size: 11px;
|
||||
color: #d93f3f !important;
|
||||
margin:0;
|
||||
padding:2px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
.sp-cancel:hover {
|
||||
color: #d93f3f !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.sp-preview, .sp-alpha, .sp-thumb-el {
|
||||
position:relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-inner {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-clear-display {
|
||||
background-repeat:no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
|
||||
}
|
||||
2341
site/modules/.FieldtypeColor/spectrum/spectrum.js
Normal file
2341
site/modules/.FieldtypeColor/spectrum/spectrum.js
Normal file
File diff suppressed because it is too large
Load diff
143
site/modules/.FieldtypeColor/x11color.txt
Normal file
143
site/modules/.FieldtypeColor/x11color.txt
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
indianred #CD5C5C 205,92,92
|
||||
lightcoral #F08080 240,128,128
|
||||
salmon #FA8072 250,128,114
|
||||
darksalmon #E9967A 233,150,122
|
||||
lightsalmon #FFA07A 255,160,122
|
||||
crimson #DC143C 220,20,60
|
||||
red #FF0000 255,0,0
|
||||
firebrick #B22222 178,34,34
|
||||
darkred #8B0000 139,0,0
|
||||
pink #FFC0CB 255,192,203
|
||||
lightpink #FFB6C1 255,182,193
|
||||
hotpink #FF69B4 255,105,180
|
||||
deeppink #FF1493 255,20,147
|
||||
mediumvioletred #C71585 199,21,133
|
||||
palevioletred #DB7093 219,112,147
|
||||
lightsalmon #FFA07A 255,160,122
|
||||
coral #FF7F50 255,127,80
|
||||
tomato #FF6347 255,99,71
|
||||
orangered #FF4500 255,69,0
|
||||
darkorange #FF8C00 255,140,0
|
||||
orange #FFA500 255,165,0
|
||||
gold #FFD700 255,215,0
|
||||
yellow #FFFF00 255,255,0
|
||||
lightyellow #FFFFE0 255,255,224
|
||||
lemonchiffon #FFFACD 255,250,205
|
||||
lightgoldenrodyellow #FAFAD2 250,250,210
|
||||
papayawhip #FFEFD5 255,239,213
|
||||
moccasin #FFE4B5 255,228,181
|
||||
peachpuff #FFDAB9 255,218,185
|
||||
palegoldenrod #EEE8AA 238,232,170
|
||||
khaki #F0E68C 240,230,140
|
||||
darkkhaki #BDB76B 189,183,107
|
||||
lavender #E6E6FA 230,230,250
|
||||
thistle #D8BFD8 216,191,216
|
||||
plum #DDA0DD 221,160,221
|
||||
violet #EE82EE 238,130,238
|
||||
orchid #DA70D6 218,112,214
|
||||
fuchsia #FF00FF 255,0,255
|
||||
magenta #FF00FF 255,0,255
|
||||
mediumorchid #BA55D3 186,85,211
|
||||
mediumpurple #9370DB 147,112,219
|
||||
blueviolet #8A2BE2 138,43,226
|
||||
darkviolet #9400D3 148,0,211
|
||||
darkorchid #9932CC 153,50,204
|
||||
darkmagenta #8B008B 139,0,139
|
||||
purple #800080 128,0,128
|
||||
indigo #4B0082 75,0,130
|
||||
slateblue #6A5ACD 106,90,205
|
||||
darkslateblue #483D8B 72,61,139
|
||||
mediumslateblue #7B68EE 123,104,238
|
||||
greenyellow #ADFF2F 173,255,47
|
||||
chartreuse #7FFF00 127,255,0
|
||||
lawngreen #7CFC00 124,252,0
|
||||
lime #00FF00 0,255,0
|
||||
limegreen #32CD32 50,205,50
|
||||
palegreen #98FB98 152,251,152
|
||||
lightgreen #90EE90 144,238,144
|
||||
mediumspringgreen #00FA9A 0,250,154
|
||||
springgreen #00FF7F 0,255,127
|
||||
mediumseagreen #3CB371 60,179,113
|
||||
seagreen #2E8B57 46,139,87
|
||||
forestgreen #228B22 34,139,34
|
||||
green #008000 0,128,0
|
||||
darkgreen #006400 0,100,0
|
||||
yellowgreen #9ACD32 154,205,50
|
||||
olivedrab #6B8E23 107,142,35
|
||||
olive #808000 128,128,0
|
||||
darkolivegreen #556B2F 85,107,47
|
||||
mediumaquamarine #66CDAA 102,205,170
|
||||
darkseagreen #8FBC8F 143,188,143
|
||||
lightseagreen #20B2AA 32,178,170
|
||||
darkcyan #008B8B 0,139,139
|
||||
teal #008080 0,128,128
|
||||
aqua #00FFFF 0,255,255
|
||||
cyan #00FFFF 0,255,255
|
||||
lightcyan #E0FFFF 224,255,255
|
||||
paleturquoise #AFEEEE 175,238,238
|
||||
aquamarine #7FFFD4 127,255,212
|
||||
turquoise #40E0D0 64,224,208
|
||||
mediumturquoise #48D1CC 72,209,204
|
||||
darkturquoise #00CED1 0,206,209
|
||||
cadetblue #5F9EA0 95,158,160
|
||||
steelblue #4682B4 70,130,180
|
||||
lightsteelblue #B0C4DE 176,196,222
|
||||
powderblue #B0E0E6 176,224,230
|
||||
lightblue #ADD8E6 173,216,230
|
||||
skyblue #87CEEB 135,206,235
|
||||
lightskyblue #87CEFA 135,206,250
|
||||
deepskyblue #00BFFF 0,191,255
|
||||
dodgerblue #1E90FF 30,144,255
|
||||
cornflowerblue #6495ED 100,149,237
|
||||
mediumslateblue #7B68EE 123,104,238
|
||||
royalblue #4169E1 65,105,225
|
||||
blue #0000FF 0,0,255
|
||||
mediumblue #0000CD 0,0,205
|
||||
darkblue #00008B 0,0,139
|
||||
navy #000080 0,0,128
|
||||
midnightblue #191970 25,25,112
|
||||
cornsilk #FFF8DC 255,248,220
|
||||
blanchedalmond #FFEBCD 255,235,205
|
||||
bisque #FFE4C4 255,228,196
|
||||
navajowhite #FFDEAD 255,222,173
|
||||
wheat #F5DEB3 245,222,179
|
||||
burlywood #DEB887 222,184,135
|
||||
tan #D2B48C 210,180,140
|
||||
rosybrown #BC8F8F 188,143,143
|
||||
sandybrown #F4A460 244,164,96
|
||||
goldenrod #DAA520 218,165,32
|
||||
darkgoldenrod #B8860B 184,134,11
|
||||
peru #CD853F 205,133,63
|
||||
chocolate #D2691E 210,105,30
|
||||
saddlebrown #8B4513 139,69,19
|
||||
sienna #A0522D 160,82,45
|
||||
brown #A52A2A 165,42,42
|
||||
maroon #800000 128,0,0
|
||||
white #FFFFFF 255,255,255
|
||||
snow #FFFAFA 255,250,250
|
||||
honeydew #F0FFF0 240,255,240
|
||||
mintcream #F5FFFA 245,255,250
|
||||
azure #F0FFFF 240,255,255
|
||||
aliceblue #F0F8FF 240,248,255
|
||||
ghostwhite #F8F8FF 248,248,255
|
||||
whitesmoke #F5F5F5 245,245,245
|
||||
seashell #FFF5EE 255,245,238
|
||||
beige #F5F5DC 245,245,220
|
||||
oldlace #FDF5E6 253,245,230
|
||||
floralwhite #FFFAF0 255,250,240
|
||||
ivory #FFFFF0 255,255,240
|
||||
antiquewhite #FAEBD7 250,235,215
|
||||
linen #FAF0E6 250,240,230
|
||||
lavenderblush #FFF0F5 255,240,245
|
||||
mistyrose #FFE4E1 255,228,225
|
||||
gainsboro #DCDCDC 220,220,220
|
||||
lightgrey #D3D3D3 211,211,211
|
||||
silver #C0C0C0 192,192,192
|
||||
darkgray #A9A9A9 169,169,169
|
||||
gray #808080 128,128,128
|
||||
dimgray #696969 105,105,105
|
||||
lightslategray #778899 119,136,153
|
||||
slategray #708090 112,128,144
|
||||
darkslategray #2F4F4F 47,79,79
|
||||
black #000000 0,0,0
|
||||
rebeccapurple #663399 102,51,153
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* ProcessWire ColorPicker Fieldtype
|
||||
*
|
||||
* created by Philipp "Soma" Urlich
|
||||
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
|
||||
*
|
||||
* additions (swatches) by @Rayden
|
||||
*
|
||||
* Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
|
||||
*
|
||||
*/
|
||||
|
||||
class FieldtypeColorPicker extends Fieldtype {
|
||||
|
||||
const TRANSPARENT = "transparent";
|
||||
const HEX_PREFIX = "#";
|
||||
|
||||
public static function getModuleInfo() {
|
||||
return array(
|
||||
'title' => 'ColorPicker',
|
||||
'version' => 203,
|
||||
'summary' => 'Fieldtype that stores a HEX color or the value transp. Color can be picked using a jQuery ColorPicker Plugin by http://www.eyecon.ro/colorpicker/ or from a configurable color swatch.',
|
||||
'href' => 'http://processwire.com/talk/topic/865-module-colorpicker/page__gopid__7340#entry7340',
|
||||
'installs' => 'InputfieldColorPicker'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the default or if not set a blank value
|
||||
*
|
||||
*/
|
||||
public function getBlankValue(Page $page, Field $field) {
|
||||
if($field->default == "0") $field->default = "000000";
|
||||
return $field->default ? $field->default : '';
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return the associated InputfieldColorPicker
|
||||
*
|
||||
*/
|
||||
public function getInputfield(Page $page, Field $field) {
|
||||
$inputField = $this->modules->get('InputfieldColorPicker');
|
||||
$inputField->set('default', $field->default);
|
||||
$inputField->set('swatch', $field->swatch);
|
||||
return $inputField;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format the value for output
|
||||
* @param Page $page
|
||||
* @param Field $field
|
||||
* @param mixed $value
|
||||
* @return string
|
||||
*/
|
||||
public function ___formatValue(Page $page, Field $field, $value){
|
||||
|
||||
if(!$value) $value = trim($field->default);
|
||||
if(!strlen($value)) return $value;
|
||||
if(!$field->formatting) return $value;
|
||||
|
||||
if("transp" == strtolower($value)) return self::TRANSPARENT;
|
||||
if($value == "0") $value = "000000";
|
||||
|
||||
return self::HEX_PREFIX . $value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render formatted markup for use in Admin ie. Lister
|
||||
*/
|
||||
public function ___markupValue(Page $page, Field $field, $value = null, $property = '') {
|
||||
$m = "";
|
||||
if($value) {
|
||||
$m = "<span class='Markup_{$this->className}' style='width: 1em; height: 1em; display: inline-block; background-color:#" . $value . "'></span>";
|
||||
}
|
||||
return $m;
|
||||
}
|
||||
|
||||
/**
|
||||
* sanitize the HEX value and cut off characters if longer than 6
|
||||
*/
|
||||
public function sanitizeValue(Page $page, Field $field, $value) {
|
||||
$value = $value == "transp" ? $value : strtoupper(substr($value, 0, 6));
|
||||
return $value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the database schema in specified format
|
||||
*
|
||||
*/
|
||||
public function getDatabaseSchema(Field $field) {
|
||||
$schema = parent::getDatabaseSchema($field);
|
||||
$schema['data'] = 'CHAR(6) NOT NULL'; // i.e. FFFFFF or 333333 (hex color codes) or transp
|
||||
return $schema;
|
||||
}
|
||||
|
||||
/**
|
||||
* set the config option fields for this field
|
||||
*
|
||||
*/
|
||||
public function ___getConfigInputfields(Field $field) {
|
||||
$inputfields = parent::___getConfigInputfields($field);
|
||||
|
||||
$f = $this->modules->get("InputfieldText");
|
||||
$f->attr('name', 'default');
|
||||
$f->attr('size', 6);
|
||||
$f->attr('value', $field->default);
|
||||
$f->label = $this->_('Default Value');
|
||||
$f->description = $this->_('Set the default HEX value or "transp" (transparent) for the field.');
|
||||
$f->notes = $this->_('For example "EAEAEA". To have a blank value leave this field empty.');
|
||||
$inputfields->append($f);
|
||||
|
||||
/* additions (swatches) by @Rayden */
|
||||
$f = $this->modules->get("InputfieldTextarea");
|
||||
$f->attr('name', 'swatch');
|
||||
$f->attr('value', $field->swatch);
|
||||
$f->label = $this->_('Color Swatch');
|
||||
$f->description = $this->_('Comma seperated HEX values or "transp" (transparent) to add color swatches for each.');
|
||||
$f->notes = $this->_('For example "transp,FFFFFF,000000". Leave this field empty if you do not want to use the color swatch.');
|
||||
$inputfields->append($f);
|
||||
|
||||
$f = $this->modules->get("InputfieldCheckbox");
|
||||
$f->attr('name', 'formatting');
|
||||
$f->attr('value', $field->formatting);
|
||||
$f->attr('checked', $field->formatting ? 'checked' : '');
|
||||
$f->label = $this->_('Turn on output formatting');
|
||||
$f->description = $this->_('Enabling this turns on output formatting for this field. This will return the HEX value of the field already prefixed with "#" for convenience i.e "#FFAADD" and "transp" will be output as "transparent".');;
|
||||
$inputfields->append($f);
|
||||
|
||||
return $inputfields;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
/**
|
||||
* An Inputfieldtype for handling Colors
|
||||
* used by the FieldtypeColorPicker/InputfieldColorPicker
|
||||
*
|
||||
* created by Philipp "Soma" Urlich
|
||||
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
|
||||
*
|
||||
* Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
|
||||
*
|
||||
*/
|
||||
|
||||
;
|
||||
|
||||
(function(document, $){
|
||||
|
||||
var InputfieldColorPicker = {
|
||||
|
||||
init: function() {
|
||||
|
||||
$('div[id^=ColorPicker_]:not(.colorpicker_loaded)').each(function(){
|
||||
var $colorpicker = $(this);
|
||||
console.log("init colorpicker" + $colorpicker);
|
||||
|
||||
$colorpicker.ColorPicker({
|
||||
color: $(this).data('color').toString(),
|
||||
onShow: function (colpkr) {
|
||||
$(colpkr).fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
onHide: function (colpkr) {
|
||||
$(colpkr).fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
onChange: function (hsb, hex, rgb) {
|
||||
$colorpicker.css('backgroundColor', '#' + hex);
|
||||
$colorpicker.css('background-image', 'none');
|
||||
$colorpicker.next('input').val(hex).trigger('change');
|
||||
}
|
||||
});
|
||||
|
||||
$colorpicker.addClass("colorpicker_loaded");
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
attachEvents: function() {
|
||||
$(document).on('click', 'a.ColorPickerReset', function(e){
|
||||
e.preventDefault();
|
||||
var color = $(this).data('default') && $(this).data('default') != 'transp' ? '#' + $(this).data('default').toString() : 'transparent';
|
||||
$(this).parent().find('input').val($(this).data('default')).trigger('change');
|
||||
$(this).parent().find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('default').toString());
|
||||
$(this).parent().find('div[id^=ColorPicker_]')
|
||||
.css('backgroundColor', color)
|
||||
.css('background-image', 'none')
|
||||
.attr('data-color', $(this).data('default').toString());
|
||||
if(color == 'transparent') {
|
||||
var modurl = $(this).data('modurl');
|
||||
$(this).parent().find('div[id^=ColorPicker_]')
|
||||
.css('background-image', 'url(' + modurl + 'transparent.gif)');
|
||||
}
|
||||
});
|
||||
|
||||
/* additions (swatches) by @Rayden */
|
||||
$(document).on('click', 'div.ColorPickerSwatch',function(e){
|
||||
e.preventDefault();
|
||||
var color = $(this).data('color') && $(this).data('color') != 'transp' ? '#' + $(this).data('color').toString() : 'transparent';
|
||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('input').val($(this).data('color')).trigger('change');
|
||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('color').toString());
|
||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
|
||||
.css('backgroundColor', color)
|
||||
.css('background-image', 'none')
|
||||
.attr('data-color', $(this).data('color').toString());
|
||||
if(color == 'transparent') {
|
||||
var modurl = $(this).closest('.ui-widget-content, .InputfieldContent').find('.ColorPickerReset').data('modurl');
|
||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
|
||||
.css('background-image', 'url(' + modurl + 'transparent.gif)');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// document ready
|
||||
$(function(){
|
||||
InputfieldColorPicker.init();
|
||||
InputfieldColorPicker.attachEvents();
|
||||
$(".Inputfield").on("repeateradd", ".InputfieldRepeater", InputfieldColorPicker.init);
|
||||
$(".Inputfield").on("reloaded", ".InputfieldRepeater", function(){
|
||||
InputfieldColorPicker.init();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}(document, jQuery));
|
||||
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* An Inputfieldtype for handling Colors
|
||||
* used by the FieldtypeColorPicker
|
||||
*
|
||||
* created by Philipp "Soma" Urlich
|
||||
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
|
||||
*
|
||||
* additions (swatches) by @Rayden
|
||||
*
|
||||
* Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
|
||||
*
|
||||
*/
|
||||
|
||||
class InputfieldColorPicker extends Inputfield {
|
||||
|
||||
public static function getModuleInfo() {
|
||||
return array(
|
||||
'title' => 'ColorPicker',
|
||||
'version' => 203,
|
||||
'summary' => 'Choose your colors the easy way.',
|
||||
'href' => 'http://processwire.com/talk/topic/865-module-colorpicker/page__gopid__7340#entry7340',
|
||||
'requires' => array("FieldtypeColorPicker")
|
||||
);
|
||||
}
|
||||
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->setAttribute('type', 'hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* inputfield is loaded
|
||||
*/
|
||||
public function init() {
|
||||
parent::init();
|
||||
$conf = $this->getModuleInfo();
|
||||
$version = (int) $conf['version'];
|
||||
// append script needed for the inputfield
|
||||
$this->config->styles->add($this->config->urls->InputfieldColorPicker . "colorpicker/css/colorpicker.css?v={$version}");
|
||||
$this->config->scripts->add($this->config->urls->InputfieldColorPicker . "colorpicker/js/colorpicker.min.js?v={$version}");
|
||||
}
|
||||
|
||||
/**
|
||||
* render the markup for this iputfield
|
||||
* @return string html markup
|
||||
*/
|
||||
public function ___render() {
|
||||
|
||||
$out = "\n<div id='ColorPicker_$this->name' style='border:2px solid #444; display:block;";
|
||||
$out .= "width:40px; height:40px; background-color:";
|
||||
$out .= $this->value == "transp"
|
||||
? $this->value . "; background-image:url({$this->config->urls->InputfieldColorPicker}transparent.gif);"
|
||||
: "#" . $this->value . "; background-image:none";
|
||||
$out .= "' data-color='" . $this->value . "'></div>";
|
||||
$out .= "<input " . $this->getAttributesString() . " />";
|
||||
if($this->default == "0") $this->default = "000000";
|
||||
$out .= "<a class='ColorPickerReset' href='#' data-default='{$this->default}' ";
|
||||
$out .= "data-modurl='{$this->config->urls->InputfieldColorPicker}'>" . $this->_('reset color') . "</a>";
|
||||
|
||||
/**
|
||||
* add swatches for predefined color values | @Rayden
|
||||
*/
|
||||
$swatch = trim($this->swatch);
|
||||
|
||||
if(strlen($swatch)) {
|
||||
|
||||
$csvalues = explode(",", trim($swatch));
|
||||
|
||||
if(count($csvalues)) {
|
||||
|
||||
$out .= "<ul style='list-style-type: none; margin: 1em 0 0; padding: 0; overflow: hidden'>";
|
||||
|
||||
foreach($csvalues as $csvalue) {
|
||||
$csvalue = trim($csvalue);
|
||||
if($csvalue == "0") $csvalue = "000000";
|
||||
$out .= "<li style='display: inline-block; float:left; margin:0 4px 4px 0; border:1px solid #444; width:24px; height:24px; background-color:";
|
||||
$out .= $csvalue == "transp"
|
||||
? $csvalue . ";background-image:url({$this->config->urls->InputfieldColorPicker}transparent.gif);"
|
||||
: "#" . $csvalue;
|
||||
$out .= "'><div class='ColorPickerSwatch' href='#' data-color='{$csvalue}' style='width:24px;height:24px;display:block;cursor:pointer;' title='{$csvalue}'></div></li>";
|
||||
}
|
||||
|
||||
$out .= "</ul>";
|
||||
}
|
||||
}
|
||||
|
||||
return $out;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
ColorPicker
|
||||
=====================
|
||||
|
||||
**Custom Fieldtype/Inputfield for ProcessWire 2.+/3.+**
|
||||
|
||||
This module gives you a new custom Fieldtype. Let's you select a color using a Colorpicker jQuery Plugin. The color selected will be stored in HEX format uppercase: "EAEAEA";
|
||||
|
||||
When creating a new field in the admin, you can set a default value. The default value will be set when creating a new page, and it will also be used for empty fields.
|
||||
|
||||
The field supports a transparent value. In the field setting you can use the name "transp" to define it. When output formatting (2.0.0) of the field is enabled, the field will return "transparent" in template code.
|
||||
|
||||
The field supports a "reset" button to be able to set it back to the default value.
|
||||
|
||||
### How to use it
|
||||
|
||||
To use it in your template as a background HEX color, you'd simple output the value and prefix it with a #:
|
||||
|
||||
```
|
||||
echo "background-color: #" . $page->color;
|
||||
```
|
||||
|
||||
Since of 2.0.0 you can enable output formatting of the field in the details settings. When enabled it will format value directly from AADDEE to "#AADDEE" and "transp" to "transparent".
|
||||
|
||||
```
|
||||
echo "background-color: " . $page->color;
|
||||
```
|
||||
|
||||
The colorpicker used:
|
||||
[ColorPicker jQuery Plugin by Eyecon](http://www.eyecon.ro/colorpicker/)
|
||||
|
||||
### Changelog
|
||||
|
||||
**2.0.2**
|
||||
|
||||
- fixed issue when field is in a Repeater or RepeaterMatrix
|
||||
- added support for ___markupValue() used in Lister
|
||||
|
||||
|
||||
**2.0.1**
|
||||
|
||||
- Fixed default "000000" value issue in Fieldtype
|
||||
|
||||
**2.0.0**
|
||||
|
||||
- Added output formatting option to format values with prefix "#" when output in template code.
|
||||
- Added checks for "0" values and returning them as "000000", just in case ProcessWire converts them to 0.
|
||||
|
||||
**1.0.8**
|
||||
|
||||
- some maintenance, remove <p> not needed
|
||||
- remove overflow: auto
|
||||
_ colorpicker css fix input with box sizing coming from new admin theme
|
||||
|
||||
**1.0.7**
|
||||
|
||||
- fixed typecasting bug: when a color value is numeric it should be
|
||||
typecasted to string. This prevents the color picker window from not
|
||||
being launched. @Rayden
|
||||
- fixed small visualisation issue with the color swatch preventing a
|
||||
box collapse with css. @Rayden
|
||||
|
||||
**1.0.6**
|
||||
|
||||
- added support for color swatches for easy predefining and selecting color values @Rayden
|
||||
- added "transp" support for a transparent value (empty)
|
||||
|
||||
**1.0.5**
|
||||
|
||||
- fix bug with default value
|
||||
|
||||
**1.0.4**
|
||||
|
||||
- fix bug when used in repeaters
|
||||
|
||||
**1.0.3**
|
||||
|
||||
- added support for default value
|
||||
- added reset link to set back to default color
|
||||
|
||||
**1.0.2**
|
||||
|
||||
- Fixed issue with colorpicker not working when used in tabs
|
||||
|
||||
**1.0.1**
|
||||
|
||||
- Remove lots of code not needed. Cleanup.
|
||||
|
||||
**1.0.0**
|
||||
|
||||
- Initial Stable Release.
|
||||
|
||||
|
||||
### How to install:
|
||||
|
||||
- Download the contents of this repository and put the folder renamed as "ColorPicker" into your site/modules/ folder
|
||||
- Login to processwire and got to Modules page and click "Check for new modules". You should see a note that two new modules were found. Install the FieldtypeColorPicker module under "Field" section. This will also install the required InputfieldColorPicker at the same time.
|
||||
- Done
|
||||
- You can now create a new field with the "ColorPicker" Fieldtype.
|
||||
|
||||
|
||||
|
||||
BIN
site/modules/ColorPicker/colorpicker/.DS_Store
vendored
BIN
site/modules/ColorPicker/colorpicker/.DS_Store
vendored
Binary file not shown.
|
|
@ -1,164 +0,0 @@
|
|||
|
||||
.colorpicker {
|
||||
width: 356px;
|
||||
height: 176px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background: url(../images/colorpicker_background.png);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: none;
|
||||
z-index:1;
|
||||
}
|
||||
.colorpicker_color {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 14px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
background: #f00;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.colorpicker_color div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(../images/colorpicker_overlay.png);
|
||||
}
|
||||
.colorpicker_color div div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
overflow: hidden;
|
||||
background: url(../images/colorpicker_select.gif);
|
||||
margin: -5px 0 0 -5px;
|
||||
}
|
||||
.colorpicker_hue {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 171px;
|
||||
width: 35px;
|
||||
height: 150px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colorpicker_hue div {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 9px;
|
||||
overflow: hidden;
|
||||
background: url(../images/colorpicker_indic.gif) left top;
|
||||
margin: -4px 0 0 0;
|
||||
left: 0px;
|
||||
}
|
||||
.colorpicker_new_color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 213px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker_current_color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 283px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker input {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #898989;
|
||||
top: 4px;
|
||||
right: 11px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 15px;
|
||||
|
||||
}
|
||||
.colorpicker_hex {
|
||||
position: absolute;
|
||||
width: 72px;
|
||||
height: 22px;
|
||||
background: url(../images/colorpicker_hex.png) top;
|
||||
left: 212px;
|
||||
top: 142px;
|
||||
}
|
||||
.colorpicker_hex input {
|
||||
right: 6px;
|
||||
}
|
||||
.colorpicker_field {
|
||||
height: 22px;
|
||||
width: 62px;
|
||||
background-position: top;
|
||||
position: absolute;
|
||||
}
|
||||
.colorpicker_field span {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colorpicker_rgb_r {
|
||||
background-image: url(../images/colorpicker_rgb_r.png);
|
||||
top: 52px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker_rgb_g {
|
||||
background-image: url(../images/colorpicker_rgb_g.png);
|
||||
top: 82px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker_rgb_b {
|
||||
background-image: url(../images/colorpicker_rgb_b.png);
|
||||
top: 112px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker_hsb_h {
|
||||
background-image: url(../images/colorpicker_hsb_h.png);
|
||||
top: 52px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker_hsb_s {
|
||||
background-image: url(../images/colorpicker_hsb_s.png);
|
||||
top: 82px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker_hsb_b {
|
||||
background-image: url(../images/colorpicker_hsb_b.png);
|
||||
top: 112px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker_submit {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(../images/colorpicker_submit.png) top;
|
||||
left: 322px;
|
||||
top: 142px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.colorpicker_focus {
|
||||
background-position: center;
|
||||
}
|
||||
.colorpicker_hex.colorpicker_focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.colorpicker_submit.colorpicker_focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.colorpicker_slider {
|
||||
background-position: bottom;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 49 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 532 B |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,012 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Binary file not shown.
|
Before Width: | Height: | Size: 984 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 562 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,008 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1,018 B |
Binary file not shown.
|
Before Width: | Height: | Size: 997 B |
Binary file not shown.
|
Before Width: | Height: | Size: 506 B |
Binary file not shown.
|
Before Width: | Height: | Size: 518 B |
Binary file not shown.
|
Before Width: | Height: | Size: 315 B |
|
|
@ -1,484 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Color picker
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
var ColorPicker = function () {
|
||||
var
|
||||
ids = {},
|
||||
inAction,
|
||||
charMin = 65,
|
||||
visible,
|
||||
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
|
||||
defaults = {
|
||||
eventName: 'click',
|
||||
onShow: function () {},
|
||||
onBeforeShow: function(){},
|
||||
onHide: function () {},
|
||||
onChange: function () {},
|
||||
onSubmit: function () {},
|
||||
color: 'ff0000',
|
||||
livePreview: true,
|
||||
flat: false
|
||||
},
|
||||
fillRGBFields = function (hsb, cal) {
|
||||
var rgb = HSBToRGB(hsb);
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(1).val(rgb.r).end()
|
||||
.eq(2).val(rgb.g).end()
|
||||
.eq(3).val(rgb.b).end();
|
||||
},
|
||||
fillHSBFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(4).val(hsb.h).end()
|
||||
.eq(5).val(hsb.s).end()
|
||||
.eq(6).val(hsb.b).end();
|
||||
},
|
||||
fillHexFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(0).val(HSBToHex(hsb)).end();
|
||||
},
|
||||
setSelector = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
||||
$(cal).data('colorpicker').selectorIndic.css({
|
||||
left: parseInt(150 * hsb.s/100, 10),
|
||||
top: parseInt(150 * (100-hsb.b)/100, 10)
|
||||
});
|
||||
},
|
||||
setHue = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
||||
},
|
||||
setCurrentColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
setNewColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
keyDown = function (ev) {
|
||||
var pressedKey = ev.charCode || ev.keyCode || -1;
|
||||
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
||||
return false;
|
||||
}
|
||||
var cal = $(this).parent().parent();
|
||||
if (cal.data('colorpicker').livePreview === true) {
|
||||
change.apply(this);
|
||||
}
|
||||
},
|
||||
change = function (ev) {
|
||||
var cal = $(this).parent().parent(), col;
|
||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
||||
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
||||
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
||||
cal.data('colorpicker').color = col = fixHSB({
|
||||
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
||||
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
||||
});
|
||||
} else {
|
||||
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
||||
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
||||
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
||||
}));
|
||||
}
|
||||
if (ev) {
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
}
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
||||
},
|
||||
blur = function (ev) {
|
||||
var cal = $(this).parent().parent();
|
||||
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
||||
},
|
||||
focus = function () {
|
||||
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
||||
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
||||
$(this).parent().addClass('colorpicker_focus');
|
||||
},
|
||||
downIncrement = function (ev) {
|
||||
var field = $(this).parent().find('input').focus();
|
||||
var current = {
|
||||
el: $(this).parent().addClass('colorpicker_slider'),
|
||||
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
||||
y: ev.pageY,
|
||||
field: field,
|
||||
val: parseInt(field.val(), 10),
|
||||
preview: $(this).parent().parent().data('colorpicker').livePreview
|
||||
};
|
||||
$(document).bind('mouseup', current, upIncrement);
|
||||
$(document).bind('mousemove', current, moveIncrement);
|
||||
},
|
||||
moveIncrement = function (ev) {
|
||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
||||
if (ev.data.preview) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
upIncrement = function (ev) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
|
||||
$(document).unbind('mouseup', upIncrement);
|
||||
$(document).unbind('mousemove', moveIncrement);
|
||||
return false;
|
||||
},
|
||||
downHue = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
y: $(this).offset().top
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upHue);
|
||||
$(document).bind('mousemove', current, moveHue);
|
||||
},
|
||||
moveHue = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(4)
|
||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upHue = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upHue);
|
||||
$(document).unbind('mousemove', moveHue);
|
||||
return false;
|
||||
},
|
||||
downSelector = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
pos: $(this).offset()
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upSelector);
|
||||
$(document).bind('mousemove', current, moveSelector);
|
||||
},
|
||||
moveSelector = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(6)
|
||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
||||
.end()
|
||||
.eq(5)
|
||||
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upSelector = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upSelector);
|
||||
$(document).unbind('mousemove', moveSelector);
|
||||
return false;
|
||||
},
|
||||
enterSubmit = function (ev) {
|
||||
$(this).addClass('colorpicker_focus');
|
||||
},
|
||||
leaveSubmit = function (ev) {
|
||||
$(this).removeClass('colorpicker_focus');
|
||||
},
|
||||
clickSubmit = function (ev) {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').color;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
setCurrentColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
||||
},
|
||||
show = function (ev) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
||||
var pos = $(this).offset();
|
||||
var viewPort = getViewport();
|
||||
var top = pos.top + this.offsetHeight;
|
||||
var left = pos.left;
|
||||
if (top + 176 > viewPort.t + viewPort.h) {
|
||||
top -= this.offsetHeight + 176;
|
||||
}
|
||||
if (left + 356 > viewPort.l + viewPort.w) {
|
||||
left -= 356;
|
||||
}
|
||||
cal.css({left: left + 'px', top: top + 'px'});
|
||||
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
||||
cal.show();
|
||||
}
|
||||
$(document).bind('mousedown', {cal: cal}, hide);
|
||||
return false;
|
||||
},
|
||||
hide = function (ev) {
|
||||
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
||||
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
||||
ev.data.cal.hide();
|
||||
}
|
||||
$(document).unbind('mousedown', hide);
|
||||
}
|
||||
},
|
||||
isChildOf = function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (parentEl.contains) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getViewport = function () {
|
||||
var m = document.compatMode == 'CSS1Compat';
|
||||
return {
|
||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
||||
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
||||
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
||||
};
|
||||
},
|
||||
fixHSB = function (hsb) {
|
||||
return {
|
||||
h: Math.min(360, Math.max(0, hsb.h)),
|
||||
s: Math.min(100, Math.max(0, hsb.s)),
|
||||
b: Math.min(100, Math.max(0, hsb.b))
|
||||
};
|
||||
},
|
||||
fixRGB = function (rgb) {
|
||||
return {
|
||||
r: Math.min(255, Math.max(0, rgb.r)),
|
||||
g: Math.min(255, Math.max(0, rgb.g)),
|
||||
b: Math.min(255, Math.max(0, rgb.b))
|
||||
};
|
||||
},
|
||||
fixHex = function (hex) {
|
||||
var len = 6 - hex.length;
|
||||
if (len > 0) {
|
||||
var o = [];
|
||||
for (var i=0; i<len; i++) {
|
||||
o.push('0');
|
||||
}
|
||||
o.push(hex);
|
||||
hex = o.join('');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
HexToRGB = function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||
},
|
||||
HexToHSB = function (hex) {
|
||||
return RGBToHSB(HexToRGB(hex));
|
||||
},
|
||||
RGBToHSB = function (rgb) {
|
||||
var hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
if (max != 0) {
|
||||
|
||||
}
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) {
|
||||
hsb.h = (rgb.g - rgb.b) / delta;
|
||||
} else if (rgb.g == max) {
|
||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
} else {
|
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
}
|
||||
} else {
|
||||
hsb.h = -1;
|
||||
}
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) {
|
||||
hsb.h += 360;
|
||||
}
|
||||
hsb.s *= 100/255;
|
||||
hsb.b *= 100/255;
|
||||
return hsb;
|
||||
},
|
||||
HSBToRGB = function (hsb) {
|
||||
var rgb = {};
|
||||
var h = Math.round(hsb.h);
|
||||
var s = Math.round(hsb.s*255/100);
|
||||
var v = Math.round(hsb.b*255/100);
|
||||
if(s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255-s)*v/255;
|
||||
var t3 = (t1-t2)*(h%60)/60;
|
||||
if(h==360) h = 0;
|
||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
},
|
||||
RGBToHex = function (rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function (nr, val) {
|
||||
if (val.length == 1) {
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
},
|
||||
HSBToHex = function (hsb) {
|
||||
return RGBToHex(HSBToRGB(hsb));
|
||||
},
|
||||
restoreOriginal = function () {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').origColor;
|
||||
cal.data('colorpicker').color = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
};
|
||||
return {
|
||||
init: function (opt) {
|
||||
opt = $.extend({}, defaults, opt||{});
|
||||
if (typeof opt.color == 'string') {
|
||||
opt.color = HexToHSB(opt.color);
|
||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
||||
opt.color = RGBToHSB(opt.color);
|
||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
||||
opt.color = fixHSB(opt.color);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function () {
|
||||
if (!$(this).data('colorpickerId')) {
|
||||
var options = $.extend({}, opt);
|
||||
options.origColor = opt.color;
|
||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
||||
$(this).data('colorpickerId', id);
|
||||
var cal = $(tpl).attr('id', id);
|
||||
if (options.flat) {
|
||||
cal.appendTo(this).show();
|
||||
} else {
|
||||
cal.appendTo(document.body);
|
||||
}
|
||||
options.fields = cal
|
||||
.find('input')
|
||||
.bind('keyup', keyDown)
|
||||
.bind('change', change)
|
||||
.bind('blur', blur)
|
||||
.bind('focus', focus);
|
||||
cal
|
||||
.find('span').bind('mousedown', downIncrement).end()
|
||||
.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
|
||||
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
|
||||
options.selectorIndic = options.selector.find('div div');
|
||||
options.el = this;
|
||||
options.hue = cal.find('div.colorpicker_hue div');
|
||||
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
|
||||
options.newColor = cal.find('div.colorpicker_new_color');
|
||||
options.currentColor = cal.find('div.colorpicker_current_color');
|
||||
cal.data('colorpicker', options);
|
||||
cal.find('div.colorpicker_submit')
|
||||
.bind('mouseenter', enterSubmit)
|
||||
.bind('mouseleave', leaveSubmit)
|
||||
.bind('click', clickSubmit);
|
||||
fillRGBFields(options.color, cal.get(0));
|
||||
fillHSBFields(options.color, cal.get(0));
|
||||
fillHexFields(options.color, cal.get(0));
|
||||
setHue(options.color, cal.get(0));
|
||||
setSelector(options.color, cal.get(0));
|
||||
setCurrentColor(options.color, cal.get(0));
|
||||
setNewColor(options.color, cal.get(0));
|
||||
if (options.flat) {
|
||||
cal.css({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
});
|
||||
} else {
|
||||
$(this).bind(options.eventName, show);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showPicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
show.apply(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
hidePicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
$('#' + $(this).data('colorpickerId')).hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
setColor: function(col) {
|
||||
if (typeof col == 'string') {
|
||||
col = HexToHSB(col);
|
||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||
col = RGBToHSB(col);
|
||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||
col = fixHSB(col);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function(){
|
||||
if ($(this).data('colorpickerId')) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').color = col;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setCurrentColor(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
$.fn.extend({
|
||||
ColorPicker: ColorPicker.init,
|
||||
ColorPickerHide: ColorPicker.hidePicker,
|
||||
ColorPickerShow: ColorPicker.showPicker,
|
||||
ColorPickerSetColor: ColorPicker.setColor
|
||||
});
|
||||
})(jQuery)
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
(function($){var ColorPicker=function(){var ids={},inAction,charMin=65,visible,tpl='<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
|
||||
defaults={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:true,flat:false},fillRGBFields=function(hsb,cal){var rgb=HSBToRGB(hsb);$(cal).data("colorpicker").fields.eq(1).val(rgb.r).end().eq(2).val(rgb.g).end().eq(3).val(rgb.b).end()},fillHSBFields=function(hsb,cal){$(cal).data("colorpicker").fields.eq(4).val(hsb.h).end().eq(5).val(hsb.s).end().eq(6).val(hsb.b).end()},fillHexFields=function(hsb,
|
||||
cal){$(cal).data("colorpicker").fields.eq(0).val(HSBToHex(hsb)).end()},setSelector=function(hsb,cal){$(cal).data("colorpicker").selector.css("backgroundColor","#"+HSBToHex({h:hsb.h,s:100,b:100}));$(cal).data("colorpicker").selectorIndic.css({left:parseInt(150*hsb.s/100,10),top:parseInt(150*(100-hsb.b)/100,10)})},setHue=function(hsb,cal){$(cal).data("colorpicker").hue.css("top",parseInt(150-150*hsb.h/360,10))},setCurrentColor=function(hsb,cal){$(cal).data("colorpicker").currentColor.css("backgroundColor",
|
||||
"#"+HSBToHex(hsb))},setNewColor=function(hsb,cal){$(cal).data("colorpicker").newColor.css("backgroundColor","#"+HSBToHex(hsb))},keyDown=function(ev){var pressedKey=ev.charCode||ev.keyCode||-1;if(pressedKey>charMin&&pressedKey<=90||pressedKey==32)return false;var cal=$(this).parent().parent();if(cal.data("colorpicker").livePreview===true)change.apply(this)},change=function(ev){var cal=$(this).parent().parent(),col;if(this.parentNode.className.indexOf("_hex")>0)cal.data("colorpicker").color=col=HexToHSB(fixHex(this.value));
|
||||
else if(this.parentNode.className.indexOf("_hsb")>0)cal.data("colorpicker").color=col=fixHSB({h:parseInt(cal.data("colorpicker").fields.eq(4).val(),10),s:parseInt(cal.data("colorpicker").fields.eq(5).val(),10),b:parseInt(cal.data("colorpicker").fields.eq(6).val(),10)});else cal.data("colorpicker").color=col=RGBToHSB(fixRGB({r:parseInt(cal.data("colorpicker").fields.eq(1).val(),10),g:parseInt(cal.data("colorpicker").fields.eq(2).val(),10),b:parseInt(cal.data("colorpicker").fields.eq(3).val(),10)}));
|
||||
if(ev){fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0))}setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0));cal.data("colorpicker").onChange.apply(cal,[col,HSBToHex(col),HSBToRGB(col)])},blur=function(ev){var cal=$(this).parent().parent();cal.data("colorpicker").fields.parent().removeClass("colorpicker_focus")},focus=function(){charMin=this.parentNode.className.indexOf("_hex")>0?70:65;$(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");
|
||||
$(this).parent().addClass("colorpicker_focus")},downIncrement=function(ev){var field=$(this).parent().find("input").focus();var current={el:$(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:ev.pageY,field:field,val:parseInt(field.val(),10),preview:$(this).parent().parent().data("colorpicker").livePreview};$(document).bind("mouseup",current,upIncrement);$(document).bind("mousemove",current,moveIncrement)},
|
||||
moveIncrement=function(ev){ev.data.field.val(Math.max(0,Math.min(ev.data.max,parseInt(ev.data.val+ev.pageY-ev.data.y,10))));if(ev.data.preview)change.apply(ev.data.field.get(0),[true]);return false},upIncrement=function(ev){change.apply(ev.data.field.get(0),[true]);ev.data.el.removeClass("colorpicker_slider").find("input").focus();$(document).unbind("mouseup",upIncrement);$(document).unbind("mousemove",moveIncrement);return false},downHue=function(ev){var current={cal:$(this).parent(),y:$(this).offset().top};
|
||||
current.preview=current.cal.data("colorpicker").livePreview;$(document).bind("mouseup",current,upHue);$(document).bind("mousemove",current,moveHue)},moveHue=function(ev){change.apply(ev.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,ev.pageY-ev.data.y)))/150,10)).get(0),[ev.data.preview]);return false},upHue=function(ev){fillRGBFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));
|
||||
$(document).unbind("mouseup",upHue);$(document).unbind("mousemove",moveHue);return false},downSelector=function(ev){var current={cal:$(this).parent(),pos:$(this).offset()};current.preview=current.cal.data("colorpicker").livePreview;$(document).bind("mouseup",current,upSelector);$(document).bind("mousemove",current,moveSelector)},moveSelector=function(ev){change.apply(ev.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,ev.pageY-ev.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*
|
||||
Math.max(0,Math.min(150,ev.pageX-ev.data.pos.left))/150,10)).get(0),[ev.data.preview]);return false},upSelector=function(ev){fillRGBFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));$(document).unbind("mouseup",upSelector);$(document).unbind("mousemove",moveSelector);return false},enterSubmit=function(ev){$(this).addClass("colorpicker_focus")},leaveSubmit=function(ev){$(this).removeClass("colorpicker_focus")},clickSubmit=
|
||||
function(ev){var cal=$(this).parent();var col=cal.data("colorpicker").color;cal.data("colorpicker").origColor=col;setCurrentColor(col,cal.get(0));cal.data("colorpicker").onSubmit(col,HSBToHex(col),HSBToRGB(col),cal.data("colorpicker").el)},show=function(ev){var cal=$("#"+$(this).data("colorpickerId"));cal.data("colorpicker").onBeforeShow.apply(this,[cal.get(0)]);var pos=$(this).offset();var viewPort=getViewport();var top=pos.top+this.offsetHeight;var left=pos.left;if(top+176>viewPort.t+viewPort.h)top-=
|
||||
this.offsetHeight+176;if(left+356>viewPort.l+viewPort.w)left-=356;cal.css({left:left+"px",top:top+"px"});if(cal.data("colorpicker").onShow.apply(this,[cal.get(0)])!=false)cal.show();$(document).bind("mousedown",{cal:cal},hide);return false},hide=function(ev){if(!isChildOf(ev.data.cal.get(0),ev.target,ev.data.cal.get(0))){if(ev.data.cal.data("colorpicker").onHide.apply(this,[ev.data.cal.get(0)])!=false)ev.data.cal.hide();$(document).unbind("mousedown",hide)}},isChildOf=function(parentEl,el,container){if(parentEl==
|
||||
el)return true;if(parentEl.contains)return parentEl.contains(el);if(parentEl.compareDocumentPosition)return!!(parentEl.compareDocumentPosition(el)&16);var prEl=el.parentNode;while(prEl&&prEl!=container){if(prEl==parentEl)return true;prEl=prEl.parentNode}return false},getViewport=function(){var m=document.compatMode=="CSS1Compat";return{l:window.pageXOffset||(m?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(m?document.documentElement.scrollTop:document.body.scrollTop),
|
||||
w:window.innerWidth||(m?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(m?document.documentElement.clientHeight:document.body.clientHeight)}},fixHSB=function(hsb){return{h:Math.min(360,Math.max(0,hsb.h)),s:Math.min(100,Math.max(0,hsb.s)),b:Math.min(100,Math.max(0,hsb.b))}},fixRGB=function(rgb){return{r:Math.min(255,Math.max(0,rgb.r)),g:Math.min(255,Math.max(0,rgb.g)),b:Math.min(255,Math.max(0,rgb.b))}},fixHex=function(hex){var len=6-hex.length;if(len>0){var o=
|
||||
[];for(var i=0;i<len;i++)o.push("0");o.push(hex);hex=o.join("")}return hex},HexToRGB=function(hex){var hex=parseInt(hex.indexOf("#")>-1?hex.substring(1):hex,16);return{r:hex>>16,g:(hex&65280)>>8,b:hex&255}},HexToHSB=function(hex){return RGBToHSB(HexToRGB(hex))},RGBToHSB=function(rgb){var hsb={h:0,s:0,b:0};var min=Math.min(rgb.r,rgb.g,rgb.b);var max=Math.max(rgb.r,rgb.g,rgb.b);var delta=max-min;hsb.b=max;if(max!=0);hsb.s=max!=0?255*delta/max:0;if(hsb.s!=0)if(rgb.r==max)hsb.h=(rgb.g-rgb.b)/delta;else if(rgb.g==
|
||||
max)hsb.h=2+(rgb.b-rgb.r)/delta;else hsb.h=4+(rgb.r-rgb.g)/delta;else hsb.h=-1;hsb.h*=60;if(hsb.h<0)hsb.h+=360;hsb.s*=100/255;hsb.b*=100/255;return hsb},HSBToRGB=function(hsb){var rgb={};var h=Math.round(hsb.h);var s=Math.round(hsb.s*255/100);var v=Math.round(hsb.b*255/100);if(s==0)rgb.r=rgb.g=rgb.b=v;else{var t1=v;var t2=(255-s)*v/255;var t3=(t1-t2)*(h%60)/60;if(h==360)h=0;if(h<60){rgb.r=t1;rgb.b=t2;rgb.g=t2+t3}else if(h<120){rgb.g=t1;rgb.b=t2;rgb.r=t1-t3}else if(h<180){rgb.g=t1;rgb.r=t2;rgb.b=t2+
|
||||
t3}else if(h<240){rgb.b=t1;rgb.r=t2;rgb.g=t1-t3}else if(h<300){rgb.b=t1;rgb.g=t2;rgb.r=t2+t3}else if(h<360){rgb.r=t1;rgb.g=t2;rgb.b=t1-t3}else{rgb.r=0;rgb.g=0;rgb.b=0}}return{r:Math.round(rgb.r),g:Math.round(rgb.g),b:Math.round(rgb.b)}},RGBToHex=function(rgb){var hex=[rgb.r.toString(16),rgb.g.toString(16),rgb.b.toString(16)];$.each(hex,function(nr,val){if(val.length==1)hex[nr]="0"+val});return hex.join("")},HSBToHex=function(hsb){return RGBToHex(HSBToRGB(hsb))},restoreOriginal=function(){var cal=
|
||||
$(this).parent();var col=cal.data("colorpicker").origColor;cal.data("colorpicker").color=col;fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0));setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0))};return{init:function(opt){opt=$.extend({},defaults,opt||{});if(typeof opt.color=="string")opt.color=HexToHSB(opt.color);else if(opt.color.r!=undefined&&opt.color.g!=undefined&&opt.color.b!=undefined)opt.color=RGBToHSB(opt.color);else if(opt.color.h!=
|
||||
undefined&&opt.color.s!=undefined&&opt.color.b!=undefined)opt.color=fixHSB(opt.color);else return this;return this.each(function(){if(!$(this).data("colorpickerId")){var options=$.extend({},opt);options.origColor=opt.color;var id="collorpicker_"+parseInt(Math.random()*1E3);$(this).data("colorpickerId",id);var cal=$(tpl).attr("id",id);if(options.flat)cal.appendTo(this).show();else cal.appendTo(document.body);options.fields=cal.find("input").bind("keyup",keyDown).bind("change",change).bind("blur",blur).bind("focus",
|
||||
focus);cal.find("span").bind("mousedown",downIncrement).end().find(">div.colorpicker_current_color").bind("click",restoreOriginal);options.selector=cal.find("div.colorpicker_color").bind("mousedown",downSelector);options.selectorIndic=options.selector.find("div div");options.el=this;options.hue=cal.find("div.colorpicker_hue div");cal.find("div.colorpicker_hue").bind("mousedown",downHue);options.newColor=cal.find("div.colorpicker_new_color");options.currentColor=cal.find("div.colorpicker_current_color");
|
||||
cal.data("colorpicker",options);cal.find("div.colorpicker_submit").bind("mouseenter",enterSubmit).bind("mouseleave",leaveSubmit).bind("click",clickSubmit);fillRGBFields(options.color,cal.get(0));fillHSBFields(options.color,cal.get(0));fillHexFields(options.color,cal.get(0));setHue(options.color,cal.get(0));setSelector(options.color,cal.get(0));setCurrentColor(options.color,cal.get(0));setNewColor(options.color,cal.get(0));if(options.flat)cal.css({position:"relative",display:"block"});else $(this).bind(options.eventName,
|
||||
show)}})},showPicker:function(){return this.each(function(){if($(this).data("colorpickerId"))show.apply(this)})},hidePicker:function(){return this.each(function(){if($(this).data("colorpickerId"))$("#"+$(this).data("colorpickerId")).hide()})},setColor:function(col){if(typeof col=="string")col=HexToHSB(col);else if(col.r!=undefined&&col.g!=undefined&&col.b!=undefined)col=RGBToHSB(col);else if(col.h!=undefined&&col.s!=undefined&&col.b!=undefined)col=fixHSB(col);else return this;return this.each(function(){if($(this).data("colorpickerId")){var cal=
|
||||
$("#"+$(this).data("colorpickerId"));cal.data("colorpicker").color=col;cal.data("colorpicker").origColor=col;fillRGBFields(col,cal.get(0));fillHSBFields(col,cal.get(0));fillHexFields(col,cal.get(0));setHue(col,cal.get(0));setSelector(col,cal.get(0));setCurrentColor(col,cal.get(0));setNewColor(col,cal.get(0))}})}}}();$.fn.extend({ColorPicker:ColorPicker.init,ColorPickerHide:ColorPicker.hidePicker,ColorPickerShow:ColorPicker.showPicker,ColorPickerSetColor:ColorPicker.setColor})})(jQuery);
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Zoomimage
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
var EYE = window.EYE = function() {
|
||||
var _registered = {
|
||||
init: []
|
||||
};
|
||||
return {
|
||||
init: function() {
|
||||
$.each(_registered.init, function(nr, fn){
|
||||
fn.call();
|
||||
});
|
||||
},
|
||||
extend: function(prop) {
|
||||
for (var i in prop) {
|
||||
if (prop[i] != undefined) {
|
||||
this[i] = prop[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
register: function(fn, type) {
|
||||
if (!_registered[type]) {
|
||||
_registered[type] = [];
|
||||
}
|
||||
_registered[type].push(fn);
|
||||
}
|
||||
};
|
||||
}();
|
||||
$(EYE.init);
|
||||
})(jQuery);
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
(function($){
|
||||
var initLayout = function() {
|
||||
var hash = window.location.hash.replace('#', '');
|
||||
var currentTab = $('ul.navigationTabs a')
|
||||
.bind('click', showTab)
|
||||
.filter('a[rel=' + hash + ']');
|
||||
if (currentTab.size() == 0) {
|
||||
currentTab = $('ul.navigationTabs a:first');
|
||||
}
|
||||
showTab.apply(currentTab.get(0));
|
||||
$('#colorpickerHolder').ColorPicker({flat: true});
|
||||
$('#colorpickerHolder2').ColorPicker({
|
||||
flat: true,
|
||||
color: '#00ff00',
|
||||
onSubmit: function(hsb, hex, rgb) {
|
||||
$('#colorSelector2 div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
$('#colorpickerHolder2>div').css('position', 'absolute');
|
||||
var widt = false;
|
||||
$('#colorSelector2').bind('click', function() {
|
||||
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
|
||||
widt = !widt;
|
||||
});
|
||||
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
$(el).val(hex);
|
||||
$(el).ColorPickerHide();
|
||||
},
|
||||
onBeforeShow: function () {
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
});
|
||||
$('#colorSelector').ColorPicker({
|
||||
color: '#0000ff',
|
||||
onShow: function (colpkr) {
|
||||
$(colpkr).fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
onHide: function (colpkr) {
|
||||
$(colpkr).fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
onChange: function (hsb, hex, rgb) {
|
||||
$('#colorSelector div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var showTab = function(e) {
|
||||
var tabIndex = $('ul.navigationTabs a')
|
||||
.removeClass('active')
|
||||
.index(this);
|
||||
$(this)
|
||||
.addClass('active')
|
||||
.blur();
|
||||
$('div.tab')
|
||||
.hide()
|
||||
.eq(tabIndex)
|
||||
.show();
|
||||
};
|
||||
|
||||
EYE.register(initLayout, 'init');
|
||||
})(jQuery)
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Utilities
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
EYE.extend({
|
||||
getPosition : function(e, forceIt)
|
||||
{
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
var es = e.style;
|
||||
var restoreStyles = false;
|
||||
if (forceIt && jQuery.curCSS(e,'display') == 'none') {
|
||||
var oldVisibility = es.visibility;
|
||||
var oldPosition = es.position;
|
||||
restoreStyles = true;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
}
|
||||
var el = e;
|
||||
if (el.getBoundingClientRect) { // IE
|
||||
var box = el.getBoundingClientRect();
|
||||
x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
|
||||
y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
|
||||
} else {
|
||||
x = el.offsetLeft;
|
||||
y = el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
if (e != el) {
|
||||
while (el) {
|
||||
x += el.offsetLeft;
|
||||
y += el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
}
|
||||
}
|
||||
if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
|
||||
x -= document.body.offsetLeft;
|
||||
y -= document.body.offsetTop;
|
||||
}
|
||||
el = e.parentNode;
|
||||
while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
|
||||
{
|
||||
if (jQuery.curCSS(el, 'display') != 'inline') {
|
||||
x -= el.scrollLeft;
|
||||
y -= el.scrollTop;
|
||||
}
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
if (restoreStyles == true) {
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility;
|
||||
}
|
||||
return {x:x, y:y};
|
||||
},
|
||||
getSize : function(e)
|
||||
{
|
||||
var w = parseInt(jQuery.curCSS(e,'width'), 10);
|
||||
var h = parseInt(jQuery.curCSS(e,'height'), 10);
|
||||
var wb = 0;
|
||||
var hb = 0;
|
||||
if (jQuery.curCSS(e, 'display') != 'none') {
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
} else {
|
||||
var es = e.style;
|
||||
var oldVisibility = es.visibility;
|
||||
var oldPosition = es.position;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility;
|
||||
}
|
||||
return {w:w, h:h, wb:wb, hb:hb};
|
||||
},
|
||||
getClient : function(e)
|
||||
{
|
||||
var h, w;
|
||||
if (e) {
|
||||
w = e.clientWidth;
|
||||
h = e.clientHeight;
|
||||
} else {
|
||||
var de = document.documentElement;
|
||||
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
|
||||
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
|
||||
}
|
||||
return {w:w,h:h};
|
||||
},
|
||||
getScroll : function (e)
|
||||
{
|
||||
var t=0, l=0, w=0, h=0, iw=0, ih=0;
|
||||
if (e && e.nodeName.toLowerCase() != 'body') {
|
||||
t = e.scrollTop;
|
||||
l = e.scrollLeft;
|
||||
w = e.scrollWidth;
|
||||
h = e.scrollHeight;
|
||||
} else {
|
||||
if (document.documentElement) {
|
||||
t = document.documentElement.scrollTop;
|
||||
l = document.documentElement.scrollLeft;
|
||||
w = document.documentElement.scrollWidth;
|
||||
h = document.documentElement.scrollHeight;
|
||||
} else if (document.body) {
|
||||
t = document.body.scrollTop;
|
||||
l = document.body.scrollLeft;
|
||||
w = document.body.scrollWidth;
|
||||
h = document.body.scrollHeight;
|
||||
}
|
||||
if (typeof pageYOffset != 'undefined') {
|
||||
t = pageYOffset;
|
||||
l = pageXOffset;
|
||||
}
|
||||
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
|
||||
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
|
||||
}
|
||||
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
|
||||
},
|
||||
getMargins : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'marginTop') || '';
|
||||
var r = jQuery.curCSS(e,'marginRight') || '';
|
||||
var b = jQuery.curCSS(e,'marginBottom') || '';
|
||||
var l = jQuery.curCSS(e,'marginLeft') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
getPadding : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'paddingTop') || '';
|
||||
var r = jQuery.curCSS(e,'paddingRight') || '';
|
||||
var b = jQuery.curCSS(e,'paddingBottom') || '';
|
||||
var l = jQuery.curCSS(e,'paddingLeft') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
getBorder : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'borderTopWidth') || '';
|
||||
var r = jQuery.curCSS(e,'borderRightWidth') || '';
|
||||
var b = jQuery.curCSS(e,'borderBottomWidth') || '';
|
||||
var l = jQuery.curCSS(e,'borderLeftWidth') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)||0
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
traverseDOM : function(nodeEl, func)
|
||||
{
|
||||
func(nodeEl);
|
||||
nodeEl = nodeEl.firstChild;
|
||||
while(nodeEl){
|
||||
EYE.traverseDOM(nodeEl, func);
|
||||
nodeEl = nodeEl.nextSibling;
|
||||
}
|
||||
},
|
||||
getInnerWidth : function(el, scroll) {
|
||||
var offsetW = el.offsetWidth;
|
||||
return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
|
||||
},
|
||||
getInnerHeight : function(el, scroll) {
|
||||
var offsetH = el.offsetHeight;
|
||||
return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
|
||||
},
|
||||
getExtraWidth : function(el) {
|
||||
if($.boxModel)
|
||||
return (parseInt($.curCSS(el, 'paddingLeft'))||0)
|
||||
+ (parseInt($.curCSS(el, 'paddingRight'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
|
||||
return 0;
|
||||
},
|
||||
getExtraHeight : function(el) {
|
||||
if($.boxModel)
|
||||
return (parseInt($.curCSS(el, 'paddingTop'))||0)
|
||||
+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
|
||||
return 0;
|
||||
},
|
||||
isChildOf: function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (!el || !el.nodeType || el.nodeType != 1) {
|
||||
return false;
|
||||
}
|
||||
if (parentEl.contains && !$.browser.safari) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
centerEl : function(el, axis)
|
||||
{
|
||||
var clientScroll = EYE.getScroll();
|
||||
var size = EYE.getSize(el);
|
||||
if (!axis || axis == 'vertically')
|
||||
$(el).css(
|
||||
{
|
||||
top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
|
||||
}
|
||||
);
|
||||
if (!axis || axis == 'horizontally')
|
||||
$(el).css(
|
||||
{
|
||||
left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
if (!$.easing.easeout) {
|
||||
$.easing.easeout = function(p, n, firstNum, delta, duration) {
|
||||
return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
|
||||
};
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 B |
4
site/modules/FieldtypeColor/.gitattributes
vendored
Normal file
4
site/modules/FieldtypeColor/.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
# Show correct language for ProcessWire .module
|
||||
*.module linguist-language=PHP
|
||||
5
site/modules/FieldtypeColor/.gitignore
vendored
Normal file
5
site/modules/FieldtypeColor/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
dematte/*
|
||||
jscolor-2.0.4/*
|
||||
colorpicker/*
|
||||
InputfieldColor.js
|
||||
.DS_Store
|
||||
342
site/modules/FieldtypeColor/FieldtypeColor.module
Normal file
342
site/modules/FieldtypeColor/FieldtypeColor.module
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
<?php namespace ProcessWire;
|
||||
|
||||
/**
|
||||
* ProcessWire Color Fieldtype
|
||||
* Field that stores an 32Bit unsigned integer value to hold RGB colors and Alpha channel
|
||||
*
|
||||
* @author Christoph Thelen aka @kixe 2017/07/03
|
||||
* @copyright © 2017 Christoph Thelen
|
||||
* @license Licensed under GNU/GPL v3
|
||||
* @link https://processwire.com/talk/topic/...
|
||||
* @version 1.2.0
|
||||
*
|
||||
*
|
||||
* @since 1.0.1 2017/07/05 - better validation, spectrum options modifiable
|
||||
* @since 1.0.2 2017/07/09 - added default value option
|
||||
* @since 1.0.3 2017/07/09 - added option for custom javascript
|
||||
* @since 1.0.4 2017/08/18 - made # optional for input (pattern attribute)
|
||||
* @since 1.0.5 2017/08/28 - optimized default color handling, added output format option array()
|
||||
* @since 1.0.6 2017/10/07 - changed dec to hex conversion in function wakeupValue() from dechex() to base_convert() to be safe on 32bit systems
|
||||
* @since 1.0.7 2017/10/08 - changed dec to hex conversion in function wakeupValue() from dechex() to custom function to be safe on 32bit systems
|
||||
* @since 1.0.8 2018/09/08 - Installation error if PHP is running on 32-bit system and BCMath extension is not installed
|
||||
* @since 1.0.9 2019/01/12 - fixed number format bug for rgba() and hsla() alpha channel if comma is forced as decimal separator by locale settings
|
||||
* @since 1.1.0 2019/08/12 - better input check formatColorString()
|
||||
* @since 1.1.1 2019/09/01 - fixed bug missing opacity if 0
|
||||
* @since 1.1.2 2019/09/04 - fixed bug #5 FieldtypeColor index typo in var in function RGB2HSL() thanks to @junoforno
|
||||
* @since 1.1.3 2019/10/10 - fixed bug #1 InputfieldColor - remove pattern attribute if spectrum color picker is used to prevent error in Chrome
|
||||
* @since 1.1.4 2020/03/21 - fixed number format bug for hsl() output: use dot instead of comma as decimal separator independent from language setup
|
||||
* @since 1.1.5 2020/05/15 switched to ProcessWire namespace
|
||||
* @since 1.1.6 2021/10/04 added comparison functions getClosestColorName(), getColorDistance(), getLuminanceDistance()
|
||||
* @since 1.1.7 2021/10/10 added output format option: array([0,255], [0,255], [0,255]) indexed array: R,G,B
|
||||
* @since 1.1.8 2023/07/17 added output format option: array([0,255], [0,255], [0,255]) indexed array: H,S,L
|
||||
* @since 1.1.9 2023/10/03 update sanitizeValue() formatColorString()
|
||||
* @since 1.2.0 2024/03/27 fixed PHP 8.1 deprecation warning on strlen()
|
||||
*
|
||||
*
|
||||
* made for ProcessWire 3.x by Ryan Cramer
|
||||
* https://processwire.com
|
||||
*
|
||||
*/
|
||||
|
||||
class FieldtypeColor extends Fieldtype {
|
||||
|
||||
public static function getModuleInfo() {
|
||||
return array(
|
||||
'title' => 'Color',
|
||||
'version' => 120,
|
||||
'summary' => 'Field that stores a color value as 32bit integer reflecting a RGBA value. Many options for Input (HTML5 Inputfield Color, Textfield with changing background, various jQuery/JS ColorPickers, custom jQuery/JS/CSS) and Output (RGB, RGBA, HSL, HSLA, HEX, Array).',
|
||||
'installs' => 'InputfieldColor',
|
||||
'href' => 'https://processwire.com/talk/topic/16679-fieldtypecolor/'
|
||||
);
|
||||
}
|
||||
|
||||
public function ___getCompatibleFieldtypes(Field $field) {
|
||||
$fieldtypes = $this->wire(new Fieldtypes());
|
||||
foreach($this->wire('fieldtypes') as $fieldtype) {
|
||||
if(!$fieldtype instanceof FieldtypeInteger &&
|
||||
!$fieldtype instanceof FieldtypeColor &&
|
||||
$fieldtype != 'FieldtypeText') {
|
||||
$fieldtypes->remove($fieldtype);
|
||||
}
|
||||
}
|
||||
return $fieldtypes;
|
||||
}
|
||||
|
||||
public function getInputfield(Page $page, Field $field) {
|
||||
$inputfield = $this->modules->get('InputfieldColor');
|
||||
$inputfield->initValue = $this->sanitizeValue($page, $field, $field->defaultValue);
|
||||
$inputfield->class = $this->className();
|
||||
return $inputfield;
|
||||
}
|
||||
|
||||
public function sanitizeValue(Page $page, Field $field, $value) {
|
||||
return $this->_sanitizeValue($value);
|
||||
}
|
||||
|
||||
protected function _sanitizeValue($value) {
|
||||
if (!$value) return $value;
|
||||
$value = ltrim($value, '#');
|
||||
if (strlen($value) == 8) return $value;
|
||||
else if (strlen($value) == 6) return 'ff'.$value; // add alpha channel
|
||||
else throw New WireException('Expecting Hex color string (length 6 or 8 digits) with optional leading \'#\'');
|
||||
}
|
||||
|
||||
public function sleepValue(Page $page, Field $field, $value) {
|
||||
return hexdec($value);
|
||||
}
|
||||
|
||||
public function wakeupValue(Page $page, Field $field, $value) {
|
||||
if (!$value) return $value;
|
||||
if (function_exists("bcmod")) return str_pad(self::bcdechex($value), 8, '0', STR_PAD_LEFT); // BCMath extension required
|
||||
return str_pad(dechex($value), 8, '0', STR_PAD_LEFT); // 64-bit system required
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a number from decimal to hex (BCMath extension required)
|
||||
* returns precice result even if number is bigger than PHP_INT_MAX (safe for 32bit systems)
|
||||
*
|
||||
* @param int/string/float number
|
||||
* @return string
|
||||
*
|
||||
* @see http://php.net/manual/en/ref.bc.php#99130
|
||||
*/
|
||||
public static function bcdechex($dec) {
|
||||
$last = bcmod("$dec", 16);
|
||||
$remain = bcdiv(bcsub("$dec", $last), 16);
|
||||
if($remain == 0) return dechex($last);
|
||||
else return self::bcdechex($remain).dechex($last);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a RGB color value to HSL. Conversion formula
|
||||
* @param array of 3 color values R, G, and B [0, 255]
|
||||
* @return array The HSL representation
|
||||
*
|
||||
* @see https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion/9493060#9493060
|
||||
* @see http://en.wikipedia.org/wiki/HSL_color_space
|
||||
*/
|
||||
public function RGB2HSL(array $rgb) {
|
||||
$rgb = array_map(function($v) { return $v/ 255; }, $rgb);
|
||||
$max = max($rgb);
|
||||
$min = min($rgb);
|
||||
$hue = $sat = $light = ($max + $min) / 2;
|
||||
|
||||
if($max == $min) {
|
||||
$hue = $sat = 0; // achromatic
|
||||
} else {
|
||||
$d = $max - $min;
|
||||
$sat = $light > 0.5 ? $d / (2 - $max - $min) : $d / ($max + $min);
|
||||
switch($max) {
|
||||
case $rgb[0]:
|
||||
$hue = ($rgb[1] - $rgb[2]) / $d + ($rgb[1] < $rgb[1] ? 6 : 0);
|
||||
break;
|
||||
case $rgb[1]:
|
||||
$hue = ($rgb[2] - $rgb[0]) / $d + 2;
|
||||
break;
|
||||
case $rgb[2]:
|
||||
$hue = ($rgb[0] - $rgb[1]) / $d + 4;
|
||||
break;
|
||||
}
|
||||
$hue = $hue / 6;
|
||||
}
|
||||
// round and convert float to string with dot as decimal separator in any language
|
||||
$hue = str_replace(',', '.', round($hue * 360));
|
||||
$sat = str_replace(',', '.', round($sat * 100, 1));
|
||||
$light = str_replace(',', '.', round($light * 100, 1));
|
||||
|
||||
return [$hue, $sat, $light];
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the "naive" difference between two colors.
|
||||
* @see https://php.tutorialink.com/finding-nearest-match-rgb-color-from-array-of-colors/
|
||||
* @param int[] $color_a Three-element array with R,G,B color values 0-255.
|
||||
* @param int[] $color_b Three-element array with R,G,B color values 0-255.
|
||||
* @return int
|
||||
*/
|
||||
public function getColorDistance(array $color_a, array $color_b): int {
|
||||
return
|
||||
abs($color_a[0] - $color_b[0]) +
|
||||
abs($color_a[1] - $color_b[1]) +
|
||||
abs($color_a[2] - $color_b[2]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the difference between two colors' luminance values.
|
||||
* @see https://php.tutorialink.com/finding-nearest-match-rgb-color-from-array-of-colors/
|
||||
* @param int[] $color_a Three-element array with R,G,B color values 0-255.
|
||||
* @param int[] $color_b Three-element array with R,G,B color values 0-255.
|
||||
* @return int
|
||||
*/
|
||||
public function getLuminanceDistance(array $color_a, array $color_b): int {
|
||||
$luminance_f = function ($red, $green, $blue): int {
|
||||
// Source: https://en.wikipedia.org/wiki/Relative_luminance
|
||||
$luminance = (int) (0.2126 * $red + 0.7152 * $green + 0.0722 * $blue);
|
||||
return $luminance;
|
||||
};
|
||||
|
||||
return abs(
|
||||
$luminance_f($color_a[0], $color_a[1], $color_a[2]) -
|
||||
$luminance_f($color_b[0], $color_b[1], $color_b[2])
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the closest named color
|
||||
* @param hexcolor
|
||||
* @return string
|
||||
*/
|
||||
public function getClosestColorName(string $color) {
|
||||
$color = ltrim($color, '#');
|
||||
if (strlen($color) == 6) $color = "ff$color";
|
||||
if (strlen($color) != 8) throw new WireException("Invalid parameter. Expected hex string of 6 or 8 digits length with or without leading '#'.");
|
||||
$color = $this->formatColorString($color, 9);
|
||||
$palette = json_decode(file_get_contents(__DIR__ . '/colornames.json'), true);
|
||||
$min = 765;
|
||||
$match = null;
|
||||
foreach ($palette as $name => $pcolor) {
|
||||
$pcolor = $this->formatColorString("ff$pcolor", 9);
|
||||
if ($pcolor === $color) return $name; // quick exit if full match
|
||||
$distance = $this->getColorDistance($pcolor, $color);
|
||||
if ($distance >= $min) continue;
|
||||
$min = $distance;
|
||||
$match = $name;
|
||||
}
|
||||
return $match;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format value for output
|
||||
*
|
||||
*/
|
||||
public function ___formatValue(Page $page, Field $field, $value) {
|
||||
if (!$value) return null;
|
||||
if ($field->outputFormat === 7) return $this->sleepValue($page, $field, $value);
|
||||
return $this->formatColorString($value, $field->outputFormat);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format color string
|
||||
*
|
||||
* @param $value string - hex string of 8 chiffres, first 2 is the alpha channel
|
||||
* @param $of int - output format
|
||||
* @return string formatted color string
|
||||
* @throws object WireException - if input doesn't match (check for length, detailed check in debug mode)
|
||||
*
|
||||
*/
|
||||
public function formatColorString($value, $of = 0) {
|
||||
$value = $this->_sanitizeValue($value);
|
||||
// simple length check or preg_match in debug mode
|
||||
if (strlen($value) != 8 || ($this->wire('config')->debug && !preg_match('/[A-Fa-f0-9]{8}/', $value))) {
|
||||
throw new WireException("Invalid input: $value. Expected hex string of 8 digits length.");
|
||||
}
|
||||
|
||||
if ($of === 6) return $value;
|
||||
if ($of === 0) return "#".substr($value,2);
|
||||
if ($of === 1) return "#".$value;
|
||||
|
||||
$hexVals = str_split($value, 2);
|
||||
$value = array_map('hexdec', $hexVals);
|
||||
|
||||
// opacity
|
||||
$opacity = '0';
|
||||
if ($value[0] > 1 && in_array($of ,array(3,5,8,10,12))) {
|
||||
$opacity = round($value[0] / 255, 2); // float
|
||||
$opacity = rtrim(number_format($opacity, 2, '.', ''),'.0'); // convert float to string with dot as decimal separator
|
||||
}
|
||||
|
||||
if ($of === 9) return [$value[1], $value[2], $value[3]];
|
||||
if ($of === 10) return [$value[1], $value[2], $value[3], $opacity];
|
||||
|
||||
if ($of === 8) {
|
||||
$assocArray = array(
|
||||
'o' => $opacity,
|
||||
'r' => $value[1],
|
||||
'g' => $value[2],
|
||||
'b' => $value[3],
|
||||
'ox' => $hexVals[0],
|
||||
'rx' => $hexVals[1],
|
||||
'gx' => $hexVals[2],
|
||||
'bx' => $hexVals[3],
|
||||
);
|
||||
return array_merge($value, $assocArray);
|
||||
}
|
||||
|
||||
if ($of === 2) return "rgb($value[1], $value[2], $value[3])";
|
||||
if ($of === 3) return "rgba($value[1], $value[2], $value[3], $opacity)";
|
||||
|
||||
$hsl = $this->RGB2HSL(array_slice($value,1,3));
|
||||
|
||||
if ($of === 11) return $hsl;
|
||||
|
||||
if ($of === 12) {
|
||||
$hsla = $hsl;
|
||||
$hsla[] = $opacity;
|
||||
return $hsla;
|
||||
}
|
||||
|
||||
if ($of === 4) return "hsl($hsl[0], $hsl[1]%, $hsl[2]%)";
|
||||
if ($of === 5) return "hsla($hsl[0], $hsl[1]%, $hsl[2]%, $opacity)";
|
||||
}
|
||||
|
||||
public function getDatabaseSchema(Field $field) {
|
||||
$schema = parent::getDatabaseSchema($field);
|
||||
$schema['data'] = "int UNSIGNED NOT NULL";
|
||||
return $schema;
|
||||
}
|
||||
|
||||
public function ___getConfigInputfields(Field $field) {
|
||||
|
||||
$inputfields = $this->wire(new InputfieldWrapper());
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldRadios');
|
||||
$f->attr('name', 'outputFormat');
|
||||
$f->label = $this->_('Output Format');
|
||||
$f->description = $this->_('Choose your preferred output format.');
|
||||
|
||||
$f->addOption(0, $this->_('string 6-digit hex color *#4496dd*'));
|
||||
$f->addOption(1, $this->_('string 8-digit hex color *#fa4496dd* (limited browser support)'));
|
||||
$f->addOption(2, $this->_('string *rgb(68, 100, 221)*'));
|
||||
$f->addOption(3, $this->_('string *rgba(68, 100, 221, 0.98)*'));
|
||||
$f->addOption(4, $this->_('string *hsl(227, 69.2%, 56.7%)*'));
|
||||
$f->addOption(5, $this->_('string *hsla(227, 69.2%, 56.7%, 0.98)*'));
|
||||
$f->addOption(6, $this->_('string 8-digit raw hex *fa4496dd* (unformatted)'));
|
||||
$f->addOption(7, $this->_('int 32bit (storage)'));
|
||||
$f->addOption(8, $this->_('array(r[0,255], g[0,255], b[0,255], o[0,1], rx[00,ff], gx[00,ff], bx[00,ff], ox[00,ff])'));
|
||||
$f->addOption(9, $this->_('array([0,255], [0,255], [0,255]) indexed array: R,G,B'));
|
||||
$f->addOption(10, $this->_('array([0,255], [0,255], [0,255], [0,1]) indexed array: R,G,B,Alpha'));
|
||||
$f->addOption(11, $this->_('array([0,360], [69.2%], [56.7%]) indexed array: H,S,L'));
|
||||
$f->addOption(12, $this->_('array([0,360], [69.2%], [56.7%], [0,1]) indexed array: H,S,L,Alpha'));
|
||||
|
||||
$f->attr('value', (int) $field->outputFormat);
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldColor');
|
||||
$f->attr('name', 'defaultValue');
|
||||
$f->label = $this->_('Default value');
|
||||
|
||||
$f->inputType = $field->inputType;
|
||||
$f->spectrum = $field->spectrum;
|
||||
$f->initJS = $field->initJS;
|
||||
$f->fileJS = $field->fileJS;
|
||||
$f->fileCSS = $field->fileCSS;
|
||||
$f->jqueryCore = $field->jqueryCore;
|
||||
$f->jqueryUI = $field->jqueryUI;
|
||||
$f->alpha = $field->alpha;
|
||||
|
||||
$f->description = $this->_('This value is assigned as the default for blank fields and on newly created pages.');
|
||||
$f->collapsed = Inputfield::collapsedBlank;
|
||||
$f->attr('value', strlen($field->defaultValue ?? '') ? $this->sanitizeValue($this->wire('page'), $field, $field->defaultValue) : null);
|
||||
|
||||
$inputfields->add($f);
|
||||
|
||||
return $inputfields;
|
||||
}
|
||||
|
||||
public function ___install() {
|
||||
if (function_exists("bcmod") === false && PHP_INT_SIZE < 8) {
|
||||
throw new WireException($this->_('The BCMath extension is required if your system can not handle 64-bit integer values.'));
|
||||
}
|
||||
parent::___install();
|
||||
}
|
||||
}
|
||||
9
site/modules/FieldtypeColor/InputfieldColor.css
Normal file
9
site/modules/FieldtypeColor/InputfieldColor.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.InputfieldColor input[type=color], input[type=color].FieldtypeColor, input[type=color]#Inputfield_defaultValue {
|
||||
height:2em;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.AdminThemeUikit .InputfieldColor input[type=color], .AdminThemeUikit input[type=color].FieldtypeColor, .AdminThemeUikit input[type=color]#Inputfield_defaultValue {
|
||||
height:40px;
|
||||
width: 100% !important;
|
||||
}
|
||||
355
site/modules/FieldtypeColor/InputfieldColor.module
Normal file
355
site/modules/FieldtypeColor/InputfieldColor.module
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
<?php namespace ProcessWire;
|
||||
|
||||
/**
|
||||
* ProcessWire Color Inputfield
|
||||
*
|
||||
* @author Christoph Thelen aka @kixe 2017/07/03
|
||||
* @copyright © 2017 Christoph Thelen
|
||||
* @license Licensed under GNU/GPL v3
|
||||
* @link https://processwire.com/talk/topic/...
|
||||
* @version 1.1.7
|
||||
*
|
||||
* @since 1.0.1 2017/07/05 - better validation, spectrum options modifiable
|
||||
* @since 1.0.2 2017/07/09 - added default value option
|
||||
* @since 1.0.3 2017/07/09 - added option for custom javascript
|
||||
* @since 1.0.4 2017/08/18 - made # optional for input (pattern attribute)
|
||||
* @since 1.0.5 2017/08/28 - optimized default color handling, added output format option array()
|
||||
* @since 1.0.6 2017/12/17 - modified render() for usage in modules config
|
||||
* @since 1.0.7 2017/12/17 - sync version number to fieldtype
|
||||
* @since 1.0.8 2018/08/31 - added functions getTextColor() convertColorName()
|
||||
* @since 1.0.9 2019/01/12 - fixed number format bug for rgba() and hsla() alpha channel if comma is forced as decimal separator by locale settings, added data-input-type attribute for better JS handling
|
||||
* @since 1.1.0 2019/08/12 - better input check formatColorString()
|
||||
* @since 1.1.1 2019/09/01 - fixed bug missing opacity if 0
|
||||
* @since 1.1.2 2019/09/04 - fixed bug #5 FieldtypeColor index typo in var in function RGB2HSL() thanks to @junoforno
|
||||
* @since 1.1.3 2019/10/10 - fixed bug #1 InputfieldColor - remove pattern attribute if spectrum color picker is used to prevent error in Chrome
|
||||
* @since 1.1.4 2020/05/15 switched to ProcessWire namespace
|
||||
* @since 1.1.5 2021/10/10 set field value to 0 if the color parameter is null as a result of showEmpty option enabled on spectrum, bugfix (workaround): something went wrong in javascript spectrum
|
||||
* @since 1.1.6 added option to disable alpha channel for spectrum color picker
|
||||
* @since 1.1.7 2024/03/27 fixed PHP 8.1 deprecation warning on strlen()
|
||||
*
|
||||
* made for ProcessWire 3.x by Ryan Cramer
|
||||
* https://processwire.com
|
||||
*
|
||||
* @todo
|
||||
* - include i18n support provided by spectrum color picker
|
||||
*
|
||||
*/
|
||||
|
||||
class InputfieldColor extends Inputfield {
|
||||
|
||||
public static function getModuleInfo() {
|
||||
return array(
|
||||
'title' => __('Color', __FILE__), // Module Title
|
||||
'summary' => __('Inputfield for colors', __FILE__), // Module Summary
|
||||
'version' => 117,
|
||||
'href' => 'https://processwire.com/talk/topic/16679-fieldtypecolor/'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Construct
|
||||
*
|
||||
* @throws WireException
|
||||
*
|
||||
*/
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->set('icon', 'paint-brush');
|
||||
$this->setAttribute('type', 'text');
|
||||
$this->setAttribute('size', 10);
|
||||
$this->setAttribute('placeholder', '#000000');
|
||||
$this->setAttribute('pattern', '(#?[a-fA-F\d]{6})?');
|
||||
}
|
||||
|
||||
public function init() {
|
||||
$this->inputType = 0;
|
||||
$this->spectrum = '';
|
||||
$this->initJS = '';
|
||||
$this->fileJS = '';
|
||||
$this->fileCSS = '';
|
||||
$this->jqueryCore = 0;
|
||||
$this->jqueryUI = 0;
|
||||
$this->alpha = 0; // int 0, 1 will be set dependend on inputType. To disable explicitly for inputType = 3 (spectrum color picker) set bool false
|
||||
parent::init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Called before the render method
|
||||
* checking for SpectrumColorPicker
|
||||
*
|
||||
* @param Inputfield $parent
|
||||
* @param bool $renderValueMode
|
||||
* @return $this
|
||||
*
|
||||
*/
|
||||
public function renderReady(Inputfield $parent = null, $renderValueMode = false) {
|
||||
$url = $this->config->urls->get('InputfieldColor');
|
||||
switch ($this->inputType) {
|
||||
case 3:
|
||||
$this->wire('modules')->get('JqueryCore');
|
||||
$this->config->scripts->add($url . 'spectrum/spectrum.js');
|
||||
$this->config->styles->add($url . 'spectrum/spectrum.css');
|
||||
break;
|
||||
case 4:
|
||||
if ($this->jqueryCore) $this->wire('modules')->get('JqueryCore');
|
||||
if ($this->jqueryUI) $this->wire('modules')->get('JqueryUI');
|
||||
if ($this->fileJS) $this->config->scripts->add($url . $this->fileJS);
|
||||
if ($this->fileCSS) $this->config->styles->add($url . $this->fileCSS);
|
||||
break;
|
||||
}
|
||||
parent::renderReady($parent, $renderValueMode);
|
||||
}
|
||||
|
||||
/**
|
||||
* get textcolor (light or dark) corresponding to the background for better contrast
|
||||
*
|
||||
* @param int/string $bgColor expecting string or int with 6 (24bit) or 8 (32bit) digits with or without leading '#'
|
||||
* @param int/string $textColorLight default: '#fff' (white)
|
||||
* @param int/string $textColorDark default: '#000' (black)
|
||||
* @return string $color light or dark
|
||||
*
|
||||
*/
|
||||
public function getTextColor($bgColor, $textColorLight = '#fff', $textColorDark = '#000') {
|
||||
if (!is_string($bgColor)) return $textColorDark;
|
||||
else if (!ctype_xdigit(ltrim($bgColor, '#'))) {
|
||||
$bgColor = $this->convertColorName($bgColor);
|
||||
if (false === $bgColor) return $textColorDark;
|
||||
}
|
||||
$bgColor = ltrim($bgColor, '#');
|
||||
$bgColor = str_pad($bgColor,8,'f',STR_PAD_LEFT);
|
||||
$ARGB = array_map('hexdec', str_split($bgColor, 2));
|
||||
$opacity = round($ARGB[0] / 255, 2);
|
||||
if ($opacity < 0.45) return $textColorDark;
|
||||
return ($ARGB[1]+6*$ARGB[2]+$ARGB[3])*3/8 > 460? $textColorDark : $textColorLight;
|
||||
}
|
||||
|
||||
/**
|
||||
* convert color name (hex -> html, html -> hex)
|
||||
*
|
||||
* @param $color
|
||||
* @param $to convert to 'hex' or 'html'
|
||||
* @return bool/ string
|
||||
*
|
||||
*/
|
||||
public function convertColorName($color, $to = 'hex') {
|
||||
$colorArray = $this->getX11ColorArray();
|
||||
if ($to = 'hex') {
|
||||
$key = array_search($color, array_column($colorArray, 0));
|
||||
return empty($colorArray[$key][1])? false : $colorArray[$key][1];
|
||||
}
|
||||
else if ($to = 'html') {
|
||||
$key = array_search($color, array_column($colorArray, 1));
|
||||
return empty($colorArray[$key][0])? false : $colorArray[$key][0];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* get multiple array with html color names and corresponding hex codes and rgb values
|
||||
*
|
||||
* @param $domain
|
||||
* @param $path file path
|
||||
* @return boolean
|
||||
*
|
||||
*/
|
||||
protected function getX11ColorArray() {
|
||||
$path = __DIR__ .'/x11color.txt';
|
||||
if (!file_exists($path)) throw new WireException("Missing file " . $path);
|
||||
$array = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
|
||||
if ($array === false) throw new WireException("Failed to open file: $path");
|
||||
return array_map(function($e) {
|
||||
return explode("\t", $e);
|
||||
}, $array);
|
||||
}
|
||||
|
||||
public function ___render() {
|
||||
if ($this->value === "" && strlen($this->initValue ?? '')) $this->value = $this->initValue;
|
||||
if (!$this->value) $this->value = null;
|
||||
|
||||
if ($this->value) {
|
||||
$this->value = str_pad(ltrim($this->value, '#'),8,'f',STR_PAD_LEFT);
|
||||
$color32 = "#".$this->value;
|
||||
$color24 = $bgColor = "#".substr($this->value,2,6);
|
||||
$value = array_map('hexdec', str_split($this->value, 2));
|
||||
} else {
|
||||
$color32 = $color24 = null;
|
||||
$value = array(255,255,255,255);
|
||||
$bgColor = '#fff';
|
||||
}
|
||||
|
||||
$opacity = round($value[0] / 255, 2);
|
||||
$opacity = $opacity? rtrim(number_format($opacity, 2, '.', ''),'.0') : '0';
|
||||
|
||||
$textColor = $this->getTextColor($this->value);
|
||||
$rgba = "rgba($value[1], $value[2], $value[3], $opacity)";
|
||||
$this->attr('value', $color24);
|
||||
$this->attr('data-input-type', $this->inputType);
|
||||
|
||||
switch ($this->inputType) {
|
||||
case 0:
|
||||
$this->attr('type', 'color');
|
||||
break;
|
||||
case 1:
|
||||
$this->attr('style', "color: $textColor; background: $bgColor;");
|
||||
break;
|
||||
case 2:
|
||||
$this->alpha = 1;
|
||||
$this->attr('value', $color32);
|
||||
$this->attr('style', "color: $textColor; background: $bgColor; background-image: linear-gradient($rgba, $rgba), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');");
|
||||
$this->attr('placeholder', '#ff000000');
|
||||
$this->attr('pattern', '(#?[a-fA-F\d]{8})?');
|
||||
break;
|
||||
case 3:
|
||||
if ($this->alpha !== false) $this->alpha = 1;
|
||||
if (!$color32) $color32 = '#00000000';
|
||||
$this->attr('value', $color32);
|
||||
$this->attr('placeholder', '#ff000000');
|
||||
$this->removeAttr('pattern');
|
||||
break;
|
||||
case 4:
|
||||
if ($this->alpha) $this->attr('value', $color32);
|
||||
else $this->attr('value', $color24);
|
||||
}
|
||||
|
||||
$attrs = $this->getAttributes();
|
||||
|
||||
$out = "<input " . $this->getAttributesString($attrs) . " />";
|
||||
if( $this->inputType == 3) {
|
||||
$options = $this->spectrum? str_replace(array(",\n","\n"),", ", trim($this->spectrum,",\t\n\r\0\x0B")).',' : '';
|
||||
$value = $color32? $color32 : null;
|
||||
$format = $this->alpha? 'toHex8String' : 'toHexString';
|
||||
$out .= "<script>
|
||||
$(\"#$this->id\").spectrum({
|
||||
$options
|
||||
color: \"$value\",
|
||||
change: function(color) {
|
||||
if (color === null) {
|
||||
this.value = 0;
|
||||
} else {
|
||||
this.value = color.$format();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
";
|
||||
}
|
||||
if( $this->inputType == 4) {
|
||||
$value = $color32? $color32 : null;
|
||||
if ($this->initJS) {
|
||||
$initJS = str_replace(array("{value}","{id}"), array($color24, $this->id), $this->initJS);
|
||||
$out .= "<script>
|
||||
$initJS
|
||||
</script>
|
||||
";
|
||||
}
|
||||
}
|
||||
return $out;
|
||||
}
|
||||
|
||||
public function ___processInput(WireInputData $input) {
|
||||
parent::___processInput($input);
|
||||
$value = $this->attr('value');
|
||||
if (!$value) return $this;
|
||||
// bugfix (workaround): something went wrong in javascript spectrum
|
||||
if (is_string($value) && in_array($value, ['hsva(0, 0%, 0%, 0)','hsla(0, 0%, 0%, 0)','rgba(0, 0, 0, 0)'])) {
|
||||
$this->attr('value', '00000000');
|
||||
return $this;
|
||||
}
|
||||
$pattern = $this->alpha? '/#?[a-fA-F\d]{8}/' : '/#?[a-fA-F\d]{6}/';
|
||||
if(!preg_match($pattern, $value)) $this->error("Submitted value: $value does not match required pattern: $pattern.");
|
||||
return $this;
|
||||
|
||||
}
|
||||
|
||||
public function getConfigInputfields() {
|
||||
$inputfields = parent::getConfigInputfields();
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldRadios');
|
||||
$f->attr('name', 'inputType');
|
||||
$f->label = $this->_('Inputfieldtype');
|
||||
$f->addOption(0, $this->_('Inputfield type=\'color\' (HTML5 - limited browser support)'));
|
||||
$f->addOption(1, $this->_('Inputfield type=\'text\' expects 24bit hexcode strings'));
|
||||
$f->addOption(2, $this->_('Inputfield type=\'text\' expects 32bit hexcode strings (alpha channel)'));
|
||||
$f->addOption(3, $this->_('Inputfield with Spectrum Color Picker (JavaScript)'));
|
||||
$f->addOption(4, $this->_('Inputfield type=\'text\' with custom JavaScript and/or CSS'));
|
||||
$f->attr('value', $this->inputType);
|
||||
$f->description = $this->_('');
|
||||
$f->columnWidth = 50;
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldTextarea');
|
||||
$f->attr('name', 'spectrum');
|
||||
$f->attr('rows', 10);
|
||||
$f->label = $this->_('Color Picker Options');
|
||||
$f->attr('value', $this->spectrum);
|
||||
$f->description = $this->_('Set or modify options for the **Spectrum Color Picker**. [Read more ...](https://bgrins.github.io/spectrum/#options)');
|
||||
$f->notes = $this->_("One option per line in the format: 'option: value'. The options: 'color' and 'change' are used by the system and not modifiable.");
|
||||
$f->columnWidth = 50;
|
||||
$f->showIf = "inputType=3";
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldTextarea');
|
||||
$f->attr('name', 'initJS');
|
||||
$f->attr('rows', 3);
|
||||
$f->label = $this->_('Initial JS');
|
||||
$f->attr('value', $this->initJS);
|
||||
$f->description = $this->_('JavaScript code initiating your custom JS color picker. Use {id} and {value} as placeholders for the related field attributes in your selector');
|
||||
$f->notes = sprintf($this->_('{id} will be replaced by the string "%s"'), $this->id);
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$f->requiredIf = "inputType=4";
|
||||
$inputfields->add($f);
|
||||
|
||||
$rootUrl = $this->config->urls->get('InputfieldColor');
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldURL');
|
||||
$f->attr('name', 'fileJS');
|
||||
$f->label = $this->_('Include JS File');
|
||||
$f->attr('value', $this->fileJS);
|
||||
$f->description = $this->_('Set the path to your custom JavaScript file.');
|
||||
$f->notes = sprintf($this->_('URL string relative to "%s"'), $rootUrl);
|
||||
$f->columnWidth = 34;
|
||||
$f->showIf = "inputType=4";
|
||||
$f->requiredIf = "inputType=4";
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->wire('modules')->get('InputfieldURL');
|
||||
$f->attr('name', 'fileCSS');
|
||||
$f->label = $this->_('Include CSS File');
|
||||
$f->attr('value', $this->fileCSS);
|
||||
$f->description = $this->_('Set the path to your custom stylesheet file.');
|
||||
$f->notes = sprintf($this->_('URL string relative to "%s"'), $rootUrl);
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$f->requiredIf = "inputType=4";
|
||||
$inputfields->add($f);
|
||||
|
||||
$f = $this->modules->get('InputfieldCheckbox');
|
||||
$f->attr('name', 'jqueryCore');
|
||||
$f->label = __('Enable JqueryCore');
|
||||
$f->attr('checked', $this->jqueryCore ? 'checked' : '' );
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$inputfields->append($f);
|
||||
|
||||
$f = $this->modules->get('InputfieldCheckbox');
|
||||
$f->attr('name', 'jqueryUI');
|
||||
$f->label = __('Enable JqueryUI');
|
||||
$f->attr('checked', $this->jqueryUI ? 'checked' : '' );
|
||||
$f->columnWidth = 34;
|
||||
$f->showIf = "inputType=4";
|
||||
$inputfields->append($f);
|
||||
|
||||
$f = $this->modules->get('InputfieldRadios');
|
||||
$f->attr('name', 'alpha');
|
||||
$f->addOption(0, $this->_('6 digits "#ff0000"'));
|
||||
$f->addOption(1, $this->_('8 digits "#ffff0000" (leading alpha channel)'));
|
||||
$f->label = __('Select value type');
|
||||
$f->attr('value', $this->alpha);
|
||||
$f->columnWidth = 33;
|
||||
$f->showIf = "inputType=4";
|
||||
$inputfields->append($f);
|
||||
|
||||
return $inputfields;
|
||||
}
|
||||
}
|
||||
107
site/modules/FieldtypeColor/README.md
Normal file
107
site/modules/FieldtypeColor/README.md
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
FieldtypeColor
|
||||
==============
|
||||
|
||||
## Fieldtype/Inputfield for ProcessWire 3.0
|
||||
|
||||
Field that stores colors. Many options for Input (HTML5 Inputfield Color, Textfield with changing background, various jQuery/JS ColorPickers, custom jQuery/JS/CSS) and Output (RGB, RGBA, HSL, HSLA, HEX). Package includes Fieldtype Color Select.
|
||||
|
||||
## Inputfield
|
||||
Select between **5 types of Inputfields**
|
||||
|
||||
+ Html5 Inputfield of type='color' (if supported by browser)
|
||||
+ Inputfield type='text' expecting a 24bit hexcode string (RGB). Input format: *'#4496dd'*
|
||||
The background color of the input fields shows selected color
|
||||
+ Inputfield of type='text' expecting 32bit hexcode strings (RGB + alpha channel) Input format: *'#fa4496dd'*
|
||||
+ Inputfield with **Spectrum Color Picker** (JavaScript)
|
||||
Options modifiable
|
||||
+ Inputfield type='text' with **custom JavaScript** and/or CSS
|
||||
|
||||
|
||||
## Output
|
||||
|
||||
Define output format under **Details** - Tab in field settings. Select from the following options:
|
||||
|
||||
+ *string* 6-digit hex color. Example: **'#4496dd'**
|
||||
+ *string* 8-digit hex color with leading Alpha channel (limited browser support). Example: **'#fa4496dd'**
|
||||
+ *string* CSS color value **RGB**. Example: **'rgb(68, 100, 221)'**
|
||||
+ *string* CSS color value **RGBA**. Example: **'rgba(68, 100, 221, 0.98)'**
|
||||
+ *string* CSS color value **HSL**. Example: **'hsl(227, 69.2%, 56.7%)'**
|
||||
+ *string* CSS color value **HSLA**. Example: **'hsla(227, 69.2%, 56.7%, 0.98)'**
|
||||
+ *string* 32bit raw hex value. Example: **'fa4496dd'** (unformatted output value)
|
||||
+ *int 32bit*. Example: **'4198799069'** (storage value)
|
||||
+ *array(R,G,B)*
|
||||
+ *array(R,G,B,Alpha)*
|
||||
+ *array(H,S,L)*
|
||||
+ *array(H,S,L,Alpha)*
|
||||
|
||||
|
||||
```
|
||||
array(
|
||||
[0] => 0-255, // opacity
|
||||
[1],['r'] => 0-255,
|
||||
[2],['g'] => 0-255,
|
||||
[3],['b'] => 0-255,
|
||||
['rx'] => 00-ff,
|
||||
['gx'] => 00-ff,
|
||||
['bx'] => 00-ff,
|
||||
['ox'] => 00-ff, // opacity
|
||||
['o'] => 0-1 // opacity
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
## Templates & API
|
||||
You can always modify values or output format via ProcessWire API.
|
||||
|
||||
**Modify output format**
|
||||
|
||||
```
|
||||
$f = $page->fields->get('myColorField');
|
||||
$f->outputFormat = 8;
|
||||
echo $page->color['rx'];
|
||||
```
|
||||
|
||||
**Modify values**
|
||||
|
||||
+ Delete the page field value by setting empty string or *NULL*.
|
||||
+ The values (int) 0, (string) '0', '00000000' and '#00000000' are similar and stored as (int) 0 (black, full transparent).
|
||||
|
||||
```
|
||||
$page->of(false);
|
||||
$page->myColorField = 'ff0000'; // red
|
||||
$page->save('myColorField');
|
||||
```
|
||||
|
||||
## Notes
|
||||
**Deleting values** is only possible with inputfields of type='text' and via API.
|
||||
|
||||
If a **default value** is set, the field is filled with it if the field is empty (for example on newly created pages).
|
||||
If Inputfield of type='text' 32bit is selected you can set the value to '#00000000' and the default value will be ignored.
|
||||
|
||||
The Fieldtype includes
|
||||
[**Spectrum Color Picker** by Brian Grinstead](https://github.com/bgrins/spectrum)
|
||||
|
||||
Any custom Javascript based Inputfield can be used.
|
||||
|
||||
If the **Inputfield** is **used as is** e.g. for Module Settings, the following properties are provided:
|
||||
|
||||
```
|
||||
$f->wire('modules')->get('InputfieldColor);
|
||||
$f->inputType = 0; // int 0 - 4
|
||||
$f->alpha = 0; // int 0 or 1, will be set automatically dependend on inputType. To disable explicitly for inputType = 3 (spectrum color picker) set to bool false
|
||||
$f->spectrum = ''; // options for spectrum Color Picker if inputType = 3 @see https://bgrins.github.io/spectrum/
|
||||
|
||||
// properties for inputType = 4 only
|
||||
$f->initJS = ''; // initial JS
|
||||
$f->fileJS = ''; // path to JS file
|
||||
$f->fileCSS = ''; // path to CSS file
|
||||
$f->jqueryCore = 0; // enable jqueryCore
|
||||
$f->jqueryUI = 0; // enable jqueryUI
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Fieldtype Select Color Options
|
||||
==============================
|
||||
|
||||
This fieldtype is included in the package. The module is an extension of the Core **FieldtypeOptions** module and offers colors as predefined selectable options via 4 different input field types (Select, SelectMultiple, Checkboxes and Radios).
|
||||
143
site/modules/FieldtypeColor/colornames.json
Normal file
143
site/modules/FieldtypeColor/colornames.json
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
{
|
||||
"AliceBlue": "f0f8ff",
|
||||
"AntiqueWhite": "faebd7",
|
||||
"Aqua": "00ffff",
|
||||
"AquaMarine": "7fffd4",
|
||||
"Azure": "f0ffff",
|
||||
"Beige": "f5f5dc",
|
||||
"Bisque": "ffe4c4",
|
||||
"Black": "000000",
|
||||
"BlanchedAlmond": "ffebcd",
|
||||
"Blue": "0000ff",
|
||||
"BlueViolet": "8a2be2",
|
||||
"Brown": "a52a2a",
|
||||
"BurlyWood": "deb887",
|
||||
"CadetBlue": "5f9ea0",
|
||||
"Chartreuse": "7fff00",
|
||||
"Chocolate": "d2691e",
|
||||
"Coral": "ff7f50",
|
||||
"CornFlowerBlue": "6495ed",
|
||||
"Cornsilk": "fff8dc",
|
||||
"Crimson": "dc143c",
|
||||
"Cyan": "00ffff",
|
||||
"DarkBlue": "00008b",
|
||||
"DarkCyan": "008b8b",
|
||||
"DarkGoldenRod": "b8860b",
|
||||
"DarkGray": "a9a9a9",
|
||||
"DarkGreen": "006400",
|
||||
"DarkKhaki": "bdb76b",
|
||||
"DarkMagenta": "8b008b",
|
||||
"DarkOliveGreen": "556b2f",
|
||||
"DarkOrange": "ff8c00",
|
||||
"DarkOrchid": "9932cc",
|
||||
"DarkRed": "8b0000",
|
||||
"DarkSalmon": "e9967a",
|
||||
"DarkSeaGreen": "8fbc8f",
|
||||
"DarkSlateBlue": "483d8b",
|
||||
"DarkSlateGray": "2f4f4f",
|
||||
"DarkTurquoise": "00ced1",
|
||||
"DarkViolet": "9400d3",
|
||||
"DeepPink": "ff1493",
|
||||
"DeepSkyBlue": "00bfff",
|
||||
"DimGray": "696969",
|
||||
"DodgerBlue": "1e90ff",
|
||||
"FireBrick": "b22222",
|
||||
"FloralWhite": "fffaf0",
|
||||
"ForestGreen": "228b22",
|
||||
"Fuchsia": "ff00ff",
|
||||
"Gainsboro": "dcdcdc",
|
||||
"GhostWhite": "f8f8ff",
|
||||
"Gold": "ffd700",
|
||||
"GoldenRod": "daa520",
|
||||
"Gray": "808080",
|
||||
"Green": "008000",
|
||||
"GreenYellow": "adff2f",
|
||||
"HoneyDew": "f0fff0",
|
||||
"HotPink": "ff69b4",
|
||||
"IndianRed": "cd5c5c",
|
||||
"Indigo": "4b0082",
|
||||
"Ivory": "fffff0",
|
||||
"Khaki": "f0e68c",
|
||||
"Lavender": "e6e6fa",
|
||||
"LavenderBlush": "fff0f5",
|
||||
"LawnGreen": "7cfc00",
|
||||
"LemonChiffon": "fffacd",
|
||||
"LightBlue": "add8e6",
|
||||
"LightCoral": "f08080",
|
||||
"LightCyan": "e0ffff",
|
||||
"LightGoldenrodYellow": "fafad2",
|
||||
"LightGray": "d3d3d3",
|
||||
"LightGreen": "90ee90",
|
||||
"LightPink": "ffb6c1",
|
||||
"LightSalmon": "ffa07a",
|
||||
"LightSeaGreen": "20b2aa",
|
||||
"LightSkyBlue": "87cefa",
|
||||
"LightSlateGray": "778899",
|
||||
"LightSteelBlue": "b0c4de",
|
||||
"LightYellow": "ffffe0",
|
||||
"Lime": "00ff00",
|
||||
"LimeGreen": "32cd32",
|
||||
"Linen": "faf0e6",
|
||||
"Magenta": "ff00ff",
|
||||
"Maroon": "800000",
|
||||
"MediumAquaMarine": "66cdaa",
|
||||
"MediumBlue": "0000cd",
|
||||
"MediumOrchid": "ba55d3",
|
||||
"MediumPurple": "9370d8",
|
||||
"MediumSeaGreen": "3cb371",
|
||||
"MediumSlateBlue": "7b68ee",
|
||||
"MediumSpringGreen": "00fa9a",
|
||||
"MediumTurquoise": "48d1cc",
|
||||
"MediumVioletRed": "c71585",
|
||||
"MidnightBlue": "191970",
|
||||
"MintCream": "f5fffa",
|
||||
"MistyRose": "ffe4e1",
|
||||
"Moccasin": "ffe4b5",
|
||||
"NavajoWhite": "ffdead",
|
||||
"Navy": "000080",
|
||||
"OldLace": "fdf5e6",
|
||||
"Olive": "808000",
|
||||
"OliveDrab": "6b8e23",
|
||||
"Orange": "ffa500",
|
||||
"OrangeRed": "ff4500",
|
||||
"Orchid": "da70d6",
|
||||
"PaleGoldenRod": "eee8aa",
|
||||
"PaleGreen": "98fb98",
|
||||
"PaleTurquoise": "afeeee",
|
||||
"PaleVioletRed": "db7093",
|
||||
"PapayaWhip": "ffefd5",
|
||||
"PeachPuff": "ffdab9",
|
||||
"Peru": "cd853f",
|
||||
"Pink": "ffc0cb",
|
||||
"Plum": "dda0dd",
|
||||
"PowderBlue": "b0e0e6",
|
||||
"Purple": "800080",
|
||||
"RebeccaPurple":"663399",
|
||||
"Red": "ff0000",
|
||||
"RosyBrown": "bc8f8f",
|
||||
"RoyalBlue": "4169e1",
|
||||
"SaddleBrown": "8b4513",
|
||||
"Salmon": "fa8072",
|
||||
"SandyBrown": "f4a460",
|
||||
"SeaGreen": "2e8b57",
|
||||
"SeaShell": "fff5ee",
|
||||
"Sienna": "a0522d",
|
||||
"Silver": "c0c0c0",
|
||||
"SkyBlue": "87ceeb",
|
||||
"SlateBlue": "6a5acd",
|
||||
"SlateGray": "708090",
|
||||
"Snow": "fffafa",
|
||||
"SpringGreen": "00ff7f",
|
||||
"SteelBlue": "4682b4",
|
||||
"Tan": "d2b48c",
|
||||
"Teal": "008080",
|
||||
"Thistle": "d8bfd8",
|
||||
"Tomato": "ff6347",
|
||||
"Turquoise": "40e0d0",
|
||||
"Violet": "ee82ee",
|
||||
"Wheat": "f5deb3",
|
||||
"White": "ffffff",
|
||||
"WhiteSmoke": "f5f5f5",
|
||||
"Yellow": "ffff00",
|
||||
"YellowGreen": "9acd32"
|
||||
}
|
||||
507
site/modules/FieldtypeColor/spectrum/spectrum.css
Normal file
507
site/modules/FieldtypeColor/spectrum/spectrum.css
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
/***
|
||||
Spectrum Colorpicker v1.8.1
|
||||
https://github.com/bgrins/spectrum
|
||||
Author: Brian Grinstead
|
||||
License: MIT
|
||||
***/
|
||||
|
||||
.sp-container {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display:inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||
z-index: 9999994;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fix for * { box-sizing: border-box; } */
|
||||
.sp-container,
|
||||
.sp-container * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
|
||||
.sp-top {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
display:inline-block;
|
||||
}
|
||||
.sp-top-inner {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
.sp-color {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:20%;
|
||||
}
|
||||
.sp-hue {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-hue {
|
||||
top:33px;
|
||||
height: 77.5%;
|
||||
}
|
||||
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
.sp-sat, .sp-val {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
.sp-alpha-enabled .sp-top {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.sp-alpha-enabled .sp-alpha {
|
||||
display: block;
|
||||
}
|
||||
.sp-alpha-handle {
|
||||
position:absolute;
|
||||
top:-4px;
|
||||
bottom: -4px;
|
||||
width: 6px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
.sp-alpha {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 8px;
|
||||
}
|
||||
.sp-alpha-inner {
|
||||
border: solid 1px #333;
|
||||
}
|
||||
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-clear.sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Don't allow text selection */
|
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select: -moz-none;
|
||||
-o-user-select:none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-input-disabled .sp-input-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-buttons-disabled .sp-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-only .sp-picker-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-disabled .sp-palette-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
|
||||
/* IE filters do not support multiple color stops.
|
||||
Generate 6 divs, line them up, and do two color gradients for each.
|
||||
Yes, really.
|
||||
*/
|
||||
.sp-1 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
|
||||
.sp-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Clearfix hack */
|
||||
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
|
||||
.sp-cf:after { clear: both; }
|
||||
.sp-cf { *zoom: 1; }
|
||||
|
||||
/* Mobile devices, make hue slider bigger so it is easier to slide */
|
||||
@media (max-device-width: 480px) {
|
||||
.sp-color { right: 40%; }
|
||||
.sp-hue { left: 63%; }
|
||||
.sp-fill { padding-top: 60%; }
|
||||
}
|
||||
.sp-dragger {
|
||||
border-radius: 5px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top:0;
|
||||
cursor:pointer;
|
||||
height: 3px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
border: 1px solid #000;
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
/*
|
||||
Theme authors:
|
||||
Here are the basic themeable display options (colors, fonts, global widths).
|
||||
See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
*/
|
||||
|
||||
.sp-container {
|
||||
border-radius: 0;
|
||||
background-color: #ECECEC;
|
||||
border: solid 1px #f0c49B;
|
||||
padding: 0;
|
||||
}
|
||||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
|
||||
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sp-top {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.sp-color, .sp-hue, .sp-clear {
|
||||
border: solid 1px #666;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.sp-input-container {
|
||||
float:right;
|
||||
width: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sp-initial-disabled .sp-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
.sp-input {
|
||||
font-size: 12px !important;
|
||||
border: 1px inset;
|
||||
padding: 4px 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background:transparent;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
}
|
||||
.sp-input:focus {
|
||||
border: 1px solid orange;
|
||||
}
|
||||
.sp-input.sp-validation-error {
|
||||
border: 1px solid red;
|
||||
background: #fdd;
|
||||
}
|
||||
.sp-picker-container , .sp-palette-container {
|
||||
float:left;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-bottom: 300px;
|
||||
margin-bottom: -290px;
|
||||
}
|
||||
.sp-picker-container {
|
||||
width: 172px;
|
||||
border-left: solid 1px #fff;
|
||||
}
|
||||
|
||||
/* Palettes */
|
||||
.sp-palette-container {
|
||||
border-right: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.sp-palette-only .sp-palette-container {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-el {
|
||||
display: block;
|
||||
position:relative;
|
||||
float:left;
|
||||
width: 24px;
|
||||
height: 15px;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
border:solid 2px transparent;
|
||||
}
|
||||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
border-color: orange;
|
||||
}
|
||||
.sp-thumb-el {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.sp-initial {
|
||||
float: left;
|
||||
border: solid 1px #333;
|
||||
}
|
||||
.sp-initial span {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border:none;
|
||||
display:block;
|
||||
float:left;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.sp-initial .sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.sp-palette-button-container,
|
||||
.sp-button-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
.sp-replacer {
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
padding: 4px;
|
||||
display:inline-block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
border: solid 1px #91765d;
|
||||
background: #eee;
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
border-color: #F0C49B;
|
||||
color: #111;
|
||||
}
|
||||
.sp-replacer.sp-disabled {
|
||||
cursor:default;
|
||||
border-color: silver;
|
||||
color: silver;
|
||||
}
|
||||
.sp-dd {
|
||||
padding: 2px 0;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
float:left;
|
||||
font-size:10px;
|
||||
}
|
||||
.sp-preview {
|
||||
position:relative;
|
||||
width:25px;
|
||||
height: 20px;
|
||||
border: solid 1px #222;
|
||||
margin-right: 5px;
|
||||
float:left;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sp-palette {
|
||||
*width: 220px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.sp-palette .sp-thumb-el {
|
||||
width:16px;
|
||||
height: 16px;
|
||||
margin:2px 1px;
|
||||
border: solid 1px #d0d0d0;
|
||||
}
|
||||
|
||||
.sp-container {
|
||||
padding-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/* Buttons: http://hellohappy.org/css3-buttons/ */
|
||||
.sp-container button {
|
||||
background-color: #eeeeee;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 5px 4px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-container button:hover {
|
||||
background-color: #dddddd;
|
||||
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
|
||||
border: 1px solid #bbb;
|
||||
border-bottom: 1px solid #999;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #ddd;
|
||||
}
|
||||
.sp-container button:active {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: 1px solid #888;
|
||||
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
}
|
||||
.sp-cancel {
|
||||
font-size: 11px;
|
||||
color: #d93f3f !important;
|
||||
margin:0;
|
||||
padding:2px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
.sp-cancel:hover {
|
||||
color: #d93f3f !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.sp-preview, .sp-alpha, .sp-thumb-el {
|
||||
position:relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-inner {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-clear-display {
|
||||
background-repeat:no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
|
||||
}
|
||||
2341
site/modules/FieldtypeColor/spectrum/spectrum.js
Normal file
2341
site/modules/FieldtypeColor/spectrum/spectrum.js
Normal file
File diff suppressed because it is too large
Load diff
143
site/modules/FieldtypeColor/x11color.txt
Normal file
143
site/modules/FieldtypeColor/x11color.txt
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
indianred #CD5C5C 205,92,92
|
||||
lightcoral #F08080 240,128,128
|
||||
salmon #FA8072 250,128,114
|
||||
darksalmon #E9967A 233,150,122
|
||||
lightsalmon #FFA07A 255,160,122
|
||||
crimson #DC143C 220,20,60
|
||||
red #FF0000 255,0,0
|
||||
firebrick #B22222 178,34,34
|
||||
darkred #8B0000 139,0,0
|
||||
pink #FFC0CB 255,192,203
|
||||
lightpink #FFB6C1 255,182,193
|
||||
hotpink #FF69B4 255,105,180
|
||||
deeppink #FF1493 255,20,147
|
||||
mediumvioletred #C71585 199,21,133
|
||||
palevioletred #DB7093 219,112,147
|
||||
lightsalmon #FFA07A 255,160,122
|
||||
coral #FF7F50 255,127,80
|
||||
tomato #FF6347 255,99,71
|
||||
orangered #FF4500 255,69,0
|
||||
darkorange #FF8C00 255,140,0
|
||||
orange #FFA500 255,165,0
|
||||
gold #FFD700 255,215,0
|
||||
yellow #FFFF00 255,255,0
|
||||
lightyellow #FFFFE0 255,255,224
|
||||
lemonchiffon #FFFACD 255,250,205
|
||||
lightgoldenrodyellow #FAFAD2 250,250,210
|
||||
papayawhip #FFEFD5 255,239,213
|
||||
moccasin #FFE4B5 255,228,181
|
||||
peachpuff #FFDAB9 255,218,185
|
||||
palegoldenrod #EEE8AA 238,232,170
|
||||
khaki #F0E68C 240,230,140
|
||||
darkkhaki #BDB76B 189,183,107
|
||||
lavender #E6E6FA 230,230,250
|
||||
thistle #D8BFD8 216,191,216
|
||||
plum #DDA0DD 221,160,221
|
||||
violet #EE82EE 238,130,238
|
||||
orchid #DA70D6 218,112,214
|
||||
fuchsia #FF00FF 255,0,255
|
||||
magenta #FF00FF 255,0,255
|
||||
mediumorchid #BA55D3 186,85,211
|
||||
mediumpurple #9370DB 147,112,219
|
||||
blueviolet #8A2BE2 138,43,226
|
||||
darkviolet #9400D3 148,0,211
|
||||
darkorchid #9932CC 153,50,204
|
||||
darkmagenta #8B008B 139,0,139
|
||||
purple #800080 128,0,128
|
||||
indigo #4B0082 75,0,130
|
||||
slateblue #6A5ACD 106,90,205
|
||||
darkslateblue #483D8B 72,61,139
|
||||
mediumslateblue #7B68EE 123,104,238
|
||||
greenyellow #ADFF2F 173,255,47
|
||||
chartreuse #7FFF00 127,255,0
|
||||
lawngreen #7CFC00 124,252,0
|
||||
lime #00FF00 0,255,0
|
||||
limegreen #32CD32 50,205,50
|
||||
palegreen #98FB98 152,251,152
|
||||
lightgreen #90EE90 144,238,144
|
||||
mediumspringgreen #00FA9A 0,250,154
|
||||
springgreen #00FF7F 0,255,127
|
||||
mediumseagreen #3CB371 60,179,113
|
||||
seagreen #2E8B57 46,139,87
|
||||
forestgreen #228B22 34,139,34
|
||||
green #008000 0,128,0
|
||||
darkgreen #006400 0,100,0
|
||||
yellowgreen #9ACD32 154,205,50
|
||||
olivedrab #6B8E23 107,142,35
|
||||
olive #808000 128,128,0
|
||||
darkolivegreen #556B2F 85,107,47
|
||||
mediumaquamarine #66CDAA 102,205,170
|
||||
darkseagreen #8FBC8F 143,188,143
|
||||
lightseagreen #20B2AA 32,178,170
|
||||
darkcyan #008B8B 0,139,139
|
||||
teal #008080 0,128,128
|
||||
aqua #00FFFF 0,255,255
|
||||
cyan #00FFFF 0,255,255
|
||||
lightcyan #E0FFFF 224,255,255
|
||||
paleturquoise #AFEEEE 175,238,238
|
||||
aquamarine #7FFFD4 127,255,212
|
||||
turquoise #40E0D0 64,224,208
|
||||
mediumturquoise #48D1CC 72,209,204
|
||||
darkturquoise #00CED1 0,206,209
|
||||
cadetblue #5F9EA0 95,158,160
|
||||
steelblue #4682B4 70,130,180
|
||||
lightsteelblue #B0C4DE 176,196,222
|
||||
powderblue #B0E0E6 176,224,230
|
||||
lightblue #ADD8E6 173,216,230
|
||||
skyblue #87CEEB 135,206,235
|
||||
lightskyblue #87CEFA 135,206,250
|
||||
deepskyblue #00BFFF 0,191,255
|
||||
dodgerblue #1E90FF 30,144,255
|
||||
cornflowerblue #6495ED 100,149,237
|
||||
mediumslateblue #7B68EE 123,104,238
|
||||
royalblue #4169E1 65,105,225
|
||||
blue #0000FF 0,0,255
|
||||
mediumblue #0000CD 0,0,205
|
||||
darkblue #00008B 0,0,139
|
||||
navy #000080 0,0,128
|
||||
midnightblue #191970 25,25,112
|
||||
cornsilk #FFF8DC 255,248,220
|
||||
blanchedalmond #FFEBCD 255,235,205
|
||||
bisque #FFE4C4 255,228,196
|
||||
navajowhite #FFDEAD 255,222,173
|
||||
wheat #F5DEB3 245,222,179
|
||||
burlywood #DEB887 222,184,135
|
||||
tan #D2B48C 210,180,140
|
||||
rosybrown #BC8F8F 188,143,143
|
||||
sandybrown #F4A460 244,164,96
|
||||
goldenrod #DAA520 218,165,32
|
||||
darkgoldenrod #B8860B 184,134,11
|
||||
peru #CD853F 205,133,63
|
||||
chocolate #D2691E 210,105,30
|
||||
saddlebrown #8B4513 139,69,19
|
||||
sienna #A0522D 160,82,45
|
||||
brown #A52A2A 165,42,42
|
||||
maroon #800000 128,0,0
|
||||
white #FFFFFF 255,255,255
|
||||
snow #FFFAFA 255,250,250
|
||||
honeydew #F0FFF0 240,255,240
|
||||
mintcream #F5FFFA 245,255,250
|
||||
azure #F0FFFF 240,255,255
|
||||
aliceblue #F0F8FF 240,248,255
|
||||
ghostwhite #F8F8FF 248,248,255
|
||||
whitesmoke #F5F5F5 245,245,245
|
||||
seashell #FFF5EE 255,245,238
|
||||
beige #F5F5DC 245,245,220
|
||||
oldlace #FDF5E6 253,245,230
|
||||
floralwhite #FFFAF0 255,250,240
|
||||
ivory #FFFFF0 255,255,240
|
||||
antiquewhite #FAEBD7 250,235,215
|
||||
linen #FAF0E6 250,240,230
|
||||
lavenderblush #FFF0F5 255,240,245
|
||||
mistyrose #FFE4E1 255,228,225
|
||||
gainsboro #DCDCDC 220,220,220
|
||||
lightgrey #D3D3D3 211,211,211
|
||||
silver #C0C0C0 192,192,192
|
||||
darkgray #A9A9A9 169,169,169
|
||||
gray #808080 128,128,128
|
||||
dimgray #696969 105,105,105
|
||||
lightslategray #778899 119,136,153
|
||||
slategray #708090 112,128,144
|
||||
darkslategray #2F4F4F 47,79,79
|
||||
black #000000 0,0,0
|
||||
rebeccapurple #663399 102,51,153
|
||||
|
|
@ -15,7 +15,7 @@ else
|
|||
$menu = renderMenu($inicio->children);
|
||||
}
|
||||
|
||||
if(isset($_POST['enviar']))
|
||||
if($input->post('enviar'))
|
||||
{
|
||||
$correo = wireMail();
|
||||
$correo->to($configuracion['contacto_correo']);
|
||||
|
|
@ -49,6 +49,10 @@ if(isset($_POST['enviar']))
|
|||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
$contido .= 'No Enviado';
|
||||
}
|
||||
|
||||
$contido .= renderMigasPan($page) . "\n";
|
||||
$contido .= '<article id="' . $page->name .'" class="container">' . "\n";
|
||||
|
|
|
|||
|
|
@ -9,25 +9,24 @@ function getConfig($paxina)
|
|||
{
|
||||
$configuracion = array();
|
||||
|
||||
foreach($paxina->configuracion as $config)
|
||||
foreach($paxina->configuracion as $cfg)
|
||||
{
|
||||
switch ($config->parametro_tipo->value)
|
||||
switch ($cfg->parametro_tipo->value)
|
||||
{
|
||||
case 'texto':
|
||||
$configuracion[$config->parametro_nome] = $config->parametro_valor;
|
||||
$configuracion[$cfg->parametro_nome] = $cfg->parametro_valor;
|
||||
break;
|
||||
case 'cor':
|
||||
list($r, $g, $b) = sscanf($config->parametro_cor, "%02x%02x%02x");
|
||||
$configuracion[$config->parametro_nome] = $r . ', ' . $g . ', ' . $b;
|
||||
$configuracion[$cfg->parametro_nome] = $cfg->parametro_cor[0] . ", " . $cfg->parametro_cor[1] . ", " . $cfg->parametro_cor[2];
|
||||
break;
|
||||
case 'mantemento':
|
||||
if($config->parametro_mantemento==1)
|
||||
if($cfg->parametro_mantemento==1)
|
||||
{
|
||||
$configuracion['mantemento'] = array(
|
||||
'activo' => true,
|
||||
'titular' => $config->titular,
|
||||
'artigo' => $config->artigo,
|
||||
'imaxe' => $config->imaxe
|
||||
'titular' => $cfg->titular,
|
||||
'artigo' => $cfg->artigo,
|
||||
'imaxe' => $cfg->imaxe
|
||||
);
|
||||
}
|
||||
else
|
||||
|
|
@ -36,7 +35,7 @@ function getConfig($paxina)
|
|||
}
|
||||
break;
|
||||
case 'logo':
|
||||
foreach($config->imaxes as $logo)
|
||||
foreach($cfg->imaxes as $logo)
|
||||
{
|
||||
$configuracion['logo'][$logo->tags] = array(
|
||||
'url' => $logo->url,
|
||||
|
|
|
|||
Loading…
Reference in a new issue