fit-ui 3.1.0 → 3.2.0

package/dist/Fit.UI.css

@@ -3351,6 +3351,88 @@ div.FitUiControlCheckBox[data-enabled="true"][data-valid="false"][data-showinval
 	border-color: red;
 }
 
+div.FitUiControlColorPicker
+{
+	height: 2em; /* Equal height for all controls */
+	width: 200px;
+
+	border: 0.065em solid #BBBBBB;
+	border-radius: 2px;
+
+	background-image: url("Controls/ColorPicker/transparent.jpg");
+	background-repeat: repeat;
+}
+
+div.FitUiControlColorPicker input[type="color"],
+div.FitUiControlColorPicker span
+{
+	cursor: pointer;
+}
+div.FitUiControlColorPicker[data-enabled="false"] input[type="color"],
+div.FitUiControlColorPicker[data-enabled="false"] span
+{
+	cursor: default;
+}
+
+div.FitUiControlColorPicker input[type="color"]
+{
+	width: 100%;
+	height: 100%;
+	opacity: 0; /* Hide ugly native picker - selected color is applied as background-color to outer control element */
+}
+
+/* Focused indicator */
+div.FitUiControlColorPicker[data-focused="true"]
+{
+	border-color: #4484C7;
+}
+
+/* Error indicator */
+div.FitUiControlColorPicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"]
+{
+	outline: none;
+}
+div.FitUiControlColorPicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-focused="false"]
+{
+	border-color: red;
+}
+
+/* Disabled indicator */
+div.FitUiControlColorPicker[data-enabled="false"]
+{
+	opacity: 0.7;
+}
+div.FitUiControlColorPicker[data-enabled="false"] span
+{
+	opacity: 0.5;
+}
+
+/* Label for HEX color code */
+div.FitUiControlColorPicker span:first-of-type
+{
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	width: 100%; /* Allow user to start text selection far away from value */
+	padding-left: 0.25em;
+}
+
+/* Clear button */
+div.FitUiControlColorPicker span:last-of-type
+{
+	position: absolute;
+	top: 50%;
+	transform: translateY(calc(-50% - 0.05em));
+	right: 0.2em;
+	font-size: 1.4em;
+}
+
+/* Hide label and clear button when no color is selected */
+div.FitUiControlColorPicker[data-transparent="true"] span:last-of-type
+{
+	display: none;
+}
 div.FitUiControlContextMenu.FitUiControlTreeView
 {
 	border: 0.065em solid #BBBBBB;

package/dist/Fit.UI.js

@@ -682,7 +682,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 3, Minor: 1, Patch: 0 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 3, Minor: 2, Patch: 0 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -5758,6 +5758,40 @@ Fit.Color.HexToRgb = function(hex)
 	return "rgb(" + rgb.Red + ", " + rgb.Green + ", " + rgb.Blue + ")";
 }
 
+/// <function container="Fit.Color" name="GetContrastColor" access="public" static="true" returns="string">
+/// 	<description> Get "black" or "white" depending on which is best suited in combination with specified color </description>
+/// 	<param name="hex" type="string"> HEX color string, e.g. #C0C0C0 (hash symbol is optional) </param>
+/// 	<param name="threshold" type="number" default="undefined">
+/// 		Returns "black" when brightness is above threshold, "white" otherwise.
+/// 		0 = all black, 255 = all white. Value defaults to 128.
+/// 	</param>
+/// </function>
+Fit.Color.GetContrastColor = function(hex, threshold)
+{
+	Fit.Validation.ExpectString(hex);
+	Fit.Validation.ExpectInteger(threshold, true);
+
+	// Validate input
+	if (/^#?[A-Za-z0-9]{6}$/.test(hex) === false)
+	{
+		throw "Invalid HEX color";
+	}
+
+    // Remove hash from color code
+    hex = hex.replace(/^#/, "");
+
+    // Convert HEX to RGB
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+
+    // Calculate luminance (perceived brightness)
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b); // 0 = all black, 255 = all white
+
+    // Return black if the color is light, white otherwise
+	return luminance > (threshold || 128) ? "black" : "white";
+}
+
 /// <container name="Fit.ColorTypeDefs.RgbColor">
 /// 	<description> RGB color object </description>
 /// 	<member name="Red" type="integer"> </member>
@@ -12449,6 +12483,223 @@ Fit.Controls.CheckBox = function(ctlId)
 	init();
 }
 
