Add: key:label syntax in var select

This commit is contained in:
eight 2017-11-04 08:38:17 +08:00
parent 2b17c07cd6
commit 5a9f78e2ac
2 changed files with 31 additions and 12 deletions

View File

@ -160,17 +160,13 @@ var usercss = (() => {
} else if (state.type === 'select' || (state.type === 'image' && state.key === 'var')) { } else if (state.type === 'select' || (state.type === 'image' && state.key === 'var')) {
parseJSONValue(state); parseJSONValue(state);
if (Array.isArray(state.value)) { if (Array.isArray(state.value)) {
result.options = state.value.map(text => ({ result.options = state.value.map(text => createOption(text));
label: text,
value: text
}));
} else { } else {
result.options = Object.keys(state.value).map(k => ({ result.options = Object.keys(state.value).map(k =>
label: k, createOption(k, state.value[k])
value: state.value[k] );
}));
} }
result.default = result.options[0].value; result.default = result.options[0].name;
} else if (state.type === 'dropdown' || state.type === 'image') { } else if (state.type === 'dropdown' || state.type === 'image') {
if (state.text[state.re.lastIndex] !== '{') { if (state.text[state.re.lastIndex] !== '{') {
throw new Error('no open {'); throw new Error('no open {');
@ -206,6 +202,21 @@ var usercss = (() => {
state.usercssData.vars[result.name] = result; state.usercssData.vars[result.name] = result;
} }
function createOption(label, value) {
let name;
const match = label.match(/^(\w+):(.*)/);
if (match) {
([, name, label] = match);
}
if (!name) {
name = label;
}
if (!value) {
value = name;
}
return {name, label, value};
}
function parseEOT(state) { function parseEOT(state) {
const match = state.text.slice(state.re.lastIndex).match(/^<<<EOT([\s\S]+?)EOT;/); const match = state.text.slice(state.re.lastIndex).match(/^<<<EOT([\s\S]+?)EOT;/);
if (!match) { if (!match) {
@ -434,12 +445,20 @@ var usercss = (() => {
const va = vars[key]; const va = vars[key];
output[key] = Object.assign({}, va, { output[key] = Object.assign({}, va, {
value: va.value === null || va.value === undefined ? value: va.value === null || va.value === undefined ?
va.default : va.value, getVarValue(va, 'default') : getVarValue(va, 'value')
}); });
return output; return output;
}, {}); }, {});
} }
function getVarValue(va, prop) {
if (va.type === 'select' || va.type === 'dropdown' || va.type === 'image') {
// TODO: handle customized image
return va.options.find(o => o.name === va[prop]).value;
}
return va[prop];
}
function validate(style) { function validate(style) {
const {usercssData: data} = style; const {usercssData: data} = style;
// mandatory fields // mandatory fields
@ -473,7 +492,7 @@ var usercss = (() => {
function validVar(va, value = 'default') { function validVar(va, value = 'default') {
if (va.type === 'select' || va.type === 'dropdown') { if (va.type === 'select' || va.type === 'dropdown') {
if (va.options.every(o => o.value !== va[value])) { if (va.options.every(o => o.name !== va[value])) {
throw new Error(chrome.i18n.getMessage('styleMetaErrorSelectValueMismatch')); throw new Error(chrome.i18n.getMessage('styleMetaErrorSelectValueMismatch'));
} }
} else if (va.type === 'checkbox' && !/^[01]$/.test(va[value])) { } else if (va.type === 'checkbox' && !/^[01]$/.test(va[value])) {

View File

@ -79,7 +79,7 @@ function configDialog(style) {
va.input = $element({ va.input = $element({
tag: 'select', tag: 'select',
appendChild: va.options.map(o => $element({ appendChild: va.options.map(o => $element({
tag: 'option', value: o.value, textContent: o.label tag: 'option', value: o.name, textContent: o.label
})) }))
}); });
va.input.onchange = () => { va.input.onchange = () => {