Skip to content
This repository

Implement a color field for JForm. #147

Merged
merged 1 commit into from over 2 years ago

2 participants

Rouven Weßling Louis Landry
Rouven Weßling
Collaborator

This uses the native color picker in Opera 11 and falls back to MooRainbow in all other browsers.

Also adds the corresponding JFormRule for validation.

Rouven Weßling Implement a color field for JForm.
This uses the native color picker in Opera 11 and falls back to MooRainbow in all other browsers.

Also adds the corresponding JFormRule for validation.
e8fc90c
Louis Landry

Rock and roll :-)

Louis Landry LouisLandry merged commit e98f10b into from July 28, 2011
Louis Landry LouisLandry closed this July 28, 2011
Louis Landry

So, I pulled this, but please in the future make your pull requests against staging instead of master.

Rouven Weßling
Collaborator

Ah sorry, forgot all about that. Should I change the two other pulls?

Louis Landry
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Jul 28, 2011
Rouven Weßling Implement a color field for JForm.
This uses the native color picker in Opera 11 and falls back to MooRainbow in all other browsers.

Also adds the corresponding JFormRule for validation.
e8fc90c
This page is out of date. Refresh to see the latest.
65  libraries/joomla/form/fields/color.php
... ...
@@ -0,0 +1,65 @@
  1
+<?php
  2
+/**
  3
+ * @package     Joomla.Platform
  4
+ * @subpackage  Form
  5
+ *
  6
+ * @copyright   Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
  7
+ * @license     GNU General Public License version 2 or later; see LICENSE
  8
+ */
  9
+
  10
+defined('JPATH_PLATFORM') or die;
  11
+
  12
+jimport('joomla.form.formfield');
  13
+
  14
+/**
  15
+ * Color Form Field class for the Joomla Framework.
  16
+ * This implementation is designed to be compatible with HTML5's <input type="color">
  17
+ *
  18
+ * @package     Joomla.Platform
  19
+ * @subpackage  Form
  20
+ * @since       11.3
  21
+ * @link		http://www.w3.org/TR/html-markup/input.color.html
  22
+ */
  23
+class JFormFieldColor extends JFormField
  24
+{
  25
+	/**
  26
+	 * The form field type.
  27
+	 *
  28
+	 * @var    string
  29
+	 * @since  11.3
  30
+	 */
  31
+	protected $type = 'Color';
  32
+
  33
+	/**
  34
+	 * Method to get the field input markup.
  35
+	 *
  36
+	 * @return  string  The field input markup.
  37
+	 * @since   11.3
  38
+	 */
  39
+	protected function getInput()
  40
+	{
  41
+		// Initialize some field attributes.
  42
+		$size		= $this->element['size'] ? ' size="'.(int) $this->element['size'].'"' : '';
  43
+		$classes	= (string) $this->element['class'];
  44
+		$disabled	= ((string) $this->element['disabled'] == 'true') ? ' disabled="disabled"' : '';
  45
+
  46
+		if (!$disabled) {
  47
+			JHtml::_('behavior.colorpicker');
  48
+			$classes .= ' input-colorpicker';
  49
+		}
  50
+		
  51
+		if (empty($this->value)) {
  52
+			// A color field can't be empty, we default to black. This is the same as the HTML5 spec.
  53
+			$this->value = '#000000';
  54
+		}
  55
+		
  56
+		// Initialize JavaScript field attributes.
  57
+		$onchange	= $this->element['onchange'] ? ' onchange="'.(string) $this->element['onchange'].'"' : '';
  58
+
  59
+		$class		= $classes ? ' class="'.trim($classes).'"' : '';
  60
+		
  61
+		return '<input type="text" name="'.$this->name.'" id="'.$this->id.'"' .
  62
+				' value="'.htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8').'"' .
  63
+				$class.$size.$disabled.$onchange.'/>';
  64
+	}
  65
+}
64  libraries/joomla/form/rules/color.php
... ...
@@ -0,0 +1,64 @@
  1
+<?php
  2
+/**
  3
+ * @package     Joomla.Platform
  4
+ * @subpackage  Form
  5
+ *
  6
+ * @copyright   Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
  7
+ * @license     GNU General Public License version 2 or later; see LICENSE
  8
+ */
  9
+
  10
+defined('JPATH_PLATFORM') or die;
  11
+
  12
+jimport('joomla.form.formrule');
  13
+
  14
+/**
  15
+ * Form Rule class for the Joomla Framework.
  16
+ *
  17
+ * @package		Joomla.Framework
  18
+ * @subpackage  Form
  19
+ * @since       11.2
  20
+ */
  21
+class JFormRuleColor extends JFormRule
  22
+{
  23
+	/**
  24
+	 * Method to test for a valid color in hexadecimaö.
  25
+	 *
  26
+	 * @param   object  $element	The JXMLElement object representing the <field /> tag for the
  27
+	 * 								form field object.
  28
+	 * @param   mixed   $value		The form field value to validate.
  29
+	 * @param   string  $group		The field name group control value. This acts as as an array
  30
+	 * 								container for the field. For example if the field has name="foo"
  31
+	 * 								and the group value is set to "bar" then the full field name
  32
+	 * 								would end up being "bar[foo]".
  33
+	 * @param   object  $input		An optional JRegistry object with the entire data set to validate
  34
+	 * 								against the entire form.
  35
+	 * @param   object  $form		The form object for which the field is being tested.
  36
+	 *
  37
+	 * @return  boolean  True if the value is valid, false otherwise.
  38
+	 *
  39
+	 * @since   11.2
  40
+	 * @throws  JException on invalid rule.
  41
+	 */
  42
+	public function test(& $element, $value, $group = null, & $input = null, & $form = null)
  43
+	{
  44
+		$value = trim($value);
  45
+		if (empty($value)) {
  46
+			// A color field can't be empty, we default to black. This is the same as the HTML5 spec.
  47
+			$value = '#000000';
  48
+			return true;
  49
+		}
  50
+
  51
+		// Remove the leading # if present to validate the numeric part
  52
+		$value = ltrim($value, '#');
  53
+
  54
+		// The value must be 6 or 6 characters long 
  55
+		if (!((strlen($value) == 7 || strlen($value) == 4) && ctype_xdigit($value))) {
  56
+			return false;
  57
+		}
  58
+
  59
+		// Prepend the # again
  60
+		$value = '#'.$value;
  61
+
  62
+		return true;
  63
+	}
  64
+}
50  libraries/joomla/html/html/behavior.php
@@ -638,6 +638,56 @@ public static function calendar()
638 638
 	}
639 639
 
640 640
 	/**
  641
+	 * Add unobtrusive javascript support for a color picker.
  642
+	 *
  643
+	 * @return  void
  644
+	 * @since   11.2
  645
+	 */
  646
+	public static function colorpicker()
  647
