src/pyams_skin/resources/js/ext/tinymce/dev/classes/ui/ColorPicker.js
changeset 566 a1707c607eec
parent 565 318533413200
child 567 bca1726b1d85
equal deleted inserted replaced
565:318533413200 566:a1707c607eec
     1 /**
       
     2  * ColorPicker.js
       
     3  *
       
     4  * Copyright, Moxiecode Systems AB
       
     5  * Released under LGPL License.
       
     6  *
       
     7  * License: http://www.tinymce.com/license
       
     8  * Contributing: http://www.tinymce.com/contributing
       
     9  */
       
    10 
       
    11 /**
       
    12  * Color picker widget lets you select colors.
       
    13  *
       
    14  * @-x-less ColorPicker.less
       
    15  * @class tinymce.ui.ColorPicker
       
    16  * @extends tinymce.ui.Widget
       
    17  */
       
    18 define("tinymce/ui/ColorPicker", [
       
    19 	"tinymce/ui/Widget",
       
    20 	"tinymce/ui/DragHelper",
       
    21 	"tinymce/ui/DomUtils",
       
    22 	"tinymce/util/Color"
       
    23 ], function(Widget, DragHelper, DomUtils, Color) {
       
    24 	"use strict";
       
    25 
       
    26 	return Widget.extend({
       
    27 		Defaults: {
       
    28 			classes: "widget colorpicker"
       
    29 		},
       
    30 
       
    31 		/**
       
    32 		 * Constructs a new colorpicker instance with the specified settings.
       
    33 		 *
       
    34 		 * @constructor
       
    35 		 * @param {Object} settings Name/value object with settings.
       
    36 		 * @setting {String} color Initial color value.
       
    37 		 */
       
    38 		init: function(settings) {
       
    39 			this._super(settings);
       
    40 		},
       
    41 
       
    42 		postRender: function() {
       
    43 			var self = this, color = self.color(), hsv, hueRootElm, huePointElm, svRootElm, svPointElm;
       
    44 
       
    45 			hueRootElm = self.getEl('h');
       
    46 			huePointElm = self.getEl('hp');
       
    47 			svRootElm = self.getEl('sv');
       
    48 			svPointElm = self.getEl('svp');
       
    49 
       
    50 			function getPos(elm, event) {
       
    51 				var pos = DomUtils.getPos(elm), x, y;
       
    52 
       
    53 				x = event.pageX - pos.x;
       
    54 				y = event.pageY - pos.y;
       
    55 
       
    56 				x = Math.max(0, Math.min(x / elm.clientWidth, 1));
       
    57 				y = Math.max(0, Math.min(y / elm.clientHeight, 1));
       
    58 
       
    59 				return {
       
    60 					x: x,
       
    61 					y: y
       
    62 				};
       
    63 			}
       
    64 
       
    65 			function updateColor(hsv, hueUpdate) {
       
    66 				var hue = (360 - hsv.h) / 360;
       
    67 
       
    68 				DomUtils.css(huePointElm, {
       
    69 					top: (hue * 100) + '%'
       
    70 				});
       
    71 
       
    72 				if (!hueUpdate) {
       
    73 					DomUtils.css(svPointElm, {
       
    74 						left: hsv.s + '%',
       
    75 						top: (100 - hsv.v) + '%'
       
    76 					});
       
    77 				}
       
    78 
       
    79 				svRootElm.style.background = new Color({s: 100, v: 100, h: hsv.h}).toHex();
       
    80 				self.color().parse({s: hsv.s, v: hsv.v, h: hsv.h});
       
    81 			}
       
    82 
       
    83 			function updateSaturationAndValue(e) {
       
    84 				var pos;
       
    85 
       
    86 				pos = getPos(svRootElm, e);
       
    87 				hsv.s = pos.x * 100;
       
    88 				hsv.v = (1 - pos.y) * 100;
       
    89 
       
    90 				updateColor(hsv);
       
    91 				self.fire('change');
       
    92 			}
       
    93 
       
    94 			function updateHue(e) {
       
    95 				var pos;
       
    96 
       
    97 				pos = getPos(hueRootElm, e);
       
    98 				hsv = color.toHsv();
       
    99 				hsv.h = (1 - pos.y) * 360;
       
   100 				updateColor(hsv, true);
       
   101 				self.fire('change');
       
   102 			}
       
   103 
       
   104 			self._repaint = function() {
       
   105 				hsv = color.toHsv();
       
   106 				updateColor(hsv);
       
   107 			};
       
   108 
       
   109 			self._super();
       
   110 
       
   111 			self._svdraghelper = new DragHelper(self._id + '-sv', {
       
   112 				start: updateSaturationAndValue,
       
   113 				drag: updateSaturationAndValue
       
   114 			});
       
   115 
       
   116 			self._hdraghelper = new DragHelper(self._id + '-h', {
       
   117 				start: updateHue,
       
   118 				drag: updateHue
       
   119 			});
       
   120 
       
   121 			self._repaint();
       
   122 		},
       
   123 
       
   124 		rgb: function() {
       
   125 			return this.color().toRgb();
       
   126 		},
       
   127 
       
   128 		value: function(value) {
       
   129 			var self = this;
       
   130 
       
   131 			if (arguments.length) {
       
   132 				self.color().parse(value);
       
   133 
       
   134 				if (self._rendered) {
       
   135 					self._repaint();
       
   136 				}
       
   137 			} else {
       
   138 				return self.color().toHex();
       
   139 			}
       
   140 		},
       
   141 
       
   142 		color: function() {
       
   143 			if (!this._color) {
       
   144 				this._color = new Color();
       
   145 			}
       
   146 
       
   147 			return this._color;
       
   148 		},
       
   149 
       
   150 		/**
       
   151 		 * Renders the control as a HTML string.
       
   152 		 *
       
   153 		 * @method renderHtml
       
   154 		 * @return {String} HTML representing the control.
       
   155 		 */
       
   156 		renderHtml: function() {
       
   157 			var self = this, id = self._id, prefix = self.classPrefix, hueHtml;
       
   158 			var stops = '#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000';
       
   159 
       
   160 			function getOldIeFallbackHtml() {
       
   161 				var i, l, html = '', gradientPrefix, stopsList;
       
   162 
       
   163 				gradientPrefix = 'filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=';
       
   164 				stopsList = stops.split(',');
       
   165 				for (i = 0, l = stopsList.length - 1; i < l; i++) {
       
   166 					html += (
       
   167 						'<div class="' + prefix + 'colorpicker-h-chunk" style="' +
       
   168 							'height:' + (100 / l) + '%;' +
       
   169 							gradientPrefix + stopsList[i] + ',endColorstr=' + stopsList[i + 1] + ');' +
       
   170 							'-ms-' + gradientPrefix + stopsList[i] + ',endColorstr=' + stopsList[i + 1] + ')' +
       
   171 						'"></div>'
       
   172 					);
       
   173 				}
       
   174 
       
   175 				return html;
       
   176 			}
       
   177 
       
   178 			var gradientCssText = (
       
   179 				'background: -ms-linear-gradient(top,' + stops + ');' +
       
   180 				'background: linear-gradient(to bottom,' + stops + ');'
       
   181 			);
       
   182 
       
   183 			hueHtml = (
       
   184 				'<div id="' + id + '-h" class="' + prefix + 'colorpicker-h" style="' + gradientCssText + '">' +
       
   185 					getOldIeFallbackHtml() +
       
   186 					'<div id="' + id + '-hp" class="' + prefix + 'colorpicker-h-marker"></div>' +
       
   187 				'</div>'
       
   188 			);
       
   189 
       
   190 			return (
       
   191 				'<div id="' + id + '" class="' + self.classes() + '">' +
       
   192 					'<div id="' + id + '-sv" class="' + prefix + 'colorpicker-sv">' +
       
   193 						'<div class="' + prefix + 'colorpicker-overlay1">' +
       
   194 							'<div class="' + prefix + 'colorpicker-overlay2">' +
       
   195 								'<div id="' + id + '-svp" class="' + prefix + 'colorpicker-selector1">' +
       
   196 									'<div class="' + prefix + 'colorpicker-selector2"></div>' +
       
   197 								'</div>' +
       
   198 							'</div>' +
       
   199 						'</div>' +
       
   200 					'</div>' +
       
   201 					hueHtml +
       
   202 				'</div>'
       
   203 			);
       
   204 		}
       
   205 	});
       
   206 });