mirror of
https://github.com/the-djmaze/snappymail.git
synced 2025-01-27 09:08:26 +08:00
cleanup some css and js
This commit is contained in:
djmaze
parent
8a730a3ff2
commit
308e65f94f
4 changed files with 172 additions and 195 deletions
23
dev/External/ifvisible.js
vendored
23
dev/External/ifvisible.js
vendored
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue