Seccion de Habitacions.

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/templates/_foot.php

@@ -8,7 +8,7 @@
                 <p><?php echo _x('Designed and Developed by', 'developer');?> <a target="_blank" href="https://artabro.org">Codigo Artabro</a></p>
             </div>
         </footer>
-        <script src="<?php echo $config->urls->templates?>js/main.js"></script>
         <script src="<?php echo $config->urls->templates?>js/swiper.js"></script>
+        <script src="<?php echo $config->urls->templates?>js/main.js"></script>
     </body>
 </html>

site/templates/_func.php

@@ -6,7 +6,17 @@ function getConfig($paxina)
 
     foreach($paxina->configuracion as $config)
     {
-        $configuracion[$config->nome_parametro] = $config->valor_parametro;
+        switch ($config->tipo_parametro->value)
+        {
+            case 'texto':
+                $configuracion[$config->nome_parametro] = $config->valor_parametro;
+                break;
+            case 'cor':
+                list($r, $g, $b) = sscanf($config->cor, "%02x%02x%02x");
+                $configuracion[$config->nome_parametro] = $r . ', ' . $g . ', ' . $b;
+                break;
+        }
+        
     }
 
     return $configuracion;
@@ -34,12 +44,14 @@ function getSeccions($seccions)
                         break;
                     case 'reixa':
                         $saida .= renderReixa($seccion->titular, $seccion->reixa);
+                        break;
                 }
                 break;
             case 'repeater_mensaxe_mantemento':
                 $saida .= renderTextoMantemento($seccion->titular, $seccion->artigo, $seccion->imaxe);
                 break;
-            case 'imaxe_ligazon':
+            case 'repeater_imaxe_ligazon':
+                $saida .= renderImaxeLigazon($seccion->titular, $seccion->imaxe, $seccion->ligazon);
                 break;
         }
     }
@@ -113,7 +125,7 @@ function renderTexto($titulo, $texto)
 {
     $saida = '';
 
-    $saida .= '                   <div class="celda">' . "\n";
+    $saida .= '    <div class="celda">' . "\n";
     $saida .= '                       ' . $texto  . "\n";
     $saida .= '                   </div>'  . "\n";
 
@@ -129,8 +141,8 @@ function renderGaleria($titulo, $galeria)
 {
     $saida = '';
 
-    $saida .= '<section class="contedor swiper">' . "\n";
-    $saida .= '                   <h3 class="visually-hidden">';
+    $saida .= '    <section class="contedor columna swiper">' . "\n";
+    $saida .= '                       <h3 class="visually-hidden">';
     if($titulo)
     {
         $saida .= $titulo;
@@ -140,21 +152,21 @@ function renderGaleria($titulo, $galeria)
         $saida .= 'Galeria';
     }
     $saida .= '</h3>' . "\n";
-    $saida .= '                   <div class="swiper-wrapper">' . "\n";
+    $saida .= '                       <div class="swiper-wrapper">' . "\n";
     foreach($galeria as $imaxe)
     {
-        $saida .= '                       <div class="swiper-slide">' . "\n";
-        $saida .= '                           <figure>' . "\n";
-        $saida .= '                               <img src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
-        $saida .= '                               <figcaption>' . $imaxe->description . '</figcaption>' . "\n";
-        $saida .= '                           </figure>' . "\n";
-        $saida .= '                       </div>' . "\n";
+        $saida .= '                           <div class="swiper-slide">' . "\n";
+        $saida .= '                               <figure>' . "\n";
+        $saida .= '                                   <img src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
+        $saida .= '                                   <figcaption>' . $imaxe->description . '</figcaption>' . "\n";
+        $saida .= '                               </figure>' . "\n";
+        $saida .= '                           </div>' . "\n";
     }
-    $saida .= '                   </div>' . "\n";
-    $saida .= '                   <div class="swiper-button-prev"></div>' . "\n";
-    $saida .= '                   <div class="swiper-button-next"></div>' . "\n";
-    $saida .= '                   <div class="swiper-paxination"></div>' . "\n";
-    $saida .= '               </section>';
+    $saida .= '                       </div>' . "\n";
+    $saida .= '                       <div class="swiper-button-prev"></div>' . "\n";
+    $saida .= '                       <div class="swiper-button-next"></div>' . "\n";
+    $saida .= '                       <div class="swiper-paxination"></div>' . "\n";
+    $saida .= '                   </section>';
 
     return $saida;
 }
@@ -230,5 +242,21 @@ function renderTextoMantemento($titulo, $texto, $imaxe)
     }
     $saida .= '               </section>';
 
