From 7bbf7a9ffa03c201fc4e706289ee131b69bfb577 Mon Sep 17 00:00:00 2001
From: Farbod Zamani <zamani@elan-ev.de>
Date: Fri, 16 Dec 2022 09:32:37 +0000
Subject: CW: GalleryBlock mouseover filename new feature

Closes #1742

Merge request studip/studip!1165
---
 lib/models/Courseware/BlockTypes/Gallery.json          |  3 +++
 lib/models/Courseware/BlockTypes/Gallery.php           |  1 +
 resources/assets/stylesheets/scss/courseware.scss      |  8 ++++++++
 .../components/courseware/CoursewareGalleryBlock.vue   | 18 +++++++++++++++++-
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/lib/models/Courseware/BlockTypes/Gallery.json b/lib/models/Courseware/BlockTypes/Gallery.json
index f301000..78e2747 100644
--- a/lib/models/Courseware/BlockTypes/Gallery.json
+++ b/lib/models/Courseware/BlockTypes/Gallery.json
@@ -19,6 +19,9 @@
         },
         "show_filenames": {
             "type": "string"
+        },
+        "mouseover_filenames": {
+            "type": "string"
         }
     },
     "required": [
diff --git a/lib/models/Courseware/BlockTypes/Gallery.php b/lib/models/Courseware/BlockTypes/Gallery.php
index 9ebc9df..2ad19b9 100644
--- a/lib/models/Courseware/BlockTypes/Gallery.php
+++ b/lib/models/Courseware/BlockTypes/Gallery.php
@@ -94,6 +94,7 @@ class Gallery extends BlockType
             'nav' => 'true',
             'height' => '610',
             'show_filenames' => 'true',
+            'mouseover_filenames' => 'false',
         ];
     }
 
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 79476ba..536c5c8 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -4070,6 +4070,14 @@ g a l l e r y  b l o c k
         background-color: fade-out($black, 0.6);
         padding: 0.5em;
     }
+
+    &.show-on-hover {
+        display: none;
+    }
+}
+
+.cw-block-gallery-content:hover .show-on-hover {
+    display: block;
 }
 
 .cw-block-gallery-number-text {
diff --git a/resources/vue/components/courseware/CoursewareGalleryBlock.vue b/resources/vue/components/courseware/CoursewareGalleryBlock.vue
index 8b33147..f6d41ab 100644
--- a/resources/vue/components/courseware/CoursewareGalleryBlock.vue
+++ b/resources/vue/components/courseware/CoursewareGalleryBlock.vue
@@ -27,7 +27,8 @@
                                 }
                             "
                         />
-                        <div v-if="currentShowFileNames === 'true'" class="cw-block-gallery-file-name">
+                        <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>
                         </div>
                     </div>
@@ -72,6 +73,15 @@
                             <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>
             </template>
             <template #info>
@@ -106,6 +116,7 @@ export default {
             currentNav: '',
             currentHeight: '',
             currentShowFileNames: '',
+            currentMouseoverFileNames: '',
             currentAutoplayTimer: '',
             editModeFiles: [],
             slideIndex: 0,
@@ -136,6 +147,9 @@ export default {
         showFileNames() {
             return this.block?.attributes?.payload?.show_filenames;
         },
+        mouseoverFileNames() {
+            return this.block?.attributes?.payload?.mouseover_filenames ?? 'false';
+        },
         files() {
             if (!this.editMode) {
                 return this.block?.attributes?.payload?.files;
@@ -158,6 +172,7 @@ export default {
             this.currentNav = this.nav;
             this.currentHeight = this.height;
             this.currentShowFileNames = this.showFileNames;
+            this.currentMouseoverFileNames = this.mouseoverFileNames;
         },
         startGallery() {
             this.slideIndex = 0;
@@ -218,6 +233,7 @@ export default {
             attributes.payload.nav = this.currentNav;
             attributes.payload.height = this.currentHeight;
             attributes.payload.show_filenames = this.currentShowFileNames;
+            attributes.payload.mouseover_filenames = this.currentMouseoverFileNames;
 
             this.updateBlock({
                 attributes: attributes,
-- 
cgit v1.0