From 308e65f94f8c7b8df4d41e6a6f0aba9e9dc6ee6f Mon Sep 17 00:00:00 2001 From: djmaze Date: Tue, 10 Aug 2021 17:07:26 +0200 Subject: [PATCH] cleanup some css and js --- dev/External/ifvisible.js | 23 ++- dev/Styles/User/MessageList.less | 6 - dev/Styles/_FontasticToBoot.less | 24 +-- dev/dragdropgecko.js | 314 +++++++++++++++---------------- 4 files changed, 172 insertions(+), 195 deletions(-) diff --git a/dev/External/ifvisible.js b/dev/External/ifvisible.js index a7c3dd984..23fb02269 100644 --- a/dev/External/ifvisible.js +++ b/dev/External/ifvisible.js @@ -1,37 +1,36 @@ (doc => { - let visible = "visible", + let idle = 'idle', + visible = 'visible', status = visible, timer = 0, wakeUp = () => { clearTimeout(timer); - if (status !== visible) { - status = visible; - } + status = visible; timer = setTimeout(() => { if (status === visible) { - status = "idle"; - dispatchEvent(new CustomEvent("idle")); + status = idle; + dispatchEvent(new CustomEvent(idle)); } }, 10000); }, init = () => { - init = ()=>{}; + init = () => 0; // Safari - addEventListener('pagehide', () => status = "hidden"); + addEventListener('pagehide', () => status = 'hidden'); // Else - doc.addEventListener("visibilitychange", () => { + doc.addEventListener('visibilitychange', () => { status = doc.visibilityState; doc.hidden || wakeUp(); }); wakeUp(); - ["mousemove","keyup","touchstart"].forEach(t => doc.addEventListener(t, wakeUp)); - ["scroll","pageshow"].forEach(t => addEventListener(t, wakeUp)); + ['mousemove','keyup','touchstart'].forEach(t => doc.addEventListener(t, wakeUp)); + ['scroll','pageshow'].forEach(t => addEventListener(t, wakeUp)); }; this.ifvisible = { idle: callback => { init(); - addEventListener("idle", callback); + addEventListener(idle, callback); }, now: () => { init(); diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less index 32c929a37..13f05f000 100644 --- a/dev/Styles/User/MessageList.less +++ b/dev/Styles/User/MessageList.less @@ -150,12 +150,6 @@ html.rl-no-preview-pane { line-height: 30px; } - .listLoading .icon-spinner { - width: 0.75em; - height: 0.75em; - margin: 0; - } - .listDragOver { max-height: 0; overflow: hidden; diff --git a/dev/Styles/_FontasticToBoot.less b/dev/Styles/_FontasticToBoot.less index 4eafc03a0..5b5623eb0 100644 --- a/dev/Styles/_FontasticToBoot.less +++ b/dev/Styles/_FontasticToBoot.less @@ -38,8 +38,8 @@ .icon-spinner { - height: 10px; - width: 10px; + height: 0.75em; + width: 0.75em; margin: 0 -1px; @@ -48,21 +48,6 @@ border-radius: 100%; } -.btn-success .icon-spinner { - border-color: #fff; - border-top-color: #999; - &.animated { - border-color: transparent; - border-top-color: #fff; - } -} - -.btn-large .icon-spinner { - height: 13px; - width: 13px; - margin: -1px -2px; -} - .icon-spinner:not(.not-animated), .list-loading .icon-spinner.not-animated { border-color: transparent; @@ -70,6 +55,11 @@ animation: rotation .8s infinite ease-in-out; } +.btn.btn-success .icon-spinner { + border-color: transparent; + border-top-color: #fff; +} + .fontastic.icon-spinner { text-indent: -5em; overflow: hidden; diff --git a/dev/dragdropgecko.js b/dev/dragdropgecko.js index 1dff7eee1..e48ea3f8f 100644 --- a/dev/dragdropgecko.js +++ b/dev/dragdropgecko.js @@ -6,168 +6,162 @@ */ (doc => { - let ua = navigator.userAgent.toLowerCase(), - - dropEffect = 'move', - effectAllowed = 'all', - data = {}, - - dataTransfer, - dragSource, - isDragging, - allowDrop, - lastTarget, - lastTouch, - holdInterval, - - img; - -/* - class DataTransferItem - { - get kind() { return 'string'; } - } -*/ - /** https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer */ - class DataTransfer - { - get dropEffect() { return dropEffect; } - set dropEffect(value) { dropEffect = value; } - - get effectAllowed() { return effectAllowed; } - set effectAllowed(value) { effectAllowed = value; } - - get files() { return []; } - get items() { return []; } // DataTransferItemList - get types() { return Object.keys(data); } - - clearData(type) { - if (type != null) { - delete data[type]; - } else { - data = {}; - } - } - - getData(type) { - return data[type] || ''; - } - - setData(type, value) { - data[type] = value; - } - - constructor() { - this.setDragImage = setDragImage; - } - } - - const - htmlDrag = b => doc.documentElement.classList.toggle('firefox-drag', b), - - setDragImage = (src, xOffset, yOffset) => { - img && img.remove(); - if (src) { - // create drag image from custom element or drag source - img = src.cloneNode(true); - copyStyle(src, img); - img._x = xOffset == null ? src.clientWidth / 2 : xOffset; - img._y = yOffset == null ? src.clientHeight / 2 : yOffset; - } - }, - - // clear all members - reset = () => { - if (dragSource) { - clearInterval(holdInterval); - // dispose of drag image element - img && img.remove(); - isDragging && dispatchEvent(lastTouch, 'dragend', dragSource); - img = dragSource = lastTouch = lastTarget = dataTransfer = holdInterval = null; - isDragging = allowDrop = false; - htmlDrag(false); - } - }, - - // get point for a touch event - getPoint = e => { - e = e.touches ? e.touches[0] : e; - return { x: e.clientX, y: e.clientY }; - }, - - touchend = e => { - if (dragSource) { - // finish dragging - allowDrop && 'touchcancel' !== e.type && dispatchEvent(lastTouch, 'drop', lastTarget); - reset(); - } - }, - - // get the element at a given touch event - getTarget = pt => { - let el = doc.elementFromPoint(pt.x, pt.y); - while (el && getComputedStyle(el).pointerEvents == 'none') { - el = el.parentElement; - } - return el; - }, - - // move the drag image element - moveImage = pt => { - requestAnimationFrame(() => { - if (img) { - img.style.left = Math.round(pt.x - img._x) + 'px'; - img.style.top = Math.round(pt.y - img._y) + 'px'; - } - }); - }, - - copyStyle = (src, dst) => { - // remove potentially troublesome attributes - ['id','class','style','draggable'].forEach(att => dst.removeAttribute(att)); - // copy canvas content - if (src instanceof HTMLCanvasElement) { - let cSrc = src, cDst = dst; - cDst.width = cSrc.width; - cDst.height = cSrc.height; - cDst.getContext('2d').drawImage(cSrc, 0, 0); - } - // copy style (without transitions) - let cs = getComputedStyle(src), i; - for (i = 0; i < cs.length; i++) { - let key = cs[i]; - if (key.indexOf('transition') < 0) { - dst.style[key] = cs[key]; - } - } - dst.style.pointerEvents = 'none'; - // and repeat for all children - for (i = 0; i < src.children.length; i++) { - copyStyle(src.children[i], dst.children[i]); - } - }, - - // return false when cancelled - dispatchEvent = (e, type, target) => { - if (e && target) { - let evt = new Event(type, {bubbles:true,cancelable:true}); - evt.button = 0; - evt.buttons = 1; - // copy event properties into new event - ['altKey','ctrlKey','metaKey','shiftKey'].forEach(k => evt[k] = e[k]); - let src = e.touches ? e.touches[0] : e; - ['pageX','pageY','clientX','clientY','screenX','screenY','offsetX','offsetY'].forEach(k => evt[k] = src[k]); - if (dragSource) { - evt.dataTransfer = dataTransfer; - } - return target.dispatchEvent(evt); - } - return false; - }; - + let ua = navigator.userAgent.toLowerCase(); // Chrome on mobile supports drag & drop if (ua.includes('mobile') && ua.includes('gecko/')) { - let opt = { passive: false, capture: false }; + + let opt = { passive: false, capture: false }, + + dropEffect = 'move', + effectAllowed = 'all', + data = {}, + + dataTransfer, + dragSource, + isDragging, + allowDrop, + lastTarget, + lastTouch, + holdInterval, + + img; + +/* + class DataTransferItem + { + get kind() { return 'string'; } + } +*/ + /** https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer */ + class DataTransfer + { + get dropEffect() { return dropEffect; } + set dropEffect(value) { dropEffect = value; } + + get effectAllowed() { return effectAllowed; } + set effectAllowed(value) { effectAllowed = value; } + + get files() { return []; } + get items() { return []; } // DataTransferItemList + get types() { return Object.keys(data); } + + clearData(type) { + if (type != null) { + delete data[type]; + } else { + data = {}; + } + } + + getData(type) { + return data[type] || ''; + } + + setData(type, value) { + data[type] = value; + } + + constructor() { + this.setDragImage = setDragImage; + } + } + + const + htmlDrag = b => doc.documentElement.classList.toggle('firefox-drag', b), + + setDragImage = (src, xOffset, yOffset) => { + img && img.remove(); + if (src) { + // create drag image from custom element or drag source + img = src.cloneNode(true); + copyStyle(src, img); + img._x = xOffset == null ? src.clientWidth / 2 : xOffset; + img._y = yOffset == null ? src.clientHeight / 2 : yOffset; + } + }, + + // clear all members + reset = () => { + if (dragSource) { + clearInterval(holdInterval); + // dispose of drag image element + img && img.remove(); + isDragging && dispatchEvent(lastTouch, 'dragend', dragSource); + img = dragSource = lastTouch = lastTarget = dataTransfer = holdInterval = null; + isDragging = allowDrop = false; + htmlDrag(false); + } + }, + + // get point for a touch event + getPoint = e => { + e = e.touches ? e.touches[0] : e; + return { x: e.clientX, y: e.clientY }; + }, + + touchend = e => { + if (dragSource) { + // finish dragging + allowDrop && 'touchcancel' !== e.type && dispatchEvent(lastTouch, 'drop', lastTarget); + reset(); + } + }, + + // get the element at a given touch event + getTarget = pt => { + let el = doc.elementFromPoint(pt.x, pt.y); + while (el && getComputedStyle(el).pointerEvents == 'none') { + el = el.parentElement; + } + return el; + }, + + // move the drag image element + moveImage = pt => { + requestAnimationFrame(() => { + if (img) { + img.style.left = Math.round(pt.x - img._x) + 'px'; + img.style.top = Math.round(pt.y - img._y) + 'px'; + } + }); + }, + + copyStyle = (src, dst) => { + // remove potentially troublesome attributes + ['id','class','style','draggable'].forEach(att => dst.removeAttribute(att)); + // copy canvas content + if (src instanceof HTMLCanvasElement) { + let cSrc = src, cDst = dst; + cDst.width = cSrc.width; + cDst.height = cSrc.height; + cDst.getContext('2d').drawImage(cSrc, 0, 0); + } + // copy style (without transitions) + let cs = getComputedStyle(src); + Object.entries(cs).forEach(([key, value]) => key.includes('transition') || (dst.style[key] = value)); + dst.style.pointerEvents = 'none'; + // and repeat for all children + let i = src.children.length; + while (i--) copyStyle(src.children[i], dst.children[i]); + }, + + // return false when cancelled + dispatchEvent = (e, type, target) => { + if (e && target) { + let evt = new Event(type, {bubbles:true,cancelable:true}); + evt.button = 0; + evt.buttons = 1; + // copy event properties into new event + ['altKey','ctrlKey','metaKey','shiftKey'].forEach(k => evt[k] = e[k]); + let src = e.touches ? e.touches[0] : e; + ['pageX','pageY','clientX','clientY','screenX','screenY','offsetX','offsetY'].forEach(k => evt[k] = src[k]); + if (dragSource) { + evt.dataTransfer = dataTransfer; + } + return target.dispatchEvent(evt); + } + return false; + }; doc.addEventListener('touchstart', e => { // clear all variables