Code refactoring

Flow first look

dev/Common/Audio.js

@@ -7,18 +7,20 @@ import {trim} from 'Common/Utils';
 
 class Audio
 {
+	notificator = null;
+	player = null;
+
+	supported = false;
+	supportedMp3 = false;
+	supportedOgg = false;
+	supportedWav = false;
+	supportedNotification = false;
+
 	constructor() {
-		this.notificator = null;
-
-		this.supportedMp3 = false;
-		this.supportedOgg = false;
-		this.supportedWav = false;
-		this.supportedNotification = false;
-
 		this.player = this.createNewObject();
 
 		this.supported = !bMobileDevice && !bSafari && !!this.player && !!this.player.play;
-		if (this.supported && this.player.canPlayType)
+		if (this.supported && this.player && this.player.canPlayType)
 		{
 			this.supportedMp3 = '' !== this.player.canPlayType('audio/mpeg;').replace(/no/, '');
 			this.supportedWav = '' !== this.player.canPlayType('audio/wav; codecs="1"').replace(/no/, '');
@@ -35,7 +37,7 @@ class Audio
 			this.supportedNotification = false;
 		}
 
-		if (this.supported)
+		if (this.supported && this.player)
 		{
 			const stopFn = () => this.stop();
 
@@ -137,4 +139,4 @@ class Audio
 	}
 }
 
-module.exports = new Audio();
+export default new Audio();

dev/Common/ClientStorageDriver/LocalStorage.js

@@ -6,6 +6,8 @@ import {CLIENT_SIDE_STORAGE_INDEX_NAME} from 'Common/Consts';
 
 class LocalStorageDriver
 {
+	s = null;
+
 	constructor() {
 		this.s = window.localStorage || null;
 	}

dev/Common/Cmd.js

@@ -4,7 +4,7 @@ import $ from '$';
 import _ from '_';
 import ko from 'ko';
 import {$html, $body} from 'Common/Globals';
-import {EventKeyCode} from 'Common/Enums';
+import {EventKeyCode, Magics} from 'Common/Enums';
 import {trim, inArray, changeTheme} from 'Common/Utils';
 import {reload as translatorReload} from 'Common/Translator';
 
@@ -111,25 +111,28 @@ function cmdVersion() {
 
 class CmdContoller
 {
+	dom = null;
+
+	opened = ko.observable(false);
+	cmd = ko.observable('');
+	focused = ko.observable(false);
+
+	themes = ThemeStore.themes;
+
+	cmdHistory = [];
+	cmdHistoryShift = 0;
+
+	cmdHelper = ko.observable('');
+
+	cmds = ['help', 'version', 'glass', 'clear', 'theme', 'lang'];
+	cmdsWithParameters = ['theme', 'lang'];
+
+	isAdmin = false;
+
 	constructor(dom)
 	{
 		this.dom = dom;
-
-		this.opened = ko.observable(false);
-		this.cmd = ko.observable('');
-		this.focused = ko.observable(false);
-
-		this.themes = ThemeStore.themes;
-
-		this.cmdHistory = [];
-		this.cmdHistoryShift = 0;
-
-		this.cmdHelper = ko.observable('');
-
-		this.cmds = ['help', 'version', 'glass', 'clear', 'theme', 'lang'];
-		this.cmdsWithParameters = ['theme', 'lang'];
-
-		this.isAdmin = Settings.appSettingsGet('admin');
+		this.isAdmin = !!Settings.appSettingsGet('admin');
 	}
 
 	runCmd(cmd, params, isTab) {
@@ -377,11 +380,14 @@ export function toggle()
 				if (contoller.opened())
 				{
 					_.delay(() => {
-						contoller.focused(true);
-					}, 50);
+						if (contoller && contoller.focused)
+						{
+							contoller.focused(true);
+						}
+					}, Magics.Time50ms);
 				}
 			}
-		}, 50);
+		}, Magics.Time50ms);
 	}
 }
 

dev/Common/HtmlEditor.js

@@ -3,13 +3,27 @@ import window from 'window';
 import _ from '_';
 import $ from '$';
 import {htmlEditorDefaultConfig, htmlEditorLangsMap} from 'Common/Globals';
-import {EventKeyCode} from 'Common/Enums';
+import {EventKeyCode, Magics} from 'Common/Enums';
 import * as Settings from 'Storage/Settings';
 
 class HtmlEditor
 {
+	editor;
+	blurTimer = 0;
+
+	__resizable = false;
+	__inited = false;
+
+	onBlur = null;
+	onReady = null;
+	onModeChange = null;
+
+	element;
+	$element;
+
+	resize;
+
 	/**
-	 * @constructor
 	 * @param {Object} element
 	 * @param {Function=} onBlur
 	 * @param {Function=} onReady
@@ -17,9 +31,6 @@ class HtmlEditor
 	 */
 	constructor(element, onBlur = null, onReady = null, onModeChange = null)
 	{
-		this.editor = null;
-		this.blurTimer = 0;
-
 		this.onBlur = onBlur;
 		this.onReady = onReady;
 		this.onModeChange = onModeChange;
@@ -27,20 +38,25 @@ class HtmlEditor
 		this.element = element;
 		this.$element = $(element);
 
-		this.resize = _.throttle(_.bind(this.resize, this), 100);
-
-		this.__inited = false;
+		this.resize = _.throttle(_.bind(this.resizeEditor, this), 100);
 
 		this.init();
 	}
 
+	runOnBlur() {
+		if (this.onBlur)
+		{
+			this.onBlur();
+		}
+	}
+
 	blurTrigger() {
 		if (this.onBlur)
 		{
 			window.clearTimeout(this.blurTimer);
 			this.blurTimer = window.setTimeout(() => {
-				this.onBlur();
-			}, 200);
+				this.runOnBlur();
+			}, Magics.Time200ms);
 		}
 	}
 
