mirror of
https://github.com/coderaiser/cloudcmd.git
synced 2026-01-23 18:55:26 +00:00
feature(input) add
This commit is contained in:
coderaiser
parent
4b5110bb51
commit
3eecfd4b96
2 changed files with 149 additions and 115 deletions
|
|
@ -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;
|
||||
|
|
|
|||
123
lib/client/input.js
Normal file
123
lib/client/input.js
Normal file
|
|
@ -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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue