Add: key:label syntax in var select
This commit is contained in:
parent
2b17c07cd6
commit
5a9f78e2ac
|
@ -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])) {
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user