@@ -27,7 +31,7 @@
{#key $attrsChanged}
{#if node !== null}
-
+
{/if}
{/key}
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 940525c..f70b877 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -55,9 +55,14 @@
return links[0].data
}
+ function onFocus() {
+ navigator.vibrate(20)
+ }
+
function onSelect() {
if (input)
input.blur();
+ navigator.vibrate(20)
}
let lastPropsChanged: number = 0;
@@ -86,6 +91,7 @@
inputAttributes={{ autocomplete: 'off' }}
bind:input
on:change
+ on:focus={onFocus}
on:select={onSelect}
on:filter
on:blur
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index 384cf4f..d5f907c 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -9,6 +9,7 @@
import type { FileData as GradioFileData } from "@gradio/upload";
import type { SelectData as GradioSelectData } from "@gradio/utils";
import { clamp } from "$lib/utils";
+ import { f7 } from "framework7-svelte";
export let widget: WidgetLayout | null = null;
export let isMobile: boolean = false;
@@ -39,14 +40,79 @@
}
let element: HTMLDivElement;
+ let mobileLightbox = null;
+
+ function showMobileLightbox(event: Event) {
+ if (!f7)
+ return
+
+ if (mobileLightbox) {
+ mobileLightbox.destroy();
+ mobileLightbox = null;
+ }
+
+ const source = (event.target || event.srcElement) as HTMLImageElement;
+ const galleryElem = source.closest
("div.block")
+ console.debug("[ImageViewer] showModal", event, source, galleryElem);
+ if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
+ console.error("No buttons found on gallery element!", galleryElem)
+ return;
+ }
+
+ const allGalleryButtons = ImageViewer.all_gallery_buttons(galleryElem);
+ const selectedSource = source.src
+
+ const images = allGalleryButtons.map(button => {
+ return {
+ url: (button.children[0] as HTMLImageElement).src,
+ caption: "Image"
+ }
+ })
+
+
+ mobileLightbox = f7.photoBrowser.create({
+ photos: images,
+ thumbs: images.map(i => i.url),
+ type: 'popup',
+ });
+ mobileLightbox.open()
+
+ event.stopPropagation()
+ }
+
+ function setupImageForMobileLightbox(e: HTMLImageElement) {
+ if (e.dataset.modded === "true")
+ return;
+
+ e.dataset.modded = "true";
+ e.style.cursor = "pointer";
+ e.style.userSelect = "none";
+
+ var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+
+ // For Firefox, listening on click first switched to next image then shows the lightbox.
+ // If you know how to fix this without switching to mousedown event, please.
+ // For other browsers the event is click to make it possiblr to drag picture.
+ var event = isFirefox ? 'mousedown' : 'click'
+
+ e.addEventListener(event, (evt) => {
+ evt.preventDefault()
+ showMobileLightbox(evt)
+ }, true);
+ }
+
function onSelect(e: CustomEvent) {
// Setup lightbox
// Wait for gradio gallery to show the large preview image, if no timeout then
// the event might fire too early
+
+ const callback = isMobile ? setupImageForMobileLightbox
+ : ImageViewer.instance.setupImageForLightbox.bind(ImageViewer.instance)
+
setTimeout(() => {
const images = element.querySelectorAll('div.block div > img')
if (images != null) {
- images.forEach(ImageViewer.instance.setupImageForLightbox.bind(ImageViewer.instance));
+ images.forEach(callback);
}
ImageViewer.instance.updateOnBackgroundChange();
}, 200)
@@ -54,8 +120,8 @@
// Update index
node.setProperty("index", e.detail.index as number)
}
-
+
{#if widget && node && nodeValue}
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index 06faeaf..3d7d4df 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -57,7 +57,6 @@
function onRelease(e: Event) {
if (nodeValue && option) {
$nodeValue = option
- navigator.vibrate(100)
}
}
@@ -78,11 +77,26 @@
}
function onPointerDown(e: PointerEvent) {
+ if (!isMobile)
+ return;
+
interfaceState.showIndicator(e.clientX, e.clientY, option);
}
+ let canVibrate = true;
+ let lastDisplayValue = null;
+
function onPointerMove(e: PointerEvent) {
+ if (!isMobile)
+ return;
interfaceState.showIndicator(e.clientX, e.clientY, option);
+
+ if (canVibrate && lastDisplayValue != option) {
+ lastDisplayValue = option;
+ canVibrate = false;
+ setTimeout(() => { canVibrate = true }, 30)
+ navigator.vibrate(10)
+ }
}
diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte
index 4adfeeb..6cf0258 100644
--- a/src/mobile/GenToolbar.svelte
+++ b/src/mobile/GenToolbar.svelte
@@ -9,6 +9,7 @@
import ProgressBar from "$lib/components/ProgressBar.svelte";
import Indicator from "./Indicator.svelte";
import interfaceState from "$lib/stores/interfaceState";
+ import LightboxModal from "$lib/components/LightboxModal.svelte";
export let subworkflowID: number = -1;
export let app: ComfyApp = undefined;