Cleanup knockout commands and replaced EventKeyCode with native KeyboardEvent.key

README.md

@@ -87,26 +87,27 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 * Removed non-community (aka Prem/Premium/License) code
 * Modified Jua.js to be without jQuery
 * Replaced *Ajax with *Fetch classes because we use the Fetch API, not jQuery.ajax
+* Replaced knockoutjs 3.4 with a modified 3.5.1
 
 |js/*       	|1.14.0 	|native 	|
 |-----------	|--------:	|--------:	|
-|admin.js    	|2.130.942	|  857.772	|
+|admin.js    	|2.130.942	|  855.381	|
-|app.js      	|4.184.455	|2.507.407	|
+|app.js      	|4.184.455	|2.498.825	|
 |boot.js     	|  671.522	|    5.777	|
-|libs.js     	|  647.614	|  327.257	|
+|libs.js     	|  647.614	|  326.075	|
 |polyfills.js	|  325.834	|        0	|
-|TOTAL      	|7.960.367	|3.698.213	|
+|TOTAL      	|7.960.367	|3.686.058	|
 
 |js/min/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |---------------	|--------:	|--------:	|--------:	|--------:	|--------:	|
-|admin.min.js    	|  252.147	|  117.678	| 73.657	| 33.668	| 29.096	|
+|admin.min.js    	|  252.147	|  117.342	| 73.657	| 33.520	| 28.941	|
-|app.min.js      	|  511.202	|  342.012	|140.462	| 89.893	| 72.807	|
+|app.min.js      	|  511.202	|  340.862	|140.462	| 89.653	| 72.639	|
-|boot.min.js     	|   66.007	|    3.101	| 22.567	|  1.576	|  1.346	|
+|boot.min.js     	|   66.007	|    3.117	| 22.567	|  1.563	|  1.333	|
-|libs.min.js     	|  572.545	|  304.000	|176.720	| 94.870	| 83.524	|
+|libs.min.js     	|  572.545	|  302.989	|176.720	| 94.417	| 83.208	|
 |polyfills.min.js	|   32.452	|        0	| 11.312	|      0	|      0	|
-|TOTAL          	|1.434.353	|  766.791	|424.718	|220.007	|186.773	|
+|TOTAL          	|1.434.353	|  764.310	|424.718	|219.153	|186.121	|
 
-667.562 bytes (204.711 gzip) is not much, but it feels faster.
+670.043 bytes (205.565 gzip) is almost 50% smaller and it feels faster.
 
 ### CSS changes
 

dev/Common/Enums.js

@@ -255,29 +255,6 @@ export const ClientSideKeyName = {
 	MessageAttachmnetControls: 10
 };
 
-/**
- * @enum {number}
- */
-export const EventKeyCode = {
-	Backspace: 8,
-	Tab: 9,
-	Enter: 13,
-	Esc: 27,
-	PageUp: 33,
-	PageDown: 34,
-	Left: 37,
-	Right: 39,
-	Up: 38,
-	Down: 40,
-	End: 35,
-	Home: 36,
-	Space: 32,
-	Insert: 45,
-	Delete: 46,
-	A: 65,
-	S: 83
-};
-
 /**
  * @enum {number}
  */

dev/Common/HtmlEditor.js

@@ -1,5 +1,3 @@
-import { EventKeyCode } from 'Common/Enums';
-
 /**
  * @type {Object}
  */