+    return $saida;
+}
+
+function renderImaxeLigazon($titular, $imaxe, $ligazon)
+{
+    $saida = '';
+
+    $saida .= '    <div class="celda">' . "\n";
+    $saida .= '                           <figure class="enlace">' . "\n";
+    $saida .= '                               <img src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
+    $saida .= '                               <figcaption class="columna">' . "\n";
+    $saida .= '                                  <a href=' . $ligazon->url . '>' . $ligazon->title . '</a>' . "\n";
+    $saida .= '                               </figcaption>' . "\n";
+    $saida .= '                           </figure>' . "\n";
+    $saida .= '                   </div>'  . "\n";
+
     return $saida;
 }

site/templates/_head.php

@@ -47,6 +47,7 @@
                     --color_60: <?php echo $configuracion['color_fondo'] ?>;
                     --color_30: <?php echo $configuracion['color_principal'] ?>;
                     --color_10: <?php echo $configuracion['color_secundario'] ?>;
+                    --imaxe_destacada: <?php echo $page->imaxe ? 'url("'. $page->imaxe->url . '")' : 'none'; ?>;
                 }
         </style>
     </head>

site/templates/css/style.css

@@ -25,7 +25,6 @@ h1, h2, h3, h4, h5, h6
 
     color: rgb(var(--color_30));
     font-family: 'Libre Baskerville', serif;
-    text-transform: capitalize;
     font-weight: bold;
 }
 
@@ -87,7 +86,6 @@ figure figcaption
 
     color: rgb(var(--color_30));
     font-family: 'Source Sans Pro', sans-serif;
-    text-transform: capitalize;
     font-weight: normal;
     font-size: 1rem;
 }
@@ -346,12 +344,27 @@ main#contido
     flex: 1 0 auto;
 }
 
-article#inicio section
+article header, article header .columna
 {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    height: 100px;
+    width: 100%;
+}
+
+article header
+{
+    margin-bottom: 30px;
+
+    background: linear-gradient(
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0.4)
+        ), var(--imaxe_destacada);
+}
+
+article header h2
+{
+    margin: 30px;
+
+    text-align: center;
 }
 
 footer#pe
@@ -436,6 +449,53 @@ div.reixa
     grid-template-columns: 1fr;
 }
 
