Added knockoutjs components

Added material design checkbox component
Added lang changing animation

dev/App/Abstract.js

@@ -216,11 +216,20 @@
 			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'));
+		ko.components.register('SaveTrigger', require('Component/SaveTrigger'));
+		ko.components.register('Input', require('Component/Input'));
+		ko.components.register('Select', require('Component/Select'));
+		ko.components.register('TextArea', require('Component/TextArea'));
+		ko.components.register('Radio', require('Component/Radio'));
+
+		if (Settings.settingsGet('MaterialDesign'))
+		{
+			ko.components.register('Checkbox', require('Component/MaterialDesign/Checkbox'));
+		}
+		else
+		{
+			ko.components.register('Checkbox', require('Component/Checkbox'));
+		}
 
 		Utils.initOnStartOrLangChange(function () {
 			Utils.initNotificationLanguage();

dev/App/User.js

@@ -1291,6 +1291,8 @@
 		{
 			this.setTitle(Utils.i18n('TITLES/LOADING'));
 
+//require.ensure([], function() { // require code splitting
+
 			self.folders(_.bind(function (bValue) {
 
 				kn.hideLoading();
@@ -1425,6 +1427,9 @@
 				}
 
 			}, self));
+
+//}); // require code splitting
+
 		}
 		else
 		{

dev/Common/Utils.js

@@ -403,8 +403,9 @@
 
 	/**
 	 * @param {Object} oElement
+	 * @param {boolean=} bAnimate = false
 	 */
-	Utils.i18nToNode = function (oElement)
+	Utils.i18nToNode = function (oElement, bAnimate)
 	{
 		_.defer(function () {
 			$('.i18n', oElement).each(function () {
@@ -439,6 +440,13 @@
 					}
 				}
 			});
+
+			if (bAnimate)
+			{
+				$('.i18n-animation.i18n', oElement).letterfx({
+					'fx': 'fall fade', 'backwards': false, 'timing': 50, 'fx_duration': '50ms', 'letter_end': 'restore', 'element_end': 'restore'
+				});
+			}
 		});
 	};
 
@@ -448,7 +456,7 @@
 		{
 			Globals.oI18N = window['rainloopI18N'] || {};
 
-			Utils.i18nToNode(Globals.$doc);
+			Utils.i18nToNode(Globals.$doc, true);
 
 			Globals.langChangeTrigger(!Globals.langChangeTrigger());
 		}
@@ -1618,8 +1626,9 @@
 			.replace(/>/g, '&gt;').replace(/</g, '&lt;')
 			.replace(/~~~blockquote~~~[\s]*/g, '<blockquote>')
 			.replace(/[\s]*~~~\/blockquote~~~/g, '</blockquote>')
-//			.replace(/[\-_~]{10,}/g, '<hr />')
-			.replace(/\n/g, '<br />');
+			.replace(/ /g, '&nbsp;')
+			.replace(/\n/g, '<br />')
+		;
 
 		return bFindEmailAndLinks ? Utils.findEmailAndLinks(sPlain) : sPlain;
 	};
