From ba7ed497b2df4c670ad07ae59638593b24619562 Mon Sep 17 00:00:00 2001 From: djmaze Date: Fri, 9 Oct 2020 11:58:15 +0200 Subject: [PATCH] Cleanup JS and better terser compression --- README.md | 22 +- dev/External/User/ko.js | 6 +- dev/Model/Email.js | 4 +- dev/bootstrap.js | 4 +- dev/dragdropgecko.js | 92 ++++----- dev/shortcuts.js | 54 +++-- .../app/libraries/RainLoop/ServiceActions.php | 2 +- .../templates/Views/User/MailMessageList.html | 1 - tasks/js.js | 8 +- vendors/bootstrap/.code-changed | 0 vendors/inputosaurus/inputosaurus.js | 88 +++----- vendors/jua/jua.js | 38 +--- vendors/jua/jua.min.js | 2 +- .../build/output/knockout-latest.debug.js | 15 +- .../knockout/build/output/knockout-latest.js | 194 +++++++++--------- .../src/binding/bindingAttributeSyntax.js | 4 +- .../editDetection/arrayToDomNodeChildren.js | 2 +- .../src/subscribables/dependentObservable.js | 3 +- .../knockout/src/subscribables/extenders.js | 2 +- vendors/knockout/src/templating/templating.js | 4 +- 20 files changed, 247 insertions(+), 298 deletions(-) delete mode 100644 vendors/bootstrap/.code-changed diff --git a/README.md b/README.md index e4cc19eea..7e22d3241 100644 --- a/README.md +++ b/README.md @@ -106,24 +106,24 @@ RainLoop 1.14 vs SnappyMail |js/* |RainLoop |Snappy | |----------- |--------: |--------: | -|admin.js |2.130.942 | 774.301 | -|app.js |4.184.455 |2.424.578 | +|admin.js |2.130.942 | 774.093 | +|app.js |4.184.455 |2.426.328 | |boot.js | 671.522 | 5.285 | -|libs.js | 647.614 | 249.953 | +|libs.js | 647.614 | 246.991 | |polyfills.js | 325.834 | 0 | -|TOTAL |7.960.367 |3.454.117 | +|TOTAL |7.960.367 |3.452.697 | |js/min/* |RainLoop |Snappy |Rain gzip |gzip |brotli | |--------------- |--------: |--------: |--------: |--------: |--------: | -|admin.min.js | 252.147 | 103.761 | 73.657 | 27.632 | 24.004 | -|app.min.js | 511.202 | 328.005 |140.462 | 84.451 | 68.571 | -|boot.min.js | 66.007 | 2.935 | 22.567 | 1.510 | 1.285 | -|libs.min.js | 572.545 | 144.650 |176.720 | 51.765 | 46.049 | +|admin.min.js | 252.147 | 103.575 | 73.657 | 27.571 | 23.931 | +|app.min.js | 511.202 | 327.895 |140.462 | 84.341 | 68.393 | +|boot.min.js | 66.007 | 2.918 | 22.567 | 1.500 | 1.275 | +|libs.min.js | 572.545 | 141.817 |176.720 | 50.690 | 45.096 | |polyfills.min.js | 32.452 | 0 | 11.312 | 0 | 0 | -|TOTAL |1.434.353 | 579.351 |424.718 |165.358 |139.909 | -|TOTAL (no admin) |1.182.206 | 475.590 |351.061 |137.726 |115.905 | +|TOTAL |1.434.353 | 576.205 |424.718 |164.102 |138.695 | +|TOTAL (no admin) |1.182.206 | 472.630 |351.061 |136.531 |114.764 | -For a user its around 60% smaller and faster than traditional RainLoop. +For a user its around 61% smaller and faster than traditional RainLoop. ### CSS changes diff --git a/dev/External/User/ko.js b/dev/External/User/ko.js index b2e526b28..f2ec95c4f 100644 --- a/dev/External/User/ko.js +++ b/dev/External/User/ko.js @@ -87,9 +87,9 @@ ko.bindingHandlers.emailsTags = { }); if (fValue && fValue.focused && fValue.focused.subscribe) { - fValue.focused.subscribe(value => { - element.inputosaurus[value ? 'focus' : 'blur'](); - }); + fValue.focused.subscribe(value => + element.inputosaurus[value ? 'focus' : 'blur']() + ); } }, update: (element, fValueAccessor) => { diff --git a/dev/Model/Email.js b/dev/Model/Email.js index 634dc2dda..8435164b9 100644 --- a/dev/Model/Email.js +++ b/dev/Model/Email.js @@ -352,12 +352,12 @@ class EmailModel { } /** - * @param {boolean} friendlyView + * @param {boolean} friendlyView = false * @param {boolean=} wrapWithLink = false * @param {boolean=} useEncodeHtml = false * @returns {string} */ - toLine(friendlyView, wrapWithLink = false, useEncodeHtml = false) { + toLine(friendlyView, wrapWithLink, useEncodeHtml) { let result = ''; if (this.email) { if (friendlyView && this.name) { diff --git a/dev/bootstrap.js b/dev/bootstrap.js index 8588df23b..d195a1ccd 100644 --- a/dev/bootstrap.js +++ b/dev/bootstrap.js @@ -124,8 +124,8 @@ export default (App) => { window.__APP_BOOT = fErrorCallback => { const doc = document, cb = () => setTimeout(() => { - if (window.rainloopTEMPLATES && rainloopTEMPLATES[0]) { - doc.getElementById('rl-templates').innerHTML = rainloopTEMPLATES[0]; + if (rl.TEMPLATES) { + doc.getElementById('rl-templates').innerHTML = rl.TEMPLATES; setTimeout(() => App.bootstart(), 10); } else { fErrorCallback(); diff --git a/dev/dragdropgecko.js b/dev/dragdropgecko.js index faa62c859..9eac72a60 100644 --- a/dev/dragdropgecko.js +++ b/dev/dragdropgecko.js @@ -18,7 +18,7 @@ allowDrop, lastTarget, lastTouch, - pressHoldInterval, + holdInterval, img, imgCustom, imgOffset; @@ -64,22 +64,17 @@ } const - // copy styles/attributes from drag source to drag image element - rmvAtts = 'id,class,style,draggable'.split(','), - kbdProps = 'altKey,ctrlKey,metaKey,shiftKey'.split(','), - ptProps = 'pageX,pageY,clientX,clientY,screenX,screenY,offsetX,offsetY'.split(','), - // clear all members reset = () => { - destroyImage(); - dragSource = lastTouch = lastTarget = dataTransfer = null; - isDragging = allowDrop = false; - clearInterval(pressHoldInterval); + if (dragSource) { + clearInterval(holdInterval); + destroyImage(); + isDragging && dispatchEvent(lastTouch, 'dragend', dragSource); + dragSource = lastTouch = lastTarget = dataTransfer = holdInterval = null; + isDragging = allowDrop = false; + } }, - // ignore events that have been handled or that involve more than one touch - shouldHandle = e => e && !e.defaultPrevented && e.touches && e.touches.length < 2, - // get point for a touch event getPoint = e => { if (e && e.touches) { @@ -89,28 +84,26 @@ }, touchstart = e => { - if (shouldHandle(e)) { - // clear all variables - reset(); - + // clear all variables + reset(); + // ignore events that have been handled or that involve more than one touch + if (e && !e.defaultPrevented && e.touches && e.touches.length < 2) { // get nearest draggable element - let src = e.target.closest('[draggable]'); - if (src) { + dragSource = e.target.closest('[draggable]'); + if (dragSource) { // get ready to start dragging - dragSource = src; lastTouch = e; e.preventDefault(); // prevent scrolling NOTE: this creates a bug that click will not work // 1000 ms to wait, chrome on android triggers dragstart in 600 - pressHoldInterval = setTimeout(() => { + holdInterval = setTimeout(() => { // start dragging - if (dragSource && !isDragging) { - isDragging = true; - dataTransfer = new DataTransfer(); - if ((isDragging = dispatchEvent(e, 'dragstart', dragSource))) { - createImage(e); - dispatchEvent(e, 'dragenter', getTarget(e)); - } + dataTransfer = new DataTransfer(); + if ((isDragging = dispatchEvent(e, 'dragstart', dragSource))) { + createImage(e); + dispatchEvent(e, 'dragenter', getTarget(e)); + } else { + reset(); } }, 1000); } @@ -120,37 +113,30 @@ touchmove = e => { if (isDragging) { // continue dragging - if (isDragging) { - let target = getTarget(e); - lastTouch = e; - e.preventDefault(); // prevent scrolling - if (target != lastTarget) { - dispatchEvent(lastTouch, 'dragleave', lastTarget); - dispatchEvent(e, 'dragenter', target); - lastTarget = target; - } - moveImage(e); - allowDrop = !dispatchEvent(e, 'dragover', target); + let target = getTarget(e); + lastTouch = e; + e.preventDefault(); // prevent scrolling + if (target != lastTarget) { + dispatchEvent(lastTouch, 'dragleave', lastTarget); + dispatchEvent(e, 'dragenter', target); + lastTarget = target; } + moveImage(e); + allowDrop = !dispatchEvent(e, 'dragover', target); } else { reset(); } }, touchend = e => { - if (shouldHandle(e)) { + if (dragSource) { if (!isDragging) { // touched the element but didn't drag, so simulate a click dispatchEvent(lastTouch, 'click', e.target); } // finish dragging - if (dragSource) { - if (allowDrop && !e.type.includes('cancel')) { - dispatchEvent(lastTouch, 'drop', lastTarget); - } - dispatchEvent(lastTouch, 'dragend', dragSource); - reset(); - } + allowDrop && 'touchcancel' !== e.type && dispatchEvent(lastTouch, 'drop', lastTarget); + reset(); } }, @@ -205,9 +191,7 @@ copyStyle = (src, dst) => { // remove potentially troublesome attributes - rmvAtts.forEach(function (att) { - dst.removeAttribute(att); - }); + ['id','class','style','draggable'].forEach(att => dst.removeAttribute(att)); // copy canvas content if (src instanceof HTMLCanvasElement) { let cSrc = src, cDst = dst; @@ -237,10 +221,10 @@ evt.button = 0; evt.which = evt.buttons = 1; // copy event properties into new event - kbdProps.forEach(k => evt[k] = e[k]); + ['altKey','ctrlKey','metaKey','shiftKey'].forEach(k => evt[k] = e[k]); let src = e.touches ? e.touches[0] : e; - ptProps.forEach(k => evt[k] = src[k]); - if (isDragging) { + ['pageX','pageY','clientX','clientY','screenX','screenY','offsetX','offsetY'].forEach(k => evt[k] = src[k]); + if (dragSource) { evt.dataTransfer = dataTransfer; } return target.dispatchEvent(evt); @@ -249,7 +233,7 @@ }; // Chrome on mobile supports drag & drop - if (ua.includes("mobile") && ua.includes('gecko/')) { + if (ua.includes('mobile') && ua.includes('gecko/')) { let opt = { passive: false, capture: false }; doc.addEventListener('touchstart', touchstart, opt); doc.addEventListener('touchmove', touchmove, opt); diff --git a/dev/shortcuts.js b/dev/shortcuts.js index a1b924a62..29d5413da 100644 --- a/dev/shortcuts.js +++ b/dev/shortcuts.js @@ -8,37 +8,35 @@ const _scopes = {}, toArray = v => Array.isArray(v) ? v : v.split(/\s*,\s*/), - fire = (actions, event) => { - let modifiers = []; - event.altKey && modifiers.push('alt'); - event.ctrlKey && modifiers.push('ctrl'); - event.metaKey && modifiers.push('meta'); - event.shiftKey && modifiers.push('shift'); - modifiers = modifiers.join('+'); - if (actions[modifiers]) { - // for each potential shortcut - actions[modifiers].forEach(cmd => { - try { - // call the handler and stop the event if neccessary - if (!event.defaultPrevented && cmd(event) === false) { - event.preventDefault(); - event.stopPropagation(); - } - } catch (e) { - console.error(e); + keydown = event => { + let key = (event.key || event.code || '').toLowerCase(), + scopes = []; + scope[key] && scopes.push(scope[key]); + _scope !== 'all' && _scopes.all[key] && scopes.push(_scopes.all[key]); + if (scopes.length && win.shortcuts.filter(event.target)) { + let modifiers = []; + event.altKey && modifiers.push('alt'); + event.ctrlKey && modifiers.push('ctrl'); + event.metaKey && modifiers.push('meta'); + event.shiftKey && modifiers.push('shift'); + modifiers = modifiers.join('+'); + scopes.forEach(actions => { + if (actions[modifiers]) { + // for each potential shortcut + actions[modifiers].forEach(cmd => { + try { + // call the handler and stop the event if neccessary + if (!event.defaultPrevented && cmd(event) === false) { + event.preventDefault(); + event.stopPropagation(); + } + } catch (e) { + console.error(e); + } + }); } }); } - }, - - keydown = event => { - const key = (event.key||event.code||'').toLowerCase(); - if (scope[key] && win.shortcuts.filter(event.target)) { - fire(scope[key], event); - } - if (!event.defaultPrevented && _scope !== 'all' && _scopes.all[key] && win.shortcuts.filter(event.target)) { - fire(_scopes.all[key], event); - } }; let diff --git a/rainloop/v/0.0.0/app/libraries/RainLoop/ServiceActions.php b/rainloop/v/0.0.0/app/libraries/RainLoop/ServiceActions.php index 78d9e0349..34340cade 100644 --- a/rainloop/v/0.0.0/app/libraries/RainLoop/ServiceActions.php +++ b/rainloop/v/0.0.0/app/libraries/RainLoop/ServiceActions.php @@ -1038,7 +1038,7 @@ class ServiceActions unset($aTemplates); - return $bJsOutput ? 'window.rainloopTEMPLATES='.\MailSo\Base\Utils::Php2js(array($sHtml), $this->Logger()).';' : $sHtml; + return $bJsOutput ? 'rl.TEMPLATES='.\MailSo\Base\Utils::Php2js($sHtml, $this->Logger()).';' : $sHtml; } private function convertLanguageNameToMomentLanguageName(string $sLanguage) : string diff --git a/rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html b/rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html index 9ed9380b2..2c5e2da49 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html @@ -33,7 +33,6 @@ -