+figure.enlace
+{
+    position: relative;
+
+    overflow: hidden;
+
+    cursor: pointer;
+}
+
+figure.enlace img
+{
+   
+    min-height: 100%;
+    max-width: 100%;
+
+    transition: all .3s ease-in-out;
+}
+
+figure.enlace:hover img
+{
+    transform: scale(1.15);
+    transition: all .3s ease-in-out;
+}
+
+figure.enlace figcaption
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(
+      rgba(255, 255, 255, 0.4),
+      rgba(255, 255, 255, 0.4)
+        );
+}
+
+figure.enlace figcaption a
+{
+    color: rgb(var(--color_30));
+    font-family: 'Libre Baskerville', serif;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
 .contedor
 {
     width: 90%;
@@ -443,6 +503,14 @@ div.reixa
     margin: 0 auto 20px;
 }
 
+.columna
+{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 .visually-hidden
 {
     position: absolute;
@@ -566,6 +634,11 @@ div.reixa
         text-decoration: underline dotted;
     }
 
+    article header, article header .columna
+    {
+        height: 200px;
+    }
+
     div.celda.esquerda
     {
         flex-direction: row;

site/templates/habitacion.php

@@ -0,0 +1,31 @@
+<?php namespace ProcessWire;
+
+$menu = '';
+$contido = '';
+
+$mantemento = $inicio->mantemento;
+
+if($mantemento && !$user->isLoggedin())
+{
+    $session->redirect($inicio->url); 
+}
+else
+{
+    
+    $menu = renderMenu($inicio->and($inicio->children), 0, 'paxinas');
+
+    $contido .= '            ' . renderMigasPan($page) . "\n";
+    $contido .= '            <article id="' . $page->title .'">' . "\n";
+    $contido .= '               <header>' . "\n";
+    $contido .= '                   <div class="columna">' . "\n";
+    $contido .= '                       <h2>' . ucfirst($page->title) . '</h2>' . "\n";
+    $contido .= '                   </div>' . "\n";
+    $contido .= '               </header>' . "\n";
+    $contido .= '               <div class="contedor">' . "\n";
+    if(count($page->seccions))
+    {
+        $contido .= '                   ' . getSeccions($page->seccions) . "\n";
+    }
+    $contido .= '               </div>' . "\n";
+    $contido .= '            </article>' . "\n";
+}

site/templates/habitaciones.php

@@ -0,0 +1,38 @@
+<?php namespace ProcessWire;
+
+$menu = '';
+$contido = '';
+
+$mantemento = $inicio->mantemento;
+
+if($mantemento && !$user->isLoggedin())
+{
+    $session->redirect($inicio->url); 
+}
+else
+{
+    
+    $menu = renderMenu($inicio->and($inicio->children), 0, 'paxinas');
+
+    $contido .= '            ' . renderMigasPan($page) . "\n";
+    $contido .= '            <article id="' . $page->title .'">' . "\n";
+    $contido .= '               <header>' . "\n";
+    $contido .= '                   <div class="columna">' . "\n";
+    $contido .= '                       <h2>' . ucfirst($page->title) . '</h2>' . "\n";
+    $contido .= '                   </div>' . "\n";
+    $contido .= '               </header>' . "\n";
+    $contido .= '               <div class="contedor">' . "\n";
+    if(count($page->seccions))
+    {
+        $contido .= '                   ' . getSeccions($page->seccions) . "\n";
+    }
+    $contido .= '               </div>' . "\n";
+    $contido .= '               <section class="contedor">' . "\n";
+    $contido .= '                   <h3 class="visually-hidden">' . $page->title . '</h3>' . "\n";
+    if(count($page->imaxe_ligazon))
+    {
+        $contido .= '                   ' . getSeccions($page->imaxe_ligazon) . "\n";
+    }
+    $contido .= '               </section>' . "\n";
+    $contido .= '            </article>' . "\n";
+}

site/templates/pagina.php

@@ -15,13 +15,17 @@ else
     $menu = renderMenu($inicio->and($inicio->children), 0, 'paxinas');
 
     $contido .= '            ' . renderMigasPan($page) . "\n";
-    $contido .= '            <article id="inicio">' . "\n";
+    $contido .= '            <article id="' . $page->title .'">' . "\n";
+    $contido .= '               <header>' . "\n";
+    $contido .= '                   <div class="columna">' . "\n";
+    $contido .= '                       <h2>' . ucfirst($page->title) . '</h2>' . "\n";
+    $contido .= '                   </div>' . "\n";
+    $contido .= '               </header>' . "\n";
     $contido .= '               <div class="contedor">' . "\n";
-    $contido .= '                   <h2>' . ucfirst($page->title) . '</h2>' . "\n";
     if(count($page->seccions))
     {
-        $contido .= '               ' . getSeccions($page->seccions) . "\n";
+        $contido .= '                   ' . getSeccions($page->seccions) . "\n";
     }
     $contido .= '               </div>' . "\n";
-    $contido .= '</article>';
+    $contido .= '            </article>' . "\n";
 }