8 files changed, 68 insertions, 19 deletions

diff --git a/viewer/src/components/index.ts b/viewer/src/components/index.ts
index 559000e..043087d 100644
--- a/viewer/src/components/index.ts
+++ b/viewer/src/components/index.ts
@@ -21,7 +21,7 @@ import Vue from "vue"
 
 const requireComponent = require.context(
   "@/components",
-  false, // Whether or not to look in subfolders
+  true, // Whether or not to look in subfolders
   // The regular expression used to match base component filenames
   /Ld[A-Z]\w+\.vue$/
 )
diff --git a/viewer/src/components/LdAudioViewer.vue b/viewer/src/components/item_handlers/LdAudioViewer.vue
index 739d36a..8c8ce2b 100644
--- a/viewer/src/components/LdAudioViewer.vue
+++ b/viewer/src/components/item_handlers/LdAudioViewer.vue
@@ -20,7 +20,7 @@
 
 <template>
   <div class="flex-column container-vh-centering">
-    <ld-thumbnail :item="audioItem" />
+    <ld-thumbnail :item="item" />
     <audio :class="$style.player" :src="itemResourceUrl" preload="auto" controls>
       <a
         :download="itemFileName"
@@ -36,14 +36,14 @@ import Navigation from "@/services/navigation";
 
 @Component
 export default class LdAudioViewer extends Vue {
-  @Prop({ required: true }) readonly audioItem!: Gallery.Audio;
+  @Prop({ required: true }) readonly item!: Gallery.Audio;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.audioItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
   }
 
   get itemFileName(): string {
-    return Navigation.getFileName(this.audioItem);
+    return Navigation.getFileName(this.item);
   }
 }
 </script>
diff --git a/viewer/src/components/item_handlers/LdDirectory.vue b/viewer/src/components/item_handlers/LdDirectory.vue
new file mode 100644
index 0000000..f7fa33f
--- /dev/null
+++ b/viewer/src/components/item_handlers/LdDirectory.vue
@@ -0,0 +1,43 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <ld-gallery :items="orderedItems" :noresult="$t('directory.no-results')" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import Navigation from "@/services/navigation";
+
+@Component
+export default class LdDirectory extends Vue {
+  @Prop({ required: true }) readonly item!: Gallery.Directory;
+
+  mounted() {
+    this.$uiStore.toggleFullscreen(false);
+  }
+
+  get orderedItems() {
+    return Navigation.directoriesFirst(this.item.properties.items);
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/item_handlers/LdDownload.vue
index 7b09dab..7b09dab 100644
--- a/viewer/src/components/LdDownload.vue
+++ b/viewer/src/components/item_handlers/LdDownload.vue
diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/item_handlers/LdPdfViewer.vue
index b1f6c64..6471aac 100644
--- a/viewer/src/components/LdPdfViewer.vue
+++ b/viewer/src/components/item_handlers/LdPdfViewer.vue
@@ -24,7 +24,7 @@
     <!-- prefer native browser PDF viewer if available -->
     <object class="fill" :data="itemResourceUrl" type="application/pdf">
       <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) -->
-      <ld-download :item="pdfItem" />
+      <ld-download :item="item" />
     </object>
   </div>
 </template>
@@ -34,10 +34,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class LdPdfViewer extends Vue {
-  @Prop({ required: true }) readonly pdfItem!: Gallery.PDF;
+  @Prop({ required: true }) readonly item!: Gallery.PDF;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.pdfItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
   }
 }
 </script>
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/item_handlers/LdPicture.vue
index 78829ec..3809e4d 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/item_handlers/LdPicture.vue
@@ -31,7 +31,7 @@
   >
     <v-lazy-image
       ref="imageElement"
-      :src="pictureSrc(picture.properties.resource)"
+      :src="pictureSrc(item.properties.resource)"
       class="ld-picture-element"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
@@ -48,7 +48,7 @@ import DragScrollClickFix from "@/services/dragscrollclickfix";
 
 @Component
 export default class LdPicture extends Vue {
-  @Prop({ required: true }) readonly picture!: Gallery.Picture;
+  @Prop({ required: true }) readonly item!: Gallery.Picture;
   @Ref() readonly containerElement!: HTMLDivElement;
   @Ref() readonly imageElement!: Vue;
 
@@ -61,7 +61,13 @@ export default class LdPicture extends Vue {
 
   mounted() {
     this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
-    new LdZoom(this.containerElement, this.imageElement.$el as HTMLImageElement, this.picture.properties, 10, 1 / 5).install();
+    new LdZoom(
+      this.containerElement,
+      this.imageElement.$el as HTMLImageElement,
+      this.item.properties,
+      10,
+      1 / 5
+    ).install();
   }
 
   destroyed() {
@@ -82,8 +88,8 @@ export default class LdPicture extends Vue {
   generateSlowLoadingStyle() {
     this.clearSlowLoading();
     this.loader = true;
-    if (this.picture.thumbnail) {
-      const url = this.pictureSrc(this.picture.thumbnail.resource);
+    if (this.item.thumbnail) {
+      const url = this.pictureSrc(this.item.thumbnail.resource);
       this.slowLoadingStyle = `background-image: url('${url}');`;
     }
   }
diff --git a/viewer/src/components/LdPlainTextViewer.vue b/viewer/src/components/item_handlers/LdPlainTextViewer.vue
index 5c32470..cd26d9d 100644
--- a/viewer/src/components/LdPlainTextViewer.vue
+++ b/viewer/src/components/item_handlers/LdPlainTextViewer.vue
@@ -31,10 +31,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class LdPlainTextViewer extends Vue {
-  @Prop({ required: true }) readonly plainTextItem!: Gallery.PlainText;
+  @Prop({ required: true }) readonly item!: Gallery.PlainText;
 
   get itemResourceUrl(): string {
-    return this.$galleryStore.resourceRoot + this.plainTextItem.properties.resource;
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
   }
 }
 </script>
diff --git a/viewer/src/components/LdVideoViewer.vue b/viewer/src/components/item_handlers/LdVideoViewer.vue
index b7a7c35..67203a5 100644
--- a/viewer/src/components/LdVideoViewer.vue
+++ b/viewer/src/components/item_handlers/LdVideoViewer.vue
@@ -28,7 +28,7 @@
       preload="auto"
       controls