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

Change range settings to [default, min, max, step]

Browse Source
This commit is contained in:
Rob Garrison 2018-09-06 00:20:19 -05:00
parent 1dc24fac1b
commit d9c748d92f
3 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/usercss.js
View File

@ -221,10 +221,10 @@ var usercss = (() => {
state.errorPrefix = 'Invalid JSON: ';
parseJSONValue(state);
state.errorPrefix = '';
// [ start, end, step, default ]
if (Array.isArray(state.value) && state.value.length === 4) {
// [default, start, end, step] (start, end & step are optional)
if (Array.isArray(state.value) && state.value.length) {
result.default = state.value.shift();
result.range = state.value;
result.default = state.value[3];
} else {
// not a range, fallback to text
result.type = 'text';

23
manage/config-dialog.css
View File

@ -94,11 +94,30 @@
flex-shrink: 0;
}
.config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child),
.current-value {
.config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
margin-right: 4px;
}
.current-value {
outline: 1px solid rgba(128, 128, 128, 0.5);
padding: 2px 4px;
margin-right: 4px;
}
.config-range span {
line-height: 22px;
}
.current-range:before {
content: attr(data-min);
padding-right: .25em;
}
.current-range:after {
content: attr(data-max);
padding-left: .25em;
}
.config-body label:not(.nondefault) .config-reset-icon {
visibility: hidden;
}

19
manage/config-dialog.js
View File

@ -266,14 +266,23 @@ function configDialog(style) {
oninput: updateVarOnInput,
onfocus: selectAllOnFocus,
};
const dataset = {};
if (va.type === 'range') {
options.min = va.range[0];
options.max = va.range[1];
options.step = va.range[2];
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 = [
$create('span.current-value', {textContent: va.value}),
$create('span.current-range', {dataset}, [
va.input = $create('input.config-value', options),
])
];
} else {
children = [
@ -302,7 +311,7 @@ function configDialog(style) {
function updateVarOnChange() {
this.va.value = this.type !== 'checkbox' ? this.value : this.checked ? '1' : '0';
if (this.type === 'range') {
$('.current-value', this.parentNode).textContent = this.va.value;
$('.current-value', this.closest('.config-range')).textContent = this.va.value;
}
}
@ -329,7 +338,7 @@ function configDialog(style) {
} else if (va.type === 'checkbox') {
va.input.checked = Number(value);
} else if (va.type === 'range') {
const span = $('.current-value', va.input.parentNode);
const span = $('.current-value', va.input.closest('.config-range'));
va.input.value = value;
if (span) {
span.textContent = value;