From 7ac8143f34952e7847ef237a5316d04bd052d960 Mon Sep 17 00:00:00 2001 From: djmaze Date: Thu, 17 Sep 2020 17:47:35 +0200 Subject: [PATCH] Cleanup knockout commands and replaced EventKeyCode with native KeyboardEvent.key --- README.md | 21 ++++----- dev/Common/Enums.js | 23 ---------- dev/Common/HtmlEditor.js | 4 +- dev/Common/Selector.js | 85 +++++++++++++++++------------------ dev/External/Admin/ko.js | 2 +- dev/External/User/ko.js | 48 +++++++++----------- dev/External/ko.js | 8 ++-- dev/Knoin/AbstractViewNext.js | 8 ++-- dev/bootstrap.js | 6 +-- 9 files changed, 87 insertions(+), 118 deletions(-) diff --git a/README.md b/README.md index 5ee2fb1c5..204fe57a7 100644 --- a/README.md +++ b/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 | -|app.js |4.184.455 |2.507.407 | +|admin.js |2.130.942 | 855.381 | +|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 | -|app.min.js | 511.202 | 342.012 |140.462 | 89.893 | 72.807 | -|boot.min.js | 66.007 | 3.101 | 22.567 | 1.576 | 1.346 | -|libs.min.js | 572.545 | 304.000 |176.720 | 94.870 | 83.524 | +|admin.min.js | 252.147 | 117.342 | 73.657 | 33.520 | 28.941 | +|app.min.js | 511.202 | 340.862 |140.462 | 89.653 | 72.639 | +|boot.min.js | 66.007 | 3.117 | 22.567 | 1.563 | 1.333 | +|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 diff --git a/dev/Common/Enums.js b/dev/Common/Enums.js index c1104b229..32d2436e0 100644 --- a/dev/Common/Enums.js +++ b/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} */ diff --git a/dev/Common/HtmlEditor.js b/dev/Common/HtmlEditor.js index 64fcc4a03..eb7aa4425 100644 --- a/dev/Common/HtmlEditor.js +++ b/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) => { diff --git a/dev/Common/Selector.js b/dev/Common/Selector.js index 0f5ba5fd8..95f329dcd 100644 --- a/dev/Common/Selector.js +++ b/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 || - EventKeyCode.Insert === iEventKeyCode || - EventKeyCode.Space === iEventKeyCode || - EventKeyCode.Home === iEventKeyCode || - EventKeyCode.PageUp === iEventKeyCode + 'ArrowDown' == sEventKey || + 'Insert' == sEventKey || + ' ' == sEventKey || + 'Home' == sEventKey || + 'PageUp' == sEventKey ) { result = list[0]; } else if ( - EventKeyCode.Up === iEventKeyCode || - EventKeyCode.End === iEventKeyCode || - EventKeyCode.PageDown === iEventKeyCode + 'ArrowUp' === sEventKey || + 'End' === sEventKey || + 'PageDown' === sEventKey ) { result = list[list.length - 1]; } } else if (focused) { if ( - EventKeyCode.Down === iEventKeyCode || - EventKeyCode.Up === iEventKeyCode || - EventKeyCode.Insert === iEventKeyCode || - EventKeyCode.Space === iEventKeyCode + 'ArrowDown' === sEventKey || + 'ArrowUp' === sEventKey || + 'Insert' === sEventKey || + ' ' === sEventKey ) { list.forEach(item => { if (!isStop) { - switch (iEventKeyCode) { - case EventKeyCode.Up: + switch (sEventKey) { + case 'ArrowUp': if (focused === item) { isStop = true; } else { result = item; } break; - case EventKeyCode.Down: - case EventKeyCode.Insert: + case 'ArrowDown': + case 'Insert': if (isNext) { result = item; isStop = true; @@ -416,16 +415,16 @@ class Selector { } }); - if (!result && (EventKeyCode.Down === iEventKeyCode || EventKeyCode.Up === iEventKeyCode)) { - (this.oCallbacks.onUpUpOrDownDown || (()=>true))(EventKeyCode.Up === iEventKeyCode); + if (!result && ('ArrowDown' === sEventKey || 'ArrowUp' === sEventKey)) { + (this.oCallbacks.onUpUpOrDownDown || (()=>true))('ArrowUp' === sEventKey); } - } else if (EventKeyCode.Home === iEventKeyCode || EventKeyCode.End === iEventKeyCode) { - if (EventKeyCode.Home === iEventKeyCode) { + } else if ('Home' === sEventKey || 'End' === sEventKey) { + 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()); } diff --git a/dev/External/Admin/ko.js b/dev/External/Admin/ko.js index b2ba46881..2a6472792 100644 --- a/dev/External/Admin/ko.js +++ b/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; diff --git a/dev/External/User/ko.js b/dev/External/User/ko.js index 6da8566f8..47a5a5de6 100644 --- a/dev/External/User/ko.js +++ b/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 (!bMobileDevice) { + if (!rl.settings.app('mobile')) { 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) => { - if (event && 27 === parseInt(event.keyCode, 10)) { + $(element).on('keyup.koOnEsc', event => { + if (event && 'Escape' === event.key) { $(element).trigger('change'); fValueAccessor().call(viewModel); } }); - ko.utils.domNodeDisposal.addDisposeCallback(element, () => { - $(element).off('keyup.koOnEsc'); - }); + ko.utils.domNodeDisposal.addDisposeCallback(element, () => + $(element).off('keyup.koOnEsc') + ); } }; // extenders -ko.extenders.specialThrottle = (target, option) => { - target.iSpecialThrottleTimeoutValue = require('Common/Utils').pInt(option); - if (0 < target.iSpecialThrottleTimeoutValue) { - target.iSpecialThrottleTimeout = 0; - target.valueForRead = ko.observable(!!target()).extend({ throttle: 10 }); +ko.extenders.specialThrottle = (target, timeout) => { + timeout = parseInt(timeout, 10); + if (0 < timeout) { + let timer = 0, + valueForRead = ko.observable(!!target()).extend({ throttle: 10 }); return ko.computed({ - read: target.valueForRead, + read: valueForRead, write: (bValue) => { if (bValue) { - target.valueForRead(bValue); - } else if (target.valueForRead()) { - clearTimeout(target.iSpecialThrottleTimeout); - target.iSpecialThrottleTimeout = setTimeout(() => { - target.valueForRead(false); - target.iSpecialThrottleTimeout = 0; - }, target.iSpecialThrottleTimeoutValue); + valueForRead(bValue); + } else if (valueForRead()) { + clearTimeout(timer); + timer = setTimeout(() => { + valueForRead(false); + timer = 0; + }, timeout); } else { - target.valueForRead(bValue); + valueForRead(bValue); } } }); diff --git a/dev/External/ko.js b/dev/External/ko.js index a10c905b1..6ddeec0d9 100644 --- a/dev/External/ko.js +++ b/dev/External/ko.js @@ -93,8 +93,8 @@ ko.bindingHandlers.popover = { ko.bindingHandlers.onEnter = { init: (element, fValueAccessor, fAllBindingsAccessor, viewModel) => { - $(element).on('keypress.koOnEnter', (event) => { - if (event && 13 === parseInt(event.keyCode, 10)) { + $(element).on('keypress.koOnEnter', event => { + 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) => { - if (event && 32 === parseInt(event.keyCode, 10)) { + $(element).on('keyup.koOnSpace', event => { + if (event && ' ' === event.key) { fValueAccessor().call(viewModel, event); } }); diff --git a/dev/Knoin/AbstractViewNext.js b/dev/Knoin/AbstractViewNext.js index 483f997bb..f92f0bcda 100644 --- a/dev/Knoin/AbstractViewNext.js +++ b/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; } } diff --git a/dev/bootstrap.js b/dev/bootstrap.js index 91df403bb..8588df23b 100644 --- a/dev/bootstrap.js +++ b/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 (key === Enums.EventKeyCode.S) { + if ('S' == event.key) { event.preventDefault(); - return; - } else if (key === Enums.EventKeyCode.A) { + } else if ('A' == event.key) { const sender = event.target || event.srcElement; if ( sender &&