@cloudron/pankow 4.4.11 → 4.4.12

package/components/SideBar.vue

@@ -1,7 +1,7 @@
 <script setup>
 
-import { ref, useTemplateRef, onMounted } from 'vue';
-import { onSwipe } from '../gestures.js';
+import { ref, useTemplateRef, onMounted, onUnmounted, nextTick } from 'vue';
+import { onPan } from '../gestures.js';
 
 defineProps({
   showOpenAction: {
@@ -11,7 +11,9 @@ defineProps({
 });
 
 const sideBar = useTemplateRef('sideBar');
+const backDrop = useTemplateRef('backDrop');
 const isVisible = ref(false);
+const dragging = ref(false);
 
 function open() {
   isVisible.value = true;
@@ -21,10 +23,130 @@ function close() {
   isVisible.value = false;
 }
 
-onMounted(() => {
-  onSwipe(sideBar.value, (direction) => {
-    if (direction === 'left') close();
+function width() {
+  return sideBar.value ? sideBar.value.offsetWidth : 0;
+}
+
+function clearPendingSettle() {
+  if (settleOnEnd && sideBar.value) sideBar.value.removeEventListener('transitionend', settleOnEnd);
+  settleOnEnd = null;
+  if (settleTimer) {
+    clearTimeout(settleTimer);
+    settleTimer = null;
+  }
+}
+
+function dragStart() {
+  clearPendingSettle();
+  dragging.value = true;
+}
+
+function dragMove({ deltaX }) {
+  const offset = Math.max(-width(), Math.min(0, deltaX));
+  sideBar.value.style.transform = `translateX(${offset}px)`;
+  if (backDrop.value) backDrop.value.style.opacity = String(1 + offset / width());
+}
+
+function settle(shouldClose) {
+  dragging.value = false;
+  isVisible.value = shouldClose ? false : true;
+
+  nextTick(() => {
+    const el = sideBar.value;
+    const bd = backDrop.value;
+    if (!el) return;
+
+    clearPendingSettle();
+
+    el.style.transform = shouldClose ? 'translateX(-100%)' : 'translateX(0)';
+    if (bd) bd.style.opacity = '';
+
+    function cleanup() {
+      if (settleTimer) {
+        clearTimeout(settleTimer);
+        settleTimer = null;
+      }
+      if (settleOnEnd) {
+        el.removeEventListener('transitionend', onEnd);
+        settleOnEnd = null;
+      }
+      el.style.transform = '';
+    }
+
+    function onEnd(event) {
+      if (event.propertyName === 'transform') cleanup();
+    }
+
+    settleOnEnd = onEnd;
+    el.addEventListener('transitionend', onEnd);
+    settleTimer = setTimeout(cleanup, 300);
   });
+}
+
+function suppressClick() {
+  suppressBackdropClick = true;
+  setTimeout(() => { suppressBackdropClick = false; }, 0);
+}
+
+function onBackdropClick() {
+  if (suppressBackdropClick) {
+    suppressBackdropClick = false;
+    return;
+  }
+  close();
+}
+
+function dragEnd({ deltaX, velocity }) {
+  suppressClick();
+  const w = width();
+  settle(deltaX < -w / 2 || velocity < -0.5);
+}
+
+function dragCancel() {
+  suppressClick();
+  settle(false);
+}
+
+let removePans = [];
+let settleTimer = null;
+let settleOnEnd = null;
+let suppressBackdropClick = false;
+const media = typeof window !== 'undefined' ? window.matchMedia('(max-width: 576px)') : null;
+
+function setup() {
+  if (!media || !media.matches || !sideBar.value || removePans.length) return;
+  const handlers = {
+    onStart: dragStart,
+    onMove: dragMove,
+    onEnd: dragEnd,
+    onCancel: dragCancel
+  };
+  removePans.push(onPan(sideBar.value, handlers));
+  if (backDrop.value) removePans.push(onPan(backDrop.value, handlers));
+}
+
+function teardown() {
+  removePans.forEach((remove) => { remove(); });
+  removePans = [];
+  dragging.value = false;
+  clearPendingSettle();
+  if (sideBar.value) sideBar.value.style.transform = '';
+  if (backDrop.value) backDrop.value.style.opacity = '';
+}
+
+function onMediaChange() {
+  if (media && media.matches) setup();
+  else teardown();
+}
+
+onMounted(() => {
+  setup();
+  media && media.addEventListener('change', onMediaChange);
+});
+
+onUnmounted(() => {
+  media && media.removeEventListener('change', onMediaChange);
+  teardown();
 });
 
 defineExpose({ open, close });
@@ -32,15 +154,13 @@ defineExpose({ open, close });
 </script>
 
 <template>
-  <div class="pankow-sidebar-container" :class="{ 'pankow-sidebar-open': isVisible }">
-    <Transition name="pankow-fade">
-      <div class="pankow-sidebar-backdrop" @click="close"></div>
+  <div class="pankow-sidebar-container" :class="{ 'pankow-sidebar-open': isVisible, 'pankow-sidebar-dragging': dragging }">
+    <div class="pankow-sidebar-backdrop" ref="backDrop" @click="onBackdropClick"></div>
+    <Transition name="pankow-scale">
+      <div class="pankow-sidebar-close-action" v-if="isVisible" tabindex="0" role="button" aria-label="Close sidebar" @click="close()" @keydown.enter="close()" @keydown.space.prevent="close()"><i class="fa-solid fa-xmark"></i></div>
+      <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" tabindex="0" role="button" aria-label="Open sidebar" @click="open()" @keydown.enter="open()" @keydown.space.prevent="open()"><i class="fa-solid fa-bars"></i></div>
     </Transition>
-    <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
-      <Transition name="pankow-scale">
-        <div class="pankow-sidebar-close-action" v-if="isVisible" tabindex="0" role="button" aria-label="Close sidebar" @click="close()" @keydown.enter="close()" @keydown.space.prevent="close()"><i class="fa-solid fa-xmark"></i></div>
-        <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" tabindex="0" role="button" aria-label="Open sidebar" @click="open()" @keydown.enter="open()" @keydown.space.prevent="open()"><i class="fa-solid fa-bars"></i></div>
-      </Transition>
+    <div class="pankow-sidebar" ref="sideBar">
       <div class="pankow-sidebar-inner">
         <slot></slot>
       </div>
@@ -60,6 +180,8 @@ defineExpose({ open, close });
   display: block;
   height: 100%;
   overflow: auto;
+  background-color: #0a2e4c;
+  color: white;
 }
 
 .pankow-sidebar-inner {
@@ -91,7 +213,7 @@ defineExpose({ open, close });
 
 .pankow-sidebar-backdrop {
   display: none;
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
@@ -115,19 +237,34 @@ defineExpose({ open, close });
   }
 
   .pankow-sidebar {
-    position: absolute;
-    width: calc(70%);
+    position: fixed;
+    top: 0;
     left: 0;
-    transition: left 250ms ease-in-out;
+    bottom: 0;
+    width: calc(70%);
+    transform: translateX(-100%);
+    transition: transform 250ms ease-in-out;
   }
 
-  .pankow-sidebar-open .pankow-sidebar-backdrop {
+  .pankow-sidebar-open .pankow-sidebar {
+    transform: translateX(0);
+  }
+
+  .pankow-sidebar-dragging .pankow-sidebar,
+  .pankow-sidebar-dragging .pankow-sidebar-backdrop {
+    transition: none;
+  }
+
+  .pankow-sidebar-backdrop {
     display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 250ms ease-in-out;
   }
 
-  .pankow-sidebar-closed {
-    position: fixed;
-    left: -600px;  /* depends on media query */
+  .pankow-sidebar-open .pankow-sidebar-backdrop {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   .pankow-sidebar-open-action {
@@ -143,4 +280,4 @@ defineExpose({ open, close });
   }
 }
 
-</style>
+</style>

package/gestures.js

@@ -1,10 +1,11 @@
 /**
- * Swipe handler
+ * Gesture handlers
  *
  * Usage:
  * ```
- * import { onSwipe } from 'pankow/gestures';
+ * import { onSwipe, onPan } from 'pankow/gestures';
  * onSwipe(element, (direction) => {});
+ * onPan(element, { onStart, onMove, onEnd, onCancel });
  * ```
  */
 
@@ -55,10 +56,101 @@ function onSwipe(elem, callback, threshold = 50) {
   elem.addEventListener('touchcancel', touchEnd);
 }
 
+/**
+ * Registers pointer event listeners on an element for interactive dragging (pan).
+ * The drag is only "claimed" once the pointer moves past a small threshold and
+ * horizontal movement dominates vertical movement, so vertical scrolling inside
+ * the element still works as expected.
+ *
+ * Callbacks:
+ *   onStart({ x, y })                     - drag claimed (horizontal intent confirmed)
+ *   onMove({ deltaX, deltaY })            - pointer moved (called continuously while dragging)
+ *   onEnd({ deltaX, velocity })           - pointer released; velocity in px/ms (negative = leftward)
+ *   onCancel()                            - pointer cancelled
+ *
+ * @param {HTMLElement} elem
+ * @param {{ onStart?: Function, onMove?: Function, onEnd?: Function, onCancel?: Function }} handlers
+ * @param {number} [threshold=10] - Minimum pixel distance before the drag is claimed
+ */
+function onPan(elem, handlers = {}, threshold = 10) {
+  let pointerId = null;
+  let dragging = false;
+  let startX = 0;
+  let startY = 0;
+  let lastX = 0;
+  let lastTime = 0;
+  let lastVelocity = 0;
+
+  function pointerDown(event) {
+    if (dragging || !event.isPrimary) return;
+    pointerId = event.pointerId;
+    startX = event.clientX;
+    startY = event.clientY;
+    lastX = startX;
+    lastTime = event.timeStamp;
+    lastVelocity = 0;
+  }
+
+  function pointerMove(event) {
+    if (pointerId === null || event.pointerId !== pointerId) return;
+
+    const deltaX = event.clientX - startX;
+    const deltaY = event.clientY - startY;
+
+    if (!dragging) {
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      if (absX < threshold && absY < threshold) return;
+      if (absY > absX) return; // vertical intent, keep it for scrolling
+      dragging = true;
+      try { elem.setPointerCapture(pointerId); } catch (e) { /* noop */ }
+      if (typeof handlers.onStart === 'function') handlers.onStart({ x: startX, y: startY });
+    }
+
+    const now = event.timeStamp;
+    const dt = now - lastTime;
+    if (dt > 0) {
+      lastVelocity = (event.clientX - lastX) / dt;
+    }
+    lastX = event.clientX;
+    lastTime = now;
+
+    if (typeof handlers.onMove === 'function') handlers.onMove({ deltaX, deltaY });
+  }
+
+  function end(event) {
+    if (pointerId === null || event.pointerId !== pointerId) return;
+    pointerId = null;
+
+    if (dragging) {
+      dragging = false;
+      if (event.type === 'pointercancel') {
+        if (typeof handlers.onCancel === 'function') handlers.onCancel();
+      } else if (typeof handlers.onEnd === 'function') {
+        handlers.onEnd({ deltaX: event.clientX - startX, velocity: lastVelocity });
+      }
+    }
+  }
+
+  elem.addEventListener('pointerdown', pointerDown);
+  elem.addEventListener('pointermove', pointerMove);
+  elem.addEventListener('pointerup', end);
+  elem.addEventListener('pointercancel', end);
+
+  return function remove() {
+    elem.removeEventListener('pointerdown', pointerDown);
+    elem.removeEventListener('pointermove', pointerMove);
+    elem.removeEventListener('pointerup', end);
+    elem.removeEventListener('pointercancel', end);
+  };
+}
+
 export default {
-  onSwipe
+  onSwipe,
+  onPan
 };
 
 export {
-  onSwipe
+  onSwipe,
+  onPan
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.4.11",
+  "version": "4.4.12",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -48,13 +48,13 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^3.3.1",
+    "@unhead/vue": "^3.4.0",
     "@vitejs/plugin-vue": "^6.0.8",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "^11.12.0",
     "typescript": "^7.0.2",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vite-ssg": "^28.3.0",
-    "vue": "^3.5.41",
+    "vue": "^3.5.42",
     "vue-router": "^5.2.0"
   },
   "allowScripts": {

package/types/gestures.d.ts

@@ -1,10 +1,11 @@
 /**
- * Swipe handler
+ * Gesture handlers
  *
  * Usage:
  * ```
- * import { onSwipe } from 'pankow/gestures';
+ * import { onSwipe, onPan } from 'pankow/gestures';
  * onSwipe(element, (direction) => {});
+ * onPan(element, { onStart, onMove, onEnd, onCancel });
  * ```
  */
 /**
@@ -14,8 +15,31 @@
  * @param {number} [threshold=50] - Minimum pixel distance to trigger a swipe
  */
 declare function onSwipe(elem: HTMLElement, callback: Function, threshold?: number): void;
+/**
+ * Registers pointer event listeners on an element for interactive dragging (pan).
+ * The drag is only "claimed" once the pointer moves past a small threshold and
+ * horizontal movement dominates vertical movement, so vertical scrolling inside
+ * the element still works as expected.
+ *
+ * Callbacks:
+ *   onStart({ x, y })                     - drag claimed (horizontal intent confirmed)
+ *   onMove({ deltaX, deltaY })            - pointer moved (called continuously while dragging)
+ *   onEnd({ deltaX, velocity })           - pointer released; velocity in px/ms (negative = leftward)
+ *   onCancel()                            - pointer cancelled
+ *
+ * @param {HTMLElement} elem
+ * @param {{ onStart?: Function, onMove?: Function, onEnd?: Function, onCancel?: Function }} handlers
+ * @param {number} [threshold=10] - Minimum pixel distance before the drag is claimed
+ */
+declare function onPan(elem: HTMLElement, handlers?: {
+    onStart?: Function;
+    onMove?: Function;
+    onEnd?: Function;
+    onCancel?: Function;
+}, threshold?: number): () => void;
 declare const _default: {
     onSwipe: typeof onSwipe;
+    onPan: typeof onPan;
 };
 export default _default;
-export { onSwipe };
+export { onSwipe, onPan };

package/viewers/ImageViewer.vue

@@ -2,10 +2,10 @@
 <template>
   <div ref="rootEl" @mousemove="onMouseMove" class="full-page" @keyup.esc.stop="onClose" @keyup.left.stop="onPrev" @keyup.right.stop="onNext" tabindex="1" :style="{ opacity: dismissDistance ? (200 - dismissDistance)/100 : 1 }">
     <div class="image-layer" ref="imageContainer" @scroll="onScroll($event)">
-      <div class="image" v-for="(entry, index) in entries" :key="entry.id" v-bind:id="`image${index}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :style="{ marginTop: dismissDistance ? (dismissDistance + 'px') : 0 }">
-        <img :src="entry.fullFileUrl" v-if="getFileTypeGroup(entry) === 'image'" draggable="false"/>
-        <video v-if="getFileTypeGroup(entry) !== 'image'" :ref="addVideoRef" controls>
-          <source :src="entry.fullFileUrl" />
+      <div class="image" v-for="(imageEntry, index) in entries" :key="imageEntry.id" :id="`image${index}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" :style="{ marginTop: dismissDistance ? (dismissDistance + 'px') : 0 }">
+        <img :src="imageEntry.fullFileUrl" v-if="getFileTypeGroup(imageEntry) === 'image'" draggable="false" @load="onImageLoad(index)"/>
+        <video v-if="getFileTypeGroup(imageEntry) !== 'image'" :ref="addVideoRef" controls>
+          <source :src="imageEntry.fullFileUrl" />
         </video>
       </div>
     </div>
@@ -19,7 +19,7 @@
 
 <script setup>
 
-import { ref, computed, onBeforeUpdate, onMounted, useTemplateRef } from 'vue';
+import { ref, computed, onBeforeUpdate, useTemplateRef } from 'vue';
 import { getFileTypeGroup } from '../utils.js';
 import Button from '../components/Button.vue';
 
@@ -129,6 +129,18 @@ function onTouchEnd() {
   dismissDistance.value = 0;
 }
 
+function scrollToCurrent(behavior) {
+  const el = document.getElementById(`image${curIndex.value}`);
+  if (el && imageContainer.value) imageContainer.value.scrollTo({ left: el.offsetLeft, behavior });
+}
+
+function onImageLoad(index) {
+  if (lockScroll.value && index === curIndex.value) {
+    scrollToCurrent('auto');
+    lockScroll.value = false;
+  }
+}
+
 function open(e, fileList, instant = true) {
   if (!e || e.isDirectory || !canHandle(e)) return;
 
@@ -139,8 +151,8 @@ function open(e, fileList, instant = true) {
   curIndex.value = fileList.findIndex((item) => item.fileName === e.fileName);
 
   setTimeout(() => {
-    document.getElementById(`image${curIndex.value}`).scrollIntoView({ behavior: instant ? 'instant' : 'smooth' });
-    rootEl.value.focus();
+    scrollToCurrent(instant ? 'auto' : 'smooth');
+    rootEl.value.focus({ preventScroll: true });
   }, 0);
 
   setTimeout(() => {
@@ -156,7 +168,7 @@ function onDownload() {
 function onClose() {
   emit('close');
 
-  if (videoElements.value && videoElements.value.length) videoElements.value.forEach(e => e.pause());
+  if (videoElements.value && videoElements.value.length) videoElements.value.forEach((e) => { e.pause(); });
 
   setTimeout(() => {
     entry.value = {};
@@ -218,12 +230,19 @@ defineExpose({ canHandle, open });
 
 .image-layer {
   display: flex;
-  position: fixed;
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.image-layer::-webkit-scrollbar {
+  display: none;
 }
 
 .image {
@@ -237,6 +256,7 @@ defineExpose({ canHandle, open });
 }
 
 img, video {
+  display: block;
   object-fit: contain;
   width: 100%;
   height: 100%;