+	{
  648
+		static $loaded = false;
  649
+
  650
+		// Only load once
  651
+		if ($loaded) {
  652
+			return;
  653
+		}
  654
+
  655
+		// Include MooTools framework
  656
+		self::framework(true);
  657
+
  658
+		//Add uncompressed versions when debug is enabled
  659
+		$uncompressed	= JFactory::getConfig()->get('debug') ? '-uncompressed' : '';
  660
+		JHtml::_('stylesheet','system/mooRainbow.css', array('media' => 'all'), true);
  661
+		JHtml::_('script','system/mooRainbow.js', false, true);
  662
+
  663
+		JFactory::getDocument()->addScriptDeclaration("
  664
+			window.addEvent('domready', function(){
  665
+				var nativeColorUi = false;
  666
+				if (Browser.opera && (Browser.version >= 11.5)) {
  667
+					nativeColorUi = true;
  668
+				}
  669
+				var elems = $$('.input-colorpicker');
  670
+				elems.each(function(item){
  671
+					if (nativeColorUi) {
  672
+						item.type = 'color';
  673
+					} else {
  674
+						new MooRainbow(item,
  675
+						{
  676
+							imgPath: '".JURI::root(true)."/media/system/images/mooRainbow/',
  677
+							onComplete: function(color) {
  678
+								this.element.value = color.hex;
  679
+							},
  680
+							startColor: item.value.hexToRgb(true)
  681
+						});
  682
+					}
  683
+				});
  684
+			});
  685
+		");
  686
+
  687
+		$loaded = true;
  688
+	}
  689
+
  690
+	/**
641 691
 	 * Keep session alive, for example, while editing or creating an article.
642 692
 	 *
643 693
 	 * @return  void
140  media/system/css/mooRainbow.css
... ...
@@ -0,0 +1,140 @@
  1
+/***
  2
+ *  - mooRainbow: defaultCSS
  3
+ * author: w00fz <w00fzPuppy@gmail.com>
  4
+ */
  5
+
  6
+{ font-size: 11px; color: #000; }
  7
+
  8
+.moor-box {
  9
+	width: 125px; 
  10
+	height: 110px; 
  11
+	border: 1px solid #636163; 
  12
+	background-color: #f9f9f9;
  13
+}
  14
+.moor-overlayBox {
  15
+	width: 80px; /* Width and Height of the overlay must be setted here: default 256x256 */
  16
+	height: 80px; 
  17
+	margin-top: 3px; 
  18
+	margin-left: 3px;
  19
+	border: 1px solid #000;
  20
+}
  21
+.moor-slider {
  22
+	border: 1px solid #000;
  23
+	margin-top: 3px; 
  24
+	margin-left: 86px;
  25
+	width: 10px; /* if you want a bigger or smaller slider... */
  26
+	height: 80px;
  27
+}
  28
+.moor-colorBox {
  29
+	/*display: none;*/
  30
+	visibility: hidden;
  31
+	border: 1px solid #000; 
  32
+	width: 59px; 
  33
+	height: 68px; 
  34
+	margin-top: 20px; 
  35
+	margin-left: 315px;
  36
+}
  37
+
  38
+.moor-currentColor { /* Bottom Box Color, the backup one */
  39
+	/*display: none;*/
  40
+	visibility: hidden;
  41
+	margin-top: 55px; 
  42
+	margin-left: 316px; 
  43
+	width: 59px; 
  44
+	height: 34px;
  45
+}
  46
+.moor-okButton {
  47
+	font-family: Tahoma;
  48
+	font-weight: bold;
  49
+	font-size: 8px;
  50
+	margin-top: 90px;
  51
+	margin-left: 3px;
  52
+	background: #e6e6e6;
  53
+	height: 15px;
  54
+	border: 1px solid #d6d6d6;
  55
+	border-left-color: #f5f5f5;
  56
+	border-top-color: #f5f5f5;
  57
+}
  58
+label {
  59
+	font-family: mono;
  60
+}
  61
+/* Following are just <label> */
  62
+.moor-rLabel {
  63
+	/*display: none;*/
  64
+	visibility: hidden;
  65
+	margin-top: 100px;
  66
+	margin-left: 315px;
  67
+}
  68
+.moor-gLabel {
  69
+	/*display: none;*/
  70
+	visibility: hidden;
  71
+	margin-top: 125px;
  72
+	margin-left: 315px;
  73
+}
  74
+.moor-bLabel {
  75
+	/*display: none;*/
  76
+	visibility: hidden;
  77
+	margin-top: 150px;
  78
+	margin-left: 315px;
  79
+}
  80
+.moor-HueLabel {
  81
+	/*display: none;*/
  82
+	visibility: hidden;
  83
+	margin-top: 190px;
  84
+	margin-left: 315px;
  85
+}
  86
+span.moor-ballino { /* Style hue ° (degree) !! */
  87
+	/*display: none;*/
  88
+	visibility: hidden;
  89
+	margin-top: 190px;
  90
+	margin-left: 370px;
  91
+}
  92
+.moor-SatuLabel {
  93
+	/*display: none;*/
  94
+	visibility: hidden;
  95
+	margin-top: 215px;
  96
+	margin-left: 315px;
  97
+}
  98
+.moor-BrighLabel {
  99
+	/*display: none;*/
  100
+	visibility: hidden;
  101
+	margin-top: 240px;
  102
+	margin-left: 315px;
  103
+}
  104
+.moor-hexLabel {
  105
+	font-size: 0px;
  106
+	margin-top: 90px;
  107
+	margin-left: 70px;
  108
+}
  109
+
  110
+/* <input> */
  111
+.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput { 
  112
+	/*display: none;*/
  113
+	visibility: hidden;
  114
+	width: 30px;
  115
+}
  116
+.moor-hexInput {
  117
+	font-size: 9px;
  118
+	width: 45px;
  119
+}
  120
+.moor-cursor {
  121
+	/*background-image: url(images/moor_cursor.gif); */
  122
+	width: 12px;
  123
+	height: 12px;
  124
+}
  125
+.moor-arrows {
  126
+	/*display: none;*/
  127
+	visibility: hidden;
  128
+	/*background-image: url(images/moor_arrows.gif);*/
  129
+	top: 9px; 
  130
+	left: 270px;
  131
+	width: 41px;
  132
+	height: 9px;
  133
+}
  134
+
  135
+.moor-chooseColor {
  136
+	margin-left: 100px;
  137
+	margin-top: 3px;
  138
+	width: 20px;
  139
+	height: 82px;
  140
+}
BIN  media/system/images/mooRainbow/blank.gif
BIN  media/system/images/mooRainbow/moor_arrows.gif
BIN  media/system/images/mooRainbow/moor_boverlay.png
BIN  media/system/images/mooRainbow/moor_cursor.gif
BIN  media/system/images/mooRainbow/moor_slider.png
BIN  media/system/images/mooRainbow/moor_woverlay.png
571  media/system/js/mooRainbow-uncompressed.js
... ...
@@ -0,0 +1,571 @@
  1
+/*
  2
+---
  3
+
  4
+script: mooRainbow.js
  5
+version: 1.3
  6
+description: MooRainbow is a ColorPicker for MooTools 1.3
  7
+license: MIT-Style
  8
+authors:
  9
+  - Djamil Legato (w00fz)
  10
+  - Christopher Beloch
  11
+
  12
+requires: [Core/*, More/Slider, More/Drag, More/Color]
  13
+
  14
+provides: [mooRainbow]
  15
+
  16
+...
  17
+*/
  18
+ 
  19
+var MooRainbow = new Class({
  20
+	options: {
  21
+		id: 'mooRainbow',
  22
+		prefix: 'moor-',
  23
+		imgPath: 'images/',
  24
+		startColor: [255, 0, 0],
  25
+		wheel: false,
  26
+		onComplete: Class.empty,
  27
+		onChange: Class.empty
  28
+	},
  29
+	
  30
+	initialize: function(el, options) {
  31
+		this.element = document.id(el); if (!this.element) return;
  32
+		this.setOptions(options);
  33
+		
  34
+		this.sliderPos = 0;
  35
+		this.pickerPos = {x: 0, y: 0};
  36
+		this.backupColor = this.options.startColor;
  37
+		this.currentColor = this.options.startColor;
  38
+		this.sets = {
  39
+			rgb: [],
  40
+			hsb: [],
  41
+			hex: []	
  42
+		};
  43
+		this.pickerClick = this.sliderClick  = false;
  44
+		if (!this.layout) this.doLayout();
  45
+		this.OverlayEvents();
  46
+		this.sliderEvents();
  47
+		this.backupEvent();
  48
+		if (this.options.wheel) this.wheelEvents();
  49
+		this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this));
  50
+				
  51
+		this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex());
  52
+		this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
  53
+
  54
+		this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
  55
+		this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
  56
+		
  57
+		this.manualSet(this.options.startColor);
  58
+		
  59
+		this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
  60
+		this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
  61
+		this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int');
  62
+
  63
+		if (window.khtml) this.hide();
  64
+	},
  65
+	
  66
+	toggle: function() {
  67
+		this[this.visible ? 'hide' : 'show']()
  68
+	},
  69
+	
  70
+	show: function() {
  71
+		this.rePosition();
  72
+		this.layout.setStyle('display', 'block');
  73
+		this.layout.set('aria-hidden', 'false');
  74
+		this.visible = true;
  75
+	},
  76
+	
  77
+	hide: function() {
  78
+		this.layout.setStyles({'display': 'none'});
  79
+		this.layout.set('aria-hidden', 'true');
  80
+		this.visible = false;
  81
+	},
  82
+	
  83
+	manualSet: function(color, type) {
  84
+		if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
  85
+		var rgb, hsb, hex;
  86
+
  87
+		if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
  88
+		else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
  89
+		else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); }
  90
