Merge branch 'develop' into feature/#327-make-the-theme-switch-configurable

src/App.vue

@@ -25,6 +25,7 @@
         :contentindex="contentindex"
         :contenttypes="contentTypes"
         :contenturls="contentUrls"
+        :errormessage="errormessage"
         :fontsize="fontsize"
         :imageurl="imageurl"
         :isloading="isLoading"
@@ -65,6 +66,7 @@ export default {
       contentindex: 0,
       contentTypes: [],
       contentUrls: [],
+      errormessage: false,
       fontsize: 16,
       imageurl: '',
       isCollection: false,
@@ -270,6 +272,18 @@ export default {
           if (data.annotationCollection) {
             this.getAnnotations(data.annotationCollection);
           }
+
+          fetch(this.imageurl).then((response) => {
+            if (response.status === 200 || response.status === 201) {
+              this.errormessage = false;
+            } else {
+              // for vpn error.
+              this.errormessage = true;
+            }
+          }).catch(() => {
+            // for CORS error.
+            this.errormessage = true;
+          });
         });
     },
     /**

src/components/annotations/annotations.vue

@@ -386,23 +386,38 @@ export default {
     },
 
     onMouseHover(el, annotationClasses) {
-      const queue = [];
+      const innerQueue = [];
 
-      // this logic checks the child spans and classes.
-      queue.push(el);
+      // this logic checks the child spans and their classes.
+      innerQueue.push(el);
       let matched = false;
 
-      while (queue.length) {
-        const popped = queue.pop();
+      while (innerQueue.length) {
+        const popped = innerQueue.pop();
         if (parseInt(popped.getAttribute('data-annotation-level'), 10) > 0) {
           matched = true;
         } else {
           [...popped.children].forEach((child) => {
-            queue.push(child);
+            innerQueue.push(child);
           });
         }
       }
 
+      // this logic checks the outer spans and their classes.
+      if (!matched) {
+        const outerQueue = [];
+        outerQueue.push(el);
+
+        while (outerQueue.length) {
+          const popped = outerQueue.pop();
+          if (parseInt(popped.getAttribute('data-annotation-level'), 10) > 0) {
+            matched = true;
+          } else if (popped.parentElement.getAttribute('data-annotation')) {
+            outerQueue.push(popped.parentElement);
+          }
+        }
+      }
+
       if (!el || !matched) {
         return;
       }

src/components/notification.vue

@@ -16,7 +16,8 @@
     <q-separator inset />
 
     <q-card-section class="text-body2 text-center">
-      {{ message }}
+      <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
+      <span v-html="message" />
     </q-card-section>
   </q-card>
 </template>

src/components/openseadragon.vue

 <template>
+  <div
+    v-if="errormessage"
+    class="q-pa-sm"
+  >
+    <Notification
+      :message="$t(messages.none)"
+      :notification-colors="config.notificationColors"
+      title-key="imageErrorTitle"
+      type="warning"
+    />
+  </div>
   <figure
+    v-else
     id="openseadragon"
     class="item"
   >
@@ -35,9 +47,22 @@ import {
   fasCompressArrowsAlt,
 } from '@quasar/extras/fontawesome-v5';
 
+import Notification from '@/components/notification.vue';
+
 export default {
   name: 'OpenSeadragon',
+  components: {
+    Notification,
+  },
   props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+    errormessage: {
+      type: Boolean,
+      default: () => false,
+    },
     imageurl: {
       type: String,
       default: () => '',
@@ -63,9 +88,16 @@ export default {
         homeButton: 'default',
         fullPageButton: 'fullscreen',
       },
+      messages: {
+        none: 'imageErrorMessage',
+      },
     };
   },
   mounted() {
+    if (this.errormessage) {
+      return;
+    }
+
     const viewer = new OpenSeadragon.Viewer(this.options);
     viewer.controlsFadeDelay = 1000;
 

src/i18n/de/index.js

@@ -18,6 +18,12 @@ export default {
   Editors: 'Herausgeber',
   hide: 'Verstecke',
   Image: 'Digitalisat',
+  imageErrorMessage: 'Einige Bilder stehen Ihnen außerhalb des Netzwerks der'
+  + ' Georg-August-Universität Göttingen nicht ohne VPN-Zugang zur Verfügung. '
+  + 'Wenn Sie Zugang erhalten möchten, nutzen Sie bitte die Anleitung der GWDG zum'
+  + ' <a href="https://docs.gwdg.de/doku.php?id=en:services:network_services:vpn:start"'
+  + 'target="_blank"> Netzwerk-Service VPN</a>.',
+  imageErrorTitle: 'Keine Bild Verfügbar',
   imageLicense: 'Bildlizenz',
   imageNotes: 'Bildnotizen',
   Increase: 'Vergrössern',

src/i18n/en-us/index.js

@@ -18,6 +18,11 @@ export default {
   Editors: 'Editors',
   hide: 'Hide',
   Image: 'Image',
+  imageErrorMessage: 'Some images are not available outside of the VPN (Virtual Private Network)'
+  + ' of the Georg-August-University Goettingen. If you like to get access please refer to the'
+  + 'guide at <a href="https://docs.gwdg.de/doku.php?id=en:services:network_services:vpn:start"'
+  + 'target="_blank"> Network Services VPN</a>.',
+  imageErrorTitle: 'No Image Available',
   imageLicense: 'Image License',
   imageNotes: 'Image Notes',
   Increase: 'Increase',

src/views/mainview.vue

@@ -113,6 +113,10 @@ export default {
       type: String,
       default: () => '',
     },
+    errormessage: {
+      type: Boolean,
+      default: () => false,
+    },
     isloading: {
       type: Boolean,
       default: false,