From 3eecfd4b96f970d3227e1bad48b98ca9bc4a46f9 Mon Sep 17 00:00:00 2001 From: coderaiser Date: Wed, 17 Jun 2015 05:12:42 -0400 Subject: [PATCH] feature(input) add --- lib/client/config.js | 141 ++++++++----------------------------------- lib/client/input.js | 123 +++++++++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 115 deletions(-) create mode 100644 lib/client/input.js diff --git a/lib/client/config.js b/lib/client/config.js index 9f19efaa..7c8a9a9b 100644 --- a/lib/client/config.js +++ b/lib/client/config.js @@ -4,6 +4,7 @@ var CloudCmd, Util, DOM, io; 'use strict'; /* global rendy */ + /* global input */ CloudCmd.Config = ConfigProto; @@ -16,24 +17,9 @@ var CloudCmd, Util, DOM, io; Images.show.load('top'); }, Element, - CONFIG, Template, Notify = DOM.Notify, - Config = this, - - getByData = function(selector) { - var el = DOM.getByDataName('js-' + selector, Element); - - return el; - }, - - getName = function(element) { - var name = element - .getAttribute('data-name') - .replace(/^js-/, ''); - - return name; - }; + Config = this; function init() { Loading = true; @@ -104,7 +90,10 @@ var CloudCmd, Util, DOM, io; exec = Util.exec, funcs = [ exec.with(DOM.Files.get, 'config-tmpl'), - exec.with(DOM.load.css, prefix + '/css/config.css') + exec.with(DOM.load.parallel, [ + prefix + '/css/config.css', + prefix + '/lib/client/input.js' + ]) ]; if (!Loading) { @@ -118,18 +107,19 @@ var CloudCmd, Util, DOM, io; Template = template; DOM.Files.get('config', function(error, config) { - var div, data, inputs, inputFirst, + var data, inputs, inputFirst, focus, obj; - CONFIG = config; - obj = Util.copyObj(CONFIG); - changeConfig(obj); + if (error) + return DOM.Dialog.alert('Could not load config!'); + + obj = input.convert(config); obj[obj.editor + '-selected'] = 'selected'; delete obj.editor; data = rendy(Template, obj); - div = DOM.load({ + Element = DOM.load({ name : 'div', className : 'config', inner : data, @@ -138,9 +128,7 @@ var CloudCmd, Util, DOM, io; } }); - Element = div; - - inputs = document.querySelectorAll('input, select', div); + inputs = document.querySelectorAll('input, select', Element); inputFirst = inputs[0]; if (inputFirst) { @@ -158,7 +146,7 @@ var CloudCmd, Util, DOM, io; }); }); - CloudCmd.View.show(div, { + CloudCmd.View.show(Element, { autoSize: true, afterShow: focus }); @@ -169,54 +157,15 @@ var CloudCmd, Util, DOM, io; CloudCmd.View.hide(); }; - function changeConfig(config) { - var array = Object.keys(config); - - mapCondition(array, function(name) { - var type = typeof config[name], - is = type === 'boolean'; - - return is; - }).forEach(function(name) { - var item = config[name]; - - config[name] = setState(item); - }); - } - - function mapCondition(array, fn) { - var result = []; - - array.forEach(function(item) { - var is = fn(item); - - if (is) - result.push(item); - }); - - return result; - } - - function setState(state) { - var ret = ''; - - if (state) - ret = ' checked'; - - return ret; - } - function onChange(el) { - var data, - obj = {}, - name = getName(el), + var obj = {}, + name = input.getName(el), + data = input.getValue(name, Element), type = el.type; - data = getValue(el); - if (type === 'checkbox') if (/^(diff|buffer|dirStorage)$/.test(name)) - onLSChange(el); + onLSChange(name, data); else if (name === 'localStorage') onLocalStorageChange(); else if (name === 'auth') @@ -236,8 +185,7 @@ var CloudCmd, Util, DOM, io; Object.keys(obj).forEach(function(name) { var data = obj[name]; - CONFIG[name] = data; - setValue(name, data); + input.setValue(name, data, Element); }); DOM.Storage.setAllowed(obj.localStorage); @@ -251,44 +199,10 @@ var CloudCmd, Util, DOM, io; }); } - function getValue(el) { - var data, - type = el.type; - - switch(type) { - case 'checkbox': - data = el.checked; - break; - case 'number': - data = Number(el.value); - break; - default: - data = el.value; - break; - } - - return data; - } - - function setValue(name, value) { - var el = getByData(name), - type = el.type; - - switch(type) { - case 'checkbox': - el.checked = value; - break; - - default: - el.value = value; - break; - } - } - function onLocalStorageChange() { var names = ['diff', 'buffer', 'dirStorage', 'localStorage'], elements = names.map(function(name) { - return getByData(name); + return input.getElementByName(name, Element); }), el = {}, @@ -296,7 +210,7 @@ var CloudCmd, Util, DOM, io; isChecked; elements.forEach(function(element) { - var name = getName(element); + var name = input.getName(element); el[name] = element; @@ -319,23 +233,20 @@ var CloudCmd, Util, DOM, io; } } - function onLSChange(el) { - var elLocalStorage = getByData('localStorage'), - name = el - .getAttribute('data-name') - .replace(/^js-/, ''), + function onLSChange(name, data) { + var elLocalStorage = input.getElementByName('localStorage', Element), msg = name + ' depends on localStorage'; - if (el.checked && !elLocalStorage.checked) { + if (data && !elLocalStorage.checked) { alert(msg); elLocalStorage.checked = true; } } function onAuthChange(checked) { - var elUsername = getByData('username'), - elPassword = getByData('password'); + var elUsername = input.getElementByName('username', Element), + elPassword = input.getElementByName('password', Element); elUsername.disabled = elPassword.disabled = !checked; diff --git a/lib/client/input.js b/lib/client/input.js new file mode 100644 index 00000000..27935a70 --- /dev/null +++ b/lib/client/input.js @@ -0,0 +1,123 @@ +(function(global) { + 'use strict'; + + if (typeof module !== 'undefined' && module.exports) + module.exports = InputProto(); + else + global.input = InputProto(); + + function InputProto() { + if (!(this instanceof InputProto)) + return new InputProto(); + + this.setValue = setValue; + this.getValue = getValue; + this.convert = convert; + this.getName = getName; + this.getElementByName = getElementByName; + + function getElementByName(selector, element) { + var el = element.querySelector('[data-name="js-' + selector + '"]'); + + return el; + } + + function getName(element) { + var name = element + .getAttribute('data-name') + .replace(/^js-/, ''); + + return name; + } + + function convert(config) { + var result = clone(config), + array = Object.keys(result), + isBool = isType.bind(null, result, 'boolean'); + + mapCondition(array, isBool) + .forEach(function(name) { + var item = result[name]; + + result[name] = setState(item); + }); + + return result; + } + + function clone(object) { + var result = {}; + + Object.keys(object).forEach(function(name) { + result[name] = object[name]; + }); + + return result; + } + + function isType(object, type, name) { + var current = typeof object[name], + is = current === type; + + return is; + } + + function mapCondition(array, fn) { + var result = []; + + array.forEach(function(item) { + var is = fn(item); + + if (is) + result.push(item); + }); + + return result; + } + + function setState(state) { + var ret = ''; + + if (state) + ret = ' checked'; + + return ret; + } + + function getValue(name, element) { + var data, + el = getElementByName(name, element), + type = el.type; + + switch(type) { + case 'checkbox': + data = el.checked; + break; + case 'number': + data = Number(el.value); + break; + default: + data = el.value; + break; + } + + return data; + } + + function setValue(name, value, element) { + var el = getElementByName(name, element), + type = el.type; + + switch(type) { + case 'checkbox': + el.checked = value; + break; + + default: + el.value = value; + break; + } + } + } + +})(window);