fit-ui 3.4.4 → 3.5.0

package/dist/Fit.UI.css

@@ -5082,6 +5082,55 @@ div.FitUiControlInput[data-designmode="true"][data-toolbar="false"] [contentedit
 	cursor: pointer;
 }
 
+/* Character counter callout */
+
+div.FitUiControlInput[data-maxlength="true"] > span[data-maxlength]
+{
+	display: none;
+}
+div.FitUiControlInput[data-maxlength="true"][data-focused="true"] > span[data-maxlength]
+{
+	display: inline;
+	cursor: default;
+	position: absolute;
+	top: 0em;
+	right: 0;
+	transform: translateX(calc(100% + 1em));
+	font-size: 0.8em;
+	line-height: 2.5em;
+	padding: 0em 0.5em;
+	background-color: #696969;
+	color: white;
+	border-radius: 0.5em;
+}
+div.FitUiControlInput[data-maxlength="true"][data-focused="true"][data-designmode="true"] > span[data-maxlength] /* Align with toolbar */
+{
+	top: 0.6em;
+}
+div.FitUiControlInput[data-maxlength="true"][data-focused="true"] > span[data-maxlength]:before /* counter text, e.g. 33/100 */
+{
+	content: attr(data-maxlength);
+}
+div.FitUiControlInput[data-maxlength="true"][data-focused="true"] > span[data-maxlength]:after /* Left side arrow */
+{
+	content: "";
+	position: absolute;
+	top: 50%;
+	right: calc(100% - 0.1em);
+	transform: translateY(-50%);
+	border-width: 0.6em;
+	border-style: solid;
+	border-color: transparent #696969 transparent transparent;
+}
+div.FitUiControlInput[data-maxlength="true"][data-focused="true"][data-valid="false"] > span[data-maxlength]
+{
+	background-color: red;
+}
+div.FitUiControlInput[data-maxlength="true"][data-focused="true"][data-valid="false"] > span[data-maxlength]:after
+{
+	border-color: transparent red transparent transparent;
+}
+
 /* Fluent UI compatibility */
 
 /* The following elements are mounted in document root - make sure they stay on

package/dist/Fit.UI.js

@@ -682,7 +682,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 3, Minor: 4, Patch: 4 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 3, Minor: 5, Patch: 0 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -24168,6 +24168,10 @@ Fit.Controls.Input = function(ctlId)
 	var orgVal = "";			// Holds initial value used to determine IsDirty state
 	var preVal = "";			// Holds latest change made by user - used to determine whether OnChange needs to be fired
 	var input = null;
+	var charCounter = null;
+	var charCounterConfig = null;
+	var maxLength = -1;
+	var curLength = -1;			// Holds input length - HTML formatting is excluded in Design Mode as it represents characters entered by the user
 	var changeObserverId = -1;	// Holds interval ID to observer function for controls (e.g. color picker) not continuously firing OnChange when value is changed
 	var cmdResize = null;
 	var designEditor = null;
@@ -24224,8 +24228,11 @@ Fit.Controls.Input = function(ctlId)
 		input.type = "text";
 		input.autocomplete = "off";
 		input.spellcheck = true;
-		input.onkeyup = function()
+		input.oninput/*onkeyup*/ = function()
 		{
+			curLength = -1; // Let getInputLength() calculate new length when called
+			updateCharCounter();
+
 			if (designEditorClearPlaceholder === true)
 			{
 				designEditorClearPlaceholder = false;	// Prevent additional calls to updateDesignEditorPlaceholder - it retrieves editor value which is expensive
@@ -24260,7 +24267,7 @@ Fit.Controls.Input = function(ctlId)
 				}
 			}
 		}
-		input.onchange = function() // OnKeyUp does not catch changes by mouse (e.g. paste or moving selected text)
+		/*input.onchange = function() // OnKeyUp does not catch changes by mouse (e.g. paste or moving selected text)
 		{
 			if (me === null)
 			{
@@ -24271,11 +24278,12 @@ Fit.Controls.Input = function(ctlId)
 			}
 
 			input.onkeyup();
-		}
+		}*/
 		me._internal.AddDomElement(input);
 
 		me.AddCssClass("FitUiControlInput");
 
+		me._internal.Data("maxlength", "false");
 		me._internal.Data("multiline", "false");
 		me._internal.Data("maximizable", "false");
 		me._internal.Data("maximized", "false");
@@ -24312,7 +24320,7 @@ Fit.Controls.Input = function(ctlId)
 			{
 				changeObserverId = setInterval(function()
 				{
-					input.onkeyup();
+					input.oninput(); //input.onkeyup();
 				}, 100);
 			}
 		});
@@ -24371,6 +24379,42 @@ Fit.Controls.Input = function(ctlId)
 			nativeResizableAvailable = window.MouseEvent && new MouseEvent("mousemove", {}).buttons !== undefined || false;
 		}
 		catch (err) {}
+
+		// MaxLength support
+
+		me.AddValidationRule(function(sender)
+		{
+			if (maxLength > 0 && getInputLength() > maxLength)
+			{
+				return charCounterConfig.ShowValidationError === true ? locale.MaxLengthExceeded.replace("{0}", maxLength + "") : false;
+			}
+		});
+
+		Fit.Events.AddHandler(me.GetDomElement(), "keypress", function(e)
+		{
+			var ev = Fit.Events.GetEvent(e);
+
+			// Suppress key stroke if max length is reached in HTML editor.
+			// This is not perfect. Line breaks and emojis are not intercepted, neither is paste
+			// operations, but such input will get caught as invalid if it exceeds maxlength when
+			// focus is lost (see OnBlur handler below) or on the next key stroke. Poor man's implementation.
+			if (maxLength > 0 && designEditor !== null && charCounterConfig.StopInputOnLimit === true && ev.keyCode !== 8 && ev.keyCode !== 46 && ev.ctrlKey === false && ev.altKey === false && ev.metaKey === false && getInputLength() >= maxLength && window.getSelection().toString() === "")
+			{
+				Fit.Events.PreventDefault(ev);
+			}
+		});
+
+		me.OnBlur(function(sender)
+		{
+			// HTML editor does not fire OnChange when inserting emojis. Make sure
+			// counter and valid state is properly reflected when focus is lost.
+			if (maxLength > 0 && designEditor !== null)
+			{
+				curLength = -1; // Let getInputLength() calculate new length when called
+				updateCharCounter();
+				me._internal.Validate();
+			}
+		});
 	}
 
 	// ============================================
@@ -24683,7 +24727,11 @@ Fit.Controls.Input = function(ctlId)
 			}
 
 			if (fireOnChange === true)
+			{
+				curLength = -1; // Let getInputLength() calculate new length when called
+				updateCharCounter();
 				me._internal.FireOnChange();
+			}
 		}
 
 		if (designModeEnabledAndReady() === true)
@@ -24892,7 +24940,7 @@ Fit.Controls.Input = function(ctlId)
 			});
 		}
 
-		me = orgVal = preVal = input = changeObserverId = cmdResize = designEditor = designEditorDom = designEditorDirty = designEditorDirtyPending = designEditorConfig = designEditorReloadConfig = designEditorRestoreButtonState = designEditorSuppressPaste = designEditorSuppressOnResize = designEditorMustReloadWhenReady = designEditorMustDisposeWhenReady = designEditorUpdateSizeDebouncer = designEditorHeightMonitorId = designEditorActiveToolbarPanel = designEditorDetached = designEditorClearPlaceholder = designEditorCleanEditableDom = designEditorGlobalKeyDownEventId = designEditorGlobalKeyUpEventId /*= htmlWrappedInParagraph*/ = wasAutoChangedToMultiLineMode = minimizeHeight = maximizeHeight = minMaxUnit = maximizeHeightConfigured = resizable = nativeResizableAvailable = mutationObserverId = rootedEventId = createWhenReadyIntervalId = isIe8 = debounceOnChangeTimeout = debouncedOnChange = imageBlobUrls = locale = null;
+		me = orgVal = preVal = input = charCounter = charCounterConfig = maxLength = curLength = changeObserverId = cmdResize = designEditor = designEditorDom = designEditorDirty = designEditorDirtyPending = designEditorConfig = designEditorReloadConfig = designEditorRestoreButtonState = designEditorSuppressPaste = designEditorSuppressOnResize = designEditorMustReloadWhenReady = designEditorMustDisposeWhenReady = designEditorUpdateSizeDebouncer = designEditorHeightMonitorId = designEditorActiveToolbarPanel = designEditorDetached = designEditorClearPlaceholder = designEditorCleanEditableDom = designEditorGlobalKeyDownEventId = designEditorGlobalKeyUpEventId /*= htmlWrappedInParagraph*/ = wasAutoChangedToMultiLineMode = minimizeHeight = maximizeHeight = minMaxUnit = maximizeHeightConfigured = resizable = nativeResizableAvailable = mutationObserverId = rootedEventId = createWhenReadyIntervalId = isIe8 = debounceOnChangeTimeout = debouncedOnChange = imageBlobUrls = locale = null;
 
 		base();
 	});
@@ -24985,6 +25033,91 @@ Fit.Controls.Input = function(ctlId)
 	// Public
 	// ============================================
 
