Cambio do modulo de seleccion de cores.

site/modules/.FieldtypeColor/.gitattributes

@@ -0,0 +1,4 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+# Show correct language for ProcessWire .module
+*.module linguist-language=PHP

site/modules/.FieldtypeColor/.gitignore

@@ -0,0 +1,5 @@
+dematte/*
+jscolor-2.0.4/*
+colorpicker/*
+InputfieldColor.js
+.DS_Store

site/modules/.FieldtypeColor/FieldtypeColor.module

@@ -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();
+	}
+}

site/modules/.FieldtypeColor/InputfieldColor.css

@@ -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;
+}

site/modules/.FieldtypeColor/InputfieldColor.module

@@ -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; 
+	}
+}

site/modules/.FieldtypeColor/README.md

@@ -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).

site/modules/.FieldtypeColor/colornames.json

@@ -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"
+}

site/modules/.FieldtypeColor/spectrum/spectrum.css

@@ -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==);
+}

site/modules/.FieldtypeColor/x11color.txt

@@ -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

site/modules/ColorPicker/FieldtypeColorPicker.module

@@ -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;
-	}
-
-}

site/modules/ColorPicker/InputfieldColorPicker.js

@@ -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));
-

site/modules/ColorPicker/InputfieldColorPicker.module

@@ -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;
-	}
-
-
-}

site/modules/ColorPicker/README.md

@@ -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.
-
-
-

site/modules/ColorPicker/colorpicker/css/colorpicker.css

@@ -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;
-}

site/modules/ColorPicker/colorpicker/js/colorpicker.js

@@ -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)

site/modules/ColorPicker/colorpicker/js/colorpicker.min.js

@@ -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);

site/modules/ColorPicker/colorpicker/js/eye.js

@@ -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);

site/modules/ColorPicker/colorpicker/js/layout.js

@@ -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)

site/modules/ColorPicker/colorpicker/js/utils.js

@@ -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);

site/modules/FieldtypeColor/.gitattributes

@@ -0,0 +1,4 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+# Show correct language for ProcessWire .module
+*.module linguist-language=PHP

site/modules/FieldtypeColor/.gitignore

@@ -0,0 +1,5 @@
+dematte/*
+jscolor-2.0.4/*
+colorpicker/*
+InputfieldColor.js
+.DS_Store

site/modules/FieldtypeColor/FieldtypeColor.module

@@ -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();
+	}
+}

site/modules/FieldtypeColor/InputfieldColor.css

@@ -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;
+}

site/modules/FieldtypeColor/InputfieldColor.module

@@ -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; 
+	}
+}

site/modules/FieldtypeColor/README.md

@@ -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).

site/modules/FieldtypeColor/colornames.json

@@ -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"
+}

site/modules/FieldtypeColor/spectrum/spectrum.css

@@ -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==);
+}

site/modules/FieldtypeColor/x11color.txt

@@ -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

site/templates/contacto.php

@@ -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";

site/templates/layout/func.php

@@ -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[$cfg->parametro_nome] = $cfg->parametro_cor[0] . ", " . $cfg->parametro_cor[1] . ", " . $cfg->parametro_cor[2];
-                $configuracion[$config->parametro_nome] = $r . ', ' . $g . ', ' . $b;
                 break;
             case 'mantemento':
-                if($config->parametro_mantemento==1)
+                if($cfg->parametro_mantemento==1)
                 {
                     $configuracion['mantemento'] = array(
                         'activo' => true,
-                        'titular' => $config->titular,
+                        'titular' => $cfg->titular,
-                        'artigo' => $config->artigo,
+                        'artigo' => $cfg->artigo,
-                        'imaxe' => $config->imaxe
+                        '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,