Improve scripts load system

dev/App/Abstract.jsx

@@ -23,7 +23,7 @@ class AbstractApp extends AbstractBoot
 	{
 		super();
 
-		this.iframe = $('<iframe style="display:none" src="javascript:;" />').appendTo('body');
+		this.iframe = $('<iframe style="display:none" />').appendTo('body');
 
 		Globals.$win.on('error', function (oEvent) {
 			if (oEvent && oEvent.originalEvent && oEvent.originalEvent.message &&

dev/App/User.jsx

@@ -1213,13 +1213,6 @@ class AppUser extends AbstractApp
 		{
 			kn.hideLoading();
 
-			progressJs.onbeforeend(() => {
-				$('.progressjs-container').hide();
-				_.delay(() => {
-					$('.progressjs-container').remove();
-				}, 100);
-			});
-
 			progressJs.set(100).end();
 		}
 		else
@@ -1239,7 +1232,6 @@ class AppUser extends AbstractApp
 		require('Stores/User/Contact').populate();
 
 		var
-			$LAB = require('$LAB'),
 			sJsHash = Settings.appSettingsGet('jsHash'),
 			sStartupUrl = Utils.pString(Settings.settingsGet('StartupUrl')),
 			iContactsSyncInterval = Utils.pInt(Settings.settingsGet('ContactsSyncInterval')),
@@ -1288,7 +1280,7 @@ class AppUser extends AbstractApp
 							kn.routeOn();
 						}
 
-						if ($LAB && window.crypto && window.crypto.getRandomValues && Settings.capa(Enums.Capa.OpenPGP))
+						if (window.jsloader && window.crypto && window.crypto.getRandomValues && Settings.capa(Enums.Capa.OpenPGP))
 						{
 							const openpgpCallback = (openpgp) => {
 
@@ -1298,8 +1290,7 @@ class AppUser extends AbstractApp
 								{
 									try
 									{
-//										PgpStore.openpgp.initWorker(Links.openPgpWorkerJs()); // 1.2.0
-										PgpStore.openpgp.initWorker({path: Links.openPgpWorkerJs()}); // 2.3.0
+										PgpStore.openpgp.initWorker({path: Links.openPgpWorkerJs()});
 									}
 									catch (e)
 									{
@@ -1321,7 +1312,7 @@ class AppUser extends AbstractApp
 							}
 							else
 							{
-								$LAB.script(Links.openPgpJs()).wait(() => {
+								window.jsloader(Links.openPgpJs()).then(() => {
 									if (window.openpgp)
 									{
 										openpgpCallback(window.openpgp);

dev/Common/Booter.jsx

@@ -1,13 +1,20 @@
 
 import window from 'window';
 import $ from '$';
+import progressJs from 'progressJs';
 
 import rainLoopStorage from 'Storage/RainLoop';
 
+let rlAppDataStorage = null;
+
 window.__rlah = () => {
 	return rainLoopStorage ? rainLoopStorage.getHash() : null;
 };
 
+window.__rlah_data = () => {
+	return rlAppDataStorage;
+};
+
 window.__rlah_set = () => {
 	if (rainLoopStorage)
 	{
@@ -22,20 +29,59 @@ window.__rlah_clear = () => {
 	}
 };
 
-window.__includeScr = (src) => {
-	window.document.write(unescape('%3Csc' + 'ript data-cfasync="false" type="text/jav' + 'ascr' + 'ipt" sr' + 'c="' + src + '"%3E%3C/' + 'scr' + 'ipt%3E'));
-};
-
-window.__includeAppScr = (src) => {
-	window.__includeScr(src + (window.__rlah ? window.__rlah() || '0' : '0') + '/' + window.Math.random().toString().substr(2) + '/');
-};
-
-window.__includeStyle = (styles) => {
+function includeStyle(styles)
+{
 	window.document.write(unescape('%3Csty' + 'le%3E' + styles + '"%3E%3C/' + 'sty' + 'le%3E'));
-};
+}
 
-window.__showError = (additionalError) => {
+function includeScr(src)
+{
+	window.document.write(unescape('%3Csc' + 'ript type="text/jav' + 'ascr' + 'ipt" data-cfasync="false" sr' + 'c="' + src + '"%3E%3C/' + 'scr' + 'ipt%3E'));
+}
 
+function includeLayout()
+{
+	const
+		layout = require('Html/Layout.html'),
+		app = window.document.getElementById('rl-app')
+	;
+
+	if (app && layout)
+	{
+		app.innerHTML = layout.replace(/[\r\n\t]+/g, '');
+		return true;
+	}
+
+	return false;
+}
+
+function includeAppScr(data = {})
+{
+	let src = './?/';
+	src += data.admin ? 'Admin' : '';
+	src += 'AppData@';
+	src += data.mobile ? 'mobile' : 'no-mobile';
+	src += data.mobileDevice ? '-1' : '-0';
+	src += '/';
+
+	includeScr(src + (window.__rlah ? window.__rlah() || '0' : '0') + '/' + window.Math.random().toString().substr(2) + '/');
+}
+
+function getRainloopBootData()
+{
+	let result = {};
+	const meta = window.document.getElementById('app-boot-data');
+
+	if (meta && meta.getAttribute)
+	{
+		result = JSON.parse(meta.getAttribute('content')) || {};
+	}
+
+	return result;
+}
+
+function showError(additionalError)
+{
 	const
 		oR = window.document.getElementById('rl-loading'),
 		oL = window.document.getElementById('rl-loading-error'),
@@ -58,14 +104,14 @@ window.__showError = (additionalError) => {
 		oLA.innerHTML = additionalError;
 	}
 
-	if (window.rainloopProgressJs)
+	if (progressJs)
 	{
-		window.rainloopProgressJs.set(100);
+		progressJs.set(100).end();
 	}
-};
-
-window.__showDescription = (description) => {
+}
 
+function showDescriptionAndLoading(description)
+{
 	const
 		oE = window.document.getElementById('rl-loading'),
 		oElDesc = window.document.getElementById('rl-loading-desc')
@@ -83,76 +129,81 @@ window.__showDescription = (description) => {
 			oE.style.opacity = 1;
 		}, 300);
 	}
-};
+}
 
-window.__runBoot = (withError, additionalError) => {
-	if (window.__APP_BOOT && !withError) {
+function runMainBoot(withError, additionalError)
+{
+	if (window.__APP_BOOT && !withError)
+	{
 		window.__APP_BOOT(function (bV) {
-			if (!bV) {
-				window.__showError(additionalError);
+			if (!bV)
+			{
+				showError(additionalError);
 			}
 		});
-	} else {
-		window.__showError(additionalError);
 	}
-};
-
-window.__runApp = (BaseAppLibsScriptLink, BaseAppMainScriptLink, BaseAppEditorScriptLink) => {
-
-	const appData = window.rainloopAppData;
-
-	if (window.$LAB && window.progressJs && appData && appData.TemplatesLink && appData.LangLink)
+	else
 	{
-		const p = window.progressJs();
-		window.rainloopProgressJs = p;
+		showError(additionalError);
+	}
+}
+
+function runApp()
+{
+	const appData = window.__rlah_data();
+
+	if (window.jsloader && progressJs && appData && appData.TemplatesLink && appData.LangLink &&
+		appData.StaticLibJsLink && appData.StaticAppJsLink && appData.StaticEditorJsLink)
+	{
+		const p = progressJs;
 
 		p.setOptions({theme: 'rainloop'});
 		p.start().set(5);
 
-		window.$LAB
-			.script(function () {
-				return [
-					{src: BaseAppLibsScriptLink, type: 'text/javascript', charset: 'utf-8'}
-				];
-			})
-			.wait(function () {
+		const
+			libs = window.jsloader(appData.StaticLibJsLink).then(() => {
+				if (window.$)
+				{
+					if (!window.$('#rl-check').is(':visible'))
+					{
+						window.$('html').addClass('no-css');
+						throw new Error('no-css');
+					}
 
-				p.set(20);
+					window.$('#rl-check').remove();
 
-				if (appData.IncludeBackground && $) {
-					$('#rl-bg').attr('style', 'background-image: none !important;')
-						.backstretch(appData.IncludeBackground.replace('{{USER}}',
-							(window.__rlah ? window.__rlah() || '0' : '0')), {fade: 100, centeredX: true, centeredY: true})
-						.removeAttr('style')
-					;
+					if (appData.IncludeBackground)
+					{
+						window.$('#rl-bg').attr('style', 'background-image: none !important;')
+							.backstretch(appData.IncludeBackground.replace('{{USER}}',
+								(window.__rlah ? (window.__rlah() || '0') : '0')), {fade: 100, centeredX: true, centeredY: true})
+							.removeAttr('style')
+						;
+					}
 				}
-			})
-			.script(function () {
-				return [
-					{src: appData.TemplatesLink, type: 'text/javascript', charset: 'utf-8'},
-					{src: appData.LangLink, type: 'text/javascript', charset: 'utf-8'}
-				];
-			})
-			.wait(function () {
+			}),
+			common = window.Promise.all([
+				window.jsloader(appData.TemplatesLink),
+				window.jsloader(appData.LangLink)
+			])
+		;
+
+		window.Promise.all([libs, common])
+			.then(() => {
 				p.set(30);
-			})
-			.script(function () {
-				return {src: BaseAppMainScriptLink, type: 'text/javascript', charset: 'utf-8'};
-			})
-			.wait(function () {
+				return window.jsloader(appData.StaticAppJsLink);
+			}).then(() => {
 				p.set(50);
-			})
-			.script(function () {
-				return appData.PluginsLink ? {src: appData.PluginsLink, type: 'text/javascript', charset: 'utf-8'} : null;
-			})
-			.wait(function () {
+				return appData.PluginsLink ? window.jsloader(appData.PluginsLink) : window.Promise.resolve();
+			}).then(() => {
 				p.set(70);
-				window.__runBoot(false);
-			})
-			.script(function () {
-				return {src: BaseAppEditorScriptLink, type: 'text/javascript', charset: 'utf-8'};
-			})
-			.wait(function () {
+				runMainBoot(false);
+			}).catch((e) => {
+				runMainBoot(true);
+				throw e;
+			}).then(() => {
+				return window.jsloader(appData.StaticEditorJsLink);
+			}).then(() => {
 				if (window.CKEDITOR && window.__initEditor) {
 					window.__initEditor();
 					window.__initEditor = null;
@@ -162,6 +213,41 @@ window.__runApp = (BaseAppLibsScriptLink, BaseAppMainScriptLink, BaseAppEditorSc
 	}
 	else
 	{
-		window.__runBoot(true);
+		runMainBoot(true);
+	}
+}
+
+window.__initAppData = function(data) {
+
+	rlAppDataStorage = data;
+
+	window.__rlah_set();
+
+	if (rlAppDataStorage.NewThemeLink)
+	{
+		window.document.getElementById('app-theme-link').href = rlAppDataStorage.NewThemeLink;
+	}
+
+	if (rlAppDataStorage.IncludeCss)
+	{
+		includeStyle(rlAppDataStorage.IncludeCss);
+	}
+
+	showDescriptionAndLoading(rlAppDataStorage ? (rlAppDataStorage.LoadingDescriptionEsc || '') : '');
+
+	runApp();
+};
+
+window.__runBoot = function() {
+
+	if (!window.navigator || !window.navigator.cookieEnabled)
+	{
+		window.document.location.replace('./?/NoCookie');
+	}
+
+	if (includeLayout())
+	{
+		includeAppScr(getRainloopBootData());
 	}
 };
+

dev/Common/Loader.jsx

@@ -0,0 +1,25 @@
+
+import window from 'window';
+import {Promise} from 'es6-promise-polyfill/promise.js';
+
+window.Promise = window.Promise || Promise;
+
+export default (url) => {
+	return new window.Promise((resolve, reject) => {
+
+		const element = document.createElement('script');
+
+		element.onload = () => {
+			resolve(url);
+		};
+
+		element.onerror = () => {
+			reject(new Error(url));
+		};
+
+		element.async = true;
+		element.src = url;
+
+		document.body.appendChild(element);
+	});
+};

dev/Common/Utils.js

@@ -1419,7 +1419,7 @@
 			aContent.push('' + sKey + '=' + sValue);
 		});
 
-		$('#rl-head-viewport').attr('content', aContent.join(', '));
+		$('#app-head-viewport').attr('content', aContent.join(', '));
 	};
 
 	/**
@@ -1538,8 +1538,8 @@
 	Utils.changeTheme = function (sValue, themeTrigger)
 	{
 		var
-			oThemeLink = $('#rlThemeLink'),
-			oThemeStyle = $('#rlThemeStyle'),
+			oThemeLink = $('#app-theme-link'),
+			oThemeStyle = $('#app-theme-style'),
 			sUrl = oThemeLink.attr('href')
 		;
 
@@ -1576,7 +1576,7 @@
 				{
 					if (oThemeLink && oThemeLink[0] && (!oThemeStyle || !oThemeStyle[0]))
 					{
-						oThemeStyle = $('<style id="rlThemeStyle"></style>');
+						oThemeStyle = $('<style id="app-theme-style"></style>');
 						oThemeLink.after(oThemeStyle);
 						oThemeLink.remove();
 					}

dev/Html/Layout.html

@@ -0,0 +1,24 @@
+<div id="rl-bg" class="thm-body"></div>
+<div id="rl-loading" class="thm-loading" style="opacity:0">
+	<div id="rl-loading-desc"></div>
+	<div class="e-spinner">
+		<div class="e-bounce bounce1"></div>
+		<div class="e-bounce bounce2"></div>
+		<div class="e-bounce bounce3"></div>
+	</div>
+</div>
+<div id="rl-loading-error" class="thm-loading">
+	An error occurred. <br /> Please refresh the page and try again.
+	<div id="rl-loading-error-additional"></div>
+</div>
+<div id="rl-content">
+	<div id="rl-popups"></div>
+	<div id="rl-center">
+		<div id="rl-top"></div>
+		<div id="rl-left"></div>
+		<div id="rl-right"></div>
+		<div id="rl-bottom"></div>
+	</div>
+</div>
+<div id="rl-templates"></div>
+<div id="rl-hidden"></div>

dev/Storage/RainLoop.jsx

@@ -32,7 +32,7 @@ class RainLoopStorage
 	setHash() {
 		const
 			key = 'AuthAccountHash',
-			appData = window.rainloopAppData
+			appData = window.__rlah_data()
 		;
 		if (this.s)
 		{

dev/Storage/Settings.jsx

@@ -8,7 +8,7 @@ class SettingsStorage
 	appSettings = {};
 
 	constructor() {
-		this.settings = window.rainloopAppData || {};
+		this.settings = window.__rlah_data() || {};
 		this.settings = Utils.isNormal(this.settings) ? this.settings : {};
 
 		this.appSettings = this.settings.System || null;

dev/Styles/Layout.less

@@ -349,7 +349,7 @@ html.rl-ctrl-key-pressed {
 #rl-loading, #rl-loading-error {
 	position: absolute;
 	font-size: 30px;
-	line-height: 100%;
+	line-height: 130%;
 	top: 50%;
 	width: 100%;
 	height: 65px;
@@ -370,6 +370,14 @@ html.rl-ctrl-key-pressed {
 	font-size: 20px;
 }
 
+#rl-app{
+	display: none;
+}
+
+#rl-check{
+	display: block;
+}
+
 html.rl-mobile .hide-on-mobile {
 	display: none !important;
 }

dev/Styles/_End.less

@@ -28,10 +28,6 @@
 	opacity: 0;
 }
 
-#rl-check {
-	display: block;
-}
-
 .opentip-container {
 
 	z-index: 2001 !important;

dev/boot.jsx

@@ -1,12 +1,27 @@
 
 import window from 'window';
+import jsloader from 'Common/Loader';
+import {progressJs} from 'progress.js/src/progress.js';
+
+window.jsloader = jsloader;
+window.progressJs = window.progressJs || progressJs();
+
+window.progressJs.onbeforeend(() => {
+	if (window.$)
+	{
+		window.$('.progressjs-container').hide();
+		window.setTimeout(() => {
+			window.$('.progressjs-container').remove();
+		}, 100);
+	}
+});
 
 require('json2/json2.js');
 require('modernizr/modernizr-custom.js');
+
 require('Common/Booter.jsx');
 
-import {$LAB} from 'labjs/LAB.src.js';
-import {progressJs} from 'progress.js/src/progress.js';
-
-window.$LAB = $LAB;
-window.progressJs = progressJs;
+if (window.__runBoot)
+{
+	window.__runBoot();
+}

dev/bootstrap.jsx

@@ -48,17 +48,10 @@ export default (App) => {
 	window['rl']['EmailModel'] = EmailModel;
 	window['rl']['Enums'] = Enums;
 
-	window['__APP_BOOT'] = function (fCall) {
+	window.__APP_BOOT = function (fCall) {
 
 		$(_.delay(function () {
 
-			if (!$('#rl-check').is(':visible'))
-			{
-				Globals.$html.addClass('no-css');
-			}
-
-			$('#rl-check').remove();
-
 			if (window['rainloopTEMPLATES'] && window['rainloopTEMPLATES'][0])
 			{
 				$('#rl-templates').html(window['rainloopTEMPLATES'][0]);
@@ -79,7 +72,7 @@ export default (App) => {
 				fCall(false);
 			}
 
-			window['__APP_BOOT'] = null;
+			window.__APP_BOOT = null;
 
 		}, 10));
 	};