@cloudron/pankow 3.1.8

package/components/DirectoryView.vue

@@ -0,0 +1,772 @@
+<template>
+  <div
+    class="directory-view"
+    :class="{ 'drop-target-active': dropTargetActive }"
+    tabindex="0"
+    ref="main"
+    @keydown.up.prevent="onKeyUp($event)"
+    @keydown.down.prevent="onKeyDown($event)"
+    @keydown.enter="onKeyEnter($event)"
+    @keydown.delete="onKeyDelete($event)"
+    @keydown.esc="onKeyEscape($event)"
+    @drop.stop.prevent="onDrop(null, $event)"
+    @dragover.stop.prevent="onDragOver($event)"
+    @dragenter.prevent
+    @dragexit="onDragExit($event)"
+    @keydown="onKeyEvent($event)"
+    >
+    <Menu ref="contextMenu" :model="contextMenuModel" />
+    <Menu ref="contextMenuBody" :model="contextMenuBodyModel" />
+
+    <Dialog ref="chownDialog" :title="tr('filemanager.chownDialog.title')" :confirmLabel="tr('filemanager.chownDialog.change')" @confirm="onChangeOwnerDialogSubmit(changeOwnerDialog.items, changeOwnerDialog.ownerId)">
+      <SingleSelect v-model="changeOwnerDialog.ownerId" :options="ownersModel" optionLabel="label" optionKey="uid"/>
+    </Dialog>
+
+    <div class="directory-view-empty-container" v-show="items.length === 0 && !busy" @contextmenu="onContextMenuBody($event)">
+      <slot name="empty">
+        Folder is empty
+      </slot>
+    </div>
+
+    <div class="directory-view-header" v-show="items.length">
+      <div class="directory-view-header-icon"></div>
+      <div class="directory-view-header-name" @click="toggleSort(SORT_BY.NAME)"><i v-show="sortBy === SORT_BY.NAME" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> {{ tr('filemanager.list.name') }}</div>
+      <div class="directory-view-header-star" v-show="showStar" @click="toggleSort(SORT_BY.STAR)"><i v-show="sortBy === SORT_BY.STAR" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> <i class="fa-regular fa-star"></i></div>
+      <div class="directory-view-header-owner" v-show="showOwner" @click="toggleSort(SORT_BY.OWNER)"><i v-show="sortBy === SORT_BY.OWNER" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> {{ tr('filemanager.list.owner') }}</div>
+      <div class="directory-view-header-size" v-show="showSize" @click="toggleSort(SORT_BY.SIZE)"><i v-show="sortBy === SORT_BY.SIZE" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> {{ tr('filemanager.list.size') }}</div>
+      <div class="directory-view-header-modified" v-show="showModified" @click="toggleSort(SORT_BY.MTIME)"><i v-show="sortBy === SORT_BY.MTIME" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> {{ tr('filemanager.list.mtime') }}</div>
+      <div class="directory-view-header-actions"></div>
+    </div>
+    <div class="directory-view-body-container" v-show="items.length">
+      <div
+        class="directory-view-body"
+        @contextmenu="onContextMenuBody($event)"
+        >
+        <DirectoryViewListItem v-for="item in filteredSortedItems" :ref="(el) => this.elements[item.id] = el"
+          :key="item.id"
+          :fallbackIcon="fallbackIcon"
+          :item="item"
+          :show-owner="showOwner"
+          :show-share="showShare"
+          :show-extract="showExtract"
+          :show-size="showSize"
+          :show-star="showStar"
+          :show-modified="showModified"
+          :rename-handler="renameHandler"
+          :select-handler="onSelectAndFocus"
+          :drop-handler="onDrop"
+          :can-drop-handler="onCanDropHandler"
+          :star-handler="starHandler"
+          @contextmenu="onContextMenu(item, $event)"
+          @action-menu="onContextMenu"
+          @dblclick="onItemActivated(item)"
+          @activated="onItemActivated(item)"
+          @dragstart="onItemDragStart($event, item)"
+        />
+      </div>
+
+      <div class="drag-handle"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SingleSelect from './SingleSelect.vue';
+import DirectoryViewListItem from './DirectoryViewListItem.vue';
+import Dialog from './Dialog.vue';
+import Menu from './Menu.vue';
+
+import { translation } from '../utils.js';
+
+const SORT_BY = {
+  NAME:  'name',
+  OWNER: 'owner',
+  STAR:  'star',
+  SIZE:  'size',
+  MTIME: 'mtime',
+};
+
+const SORT_DIRECTION = {
+  ASC: 'asc',
+  DESC: 'desc',
+};
+
+let rawSelected = [];
+
+export default {
+  name: 'DirectoryView',
+  components: {
+    Dialog,
+    DirectoryViewListItem,
+    SingleSelect,
+    Menu
+  },
+  emits: [ 'selectionChanged', 'item-activated' ],
+  props: {
+    busy: {
+      type: Boolean,
+      default: false
+    },
+    showOwner: {
+      type: Boolean,
+      default: false
+    },
+    showSize: {
+      type: Boolean,
+      default: false
+    },
+    showStar: {
+      type: Boolean,
+      default: false
+    },
+    showExtract: {
+      type: Boolean,
+      default: true
+    },
+    showShare: {
+      // if String its the name of the property for existing share indicator
+      type: [ Boolean, String ],
+      default: false
+    },
+    showModified: {
+      type: Boolean,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    multiDownload: {
+      type: Boolean,
+      default: false
+    },
+    tr: {
+      type: Function,
+      default(id) { console.warn('Missing tr for DirectoryView, using fallback.'); return translation(id); }
+    },
+    items: {
+      type: Array,
+      validator(value) {
+        function fail(prop, type, item) {
+          console.error(`DirectoryView.items[].${prop} must be a ${type}`, item);
+          return false;
+        }
+
+        for (const item of value) {
+          if (typeof item.id !== 'string') return fail('id', 'string', item);
+          if (typeof item.name !== 'string') return fail('name', 'string', item);
+          if (typeof item.icon !== 'string') return fail('icon', 'string', item);
+          if (typeof item.previewUrl !== 'string') return fail('previewUrl', 'string', item);
+
+          // optional
+          if (item.href && typeof item.href !== 'string') return fail('href', 'string', item);
+          if (item.target && typeof item.target !== 'string') return fail('target', 'string', item);
+          if (item.owner && typeof item.owner !== 'string') return fail('owner', 'string', item);
+          if (item.size && typeof item.size !== 'number') return fail('size', 'number', item);
+          if (item.star && typeof item.star !== 'boolean') return fail('star', 'boolean', item);
+          // if (item.modified && item.modified instanceof Date) return fail('modified', 'Date', item);
+        }
+
+        return true;
+      }
+    },
+    ownersModel: {
+      type: Array,
+      default: []
+    },
+    fallbackIcon: String,
+    deleteHandler: {
+      type: Function,
+      default() { console.warn('Missing deleteHandler for DirectoryView'); }
+    },
+    renameHandler: {
+      type: Function,
+      default() { console.warn('Missing renameHandler for DirectoryView'); }
+    },
+    changeOwnerHandler: {
+      type: Function,
+      default() { console.warn('Missing changeOwnerHandler for DirectoryView'); }
+    },
+    pasteHandler: {
+      type: Function,
+      default() { console.warn('Missing pasteHandler for DirectoryView'); }
+    },
+    newFileHandler: {
+      type: Function,
+      default() { console.warn('Missing newFileHandler for DirectoryView'); }
+    },
+    newFolderHandler: {
+      type: Function,
+      default() { console.warn('Missing newFolderHandler for DirectoryView'); }
+    },
+    uploadFileHandler: {
+      type: Function,
+      default() { console.warn('Missing uploadFileHandler for DirectoryView'); }
+    },
+    uploadFolderHandler: {
+      type: Function,
+      default() { console.warn('Missing uploadFolderHandler for DirectoryView'); }
+    },
+    shareHandler: {
+      type: Function,
+      default() { console.warn('Missing shareHandler for DirectoryView'); }
+    },
+    starHandler: {
+      type: Function,
+      default() { console.warn('Missing starHandler for DirectoryView'); }
+    },
+    dropHandler: {
+      type: Function,
+      default() { console.warn('Missing dropHandler for DirectoryView'); }
+    },
+    downloadHandler: {
+      type: Function,
+      default() { console.warn('Missing downloadHandler for DirectoryView'); }
+    },
+    extractHandler: {
+      type: Function,
+      default() { console.warn('Missing extractHandler for DirectoryView'); }
+    }
+  },
+  computed: {
+    filteredSortedItems() {
+      this.invalidateSelected();
+
+      // first sort by sort column and direction, then make sure folders are always first
+      return this.items.sort((a, b) => {
+        if (a.isDirectory && !b.isDirectory) return -1;
+        if (!a.isDirectory && b.isDirectory) return 1;
+
+        let sort = 0;
+        if (this.sortBy === SORT_BY.NAME) {
+          if (a.name.toLowerCase() < b.name.toLowerCase()) sort = -1;
+          else if (a.name.toLowerCase() > b.name.toLowerCase()) sort = 1;
+        } else if (this.sortBy === SORT_BY.OWNER) {
+          if (a.owner.toLowerCase() < b.owner.toLowerCase()) sort = -1;
+          else if (a.owner.toLowerCase() > b.owner.toLowerCase()) sort = 1;
+        } else if (this.sortBy === SORT_BY.STAR) {
+          if (a.star && !b.star) sort = -1;
+          if (!a.star && b.star) sort = 1;
+        } else if (this.sortBy === SORT_BY.SIZE) {
+          if (a.size < b.size) sort = -1;
+          if (a.size > b.size) sort = 1;
+        } else if (this.sortBy === SORT_BY.MTIME) {
+          if (a.mtime < b.mtime) sort = -1;
+          if (a.mtime > b.mtime) sort = 1;
+        } else {
+          console.error('unknown SORT_BY', this.sortBy);
+        }
+
+        // tie break by id to avoid recursion
+        if (sort === 0) {
+          if (a.id < b.id) sort = -1;
+          else sort = 1;
+        }
+
+        return sort *= (this.sortDirection === SORT_DIRECTION.DESC ? -1 : 1);
+      });
+    }
+  },
+  data() {
+    return {
+      _alreadyActivating: false,
+      SORT_BY,
+      SORT_DIRECTION,
+      elements: {}, // holds references by item.id
+      focusItem: null,
+      focusItemIndex: -1,
+      selectedCount: 0,
+      dropTargetActive: false,
+      sortBy: SORT_BY.NAME,
+      sortDirection: SORT_DIRECTION.ASC,
+      clipboard: {
+        action: '', // 'copy' or 'cut'
+        files: []
+      },
+      changeOwnerDialog: {
+        busy: false,
+        ownerId: '',
+        items: []
+      },
+      contextMenuBodyModel: [{
+        label: this.tr('filemanager.list.menu.paste'),
+        icon:'fa-regular fa-paste',
+        disabled: () => { return !this.clipboard.files || !this.clipboard.files.length; },
+        action: () => { this.pasteHandler(this.clipboard.action, this.clipboard.files, null); }
+      }, {
+        label: this.tr('filemanager.list.menu.selectAll'),
+        icon:'fa-solid fa-check-double',
+        action: this.onSelectAll
+      }, {
+        separator:true
+      }, {
+        label: this.tr('filemanager.toolbar.newFile'),
+        icon:'fa-solid fa-file-circle-plus',
+        action: this.newFileHandler
+      }, {
+        label: this.tr('filemanager.toolbar.newFolder'),
+        icon:'fa-solid fa-folder-plus',
+        action: this.newFolderHandler
+      }, {
+        separator:true
+      }, {
+        label: this.tr('filemanager.toolbar.uploadFile'),
+        icon:'fa-solid fa-file-arrow-up',
+        action: this.uploadFileHandler
+      }, {
+        label: this.tr('filemanager.toolbar.uploadFolder'),
+        icon:'fa-regular fa-folder-open',
+        action: this.uploadFolderHandler
+      }],
+      contextMenuModel: [{
+        label: this.tr('filemanager.list.menu.open'),
+        icon:'fa-regular fa-folder-open',
+        disabled: () => { return this.selectedCount > 1; },
+        action: () => { this.onItemActivated(this.getSelected()[0]); }
+      }, {
+        separator:true
+      }, {
+        label: this.tr('filemanager.list.menu.download'),
+        icon:'fa-solid fa-download',
+        action: this.onItemDownload,
+        disabled: () => { return this.multiDownload ? this.selectedCount === 0 : this.selectedCount !== 1; }
+      }, {
+        label: this.tr('filemanager.list.menu.share'),
+        icon:'fa-solid fa-share-nodes',
+        action: this.onItemShare,
+        disabled: () => { return this.selectedCount > 1; },
+        visible: this.showShare
+      }, {
+        label: this.tr('filemanager.list.menu.copy'),
+        icon:'fa-regular fa-copy',
+        action: this.onItemsCopy
+      }, {
+        label: this.tr('filemanager.list.menu.cut'),
+        icon:'fa-solid fa-scissors',
+        action: this.onItemsCut
+      }, {
+        label: this.tr('filemanager.list.menu.paste'),
+        icon:'fa-regular fa-paste',
+        disabled: () => { return !(this.focusItem && this.focusItem.isDirectory) || this.selectedCount > 1 || !this.clipboard.files || !this.clipboard.files.length; },
+        action: () => { this.pasteHandler(this.clipboard.action, this.clipboard.files, this.focusItem); }
+      }, {
+        label: this.tr('filemanager.list.menu.selectAll'),
+        icon:'fa-solid fa-check-double',
+        action: this.onSelectAll
+      }, {
+        label: this.tr('filemanager.list.menu.rename'),
+        icon:'fa-regular fa-pen-to-square',
+        action: this.onItemRenameBegin,
+        disabled: () => { return !this.editable || this.selectedCount > 1; }
+      }, {
+        label: this.tr('filemanager.list.menu.chown'),
+        icon:'fa-solid fa-user-pen',
+        action: this.onItemsChangeOwner,
+        visible: this.showOwner
+      }, {
+        label: this.tr('filemanager.list.menu.extract'),
+        action: this.onItemExtract,
+        visible: () => {
+          if (!this.showExtract) return false;
+
+          const file = this.getSelected()[0];
+          return !(this.selectedCount !== 1 || !(
+            file.name.match(/\.tgz$/)        ||
+            file.name.match(/\.tar$/)        ||
+            file.name.match(/\.7z$/)         ||
+            file.name.match(/\.zip$/)        ||
+            file.name.match(/\.tar\.gz$/)    ||
+            file.name.match(/\.tar\.xz$/)    ||
+            file.name.match(/\.tar\.bz2$/)));
+        }
+      }, {
+        separator:true
+      }, {
+        label: this.tr('filemanager.list.menu.delete'),
+        icon:'fa-regular fa-trash-can',
+        action: () => { this.deleteHandler(this.getSelected()); }
+      }],
+    };
+  },
+  methods: {
+    highlight(item) {
+      const id = item.id;
+
+      if (!this.elements[id]) return;
+
+      this.elements[id].highlight();
+      this.elements[id].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    },
+    highlightByName(name) {
+      const tmp = this.items.find((i) => i.name === name);
+      if (!tmp) return;
+
+      this.highlight(tmp);
+    },
+    toggleSort(sortBy) {
+      if (this.sortBy === sortBy) this.sortDirection = this.sortDirection === SORT_DIRECTION.ASC ? SORT_DIRECTION.DESC : SORT_DIRECTION.ASC;
+      else this.sortBy = sortBy;
+    },
+    onDrop(targetItem, event) {
+      this.dropTargetActive = false;
+
+      const targetItemName = targetItem ? targetItem.name : '';
+
+      if (event.dataTransfer.getData('application/x-pankow') === 'selected') {
+        // can't drop selected files on same folder
+        if (!targetItemName) return;
+
+        this.dropHandler(targetItemName, null, this.getSelected());
+      } else if (event.dataTransfer && event.dataTransfer.items[0]) {
+        // this is dropping files from outside the browser
+        this.dropHandler(targetItemName, event.dataTransfer, null);
+      }
+    },
+    onCanDropHandler(item) {
+      if (!item.isDirectory) return false;
+      return !item.selected;
+    },
+    onDragOver(event) {
+      if (!event.dataTransfer) return;
+
+      if (event.dataTransfer.getData('application/x-pankow') === 'selected') {
+        this.dropTargetActive = false;
+      } else {
+        event.dataTransfer.dropEffect = 'copy';
+        this.dropTargetActive = true;
+      }
+    },
+    onDragExit(event) {
+      this.dropTargetActive = false;
+    },
+    onItemDragStart(event) {
+      const dragHandle = document.getElementsByClassName('drag-handle')[0];
+
+      // clear element
+      dragHandle.replaceChildren();
+
+      for (let i = 0; i < Math.min(this.selectedCount, 6); ++i) {
+        const dragHandleItem = document.createElement('div');
+        dragHandleItem.style.opacity = 1-((i*2)/10);
+        const dragHandleItemIcon = document.createElement('img');
+        dragHandleItemIcon.src = rawSelected[i].previewUrl || rawSelected[i].icon
+        dragHandleItem.append(dragHandleItemIcon, rawSelected[i].name);
+        dragHandle.append(dragHandleItem);
+      }
+
+      event.dataTransfer.dropEffect = 'move'
+      event.dataTransfer.setData('application/x-pankow', 'selected');
+      event.dataTransfer.setDragImage(dragHandle, 0, 0);
+    },
+    onKeyUp(event) {
+      this.onSelectAndFocusIndex(this.focusItemIndex-1, event.shiftKey);
+    },
+    onKeyDown(event) {
+      this.onSelectAndFocusIndex(this.focusItemIndex+1, event.shiftKey);
+    },
+    onKeyEnter(event) {
+      if (this.focusItem) this.onItemActivated(this.focusItem);
+    },
+    async onKeyDelete(event) {
+      if (event.key !== 'Delete') return; // triggered also by backspace
+      if (!this.focusItem) return;
+
+      await this.deleteHandler(this.getSelected());
+    },
+    onKeyEscape(event) {
+      this.onUnselectAll();
+    },
+    onKeyEvent(event) {
+      if (event.key === 'c' && (event.ctrlKey || event.metaKey)) {
+        this.onItemsCopy();
+        event.preventDefault();
+      } else if (event.key === 'v' && (event.ctrlKey || event.metaKey)) {
+        this.pasteHandler(this.clipboard.action, this.clipboard.files);
+        event.preventDefault();
+      } else if (event.key === 'x' && (event.ctrlKey || event.metaKey)) {
+        this.onItemsCut();
+        event.preventDefault();
+      } else if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+        this.onSelectAll();
+        event.preventDefault();
+      } else if (event.key === 'End') {
+        if (event.shiftKey) this.onSelectAndFocusToIndex(this.items.length-1);
+        else this.onSelectAndFocusIndex(this.items.length-1, event.shiftKey);
+        event.preventDefault();
+      } else if (event.key === 'Home') {
+        if (event.shiftKey) this.onSelectAndFocusToIndex(0);
+        else this.onSelectAndFocusIndex(0, event.shiftKey);
+        event.preventDefault();
+      } else if (event.key === 'PageUp') {
+        const pageItemCount = parseInt(event.target.clientHeight / 55);
+        if (event.shiftKey) this.onSelectAndFocusToIndex(this.focusItemIndex-pageItemCount);
+        else this.onSelectAndFocusIndex(this.focusItemIndex-pageItemCount, event.shiftKey);
+        event.preventDefault();
+      } else if (event.key === 'PageDown') {
+        const pageItemCount = parseInt(event.target.clientHeight / 55);
+        if (event.shiftKey) this.onSelectAndFocusToIndex(this.focusItemIndex+pageItemCount);
+        else this.onSelectAndFocusIndex(this.focusItemIndex+pageItemCount, event.shiftKey);
+        event.preventDefault();
+      }
+    },
+    onContextMenu(item, event) {
+      this.$refs.contextMenu.open(event);
+      this.onSelectAndFocus(item, event, false);
+      event.stopPropagation();
+    },
+    onContextMenuBody(event) {
+      this.$refs.contextMenuBody.open(event);
+      this.onUnselectAll();
+    },
+    onItemActivated(item) {
+      // prevent concurrent activations for some time
+      if (this._alreadyActivating) return;
+      this._alreadyActivating = true;
+      setTimeout(() => { this._alreadyActivating = false; }, 500);
+
+      this.$emit('item-activated', item);
+    },
+    onItemsChangeOwner(event) {
+      if (!this.focusItem) return console.warn('onItemsChangeOwner should only be triggered if at least one item is selected');
+
+      this.changeOwnerDialog.items = this.getSelected();
+      this.changeOwnerDialog.ownerId = this.focusItem.uid;
+      this.$refs.chownDialog.open();
+    },
+    onItemDownload(event) {
+      if (!this.focusItem) return console.warn('onItemDownload should only be triggered if at lesst one item is selected');
+
+      this.downloadHandler(this.multiDownload ? this.getSelected() : this.focusItem);
+    },
+    onItemExtract(event) {
+      if (this.selectedCount !== 1) return console.warn('onItemExtract should only be triggered if one item is selected');
+
+      this.extractHandler(this.focusItem);
+    },
+    onItemsCopy(event) {
+      if (!this.focusItem) return console.warn('onItemsCopy should only be triggered if at least one item is selected');
+
+      this.clipboard.action = 'copy';
+      this.clipboard.files = this.getSelected();
+    },
+    onItemsCut(event) {
+      if (!this.focusItem) return console.warn('onItemsCut should only be triggered if at least one item is selected');
+
+      this.clipboard.action = 'cut';
+      this.clipboard.files = this.getSelected();
+    },
+    onItemShare(event) {
+      if (this.selectedCount !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
+
+      this.shareHandler(this.focusItem);
+    },
+    onItemRenameBegin(event) {
+      if (this.selectedCount !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
+
+      this.elements[this.focusItem.id].onRenameBegin();
+    },
+    async onItemRenameSubmit(item, newName) {
+      await this.renameHandler(item, newName);
+    },
+    async onChangeOwnerDialogSubmit(items, newOwnerUid) {
+      this.changeOwnerDialog.busy = true;
+      await this.changeOwnerHandler(items, newOwnerUid);
+      this.changeOwnerDialog.visible = false;
+      this.changeOwnerDialog.items = [];
+      this.changeOwnerDialog.ownerId = this.ownersModel[0].uid;
+      this.changeOwnerDialog.busy = false;
+      this.$refs.chownDialog.close();
+    },
+    getSelected() {
+      return rawSelected;
+    },
+    invalidateSelected() {
+      rawSelected = this.items.filter((item) => item.selected).slice();
+      this.selectedCount = rawSelected.length;
+      this.$emit('selectionChanged', rawSelected);
+    },
+    onSelectAll() {
+      for (const item of this.items) item.selected = true;
+      if (!this.focusItem) this.setFocus(this.focusItemIndex);
+
+      this.invalidateSelected();
+    },
+    onUnselectAll() {
+      for (const item of this.items) item.selected = false;
+      if (this.focusItem) this.focusItem = null;
+
+      this.invalidateSelected();
+    },
+    setFocus(index) {
+      if (this.items[this.focusItemIndex]) this.items[this.focusItemIndex].focused = false;
+      if (this.focusItem) this.focusItem.focused = false;
+      if (!this.items[index]) return;
+
+      this.focusItem = this.items[index];
+      this.focusItem.focused = true;
+      this.focusItemIndex = index;
+    },
+    onSelectAndFocusToIndex(index) {
+      index = (index < 0) ? 0 : (index > this.items.length-1 ? this.items.length-1 : index); // keep in bounds
+
+      this.setFocus(index);
+
+      const item = this.items[index];
+      const itemIndex = this.items.findIndex(i => i.id === item.id);
+      const firstSelectedIndex = this.items.findIndex(item => item.selected);
+      const lastSelectedIndex = this.items.findLastIndex(item => item.selected);
+
+      if (index < firstSelectedIndex) for (let i = index; i < firstSelectedIndex; ++i) this.items[i].selected = true;
+      else if (index > lastSelectedIndex) for (let i = lastSelectedIndex; i <= index; ++i) this.items[i].selected = true;
+
+      if (this.elements[item.id]) this.elements[item.id].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+      this.invalidateSelected();
+    },
+    onSelectAndFocusIndex(index, keepSelected = false) {
+      index = (index < 0) ? 0 : (index > this.items.length-1 ? this.items.length-1 : index); // keep in bounds
+
+      const item = this.items[index];
+
+      this.onSelectAndFocus(item, {}, keepSelected);
+    },
+    onSelectAndFocus(item, event, keepSelected = false) {
+      const itemIndex = this.items.findIndex(i => i.id === item.id);
+      this.setFocus(itemIndex);
+
+      // do not toggle selection if this is from right click
+      if (event.button === 2 && item.selected) keepSelected = true;
+
+      if (event.ctrlKey) {
+        if (keepSelected) item.selected = true;
+        else item.selected = !item.selected;
+      } else if (event.shiftKey) {
+        const firstSelectedIndex = this.items.findIndex(item => item.selected);
+        const lastSelectedIndex = this.items.findLastIndex(item => item.selected);
+
+        if (itemIndex < firstSelectedIndex) for (let i = itemIndex; i < firstSelectedIndex; ++i) this.items[i].selected = true;
+        else if (itemIndex > lastSelectedIndex) for (let i = lastSelectedIndex; i <= itemIndex; ++i) this.items[i].selected = true;
+      } else {
+        if (!keepSelected) for (const item of this.items) item.selected = false;
+        item.selected = true;
+      }
+
+      if (this.elements[item.id]) this.elements[item.id].$el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+      this.invalidateSelected();
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+
+.directory-view {
+  display: block;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  user-select: none;
+  border: 2px solid transparent;
+}
+
+.directory-view-empty-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  user-select: none;
+  border: 2px solid transparent;
+}
+
+.directory-view.drop-target-active {
+  border: 2px solid var(--pankow-color-primary);
+}
+
+.directory-view-header {
+  padding: 10px;
+  padding-top: 20px;
+  display: flex;
+  font-weight: bold;
+}
+
+.directory-view-body-container {
+  overflow: hidden;
+  height: calc(100% - 38px); /* 38px is the header size */
+}
+
+.directory-view-body {
+  padding: 0 10px;
+  padding-bottom: 10px;
+  height: 100%;
+  overflow: auto;
+}
+
+.directory-view-header-icon {
+  width: 40px;
+}
+
+.directory-view-header-name {
+  padding-left: 10px;
+  flex-grow: 1;
+}
+
+.directory-view-header-star {
+  width: 80px;
+  text-align: center;
+}
+
+.directory-view-header-owner {
+  width: 100px;
+}
+
+.directory-view-header-size {
+  width: 100px;
+}
+
+.directory-view-header-modified {
+  width: 100px;
+}
+
+.directory-view-header-actions {
+  width: 40px;
+}
+
+.dialog-header {
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.dialog-dropdown {
+  width: 100%;
+  margin-top: 5px;
+  margin-bottom: 1.5rem;
+}
+
+.dialog-submit {
+  margin-top: 5px;
+}
+
+.drag-handle {
+  position: absolute;
+  top: -1000px;
+  background: transparent;
+}
+
+.drag-handle :deep(div) {
+  display: flex;
+  align-items: center;
+}
+
+.drag-handle :deep(img) {
+  width: 45px;
+  height: 45px;
+  object-fit: cover;
+  padding: 5px;
+}
+
+</style>