From 898ff763a1e9b482d87acd017fb3d0a3ff0f3e93 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Thu, 22 Jun 2023 08:32:25 +0000
Subject: Erweiterung des Galerie Blocks

Closes #2016

Merge request studip/studip!1465
---
 lib/models/Courseware/BlockTypes/Gallery.json      |   9 +
 lib/models/Courseware/BlockTypes/Gallery.php       |   6 +-
 resources/assets/stylesheets/scss/courseware.scss  |  52 ++++-
 .../courseware/CoursewareGalleryBlock.vue          | 239 +++++++++++++++------
 4 files changed, 229 insertions(+), 77 deletions(-)

diff --git a/lib/models/Courseware/BlockTypes/Gallery.json b/lib/models/Courseware/BlockTypes/Gallery.json
index a71ca36..205816c 100644
--- a/lib/models/Courseware/BlockTypes/Gallery.json
+++ b/lib/models/Courseware/BlockTypes/Gallery.json
@@ -5,6 +5,9 @@
         "folder_id": {
             "type": "string"
         },
+        "layout": {
+            "type": "string"
+        },
         "autoplay": {
             "type": "string"
         },
@@ -17,9 +20,15 @@
         "height": {
             "type": "string"
         },
+        "cols": {
+            "type": "string"
+        },
         "show_filenames": {
             "type": "string"
         },
+        "show_description": {
+            "type": "string"
+        },
         "mouseover_filenames": {
             "type": "string"
         }
diff --git a/lib/models/Courseware/BlockTypes/Gallery.php b/lib/models/Courseware/BlockTypes/Gallery.php
index 7363a7c..5f9bb0b 100644
--- a/lib/models/Courseware/BlockTypes/Gallery.php
+++ b/lib/models/Courseware/BlockTypes/Gallery.php
@@ -59,6 +59,7 @@ class Gallery extends BlockType
                     'name'          => $folderFile->name,
                     'mime-type'     => $folderFile->mime_type,
                     'filesize'      => (int) $folderFile->size,
+                    'description'   => $fileRef->description,
                     'mkdate'        => date('c', $folderFile->mkdate),
                 ];
                 $file['relationships'] = [
@@ -89,11 +90,14 @@ class Gallery extends BlockType
     {
         return [
             'folder_id' => '',
+            'layout' => 'carousel',
             'autoplay' => 'false',
             'autoplay_timer' => '2',
             'nav' => 'true',
-            'height' => '610',
+            'height' => '620',
+            'cols' => '25',
             'show_filenames' => 'true',
+            'show_description' => 'false',
             'mouseover_filenames' => 'false',
         ];
     }
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 1d3c1fe..77e8491 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -3807,17 +3807,22 @@ g a l l e r y  b l o c k
     }
 }
 
