spiderfw 0.6.38 → 0.6.39

data/apps/core/components/public/js/tinymce/classes/ui/ColorBox.js

@@ -0,0 +1,72 @@
+/**
+ * ColorBox.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ * This widget lets you enter colors and browse for colors by pressing the color button. It also displays
+ * a preview of the current color.
+ *
+ * @-x-less ColorBox.less
+ * @class tinymce.ui.ColorBox
+ * @extends tinymce.ui.ComboBox
+ */
+define("tinymce/ui/ColorBox", [
+	"tinymce/ui/ComboBox"
+], function(ComboBox) {
+	"use strict";
+
+	return ComboBox.extend({
+		/**
+		 * Constructs a new control instance with the specified settings.
+		 *
+		 * @constructor
+		 * @param {Object} settings Name/value object with settings.
+		 */
+		init: function(settings) {
+			var self = this;
+
+			settings.spellcheck = false;
+
+			if (settings.onaction) {
+				settings.icon = 'none';
+			}
+
+			self._super(settings);
+
+			self.classes.add('colorbox');
+			self.on('change keyup postrender', function() {
+				self.repaintColor(self.value());
+			});
+		},
+
+		repaintColor: function(value) {
+			var elm = this.getEl().getElementsByTagName('i')[0];
+
+			if (elm) {
+				try {
+					elm.style.background = value;
+				} catch (ex) {
+					// Ignore
+				}
+			}
+		},
+
+		bindStates: function() {
+			var self = this;
+
+			self.state.on('change:value', function(e) {
+				if (self._rendered) {
+					self.repaintColor(e.value);
+				}
+			});
+
+			return self._super();
+		}
+	});
+});

data/apps/core/components/public/js/tinymce/classes/ui/ColorButton.js

@@ -0,0 +1,124 @@
+/**
+ * ColorButton.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ * This class creates a color button control. This is a split button in which the main
+ * button has a visual representation of the currently selected color. When clicked
+ * the caret button displays a color picker, allowing the user to select a new color.
+ *
+ * @-x-less ColorButton.less
+ * @class tinymce.ui.ColorButton
+ * @extends tinymce.ui.PanelButton
+ */
+define("tinymce/ui/ColorButton", [
+	"tinymce/ui/PanelButton",
+	"tinymce/dom/DOMUtils"
+], function(PanelButton, DomUtils) {
+	"use strict";
+
+	var DOM = DomUtils.DOM;
+
+	return PanelButton.extend({
+		/**
+		 * Constructs a new ColorButton instance with the specified settings.
+		 *
+		 * @constructor
+		 * @param {Object} settings Name/value object with settings.
+		 */
+		init: function(settings) {
+			this._super(settings);
+			this.classes.add('colorbutton');
+		},
+
+		/**
+		 * Getter/setter for the current color.
+		 *
+		 * @method color
+		 * @param {String} [color] Color to set.
+		 * @return {String|tinymce.ui.ColorButton} Current color or current instance.
+		 */
+		color: function(color) {
+			if (color) {
+				this._color = color;
+				this.getEl('preview').style.backgroundColor = color;
+				return this;
+			}
+
+			return this._color;
+		},
+
+		/**
+		 * Resets the current color.
+		 *
+		 * @method resetColor
+		 * @return {tinymce.ui.ColorButton} Current instance.
+		 */
+		resetColor: function() {
+			this._color = null;
+			this.getEl('preview').style.backgroundColor = null;
+			return this;
+		},
+
+		/**
+		 * Renders the control as a HTML string.
+		 *
+		 * @method renderHtml
+		 * @return {String} HTML representing the control.
+		 */
+		renderHtml: function() {
+			var self = this, id = self._id, prefix = self.classPrefix, text = self.state.get('text');
+			var icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : '';
+			var image = self.settings.image ? ' style="background-image: url(\'' + self.settings.image + '\')"' : '',
+				textHtml = '';
+
+			if (text) {
+				self.classes.add('btn-has-text');
+				textHtml = '<span class="' + prefix + 'txt">' + self.encode(text) + '</span>';
+			}
+
+			return (
+				'<div id="' + id + '" class="' + self.classes + '" role="button" tabindex="-1" aria-haspopup="true">' +
+					'<button role="presentation" hidefocus="1" type="button" tabindex="-1">' +
+						(icon ? '<i class="' + icon + '"' + image + '></i>' : '') +
+						'<span id="' + id + '-preview" class="' + prefix + 'preview"></span>' +
+						textHtml +
+					'</button>' +
+					'<button type="button" class="' + prefix + 'open" hidefocus="1" tabindex="-1">' +
+						' <i class="' + prefix + 'caret"></i>' +
+					'</button>' +
+				'</div>'
+			);
+		},
+
+		/**
+		 * Called after the control has been rendered.
+		 *
+		 * @method postRender
+		 */
+		postRender: function() {
+			var self = this, onClickHandler = self.settings.onclick;
+
+			self.on('click', function(e) {
+				if (e.aria && e.aria.key == 'down') {
+					return;
+				}
+
+				if (e.control == self && !DOM.getParent(e.target, '.' + self.classPrefix + 'open')) {
+					e.stopImmediatePropagation();
+					onClickHandler.call(self, e);
+				}
+			});
+
+			delete self.settings.onclick;
+
+			return self._super();
+		}
+	});
+});

