@cloudron/pankow 4.1.9 → 4.1.10

package/components/DirectoryViewGridItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid-item-wrapper"
+  <div ref="rowWrapper" class="grid-item-wrapper"
     :draggable="!rename"
     @mouseup="onSelect($event)"
     @drop="onDrop($event)"
@@ -22,13 +22,16 @@
         </template>
       </div>
 
-      <div v-if="visible && !rename" class="grid-item-label" :title="item.name + (item.target ? ` → ${item.target}` : '')">
+      <!-- this is just a placeholder label to allow the native browser search to work -->
+      <div v-if="!visible">
+        {{ item.name }}
+      </div>
+      <div v-else-if="visible && !rename" class="grid-item-label" :title="item.name + (item.target ? ` → ${item.target}` : '')">
         <a v-if="item.href" class="open-action" @dblclick.stop @click="onOpen($event)" :href="item.href">{{ item.name }}</a>
         <span v-else>{{ item.name }}</span>
       </div>
-      <div v-if="visible && rename" class="grid-item-label grid-item-rename">
+      <div v-else-if="visible && rename" ref="renameCell" class="grid-item-label grid-item-rename">
         <TextInput
-          ref="renameInput"
           v-model="newName"
           :disabled="renameBusy"
           @blur="onRenameEnd"
@@ -42,167 +45,189 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
+import { ref, onMounted } from 'vue';
 
 import Icon from './Icon.vue';
 import TextInput from './TextInput.vue';
 
-export default {
-  name: 'DirectoryViewGridItem',
-  emits: [ 'activated', 'action-menu' ],
-  components: {
-    Icon,
-    TextInput
+const props = defineProps({
+  item: Object,
+  showStar: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    item: Object,
-    showStar: {
-      type: Boolean,
-      default: false
-    },
-    shareIndicatorProperty: {
-      type: String,
-      default: '',
-    },
-    fallbackIcon: String,
-    renameHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing renameHandler for DirectoryViewGridItem');
-      }
-    },
-    starHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing starHandler for DirectoryViewGridItem');
-      }
-    },
-    selectHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing selectHandler for DirectoryViewGridItem');
-      }
-    },
-    dropHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing dropHandler for DirectoryViewGridItem');
-      }
-    },
-    canDropHandler: {
-      type: Function,
-      default() {
-        console.warn('Missing canDropHandler for DirectoryViewGridItem');
-      }
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      rename: false,
-      renameBusy: false,
-      newName: '',
-      dropTargetActive: false,
-      previewRetries: 0
-    };
+  shareIndicatorProperty: {
+    type: String,
+    default: '',
   },
-  methods: {
-    highlight() {
-      this.$el.classList.add('pankow-directory-view-highlight-animation');
-      setTimeout(() => { this.$el.classList.remove('pankow-directory-view-highlight-animation'); }, 4000);
+  fallbackIcon: String,
+  renameHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing renameHandler for DirectoryViewGridItem');
     },
-    onToggleStar() {
-      this.starHandler(this.item);
+  },
+  starHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing starHandler for DirectoryViewGridItem');
     },
-    onActionMenu(event) {
-      this.onSelect(event, true);
-      this.$emit('action-menu', this.item, event);
+  },
+  selectHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing selectHandler for DirectoryViewGridItem');
     },
-    onRenameBegin() {
-      this.rename = true;
-      this.newName = this.item.name;
-
-      setTimeout(() => {
-        const elem = this.$refs.renameInput.$el;
-        elem.focus();
-
-        if (typeof elem.selectionStart !== 'undefined') {
-            elem.selectionStart = 0;
-            elem.selectionEnd = this.item.name.lastIndexOf('.');
-        }
-      }, 0);
+  },
+  dropHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing dropHandler for DirectoryViewGridItem');
     },
-    onRenameEnd() {
-      this.rename = false;
-      this.renameBusy = false;
-      this.newName = '';
+  },
+  canDropHandler: {
+    type: Function,
+    default() {
+      console.warn('Missing canDropHandler for DirectoryViewGridItem');
     },
-    async onRenameSubmit() {
-      if (!this.newName) return;
+  },
+});
 