+		
  91
+		this.setMooRainbow(rgb);
  92
+		this.autoSet(hsb);
  93
+	},
  94
+	
  95
+	autoSet: function(hsb) {
  96
+		var curH = this.snippet('curSize', 'int').h;
  97
+		var curW = this.snippet('curSize', 'int').w;
  98
+		var oveH = this.layout.overlay.height;
  99
+		var oveW = this.layout.overlay.width;
  100
+		var sliH = this.layout.slider.height;
  101
+		var arwH = this.snippet('arrSize', 'int');
  102
+		var hue;
  103
+		
  104
+		var posx = Math.round(((oveW * hsb[1]) / 100) - curW);
  105
+		var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH);
  106
+
  107
+		var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c;
  108
+		var position = sliH - c + this.snippet('slider') - arwH;
  109
+		hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
  110
+		
  111
+		this.layout.cursor.setStyles({'top': posy, 'left': posx});
  112
+		this.layout.arrows.setStyle('top', position);
  113
+		this.layout.overlay.setStyle('background-color', hue);
  114
+		this.sliderPos = this.snippet('arrPos') - arwH;
  115
+		this.pickerPos.x = this.snippet('curPos').l + curW;
  116
+		this.pickerPos.y = this.snippet('curPos').t + curH;
  117
+	},
  118
+	
  119
+	setMooRainbow: function(color, type) {
  120
+		if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
  121
+		var rgb, hsb, hex;
  122
+
  123
+		if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
  124
+		else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
  125
+		else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); }
  126
+
  127
+		this.sets = {
  128
+			rgb: rgb,
  129
+			hsb: hsb,
  130
+			hex: hex
  131
+		};
  132
+
  133
+		if (!this.pickerPos.x)
  134
+			this.autoSet(hsb);		
  135
+
  136
+		this.RedInput.value = rgb[0];
  137
+		this.GreenInput.value = rgb[1];
  138
+		this.BlueInput.value = rgb[2];
  139
+		this.HueInput.value = hsb[0];
  140
+		this.SatuInput.value =  hsb[1];
  141
+		this.BrighInput.value = hsb[2];
  142
+		this.hexInput.value = hex;
  143
+		
  144
+		this.currentColor = rgb;
  145
+
  146
+		this.chooseColor.setStyle('background-color', rgb.rgbToHex());
  147
+		
  148
+		this.fireEvent('onChange', [this.sets, this]);
  149
+	},
  150
+	
  151
+	parseColors: function(x, y, z) {
  152
+		var s = Math.round((x * 100) / this.layout.overlay.width);
  153
+		var b = 100 - Math.round((y * 100) / this.layout.overlay.height);
  154
+		var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int');
  155
+		h -= this.snippet('arrSize', 'int');
  156
+		h = (h >= 360) ? 0 : (h < 0) ? 0 : h;
  157
+		s = (s > 100) ? 100 : (s < 0) ? 0 : s;
  158
+		b = (b > 100) ? 100 : (b < 0) ? 0 : b;
  159
+
  160
+		return [h, s, b];
  161
+	},
  162
+	
  163