data/apps/core/components/public/js/tinymce/classes/ui/ColorPicker.js

@@ -0,0 +1,206 @@
+/**
+ * ColorPicker.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ * Color picker widget lets you select colors.
+ *
+ * @-x-less ColorPicker.less
+ * @class tinymce.ui.ColorPicker
+ * @extends tinymce.ui.Widget
+ */
+define("tinymce/ui/ColorPicker", [
+	"tinymce/ui/Widget",
+	"tinymce/ui/DragHelper",
+	"tinymce/ui/DomUtils",
+	"tinymce/util/Color"
+], function(Widget, DragHelper, DomUtils, Color) {
+	"use strict";
+
+	return Widget.extend({
+		Defaults: {
+			classes: "widget colorpicker"
+		},
+
+		/**
+		 * Constructs a new colorpicker instance with the specified settings.
+		 *
+		 * @constructor
+		 * @param {Object} settings Name/value object with settings.
+		 * @setting {String} color Initial color value.
+		 */
+		init: function(settings) {
+			this._super(settings);
+		},
+
+		postRender: function() {
+			var self = this, color = self.color(), hsv, hueRootElm, huePointElm, svRootElm, svPointElm;
+
+			hueRootElm = self.getEl('h');
+			huePointElm = self.getEl('hp');
+			svRootElm = self.getEl('sv');
+			svPointElm = self.getEl('svp');
+
+			function getPos(elm, event) {
+				var pos = DomUtils.getPos(elm), x, y;
+
+				x = event.pageX - pos.x;
+				y = event.pageY - pos.y;
+
+				x = Math.max(0, Math.min(x / elm.clientWidth, 1));
+				y = Math.max(0, Math.min(y / elm.clientHeight, 1));
+
+				return {
+					x: x,
+					y: y
+				};
+			}
+
+			function updateColor(hsv, hueUpdate) {
+				var hue = (360 - hsv.h) / 360;
+
+				DomUtils.css(huePointElm, {
+					top: (hue * 100) + '%'
+				});
+
+				if (!hueUpdate) {
+					DomUtils.css(svPointElm, {
+						left: hsv.s + '%',
+						top: (100 - hsv.v) + '%'
+					});
+				}
+
+				svRootElm.style.background = new Color({s: 100, v: 100, h: hsv.h}).toHex();
+				self.color().parse({s: hsv.s, v: hsv.v, h: hsv.h});
+			}
+
+			function updateSaturationAndValue(e) {
+				var pos;
+
+				pos = getPos(svRootElm, e);
+				hsv.s = pos.x * 100;
+				hsv.v = (1 - pos.y) * 100;
+
+				updateColor(hsv);
+				self.fire('change');
+			}
+
+			function updateHue(e) {
+				var pos;
+
+				pos = getPos(hueRootElm, e);
+				hsv = color.toHsv();
+				hsv.h = (1 - pos.y) * 360;
+				updateColor(hsv, true);
+				self.fire('change');
+			}
+
+			self._repaint = function() {
+				hsv = color.toHsv();
+				updateColor(hsv);
+			};
+
+			self._super();
+
+			self._svdraghelper = new DragHelper(self._id + '-sv', {
+				start: updateSaturationAndValue,
+				drag: updateSaturationAndValue
+			});
+
+			self._hdraghelper = new DragHelper(self._id + '-h', {
+				start: updateHue,
+				drag: updateHue
+			});
+
+			self._repaint();
+		},
+
+		rgb: function() {
+			return this.color().toRgb();
+		},
+
+		value: function(value) {
+			var self = this;
+
+			if (arguments.length) {
+				self.color().parse(value);
+
+				if (self._rendered) {
+					self._repaint();
+				}
+			} else {
+				return self.color().toHex();
+			}
+		},
+
+		color: function() {
+			if (!this._color) {
+				this._color = new Color();
+			}
+
+			return this._color;
+		},
+
+		/**
+		 * Renders the control as a HTML string.
+		 *
+		 * @method renderHtml
+		 * @return {String} HTML representing the control.
+		 */
+		renderHtml: function() {
+			var self = this, id = self._id, prefix = self.classPrefix, hueHtml;
+			var stops = '#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000';
+
+			function getOldIeFallbackHtml() {
+				var i, l, html = '', gradientPrefix, stopsList;
+
+				gradientPrefix = 'filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=';
+				stopsList = stops.split(',');
+				for (i = 0, l = stopsList.length - 1; i < l; i++) {
+					html += (
+						'<div class="' + prefix + 'colorpicker-h-chunk" style="' +
+							'height:' + (100 / l) + '%;' +
+							gradientPrefix + stopsList[i] + ',endColorstr=' + stopsList[i + 1] + ');' +
+							'-ms-' + gradientPrefix + stopsList[i] + ',endColorstr=' + stopsList[i + 1] + ')' +
+						'"></div>'
+					);
+				}
+
+				return html;
+			}
+
+			var gradientCssText = (
+				'background: -ms-linear-gradient(top,' + stops + ');' +
+				'background: linear-gradient(to bottom,' + stops + ');'
+			);
+
+			hueHtml = (
+				'<div id="' + id + '-h" class="' + prefix + 'colorpicker-h" style="' + gradientCssText + '">' +
+					getOldIeFallbackHtml() +
+					'<div id="' + id + '-hp" class="' + prefix + 'colorpicker-h-marker"></div>' +
+				'</div>'
+			);
+
+			return (
+				'<div id="' + id + '" class="' + self.classes + '">' +
+					'<div id="' + id + '-sv" class="' + prefix + 'colorpicker-sv">' +
+						'<div class="' + prefix + 'colorpicker-overlay1">' +
+							'<div class="' + prefix + 'colorpicker-overlay2">' +
+								'<div id="' + id + '-svp" class="' + prefix + 'colorpicker-selector1">' +
+									'<div class="' + prefix + 'colorpicker-selector2"></div>' +
+								'</div>' +
+							'</div>' +
+						'</div>' +
+					'</div>' +
+					hueHtml +
+				'</div>'
+			);
+		}
+	});
+});