-.cw-block-gallery-file-name {
-    color: $white;
+.cw-block-gallery-file-description {
+    width: -moz-available;
+    color: var(--white);
     font-size: 15px;
     padding: 8px 12px;
     position: absolute;
     bottom: 8px;
-    width: 100%;
     text-align: center;
-    span {
+    p {
+        display: -webkit-inline-box;
         background-color: fade-out($black, 0.6);
-        padding: 0.5em;
+        padding: 0 2em;
+        margin-bottom: 4px;
+        overflow: hidden;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
     }
 
     &.show-on-hover {
@@ -3830,7 +3835,7 @@ g a l l e r y  b l o c k
 }
 
 .cw-block-gallery-number-text {
-    color: $white;
+    color: var(--white);
     font-size: 12px;
     padding: 8px 12px;
     position: absolute;
@@ -3855,6 +3860,41 @@ g a l l e r y  b l o c k
     to {opacity: 1}
 }
 
+
+.cw-block-gallery-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    list-style: none;
+    padding: 0;
+    figure {
+        padding: 1px 4px;
+        margin: unset;
+        figcaption {
+            margin-bottom: 12px;
+
+            .cw-block-gallery-grid-file-name {
+                font-weight: 700;
+                margin-bottom: 4px;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+            .cw-block-gallery-grid-file-description {
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}
+.cw-container-wrapper-edit .cw-block-gallery-grid {
+    margin: 0;
+}
+
 /* * * * * * * * * * * * * * * * *
 g a l l e r y  b l o c k  e n d
 * * * * * * * * * * * * * * * * */
diff --git a/resources/vue/components/courseware/CoursewareGalleryBlock.vue b/resources/vue/components/courseware/CoursewareGalleryBlock.vue
index f6d41ab..ff730d0 100644
--- a/resources/vue/components/courseware/CoursewareGalleryBlock.vue
+++ b/resources/vue/components/courseware/CoursewareGalleryBlock.vue
@@ -10,82 +10,152 @@
             @closeEdit="closeEdit"
         >
             <template #content>
-                <div v-if="files.length !== 0" class="cw-block-gallery-content" :style="{ 'max-height': currentHeight + 'px' }">
-                    <div
-                        v-for="(image, index) in files"
-                        :key="image.id"
-                        ref="images"
-                        class="cw-block-gallery-slides cw-block-gallery-fade"
-                    >
-                        <div class="cw-block-gallery-number-text">{{ index + 1 }} / {{ files.length }}</div>
-                        <img
-                            :src="image.meta['download-url']"
-                            :style="{ 'max-height': currentHeight + 'px' }"
-                            @load="
-                                if (files.length - 1 === index) {
-                                    startGallery();
-                                }
-                            "
-                        />
-                        <div v-if="currentShowFileNames === 'true' && image?.attributes?.name" class="cw-block-gallery-file-name"
-                            :class="{'show-on-hover': currentMouseoverFileNames === 'true'}">
-                            <span>{{ image.attributes.name }}</span>
+                <template v-if="files.length !== 0">
+                    <div v-if="currentLayout === 'carousel'" class="cw-block-gallery-content" :style="{ height: `${currentHeight}px` }">
+                        <div
+                            v-for="(image, index) in files"
+                            :key="image.id"
+                            ref="images"
+                            class="cw-block-gallery-slides cw-block-gallery-fade"
+                        >
+                            <div class="cw-block-gallery-number-text">{{ index + 1 }} / {{ files.length }}</div>
+                            <img
+                                :src="image.meta['download-url']"
+                                :style="{ height: `${currentHeight}px` }"
+                                @load="
+                                    if (files.length - 1 === index) {
+                                        startGallery();
+                                    }
+                                "
+                            />
+                            <div class="cw-block-gallery-file-description"
+                                :class="{'show-on-hover': currentMouseoverFileNames === 'true'}">
+                                <p v-if="currentShowFileNames === 'true'">{{ image?.attributes?.name }}</p>
+                                <p v-if="currentShowFileDescription === 'true'">{{ image?.attributes?.description }}</p>
+                            </div>
+                        </div>
+                        <div v-if="currentNav === 'true'">
+                            <a class="cw-block-gallery-prev" @click="plusSlides(-1)"></a>
+                            <a class="cw-block-gallery-next" @click="plusSlides(1)"></a>
                         </div>
                     </div>
-                    <div v-if="currentNav === 'true'">
-                        <a class="cw-block-gallery-prev" @click="plusSlides(-1)"></a>
-                        <a class="cw-block-gallery-next" @click="plusSlides(1)"></a>
+                    <div v-if="currentLayout === 'grid'" class="cw-block-gallery-content">
+                        <div class="cw-block-gallery-grid formatted-content">
+                            <figure
+                                v-for="image in files"
+                                :key="image.id"
+                                :style="{ 'max-width': gridWidth }"
+                            >
+                                <img :src="image.meta['download-url']" :title="image?.attributes?.name"/>
+                                <figcaption v-if="showDescription">
+                                    <p v-if="currentShowFileNames === 'true'" class="cw-block-gallery-grid-file-name">
+                                        {{ image?.attributes?.name }}
+                                    </p>
+                                    <p v-if="currentShowFileDescription === 'true'" class="cw-block-gallery-grid-file-description">
+                                        {{ image?.attributes?.description }}
+                                    </p>
+                                </figcaption>
+                            </figure>
+                        </div>
                     </div>
-                </div>
+                </template>
             </template>
             <template v-if="canEdit" #edit>
-                <form class="default" @submit.prevent="">
-                    <label>
-                        <translate>Ordner</translate>
-                        <courseware-folder-chooser v-model="currentFolderId" allowUserFolders />
-                    </label>
-                    <label>
-                        <translate>Maximale Höhe</translate>
-                        <input type="number" min="0" max="800" v-model="currentHeight" />
-                    </label>
-                    <label>
-                        <translate>Autoplay</translate>
-                        <select v-model="currentAutoplay">
-                            <option value="true"><translate>Ja</translate></option>
-                            <option value="false"><translate>Nein</translate></option>
-                        </select>
-                    </label>
-                    <label v-if="currentAutoplay === 'true'">
-                        <translate>Autoplay Timer in Sekunden</translate>
-                        <input type="number" min="1" max="60" v-model="currentAutoplayTimer" />
-                    </label>
-                    <label v-if="currentAutoplay === 'true'">
-                        <translate>Navigation</translate>
-                        <select v-model="currentNav">
-                            <option value="true"><translate>Ja</translate></option>
-                            <option value="false"><translate>Nein</translate></option>
-                        </select>
-                    </label>
-                    <label>
-                        <translate>Dateinamen anzeigen</translate>
-                        <select v-model="currentShowFileNames">
-                            <option value="true"><translate>Ja</translate></option>
-                            <option value="false"><translate>Nein</translate></option>
-                        </select>
-                    </label>
-                    <label v-if="currentShowFileNames === 'true'">
-                        {{ $gettext('Dateiname erscheint bei Mouseover') }}
-                        <studip-tooltip-icon
-                            :text="$gettext('Der Dateiname wird angezeigt, wenn Sie den Mauszeiger über den Inhalt bewegen.')"/>
-                        <select v-model="currentMouseoverFileNames">
-                            <option value="true"><translate>Ja</translate></option>
-                            <option value="false"><translate>Nein</translate></option>
-                        </select>
-                    </label>
-                </form>
+                <courseware-tabs>
+                    <courseware-tab
+                        :index="0"
+                        :name="$gettext('Einstellungen')"
+                        :selected="true"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Layout') }}
+                                <select v-model="currentLayout">
+                                    <option value="carousel">{{ $gettext('Karussell') }}</option>
+                                    <option value="grid">{{ $gettext('Gitter') }}</option>
+                                </select>
+                            </label>
+                            <label>
+                                {{ $gettext('Ordner') }}
+                                <courseware-folder-chooser v-model="currentFolderId" allowUserFolders />
+                            </label>
+                            <label v-if="currentLayout === 'carousel'">
+                                {{ $gettext('Höhe') }}
+                                <input type="number" min="0" max="800" v-model="currentHeight" />
+                            </label>
+                            <label v-if="currentLayout === 'grid'">
+                                {{ $gettext('Gitter-Spalten') }}
+                                <select v-model="currentCols">
+                                    <option :value="100">1</option>
+                                    <option :value="50">2</option>
+                                    <option :value="33">3</option>
+                                    <option :value="25">4</option>
+                                    <option :value="20">5</option>
+                                </select>
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        :index="1"
+                        :name="$gettext('Beschreibung')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Dateinamen anzeigen') }}
+                                <select v-model="currentShowFileNames">
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                </select>
+                            </label>
+                            <label>
+                                {{ $gettext('Dateibeschreibung anzeigen') }}
+                                <select v-model="currentShowFileDescription">
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                </select>
+                            </label>
+                            <label v-if="showDescription && currentLayout === 'carousel'">
+                                {{ $gettext('Beschreibung erscheint bei Mouseover') }}
+                                <studip-tooltip-icon
+                                    :text="$gettext('Der Beschreibungstext wird angezeigt, wenn Sie den Mauszeiger über das Bild bewegen.')"/>
+                                <select v-model="currentMouseoverFileNames">
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                </select>
+                            </label>
+                        </form>
+                    </courseware-tab>
+                    <courseware-tab
+                        v-if="currentLayout === 'carousel'"
+                        :index="2"
+                        :name="$gettext('Autoplay')"
+                    >
+                        <form class="default" @submit.prevent="">
+                            <label>
+                                {{ $gettext('Autoplay') }}
+                                <select v-model="currentAutoplay">
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                </select>
+                            </label>
+                            <label v-if="currentAutoplay === 'true'">
+                                {{ $gettext('Autoplay Timer in Sekunden') }}
+                                <input type="number" min="1" max="60" v-model="currentAutoplayTimer" />
+                            </label>
+                            <label v-if="currentAutoplay === 'true'">
+                                {{ $gettext('Navigation') }}
+                                <select v-model="currentNav">
+                                    <option value="true">{{ $gettext('Ja') }}</option>
+                                    <option value="false">{{ $gettext('Nein') }}</option>
+                                </select>
+                            </label>
+                        </form>
+                    </courseware-tab>
+
+                </courseware-tabs>
             </template>
             <template #info>
-                <p><translate>Informationen zum Galerie-Block</translate></p>
+                <p>{{ $gettext('Informationen zum Galerie-Block') }}</p>
             </template>
         </courseware-default-block>
     </div>
@@ -94,6 +164,8 @@
 <script>
 import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
 import CoursewareFolderChooser from './CoursewareFolderChooser.vue';
+import CoursewareTabs from './CoursewareTabs.vue';
+import CoursewareTab from './CoursewareTab.vue';
 import { blockMixin } from './block-mixin.js';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -103,6 +175,8 @@ export default {
     components: {
         CoursewareDefaultBlock,
         CoursewareFolderChooser,
+        CoursewareTabs,
+        CoursewareTab,
     },
     props: {
         block: Object,
@@ -112,10 +186,13 @@ export default {
     data() {
         return {
             currentFolderId: '',
+            currentLayout: '',
             currentAutoplay: '',
             currentNav: '',
             currentHeight: '',
+            currentCols: 33,
             currentShowFileNames: '',
+            currentShowFileDescription: '',
             currentMouseoverFileNames: '',
             currentAutoplayTimer: '',
             editModeFiles: [],
@@ -132,6 +209,9 @@ export default {
         folderId() {
             return this.block?.attributes?.payload?.folder_id;
         },
+        layout() {
+            return this.block?.attributes?.payload?.layout ?? 'carousel';
+        },
         autoplay() {
             return this.block?.attributes?.payload?.autoplay;
         },
@@ -144,9 +224,15 @@ export default {
         height() {
             return this.block?.attributes?.payload?.height;
         },
+        cols() {
+            return this.block?.attributes?.payload?.cols;
+        },
         showFileNames() {
             return this.block?.attributes?.payload?.show_filenames;
         },
+        showFileDescription() {
+            return this.block?.attributes?.payload?.show_description ?? 'false';
+        },
         mouseoverFileNames() {
             return this.block?.attributes?.payload?.mouseover_filenames ?? 'false';
         },
@@ -155,6 +241,12 @@ export default {
                 return this.block?.attributes?.payload?.files;
             }
             return this.editModeFiles;
+        },
+        gridWidth() {
+            return 'calc(' + this.currentCols + '% - 8px)';
+        },
+        showDescription() {
+            return this.currentShowFileNames === 'true' || this.currentShowFileDescription === 'true';
         }
     },
     mounted() {
@@ -167,11 +259,14 @@ export default {
         }),
         initCurrentData() {
             this.currentFolderId = this.folderId;
+            this.currentLayout = this.layout;
             this.currentAutoplay = this.autoplay;
             this.currentAutoplayTimer = this.autoplayTimer;
             this.currentNav = this.nav;
             this.currentHeight = this.height;
+            this.currentCols = this.cols;
             this.currentShowFileNames = this.showFileNames;
+            this.currentShowFileDescription = this.showFileDescription;
             this.currentMouseoverFileNames = this.mouseoverFileNames;
         },
         startGallery() {
@@ -205,7 +300,8 @@ export default {
                 .map((file) => ({
                     id: file.id,
                     attributes: {
-                        name: file.attributes.name
+                        name: file.attributes.name,
+                        description: file.attributes.description
                     },
                     meta: {
                         'download-url': this.urlHelper.getURL(
@@ -228,11 +324,14 @@ export default {
             let attributes = {};
             attributes.payload = {};
             attributes.payload.folder_id = this.currentFolderId;
+            attributes.payload.layout = this.currentLayout;
             attributes.payload.autoplay = this.currentAutoplay;
             attributes.payload.autoplay_timer = this.currentAutoplayTimer;
             attributes.payload.nav = this.currentNav;
             attributes.payload.height = this.currentHeight;
+            attributes.payload.cols = this.currentCols;
             attributes.payload.show_filenames = this.currentShowFileNames;
+            attributes.payload.show_description = this.currentShowFileDescription;
             attributes.payload.mouseover_filenames = this.currentMouseoverFileNames;
 
             this.updateBlock({
-- 
cgit v1.0