+/// <container name="Fit.Controls.ColorPicker" extends="Fit.Controls.ControlBase">
+/// 	ColorPicker control which allows for color selection.
+/// 	Extending from Fit.Controls.ControlBase.
+/// </container>
+
+/// <function container="Fit.Controls.ColorPicker" name="ColorPicker" access="public">
+/// 	<description> Create instance of ColorPicker control </description>
+/// 	<param name="ctlId" type="string" default="undefined"> Unique control ID that can be used to access control using Fit.Controls.Find(..) </param>
+/// </function>
+Fit.Controls.ColorPicker = function(ctlId)
+{
+	Fit.Validation.ExpectStringValue(ctlId, true);
+	Fit.Core.Extend(this, Fit.Controls.ControlBase).Apply(ctlId);
+
+	var me = this;
+	var colorPicker = null;			// Native color picker control: <input type="color">
+	var lblValue = null;			// Label showing selected HEX color code
+	var orgColor = "";				// Holds initial value used to determine IsDirty state
+	var prevColor = "";				// Holds latest change made by user - used to determine whether OnChange needs to be fired
+	var cmdClear = null;			// Clear button to remove color selection (transparency)
+	var defaultColor = "#FFD6D6";	// Color (use upper case!) that is unlikely to be used - OnChange won't fire if we click on the initially selected color, so this color cannot be selected without selecting another color first
+
+	// ============================================
+	// Init
+	// ============================================
+
+	function init()
+	{
+		me.AddCssClass("FitUiControlColorPicker");
+		transparent(true);
+
+		colorPicker = document.createElement("input");
+		colorPicker.type = "color";
+		colorPicker.value = defaultColor;
+		colorPicker.oninput = function() // Contrary to OnChange, OnInput fires continuously
+		{
+			if (me === null)
+			{
+				// Fix for Chrome which fires OnChange and OnBlur (in both capturering and bubbling phase)
+				// if control has focus while being removed from DOM, e.g. if used in a dialog closed using ESC.
+				// More details here: https://bugs.chromium.org/p/chromium/issues/detail?id=866242
+				return;
+			}
+
+			transparent(false);
+			fireOnChange();
+		}
+		me._internal.AddDomElement(colorPicker);
+
+		lblValue = document.createElement("span");
+		lblValue.tabIndex = -1;
+		lblValue.onclick = function(e)
+		{
+			if (window.getSelection().isCollapsed === true) // No selection - open picker - otherwise user is likely trying to copy color which color picker will prevent
+			{
+				colorPicker.click();
+			}
+		}
+		me._internal.AddDomElement(lblValue);
+
+		cmdClear = document.createElement("span");
+		cmdClear.tabIndex = -1;
+		cmdClear.innerHTML = "&times;";
+		cmdClear.onclick = function()
+		{
+			colorPicker.focus(); // Move focus to color picker - clear button will be hidden when transparent
+			transparent(true);
+
+			colorPicker.value = defaultColor;
+			prevColor = defaultColor;
+
+			fireOnChange();
+		}
+		me._internal.AddDomElement(cmdClear);
+	}
+
+	// ============================================
+	// Public - overrides
+	// ============================================
+
+	// See documentation on ControlBase
+	this.Focused = function(focus)
+	{
+		Fit.Validation.ExpectBoolean(focus, true);
+
+		if (Fit.Validation.IsSet(focus) === true && focus !== me.Focused())
+		{
+			if (focus === true)
+			{
+				colorPicker.focus();
+			}
+			else
+			{
+				Fit.Dom.GetFocused().blur(); // Multiple elements can hold focus - we have ensured control is the one having focus (me.Focused() above)
+			}
+		}
+
+		return Fit.Dom.Contained(me.GetDomElement(), Fit.Dom.GetFocused());
+	}
+
+	// See documentation on ControlBase
+	this.Value = function(val, preserveDirtyState)
+	{
+		Fit.Validation.ExpectString(val, true);
+		Fit.Validation.ExpectBoolean(preserveDirtyState, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			val = val.toUpperCase();
+
+			if (me.Value() !== val)
+			{
+				var changed = false;
+
+				if (val === "")
+				{
+					transparent(true);
+					changed = true;
+				}
+				else if (isValidColor(val) === true)
+				{
+					transparent(false);
+					colorPicker.value = val;
+					changed = true;
+				}
+
+				if (changed === true)
+				{
+					orgColor = (preserveDirtyState !== true ? val : orgColor);
+					fireOnChange();
+				}
+			}
+		}
+
+		return (transparent() ? "" : colorPicker.value.toUpperCase());
+	}
+
+	// See documentation on ControlBase
+	this.IsDirty = function()
+	{
+		return (orgColor !== me.Value());
+	}
+
+	// See documentation on ControlBase
+	this.Clear = function()
+	{
+		me.Value("");
+	}
+
+	// See documentation on ControlBase
+	this.Dispose = Fit.Core.CreateOverride(this.Dispose, function()
+	{
+		me = colorPicker = lblValue = orgColor = prevColor = cmdClear = defaultColor = null;
+		base();
+	});
+
+	// ============================================
+	// Public
+	// ============================================
+
+	this.ShowValue = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			lblValue.style.display = (val === false ? "none" : "");
+		}
+
+		return lblValue.style.display === "";
+	}
+
+	// ============================================
+	// Private
+	// ============================================
+
+	function transparent(val)
+	{
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			me._internal.Data("transparent", val ? "true" : "false");
+		}
+
+		return me._internal.Data("transparent") === "true";
+	}
+
+	function isValidColor(val)
+	{
+		return /^#[A-F0-9]{6}$/.test(val);
+	}
+
+	function fireOnChange()
+	{
+		var newVal = me.Value();
+		var compareValue = prevColor.toUpperCase(); // Value() returns uppercase value for color picker - preVal might be in lower case if assigned before input type was changed
+
+		if (newVal !== compareValue)
+		{
+			prevColor = newVal;
+			me._internal.FireOnChange();
+
+			var contrastColor = me.Value() !== "" ? Fit.Color.GetContrastColor(me.Value(), 120) : "black";
+
+			// Update control's background color
+			me.GetDomElement().style.background = me.Value();
+
+			// Update label showing color code
+			lblValue.innerHTML = me.Value();
+			lblValue.style.color = contrastColor;
+
+			// Update clear button's contract color
+			cmdClear.style.color = contrastColor;
+		}
+	}
+
+	init();
+}
 /// <container name="Fit.Controls.ContextMenu" extends="Fit.Controls.Component">
 /// 	ContextMenu control allowing for quick access to select features.
 /// </container>