improve range control number input action

This commit is contained in:
zombieFox 2021-08-18 19:40:00 +01:00
parent a62ba64e5e
commit c62bdbe44a
3 changed files with 75 additions and 23 deletions

View File

@ -61,11 +61,11 @@ export const Control_slider = function({
};
if (action) { action(); };
if (sliderAction) { sliderAction(); };
this.number.value = get({ object: object, path: path });
if (action) { action(); };
this.updateNumber();
},
focusFunc: focusAction,
@ -95,11 +95,13 @@ export const Control_slider = function({
};
if (action) { action(); };
if (numberAction) { numberAction(); };
this.update({ delay: true });
if (action) { this.action({ delay: true }) };
this.updateRange();
this.updateNumber({ delay: true });
}
});
@ -117,32 +119,82 @@ export const Control_slider = function({
value: JSON.parse(JSON.stringify(defaultValue))
});
this.update();
if (action) { action(); };
if (resetAction) { resetAction(); };
this.update();
}
});
this.delayedAction = null;
this.action = ({
delay = false
} = {}) => {
const delayedAction = () => {
action();
};
if (delay) {
clearTimeout(this.delayedAction);
this.delayedAction = setTimeout(delayedAction, 2000);
} else {
this.delayedAction = null;
delayedAction();
};
};
this.delayedUpdateRange = null;
this.delayedUpdateNumber = null;
this.updateRange = ({
delay = false
} = {}) => {
const updateControl = () => {
this.range.value = get({ object: object, path: path });
};
if (delay) {
clearTimeout(this.delayedUpdateRange);
this.delayedUpdateRange = setTimeout(updateControl, 2000);
} else {
this.delayedUpdateRange = null;
updateControl();
};
};
this.updateNumber = ({
delay = false
} = {}) => {
const updateControl = () => {
this.number.value = get({ object: object, path: path });
};
if (delay) {
clearTimeout(this.delayedUpdateNumber);
this.delayedUpdateNumber = setTimeout(updateControl, 2000);
} else {
this.delayedUpdateNumber = null;
updateControl();
};
};
this.update = ({
delay = false
} = {}) => {
let delayedUpdate = null;
this.updateRange({ delay: delay });
const updateControl = () => {
this.range.value = get({ object: object, path: path });
this.number.value = get({ object: object, path: path });
};
if (delay) {
clearTimeout(delayedUpdate);
delayedUpdate = setTimeout(updateControl, 2000);
} else {
updateControl();
};
this.updateNumber({ delay: delay });
};

View File

@ -85,7 +85,7 @@ export const Control_sliderDouble = function({
set({ object: state.get.current(), path: right.path, value: get({ object: state.get.current(), path: left.path }) + 10 })
};
this.range.left.update();
this.range.left.updateRange();
this.range.right.update();
@ -125,7 +125,7 @@ export const Control_sliderDouble = function({
this.range.left.update();
this.range.right.update();
this.range.right.updateRange();
if (right.action) {
right.action();

View File

@ -18,7 +18,7 @@ const menu = {};
menu.navData = [
// { name: 'Form', active: true, overscroll: true, sub: ['Input', 'Button'] },
// { name: 'Debug', active: true, overscroll: true, sub: ['Bookmark'] },
{ name: 'Theme', active: true, overscroll: true, sub: ['Preset', 'Saved', 'Style', 'Accent', 'Colour', 'Font', 'Radius', 'Shadow', 'Shade', 'Opacity', 'Background', 'Layout', 'Header', 'Bookmark'] },
{ name: 'Theme', active: true, overscroll: true, sub: ['Preset', 'Saved', 'Style', 'Colour', 'Accent', 'Font', 'Radius', 'Shadow', 'Shade', 'Opacity', 'Background', 'Layout', 'Header', 'Bookmark'] },
{ name: 'Layout', active: false, overscroll: true, sub: ['Scaling', 'Area', 'Padding', 'Gutter', 'Alignment', 'Page'] },
{ name: 'Header', active: false, overscroll: true, sub: ['Area', 'Greeting', 'Transitional words', 'Clock', 'Date', 'Search'] },
{ name: 'Bookmark', active: false, overscroll: true, sub: ['General', 'Style', 'Orientation', 'Sort'] },