@@ -2015,7 +2024,8 @@
 	};
 
 	/**
-	 * @param {Object} oObject
+	 * @param {mixed} mPropOrValue
+	 * @param {mixed} mValue
 	 */
 	Utils.disposeOne = function (mPropOrValue, mValue)
 	{

dev/Component/AbstracCheckbox.js

@@ -0,0 +1,66 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		Utils = require('Common/Utils'),
+
+		AbstractComponent = require('Component/Abstract')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractComponent
+	 */
+	function AbstracCheckbox(oParams) {
+
+		AbstractComponent.call(this);
+
+		this.value = oParams.value;
+		if (Utils.isUnd(this.value) || !this.value.subscribe)
+		{
+			this.value = ko.observable(Utils.isUnd(this.value) ? false : !!this.value);
+		}
+
+		this.enable = oParams.enable;
+		if (Utils.isUnd(this.enable) || !this.enable.subscribe)
+		{
+			this.enable = ko.observable(Utils.isUnd(this.enable) ? true : !!this.enable);
+		}
+
+		this.disable = oParams.disable;
+		if (Utils.isUnd(this.disable) || !this.disable.subscribe)
+		{
+			this.disable = ko.observable(Utils.isUnd(this.disable) ? false : !!this.disable);
+		}
+
+		this.label = oParams.label || '';
+		this.inline = Utils.isUnd(oParams.inline) ? false : oParams.inline;
+
+		this.readOnly = Utils.isUnd(oParams.readOnly) ? false : !!oParams.readOnly;
+		this.inverted = Utils.isUnd(oParams.inverted) ? false : !!oParams.inverted;
+
+		this.labeled = !Utils.isUnd(oParams.label);
+	};
+
+	_.extend(AbstracCheckbox.prototype, AbstractComponent.prototype);
+
+	AbstracCheckbox.prototype.click = function() {
+		if (!this.readOnly && this.enable() && !this.disable())
+		{
+			this.value(!this.value());
+		}
+	};
+
+	AbstracCheckbox.componentExportHelper = AbstractComponent.componentExportHelper;
+
+	module.exports = AbstracCheckbox;
+
+}());

dev/Component/AbstracRadio.js

@@ -0,0 +1,65 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		Utils = require('Common/Utils'),
+
+		AbstractComponent = require('Component/Abstract')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractComponent
+	 */
+	function AbstracRadio(oParams) {
+
+		AbstractComponent.call(this);
+
+		this.values = ko.observableArray([]);
+
+		this.value = oParams.value;
+		if (Utils.isUnd(this.value) || !this.value.subscribe)
+		{
+			this.value = ko.observable('');
+		}
+
+		this.inline = Utils.isUnd(oParams.inline) ? false : oParams.inline;
+		this.readOnly = Utils.isUnd(oParams.readOnly) ? false : !!oParams.readOnly;
+
+		if (oParams.values)
+		{
+			var aValues = _.map(oParams.values, function (sLabel, sValue) {
+				return {
+					'label': sLabel,
+					'value': sValue
+				};
+			});
+
+			this.values(aValues);
+		}
+
+		this.click = _.bind(this.click, this);
+	};
+
+	AbstracRadio.prototype.click = function(oValue) {
+		if (!this.readOnly && oValue)
+		{
+			this.value(oValue.value);
+		}
+	};
+
+	_.extend(AbstracRadio.prototype, AbstractComponent.prototype);
+
+	AbstracRadio.componentExportHelper = AbstractComponent.componentExportHelper;
+
+	module.exports = AbstracRadio;
+
+}());

dev/Component/AbstractInput.js

@@ -10,7 +10,7 @@
 		Enums = require('Common/Enums'),
 		Utils = require('Common/Utils'),
 
-		AbstractComponent = require('Components/Abstract')
+		AbstractComponent = require('Component/Abstract')
 	;
 
 	/**
@@ -29,6 +29,7 @@
 		this.label = oParams.label || '';
 		this.enable = oParams.enable || true;
 		this.trigger = oParams.trigger && oParams.trigger.subscribe ? oParams.trigger : null;
+		this.placeholder = oParams.placeholder || '';
 
 		this.labeled = !Utils.isUnd(oParams.label);
 		this.triggered = !Utils.isUnd(oParams.trigger) && !!this.trigger;

dev/Component/Checkbox.js

@@ -0,0 +1,29 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		AbstracCheckbox = require('Component/AbstracCheckbox')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstracCheckbox
+	 */
+	function CheckboxComponent(oParams) {
+
+		AbstracCheckbox.call(this, oParams);
+	};
+
+	_.extend(CheckboxComponent.prototype, AbstracCheckbox.prototype);
+
+	module.exports = AbstracCheckbox.componentExportHelper(
+		CheckboxComponent, 'CheckboxComponent');
+
+}());

dev/Component/Input.js

@@ -9,7 +9,7 @@
 		Enums = require('Common/Enums'),
 		Utils = require('Common/Utils'),
 
