mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-26 09:03:48 +08:00
Get rid of jQuery.wakup
Get rid of jQuery UI resizable (use HTML5 with ResizeObserver/MutationObserver, work-in-progress not as beautiful yet) Get rid of hidden download() iframe
This commit is contained in:
djmaze
parent
fca0bb5d56
commit
e3aaea8035
9 changed files with 121 additions and 1483 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import window from 'window';
|
||||
import $ from '$';
|
||||
import _ from '_';
|
||||
import ko from 'ko';
|
||||
import key from 'key';
|
||||
|
|
@ -10,7 +9,6 @@ import {
|
|||
$htmlCL,
|
||||
leftPanelDisabled,
|
||||
leftPanelType,
|
||||
sUserAgent,
|
||||
bMobileDevice,
|
||||
bAnimationSupported
|
||||
} from 'Common/Globals';
|
||||
|
|
@ -37,11 +35,8 @@ class AbstractApp extends AbstractBoot {
|
|||
super();
|
||||
|
||||
this.isLocalAutocomplete = true;
|
||||
this.iframe = null;
|
||||
this.lastErrorTime = 0;
|
||||
|
||||
this.iframe = $('<iframe class="internal-hiddden" />').appendTo('body');
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
Events.pub('window.resize');
|
||||
});
|
||||
|
|
@ -71,21 +66,23 @@ class AbstractApp extends AbstractBoot {
|
|||
// }
|
||||
// });
|
||||
|
||||
const $doc = $(window.document);
|
||||
$doc
|
||||
.on('keydown', (event) => {
|
||||
const $doc = window.document;
|
||||
$doc.addEventListener('keydown', (event) => {
|
||||
if (event && event.ctrlKey) {
|
||||
$htmlCL.add('rl-ctrl-key-pressed');
|
||||
}
|
||||
})
|
||||
.on('keyup', (event) => {
|
||||
});
|
||||
$doc.addEventListener('keyup', (event) => {
|
||||
if (event && !event.ctrlKey) {
|
||||
$htmlCL.remove('rl-ctrl-key-pressed');
|
||||
}
|
||||
})
|
||||
.on('mousemove keypress click', _.debounce(() => {
|
||||
});
|
||||
const fn = _.debounce(() => {
|
||||
Events.pub('rl.auto-logout-refresh');
|
||||
}, Magics.Time5s));
|
||||
}, Magics.Time5s);
|
||||
$doc.addEventListener('mousemove', fn);
|
||||
$doc.addEventListener('keypress', fn);
|
||||
$doc.addEventListener('click', fn);
|
||||
|
||||
key('esc, enter', KeyState.All, () => {
|
||||
detectDropdownVisibility();
|
||||
|
|
@ -109,28 +106,16 @@ class AbstractApp extends AbstractBoot {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
download(link) {
|
||||
if (sUserAgent && (-1 < sUserAgent.indexOf('chrome') || -1 < sUserAgent.indexOf('chrome'))) {
|
||||
const oLink = window.document.createElement('a');
|
||||
oLink.href = link;
|
||||
|
||||
if (window.document && window.document.createEvent) {
|
||||
const oE = window.document.createEvent.MouseEvents;
|
||||
if (oE && oE.initEvent && oLink.dispatchEvent) {
|
||||
oE.initEvent('click', true, true);
|
||||
oLink.dispatchEvent(oE);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (bMobileDevice) {
|
||||
window.open(link, '_self');
|
||||
window.focus();
|
||||
} else {
|
||||
this.iframe.attr('src', link);
|
||||
// window.document.location.href = link;
|
||||
const oLink = window.document.createElement('a');
|
||||
oLink.href = link;
|
||||
window.document.body.appendChild(oLink).click();
|
||||
oLink.remove();
|
||||
// window.open(link, '_self');
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +128,6 @@ class AbstractApp extends AbstractBoot {
|
|||
title += (title ? ' - ' : '') + Settings.settingsGet('Title');
|
||||
}
|
||||
|
||||
window.document.title = title + ' ...';
|
||||
window.document.title = title;
|
||||
}
|
||||
|
||||
|
|
|
|||
235
dev/App/User.js
235
dev/App/User.js
|
|
@ -1,6 +1,5 @@
|
|||
import window from 'window';
|
||||
import _ from '_';
|
||||
import $ from '$';
|
||||
import progressJs from 'progressJs';
|
||||
|
||||
import {
|
||||
|
|
@ -18,7 +17,6 @@ import {
|
|||
pString,
|
||||
delegateRunOnDestroy,
|
||||
mailToHelper,
|
||||
windowResize,
|
||||
jassl
|
||||
} from 'Common/Utils';
|
||||
|
||||
|
|
@ -34,7 +32,7 @@ import {
|
|||
Magics
|
||||
} from 'Common/Enums';
|
||||
|
||||
import { $htmlCL, leftPanelWidth, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
|
||||
import { $htmlCL, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
|
||||
|
||||
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
|
||||
import { runHook } from 'Common/Plugins';
|
||||
|
|
@ -124,21 +122,23 @@ class AppUser extends AbstractApp {
|
|||
Magics.Time5m
|
||||
);
|
||||
|
||||
$.wakeUp(
|
||||
() => {
|
||||
// wakeUp
|
||||
const interval = Magics.Time60m;
|
||||
var lastTime = (new Date()).getTime();
|
||||
setInterval(() => {
|
||||
const currentTime = (new Date()).getTime();
|
||||
if (currentTime > (lastTime + interval + 1000)) {
|
||||
if (checkTimestamp()) {
|
||||
this.reload();
|
||||
}
|
||||
|
||||
Remote.jsVersion((sResult, oData) => {
|
||||
if (StorageResultType.Success === sResult && oData && !oData.Result) {
|
||||
this.reload();
|
||||
}
|
||||
}, Settings.appSettingsGet('version'));
|
||||
},
|
||||
{},
|
||||
Magics.Time60m
|
||||
);
|
||||
}
|
||||
lastTime = currentTime;
|
||||
}, interval);
|
||||
|
||||
if (checkTimestamp()) {
|
||||
this.reload();
|
||||
|
|
@ -881,84 +881,49 @@ class AppUser extends AbstractApp {
|
|||
Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList);
|
||||
}
|
||||
|
||||
initHorizontalLayoutResizer(sClientSideKeyName) {
|
||||
initHorizontalLayoutResizer() {
|
||||
let top = null,
|
||||
bottom = null;
|
||||
bottom = null,
|
||||
observer = null;
|
||||
|
||||
const minHeight = 200,
|
||||
maxHeight = 500,
|
||||
fSetHeight = (height) => {
|
||||
if (height) {
|
||||
if (top) {
|
||||
top.attr('style', 'height:' + height + 'px');
|
||||
}
|
||||
|
||||
if (bottom) {
|
||||
bottom.attr('style', 'top:' + (55 /* top toolbar */ + height) + 'px');
|
||||
}
|
||||
}
|
||||
},
|
||||
fResizeCreateFunction = (event) => {
|
||||
if (event && event.target) {
|
||||
$(event.target)
|
||||
.find('.ui-resizable-handle')
|
||||
.on('mousedown', () => {
|
||||
$htmlCL.add('rl-resizer');
|
||||
})
|
||||
.on('mouseup', () => {
|
||||
$htmlCL.remove('rl-resizer');
|
||||
});
|
||||
}
|
||||
},
|
||||
fResizeStartFunction = () => {
|
||||
$htmlCL.add('rl-resizer');
|
||||
},
|
||||
fResizeResizeFunction = _.debounce(
|
||||
() => {
|
||||
$htmlCL.add('rl-resizer');
|
||||
},
|
||||
500,
|
||||
true
|
||||
),
|
||||
fResizeStopFunction = (oEvent, oObject) => {
|
||||
$htmlCL.remove('rl-resizer');
|
||||
if (oObject && oObject.size && oObject.size.height) {
|
||||
Local.set(sClientSideKeyName, oObject.size.height);
|
||||
|
||||
fSetHeight(oObject.size.height);
|
||||
|
||||
windowResize();
|
||||
}
|
||||
},
|
||||
oOptions = {
|
||||
helper: 'ui-resizable-helper-h',
|
||||
minHeight: minHeight,
|
||||
maxHeight: maxHeight,
|
||||
handles: 's',
|
||||
create: fResizeCreateFunction,
|
||||
resize: fResizeResizeFunction,
|
||||
start: fResizeStartFunction,
|
||||
stop: fResizeStopFunction
|
||||
},
|
||||
const
|
||||
fDisable = (bDisable) => {
|
||||
if (bDisable) {
|
||||
if (top && top.hasClass('ui-resizable')) {
|
||||
top.resizable('destroy').removeAttr('style');
|
||||
}
|
||||
|
||||
if (bottom) {
|
||||
bottom.removeAttr('style');
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
top.removeAttribute('style');
|
||||
top.classList.remove('resizable');
|
||||
bottom.removeAttribute('style');
|
||||
}
|
||||
} else if ($htmlCL.contains('rl-bottom-preview-pane')) {
|
||||
top = $('.b-message-list-wrapper');
|
||||
bottom = $('.b-message-view-wrapper');
|
||||
|
||||
if (!top.hasClass('ui-resizable')) {
|
||||
top.resizable(oOptions);
|
||||
top = window.document.querySelector('.b-message-list-wrapper');
|
||||
bottom = window.document.querySelector('.b-message-view-wrapper');
|
||||
if (top && bottom) {
|
||||
top.classList.add('resizable');
|
||||
if (window.ResizeObserver) {
|
||||
if (!observer) {
|
||||
observer = new window.ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.target === top) {
|
||||
bottom.style.top = (56 + entry.borderBoxSize.blockSize) + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
observer.observe(top);
|
||||
} else {
|
||||
if (!observer) {
|
||||
observer = new window.MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.target === top && 'style' == mutation.attributeName) {
|
||||
bottom.style.top = (56 + top.offsetHeight) + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
observer.observe(top, { attributes: true });
|
||||
}
|
||||
}
|
||||
|
||||
const iHeight = pInt(Local.get(sClientSideKeyName)) || 300;
|
||||
fSetHeight(iHeight > minHeight ? iHeight : minHeight);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -969,93 +934,51 @@ class AppUser extends AbstractApp {
|
|||
});
|
||||
}
|
||||
|
||||
initVerticalLayoutResizer(sClientSideKeyName) {
|
||||
const disabledWidth = 60,
|
||||
minWidth = 155,
|
||||
lLeft = $('#rl-left'),
|
||||
right = $('#rl-right'),
|
||||
mLeftWidth = Local.get(sClientSideKeyName) || null,
|
||||
fSetWidth = (iWidth) => {
|
||||
if (iWidth) {
|
||||
leftPanelWidth(iWidth);
|
||||
initVerticalLayoutResizer() {
|
||||
let rlLeft = null,
|
||||
rlRight = null,
|
||||
observer = null;
|
||||
|
||||
$htmlCL.remove('rl-resizer');
|
||||
|
||||
lLeft.css({
|
||||
width: '' + iWidth + 'px'
|
||||
});
|
||||
|
||||
right.css({
|
||||
left: '' + iWidth + 'px'
|
||||
});
|
||||
}
|
||||
},
|
||||
const
|
||||
fDisable = (bDisable) => {
|
||||
if (bDisable) {
|
||||
lLeft.resizable('disable');
|
||||
fSetWidth(disabledWidth);
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
}
|
||||
rlLeft.classList.remove('resizable');
|
||||
rlLeft.removeAttribute('style');
|
||||
rlRight.removeAttribute('style');
|
||||
} else {
|
||||
lLeft.resizable('enable');
|
||||
const width = pInt(Local.get(sClientSideKeyName)) || minWidth;
|
||||
fSetWidth(width > minWidth ? width : minWidth);
|
||||
rlLeft = window.document.getElementById('rl-left');
|
||||
rlRight = window.document.getElementById('rl-right');
|
||||
if (rlLeft && rlRight) {
|
||||
rlLeft.classList.add('resizable');
|
||||
rlLeft.removeAttribute('style');
|
||||
rlRight.removeAttribute('style');
|
||||
if (window.ResizeObserver) {
|
||||
let observer = new window.ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.target === rlLeft) {
|
||||
rlRight.style.left = entry.borderBoxSize.inlineSize + 'px';
|
||||
}
|
||||
},
|
||||
fResizeCreateFunction = (event) => {
|
||||
if (event && event.target) {
|
||||
$(event.target)
|
||||
.find('.ui-resizable-handle')
|
||||
.on('mousedown', () => {
|
||||
$htmlCL.add('rl-resizer');
|
||||
})
|
||||
.on('mouseup', () => {
|
||||
$htmlCL.remove('rl-resizer');
|
||||
});
|
||||
});
|
||||
observer.observe(rlLeft);
|
||||
} else {
|
||||
let observer = new window.MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.target === rlLeft && 'style' == mutation.attributeName) {
|
||||
rlRight.style.left = rlLeft.offsetWidth + 'px';
|
||||
}
|
||||
},
|
||||
fResizeResizeFunction = _.debounce(
|
||||
() => {
|
||||
$htmlCL.add('rl-resizer');
|
||||
},
|
||||
500,
|
||||
true
|
||||
),
|
||||
fResizeStartFunction = () => {
|
||||
$htmlCL.add('rl-resizer');
|
||||
},
|
||||
fResizeStopFunction = (event, obj) => {
|
||||
$htmlCL.remove('rl-resizer');
|
||||
if (obj && obj.size && obj.size.width) {
|
||||
Local.set(sClientSideKeyName, obj.size.width);
|
||||
|
||||
leftPanelWidth(obj.size.width);
|
||||
|
||||
right.css({
|
||||
left: '' + obj.size.width + 'px'
|
||||
});
|
||||
|
||||
lLeft.css({
|
||||
position: '',
|
||||
top: '',
|
||||
left: '',
|
||||
height: ''
|
||||
});
|
||||
observer.observe(rlLeft, { attributes: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (null !== mLeftWidth) {
|
||||
fSetWidth(mLeftWidth > minWidth ? mLeftWidth : minWidth);
|
||||
}
|
||||
|
||||
lLeft.resizable({
|
||||
helper: 'ui-resizable-helper-w',
|
||||
minWidth: minWidth,
|
||||
maxWidth: Magics.Size350px,
|
||||
handles: 'e',
|
||||
create: fResizeCreateFunction,
|
||||
resize: fResizeResizeFunction,
|
||||
start: fResizeStartFunction,
|
||||
stop: fResizeStopFunction
|
||||
});
|
||||
fDisable(false);
|
||||
|
||||
Events.sub('left-panel.off', () => {
|
||||
fDisable(true);
|
||||
|
|
|
|||
|
|
@ -53,6 +53,19 @@ html.rl-mobile {
|
|||
min-width: 60px;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left.resizable {
|
||||
resize: horizontal;
|
||||
overflow: hidden;
|
||||
min-width: 155px;
|
||||
max-width: 350px;
|
||||
}
|
||||
.b-message-list-wrapper.resizable {
|
||||
resize: vertical;
|
||||
overflow: hidden;
|
||||
min-height: 200px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
.g-ui-absolute-reset;
|
||||
|
||||
|
|
@ -271,21 +284,6 @@ html.rl-left-panel-none {
|
|||
}
|
||||
}
|
||||
|
||||
.ui-resizable-helper-w {
|
||||
border-right: 5px solid #777;
|
||||
border-right-color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.ui-resizable-helper-h {
|
||||
border-bottom: 5px solid #ccc;
|
||||
border-bottom-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.ui-resizable-handle:hover {
|
||||
background: #aaa;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
html.rl-no-preview-pane {
|
||||
|
||||
#rl-sub-left {
|
||||
|
|
@ -300,10 +298,6 @@ html.rl-no-preview-pane {
|
|||
#rl-sub-right {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
#rl-right .ui-resizable-handle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-side-preview-pane #rl-right .ui-resizable-handle {
|
||||
|
|
|
|||
|
|
@ -103,11 +103,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.g-ui-resizable-delimiter-highlight {
|
||||
border: none;
|
||||
border-right: 6px solid #aaa;
|
||||
}
|
||||
|
||||
.e-pagenator {
|
||||
|
||||
.e-page {
|
||||
|
|
@ -131,10 +126,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
html.rgba .g-ui-resizable-delimiter-highlight {
|
||||
border-right-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.settings-saved-trigger {
|
||||
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -12,11 +12,6 @@
|
|||
min-width: 300px;
|
||||
}
|
||||
|
||||
.ui-resizable-e {
|
||||
right: -1px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.pswp__error-msg {
|
||||
color: #ccc;
|
||||
a, a:hover {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,6 @@ config.paths.js = {
|
|||
src: [
|
||||
'node_modules/jquery/dist/jquery.min.js',
|
||||
'vendors/jquery-ui/js/jquery-ui-1.12.1.custom.min.js', // custom
|
||||
'vendors/jquery-wakeup/jquery.wakeup.js', // no-npm
|
||||
'vendors/jquery-letterfx/jquery-letterfx.min.js', // no-npm
|
||||
'vendors/inputosaurus/inputosaurus.js', // custom (modified)
|
||||
'vendors/routes/signals.min.js', // fixed
|
||||
|
|
|
|||
1180
vendors/jquery-ui/js/jquery-ui-1.12.1.custom.js
vendored
1180
vendors/jquery-ui/js/jquery-ui-1.12.1.custom.js
vendored
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
70
vendors/jquery-wakeup/jquery.wakeup.js
vendored
70
vendors/jquery-wakeup/jquery.wakeup.js
vendored
|
|
@ -1,70 +0,0 @@
|
|||
/*!
|
||||
* jQuery WakeUp plugin
|
||||
*
|
||||
* A JQuery plugin that will help detecting waking up from sleep and/or
|
||||
* hibernation and executing assigned functions.
|
||||
*
|
||||
* Based on code provided by Andrew Mu:
|
||||
* http://stackoverflow.com/questions/4079115
|
||||
*
|
||||
* Copyright (c) 2013, Paul Okopny <paul.okopny@gmail.com>
|
||||
* https://bitbucket.org/paul.okopny/jquery.wakeup-plugin
|
||||
*
|
||||
* Permission to use, copy, modify, and/or distribute this software for any
|
||||
* purpose with or without fee is hereby granted, provided that the above
|
||||
* copyright notice and this permission notice appear in all copies.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
*
|
||||
*/
|
||||
(function ($, document, undefined) {
|
||||
var default_wakeup_interval = 1000;
|
||||
var wake_up_ids = new Array();
|
||||
// returns intervalId, which can be used to cancel future waking
|
||||
$.wakeUp = function (on_wakeup, params, interval) {
|
||||
|
||||
if ((!interval) || typeof(interval) !== 'number' ){
|
||||
interval = default_wakeup_interval;
|
||||
};
|
||||
// on_wakeup should be a function
|
||||
if (typeof(on_wakeup) !== "function") {
|
||||
return null;
|
||||
}
|
||||
var lastTime = (new Date()).getTime();
|
||||
var intervalId = setInterval(function() {
|
||||
var currentTime = (new Date()).getTime();
|
||||
if (currentTime > (lastTime + interval + 1000)) { //
|
||||
var sleepTime = currentTime - lastTime;
|
||||
lastTime = currentTime;
|
||||
if (params) {
|
||||
on_wakeup(sleepTime, params);} else {on_wakeup(sleepTime); }
|
||||
} else {lastTime = currentTime;}
|
||||
}, interval);
|
||||
//add interval id to wake_up_ids array
|
||||
wake_up_ids.push(intervalId);
|
||||
return intervalId;
|
||||
};
|
||||
|
||||
$.ignoreBell = function(interval_id) {
|
||||
if (interval_id) {
|
||||
// delete only one wakeUp call
|
||||
wake_up_ids.splice($.inArray(interval_id, wake_up_ids),1);
|
||||
clearInterval(interval_id);
|
||||
};
|
||||
};
|
||||
|
||||
$.dreamOn = function() {
|
||||
// delete all current wake Up calls
|
||||
$.each(wake_up_ids, function(index_of, interval_id) {
|
||||
clearInterval(interval_id)
|
||||
});
|
||||
wake_up_ids = new Array();
|
||||
};
|
||||
|
||||
})(jQuery, document);
|
||||
Loading…
Reference in a new issue