+	OverlayEvents: function() {
  164
+		var lim, curH, curW, inputs;
  165
+		curH = this.snippet('curSize', 'int').h;
  166
+		curW = this.snippet('curSize', 'int').w;
  167
+		inputs = this.arrRGB.concat(this.arrHSB, this.hexInput);
  168
+
  169
+		document.addEvent('click', function() { 
  170
+			if(this.visible) this.hide(this.layout); 
  171
+		}.bind(this));
  172
+
  173
+		inputs.each(function(el) {
  174
+			el.addEvent('keydown', this.eventKeydown.bind(this, el));
  175
+			el.addEvent('keyup', this.eventKeyup.bind(this, el));
  176
+		}, this);
  177
+		[this.element, this.layout].each(function(el) {
  178
+			el.addEvents({
  179
+				'click': function(e) { new Event(e).stop(); },
  180
+				'keyup': function(e) {
  181
+					e = new Event(e);
  182
+					if(e.key == 'esc' && this.visible) this.hide(this.layout);
  183
+				}.bind(this)
  184
+			}, this);
  185
+		}, this);
  186
+		
  187
+		lim = {
  188
+			x: [0 - curW, (this.layout.overlay.width - curW)],
  189
+			y: [0 - curH, (this.layout.overlay.height - curH)]
  190
+		};
  191
+
  192
+		this.layout.drag = new Drag(this.layout.cursor, {
  193
+			onStart: this.overlayDrag.bind(this),
  194
+			onDrag: this.overlayDrag.bind(this),
  195
+			snap: 0
  196
+		});	
  197
+		
  198
+		this.layout.overlay2.addEvent('mousedown', function(e){
  199
+			e = new Event(e);
  200
+			this.layout.cursor.setStyles({
  201
+				'top': e.page.y - this.layout.overlay.getTop() - curH,
  202
+				'left': e.page.x - this.layout.overlay.getLeft() - curW
  203
+			});
  204
+                        this.overlayDrag.call(this);
  205
+			this.layout.drag.start(e);
  206
+		}.bind(this));
  207
+		
  208
+		this.okButton.addEvent('click', function() {
  209
+			if(this.currentColor == this.options.startColor) {
  210
+				this.hide();
  211
+				this.fireEvent('onComplete', [this.sets, this]);
  212
+			}
  213
+			else {
  214
+				this.backupColor = this.currentColor;
  215
+				this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
  216
+				this.hide();
  217
+				this.fireEvent('onComplete', [this.sets, this]);
  218
+			}
  219
+		}.bind(this));
  220
+	},
  221
+	
  222
+	overlayDrag: function() {
  223
+		var curH = this.snippet('curSize', 'int').h;
  224
+		var curW = this.snippet('curSize', 'int').w;
  225
+		this.pickerPos.x = this.snippet('curPos').l + curW;
  226
+		this.pickerPos.y = this.snippet('curPos').t + curH;
  227
+		
  228
+		this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
  229
+		this.fireEvent('onChange', [this.sets, this]);
  230
+	},
  231
+	
  232
+	sliderEvents: function() {
  233
+		var arwH = this.snippet('arrSize', 'int'), lim;
  234
+
  235
+		lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')];
  236
+		this.layout.sliderDrag = new Drag(this.layout.arrows, {
  237
+			limit: {y: lim},
  238
+			modifiers: {x: false},
  239
+			onStart: this.sliderDrag.bind(this),
  240
+			onDrag: this.sliderDrag.bind(this),
  241
+			snap: 0
  242
+		});	
  243
+	
  244
+		this.layout.slider.addEvent('mousedown', function(e){
  245
+			e = new Event(e);
  246
+
  247
+			this.layout.arrows.setStyle(
  248
+				'top', e.page.y - this.layout.slider.getTop() + this.snippet('slider') - arwH
  249
+			);
  250
+                        this.sliderDrag.call(this);
  251
+			this.layout.sliderDrag.start(e);
  252
+		}.bind(this));
  253
+	},
  254
+
  255
+	sliderDrag: function() {
  256
+		var arwH = this.snippet('arrSize', 'int'), hue;
  257
+		
  258
+		this.sliderPos = this.snippet('arrPos') - arwH;
  259
+		this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
  260
+		hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
  261
+		this.layout.overlay.setStyle('background-color', hue);
  262
+		this.fireEvent('onChange', [this.sets, this]);
  263
+	},
  264
+	
  265
+	backupEvent: function() {
  266
+		this.layout.backup.addEvent('click', function() {
  267
+			this.manualSet(this.backupColor);
  268
+			this.fireEvent('onChange', [this.sets, this]);
  269
+		}.bind(this));
  270
+	},
  271
+	
  272
+	wheelEvents: function() {
  273
+		var arrColors = this.arrRGB.copy().extend(this.arrHSB);
  274
+
  275
+		arrColors.each(function(el) {
  276
+			el.addEvents({
  277
+				'mousewheel': this.eventKeys.bindWithEvent(this, el),
  278
+				'keydown': this.eventKeys.bindWithEvent(this, el)
  279
+			});
  280
+		}, this);
  281
+		
  282
+		[this.layout.arrows, this.layout.slider].each(function(el) {
  283
+			el.addEvents({
  284
+				'mousewheel': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']),
  285
+				'keydown': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider'])
  286
+			});
  287
+		}, this);
  288
+	},
  289
+	
  290
+	eventKeys: function(e, el, id) {
  291
+		var wheel, type;		
  292
+		id = (!id) ? el.id : this.arrHSB[0];
  293
+
  294
+		if (e.type == 'keydown') {
  295
+			if (e.key == 'up') wheel = 1;
  296
+			else if (e.key == 'down') wheel = -1;
  297
+			else return;
  298
+		} else if (e.type == Element.Events.mousewheel.type) wheel = (e.wheel > 0) ? 1 : -1;
  299
+
  300
+		if (this.arrRGB.test(el)) type = 'rgb';
  301
+		else if (this.arrHSB.test(el)) type = 'hsb';
  302
+		else type = 'hsb';
  303
+
  304
+		if (type == 'rgb') {
  305
+			var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
  306
+			var value = el.value.toInt() + wheel;
  307
+			value = (value > 255) ? 255 : (value < 0) ? 0 : value;
  308
+
  309
+			switch(el.className) {
  310
+				case prefix + 'rInput': pass = [value, rgb[1], rgb[2]];	break;
  311
+				case prefix + 'gInput': pass = [rgb[0], value, rgb[2]];	break;
  312
+				case prefix + 'bInput':	pass = [rgb[0], rgb[1], value];	break;
  313
+				default : pass = rgb;
  314
+			}
  315
+			this.manualSet(pass);
  316
+			this.fireEvent('onChange', [this.sets, this]);
  317
+		} else {
  318
+			var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
  319
+			var value = el.value.toInt() + wheel;
  320
+
  321
+			if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value;
  322
+			else value = (value > 100) ? 100 : (value < 0) ? 0 : value;
  323
+
  324
+			switch(el.className) {
  325
+				case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break;
  326
+				case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break;
  327
+				case prefix + 'BrighInput':	pass = [hsb[0], hsb[1], value]; break;
  328
+				default : pass = hsb;
  329
+			}
  330
+			this.manualSet(pass, 'hsb');
  331
+			this.fireEvent('onChange', [this.sets, this]);
  332
+		}
  333
+		e.stop();
  334
+	},
  335
+	
  336
+	eventKeydown: function(el, e) {
  337
+		var n = e.code, k = e.key;
  338
+
  339
+		if 	((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) &&
  340
+			(k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right'))
  341
+		e.stop();
  342
+	},
  343
+	
  344
+	eventKeyup: function(el, e) {
  345
+		var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0);
  346
+
  347
+		if (!(el.value || el.value === 0)) return;
  348
+		if (el.className.test(/hexInput/)) {
  349
+			if (chr != "#" && el.value.length != 6) return;
  350
+			if (chr == '#' && el.value.length != 7) return;
  351
+		} else {
  352
+			if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].test(k)) && el.value.length > 3) return;
  353
+		}
  354
+		
  355
+		prefix = this.options.prefix;
  356
+
  357
+		if (el.className.test(/(rInput|gInput|bInput)/)) {
  358
+			if (el.value  < 0 || el.value > 255) return;
  359
+			switch(el.className){
  360
+				case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break;
  361
+				case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break;
  362
+				case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break;
  363
+				default : pass = this.sets.rgb;
  364
+			}
  365
+			this.manualSet(pass);
  366
+			this.fireEvent('onChange', [this.sets, this]);
  367
+		}
  368
+		else if (!el.className.test(/hexInput/)) {
  369
+			if (el.className.test(/HueInput/) && el.value  < 0 || el.value > 360) return;
  370
+			else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0;
  371
+			else if (el.className.test(/(SatuInput|BrighInput)/) && el.value  < 0 || el.value > 100) return;
  372
+			switch(el.className){
  373
+				case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break;
  374
+				case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break;
  375
+				case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break;
  376
+				default : pass = this.sets.hsb;
  377
+			}
  378
+			this.manualSet(pass, 'hsb');
  379
+			this.fireEvent('onChange', [this.sets, this]);
  380
+		} else {
  381
+			pass = el.value.hexToRgb(true);
  382
+			if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return;
  383
+
  384
+			if (pass || pass === 0) {
  385
+				this.manualSet(pass);
  386
+				this.fireEvent('onChange', [this.sets, this]);
  387
+			}
  388
+		}
  389
+			
  390
+	},
  391
+			
  392
+	doLayout: function() {
  393
+		var id = this.options.id, prefix = this.options.prefix;
  394
+		var idPrefix = id + ' .' + prefix;
  395
+
  396
+		this.layout = new Element('div', {
  397
+			'styles': {'display': 'block', 'position': 'absolute'},
  398
+			'id': id
  399
+		}).inject(document.body);
  400
+
  401
+		var box = new Element('div', {
  402
+			'styles':  {'position': 'relative'},
  403
+			'class': prefix + 'box'
  404
+		}).inject(this.layout);
  405
+			
  406
+		var div = new Element('div', {
  407
+			'styles': {'position': 'absolute', 'overflow': 'hidden'},
  408
+			'class': prefix + 'overlayBox'
  409
+		}).inject(box);
  410
+		
  411
+		var ar = new Element('div', {
  412
+			'styles': {'position': 'absolute', 'zIndex': 1},
  413
+			'class': prefix + 'arrows'
  414
+		}).inject(box);
  415
+		ar.width = ar.getStyle('width').toInt();
  416
+		ar.height = ar.getStyle('height').toInt();
  417
+		
  418
+		var ov = new Element('img', {
  419
+			'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2},
  420
+			'src': this.options.imgPath + 'moor_woverlay.png',
  421
+			'class': prefix + 'overlay'
  422
+		}).inject(div);
  423
+		
  424
+		var ov2 = new Element('img', {
  425
+			'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2},
  426
+			'src': this.options.imgPath + 'moor_boverlay.png',
  427
+			'class': prefix + 'overlay'
  428
+		}).inject(div);
  429
+		
  430
+		if (window.ie6) {
  431
+			div.setStyle('overflow', '');
  432
+			var src = ov.src;
  433
+			ov.src = this.options.imgPath + 'blank.gif';
  434
+			ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
  435
+			src = ov2.src;
  436
+			ov2.src = this.options.imgPath + 'blank.gif';
  437
+			ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
  438
+		}
  439
+		ov.width = ov2.width = div.getStyle('width').toInt();
  440
+		ov.height = ov2.height = div.getStyle('height').toInt();
  441
+
  442
+		var cr = new Element('div', {
  443
+			'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2},
  444
+			'class': prefix + 'cursor'	
  445
+		}).inject(div);
  446
+		cr.width = cr.getStyle('width').toInt();
  447
+		cr.height = cr.getStyle('height').toInt();
  448
+		
  449
+		var sl = new Element('img', {
  450
+			'styles': {'position': 'absolute', 'z-index': 2},
  451
+			'src': this.options.imgPath + 'moor_slider.png',
  452
+			'class': prefix + 'slider'
  453
+		}).inject(box);
  454
+		this.layout.slider = Slick.find(document, '#' + idPrefix + 'slider');
  455
+		sl.width = sl.getStyle('width').toInt();
  456
+		sl.height = sl.getStyle('height').toInt();
  457
+
  458
+		new Element('div', {
  459
+			'styles': {'position': 'absolute'},
  460
+			'class': prefix + 'colorBox'
  461
+		}).inject(box);
  462
+
  463
+		new Element('div', {
  464
+			'styles': {'zIndex': 2, 'position': 'absolute'},
  465
+			'class': prefix + 'chooseColor'
  466
+		}).inject(box);
  467
+			
  468
+		this.layout.backup = new Element('div', {
  469
+			'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'},
  470
+			'class': prefix + 'currentColor'
  471
+		}).inject(box);
  472
+		
  473
+		var R = new Element('label').inject(box).setStyle('position', 'absolute');
  474
+		var G = R.clone().inject(box).addClass(prefix + 'gLabel').appendText('G: ');
  475
+		var B = R.clone().inject(box).addClass(prefix + 'bLabel').appendText('B: ');
  476
+		R.appendText('R: ').addClass(prefix + 'rLabel');
  477
+		
  478
+		var inputR = new Element('input');
  479
+		var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput');
  480
+		var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput');
  481
+		inputR.inject(R).addClass(prefix + 'rInput');
  482
+		
  483
+		var HU = new Element('label').inject(box).setStyle('position', 'absolute');
  484
+		var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').appendText('S: ');
  485
+		var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').appendText('B: ');
  486
+		HU.appendText('H: ').addClass(prefix + 'HueLabel');
  487
+
  488
+		var inputHU = new Element('input');
  489
+		var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput');
  490
+		var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput');
  491
+		inputHU.inject(HU).addClass(prefix + 'HueInput');
  492
+		SA.appendText(' %'); BR.appendText(' %');
  493
