use event bus to toggle display of gallery link and make sure the gallery link...

Closes #2409

Merge request studip/studip!1604

app/controllers/course/files.php

@@ -59,16 +59,6 @@ class Course_FilesController extends AuthenticatedController
             );
         }
 
-        $actions->addLink(
-            _('Bildergalerie öffnen'),
-            '#g',
-            Icon::create('file-pic', 'clickable'),
-            [
-                'onClick' => "STUDIP.Files.openGallery(); return false;",
-                'v-if' => "hasFilesOfType('image')"
-            ]
-        );
-
         if ($this->topFolder && $this->topFolder->isSubfolderAllowed($GLOBALS['user']->id)) {
             $actions->addLink(
                 _('Neuer Ordner'),
@@ -93,9 +83,18 @@ class Course_FilesController extends AuthenticatedController
             )->asDialog();
 
         }
-        $sidebar->addWidget($actions);
 
+        $actions->addLink(
+            _('Bildergalerie öffnen'),
+            '#g',
+            Icon::create('file-pic'),
+            [
+                'onClick' => "STUDIP.Files.openGallery(); return false;",
+                'style'   => 'display: none',
+            ]
+        );
 
+        $sidebar->addWidget($actions);
 
         if ($this->topFolder->isWritable($GLOBALS['user']->id)) {
             $uploadArea = new LinksWidget();
@@ -172,10 +171,10 @@ class Course_FilesController extends AuthenticatedController
         $actions->addLink(
             _('Bildergalerie öffnen'),
             '#g',
-            Icon::create('file-pic', 'clickable'),
+            Icon::create('file-pic'),
             [
                 'onClick' => "STUDIP.Files.openGallery(); return false;",
-                'v-if' => "hasFilesOfType('image')"
+                'style'   => 'display: none',
             ]
         );
         if ($GLOBALS['user']->id !== 'nobody') {

app/controllers/files.php

@@ -100,15 +100,6 @@ class FilesController extends AuthenticatedController
             );
         }
 
-        $actions->addLink(
-            _('Bildergalerie öffnen'),
-            '#g',
-            Icon::create('file-pic', 'clickable'),
-            [
-                'onClick' => "STUDIP.Files.openGallery(); return false;"
-            ]
-        );
-
         if ($folder->isWritable($GLOBALS['user']->id)) {
             $actions->addLink(
                 _('Dokument hinzufügen'),
@@ -146,6 +137,17 @@ class FilesController extends AuthenticatedController
                 )->asDialog();
             }
         }
+
+        $actions->addLink(
+            _('Bildergalerie öffnen'),
+            '#g',
+            Icon::create('file-pic'),
+            [
+                'onClick' => "STUDIP.Files.openGallery(); return false;",
+                'style'   => 'display: none',
+            ]
+        );
+
         $sidebar->addWidget($actions);
 
         if ($folder->isWritable($GLOBALS['user']->id)) {
@@ -612,10 +614,10 @@ class FilesController extends AuthenticatedController
         $actions->addLink(
             _('Bildergalerie öffnen'),
             '#g',
-            Icon::create('file-pic', 'clickable'),
+            Icon::create('file-pic'),
             [
                 'onClick' => "STUDIP.Files.openGallery(); return false;",
-                'v-if' => "hasFilesOfType('image')"
+                'style'   => 'display: none',
             ]
         );
         $sidebar->addWidget($actions);

resources/assets/javascripts/bootstrap/files.js

@@ -17,6 +17,10 @@ function searchMoreFiles (button) {
     return false;
 }
 
+STUDIP.eventBus.on('files-vue-app-updated', ({hasImages}) => {
+    $('#sidebar-actions a[onclick*="Files.openGallery"]').toggle(hasImages);
+});
+
 STUDIP.domReady(() => {
 
     STUDIP.Files.init();
@@ -49,11 +53,6 @@ STUDIP.domReady(() => {
     });
 });
 
-$(document).on('files-vue-app-loaded', () => {
-    const lightboxImages = $('.lightbox-image');
-    $('#sidebar-actions a[onclick*="Files.openGallery"]').attr('disabled', lightboxImages.length === 0);
-});
-
 jQuery(document).on('ajaxComplete', (event, xhr) => {
     if (!xhr.getResponseHeader('X-Filesystem-Changes')) {
         return;

resources/assets/javascripts/lib/files.js

@@ -29,11 +29,19 @@ const Files = {
                         },
                         removeFile(id) {
                             this.files = this.files.filter(file => file.id != id)
+                        },
+                        onUpdated() {
+                            STUDIP.eventBus.emit('files-vue-app-updated', {
+                                hasImages: this.hasFilesOfType('image'),
+                            });
                         }
                     },
                     components: { FilesTable, },
-                    mounted () {
-                        $(document).trigger('files-vue-app-loaded');
+                    updated () {
+                        this.onUpdated();
+                    },
+                    created () {
+                        this.onUpdated();
                     }
                 });
             });