Added knockoutjs components (step 1)

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');
+
+}());