@cloudron/pankow 4.2.3 → 4.3.1

package/viewers/ImageViewer.vue

@@ -1,10 +1,10 @@
 
 <template>
-  <div @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 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="videoElements" controls>
+        <video v-if="getFileTypeGroup(entry) !== 'image'" :ref="addVideoRef" controls>
           <source :src="entry.fullFileUrl" />
         </video>
       </div>
@@ -17,8 +17,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+import { ref, computed, onBeforeUpdate, onMounted, useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
 import { getFileTypeGroup } from '../utils.js';
 import Button from '../components/Button.vue';
 
@@ -27,144 +29,151 @@ let startY = 0;
 const dismissDistanceThreshold = 150;
 const dismissTriggerThreshold = 50;
 
-export default {
-    name: 'ImageViewer',
-    emits: [ 'close', 'saved' ],
-    props: {
-      downloadHandler: {
-        type: Function,
-        default: null
-      },
-      navigationHandler: {
-        type: Function,
-        default: (toEntry) => {
-          this.$router.replace(toEntry.resourcePath);
-        }
-      }
-    },
-    components: {
-      Button
-    },
-    data() {
-      return {
-        showOverlay: false,
-        showOverlayTimer: null,
-        lockScroll: false,
-        curIndex: -1,
-        lastMousePosition: {},
-        entry: {},
-        entries: [],
-        dismissDistance: 0
-      };
-    },
-    computed: {
-      hasDownloadHandler() { return typeof this.downloadHandler === 'function' }
-    },
-    methods: {
-      getFileTypeGroup,
-      keepOverlayAlive() {
-        this.showOverlay = true;
-        clearTimeout(this.showOverlayTimer);
-        this.showOverlayTimer = setTimeout(() => {
-          // avoid hiding if cursor is above a button
-          // this crashes sometimes, not yet sure how to better prevent for now "Document.elementFromPoint: Argument 1 is not a finite floating-point value."
-          try {
-            if (document.elementFromPoint(this.lastMousePosition.x || 0, this.lastMousePosition.y || 0) !== this.$refs.imageContainer) return;
-          } catch (e) {
-            console.error('ImageViewer crash. lastMousePosition', this.lastMousePosition, e);
-          }
-
-          this.showOverlay = false;
-        }, 2000);
-      },
-      onMouseMove() {
-        this.lastMousePosition = { x: event.pageX, y: event.pageY };
-        this.keepOverlayAlive();
-      },
-      canHandle(entry) {
-        return (getFileTypeGroup(entry) === 'image' || this.$refs.typeTestVideo.canPlayType(entry.mimeType))
-          && !(entry.mimeType === 'image/heif') // supported on apple it seems
-          && !(entry.mimeType === 'image/vnd.adobe.photoshop');
-      },
-      onScroll() {
-        if (this.lockScroll) return;
-
-        for (let i = 1; i < this.entries.length; i++) {
-          const elem = document.getElementById('image'+i);
-          const rect = elem.getBoundingClientRect();
-          const midX = (rect.x+(rect.width/2));
-          if (midX >= (rect.width/4) && midX <= 3*(rect.width/4)) {
-            this.entry = this.entries[i];
-
-            if (this.curIndex !== i) {
-              this.curIndex = i;
-              this.navigationHandler(this.entry);
-            }
-
-            break;
-          }
-        }
-      },
-      onTouchStart(event) {
-        this.dismissDistance = 0;
-        touchDist = 0;
-        startY = event.changedTouches[0].pageY;
-      },
-      onTouchMove(event) {
-        touchDist = event.changedTouches[0].pageY - startY // get total dist traveled by finger while in contact with surface
-        if (touchDist > dismissTriggerThreshold) this.dismissDistance = touchDist - dismissTriggerThreshold;
-      },
-      onTouchEnd() {
-        if (touchDist > dismissDistanceThreshold) this.onClose();
-        touchDist = 0;
-        this.dismissDistance = 0;
-      },
-      open(entry, entries, instant = true) {
-        if (!entry || entry.isDirectory || !this.canHandle(entry)) return;
-
-        this.lockScroll = true;
-        this.keepOverlayAlive();
-        this.entry = entry;
-        this.entries = entries;
-        this.curIndex = entries.findIndex((item) => item.fileName === entry.fileName);
-
-        setTimeout(() => {
-          document.getElementById(`image${this.curIndex}`).scrollIntoView({ behavior: instant ? 'instant' : 'smooth' });
-          this.$el.focus();
-        }, 0);
-
-        setTimeout(() => {
-          this.lockScroll = false;
-        }, 500);
-      },
-      onDownload() {
-        if (!this.hasDownloadHandler) return;
-        this.downloadHandler(this.entry);
-      },
-      onClose() {
-        this.$emit('close');
-
-        // pause/stop video and audio playback on close
-        if (this.$refs.videoElements && this.$refs.videoElements.length) this.$refs.videoElements.forEach(e => e.pause());
-
-        // given some time for closing to keep DOM elements alive
-        setTimeout(() => {
-          this.entry = {};
-        }, 500);
-      },
-      onPrev() {
-        if (this.curIndex < 1) return;
-        this.navigationHandler(this.entries[this.curIndex-1]);
-        this.open(this.entries[this.curIndex-1], this.entries, false);
-      },
-      onNext() {
-        if (this.curIndex >= this.entries.length) return;
-        this.navigationHandler(this.entries[this.curIndex+1]);
-        this.open(this.entries[this.curIndex+1], this.entries, false);
+const router = useRouter();
+const emit = defineEmits([ 'close', 'saved' ]);
+const props = defineProps({
+  downloadHandler: {
+    type: Function,
+    default: null
+  },
+  navigationHandler: {
+    type: Function,
+    default: null
+  }
+});
+
+const showOverlay = ref(false);
+const showOverlayTimer = ref(null);
+const lockScroll = ref(false);
+const curIndex = ref(-1);
+const lastMousePosition = ref({});
+const entry = ref({});
+const entries = ref([]);
+const dismissDistance = ref(0);
+
+const hasDownloadHandler = computed(() => typeof props.downloadHandler === 'function');
+const navigate = (entry) => (props.navigationHandler || ((e) => router.replace(e.resourcePath)))(entry);
+
+const rootEl = useTemplateRef('rootEl');
+const imageContainer = useTemplateRef('imageContainer');
+const typeTestVideo = useTemplateRef('typeTestVideo');
+const videoElements = ref([]);
+
+function addVideoRef(el) {
+  if (el) videoElements.value.push(el);
+}
+
+onBeforeUpdate(() => {
+  videoElements.value = [];
+});
+
+function keepOverlayAlive() {
+  showOverlay.value = true;
+  clearTimeout(showOverlayTimer.value);
+  showOverlayTimer.value = setTimeout(() => {
+    try {
+      if (document.elementFromPoint(lastMousePosition.value.x || 0, lastMousePosition.value.y || 0) !== imageContainer.value) return;
+    } catch (e) {
+      console.error('ImageViewer crash. lastMousePosition', lastMousePosition.value, e);
+    }
+
+    showOverlay.value = false;
+  }, 2000);
+}
+
+function onMouseMove(event) {
+  lastMousePosition.value = { x: event.pageX, y: event.pageY };
+  keepOverlayAlive();
+}
+
+function canHandle(e) {
+  return (getFileTypeGroup(e) === 'image' || typeTestVideo.value.canPlayType(e.mimeType))
+    && !(e.mimeType === 'image/heif')
+    && !(e.mimeType === 'image/vnd.adobe.photoshop');
+}
+
+function onScroll() {
+  if (lockScroll.value) return;
+
+  for (let i = 1; i < entries.value.length; i++) {
+    const elem = document.getElementById('image'+i);
+    const rect = elem.getBoundingClientRect();
+    const midX = (rect.x+(rect.width/2));
+    if (midX >= (rect.width/4) && midX <= 3*(rect.width/4)) {
+      entry.value = entries.value[i];
+
+      if (curIndex.value !== i) {
+        curIndex.value = i;
+        navigate(entry.value);
       }
-    },
-    mounted() {}
-};
+
+      break;
+    }
+  }
+}
+
+function onTouchStart(event) {
+  dismissDistance.value = 0;
+  touchDist = 0;
+  startY = event.changedTouches[0].pageY;
+}
+
+function onTouchMove(event) {
+  touchDist = event.changedTouches[0].pageY - startY;
+  if (touchDist > dismissTriggerThreshold) dismissDistance.value = touchDist - dismissTriggerThreshold;
+}
+
+function onTouchEnd() {
+  if (touchDist > dismissDistanceThreshold) onClose();
+  touchDist = 0;
+  dismissDistance.value = 0;
+}
+
+function open(e, fileList, instant = true) {
+  if (!e || e.isDirectory || !canHandle(e)) return;
+
+  lockScroll.value = true;
+  keepOverlayAlive();
+  entry.value = e;
+  entries.value = fileList;
+  curIndex.value = fileList.findIndex((item) => item.fileName === e.fileName);
+
+  setTimeout(() => {
+    document.getElementById(`image${curIndex.value}`).scrollIntoView({ behavior: instant ? 'instant' : 'smooth' });
+    rootEl.value.focus();
+  }, 0);
+
+  setTimeout(() => {
+    lockScroll.value = false;
+  }, 500);
+}
+
+function onDownload() {
+  if (!hasDownloadHandler.value) return;
+  props.downloadHandler(entry.value);
+}
+
+function onClose() {
+  emit('close');
+
+  if (videoElements.value && videoElements.value.length) videoElements.value.forEach(e => e.pause());
+
+  setTimeout(() => {
+    entry.value = {};
+  }, 500);
+}
+
+function onPrev() {
+  if (curIndex.value < 1) return;
+  navigate(entries.value[curIndex.value-1]);
+  open(entries.value[curIndex.value-1], entries.value, false);
+}
+
+function onNext() {
+  if (curIndex.value >= entries.value.length) return;
+  navigate(entries.value[curIndex.value+1]);
+  open(entries.value[curIndex.value+1], entries.value, false);
+}
 
 </script>
 

package/viewers/PdfViewer.vue

@@ -21,49 +21,41 @@
   </MainLayout>
 </template>
 
-<script>
+<script setup>
 
+import { ref } from 'vue';
 import Button from '../components/Button.vue';
 import MainLayout from '../components/MainLayout.vue';
 import TopBar from '../components/TopBar.vue';
 import utils from '../utils.js';
 
-export default {
-  name: 'PdfViewer',
-  components: {
-    Button,
-    MainLayout,
-    TopBar
-  },
-  emits: [ 'close' ],
-  props: {
-    tr: {
-      type: Function,
-      default(id) { console.warn('Missing tr for PdfViewer'); return utils.translation(id); }
-    }
-  },
-  data() {
-    return {
-      entry: null
-    };
-  },
-  methods: {
-    canHandle(entry) {
-      return entry.mimeType === 'application/pdf';
-    },
-    async open(entry) {
-      if (!entry || entry.isDirectory || !this.canHandle(entry)) return;
+const emit = defineEmits([ 'close' ]);
 
-      this.entry = entry;
-    },
-    onClose() {
-      this.$emit('close');
-    },
-    onDownload() {
-      window.location.href = this.entry.downloadFileUrl;
-    }
+const props = defineProps({
+  tr: {
+    type: Function,
+    default(id) { console.warn('Missing tr for PdfViewer'); return utils.translation(id); }
   }
-};
+});
+
+const entry = ref(null);
+
+function canHandle(e) {
+  return e.mimeType === 'application/pdf';
+}
+
+async function open(e) {
+  if (!e || e.isDirectory || !canHandle(e)) return;
+  entry.value = e;
+}
+
+function onClose() {
+  emit('close');
+}
+
+function onDownload() {
+  window.location.href = entry.value.downloadFileUrl;
+}
 
 </script>
 

package/viewers/TextViewer.vue

@@ -22,8 +22,9 @@
   </MainLayout>
 </template>
 
-<script>
+<script setup>
 
+import { ref, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
 import { editor, languages } from 'monaco-editor';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
@@ -57,146 +58,143 @@ function getLanguage(filename) {
     return language ? language.id : '';
 }
 
-export default {
-    name: 'TextViewer',
-    emits: [ 'close' ],
-    props: {
-      saveHandler: {
-        type: Function,
-        default() { console.warn('Missing saveHandler for TextViewer'); }
-      },
-      tr: {
-        type: Function,
-        default(id) { console.warn('Missing tr for TextViewer'); return utils.translation(id); }
-      },
-      readonly: {
-        type: Boolean,
-        default: false
+const emit = defineEmits([ 'close' ]);
+const props = defineProps({
+  saveHandler: {
+    type: Function,
+    default() { console.warn('Missing saveHandler for TextViewer'); }
+  },
+  tr: {
+    type: Function,
+    default(id) { console.warn('Missing tr for TextViewer'); return utils.translation(id); }
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const entry = ref({});
+const isChanged = ref(false);
+const busySave = ref(false);
+const lastSavedVersion = ref(0);
+const undoPossible = ref(false);
+const redoPossible = ref(false);
+
+const inputDialog = useTemplateRef('inputDialog');
+const editorView = useTemplateRef('editorView');
+
+let editorInstance = null;
+
+function canHandle(e) {
+  if (e.isBinary) return false;
+  return utils.getFileTypeGroup(e) === 'text' ||
+    utils.getFileTypeGroup(e) === 'application';
+}
+
+function open(e, content) {
+  if (!e || e.isDirectory || !canHandle(e)) return;
+
+  entry.value = e;
+
+  editorInstance.setModel(editor.createModel(content, getLanguage(e.fileName)));
+
+  const initialVersion = editorInstance.getModel().getAlternativeVersionId();
+  let currentVersion = initialVersion;
+  let lastVersion = initialVersion;
+  lastSavedVersion.value = initialVersion;
+
+  editorInstance.onDidChangeModelContent(e => {
+    const versionId = editorInstance.getModel().getAlternativeVersionId();
+
+    isChanged.value = lastSavedVersion.value !== versionId;
+
+    if (versionId < currentVersion) {
+      redoPossible.value = true;
+      if (versionId === initialVersion) {
+        undoPossible.value = false;
       }
-    },
-    components: {
-      Button,
-      InputDialog,
-      MainLayout,
-      TopBar,
-      Spinner
-    },
-    data() {
-      return {
-        entry: {},
-        isChanged: false,
-        busySave: false,
-        lastSavedVersion: 0
-      };
-    },
-    methods: {
-      canHandle(entry) {
-        if (entry.isBinary) return false;
-        return utils.getFileTypeGroup(entry) === 'text' ||
-          utils.getFileTypeGroup(entry) === 'application';
-      },
-      open(entry, content) {
-        if (!entry || entry.isDirectory || !this.canHandle(entry)) return;
-
-        this.entry = entry;
-
-        this.editor.setModel(editor.createModel(content, getLanguage(entry.fileName)));
-
-        const initialVersion = this.editor.getModel().getAlternativeVersionId();
-        let currentVersion = initialVersion;
-        let lastVersion = initialVersion;
-        this.lastSavedVersion = initialVersion;
-
-        this.editor.onDidChangeModelContent(e => {
-          const versionId = this.editor.getModel().getAlternativeVersionId();
-
-          this.isChanged = this.lastSavedVersion !== versionId;
-
-          if (versionId < currentVersion) {
-            this.redoPossible = true;
-            // no more undo possible
-            if (versionId === initialVersion) {
-              this.undoPossible = false;
-            }
-          } else {
-            if (versionId <= lastVersion) {
-              // redoing the last change
-              if (versionId == lastVersion) {
-                this.redoPossible = false;
-              }
-            } else { // adding new change, disable redo when adding new changes
-              this.redoPossible = false;
-              if (currentVersion > lastVersion) {
-                lastVersion = currentVersion;
-              }
-            }
-            this.undoPossible = true;
-          }
-          currentVersion = versionId;
-        });
-      },
-      async onClose() {
-        if (this.isChanged) {
-          const yes = await this.$refs.inputDialog.confirm({
-            message: this.tr('filemanager.textEditorCloseDialog.title'),
-            confirmStyle: 'danger',
-            confirmLabel: 'Discard changes and close',
-            rejectLabel: 'Cancel'
-          });
-
-          if (!yes) return;
-
-          this.editor.setModel(editor.createModel(''));
-          this.$emit('close');
-          this.isChanged = false;
-        } else {
-          this.editor.setModel(editor.createModel(''));
-          this.$emit('close');
+    } else {
+      if (versionId <= lastVersion) {
+        if (versionId == lastVersion) {
+          redoPossible.value = false;
         }
-      },
-      async onSave() {
-        this.busySave = true;
-
-        await this.saveHandler(this.entry, this.editor.getValue());
-
-        this.isChanged = false;
-        this.lastSavedVersion = this.editor.getModel().getAlternativeVersionId();
-
-        this.busySave = false;
-        this.editor.focus();
-      },
-      keydownHandler(event) {
-        if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 's') {
-          event.preventDefault();
-          if (this.isChanged) this.onSave();
+      } else {
+        redoPossible.value = false;
+        if (currentVersion > lastVersion) {
+          lastVersion = currentVersion;
         }
-      },
-      beforeunloadHandler(event) {
-        // this prevents accidental closing or reloading
-        if (this.isChanged) event.preventDefault();
       }
-    },
-    mounted() {
-      const theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'vs-dark' : 'vs-light';
-
-      this.editor = editor.create(this.$refs.editorView, {
-        automaticLayout: true,
-        value: '',
-        theme
-      });
-
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-        editor.setTheme(event.matches ? 'vs-dark' : 'vs-light');
-      });
-
-      window.addEventListener('keydown', this.keydownHandler);
-      window.addEventListener('beforeunload', this.beforeunloadHandler);
-    },
-    beforeUnmount() {
-      window.removeEventListener('keydown', this.keydownHandler);
-      window.removeEventListener('beforeunload', this.beforeunloadHandler);
+      undoPossible.value = true;
     }
-};
+    currentVersion = versionId;
+  });
+}
+
+async function onClose() {
+  if (isChanged.value) {
+    const yes = await inputDialog.value.confirm({
+      message: props.tr('filemanager.textEditorCloseDialog.title'),
+      confirmStyle: 'danger',
+      confirmLabel: 'Discard changes and close',
+      rejectLabel: 'Cancel'
+    });
+
+    if (!yes) return;
+
+    editorInstance.setModel(editor.createModel(''));
+    emit('close');
+    isChanged.value = false;
+  } else {
+    editorInstance.setModel(editor.createModel(''));
+    emit('close');
+  }
+}
+
+async function onSave() {
+  busySave.value = true;
+
+  await props.saveHandler(entry.value, editorInstance.getValue());
+
+  isChanged.value = false;
+  lastSavedVersion.value = editorInstance.getModel().getAlternativeVersionId();
+
+  busySave.value = false;
+  editorInstance.focus();
+}
+
+function keydownHandler(event) {
+  if((navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey) && event.key === 's') {
+    event.preventDefault();
+    if (isChanged.value) onSave();
+  }
+}
+
+function beforeunloadHandler(event) {
+  if (isChanged.value) event.preventDefault();
+}
+
+onMounted(() => {
+  const theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'vs-dark' : 'vs-light';
+
+  editorInstance = editor.create(editorView.value, {
+    automaticLayout: true,
+    value: '',
+    theme
+  });
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    editor.setTheme(event.matches ? 'vs-dark' : 'vs-light');
+  });
+
+  window.addEventListener('keydown', keydownHandler);
+  window.addEventListener('beforeunload', beforeunloadHandler);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', keydownHandler);
+  window.removeEventListener('beforeunload', beforeunloadHandler);
+});
 
 </script>