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: '; state.errorPrefix = 'Invalid JSON: ';
parseJSONValue(state); parseJSONValue(state);
state.errorPrefix = ''; 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) { if (Array.isArray(state.value) && state.value.length) {
result.default = state.value.shift(); 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 { } else {
// not a range, fallback to text // not a range, fallback to text
result.type = 'text'; result.type = 'text';
@ -572,6 +577,9 @@ var usercss = (() => {
// TODO: handle customized image // TODO: handle customized image
return va.options.find(o => o.name === va[prop]).value; 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]; 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; 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() { function buildConfigForm() {
let resetter = let resetter =
$create('a.config-reset-icon', {href: '#'}, [ $create('a.config-reset-icon', {href: '#'}, [
@ -266,24 +287,8 @@ function configDialog(style) {
oninput: updateVarOnInput, oninput: updateVarOnInput,
onfocus: selectAllOnFocus, onfocus: selectAllOnFocus,
}; };
const dataset = {};
if (va.type === 'range' || va.type === 'number') { if (va.type === 'range' || va.type === 'number') {
children = va.type === 'range' ? [$create('span.current-value', {textContent: va.value})] : []; children = handleRangeAndNumberInputs(va, options);
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),
])
);
} else { } else {
children = [ children = [
va.input = $create('input.config-value', options), 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); this.value = this.va.value = clampValue(this.value, this.va.range);
} }
if (this.type === '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')); const span = $('.current-value', va.input.closest('.config-range'));
va.input.value = value; va.input.value = value;
if (span) { if (span) {
span.textContent = value; span.textContent = value + (va.units || '');
} }
} else { } else {
va.input.value = value; va.input.value = value;