Cabeceira e estilos basicos.

site/config-dev.php

@@ -87,6 +87,15 @@ $config->tableSalt = '56b10609254338feaeb627452cc95a2a08cfcded';
 $config->chmodDir = '2770'; // permission for directories created by ProcessWire
 $config->chmodFile = '0660'; // permission for files created by ProcessWire 
 
+/**
+ * Temporary directory for uploads
+ * 
+ * Optionally override PHP's upload_tmp_dir with your own.
+ * 
+ */
+ 
+ $config->uploadTmpDir = dirname(__FILE__) . '/assets/uploads/';
+
 /**
  * Installer: Time zone setting
  * 

site/modules/ColorPicker/FieldtypeColorPicker.module

@@ -0,0 +1,135 @@
+<?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

@@ -0,0 +1,96 @@
+/**
+ * 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

@@ -0,0 +1,93 @@
+<?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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,164 @@
+
+.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

@@ -0,0 +1,484 @@
+/**
+ *
+ * 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

@@ -0,0 +1,24 @@
+(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

@@ -0,0 +1,34 @@
+/**
+ *
+ * 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

@@ -0,0 +1,67 @@
+(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

@@ -0,0 +1,252 @@
+/**
+ *
+ * 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/FieldtypeTextUnique/FieldtypeTextUnique.module

@@ -0,0 +1,88 @@
+<?php namespace ProcessWire;
+
+/**
+ * ProcessWire Unique Text Fieldtype
+ *
+ * Basic Field that stores text, typically a single line. 
+ * Same as FieldtypeText, but requires the value to be globally unique.
+ *
+ * Copyright (C) 2021 by Ryan Cramer 
+ * Licensed under MPL 2.0
+ * 
+ * https://processwire.com
+ *
+ */
+
+class FieldtypeTextUnique extends FieldtypeText {
+
+	public static function getModuleInfo() {
+		return array(
+			'title' => 'Text Unique',
+			'version' => 301,
+			'summary' => 'Same as the Text fieldtype, but enforces that values stored are unique, site-wide.',
+			'requires' => 'ProcessWire>=3.0.150',
+			'href' => 'https://github.com/ryancramerdesign/FieldtypeTextUnique', 
+		);
+	}
+
+	/**
+	 * Get Inputfield
+	 * 
+	 * @param Page $page
+	 * @param Field $field
+	 * @return Inputfield
+	 * 
+	 */
+	public function getInputfield(Page $page, Field $field) {
+		$inputfield = parent::getInputfield($page, $field);
+		if(!$page->id || !$field->id) return $inputfield;
+		$inputfield->addHookAfter('processInput', function(HookEvent $event) use($page, $field) {
+			if($event) {}
+			/** @var InputfieldText $inputfield */
+			$inputfield = $event->object; 
+			if(!$inputfield->isChanged() || !$page->id || !$field->id) return;
+			$value = $inputfield->val();
+			if(!strlen($value)) return; 
+			$fields = $field->wire()->fields;
+			$pageId = $fields->tableTools()->valueExists($field, $value);
+			if(!$pageId || $pageId == $page->id) return;
+			$inputfield->error(sprintf(
+				__('Value “%s” is already in use on page %d, please enter a different value', __FILE__), 
+				$value, $pageId
+			));
+		});
+		return $inputfield;
+	}
+	
+	/**
+	 * Return the database schema in specified format
+	 * 
+	 * @param Field $field
+	 * @return array
+	 *
+	 */
+	public function getDatabaseSchema(Field $field) {
+		$this->checkField($field);
+		$length = $this->wire()->database->getMaxIndexLength();
+		$schema = parent::getDatabaseSchema($field);
+		$schema['keys']['data_exact'] = "UNIQUE `data_exact` (`data`($length))";
+		return $schema;
+	}
+
+	/**
+	 * Check that field has necessary flags
+	 * 
+	 * @param Field $field
+	 * 
+	 */
+	protected function checkField(Field $field) {
+		if($field->hasFlag(Field::flagUnique)) return;
+		if($field->hasFlag(Field::flagFieldgroupContext)) {
+			$field = $this->wire()->fields->get($field->name);
+			if(!$field) return;
+		}
+		$field->addFlag(Field::flagUnique);
+		$field->save();
+	}
+}
+

site/modules/FieldtypeTextUnique/README.md

@@ -0,0 +1,63 @@
+# ProcessWire Unique Text Fieldtype
+
+This is the same as the ProcessWire Text field (FieldtypeText), but 
+enforces that values stored are unique, site-wide.
+
+### Requirements
+
+Requires ProcessWire 3.0.150 or newer. 
+
+### To install
+
+Place the files for this module in `/site/modules/FieldtypeTextUnique/`, 
+and then install from the Modules admin screen.
+
+### To upgrade
+
+This module is a rewrite of the previous version which was released in 2013.
+The ProcessWire core now has some unique index tools included in it, which 
+this module uses. If you are using the previous version, please backup your
+database before upgrading, just to play it safe. Then replace the files in
+`/site/modules/FieldtypeTextUnique/` with those from the new version. 
+
+### To use on a new field
+
+Create a new field (Setup > Fields > Add New) and choose “Text Unique” as 
+the type. Configure the Details and Input tabs the same way that you would
+with a regular Text field. 
+
+### To use on an existing field
+
+You may also convert an existing Text field to Text Unique. To do so, edit 
+the field (Setup > Fields > your_text_field) and then change the type to 
+“Text Unique”. Note that the existing field must not have any duplicate values. 
+If the field does have duplicate values then the type change will produce an 
+error message in the admin to that effect. Remove any duplicates and try again.
+
+Note that this Fieldtype is not a multi-language Fieldtype, so you should not
+attempt to convert multi-language text fields to Text Unique fields. 
+
+### How it works
+
+The Text Unique Fieldtype works the same as the Text Fieldtype and uses the 
+same Text Inputfield. The only difference is that a UNIQUE index is applied 
+on the `data` column that stores the text so that each value can only be 
+entered once per page. 
+
+If the user attempts to enter the same value on more than one page then it 
+will be changed back to their previous value and an error message is reported
+indicating that the value they entered is not unique, along with the page ID
+that contains the colliding value. 
+
+### Please note
+
+The first 191 characters of the text value are what determines whether or 
+not the value is unique. If two values are the same for the first 191 
+characters but differ after that, they will still collide. This seemingly
+arbitrary number is actually the max index length for MySQL when used with
+the InnoDB engine and the UTF8MB4 charset, so the actual number will depend
+somewhat on your DB configuration. 
+
+---
+Copyright 2021 by Ryan Cramer
+