+	/// <container name="Fit.Controls.InputTypeDefs.MaxLengthConfig">
+	/// 	<description> Configuration for MaxLength feature </description>
+	/// 	<member name="HideUntilCharCount" type="integer" default="0">
+	/// 		Hide character counter until this number of characters is reached
+	/// 	</member>
+	/// 	<member name="StopInputOnLimit" type="boolean" default="true">
+	/// 		If True, blocks additional input when maximum text length is reached
+	/// 	</member>
+	/// 	<member name="ShowValidationError" type="boolean" default="false">
+	/// 		If True, shows a validation error message when the maximum text lenght is reached
+	/// 	</member>
+	/// </container>
+
+	/// <function container="Fit.Controls.Input" name="MaxLength" access="public" returns="integer">
+	/// 	<description>
+	/// 		Get/set the maximum text length. Be aware that HTML formatting in Design Mode
+	/// 		does not count - use AddValidationRule(..) to set a hard limit if needed.
+	/// 		Returns -1 when no maximum text length is imposed.
+	/// 	</description>
+	/// 	<param name="val" type="integer" default="undefined"> If defined, value is set as maximum text length </param>
+	/// 	<param name="config" type="Fit.Controls.InputTypeDefs.MaxLengthConfig" default="undefined">
+	/// 		Optional configuration for how maximum text length is handled and behaves.
+	/// 	</param>
+	/// </function>
+	this.MaxLength = function(val, config)
+	{
+		Fit.Validation.ExpectInteger(val, true);
+		Fit.Validation.ExpectObject(config, true);
+		Fit.Validation.ExpectInteger((config || {}).HideUntilCharCount, true);
+		Fit.Validation.ExpectBoolean((config || {}).StopInputOnLimit, true);
+		Fit.Validation.ExpectBoolean((config || {}).ShowValidationError, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			if (val > 0)
+			{
+				charCounterConfig =
+				{
+					HideUntilCharCount: config && config.HideUntilCharCount || 0,
+					StopInputOnLimit: config ? config.StopInputOnLimit !== false : true,
+					ShowValidationError: config ? config.ShowValidationError === true : false
+				};
+
+				maxLength = val;
+				me._internal.Data("maxlength", "true");
+
+				if (charCounter === null)
+				{
+					charCounter = document.createElement("span");
+					charCounter.title = locale.MaxLengthExceeded.replace("{0}", maxLength + "");
+					me._internal.AddDomElement(charCounter);
+				}
+
+				if (charCounterConfig.HideUntilCharCount > 0)
+				{
+					charCounter.style.display = "none"; // Updated when updateCharCounter() is called
+				}
+
+				if (charCounterConfig.StopInputOnLimit === true)
+				{
+					Fit.Dom.Attribute(input, "maxlength", maxLength + ""); // Prevents user from entering too many characters
+				}
+
+				updateCharCounter();
+				me._internal.Validate();
+			}
+			else if (val <= 0 && charCounter !== null)
+			{
+				charCounterConfig = null;
+
+				maxLength = -1;
+				me._internal.Data("maxlength", "false");
+
+				me._internal.RemoveDomElement(charCounter);
+				charCounter = null;
+
+				Fit.Dom.Attribute(input, "maxlength", null);
+
+				me._internal.Validate();
+			}
+		}
+
+		return maxLength;
+	}
+
 	/// <function container="Fit.Controls.Input" name="Placeholder" access="public" returns="string">
 	/// 	<description> Get/set value used as a placeholder to indicate expected input on supported browsers </description>
 	/// 	<param name="val" type="string" default="undefined"> If defined, value is set as placeholder </param>
@@ -25129,16 +25262,18 @@ Fit.Controls.Input = function(ctlId)
 				var focused = me.Focused();
 
 				var oldInput = input;
-				me._internal.RemoveDomElement(oldInput);
 
 				input = document.createElement("textarea");
 				input.value = oldInput.value;
 				input.spellcheck = oldInput.spellcheck;
 				input.placeholder = oldInput.placeholder;
 				input.disabled = oldInput.disabled;
