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

dev/App/Abstract.js

@@ -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) => {
-				if (event && event.ctrlKey) {
-					$htmlCL.add('rl-ctrl-key-pressed');
-				}
-			})
-			.on('keyup', (event) => {
-				if (event && !event.ctrlKey) {
-					$htmlCL.remove('rl-ctrl-key-pressed');
-				}
-			})
-			.on('mousemove keypress click', _.debounce(() => {
-				Events.pub('rl.auto-logout-refresh');
-			}, Magics.Time5s));
+		const $doc = window.document;
+		$doc.addEventListener('keydown', (event) => {
+			if (event && event.ctrlKey) {
+				$htmlCL.add('rl-ctrl-key-pressed');
+			}
+		});
+		$doc.addEventListener('keyup', (event) => {
+			if (event && !event.ctrlKey) {
+				$htmlCL.remove('rl-ctrl-key-pressed');
+			}
+		});
+		const fn = _.debounce(() => {
+			Events.pub('rl.auto-logout-refresh');
+		}, 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;
 	}
 

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);
-				}
-			},
-			fResizeCreateFunction = (event) => {
-				if (event && event.target) {
-					$(event.target)
-						.find('.ui-resizable-handle')
-						.on('mousedown', () => {
-							$htmlCL.add('rl-resizer');
-						})
-						.on('mouseup', () => {
-							$htmlCL.remove('rl-resizer');
-						});
-				}
-			},
-			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: ''
-					});
+					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';
+									}
+								});
+							});
+							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';
+									}
+								});
+							});
+							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);

dev/Styles/Layout.less

@@ -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 {

dev/Styles/Ui.less

@@ -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;

dev/Styles/_End.less

@@ -12,11 +12,6 @@
 	min-width: 300px;
 }
 
-.ui-resizable-e {
-	right: -1px;
-	width: 5px;
-}
-
 .pswp__error-msg {
 	color: #ccc;
 	a, a:hover {

tasks/config.js

@@ -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

vendors/jquery-wakeup/jquery.wakeup.js

@@ -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);