-		AbstractInput = require('Components/AbstractInput')
+		AbstractInput = require('Component/AbstractInput')
 	;
 
 	/**
@@ -22,24 +22,6 @@
 	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);

dev/Component/MaterialDesign/Checkbox.js

@@ -0,0 +1,66 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		AbstracCheckbox = require('Component/AbstracCheckbox')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstracCheckbox
+	 */
+	function CheckboxMaterialDesignComponent(oParams) {
+
+		AbstracCheckbox.call(this, oParams);
+
+		this.animationBox = ko.observable(false).extend({'falseTimeout': 200});
+		this.animationCheckmark = ko.observable(false).extend({'falseTimeout': 200});
+
+		this.animationBoxSetTrue = _.bind(this.animationBoxSetTrue, this);
+		this.animationCheckmarkSetTrue = _.bind(this.animationCheckmarkSetTrue, this);
+
+		this.disposable.push(
+			this.value.subscribe(function (bValue) {
+				this.triggerAnimation(bValue);
+			}, this)
+		);
+	};
+
+	_.extend(CheckboxMaterialDesignComponent.prototype, AbstracCheckbox.prototype);
+
+	CheckboxMaterialDesignComponent.prototype.animationBoxSetTrue = function()
+	{
+		this.animationBox(true);
+	};
+
+	CheckboxMaterialDesignComponent.prototype.animationCheckmarkSetTrue = function()
+	{
+		this.animationCheckmark(true);
+	};
+
+	CheckboxMaterialDesignComponent.prototype.triggerAnimation = function(bBox)
+	{
+		if (bBox)
+		{
+			this.animationBoxSetTrue();
+			_.delay(this.animationCheckmarkSetTrue, 200);
+		}
+		else
+		{
+			this.animationCheckmarkSetTrue();
+			_.delay(this.animationBoxSetTrue, 200);
+		}
+	};
+
+	module.exports = AbstracCheckbox.componentExportHelper(
+		CheckboxMaterialDesignComponent, 'CheckboxMaterialDesignComponent');
+
+}());

dev/Component/Radio.js

@@ -0,0 +1,29 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		AbstracRadio = require('Component/AbstracRadio')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstracRadio
+	 */
+	function RadioComponent(oParams) {
+
+		AbstracRadio.call(this, oParams);
+	};
+
+	_.extend(RadioComponent.prototype, AbstracRadio.prototype);
+
+	module.exports = AbstracRadio.componentExportHelper(
+		RadioComponent, 'RadioComponent');
+
+}());

dev/Component/SaveTrigger.js

@@ -9,7 +9,7 @@
 		Enums = require('Common/Enums'),
 		Utils = require('Common/Utils'),
 
