Added knockoutjs components (step 1)

dev/App/Abstract.js

@@ -211,7 +211,16 @@
 	{
 		Events.pub('rl.bootstart');
 
-		var ssm = require('ssm');
+		var
+			ssm = require('ssm'),
+			ko = require('ko')
+		;
+
+		ko.components.register('SaveTrigger', require('Components/SaveTrigger'));
+		ko.components.register('Checkbox', require('Components/Checkbox'));
+		ko.components.register('Input', require('Components/Input'));
+		ko.components.register('Select', require('Components/Select'));
+		ko.components.register('TextArea', require('Components/TextArea'));
 
 		Utils.initOnStartOrLangChange(function () {
 			Utils.initNotificationLanguage();

dev/App/User.js

@@ -1355,17 +1355,38 @@
 					iContactsSyncInterval = 5 <= iContactsSyncInterval ? iContactsSyncInterval : 20;
 					iContactsSyncInterval = 320 >= iContactsSyncInterval ? iContactsSyncInterval : 320;
 
+					_.delay(function () {
+						self.contactsSync();
+					}, 10000);
+
+					_.delay(function () {
+						self.folderInformationMultiply(true);
+					}, 2000);
+
 					window.setInterval(function () {
 						self.contactsSync();
 					}, iContactsSyncInterval * 60000 + 5000);
 
+					if (Settings.capa(Enums.Capa.AdditionalAccounts) || Settings.capa(Enums.Capa.AdditionalIdentities))
+					{
+						self.accountsAndIdentities();
+					}
+
 					_.delay(function () {
-						self.contactsSync();
+						var sF = Data.currentFolderFullNameRaw();
+						if (Cache.getFolderInboxName() !== sF)
+						{
+							self.folderInformation(sF);
+						}
+					}, 1000);
+
+					_.delay(function () {
+						self.quota();
 					}, 5000);
 
 					_.delay(function () {
-						self.folderInformationMultiply(true);
-					}, 500);
+						Remote.appDelayStart(Utils.emptyFunction);
+					}, 35000);
 
 					Plugins.runHook('rl-start-user-screens');
 					Events.pub('rl.bootstart-user-screens');

dev/Common/Utils.js

@@ -1982,6 +1982,9 @@
 	Utils.reloadLanguage = function (sLanguage, fDone, fFail)
 	{
 		var iStart = Utils.microtime();
+
+		Globals.$html.addClass('rl-changing-language');
+
 		$.ajax({
 				'url': require('Common/Links').langLink(sLanguage),
 				'dataType': 'script',
@@ -1992,6 +1995,7 @@
 				_.delay(function () {
 					Utils.i18nReload();
 					(fDone || Utils.emptyFunction)();
+					Globals.$html.removeClass('rl-changing-language');
 				}, 500 < Utils.microtime() - iStart ? 1 : 500);
 			})
 		;

dev/Components/Abstract.js

@@ -0,0 +1,72 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		Utils = require('Common/Utils')
+	;
+
+	/**
+	 * @constructor
+	 */
+	function AbstractComponent()
+	{
+		this.disposable = [];
+	}
+
+	/**
+	 * @type {Array}
+	 */
+	AbstractComponent.prototype.disposable = [];
+
+	AbstractComponent.prototype.dispose = function ()
+	{
+		_.each(this.disposable, function (fFuncToDispose) {
+			if (fFuncToDispose && fFuncToDispose.dispose)
+			{
+				fFuncToDispose.dispose();
+			}
+		});
+	};
+
+	/**
+	 * @param {AbstractComponent} fClassObject
+	 * @param {string} sTemplateID
+	 * @return {Object}
+	 */
+	AbstractComponent.componentExportHelper = function (fClassObject, sTemplateID) {
+		return {
+			viewModel: {
+				createViewModel: function(oParams, oCmponentInfo) {
+
+					oParams = oParams || {};
+					oParams.element = null;
+
+					if (oCmponentInfo.element)
+					{
+						oParams.element = $(oCmponentInfo.element);
+
+						Utils.i18nToNode(oParams.element);
+
+						if (!Utils.isUnd(oParams.inline) && ko.unwrap(oParams.inline))
+						{
+							oParams.element.css('display', 'inline-block');
+						}
+					}
+
+					return new fClassObject(oParams);
+				}
+			},
+			template: {
+				element: sTemplateID
+			}
+		};
+	};
+
+	module.exports = AbstractComponent;
+
+}());

dev/Components/AbstractInput.js

@@ -0,0 +1,89 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractComponent = require('Components/Abstract')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractComponent
+	 */
+	function AbstractInput(oParams) {
+
+		AbstractComponent.call(this);
+
+		this.value = oParams.value || '';
+		this.size = oParams.size || 0;
+		this.label = oParams.label || '';
+		this.enable = oParams.enable || true;
+		this.trigger = oParams.trigger && oParams.trigger.subscribe ? oParams.trigger : null;
+
+		this.labeled = !Utils.isUnd(oParams.label);
+		this.triggered = !Utils.isUnd(oParams.trigger) && !!this.trigger;
+
+		this.classForTrigger = ko.observable('');
+
+		this.className = ko.computed(function () {
+
+			var
+				iSize = ko.unwrap(this.size),
+				sSuffixValue = this.trigger ?
+					' ' + Utils.trim('settings-saved-trigger-input ' + this.classForTrigger()) : ''
+			;
+
+			return (0 < iSize ? 'span' + iSize : '') + sSuffixValue;
+
+		}, this);
+
+		if (!Utils.isUnd(oParams.width) && oParams.element)
+		{
+			oParams.element.find('input,select,textarea').css('width', oParams.width);
+		}
+
+		this.disposable.push(this.className);
+
+		if (this.trigger)
+		{
+			this.setTriggerState(this.trigger());
+
+			this.disposable.push(
+				this.trigger.subscribe(this.setTriggerState, this)
+			);
+		}
+	};
+
+	AbstractInput.prototype.setTriggerState = function (nValue)
+	{
+		switch (Utils.pInt(nValue))
+		{
+			case Enums.SaveSettingsStep.TrueResult:
+				this.classForTrigger('success');
+				break;
+			case Enums.SaveSettingsStep.FalseResult:
+				this.classForTrigger('error');
+				break;
+			default:
+				this.classForTrigger('');
+				break;
+		}
+	};
+
+	_.extend(AbstractInput.prototype, AbstractComponent.prototype);
+
+	AbstractInput.componentExportHelper = AbstractComponent.componentExportHelper;
+
+	module.exports = AbstractInput;
+
+}());

dev/Components/Checkbox.js

@@ -0,0 +1,38 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		AbstractComponent = require('Components/Abstract')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractComponent
+	 */
+	function CheckboxComponent(oParams) {
+
+		AbstractComponent.call(this);
+
+		this.value = oParams.value || ko.observable(false);
+		this.label = oParams.label || '';
+		this.inline = oParams.inline;
+	};
+
+	_.extend(CheckboxComponent.prototype, AbstractComponent.prototype);
+
+	CheckboxComponent.prototype.toggle = function() {
+		this.value(!this.value());
+	};
+
+	module.exports = AbstractComponent.componentExportHelper(
+		CheckboxComponent, 'CheckboxComponent');
+
+}());

dev/Components/Input.js

@@ -0,0 +1,50 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractInput = require('Components/AbstractInput')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractInput
+	 */
+	function InputComponent(oParams) {
+
+		AbstractInput.call(this, oParams);
+
+		this.placeholder = oParams.placeholder || ''
+	};
+
+	InputComponent.prototype.setTriggerState = function (nValue)
+	{
+		switch (Utils.pInt(nValue))
+		{
+			case Enums.SaveSettingsStep.TrueResult:
+				this.classForTrigger('success');
+				break;
+			case Enums.SaveSettingsStep.FalseResult:
+				this.classForTrigger('error');
+				break;
+			default:
+				this.classForTrigger('');
+				break;
+		}
+	};
+
+	_.extend(InputComponent.prototype, AbstractInput.prototype);
+
+	module.exports = AbstractInput.componentExportHelper(
+		InputComponent, 'InputComponent');
+
+}());

dev/Components/SaveTrigger.js

@@ -0,0 +1,94 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractComponent = require('Components/Abstract')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractComponent
+	 */
+	function SaveTriggerComponent(oParams) {
+
+		AbstractComponent.call(this);
+
+		this.element = oParams.element || null;
+		this.value = oParams.value && oParams.value.subscribe ? oParams.value : null;
+
+		if (this.element)
+		{
+			if (this.value)
+			{
+				this.element.css('display', 'inline-block');
+
+				if (oParams.verticalAlign)
+				{
+					this.element.css('vertical-align', oParams.verticalAlign);
+				}
+				
+				this.setState(this.value());
+
+				this.disposable.push(
+					this.value.subscribe(this.setState, this)
+				);
+			}
+			else
+			{
+				this.element.hide();
+			}
+		}
+	};
+
+	SaveTriggerComponent.prototype.setState = function (nValue)
+	{
+		switch (Utils.pInt(nValue))
+		{
+			case Enums.SaveSettingsStep.TrueResult:
+				this.element
+					.find('.animated,.error').hide().removeClass('visible')
+					.end()
+					.find('.success').show().addClass('visible')
+				;
+				break;
+			case Enums.SaveSettingsStep.FalseResult:
+				this.element
+					.find('.animated,.success').hide().removeClass('visible')
+					.end()
+					.find('.error').show().addClass('visible')
+				;
+				break;
+			case Enums.SaveSettingsStep.Animate:
+				this.element
+					.find('.error,.success').hide().removeClass('visible')
+					.end()
+					.find('.animated').show().addClass('visible')
+				;
+				break;
+			case Enums.SaveSettingsStep.Idle:
+			default:
+				this.element
+					.find('.animated').hide()
+					.end()
+					.find('.error,.success').removeClass('visible')
+				;
+				break;
+		}
+	};
+
+	_.extend(SaveTriggerComponent.prototype, AbstractComponent.prototype);
+
+	module.exports = AbstractComponent.componentExportHelper(
+		SaveTriggerComponent, 'SaveTriggerComponent');
+
+}());

dev/Components/Select.js

@@ -0,0 +1,37 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractInput = require('Components/AbstractInput')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractInput
+	 */
+	function SelectComponent(oParams) {
+
+		AbstractInput.call(this, oParams);
+
+		this.options = oParams.options || '';
+
+		this.optionsText = oParams.optionsText || null;
+		this.optionsValue = oParams.optionsValue || null;
+	};
+
+	_.extend(SelectComponent.prototype, AbstractInput.prototype);
+
+	module.exports = AbstractInput.componentExportHelper(
+		SelectComponent, 'SelectComponent');
+
+}());

dev/Components/TextArea.js

@@ -0,0 +1,34 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractInput = require('Components/AbstractInput')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractInput
+	 */
+	function TextAreaComponent(oParams) {
+
+		AbstractInput.call(this, oParams);
+
+		this.rows = oParams.rows || 5;
+	};
+
+	_.extend(TextAreaComponent.prototype, AbstractInput.prototype);
+
+	module.exports = AbstractInput.componentExportHelper(
+		TextAreaComponent, 'TextAreaComponent');
+
+}());

dev/External/ko.js

@@ -1,5 +1,5 @@
 
-(function (module, ko) {
+(function (ko) {
 
 	'use strict';
 
@@ -902,4 +902,4 @@
 
 	module.exports = ko;
 
-}(module, ko));
+}(ko));

dev/Screen/User/MailBox.js

@@ -102,32 +102,11 @@
 	MailBoxUserScreen.prototype.onStart = function ()
 	{
 		var
-			sInboxFolderName = Cache.getFolderInboxName(),
 			fResizeFunction = function () {
 				Utils.windowResize();
 			}
 		;
 
-		if (Settings.capa(Enums.Capa.AdditionalAccounts) || Settings.capa(Enums.Capa.AdditionalIdentities))
-		{
-			require('App/User').accountsAndIdentities();
-		}
-
-		_.delay(function () {
-			if (sInboxFolderName !== Data.currentFolderFullNameRaw())
-			{
-				require('App/User').folderInformation(sInboxFolderName);
-			}
-		}, 1000);
-
-		_.delay(function () {
-			require('App/User').quota();
-		}, 5000);
-
-		_.delay(function () {
-			Remote.appDelayStart(Utils.emptyFunction);
-		}, 35000);
-
 		Globals.$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === Data.layout());
 
 		Data.folderList.subscribe(fResizeFunction);

dev/Settings/User/General.js

@@ -36,6 +36,13 @@
 		this.useCheckboxesInList = Data.useCheckboxesInList;
 		this.allowLanguagesOnSettings = Data.allowLanguagesOnSettings;
 
+		this.usePreviewPaneCheckbox = ko.computed({
+			read: this.usePreviewPane,
+			write: function (bValue) {
+				this.layout(bValue ? Enums.Layout.SidePreview : Enums.Layout.NoPreview);
+			}
+		}, this);
+
 		this.isDesktopNotificationsSupported = ko.computed(function () {
 			return Enums.DesktopNotifications.NotSupported !== Data.desktopNotificationsPermisions();
 		});

dev/Storage/User/Data.js

@@ -627,7 +627,7 @@
 
 		var
 			aResult = [],
-			iLimit = 10,
+			iLimit = 5,
 			iUtc = moment().unix(),
 			iTimeout = iUtc - 60 * 5,
 			aTimeouts = [],

dev/Styles/Layout.less

@@ -275,3 +275,6 @@ html.rl-ctrl-key-pressed {
 	background-image: none;
 	display: none;
 }
+
+/*html.rl-changing-language {
+}*/

dev/bootstrap.js

@@ -57,7 +57,7 @@
 					_.delay(function () {
 
 						App.bootstart();
-						
+
 						Globals.$html
 							.removeClass('no-js rl-booted-trigger')
 							.addClass('rl-booted')