data/apps/core/components/public/js/tinymce/classes/ui/ComboBox.js

@@ -0,0 +1,306 @@
+/**
+ * ComboBox.js
+ *
+ * Released under LGPL License.
+ * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
+ *
+ * License: http://www.tinymce.com/license
+ * Contributing: http://www.tinymce.com/contributing
+ */
+
+/**
+ * This class creates a combobox control. Select box that you select a value from or
+ * type a value into.
+ *
+ * @-x-less ComboBox.less
+ * @class tinymce.ui.ComboBox
+ * @extends tinymce.ui.Widget
+ */
+define("tinymce/ui/ComboBox", [
+	"tinymce/ui/Widget",
+	"tinymce/ui/Factory",
+	"tinymce/ui/DomUtils",
+	"tinymce/dom/DomQuery"
+], function(Widget, Factory, DomUtils, $) {
+	"use strict";
+
+	return Widget.extend({
+		/**
+		 * Constructs a new control instance with the specified settings.
+		 *
+		 * @constructor
+		 * @param {Object} settings Name/value object with settings.
+		 * @setting {String} placeholder Placeholder text to display.
+		 */
+		init: function(settings) {
+			var self = this;
+
+			self._super(settings);
+			settings = self.settings;
+
+			self.classes.add('combobox');
+			self.subinput = true;
+			self.ariaTarget = 'inp'; // TODO: Figure out a better way
+
+			settings.menu = settings.menu || settings.values;
+
+			if (settings.menu) {
+				settings.icon = 'caret';
+			}
+
+			self.on('click', function(e) {
+				var elm = e.target, root = self.getEl();
+
+				if (!$.contains(root, elm) && elm != root) {
+					return;
+				}
+
+				while (elm && elm != root) {
+					if (elm.id && elm.id.indexOf('-open') != -1) {
+						self.fire('action');
+
+						if (settings.menu) {
+							self.showMenu();
+
+							if (e.aria) {
+								self.menu.items()[0].focus();
+							}
+						}
+					}
+
+					elm = elm.parentNode;
+				}
+			});
+
+			// TODO: Rework this
+			self.on('keydown', function(e) {
+				if (e.target.nodeName == "INPUT" && e.keyCode == 13) {
+					self.parents().reverse().each(function(ctrl) {
+						var stateValue = self.state.get('value'), inputValue = self.getEl('inp').value;
+
+						e.preventDefault();
+
+						self.state.set('value', inputValue);
+
+						if (stateValue != inputValue) {
+							self.fire('change');
+						}
+
+						if (ctrl.hasEventListeners('submit') && ctrl.toJSON) {
+							ctrl.fire('submit', {data: ctrl.toJSON()});
+							return false;
+						}
+					});
+				}
+			});
+
+			self.on('keyup', function(e) {
+				if (e.target.nodeName == "INPUT") {
+					self.state.set('value', e.target.value);
+				}
+			});
+		},
+
+		showMenu: function() {
+			var self = this, settings = self.settings, menu;
+
+			if (!self.menu) {
+				menu = settings.menu || [];
+
+				// Is menu array then auto constuct menu control
+				if (menu.length) {
+					menu = {
+						type: 'menu',
+						items: menu
+					};
+				} else {
+					menu.type = menu.type || 'menu';
+				}
+
+				self.menu = Factory.create(menu).parent(self).renderTo(self.getContainerElm());
+				self.fire('createmenu');
+				self.menu.reflow();
+				self.menu.on('cancel', function(e) {
+					if (e.control === self.menu) {
+						self.focus();
+					}
+				});
+
+				self.menu.on('show hide', function(e) {
+					e.control.items().each(function(ctrl) {
+						ctrl.active(ctrl.value() == self.value());
+					});
+				}).fire('show');
+
+				self.menu.on('select', function(e) {
+					self.value(e.control.value());
+				});
+
+				self.on('focusin', function(e) {
+					if (e.target.tagName.toUpperCase() == 'INPUT') {
+						self.menu.hide();
+					}
+				});
+
+				self.aria('expanded', true);
+			}
+
+			self.menu.show();
+			self.menu.layoutRect({w: self.layoutRect().w});
+			self.menu.moveRel(self.getEl(), self.isRtl() ? ['br-tr', 'tr-br'] : ['bl-tl', 'tl-bl']);
+		},
+
+		/**
+		 * Focuses the input area of the control.
+		 *
+		 * @method focus
+		 */
+		focus: function() {
+			this.getEl('inp').focus();
+		},
+
+		/**
+		 * Repaints the control after a layout operation.
+		 *
+		 * @method repaint
+		 */
+		repaint: function() {
+			var self = this, elm = self.getEl(), openElm = self.getEl('open'), rect = self.layoutRect();
+			var width, lineHeight;
+
+			if (openElm) {
+				width = rect.w - DomUtils.getSize(openElm).width - 10;
+			} else {
+				width = rect.w - 10;
+			}
+
+			// Detect old IE 7+8 add lineHeight to align caret vertically in the middle
+			var doc = document;
+			if (doc.all && (!doc.documentMode || doc.documentMode <= 8)) {
+				lineHeight = (self.layoutRect().h - 2) + 'px';
+			}
+
+			$(elm.firstChild).css({
+				width: width,
+				lineHeight: lineHeight
+			});
+
+			self._super();
+
+			return self;
+		},
+
+		/**
+		 * Post render method. Called after the control has been rendered to the target.
+		 *
+		 * @method postRender
+		 * @return {tinymce.ui.ComboBox} Current combobox instance.
+		 */
+		postRender: function() {
+			var self = this;
+
+			$(this.getEl('inp')).on('change', function(e) {
+				self.state.set('value', e.target.value);
+				self.fire('change', e);
+			});
+
+			return self._super();
+		},
+
+		/**
+		 * Renders the control as a HTML string.
+		 *
+		 * @method renderHtml
+		 * @return {String} HTML representing the control.
+		 */
+		renderHtml: function() {
+			var self = this, id = self._id, settings = self.settings, prefix = self.classPrefix;
+			var value = self.state.get('value') || '';
+			var icon, text, openBtnHtml = '', extraAttrs = '';
+
+			if ("spellcheck" in settings) {
+				extraAttrs += ' spellcheck="' + settings.spellcheck + '"';
+			}
+
+			if (settings.maxLength) {
+				extraAttrs += ' maxlength="' + settings.maxLength + '"';
+			}
+
+			if (settings.size) {
+				extraAttrs += ' size="' + settings.size + '"';
+			}
+
+			if (settings.subtype) {
+				extraAttrs += ' type="' + settings.subtype + '"';
+			}
+
+			if (self.disabled()) {
+				extraAttrs += ' disabled="disabled"';
+			}
+
+			icon = settings.icon;
+			if (icon && icon != 'caret') {
+				icon = prefix + 'ico ' + prefix + 'i-' + settings.icon;
+			}
+
+			text = self.state.get('text');
+
+			if (icon || text) {
+				openBtnHtml = (
+					'<div id="' + id + '-open" class="' + prefix + 'btn ' + prefix + 'open" tabIndex="-1" role="button">' +
+						'<button id="' + id + '-action" type="button" hidefocus="1" tabindex="-1">' +
+							(icon != 'caret' ? '<i class="' + icon + '"></i>' : '<i class="' + prefix + 'caret"></i>') +
+							(text ? (icon ? ' ' : '') + text : '') +
+						'</button>' +
+					'</div>'
+				);
+
+				self.classes.add('has-open');
+			}
+
+			return (
+				'<div id="' + id + '" class="' + self.classes + '">' +
+					'<input id="' + id + '-inp" class="' + prefix + 'textbox" value="' +
+					self.encode(value, false) + '" hidefocus="1"' + extraAttrs + ' placeholder="' +
+					self.encode(settings.placeholder) + '" />' +
+					openBtnHtml +
+				'</div>'
+			);
+		},
+
+		value: function(value) {
+			if (arguments.length) {
+				this.state.set('value', value);
+				return this;
+			}
+
+			// Make sure the real state is in sync
+			if (this.state.get('rendered')) {
+				this.state.set('value', this.getEl('inp').value);
+			}
+
+			return this.state.get('value');
+		},
+
+		bindStates: function() {
+			var self = this;
+
+			self.state.on('change:value', function(e) {
+				if (self.getEl('inp').value != e.value) {
+					self.getEl('inp').value = e.value;
+				}
+			});
+
+			self.state.on('change:disabled', function(e) {
+				self.getEl('inp').disabled = e.value;
+			});
+
+			return self._super();
+		},
+
+		remove: function() {
+			$(this.getEl('inp')).off();
+			this._super();
+		}
+	});
+});