-		AbstractComponent = require('Components/Abstract')
+		AbstractComponent = require('Component/Abstract')
 	;
 
 	/**
@@ -36,7 +36,7 @@
 				{
 					this.element.css('vertical-align', oParams.verticalAlign);
 				}
-				
+
 				this.setState(this.value());
 
 				this.disposable.push(

dev/Component/Select.js

@@ -6,10 +6,9 @@
 	var
 		_ = require('_'),
 
-		Enums = require('Common/Enums'),
 		Utils = require('Common/Utils'),
 
-		AbstractInput = require('Components/AbstractInput')
+		AbstractInput = require('Component/AbstractInput')
 	;
 
 	/**
@@ -27,6 +26,8 @@
 
 		this.optionsText = oParams.optionsText || null;
 		this.optionsValue = oParams.optionsValue || null;
+
+		this.defautOptionsAfterRender = Utils.defautOptionsAfterRender;
 	};
 
 	_.extend(SelectComponent.prototype, AbstractInput.prototype);

dev/Component/TextArea.js

@@ -6,10 +6,9 @@
 	var
 		_ = require('_'),
 
-		Enums = require('Common/Enums'),
 		Utils = require('Common/Utils'),
 
-		AbstractInput = require('Components/AbstractInput')
+		AbstractInput = require('Component/AbstractInput')
 	;
 
 	/**
@@ -24,6 +23,7 @@
 		AbstractInput.call(this, oParams);
 
 		this.rows = oParams.rows || 5;
+		this.spellcheck = Utils.isUnd(oParams.spellcheck) ? false : !!oParams.spellcheck;
 	};
 
 	_.extend(TextAreaComponent.prototype, AbstractInput.prototype);

dev/Components/Checkbox.js

@@ -1,38 +0,0 @@
-
-(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/Settings/Admin/Login.js

@@ -26,6 +26,8 @@
 
 		this.allowLanguagesOnLogin = Data.allowLanguagesOnLogin;
 		this.defaultDomainTrigger = ko.observable(Enums.SaveSettingsStep.Idle);
+
+		this.dummy = ko.observable(false);
 	}
 
 	LoginAdminSetting.prototype.onBuild = function ()

dev/Styles/@Main.less

@@ -52,6 +52,7 @@
 @import "Main.less";
 @import "Layout.less";
 @import "Scroll.less";
+@import "Components.less";
 @import "SystemDropDown.less";
 @import "Login.less";
 @import "Ask.less";

dev/Styles/Components.less

@@ -0,0 +1,145 @@
+
+.checkbox-box-sizes() {
+	top: 0px;
+	left: 0px;
+	width: 18px;
+	height: 18px;
+	border: solid 2px #999;
+
+	transform: rotate(0deg);
+}
+
+.checkbox-mark-sizes() {
+/*	top: -4px;
+	left: 6px;
+	width: 10px;
+	height: 21px;*/
+
+	top: -1px;
+	left: 5px;
+	width: 10px;
+	height: 18px;
+
+	border-right-width: 2px;
+	border-bottom-width: 2px;
+
+	transform: rotate(45deg);
+}
+
+.checkbox-result-sizes() {
+	top: 13px;
+	left: 5px;
+	width: 4px;
+	height: 4px;
+
+	transform: rotate(45deg);
+}
+
+.e-component {
+
+	&.e-checkbox {
+
+		cursor: pointer;
+
+		&.disabled {
+			cursor: default;
+			color: #999;
+		}
+	}
+
+	&.e-radio {
+
+		cursor: pointer;
+
+		&.disabled {
+			cursor: default;
+			color: #999;
+		}
+	}
+}
+
+.e-component.material-design {
+
+	&.e-checkbox {
+
+		.sub-checkbox-container {
+			display: inline-block;
+			position: relative;
+			transform: translateZ(0);
+			width: 18px;
+			height: 18px;
+			vertical-align: bottom;
+			margin-bottom: 3px;
+			margin-top: 1px;
+		}
+
+		.sub-label {
+			padding-left: 8px;
+		}
+
+		.sub-checkbox {
+			position: absolute;
+			box-sizing: border-box;
+
+			.checkbox-box-sizes();
+		}
+
+		&.disabled .sub-checkbox {
+			cursor: default;
+			color: #aaa;
+		}
+
+		.sub-checkbox.checked {
+			border-top: none;
+			border-left: none;
+			border-color: #0F9D58;
+
+			.checkbox-mark-sizes();
+		}
+
+		// animation
+		.sub-checkbox.checked {
+			&.box {
+				border: solid 2px;
+				animation: box-shrink 140ms ease-out forwards;
+			}
+			&.checkmark {
+				border-left: none;
+				border-top: none;
+				animation: checkmark-expand 140ms ease-out forwards;
+			}
+		}
+
+		.sub-checkbox.unchecked {
+			&.box {
+				animation: box-expand 140ms ease-out forwards;
+			}
+			&.checkmark {
+				border-left: none;
+				border-top: none;
+				transform: rotate(45deg);
+				animation: checkmark-shrink 140ms ease-out forwards;
+			}
+		}
+	}
+}
+
+@keyframes box-shrink {
+	0% { .checkbox-box-sizes(); }
+	100% { .checkbox-result-sizes(); }
+}
+
+@keyframes checkmark-expand {
+	0% { .checkbox-result-sizes(); }
+	100% { .checkbox-mark-sizes(); }
+}
+
+@keyframes checkmark-shrink {
+	0% { .checkbox-mark-sizes(); }
+	100% { .checkbox-result-sizes(); }
+}
+
+@keyframes box-expand {
+	0% { .checkbox-result-sizes(); }
+	100% { .checkbox-box-sizes(); }
+}