mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-19 01:05:13 +02:00
long press support for mobile touch release sliders
This commit is contained in:
anapnoe
GitHub
+85
-39
@@ -1073,16 +1073,19 @@ onUiUpdate(function(){
|
||||
|
||||
|
||||
// input release component dispatcher
|
||||
let cached_clone_range;
|
||||
let cached_clone_num;
|
||||
let active_clone_input = [];
|
||||
let focus_input;
|
||||
|
||||
function ui_input_release_component(elem){
|
||||
|
||||
//console.log("ok");
|
||||
if(active_clone_input.length > 0) return;
|
||||
|
||||
//img2img_width
|
||||
let parent = elem.parentElement;
|
||||
let comp_parent = parent.parentElement.parentElement;
|
||||
let comp_parent = parent.parentElement.parentElement;
|
||||
|
||||
if( comp_parent.id == "img2img_width" ||
|
||||
comp_parent.id == "img2img_height" ||
|
||||
comp_parent.id == "img2img_scale" ||
|
||||
@@ -1106,9 +1109,12 @@ onUiUpdate(function(){
|
||||
updateInput(elem);
|
||||
})
|
||||
|
||||
clone_num.addEventListener('focus', function (e) {
|
||||
focus_input = clone_num;
|
||||
})
|
||||
//clone_num.addEventListener('focus', function (e) {
|
||||
// focus_input = clone_num;
|
||||
//})
|
||||
|
||||
cached_clone_num = clone_num;
|
||||
cached_clone_range = false;
|
||||
|
||||
if(label){
|
||||
let comp_range = comp_parent.querySelector("input[type='range']");
|
||||
@@ -1124,37 +1130,15 @@ onUiUpdate(function(){
|
||||
clone_num.value = e.target.value;
|
||||
})
|
||||
clone_range.addEventListener('change', function (e) {
|
||||
e.preventDefault();
|
||||
elem.value = clone_range.value;
|
||||
updateInput(elem);
|
||||
})
|
||||
clone_num.addEventListener('input', function (e) {
|
||||
e.preventDefault();
|
||||
clone_num.addEventListener('input', function (e) {
|
||||
clone_range.value = e.target.value;
|
||||
})
|
||||
|
||||
const rect = clone_range.getBoundingClientRect();
|
||||
const xoffset = (rect.left + window.scrollX);
|
||||
const yoffset_min = (rect.top + window.scrollY);
|
||||
const yoffset_max = (rect.bottom + window.scrollY);
|
||||
let drag_clone_range = false;
|
||||
clone_range.addEventListener('touchmove', function(e) {
|
||||
if( drag_clone_range){
|
||||
let percent = parseInt(((e.touches[0].pageX - xoffset) / this.offsetWidth) * 10000) / 10000;
|
||||
clone_range.value = ( percent * (this.max - this.min)) + parseFloat(this.min);
|
||||
clone_num.value = clone_range.value;
|
||||
}
|
||||
}, {passive: true})
|
||||
clone_range.addEventListener('touchstart', function(e) {
|
||||
if( e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max){
|
||||
drag_clone_range = true;
|
||||
}
|
||||
}, {passive: true})
|
||||
clone_range.addEventListener('touchend', function(e) {
|
||||
drag_clone_range = false;
|
||||
}, {passive: true})
|
||||
|
||||
|
||||
cached_clone_range = clone_range;
|
||||
|
||||
}
|
||||
}
|
||||
function ui_input_focus_handler(e){
|
||||
@@ -1166,10 +1150,9 @@ onUiUpdate(function(){
|
||||
|
||||
function ui_input_release_handler(e){
|
||||
const len = active_clone_input.length;
|
||||
|
||||
if(focus_input){return;}
|
||||
|
||||
if(len > 0){
|
||||
if(len > 0){
|
||||
|
||||
if(e.target.id.indexOf("_clone") == -1){
|
||||
for(var i=len-1; i>=0; i--){
|
||||
let relem = active_clone_input[i];
|
||||
@@ -1180,7 +1163,6 @@ onUiUpdate(function(){
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let elem_type = e.target.tagName;
|
||||
if(elem_type == "INPUT"){
|
||||
let elem = e.target;
|
||||
@@ -1194,13 +1176,77 @@ onUiUpdate(function(){
|
||||
}
|
||||
}
|
||||
}
|
||||
function ui_dispatch_input_release(value){
|
||||
let timeoutId;
|
||||
|
||||
function ui_input_touchmove_handler(e){
|
||||
if(cached_clone_range && cached_clone_num){
|
||||
if(e.touches){
|
||||
const rect = cached_clone_range.getBoundingClientRect();
|
||||
const xoffset_min = (rect.left + window.scrollX);
|
||||
//const xoffset_max = (rect.right + window.scrollX);
|
||||
//const yoffset_min = (rect.top + window.scrollY);
|
||||
//const yoffset_max = (rect.bottom + window.scrollY);
|
||||
//if( e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max && e.touches[0].pageX > xoffset_min && e.touches[0].pageX < xoffset_max){
|
||||
e.preventDefault();
|
||||
const percent = parseInt(((e.touches[0].pageX - xoffset_min) / rect.width) * 10000) / 10000;
|
||||
cached_clone_range.value = ( percent * (cached_clone_range.max - cached_clone_range.min)) + parseFloat(cached_clone_range.min);
|
||||
cached_clone_num.value = cached_clone_range.value;
|
||||
//}
|
||||
}
|
||||
}
|
||||
}
|
||||
function ui_input_touchend_handler(e){
|
||||
if(cached_clone_range && cached_clone_num){
|
||||
const elem = cached_clone_range.previousElementSibling;
|
||||
elem.value = cached_clone_range.value;
|
||||
updateInput(elem);
|
||||
}
|
||||
}
|
||||
|
||||
function slider_contextmenu(e){
|
||||
e.preventDefault();
|
||||
}
|
||||
function slider_touchend(e){
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
}
|
||||
function slider_touchmove(e){
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
}
|
||||
function slider_touchstart(e){
|
||||
const gcontainer = e.target;
|
||||
gcontainer.removeEventListener('contextmenu', slider_contextmenu);
|
||||
gcontainer.removeEventListener('touchend', slider_touchend);
|
||||
gcontainer.removeEventListener('touchmove', slider_touchmove);
|
||||
gcontainer.removeEventListener('touchend', ui_input_touchend_handler);
|
||||
gcontainer.removeEventListener('touchmove', ui_input_touchmove_handler);
|
||||
|
||||
timeoutId = setTimeout(function() {
|
||||
timeoutId = null;
|
||||
e.stopPropagation();
|
||||
ui_input_release_handler(e);
|
||||
ui_input_touchmove_handler(e);
|
||||
gcontainer.addEventListener('touchmove', ui_input_touchmove_handler);
|
||||
gcontainer.addEventListener('touchend', ui_input_touchend_handler);
|
||||
}, 500);
|
||||
|
||||
gcontainer.addEventListener('contextmenu', slider_contextmenu);
|
||||
gcontainer.addEventListener('touchend', slider_touchend);
|
||||
gcontainer.addEventListener('touchmove', slider_touchmove);
|
||||
}
|
||||
|
||||
function ui_dispatch_input_release(value){
|
||||
const gcontainer = gradioApp().querySelector(".gradio-container");
|
||||
if(value){
|
||||
gradioApp().querySelector(".gradio-container").addEventListener('mouseover', ui_input_release_handler);
|
||||
gradioApp().querySelector(".gradio-container").addEventListener('mousedown', ui_input_focus_handler);
|
||||
gcontainer.addEventListener('mouseover', ui_input_release_handler);
|
||||
gcontainer.addEventListener('touchstart', slider_touchstart);
|
||||
}else{
|
||||
gradioApp().querySelector(".gradio-container").removeEventListener('mouseover', ui_input_release_handler);
|
||||
gradioApp().querySelector(".gradio-container").removeEventListener('mousedown', ui_input_focus_handler);
|
||||
gcontainer.removeEventListener('mouseover', ui_input_release_handler);
|
||||
gcontainer.removeEventListener('touchstart', slider_touchstart);
|
||||
gcontainer.removeEventListener('contextmenu', slider_contextmenu);
|
||||
gcontainer.removeEventListener('touchend', slider_touchend);
|
||||
gcontainer.removeEventListener('touchmove', slider_touchmove);
|
||||
gcontainer.removeEventListener('touchend', ui_input_touchend_handler);
|
||||
gcontainer.removeEventListener('touchmove', ui_input_touchmove_handler);
|
||||
}
|
||||
}
|
||||
gradioApp().querySelector("#setting_ui_dispatch_input_release input").addEventListener('click', function (e) {
|
||||
|
||||
Reference in New Issue
Block a user