@@ -198,8 +214,7 @@ class HtmlEditor
 		if (this.editor && this.__inited && 'wysiwyg' === this.editor.mode)
 		{
 			try {
-				this.editor.setData(
-					this.editor.getData().replace(find, replaceHtml));
+				this.editor.setData(this.editor.getData().replace(find, replaceHtml));
 			}
 			catch (e) {} // eslint-disable-line no-empty
 		}
@@ -387,7 +402,7 @@ class HtmlEditor
 		}
 	}
 
-	resize() {
+	resizeEditor() {
 		if (this.editor && this.__resizable)
 		{
 			try {

dev/Common/Selector.js

@@ -8,8 +8,31 @@ import {isArray, inArray, noop, noopTrue} from 'Common/Utils';
 
 class Selector
 {
+	list;
+	listChecked;
+	isListChecked;
+
+	focusedItem;
+	selectedItem;
+
+	itemSelectedThrottle;
+
+	selectedItemUseCallback = true;
+
+	iSelectNextHelper = 0;
+	iFocusedNextHelper = 0;
+	oContentVisible;
+	oContentScrollable;
+
+	sItemSelector;
+	sItemSelectedSelector;
+	sItemCheckedSelector;
+	sItemFocusedSelector;
+
+	sLastUid = '';
+	oCallbacks = {};
+
 	/**
-	 * @constructor
 	 * @param {koProperty} koList
 	 * @param {koProperty} koSelectedItem
 	 * @param {koProperty} koFocusedItem
@@ -28,7 +51,6 @@ class Selector
 
 		this.focusedItem = koFocusedItem || ko.observable(null);
 		this.selectedItem = koSelectedItem || ko.observable(null);
-		this.selectedItemUseCallback = true;
 
 		this.itemSelectedThrottle = _.debounce(_.bind(this.itemSelected, this), 300);
 
@@ -79,19 +101,11 @@ class Selector
 		this.selectedItem = this.selectedItem.extend({toggleSubscribeProperty: [this, 'selected']});
 		this.focusedItem = this.focusedItem.extend({toggleSubscribeProperty: [null, 'focused']});
 
-		this.iSelectNextHelper = 0;
-		this.iFocusedNextHelper = 0;
-		this.oContentVisible = null;
-		this.oContentScrollable = null;
-
 		this.sItemSelector = sItemSelector;
 		this.sItemSelectedSelector = sItemSelectedSelector;
 		this.sItemCheckedSelector = sItemCheckedSelector;
 		this.sItemFocusedSelector = sItemFocusedSelector;
 
-		this.sLastUid = '';
-		this.oCallbacks = {};
-
 		this.focusedItem.subscribe((item) => {
 			if (item)
 			{
@@ -253,7 +267,7 @@ class Selector
 			mFocused = null;
 			mSelected = null;
 
-		}, this);
+		});
 	}
 
 	itemSelected(item) {

dev/Common/Translator.js

@@ -216,8 +216,10 @@ export function initOnStartOrLangChange(startCallback, langCallback = null)
 			{
 				startCallback();
 			}
-
-			langCallback();
+			if (langCallback)
+			{
+				langCallback();
+			}
 		});
 	}
 	else if (startCallback)

dev/Common/Utils.js

@@ -508,26 +508,16 @@ export function createCommandLegacy(context, fExecute, fCanExecute = true)
 
 	if (isFunc(fCanExecute))
 	{
-		fResult.canExecute = ko.computed(() => fResult.enabled() && fCanExecute.call(context));
+		fResult.canExecute = ko.computed(() => fResult && fResult.enabled() && fCanExecute.call(context));
 	}
 	else
 	{
-		fResult.canExecute = ko.computed(() => fResult.enabled() && !!fCanExecute);
+		fResult.canExecute = ko.computed(() => fResult && fResult.enabled() && !!fCanExecute);
 	}
 
 	return fResult;
 }
 
-/**
- * @param {Function} fExecute
- * @param {(Function|boolean|null)=} fCanExecute = true
- * @returns {Function}
- */
-export function createCommand(fExecute, fCanExecute = true)
-{
-	return createCommandLegacy(null, fExecute, fCanExecute);
-}
-
 /**
  * @param {string} theme
  * @returns {string}
@@ -1264,8 +1254,8 @@ export function changeTheme(value, themeTrigger = noop)
 	if (url)
 	{
 		url = url.toString().replace(/\/-\/[^\/]+\/\-\//, '/-/' + value + '/-/');
-		url = url.toString().replace(/\/Css\/[^\/]+\/User\//, '/Css/0/User/');
-		url = url.toString().replace(/\/Hash\/[^\/]+\//, '/Hash/-/');
+		url = url.replace(/\/Css\/[^\/]+\/User\//, '/Css/0/User/');
+		url = url.replace(/\/Hash\/[^\/]+\//, '/Hash/-/');
 
 		if ('Json/' !== url.substring(url.length - 5, url.length))
 		{