@@ -290,7 +288,7 @@ class HtmlEditor {
 
 					this.editor = CKEDITOR.appendTo(this.element, config);
 
-					this.editor.on('key', event => !(event && event.data && EventKeyCode.Tab === event.data.keyCode));
+					this.editor.on('key', event => !(event && event.data && 'Tab' == event.data.key));
 
 					if (window.FileReader) {
 						this.editor.on('drop', (event) => {

dev/Common/Selector.js

@@ -1,5 +1,4 @@
 import ko from 'ko';
-import { EventKeyCode } from 'Common/Enums';
 
 class Selector {
 	list;
@@ -237,14 +236,14 @@ class Selector {
 	 * @param {boolean} forceSelect
 	 */
 	goDown(forceSelect) {
-		this.newSelectPosition(EventKeyCode.Down, false, forceSelect);
+		this.newSelectPosition('ArrowDown', false, forceSelect);
 	}
 
 	/**
 	 * @param {boolean} forceSelect
 	 */
 	goUp(forceSelect) {
-		this.newSelectPosition(EventKeyCode.Up, false, forceSelect);
+		this.newSelectPosition('ArrowUp', false, forceSelect);
 	}
 
 	unselect() {
@@ -288,38 +287,38 @@ class Selector {
 
 			key('up, shift+up, down, shift+down, home, end, pageup, pagedown, insert, space', keyScope, (event, handler) => {
 				if (event && handler && handler.shortcut) {
-					let eventKey = 0;
+					let eventKey;
 					switch (handler.shortcut) {
 						case 'up':
 						case 'shift+up':
-							eventKey = EventKeyCode.Up;
+							eventKey = 'ArrowUp';
 							break;
 						case 'down':
 						case 'shift+down':
-							eventKey = EventKeyCode.Down;
+							eventKey = 'ArrowDown';
 							break;
 						case 'insert':
-							eventKey = EventKeyCode.Insert;
+							eventKey = 'Insert';
 							break;
 						case 'space':
-							eventKey = EventKeyCode.Space;
+							eventKey = ' ';
 							break;
 						case 'home':
-							eventKey = EventKeyCode.Home;
+							eventKey = 'Home';
 							break;
 						case 'end':
-							eventKey = EventKeyCode.End;
+							eventKey = 'End';
 							break;
 						case 'pageup':
-							eventKey = EventKeyCode.PageUp;
+							eventKey = 'PageUp';
 							break;
 						case 'pagedown':
-							eventKey = EventKeyCode.PageDown;
+							eventKey = 'PageDown';
 							break;
 						// no default
 					}
 
-					if (0 < eventKey) {
+					if (eventKey) {
 						this.newSelectPosition(eventKey, key.shift);
 						return false;
 					}
@@ -353,11 +352,11 @@ class Selector {
 	}
 
 	/**
-	 * @param {number} iEventKeyCode
+	 * @param {string} sEventKey
 	 * @param {boolean} bShiftKey
 	 * @param {boolean=} bForceSelect = false
 	 */
-	newSelectPosition(iEventKeyCode, bShiftKey, bForceSelect) {
+	newSelectPosition(sEventKey, bShiftKey, bForceSelect) {
 		let index = 0,
 			isNext = false,
 			isStop = false,
@@ -371,39 +370,39 @@ class Selector {
 		if (0 < listLen) {
 			if (!focused) {
 				if (
-					EventKeyCode.Down === iEventKeyCode ||
+					'ArrowDown' == sEventKey ||
-					EventKeyCode.Insert === iEventKeyCode ||
+					'Insert' == sEventKey ||
-					EventKeyCode.Space === iEventKeyCode ||
+					' ' == sEventKey ||
-					EventKeyCode.Home === iEventKeyCode ||
+					'Home' == sEventKey ||
-					EventKeyCode.PageUp === iEventKeyCode
+					'PageUp' == sEventKey
 				) {
 					result = list[0];
 				} else if (
-					EventKeyCode.Up === iEventKeyCode ||
+					'ArrowUp' === sEventKey ||
-					EventKeyCode.End === iEventKeyCode ||
+					'End' === sEventKey ||
-					EventKeyCode.PageDown === iEventKeyCode
+					'PageDown' === sEventKey
 				) {
 					result = list[list.length - 1];
 				}
 			} else if (focused) {
 				if (
-					EventKeyCode.Down === iEventKeyCode ||
+					'ArrowDown' === sEventKey ||
-					EventKeyCode.Up === iEventKeyCode ||
+					'ArrowUp' === sEventKey ||
-					EventKeyCode.Insert === iEventKeyCode ||
+					'Insert' === sEventKey ||
-					EventKeyCode.Space === iEventKeyCode
+					' ' === sEventKey
 				) {
 					list.forEach(item => {
 						if (!isStop) {
-							switch (iEventKeyCode) {
+							switch (sEventKey) {
-								case EventKeyCode.Up:
+								case 'ArrowUp':
 									if (focused === item) {
 										isStop = true;
 									} else {
 										result = item;
 									}
 									break;
-								case EventKeyCode.Down:
+								case 'ArrowDown':
-								case EventKeyCode.Insert:
+								case 'Insert':
 									if (isNext) {
 										result = item;
 										isStop = true;
@@ -416,16 +415,16 @@ class Selector {
 						}
 					});
 
-					if (!result && (EventKeyCode.Down === iEventKeyCode || EventKeyCode.Up === iEventKeyCode)) {
+					if (!result && ('ArrowDown' === sEventKey || 'ArrowUp' === sEventKey)) {
-						(this.oCallbacks.onUpUpOrDownDown || (()=>true))(EventKeyCode.Up === iEventKeyCode);
+						(this.oCallbacks.onUpUpOrDownDown || (()=>true))('ArrowUp' === sEventKey);
 					}
-				} else if (EventKeyCode.Home === iEventKeyCode || EventKeyCode.End === iEventKeyCode) {
+				} else if ('Home' === sEventKey || 'End' === sEventKey) {
-					if (EventKeyCode.Home === iEventKeyCode) {
+					if ('Home' === sEventKey) {
 						result = list[0];
-					} else if (EventKeyCode.End === iEventKeyCode) {
+					} else if ('End' === sEventKey) {
 						result = list[list.length - 1];
 					}
-				} else if (EventKeyCode.PageDown === iEventKeyCode) {
+				} else if ('PageDown' === sEventKey) {
 					for (; index < listLen; index++) {
 						if (focused === list[index]) {
 							index += pageStep;
@@ -434,7 +433,7 @@ class Selector {
 							break;
 						}
 					}
-				} else if (EventKeyCode.PageUp === iEventKeyCode) {
+				} else if ('PageUp' === sEventKey) {
 					for (index = listLen; 0 <= index; index--) {
 						if (focused === list[index]) {
 							index -= pageStep;
@@ -452,23 +451,23 @@ class Selector {
 
 			if (focused) {
 				if (bShiftKey) {
-					if (EventKeyCode.Up === iEventKeyCode || EventKeyCode.Down === iEventKeyCode) {
+					if ('ArrowUp' === sEventKey || 'ArrowDown' === sEventKey) {
 						focused.checked(!focused.checked());
 					}
-				} else if (EventKeyCode.Insert === iEventKeyCode || EventKeyCode.Space === iEventKeyCode) {
+				} else if ('Insert' === sEventKey || ' ' === sEventKey) {
 					focused.checked(!focused.checked());
 				}
 			}
 
-			if ((this.autoSelect() || !!bForceSelect) && !this.isListChecked() && EventKeyCode.Space !== iEventKeyCode) {
+			if ((this.autoSelect() || !!bForceSelect) && !this.isListChecked() && ' ' !== sEventKey) {
 				this.selectedItem(result);
 			}
 
 			this.scrollToFocused();
 		} else if (focused) {
-			if (bShiftKey && (EventKeyCode.Up === iEventKeyCode || EventKeyCode.Down === iEventKeyCode)) {
+			if (bShiftKey && ('ArrowUp' === sEventKey || 'ArrowDown' === sEventKey)) {
 				focused.checked(!focused.checked());
-			} else if (EventKeyCode.Insert === iEventKeyCode || EventKeyCode.Space === iEventKeyCode) {
+			} else if ('Insert' === sEventKey || ' ' === sEventKey) {
 				focused.checked(!focused.checked());
 			}
 

dev/External/Admin/ko.js

@@ -41,7 +41,7 @@ ko.extenders.posInterer = (target, defaultVal) => {
 	const Utils = require('Common/Utils'),
 		result = ko.computed({
 			read: target,
-			write: (newValue) => {
+			write: newValue => {
 				let val = Utils.pInt(newValue.toString(), defaultVal);
 				if (0 >= val) {
 					val = defaultVal;

dev/External/User/ko.js

@@ -1,5 +1,3 @@
-import { bMobileDevice } from 'Common/Globals';
-
 const ko = window.ko,
 	$ = jQuery;
 
@@ -92,9 +90,7 @@ ko.bindingHandlers.emailsTags = {
 
 ko.bindingHandlers.draggable = {
 	init: (element, fValueAccessor, fAllBindingsAccessor) => {
-		const Utils = require('Common/Utils');
+		if (!rl.settings.app('mobile')) {
-
-		if (!bMobileDevice) {
 			const triggerZone = 50,
 				scrollSpeed = 3,
 				fAllValueFunc = fAllBindingsAccessor(),
@@ -142,7 +138,7 @@ ko.bindingHandlers.draggable = {
 			$(element)
 				.draggable(conf)
 				.on('mousedown.koDraggable', () => {
-					Utils.removeInFocus();
+					require('Common/Utils').removeInFocus();
 					bcr = droppable ? droppable.getBoundingClientRect() : null;
 				});
 
@@ -157,7 +153,7 @@ ko.bindingHandlers.draggable = {
 
 ko.bindingHandlers.droppable = {
 	init: (element, fValueAccessor, fAllBindingsAccessor) => {
-		if (!bMobileDevice) {
+		if (!rl.settings.app('mobile')) {
 			const fValueFunc = fValueAccessor(),
 				fAllValueFunc = fAllBindingsAccessor(),
 				fOverCallback = fAllValueFunc && fAllValueFunc.droppableOver ? fAllValueFunc.droppableOver : null,
@@ -207,40 +203,40 @@ ko.bindingHandlers.initDom = {
 
 ko.bindingHandlers.onEsc = {
 	init: (element, fValueAccessor, fAllBindingsAccessor, viewModel) => {
-		$(element).on('keyup.koOnEsc', (event) => {
+		$(element).on('keyup.koOnEsc', event => {
-			if (event && 27 === parseInt(event.keyCode, 10)) {
+			if (event && 'Escape' === event.key) {
 				$(element).trigger('change');
 				fValueAccessor().call(viewModel);
 			}
 		});
 
-		ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+		ko.utils.domNodeDisposal.addDisposeCallback(element, () =>
-			$(element).off('keyup.koOnEsc');
+			$(element).off('keyup.koOnEsc')
-		});
+		);
 	}
 };
 
 // extenders
 
-ko.extenders.specialThrottle = (target, option) => {
+ko.extenders.specialThrottle = (target, timeout) => {
-	target.iSpecialThrottleTimeoutValue = require('Common/Utils').pInt(option);
+	timeout = parseInt(timeout, 10);
-	if (0 < target.iSpecialThrottleTimeoutValue) {
+	if (0 < timeout) {
-		target.iSpecialThrottleTimeout = 0;
+		let timer = 0,
-		target.valueForRead = ko.observable(!!target()).extend({ throttle: 10 });
+			valueForRead = ko.observable(!!target()).extend({ throttle: 10 });
 
 		return ko.computed({
-			read: target.valueForRead,
+			read: valueForRead,
 			write: (bValue) => {
 				if (bValue) {
-					target.valueForRead(bValue);
+					valueForRead(bValue);
-				} else if (target.valueForRead()) {
+				} else if (valueForRead()) {
-					clearTimeout(target.iSpecialThrottleTimeout);
+					clearTimeout(timer);
-					target.iSpecialThrottleTimeout = setTimeout(() => {
+					timer = setTimeout(() => {
-						target.valueForRead(false);
+						valueForRead(false);
-						target.iSpecialThrottleTimeout = 0;
+						timer = 0;
-					}, target.iSpecialThrottleTimeoutValue);
+					}, timeout);
 				} else {
-					target.valueForRead(bValue);
+					valueForRead(bValue);
 				}
 			}
 		});

dev/External/ko.js

@@ -93,8 +93,8 @@ ko.bindingHandlers.popover = {
 
 ko.bindingHandlers.onEnter = {
 	init: (element, fValueAccessor, fAllBindingsAccessor, viewModel) => {
-		$(element).on('keypress.koOnEnter', (event) => {
+		$(element).on('keypress.koOnEnter', event => {
-			if (event && 13 === parseInt(event.keyCode, 10)) {
+			if (event && 'Enter' === event.key) {
 				$(element).trigger('change');
 				fValueAccessor().call(viewModel);
 			}
@@ -108,8 +108,8 @@ ko.bindingHandlers.onEnter = {
 
 ko.bindingHandlers.onSpace = {
 	init: (element, fValueAccessor, fAllBindingsAccessor, viewModel) => {
-		$(element).on('keyup.koOnSpace', (event) => {
+		$(element).on('keyup.koOnSpace', event => {
-			if (event && 32 === parseInt(event.keyCode, 10)) {
+			if (event && ' ' === event.key) {
 				fValueAccessor().call(viewModel, event);
 			}
 		});

dev/Knoin/AbstractViewNext.js

@@ -1,7 +1,7 @@
 import ko from 'ko';
 
 import { inFocus } from 'Common/Utils';
-import { KeyState, EventKeyCode } from 'Common/Enums';
+import { KeyState } from 'Common/Enums';
 import { keyScope } from 'Common/Globals';
 
 export class AbstractViewNext {
@@ -35,12 +35,12 @@ export class AbstractViewNext {
 	 * @returns {void}
 	 */
 	registerPopupKeyDown() {
-		addEventListener('keydown', (event) => {
+		addEventListener('keydown', event => {
 			if (event && this.modalVisibility && this.modalVisibility()) {
-				if (!this.bDisabeCloseOnEsc && EventKeyCode.Esc === event.keyCode) {
+				if (!this.bDisabeCloseOnEsc && 'Escape' == event.key) {
 					this.cancelCommand && this.cancelCommand();
 					return false;
-				} else if (EventKeyCode.Backspace === event.keyCode && !inFocus()) {
+				} else if ('Backspace' == event.key && !inFocus()) {
 					return false;
 				}
 			}

dev/bootstrap.js

@@ -10,11 +10,9 @@ export default (App) => {
 	addEventListener('keydown', event => {
 		event = event || window.event;
 		if (event && event.ctrlKey && !event.shiftKey && !event.altKey) {
-			const key = event.keyCode || event.which;
+			if ('S' == event.key) {
-			if (key === Enums.EventKeyCode.S) {
 				event.preventDefault();
-				return;
+			} else if ('A' == event.key) {
-			} else if (key === Enums.EventKeyCode.A) {
 				const sender = event.target || event.srcElement;
 				if (
 					sender &&