-				input.onkeyup = oldInput.onkeyup;
-				input.onchange = oldInput.onchange;
-				me._internal.AddDomElement(input);
+				//input.onkeyup = oldInput.onkeyup;
+				//input.onchange = oldInput.onchange;
+				input.oninput = oldInput.oninput;
+
+				Fit.Dom.Attribute(input, "maxlength", charCounterConfig && charCounterConfig.StopInputOnLimit === true ? maxLength + "" : null);
+				Fit.Dom.Replace(oldInput, input);
 
 				if (nativeResizableAvailable === true)
 				{
@@ -25169,7 +25304,6 @@ Fit.Controls.Input = function(ctlId)
 				var focused = me.Focused();
 
 				var oldInput = input;
-				me._internal.RemoveDomElement(oldInput);
 
 				if (cmdResize !== null)
 				{
@@ -25194,9 +25328,12 @@ Fit.Controls.Input = function(ctlId)
 				input.spellcheck = oldInput.spellcheck;
 				input.placeholder = oldInput.placeholder;
 				input.disabled = oldInput.disabled;
-				input.onkeyup = oldInput.onkeyup;
-				input.onchange = oldInput.onchange;
-				me._internal.AddDomElement(input);
+				//input.onkeyup = oldInput.onkeyup;
+				//input.onchange = oldInput.onchange;
+				input.oninput = oldInput.oninput;
+
+				Fit.Dom.Attribute(input, "maxlength", charCounterConfig && charCounterConfig.StopInputOnLimit === true ? maxLength + "" : null);
+				Fit.Dom.Replace(oldInput, input);
 
 				me.Height(-1);
 
@@ -26235,6 +26372,45 @@ Fit.Controls.Input = function(ctlId)
 	// Private
 	// ============================================
 
+	function updateCharCounter()
+	{
+		if (charCounter !== null)
+		{
+			var currentLength = getInputLength();
+			Fit.Dom.Data(charCounter, "maxlength", currentLength + "/" + maxLength);
+
+			if (charCounter.style.display === "none") // Hidden if HideUntilCharCount is enabled
+			{
+				var showCounter = currentLength >= charCounterConfig.HideUntilCharCount;
+
+				if (showCounter === true) // Only go from hidden to shown, not the other way around - it might confuse the user if it comes and goes
+				{
+					charCounter.style.display = "";
+				}
+			}
+		}
+	}
+
+	function getInputLength()
+	{
+		if (curLength === -1)
+		{
+			if (designEditor !== null)
+			{
+				//return Fit.String.StripHtml(me.Value()).length;
+				var span = document.createElement("span");
+				span.innerHTML = me.Value();
+				curLength = span.textContent.length; // Discards formatting and transforms HTML/HEX entities into characters
+			}
+			else
+			{
+				curLength = me.Value().length;
+			}
+		}
+
+		return curLength;
+	}
+
 	function createEditor()
 	{
 		// NOTICE: CKEDITOR requires input control to be rooted in DOM.
@@ -27094,7 +27270,7 @@ Fit.Controls.Input = function(ctlId)
 						designEditorDirty = true;
 					}
 
-					input.onkeyup();
+					input.oninput(); //input.onkeyup();
 				},
 				resize: function() // Fires when size is changed (except via auto grow), not just when resized using resize handle in lower right cornor
 				{
@@ -28361,6 +28537,12 @@ Fit.Controls.Input = function(ctlId)
 				designEditorDetached = detachedEditor;
 			}
 		}
+
+		if (charCounter !== null)
+		{
+			charCounter.title = locale.MaxLengthExceeded.replace("{0}", maxLength + "");
+			me._internal.Validate();
+		}
 	}
 
 	function repaint()
@@ -28486,6 +28668,8 @@ Fit.Internationalization.AddLocalization(Fit.Controls.Input,
 
 	"en":
 	{
+		"MaxLengthExceeded": "A maximum of {0} characters allowed",
+
 		"Detach": "Open in dialog",
 		"Ok": "OK",
 		"Cancel": "Cancel",
@@ -28508,6 +28692,8 @@ Fit.Internationalization.AddLocalization(Fit.Controls.Input,
 	},
 	"da":
 	{
+		"MaxLengthExceeded": "Højest {0} tegn tilladt",
+
 		"Detach": "Åben i dialog",
 		"Ok": "OK",
 		"Cancel": "Annullér",
@@ -28530,6 +28716,8 @@ Fit.Internationalization.AddLocalization(Fit.Controls.Input,
 	},
 	"de":
 	{
+		"MaxLengthExceeded": "Höchstens {0} Zeichen erlaubt",
+
 		"Detach": "Im Dialog öffnen",
 		"Ok": "OK",
 		"Cancel": "Abbrechen",
@@ -28552,6 +28740,8 @@ Fit.Internationalization.AddLocalization(Fit.Controls.Input,
 	},
 	"no":
 	{
+		"MaxLengthExceeded": "Maksimalt {0} tegn tillatt",
+
 		"Detach": "Åpne i dialog",
 		"Ok": "OK",
 		"Cancel": "Avbryt",
@@ -31704,7 +31894,7 @@ Fit.Controls.TreeView = function(ctlId)
 				// starting from the top again. Therefore, if node passed is visible
 				// in the hierarcy (not hidden behind collapsed nodes), then use it.
 
-				nodeIsVisibleInHierarchy = true;
+				var nodeIsVisibleInHierarchy = true;
 
 				var parent = node;
 				while ((parent = parent.GetParent()) !== null)