open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Include units in number & range variable

Browse Source
This commit is contained in:
Rob Garrison 2018-09-08 09:34:13 -05:00
parent 1a8d628be5
commit f6998de6ec
2 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/usercss.js
View File

@ -222,10 +222,15 @@ var usercss = (() => {
state.errorPrefix = 'Invalid JSON: ';
parseJSONValue(state);
state.errorPrefix = '';
// [default, start, end, step] (start, end & step are optional)
// [default, start, end, step, units] (start, end, step & units are optional)
if (Array.isArray(state.value) && state.value.length) {
result.default = state.value.shift();
result.range = state.value;
const nonDigit = /[^\d.+-]/;
// label may be placed anywhere after default value
const labelIndex = state.value.findIndex(item => nonDigit.test(item));
// but should not contain any numbers '4px' => 'px'
result.units = labelIndex < 0 ? '' : state.value.splice(labelIndex, 1)[0].toString().replace(/[\d.+-]/g, '');
result.range = state.value.filter(item => !nonDigit.test(item));
} else {
// not a range, fallback to text
result.type = 'text';
@ -572,6 +577,9 @@ var usercss = (() => {
// TODO: handle customized image
return va.options.find(o => o.name === va[prop]).value;
}
if ((va.type === 'number' || va.type === 'range') && va.units) {
return va[prop] + va.units;
}
return va[prop];
}

43
manage/config-dialog.js
View File

@ -201,6 +201,27 @@ function configDialog(style) {
return va.value === null || va.value === undefined || va.value === va.default;
}
function handleRangeAndNumberInputs(va, options) {
const dataset = {};
options.value = va.default;
if (typeof va.range[0] !== 'undefined') {
options.min = dataset.min = va.range[0];
}
if (typeof va.range[1] !== 'undefined') {
options.max = dataset.max = va.range[1];
}
if (va.range[2]) {
options.step = va.range[2];
}
const children = va.type === 'range' ? [$create('span.current-value', {textContent: va.value + va.units})] : [];
children.push(
$create(`span.current-${va.type}`, {dataset}, [
va.input = $create('input.config-value', options),
])
);
return children;
}
function buildConfigForm() {
let resetter =
$create('a.config-reset-icon', {href: '#'}, [
@ -266,24 +287,8 @@ function configDialog(style) {
oninput: updateVarOnInput,
onfocus: selectAllOnFocus,
};
const dataset = {};
if (va.type === 'range' || va.type === 'number') {
children = va.type === 'range' ? [$create('span.current-value', {textContent: va.value})] : [];
options.value = va.default;
if (typeof va.range[0] !== 'undefined') {
options.min = dataset.min = va.range[0];
}
if (typeof va.range[1] !== 'undefined') {
options.max = dataset.max = va.range[1];
}
if (va.range[2]) {
options.step = va.range[2];
}
children.push(
$create('span.current-range', {dataset}, [
va.input = $create('input.config-value', options),
])
);
children = handleRangeAndNumberInputs(va, options);
} else {
children = [
va.input = $create('input.config-value', options),
@ -314,7 +319,7 @@ function configDialog(style) {
this.value = this.va.value = clampValue(this.value, this.va.range);
}
if (this.type === 'range') {
$('.current-value', this.closest('.config-range')).textContent = this.va.value;
$('.current-value', this.closest('.config-range')).textContent = this.va.value + (this.va.units || '');
}
}
@ -356,7 +361,7 @@ function configDialog(style) {
const span = $('.current-value', va.input.closest('.config-range'));
va.input.value = value;
if (span) {
span.textContent = value;
span.textContent = value + (va.units || '');
}
} else {
va.input.value = value;