+		(new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'}).set('html', " &deg;").inject(HU, 'after'));
  494
+
  495
+		var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').appendText('#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput'));
  496
+		
  497
+		var ok = new Element('input', {
  498
+			'styles': {'position': 'absolute'},
  499
+			'type': 'button',
  500
+			'value': 'Select',
  501
+			'class': prefix + 'okButton'
  502
+		}).inject(box);
  503
+		
  504
+		this.rePosition();
  505
+
  506
+		var overlays = $$('#' + idPrefix + 'overlay');
  507
+		this.layout.overlay = overlays[0];
  508
+		this.layout.overlay2 = overlays[1];
  509
+		this.layout.cursor = Slick.find(document, '#' + idPrefix + 'cursor');
  510
+		this.layout.arrows = Slick.find(document, '#' + idPrefix + 'arrows');
  511
+		this.chooseColor = Slick.find(document, '#' + idPrefix + 'chooseColor');
  512
+		this.layout.backup = Slick.find(document, '#' + idPrefix + 'currentColor');
  513
+		this.RedInput = Slick.find(document, '#' + idPrefix + 'rInput');
  514
+		this.GreenInput = Slick.find(document, '#' + idPrefix + 'gInput');
  515
+		this.BlueInput = Slick.find(document, '#' + idPrefix + 'bInput');
  516
+		this.HueInput = Slick.find(document, '#' + idPrefix + 'HueInput');
  517
+		this.SatuInput = Slick.find(document, '#' + idPrefix + 'SatuInput');
  518
+		this.BrighInput = Slick.find(document, '#' + idPrefix + 'BrighInput');
  519
+		this.hexInput = Slick.find(document, '#' + idPrefix + 'hexInput');
  520
+
  521
+		this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput];
  522
+		this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput];
  523
+		this.okButton = Slick.find(document, '#' + idPrefix + 'okButton');
  524
+		
  525
+		this.layout.cursor.setStyle('background-image', 'url(' + this.options.imgPath + 'moor_cursor.gif)');
  526
+		
  527
+		if (!window.khtml) this.hide();
  528
+	},
  529
+	rePosition: function() {
  530
+		var coords = this.element.getCoordinates();
  531
+		this.layout.setStyles({
  532
+			'left': coords.left,
  533
+			'top': coords.top + coords.height + 1
  534
+		});
  535
+	},
  536
+	
  537
+	snippet: function(mode, type) {
  538
+		var size; type = (type) ? type : 'none';
  539
+
  540
+		switch(mode) {
  541
+			case 'arrPos':
  542
+				var t = this.layout.arrows.getStyle('top').toInt();
  543
+				size = t;
  544
+				break;
  545
+			case 'arrSize': 
  546
+				var h = this.layout.arrows.height;
  547
+				h = (type == 'int') ? (h/2).toInt() : h;
  548
+				size = h;
  549
+				break;		
  550
+			case 'curPos':
  551
+				var l = this.layout.cursor.getStyle('left').toInt();
  552
+				var t = this.layout.cursor.getStyle('top').toInt();
  553
+				size = {'l': l, 't': t};
  554
+				break;
  555
+			case 'slider':
  556
+				var t = this.layout.slider.getStyle('marginTop').toInt();
  557
+				size = t;
  558
+				break;
  559
+			default :
  560
+				var h = this.layout.cursor.height;
  561
+				var w = this.layout.cursor.width;
  562
+				h = (type == 'int') ? (h/2).toInt() : h;
  563
+				w = (type == 'int') ? (w/2).toInt() : w;
  564
+				size = {w: w, h: h};
  565
+		};
  566
+		return size;
  567
+	}
  568
+});
  569
+
  570
+MooRainbow.implement(new Options);
  571
+MooRainbow.implement(new Events);
27  media/system/js/mooRainbow.js
... ...
@@ -0,0 +1,27 @@
  1
+var MooRainbow=new Class({options:{id:"mooRainbow",prefix:"moor-",imgPath:"images/",startColor:[255,0,0],wheel:!1,onComplete:Class.empty,onChange:Class.empty},initialize:function(b,c){if(this.element=document.id(b))this.setOptions(c),this.sliderPos=0,this.pickerPos={x:0,y:0},this.currentColor=this.backupColor=this.options.startColor,this.sets={rgb:[],hsb:[],hex:[]},this.pickerClick=this.sliderClick=!1,this.layout||this.doLayout(),this.OverlayEvents(),this.sliderEvents(),this.backupEvent(),this.options.wheel&&
  2
+this.wheelEvents(),this.element.addEvent("click",function(a){this.toggle(a)}.bind(this)),this.layout.overlay.setStyle("background-color",this.options.startColor.rgbToHex()),this.layout.backup.setStyle("background-color",this.backupColor.rgbToHex()),this.pickerPos.x=this.snippet("curPos").l+this.snippet("curSize","int").w,this.pickerPos.y=this.snippet("curPos").t+this.snippet("curSize","int").h,this.manualSet(this.options.startColor),this.pickerPos.x=this.snippet("curPos").l+this.snippet("curSize",
  3
+"int").w,this.pickerPos.y=this.snippet("curPos").t+this.snippet("curSize","int").h,this.sliderPos=this.snippet("arrPos")-this.snippet("arrSize","int"),window.khtml&&this.hide()},toggle:function(){this[this.visible?"hide":"show"]()},show:function(){this.rePosition();this.layout.setStyle("display","block");this.layout.set("aria-hidden","false");this.visible=!0},hide:function(){this.layout.setStyles({display:"none"});this.layout.set("aria-hidden","true");this.visible=!1},manualSet:function(b,c){if(!c||
  4
+c!="hsb"&&c!="hex")c="rgb";var a,d;c=="rgb"?(a=b,d=b.rgbToHsb(),b.rgbToHex()):c=="hsb"?(d=b,a=b.hsbToRgb(),a.rgbToHex()):(a=b.hexToRgb(!0),d=a.rgbToHsb());this.setMooRainbow(a);this.autoSet(d)},autoSet:function(b){var c=this.snippet("curSize","int").h,a=this.snippet("curSize","int").w,d=this.layout.overlay.height,e=this.layout.overlay.width,f=this.layout.slider.height,g=this.snippet("arrSize","int"),e=Math.round(e*b[1]/100-a),d=Math.round(-(d*b[2]/100)+d-c),b=Math.round(f*b[0]/360),b=f-(b==360?0:
  5
+b)+this.snippet("slider")-g,f=[this.sets.hsb[0],100,100].hsbToRgb().rgbToHex();this.layout.cursor.setStyles({top:d,left:e});this.layout.arrows.setStyle("top",b);this.layout.overlay.setStyle("background-color",f);this.sliderPos=this.snippet("arrPos")-g;this.pickerPos.x=this.snippet("curPos").l+a;this.pickerPos.y=this.snippet("curPos").t+c},setMooRainbow:function(b,c){if(!c||c!="hsb"&&c!="hex")c="rgb";var a,d,e;c=="rgb"?(a=b,d=b.rgbToHsb(),e=b.rgbToHex()):c=="hsb"?(d=b,a=b.hsbToRgb(),e=a.rgbToHex()):
  6
+(e=b,a=b.hexToRgb(),d=a.rgbToHsb());this.sets={rgb:a,hsb:d,hex:e};this.pickerPos.x||this.autoSet(d);this.RedInput.value=a[0];this.GreenInput.value=a[1];this.BlueInput.value=a[2];this.HueInput.value=d[0];this.SatuInput.value=d[1];this.BrighInput.value=d[2];this.hexInput.value=e;this.currentColor=a;this.chooseColor.setStyle("background-color",a.rgbToHex());this.fireEvent("onChange",[this.sets,this])},parseColors:function(b,c,a){b=Math.round(b*100/this.layout.overlay.width);c=100-Math.round(c*100/this.layout.overlay.height);
  7
+a=360-Math.round(a*360/this.layout.slider.height)+this.snippet("slider")-this.snippet("arrSize","int");a-=this.snippet("arrSize","int");return[a>=360?0:a<0?0:a,b>100?100:b<0?0:b,c>100?100:c<0?0:c]},OverlayEvents:function(){var b,c,a;b=this.snippet("curSize","int").h;c=this.snippet("curSize","int").w;a=this.arrRGB.concat(this.arrHSB,this.hexInput);document.addEvent("click",function(){this.visible&&this.hide(this.layout)}.bind(this));a.each(function(a){a.addEvent("keydown",this.eventKeydown.bind(this,
  8
+a));a.addEvent("keyup",this.eventKeyup.bind(this,a))},this);[this.element,this.layout].each(function(a){a.addEvents({click:function(a){(new Event(a)).stop()},keyup:function(a){a=new Event(a);a.key=="esc"&&this.visible&&this.hide(this.layout)}.bind(this)},this)},this);this.layout.drag=new Drag(this.layout.cursor,{onStart:this.overlayDrag.bind(this),onDrag:this.overlayDrag.bind(this),snap:0});this.layout.overlay2.addEvent("mousedown",function(a){a=new Event(a);this.layout.cursor.setStyles({top:a.page.y-
  9
+this.layout.overlay.getTop()-b,left:a.page.x-this.layout.overlay.getLeft()-c});this.overlayDrag.call(this);this.layout.drag.start(a)}.bind(this));this.okButton.addEvent("click",function(){if(this.currentColor!=this.options.startColor)this.backupColor=this.currentColor,this.layout.backup.setStyle("background-color",this.backupColor.rgbToHex());this.hide();this.fireEvent("onComplete",[this.sets,this])}.bind(this))},overlayDrag:function(){var b=this.snippet("curSize","int").h,c=this.snippet("curSize",
  10
+"int").w;this.pickerPos.x=this.snippet("curPos").l+c;this.pickerPos.y=this.snippet("curPos").t+b;this.setMooRainbow(this.parseColors(this.pickerPos.x,this.pickerPos.y,this.sliderPos),"hsb");this.fireEvent("onChange",[this.sets,this])},sliderEvents:function(){var b=this.snippet("arrSize","int"),c;c=[0+this.snippet("slider")-b,this.layout.slider.height-b+this.snippet("slider")];this.layout.sliderDrag=new Drag(this.layout.arrows,{limit:{y:c},modifiers:{x:!1},onStart:this.sliderDrag.bind(this),onDrag:this.sliderDrag.bind(this),
  11
+snap:0});this.layout.slider.addEvent("mousedown",function(a){a=new Event(a);this.layout.arrows.setStyle("top",a.page.y-this.layout.slider.getTop()+this.snippet("slider")-b);this.sliderDrag.call(this);this.layout.sliderDrag.start(a)}.bind(this))},sliderDrag:function(){var b=this.snippet("arrSize","int");this.sliderPos=this.snippet("arrPos")-b;this.setMooRainbow(this.parseColors(this.pickerPos.x,this.pickerPos.y,this.sliderPos),"hsb");this.layout.overlay.setStyle("background-color",[this.sets.hsb[0],
  12
+100,100].hsbToRgb().rgbToHex());this.fireEvent("onChange",[this.sets,this])},backupEvent:function(){this.layout.backup.addEvent("click",function(){this.manualSet(this.backupColor);this.fireEvent("onChange",[this.sets,this])}.bind(this))},wheelEvents:function(){this.arrRGB.copy().extend(this.arrHSB).each(function(b){b.addEvents({mousewheel:this.eventKeys.bindWithEvent(this,b),keydown:this.eventKeys.bindWithEvent(this,b)})},this);[this.layout.arrows,this.layout.slider].each(function(b){b.addEvents({mousewheel:this.eventKeys.bindWithEvent(this,
  13
+[this.arrHSB[0],"slider"]),keydown:this.eventKeys.bindWithEvent(this,[this.arrHSB[0],"slider"])})},this)},eventKeys:function(b,c){var a,d;if(b.type=="keydown")if(b.key=="up")a=1;else if(b.key=="down")a=-1;else return;else b.type==Element.Events.mousewheel.type&&(a=b.wheel>0?1:-1);this.arrRGB.test(c)?d="rgb":(this.arrHSB.test(c),d="hsb");if(d=="rgb"){d=this.sets.rgb;var e=this.sets.hsb,f=this.options.prefix;a=c.value.toInt()+a;a=a>255?255:a<0?0:a;switch(c.className){case f+"rInput":a=[a,d[1],d[2]];
  14
+break;case f+"gInput":a=[d[0],a,d[2]];break;case f+"bInput":a=[d[0],d[1],a];break;default:a=d}this.manualSet(a)}else{e=this.sets.hsb;f=this.options.prefix;a=c.value.toInt()+a;a=c.className.test(/(HueInput)/)?a>359?0:a<0?0:a:a>100?100:a<0?0:a;switch(c.className){case f+"HueInput":a=[a,e[1],e[2]];break;case f+"SatuInput":a=[e[0],a,e[2]];break;case f+"BrighInput":a=[e[0],e[1],a];break;default:a=e}this.manualSet(a,"hsb")}this.fireEvent("onChange",[this.sets,this]);b.stop()},eventKeydown:function(b,c){var a=
  15
+c.code,d=c.key;!b.className.test(/hexInput/)&&!(a>=48&&a<=57)&&d!="backspace"&&d!="tab"&&d!="delete"&&d!="left"&&d!="right"&&c.stop()},eventKeyup:function(b,c){var a=c.code,d=c.key,e=b.value.charAt(0);if(b.value||b.value===0){if(b.className.test(/hexInput/)){if(e!="#"&&b.value.length!=6)return;if(e=="#"&&b.value.length!=7)return}else if(!(a>=48&&a<=57)&&!["backspace","tab","delete","left","right"].test(d)&&b.value.length>3)return;a=this.options.prefix;if(b.className.test(/(rInput|gInput|bInput)/)){if(!(b.value<
  16
+0||b.value>255)){switch(b.className){case a+"rInput":a=[b.value,this.sets.rgb[1],this.sets.rgb[2]];break;case a+"gInput":a=[this.sets.rgb[0],b.value,this.sets.rgb[2]];break;case a+"bInput":a=[this.sets.rgb[0],this.sets.rgb[1],b.value];break;default:a=this.sets.rgb}this.manualSet(a);this.fireEvent("onChange",[this.sets,this])}}else if(b.className.test(/hexInput/)){if(a=b.value.hexToRgb(!0),!isNaN(a[0])&&!isNaN(a[1])&&!isNaN(a[2])&&(a||a===0))this.manualSet(a),this.fireEvent("onChange",[this.sets,this])}else if(!(b.className.test(/HueInput/)&&
  17
+b.value<0||b.value>360)){if(b.className.test(/HueInput/)&&b.value==360)b.value=0;else if(b.className.test(/(SatuInput|BrighInput)/)&&b.value<0||b.value>100)return;switch(b.className){case a+"HueInput":a=[b.value,this.sets.hsb[1],this.sets.hsb[2]];break;case a+"SatuInput":a=[this.sets.hsb[0],b.value,this.sets.hsb[2]];break;case a+"BrighInput":a=[this.sets.hsb[0],this.sets.hsb[1],b.value];break;default:a=this.sets.hsb}this.manualSet(a,"hsb");this.fireEvent("onChange",[this.sets,this])}}},doLayout:function(){var b=
  18
+this.options.id,c=this.options.prefix,a=b+" ."+c;this.layout=(new Element("div",{styles:{display:"block",position:"absolute"},id:b})).inject(document.body);var b=(new Element("div",{styles:{position:"relative"},"class":c+"box"})).inject(this.layout),d=(new Element("div",{styles:{position:"absolute",overflow:"hidden"},"class":c+"overlayBox"})).inject(b),e=(new Element("div",{styles:{position:"absolute",zIndex:1},"class":c+"arrows"})).inject(b);e.width=e.getStyle("width").toInt();e.height=e.getStyle("height").toInt();
  19
+var e=(new Element("img",{styles:{"background-color":"#fff",position:"relative",zIndex:2},src:this.options.imgPath+"moor_woverlay.png","class":c+"overlay"})).inject(d),f=(new Element("img",{styles:{position:"absolute",top:0,left:0,zIndex:2},src:this.options.imgPath+"moor_boverlay.png","class":c+"overlay"})).inject(d);if(window.ie6){d.setStyle("overflow","");var g=e.src;e.src=this.options.imgPath+"blank.gif";e.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+g+"', sizingMethod='scale')";
  20
+g=f.src;f.src=this.options.imgPath+"blank.gif";f.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+g+"', sizingMethod='scale')"}e.width=f.width=d.getStyle("width").toInt();e.height=f.height=d.getStyle("height").toInt();d=(new Element("div",{styles:{overflow:"hidden",position:"absolute",zIndex:2},"class":c+"cursor"})).inject(d);d.width=d.getStyle("width").toInt();d.height=d.getStyle("height").toInt();d=(new Element("img",{styles:{position:"absolute","z-index":2},src:this.options.imgPath+
  21
+"moor_slider.png","class":c+"slider"})).inject(b);this.layout.slider=Slick.find(document,"#"+a+"slider");d.width=d.getStyle("width").toInt();d.height=d.getStyle("height").toInt();(new Element("div",{styles:{position:"absolute"},"class":c+"colorBox"})).inject(b);(new Element("div",{styles:{zIndex:2,position:"absolute"},"class":c+"chooseColor"})).inject(b);this.layout.backup=(new Element("div",{styles:{zIndex:2,position:"absolute",cursor:"pointer"},"class":c+"currentColor"})).inject(b);d=(new Element("label")).inject(b).setStyle("position",
  22
+"absolute");e=d.clone().inject(b).addClass(c+"gLabel").appendText("G: ");f=d.clone().inject(b).addClass(c+"bLabel").appendText("B: ");d.appendText("R: ").addClass(c+"rLabel");g=new Element("input");g.clone().inject(e).addClass(c+"gInput");g.clone().inject(f).addClass(c+"bInput");g.inject(d).addClass(c+"rInput");d=(new Element("label")).inject(b).setStyle("position","absolute");e=d.clone().inject(b).addClass(c+"SatuLabel").appendText("S: ");f=d.clone().inject(b).addClass(c+"BrighLabel").appendText("B: ");
  23
+d.appendText("H: ").addClass(c+"HueLabel");g=new Element("input");g.clone().inject(e).addClass(c+"SatuInput");g.clone().inject(f).addClass(c+"BrighInput");g.inject(d).addClass(c+"HueInput");e.appendText(" %");f.appendText(" %");(new Element("span",{styles:{position:"absolute"},"class":c+"ballino"})).set("html"," &deg;").inject(d,"after");(new Element("label")).inject(b).setStyle("position","absolute").addClass(c+"hexLabel").appendText("#hex: ").adopt((new Element("input")).addClass(c+"hexInput"));
  24
+(new Element("input",{styles:{position:"absolute"},type:"button",value:"Select","class":c+"okButton"})).inject(b);this.rePosition();c=$$("#"+a+"overlay");this.layout.overlay=c[0];this.layout.overlay2=c[1];this.layout.cursor=Slick.find(document,"#"+a+"cursor");this.layout.arrows=Slick.find(document,"#"+a+"arrows");this.chooseColor=Slick.find(document,"#"+a+"chooseColor");this.layout.backup=Slick.find(document,"#"+a+"currentColor");this.RedInput=Slick.find(document,"#"+a+"rInput");this.GreenInput=Slick.find(document,
  25
+"#"+a+"gInput");this.BlueInput=Slick.find(document,"#"+a+"bInput");this.HueInput=Slick.find(document,"#"+a+"HueInput");this.SatuInput=Slick.find(document,"#"+a+"SatuInput");this.BrighInput=Slick.find(document,"#"+a+"BrighInput");this.hexInput=Slick.find(document,"#"+a+"hexInput");this.arrRGB=[this.RedInput,this.GreenInput,this.BlueInput];this.arrHSB=[this.HueInput,this.SatuInput,this.BrighInput];this.okButton=Slick.find(document,"#"+a+"okButton");this.layout.cursor.setStyle("background-image","url("+
  26
+this.options.imgPath+"moor_cursor.gif)");window.khtml||this.hide()},rePosition:function(){var b=this.element.getCoordinates();this.layout.setStyles({left:b.left,top:b.top+b.height+1})},snippet:function(b,c){var a,c=c?c:"none";switch(b){case "arrPos":a=this.layout.arrows.getStyle("top").toInt();break;case "arrSize":a=this.layout.arrows.height;a=c=="int"?(a/2).toInt():a;break;case "curPos":var d=this.layout.cursor.getStyle("left").toInt();a=this.layout.cursor.getStyle("top").toInt();a={l:d,t:a};break;
  27
+case "slider":a=this.layout.slider.getStyle("marginTop").toInt();break;default:a=this.layout.cursor.height,d=this.layout.cursor.width,a=c=="int"?(a/2).toInt():a,d=c=="int"?(d/2).toInt():d,a={w:d,h:a}}return a}});MooRainbow.implement(new Options);MooRainbow.implement(new Events);
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.