site/templates/css/main.css

@@ -36,3 +36,57 @@
 {
     grid-column: destacado;
 }
+
+html, body
+{
+    height: 100%;
+}
+
+body
+{
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+
+    color: #6666ff;
+    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+    font-weight: normal;
+
+    background: #f7feb6;
+    background: linear-gradient(180deg, #6666ff 0%, #6666ff 10%, #f7feb6 100%);
+    background-repeat: no-repeat;
+}
+
+header#cabeceira
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    min-height: 80px;
+
+    margin-bottom: var(--separacion);
+
+    padding: var(--separacion);
+
+    border: 1px solid #6666ff;
+    border-top: 0;
+    border-radius: 0 0 20px 20px;
+
+    outline: 1px solid #f7feb6;
+
+    box-shadow: 0px var(--separacion) var(--separacion) 0px #00000080;
+
+    background-color: #f7feb6;
+}
+
+nav#menu ul
+{
+    display: flex;
+
+    margin: 0;
+
+    padding: 0;
+
+    list-style: none;
+}

site/templates/inicio.php

@@ -3,8 +3,12 @@
 /** @var Page $page */
 /** @var Pages $pages */
 /** @var Config $config */
+/** @var SiteConfig $configuracion */
 /** @var HomePage $inicio */
+
 ?><main id="contido">
+<?php if($page->hasChildren()): ?>
     <?=renderMigas($page);?>
+<?php endif; ?>
     <p>Homepage content</p>
 </main>	

site/templates/layout/func.php

@@ -1,5 +1,34 @@
 <?php namespace ProcessWire;
 
+function getConfig($paxina)
+{
+    $configuracion = array();
+
+    foreach($paxina->configuracion as $config)
+    {
+        switch ($config->parametro_tipo->value)
+        {
+            case 'texto':
+                $configuracion[$config->parametro_nome] = $config->parametro_valor;
+                break;
+            case 'imaxe':
+                $configuracion[$config->parametro_nome] = array(
+                    'url' => $config->parametro_imaxe->first()->url,
+                    'descripcion' => $config->parametro_imaxe->first()->description,
+                    'miniatura' => $config->parametro_imaxe->getTag("mini")->url
+                );
+                break;
+            case 'cor':
+                list($r, $g, $b) = sscanf($config->parametro_cor, "%02x%02x%02x");
+                $configuracion[$config->parametro_nome] = $r . ', ' . $g . ', ' . $b;
+                break;
+        }
+        
+    }
+
+    return $configuracion;
+}
+
 function renderMigas($paxina)
 {
     $saida = '';

site/templates/layout/init.php

@@ -1,5 +1,12 @@
 <?php namespace ProcessWire;
 
+/** @var Page $page */
+/** @var Pages $pages */
+/** @var Config $config */
+/** @var SiteConfig $configuracion */
+/** @var HomePage $inicio */
+
 include_once("./layout/func.php");
 
-$inicio = $pages->get('/'); /** @var HomePage $inicio */
+$inicio = $pages->get('/');
+$configuracion = getConfig($inicio);

site/templates/layout/main.php

@@ -3,6 +3,7 @@
 /** @var Page $page */
 /** @var Pages $pages */
 /** @var Config $config */
+/** @var SiteConfig $configuracion */
 /** @var HomePage $inicio */
 
 ?><!DOCTYPE html>
@@ -10,16 +11,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><?php echo $page->title; ?></title>
+    <title><?php echo $configuracion['sitio_nome'] . ($configuracion['sitio_descripcion'] ? ' - ' . $configuracion['sitio_descripcion'] : ''); ?></title>
     <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/reset.css" />
     <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/fonts.css" />
     <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/main.css" />
 </head>
 <body class="grella">
     <header id="cabeceira" class="destacado">
+        <div id="logo">
+            <picture>
+                <source srcset="<?=$configuracion['sitio_logo']['miniatura'];?>" media="(max-width: 768px)" />
+                <img src="<?=$configuracion['sitio_logo']['url'];?>" alt="<?=$configuracion['sitio_logo']['descripcion'];?>" />
+            </picture>
+        </div>
+<?php if($page->hasChildren()): ?>
         <nav id="menu">
             <?=renderMenu("menu-paxinas", $inicio->children);?>
         </nav>
+<?php endif; ?>
     </header>
     <main id="contido" class="completo">
 

site/templates/paxinas.php

@@ -3,8 +3,12 @@
 /** @var Page $page */
 /** @var Pages $pages */
 /** @var Config $config */
+/** @var SiteConfig $configuracion */
 /** @var HomePage $inicio */
+
 ?><main id="contido">
+<?php if($page->hasChildren()): ?>
     <?=renderMigas($page);?>
+<?php endif; ?>
     <p>Basic page content </p>
 </main>