From 0b0747b8dca2a5efaee9032677e4ebb9ddaf35e6 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Wed, 15 Jul 2020 14:25:51 +0200
Subject: [PATCH] Upgraded some old JavaScript to ECMAScript 1.6 Removed some
 jQuery references Added JavaScript Globals.$htmlCL for frequently used
 window.document.documentElement.classList

---
 dev/App/Abstract.js                       | 48 ++++++++----------
 dev/App/User.js                           | 38 +++++++-------
 dev/Common/Booter.js                      | 33 +++++-------
 dev/Common/Globals.js                     |  7 ++-
 dev/Common/Translator.js                  | 16 +++---
 dev/Common/Utils.js                       |  4 +-
 dev/External/ko.js                        | 21 ++++----
 dev/Knoin/AbstractViewNext.js             |  5 +-
 dev/Knoin/Knoin.js                        |  9 ++--
 dev/Model/Message.js                      |  2 +-
 dev/Settings/User/Themes.js               |  6 +--
 dev/Stores/AbstractApp.js                 |  5 +-
 dev/Stores/User/Settings.js               |  8 +--
 dev/Styles/Layout.less                    |  2 +-
 dev/View/User/MailBox/FolderList.js       |  4 +-
 dev/View/User/MailBox/MessageView.js      |  4 +-
 dev/boot.js                               |  8 +--
 dev/bootstrap.js                          | 11 ++--
 rainloop/v/0.0.0/app/templates/Index.html | 62 +++++++++++------------
 19 files changed, 142 insertions(+), 151 deletions(-)

diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js
index 4772649e7..8cababa6e 100644
--- a/dev/App/Abstract.js
+++ b/dev/App/Abstract.js
@@ -7,8 +7,7 @@ import ssm from 'ssm';
 
 import {
 	$win,
-	$html,
-	$doc,
+	$htmlCL,
 	leftPanelDisabled,
 	leftPanelType,
 	sUserAgent,
@@ -43,7 +42,7 @@ class AbstractApp extends AbstractBoot {
 
 		this.iframe = $('<iframe class="internal-hiddden" />').appendTo('body');
 
-		$win.on('resize', () => {
+		window.addEventListener('resize', () => {
 			Events.pub('window.resize');
 		});
 
@@ -72,24 +71,21 @@ class AbstractApp extends AbstractBoot {
 		//			}
 		//		});
 
+		const $doc = $(window.document);
 		$doc
 			.on('keydown', (event) => {
 				if (event && event.ctrlKey) {
-					$html.addClass('rl-ctrl-key-pressed');
+					$htmlCL.add('rl-ctrl-key-pressed');
 				}
 			})
 			.on('keyup', (event) => {
 				if (event && !event.ctrlKey) {
-					$html.removeClass('rl-ctrl-key-pressed');
+					$htmlCL.remove('rl-ctrl-key-pressed');
 				}
-			});
-
-		$doc.on(
-			'mousemove keypress click',
-			_.debounce(() => {
+			})
+			.on('mousemove keypress click', _.debounce(() => {
 				Events.pub('rl.auto-logout-refresh');
-			}, Magics.Time5s)
-		);
+			}, Magics.Time5s));
 
 		key('esc, enter', KeyState.All, () => {
 			detectDropdownVisibility();
@@ -265,17 +261,17 @@ class AbstractApp extends AbstractBoot {
 		});
 
 		if (!mobile) {
-			$html.addClass('rl-desktop');
+			$htmlCL.add('rl-desktop');
 
 			ssm.addState({
 				id: 'mobile',
 				query: '(max-width: 767px)',
 				onEnter: () => {
-					$html.addClass('ssm-state-mobile');
+					$htmlCL.add('ssm-state-mobile');
 					Events.pub('ssm.mobile-enter');
 				},
 				onLeave: () => {
-					$html.removeClass('ssm-state-mobile');
+					$htmlCL.remove('ssm-state-mobile');
 					Events.pub('ssm.mobile-leave');
 				}
 			});
@@ -284,10 +280,10 @@ class AbstractApp extends AbstractBoot {
 				id: 'tablet',
 				query: '(min-width: 768px) and (max-width: 999px)',
 				onEnter: () => {
-					$html.addClass('ssm-state-tablet');
+					$htmlCL.add('ssm-state-tablet');
 				},
 				onLeave: () => {
-					$html.removeClass('ssm-state-tablet');
+					$htmlCL.remove('ssm-state-tablet');
 				}
 			});
 
@@ -295,10 +291,10 @@ class AbstractApp extends AbstractBoot {
 				id: 'desktop',
 				query: '(min-width: 1000px) and (max-width: 1400px)',
 				onEnter: () => {
-					$html.addClass('ssm-state-desktop');
+					$htmlCL.add('ssm-state-desktop');
 				},
 				onLeave: () => {
-					$html.removeClass('ssm-state-desktop');
+					$htmlCL.remove('ssm-state-desktop');
 				}
 			});
 
@@ -306,25 +302,25 @@ class AbstractApp extends AbstractBoot {
 				id: 'desktop-large',
 				query: '(min-width: 1401px)',
 				onEnter: () => {
-					$html.addClass('ssm-state-desktop-large');
+					$htmlCL.add('ssm-state-desktop-large');
 				},
 				onLeave: () => {
-					$html.removeClass('ssm-state-desktop-large');
+					$htmlCL.remove('ssm-state-desktop-large');
 				}
 			});
 		} else {
-			$html.addClass('ssm-state-mobile').addClass('rl-mobile');
+			$htmlCL.add('ssm-state-mobile', 'rl-mobile');
 			Events.pub('ssm.mobile-enter');
 		}
 
 		leftPanelDisabled.subscribe((bValue) => {
-			$html.toggleClass('rl-left-panel-disabled', bValue);
-			$html.toggleClass('rl-left-panel-enabled', !bValue);
+			$htmlCL.toggle('rl-left-panel-disabled', bValue);
+			$htmlCL.toggle('rl-left-panel-enabled', !bValue);
 		});
 
 		leftPanelType.subscribe((sValue) => {
-			$html.toggleClass('rl-left-panel-none', 'none' === sValue);
-			$html.toggleClass('rl-left-panel-short', 'short' === sValue);
+			$htmlCL.toggle('rl-left-panel-none', 'none' === sValue);
+			$htmlCL.toggle('rl-left-panel-short', 'short' === sValue);
 		});
 
 		leftPanelDisabled.valueHasMutated();
diff --git a/dev/App/User.js b/dev/App/User.js
index 2398884a1..c66a624f8 100644
--- a/dev/App/User.js
+++ b/dev/App/User.js
@@ -34,7 +34,7 @@ import {
 	Magics
 } from 'Common/Enums';
 
-import { $html, leftPanelWidth, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
+import { $htmlCL, leftPanelWidth, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
 
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 import { runHook } from 'Common/Plugins';
@@ -146,11 +146,10 @@ class AppUser extends AbstractApp {
 
 		if (Settings.settingsGet('UserBackgroundHash')) {
 			_.delay(() => {
-				const img = userBackground(Settings.settingsGet('UserBackgroundHash')),
-					b = window.document.body;
+				const img = userBackground(Settings.settingsGet('UserBackgroundHash'));
 				if (img) {
-					b.classList.add('UserBackground');
-					b.style.backgroundImage = "url("+img+")";
+					$htmlCL.add('UserBackground');
+					window.document.body.style.backgroundImage = "url("+img+")";
 				}
 			}, Magics.Time1s);
 		}
@@ -904,25 +903,25 @@ class AppUser extends AbstractApp {
 					$(event.target)
 						.find('.ui-resizable-handle')
 						.on('mousedown', () => {
-							$html.addClass('rl-resizer');
+							$htmlCL.add('rl-resizer');
 						})
 						.on('mouseup', () => {
-							$html.removeClass('rl-resizer');
+							$htmlCL.remove('rl-resizer');
 						});
 				}
 			},
 			fResizeStartFunction = () => {
-				$html.addClass('rl-resizer');
+				$htmlCL.add('rl-resizer');
 			},
 			fResizeResizeFunction = _.debounce(
 				() => {
-					$html.addClass('rl-resizer');
+					$htmlCL.add('rl-resizer');
 				},
 				500,
 				true
 			),
 			fResizeStopFunction = (oEvent, oObject) => {
-				$html.removeClass('rl-resizer');
+				$htmlCL.remove('rl-resizer');
 				if (oObject && oObject.size && oObject.size.height) {
 					Local.set(sClientSideKeyName, oObject.size.height);
 
@@ -950,7 +949,7 @@ class AppUser extends AbstractApp {
 					if (bottom) {
 						bottom.removeAttr('style');
 					}
-				} else if ($html.hasClass('rl-bottom-preview-pane')) {
+				} else if ($htmlCL.contains('rl-bottom-preview-pane')) {
 					top = $('.b-message-list-wrapper');
 					bottom = $('.b-message-view-wrapper');
 
@@ -980,7 +979,7 @@ class AppUser extends AbstractApp {
 				if (iWidth) {
 					leftPanelWidth(iWidth);
 
-					$html.removeClass('rl-resizer');
+					$htmlCL.remove('rl-resizer');
 
 					lLeft.css({
 						width: '' + iWidth + 'px'
@@ -1006,25 +1005,25 @@ class AppUser extends AbstractApp {
 					$(event.target)
 						.find('.ui-resizable-handle')
 						.on('mousedown', () => {
-							$html.addClass('rl-resizer');
+							$htmlCL.add('rl-resizer');
 						})
 						.on('mouseup', () => {
-							$html.removeClass('rl-resizer');
+							$htmlCL.remove('rl-resizer');
 						});
 				}
 			},
 			fResizeResizeFunction = _.debounce(
 				() => {
-					$html.addClass('rl-resizer');
+					$htmlCL.add('rl-resizer');
 				},
 				500,
 				true
 			),
 			fResizeStartFunction = () => {
-				$html.addClass('rl-resizer');
+				$htmlCL.add('rl-resizer');
 			},
 			fResizeStopFunction = (event, obj) => {
-				$html.removeClass('rl-resizer');
+				$htmlCL.remove('rl-resizer');
 				if (obj && obj.size && obj.size.width) {
 					Local.set(sClientSideKeyName, obj.size.width);
 
@@ -1086,7 +1085,8 @@ class AppUser extends AbstractApp {
 	}
 
 	bootstartLoginScreen() {
-		$html.removeClass('rl-user-auth').addClass('rl-user-no-auth');
+		$htmlCL.remove('rl-user-auth');
+		$htmlCL.add('rl-user-no-auth');
 
 		const customLoginLink = pString(Settings.appSettingsGet('customLoginLink'));
 		if (!customLoginLink) {
@@ -1135,7 +1135,7 @@ class AppUser extends AbstractApp {
 
 		this.setWindowTitle('');
 		if (Settings.settingsGet('Auth')) {
-			$html.addClass('rl-user-auth');
+			$htmlCL.add('rl-user-auth');
 
 			if (
 				Settings.capa(Capa.TwoFactor) &&
diff --git a/dev/Common/Booter.js b/dev/Common/Booter.js
index b514a5ced..bbac2f25f 100644
--- a/dev/Common/Booter.js
+++ b/dev/Common/Booter.js
@@ -66,17 +66,11 @@ function getComputedStyle(id, name) {
  * @returns {void}
  */
 function includeStyle(styles) {
-	const style = window.document.createElement('style');
+	const doc = window.document, style = doc.createElement('style');
 	style.type = 'text/css';
-	style.text = styles;
-
-	if (style.styleSheet) {
-		style.styleSheet.cssText = styles;
-	} else {
-		style.appendChild(window.document.createTextNode(styles));
-	}
-
-	window.document.getElementsByTagName('head')[0].appendChild(style);
+	style.textContent = styles;
+//	style.appendChild(doc.createTextNode(styles));
+	doc.head.appendChild(style);
 }
 
 /**
@@ -84,11 +78,10 @@ function includeStyle(styles) {
  * @returns {void}
  */
 function includeScr(src) {
-	const script = window.document.createElement('script');
+	const doc = window.document, script = doc.createElement('script');
 	script.type = 'text/javascript';
 	script.src = src;
-
-	window.document.getElementsByTagName('head')[0].appendChild(script);
+	doc.head.appendChild(script);
 }
 
 /**
@@ -219,6 +212,7 @@ function runApp() {
 		jassl &&
 		progressJs &&
 		appData &&
+		appData.TemplatesLink &&
 		appData.LangLink &&
 		appData.StaticLibJsLink &&
 		appData.StaticAppJsLink &&
@@ -232,15 +226,12 @@ function runApp() {
 
 		const libs = () =>
 			jassl(appData.StaticLibJsLink).then(() => {
-				if (window.$) {
-					window.$('#rl-check').remove();
-				}
+				window.document.getElementById('rl-check').remove();
 				if (appData.IncludeBackground) {
-					const img = appData.IncludeBackground.replace('{{USER}}', window.__rlah ? window.__rlah() || '0' : '0'),
-						b = window.document.body;
+					const img = appData.IncludeBackground.replace('{{USER}}', window.__rlah ? window.__rlah() || '0' : '0');
 					if (img) {
-						b.classList.add('UserBackground');
-						b.style.backgroundImage = "url("+img+")";
+						window.document.documentElement.classList.add('UserBackground');
+						window.document.body.style.backgroundImage = "url("+img+")";
 					}
 				}
 			});
@@ -248,7 +239,7 @@ function runApp() {
 		libs()
 			.then(() => {
 				p.set(20);
-				return jassl(appData.LangLink);
+				return window.Promise.all([jassl(appData.TemplatesLink), jassl(appData.LangLink)]);
 			})
 			.then(() => {
 				p.set(30);
diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js
index 305af7d27..b46eb431b 100644
--- a/dev/Common/Globals.js
+++ b/dev/Common/Globals.js
@@ -10,9 +10,8 @@ $win.__sizes = [0, 0];
 
 export { $win };
 
-export const $doc = $(window.document);
-
 export const $html = $('html');
+export const $htmlCL = window.document.documentElement.classList;
 
 export const $body = $('body');
 
@@ -71,7 +70,7 @@ export const bMobileDevice = (/android|iphone|ipod|ipad|blackberry|mobile/i).tes
  * @type {boolean}
  */
 export const bAnimationSupported =
-	!bMobileDevice && $html.hasClass('csstransitions') && $html.hasClass('cssanimations');
+	!bMobileDevice && $htmlCL.contains('csstransitions') && $htmlCL.contains('cssanimations');
 
 /**
  * @type {boolean}
@@ -200,7 +199,7 @@ export const popupVisibilityNames = ko.observableArray([]);
 export const popupVisibility = ko.computed(() => 0 < popupVisibilityNames().length);
 
 popupVisibility.subscribe((bValue) => {
-	$html.toggleClass('rl-modal', bValue);
+	$htmlCL.toggle('rl-modal', bValue);
 });
 
 // keys
diff --git a/dev/Common/Translator.js b/dev/Common/Translator.js
index 389bd2d02..c265f0537 100644
--- a/dev/Common/Translator.js
+++ b/dev/Common/Translator.js
@@ -4,7 +4,7 @@ import $ from '$';
 import ko from 'ko';
 import { Notification, UploadErrorCode } from 'Common/Enums';
 import { pInt, isUnd, isNull, has, microtime, inArray } from 'Common/Utils';
-import { $html, bAnimationSupported } from 'Common/Globals';
+import { $html, $htmlCL, bAnimationSupported } from 'Common/Globals';
 import { reload as momentorReload } from 'Common/Momentor';
 import { langLink } from 'Common/Links';
 
@@ -272,7 +272,7 @@ export function getUploadErrorDescByCode(code) {
 export function reload(admin, language) {
 	const start = microtime();
 
-	$html.addClass('rl-changing-language');
+	$htmlCL.add('rl-changing-language');
 
 	return new window.Promise((resolve, reject) => {
 		$.ajax({
@@ -287,11 +287,9 @@ export function reload(admin, language) {
 
 						const isRtl = -1 < inArray((language || '').toLowerCase(), ['ar', 'ar_sa', 'he', 'he_he', 'ur', 'ur_ir']);
 
-						$html
-							.removeClass('rl-changing-language')
-							.removeClass('rl-rtl rl-ltr')
-							// .attr('dir', isRtl ? 'rtl' : 'ltr')
-							.addClass(isRtl ? 'rl-rtl' : 'rl-ltr');
+						$htmlCL.remove('rl-changing-language', 'rl-rtl', 'rl-ltr');
+							// $html.attr('dir', isRtl ? 'rtl' : 'ltr')
+						$htmlCL.add(isRtl ? 'rl-rtl' : 'rl-ltr');
 
 						resolve();
 					},
@@ -299,7 +297,7 @@ export function reload(admin, language) {
 				);
 			},
 			() => {
-				$html.removeClass('rl-changing-language');
+				$htmlCL.remove('rl-changing-language');
 				window.rainloopI18N = null;
 				reject();
 			}
@@ -308,4 +306,4 @@ export function reload(admin, language) {
 }
 
 // init section
-$html.addClass('rl-' + ($html.attr('dir') || 'ltr'));
+$htmlCL.add('rl-' + ($html.attr('dir') || 'ltr'));
diff --git a/dev/Common/Utils.js b/dev/Common/Utils.js
index 3ad15efb2..f3d20d23e 100644
--- a/dev/Common/Utils.js
+++ b/dev/Common/Utils.js
@@ -1449,10 +1449,10 @@ export function domReady(fn) {
 
 export const windowResize = _.debounce((timeout) => {
 	if (isUnd(timeout) || isNull(timeout)) {
-		$win.resize();
+		$win.trigger('resize');
 	} else {
 		window.setTimeout(() => {
-			$win.resize();
+			$win.trigger('resize');
 		}, timeout);
 	}
 }, 50);
diff --git a/dev/External/ko.js b/dev/External/ko.js
index 77e149734..8db564aee 100644
--- a/dev/External/ko.js
+++ b/dev/External/ko.js
@@ -7,7 +7,6 @@ import Pikaday from 'pikaday';
 import { SaveSettingsStep, Magics } from 'Common/Enums';
 
 const ko = window.ko,
-	$win = $(window),
 	fDisposalTooltipHelper = (element) => {
 		ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
 			if (element && element.__opentip) {
@@ -27,11 +26,11 @@ ko.bindingHandlers.updateWidth = {
 				}, Magics.Time500ms);
 			};
 
-		$win.on('resize', fInit);
+		window.addEventListener('resize', fInit);
 		fInit();
 
 		ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-			$win.off('resize', fInit);
+			window.removeEventListener('resize', fInit);
 		});
 	}
 };
@@ -92,11 +91,11 @@ ko.bindingHandlers.scrollerShadows = {
 
 		if (cont) {
 			$(cont).on('scroll resize', fFunc);
-			$win.on('resize', fFunc);
+			window.addEventListener('resize', fFunc);
 
 			ko.utils.domNodeDisposal.addDisposeCallback(cont, () => {
 				$(cont).off();
-				$win.off('resize', fFunc);
+				window.removeEventListener('resize', fFunc);
 			});
 		}
 	}
@@ -186,12 +185,12 @@ ko.bindingHandlers.tooltip = {
 				element.__opentip.setContent(sValue);
 			}
 
-			$win.on('rl.tooltips.diactivate', () => {
+			window.addEventListener('rl.tooltips.diactivate', () => {
 				element.__opentip.hide();
 				element.__opentip.deactivate();
 			});
 
-			$win.on('rl.tooltips.activate', () => {
+			window.addEventListener('rl.tooltips.activate', () => {
 				element.__opentip.activate();
 			});
 		}
@@ -460,10 +459,10 @@ ko.bindingHandlers.modal = {
 
 		$(element).modal(ko.unwrap(fValueAccessor()) ? 'show' : 'hide');
 
-		if (Globals.$html.hasClass('rl-anim')) {
-			Globals.$html.addClass('rl-modal-animation');
+		if (Globals.$htmlCL.contains('rl-anim')) {
+			Globals.$htmlCL.add('rl-modal-animation');
 			_.delay(() => {
-				Globals.$html.removeClass('rl-modal-animation');
+				Globals.$htmlCL.remove('rl-modal-animation');
 			}, Magics.Time500ms);
 		}
 	}
@@ -534,7 +533,7 @@ ko.bindingHandlers.initFixedTrigger = {
 		let $container = $(values[0] || null);
 		$container = $container[0] ? $container : null;
 		if ($container) {
-			$win.resize(() => {
+			window.addEventListener('resize', () => {
 				const offset = $container ? $container.offset() : null;
 				if (offset && offset.top) {
 					$el.css('top', offset.top + top);
diff --git a/dev/Knoin/AbstractViewNext.js b/dev/Knoin/AbstractViewNext.js
index 228acb05b..d8baf74df 100644
--- a/dev/Knoin/AbstractViewNext.js
+++ b/dev/Knoin/AbstractViewNext.js
@@ -1,8 +1,9 @@
 import ko from 'ko';
+import window from 'window';
 
 import { delegateRun, inFocus } from 'Common/Utils';
 import { KeyState, EventKeyCode } from 'Common/Enums';
-import { $win, keyScope } from 'Common/Globals';
+import { keyScope } from 'Common/Globals';
 
 export class AbstractViewNext {
 	bDisabeCloseOnEsc = false;
@@ -35,7 +36,7 @@ export class AbstractViewNext {
 	 * @returns {void}
 	 */
 	registerPopupKeyDown() {
-		$win.on('keydown', (event) => {
+		window.addEventListener('keydown', (event) => {
 			if (event && this.modalVisibility && this.modalVisibility()) {
 				if (!this.bDisabeCloseOnEsc && EventKeyCode.Esc === event.keyCode) {
 					delegateRun(this, 'cancelCommand');
diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js
index 80491bbc6..dc76d47e0 100644
--- a/dev/Knoin/Knoin.js
+++ b/dev/Knoin/Knoin.js
@@ -6,7 +6,7 @@ import crossroads from 'crossroads';
 
 import { Magics } from 'Common/Enums';
 import { runHook } from 'Common/Plugins';
-import { $html, VIEW_MODELS, popupVisibilityNames } from 'Common/Globals';
+import { $htmlCL, VIEW_MODELS, popupVisibilityNames } from 'Common/Globals';
 
 import { isArray, isUnd, pString, log, isFunc, createCommandLegacy, delegateRun, isNonEmptyArray } from 'Common/Utils';
 
@@ -432,8 +432,11 @@ export function startScreens(screensClasses) {
 	hasher.changed.add(cross.parse, cross);
 	hasher.init();
 
-	_.delay(() => $html.removeClass('rl-started-trigger').addClass('rl-started'), 100);
-	_.delay(() => $html.addClass('rl-started-delay'), 200);
+	_.delay(() => {
+		$htmlCL.remove('rl-started-trigger');
+		$htmlCL.add('rl-started');
+	}, 100);
+	_.delay(() => $htmlCL.add('rl-started-delay'), 200);
 }
 
 /**
diff --git a/dev/Model/Message.js b/dev/Model/Message.js
index 5aa3e0a04..fb38149ed 100644
--- a/dev/Model/Message.js
+++ b/dev/Model/Message.js
@@ -797,7 +797,7 @@ class MessageModel extends AbstractModel {
 
 			if (lazy) {
 				this.lozad();
-				$win.resize();
+				$win.trigger('resize');
 			}
 
 			windowResize(500);
diff --git a/dev/Settings/User/Themes.js b/dev/Settings/User/Themes.js
index 264991d08..d4b030cc8 100644
--- a/dev/Settings/User/Themes.js
+++ b/dev/Settings/User/Themes.js
@@ -48,12 +48,12 @@ class ThemesUserSettings {
 		});
 
 		this.background.hash.subscribe((value) => {
-			const b = window.document.body;
+			const b = window.document.body, cl = window.document.documentElement.classList;
 			if (!value) {
-				b.classList.remove('UserBackground');
+				cl.remove('UserBackground');
 				b.removeAttribute('style');
 			} else {
-				b.classList.add('UserBackground');
+				cl.add('UserBackground');
 				b.style.backgroundImage = "url("+userBackground(value)+")";
 			}
 		});
diff --git a/dev/Stores/AbstractApp.js b/dev/Stores/AbstractApp.js
index f4e2e8ee6..7713bbb69 100644
--- a/dev/Stores/AbstractApp.js
+++ b/dev/Stores/AbstractApp.js
@@ -1,5 +1,5 @@
 import ko from 'ko';
-import { $html, bMobileDevice } from 'Common/Globals';
+import { $htmlCL, bMobileDevice } from 'Common/Globals';
 import * as Settings from 'Storage/Settings';
 
 class AbstractAppStore {
@@ -12,7 +12,8 @@ class AbstractAppStore {
 
 		this.interfaceAnimation.subscribe((value) => {
 			const anim = bMobileDevice || !value;
-			$html.toggleClass('rl-anim', !anim).toggleClass('no-rl-anim', anim);
+			$htmlCL.toggle('rl-anim', !anim);
+			$htmlCL.toggle('no-rl-anim', anim);
 		});
 
 		this.interfaceAnimation.valueHasMutated();
diff --git a/dev/Stores/User/Settings.js b/dev/Stores/User/Settings.js
index 03f60ddd5..c5e03b3f7 100644
--- a/dev/Stores/User/Settings.js
+++ b/dev/Stores/User/Settings.js
@@ -3,7 +3,7 @@ import ko from 'ko';
 
 import { MESSAGES_PER_PAGE, MESSAGES_PER_PAGE_VALUES } from 'Common/Consts';
 import { Layout, EditorDefaultType, Magics } from 'Common/Enums';
-import { $html } from 'Common/Globals';
+import { $htmlCL } from 'Common/Globals';
 import { pInt } from 'Common/Utils';
 import * as Events from 'Common/Events';
 
@@ -46,9 +46,9 @@ class SettingsUserStore {
 
 	subscribers() {
 		this.layout.subscribe((value) => {
-			$html.toggleClass('rl-no-preview-pane', Layout.NoPreview === value);
-			$html.toggleClass('rl-side-preview-pane', Layout.SidePreview === value);
-			$html.toggleClass('rl-bottom-preview-pane', Layout.BottomPreview === value);
+			$htmlCL.toggle('rl-no-preview-pane', Layout.NoPreview === value);
+			$htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
+			$htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
 			Events.pub('layout', [value]);
 		});
 	}
diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less
index d47351d16..355c5bd1a 100644
--- a/dev/Styles/Layout.less
+++ b/dev/Styles/Layout.less
@@ -1,5 +1,5 @@
 
-.UserBackground {
+.UserBackground body {
 	background-size: cover;
 	background-size: contain;
 	background-repeat: no-repeat;
diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js
index 57e1ac4a1..ed91c4ce3 100644
--- a/dev/View/User/MailBox/FolderList.js
+++ b/dev/View/User/MailBox/FolderList.js
@@ -5,7 +5,7 @@ import key from 'key';
 
 import { trim, isNormal, isArray, windowResize } from 'Common/Utils';
 import { Capa, Focused, Layout, KeyState, EventKeyCode, Magics } from 'Common/Enums';
-import { $html, leftPanelDisabled, moveAction } from 'Common/Globals';
+import { $htmlCL, leftPanelDisabled, moveAction } from 'Common/Globals';
 import { mailBox, settings } from 'Common/Links';
 import { setFolderHash } from 'Common/Cache';
 
@@ -242,7 +242,7 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 	messagesDrop(toFolder, ui) {
 		if (toFolder && ui && ui.helper) {
 			const fromFolderFullNameRaw = ui.helper.data('rl-folder'),
-				copy = $html.hasClass('rl-ctrl-key-pressed'),
+				copy = $htmlCL.contains('rl-ctrl-key-pressed'),
 				uids = ui.helper.data('rl-uids');
 
 			if (isNormal(fromFolderFullNameRaw) && '' !== fromFolderFullNameRaw && isArray(uids)) {
diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js
index 4d43d2ca3..a983fa2b5 100644
--- a/dev/View/User/MailBox/MessageView.js
+++ b/dev/View/User/MailBox/MessageView.js
@@ -17,7 +17,7 @@ import {
 	MessageSetAction
 } from 'Common/Enums';
 
-import { $html, leftPanelDisabled, keyScopeReal, useKeyboardShortcuts, moveAction } from 'Common/Globals';
+import { $htmlCL, leftPanelDisabled, keyScopeReal, useKeyboardShortcuts, moveAction } from 'Common/Globals';
 
 import {
 	inArray,
@@ -323,7 +323,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 		});
 
 		this.fullScreenMode.subscribe((value) => {
-			$html.toggleClass('rl-message-fullscreen', value);
+			$htmlCL.toggle('rl-message-fullscreen', value);
 			windowResize();
 		});
 
diff --git a/dev/boot.js b/dev/boot.js
index 1500f9543..3d3243cf2 100644
--- a/dev/boot.js
+++ b/dev/boot.js
@@ -4,12 +4,12 @@ import { progressJs } from '../vendors/Progress.js/src/progress.js';
 window.progressJs = window.progressJs || progressJs();
 
 window.progressJs.onbeforeend(() => {
-	const _$ = window.$;
-	if (_$) {
+	const div = window.document.querySelector('.progressjs-container');
+	if (div) {
 		try {
-			_$('.progressjs-container').hide();
+			div.hidden = true;
 			window.setTimeout(() => {
-				_$('.progressjs-container').remove();
+				div.remove();
 			}, 200); // eslint-disable-line no-magic-numbers
 		} catch (e) {} // eslint-disable-line no-empty
 	}
diff --git a/dev/bootstrap.js b/dev/bootstrap.js
index 07a27b2ac..90204016c 100644
--- a/dev/bootstrap.js
+++ b/dev/bootstrap.js
@@ -1,6 +1,6 @@
 import window from 'window';
 import { killCtrlACtrlS, detectDropdownVisibility, createCommandLegacy, domReady } from 'Common/Utils';
-import { $win, $html, data as GlobalsData, bMobileDevice } from 'Common/Globals';
+import { $html, $htmlCL, data as GlobalsData, bMobileDevice } from 'Common/Globals';
 import * as Enums from 'Common/Enums';
 import * as Plugins from 'Common/Plugins';
 import { i18n } from 'Common/Translator';
@@ -9,11 +9,13 @@ import { EmailModel } from 'Model/Email';
 export default (App) => {
 	GlobalsData.__APP__ = App;
 
-	$win.on('keydown', killCtrlACtrlS).on('unload', () => {
+	window.addEventListener('keydown', killCtrlACtrlS);
+	window.addEventListener('unload', () => {
 		GlobalsData.bUnload = true;
 	});
 
-	$html.addClass(bMobileDevice ? 'mobile' : 'no-mobile').on('click.dropdown.data-api', detectDropdownVisibility);
+	$htmlCL.add(bMobileDevice ? 'mobile' : 'no-mobile');
+	$html.on('click.dropdown.data-api', detectDropdownVisibility);
 
 	const rl = window.rl || {};
 
@@ -35,7 +37,8 @@ export default (App) => {
 
 	const start = () => {
 		window.setTimeout(() => {
-			$html.removeClass('no-js rl-booted-trigger').addClass('rl-booted');
+			$htmlCL.remove('no-js', 'rl-booted-trigger');
+			$htmlCL.add('rl-booted');
 
 			App.bootstart();
 		}, Enums.Magics.Time10ms);
diff --git a/rainloop/v/0.0.0/app/templates/Index.html b/rainloop/v/0.0.0/app/templates/Index.html
index a0152bf27..b1831746c 100644
--- a/rainloop/v/0.0.0/app/templates/Index.html
+++ b/rainloop/v/0.0.0/app/templates/Index.html
@@ -1,31 +1,31 @@
-<!DOCTYPE html>
-<html class="no-js rl-booted-trigger rl-started-trigger glass" dir="{{BaseDir}}">
-
-<head>
-	<noscript>
-		<meta http-equiv="refresh" content="0; URL=./?/NoScript" />
-	</noscript>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="{{BaseViewport}}">
-	<meta name="apple-mobile-web-app-capable" content="yes" />
-	<meta name="google" content="notranslate" />
-	<meta name="robots" content="noindex,nofollow,noodp" />
-	<meta name="AppBootData" content='{{RainloopBootData}}' id="app-boot-data" />
-	{{BaseContentSecurityPolicy}}
-	<title></title>
-	{{BaseAppHeadScriptLink}}
-	{{BaseAppFaviconPngLinkTag}}
-	{{BaseAppFaviconTouchLinkTag}}
-	<link type="text/css" rel="stylesheet" href="{{BaseAppMainCssLink}}" />
-	<link type="text/css" rel="stylesheet" href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
-	<link rel="manifest" href="{{BaseAppManifestLink}}" />
-</head>
-
-<body class="thm-body">
-	<div id="rl-app"></div>
-	<div id="rl-check"></div>
-	{{BaseAppBodyScript}}
-	<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html class="no-js rl-booted-trigger rl-started-trigger glass" dir="{{BaseDir}}">
+
+<head>
+	<noscript>
+		<meta http-equiv="refresh" content="0; URL=./?/NoScript" />
+	</noscript>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="{{BaseViewport}}">
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="google" content="notranslate" />
+	<meta name="robots" content="noindex,nofollow,noodp" />
+	<meta name="AppBootData" content='{{RainloopBootData}}' id="app-boot-data" />
+	{{BaseContentSecurityPolicy}}
+	<title></title>
+	{{BaseAppHeadScriptLink}}
+	{{BaseAppFaviconPngLinkTag}}
+	{{BaseAppFaviconTouchLinkTag}}
+	<link type="text/css" rel="stylesheet" href="{{BaseAppMainCssLink}}" />
+	<link type="text/css" rel="stylesheet" href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
+	<link rel="manifest" href="{{BaseAppManifestLink}}" />
+</head>
+
+<body class="thm-body">
+	<div id="rl-app"></div>
+	<div id="rl-check"></div>
+	{{BaseAppBodyScript}}
+	<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
+</body>
+
+</html>