-      this.renameBusy = true;
-      await this.renameHandler(this.item, this.newName);
-      this.onRenameEnd();
-    },
-    onOpen(event) {
-      if (event.ctrlKey || event.metaKey) return;
+const emit = defineEmits(['activated', 'action-menu']);
 
-      event.preventDefault();
-      event.stopPropagation();
+const rowWrapper = ref(null);
+const renameCell = ref(null);
 
-      this.$emit('activated', this.item);
-    },
-    onSelect(event, actionMenu = false) {
-      if ((event.button === 2 || actionMenu) && event.ctrlKey) {
-        this.selectHandler(this.item, event, true);
-      } else {
-        this.selectHandler(this.item, event);
-      }
-    },
-    onDrop(event) {
-      if (!this.canDropHandler(this.item)) return;
+const visible = ref(false);
+const rename = ref(false);
+const renameBusy = ref(false);
+const newName = ref('');
+const dropTargetActive = ref(false);
+const previewRetries = ref(0);
 
-      event.stopPropagation();
+function highlight() {
+  rowWrapper.value?.classList.add('pankow-directory-view-highlight-animation');
+  setTimeout(() => {
+    rowWrapper.value?.classList.remove('pankow-directory-view-highlight-animation');
+  }, 4000);
+}
 
-      this.dropHandler(this.item, event);
-      this.dropTargetActive = false;
-    },
-    onDragOver(event) {
-      if (!this.canDropHandler(this.item)) return;
+function onToggleStar() {
+  props.starHandler(props.item);
+}
 
-      event.preventDefault();
-      event.stopPropagation();
+function onActionMenu(event) {
+  onSelect(event, true);
+  emit('action-menu', props.item, event);
+}
 
-      event.dataTransfer.dropEffect = 'move';
-      this.dropTargetActive = true;
-    },
-    onDragExit(event) {
-      if (!this.item.isDirectory) return;
+function onRenameBegin() {
+  rename.value = true;
+  newName.value = props.item.name;
 
-      this.dropTargetActive = false;
-    },
-    iconError(event) {
-      event.target.src = this.fallbackIcon;
+  setTimeout(() => {
+    const elem = renameCell.value?.querySelector('input.pankow-text-input');
+    if (!elem) return;
 
-      setTimeout(() => {
-        if (this.previewRetries > 5) return;
-        ++this.previewRetries;
+    elem.focus();
 
-        event.target.src = this.item.previewUrl || this.item.icon;
-      }, 1000);
+    if (typeof elem.selectionStart !== 'undefined') {
+      elem.selectionStart = 0;
+      elem.selectionEnd = props.item.name.lastIndexOf('.');
     }
-  },
-  mounted() {
-    const observer = new IntersectionObserver(result => {
-      if (result[0].isIntersecting) {
-        this.visible = true;
-        observer.unobserve(this.$el);
-      }
-    });
-
-    observer.observe(this.$el);
+  }, 0);
+}
+
+function onRenameEnd() {
+  rename.value = false;
+  renameBusy.value = false;
+  newName.value = '';
+}
+
+async function onRenameSubmit() {
+  if (!newName.value) return;
+
+  renameBusy.value = true;
+  await props.renameHandler(props.item, newName.value);
+  onRenameEnd();
+}
+
+function onOpen(event) {
+  if (event.ctrlKey || event.metaKey) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  emit('activated', props.item);
+}
+
+function onSelect(event, actionMenu = false) {
+  if ((event.button === 2 || actionMenu) && event.ctrlKey) {
+    props.selectHandler(props.item, event, true);
+  } else {
+    props.selectHandler(props.item, event);
   }
-};
+}
+
+function onDrop(event) {
+  if (!props.canDropHandler(props.item)) return;
+
+  event.stopPropagation();
+
+  props.dropHandler(props.item, event);
+  dropTargetActive.value = false;
+}
+
+function onDragOver(event) {
+  if (!props.canDropHandler(props.item)) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  event.dataTransfer.dropEffect = 'move';
+  dropTargetActive.value = true;
+}
+
+function onDragExit() {
+  if (!props.item.isDirectory) return;
+
+  dropTargetActive.value = false;
+}
+
+function iconError(event) {
+  event.target.src = props.fallbackIcon;
+
+  setTimeout(() => {
+    if (previewRetries.value > 5) return;
+    previewRetries.value += 1;
+
+    event.target.src = props.item.previewUrl || props.item.icon;
+  }, 1000);
+}
+
+onMounted(() => {
+  const el = rowWrapper.value;
+  if (!el) return;
+
+  const observer = new IntersectionObserver((result) => {
+    if (result[0].isIntersecting) {
+      visible.value = true;
+      observer.unobserve(el);
+    }
+  });
+
+  observer.observe(el);
+});
+
+defineExpose({
+  highlight,
+  onRenameBegin,
+  get $el() {
+    return rowWrapper.value;
+  },
+});
 
 </script>