Added knockoutjs components

Added material design checkbox component
Added lang changing animation

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/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/Component/AbstractInput.js

@@ -0,0 +1,90 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+		ko = require('ko'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractComponent = require('Component/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.placeholder = oParams.placeholder || '';
+
+		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/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

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

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

@@ -0,0 +1,94 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		Enums = require('Common/Enums'),
+		Utils = require('Common/Utils'),
+
+		AbstractComponent = require('Component/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/Component/Select.js

@@ -0,0 +1,38 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		Utils = require('Common/Utils'),
+
+		AbstractInput = require('Component/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;
+
+		this.defautOptionsAfterRender = Utils.defautOptionsAfterRender;
+	};
+
+	_.extend(SelectComponent.prototype, AbstractInput.prototype);
+
+	module.exports = AbstractInput.componentExportHelper(
+		SelectComponent, 'SelectComponent');
+
+}());

dev/Component/TextArea.js

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