[FINNA-2034] Model viewer: start downloading model after the user pre…

…sses the button (NatLibFi#3021)
LuomaJuha · Sep 11, 2024 · aaa0996 · aaa0996
1 parent b311804
commit aaa0996
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 34 deletions.
diff --git a/module/Finna/src/Finna/AjaxHandler/GetModel.php b/module/Finna/src/Finna/AjaxHandler/GetModel.php
@@ -147,7 +147,7 @@ public function handleRequest(Params $params)
             return $this->formatResponse(compact('url'));
         } else {
             return $this->formatResponse(
-                ['json' => ['status' => self::STATUS_HTTP_ERROR]]
+                ['status' => self::STATUS_HTTP_ERROR]
             );
         }
     }

diff --git a/themes/finna2/js/finna-image-paginator.js b/themes/finna2/js/finna-image-paginator.js
@@ -949,7 +949,7 @@ FinnaPaginator.prototype.setTrigger = function setTrigger(imagePopup) {
   }
   if (imageType === 'model') {
     _.viewer = document.createElement('finna-model-viewer');
-    _.viewer.proxy = `${VuFind.path}/AJAX/JSON?${imagePopup.data('params')}`;
+    _.viewer.src = `${VuFind.path}/AJAX/JSON?${imagePopup.data('params')}`;
     _.viewer.texture = `${VuFind.path}${imagePopup.data('texture')}`;
     _.viewer.scripts = `${VuFind.path}${imagePopup.data('scripts')}`;
     _.viewer.translations = _.settings.modelTranslations;
@@ -959,6 +959,7 @@ FinnaPaginator.prototype.setTrigger = function setTrigger(imagePopup) {
     }
     _.trigger.append(_.viewer);
     _.trigger.trigger('removeclick.finna');
+    _.trigger.removeClass('no-image');
     _.trigger.on('click', (e) => { e.preventDefault(); });
   } else {
     _.trigger.finnaPopup({

diff --git a/themes/finna2/js/finna-model-viewer.js b/themes/finna2/js/finna-model-viewer.js
@@ -1,4 +1,4 @@
-/* global THREE, ObjectEditor */
+/* global THREE, ObjectEditor, VuFind */
 
 /**
  * Get tangent
@@ -16,7 +16,7 @@ var dracoLoader;
 class ModelViewerClass extends HTMLElement {
 
   static get observedAttributes() {
-    return ['lazyload', 'proxy', 'scripts'];
+    return ['lazyload', 'scripts'];
   }
 
   get scripts() {
@@ -35,14 +35,6 @@ class ModelViewerClass extends HTMLElement {
     this.setAttribute('src', newValue);
   }
 
-  get proxy() {
-    return this.getAttribute('proxy');
-  }
-
-  set proxy(newValue) {
-    this.setAttribute('proxy', newValue);
-  }
-
   get texture() {
     return this.getAttribute('texture');
   }
@@ -429,12 +421,23 @@ class ModelViewerClass extends HTMLElement {
       if (!this.dependenciesLoaded) {
         return;
       }
-      if (!this.src) {
-        console.error('Missing src from model-viewer');
-        return;
-      }
-      this.createElement();
-    });
+      this.changeLoadInfoButtonToStateDisplay();
+      /**
+       * Start to load the model from the provider to cache
+       */
+      this.loadInfo.innerHTML = `<span>${this.translations['loading file'] || 'Model loading.'} ${VuFind.spinner()}</span>`;
+      fetch(this.src)
+        .then(response => response.json())
+        .then(responseJSON => {
+          if (responseJSON.data && responseJSON.data.url) {
+            this.src = responseJSON.data.url;
+            this.createElement();
+            return;
+          }
+          this.loadInfo.textContent = this.translations['An error has occurred'] || 'An error has occurred';
+        });
+    }, {once: true});
+
     this.root.append(this.loadInfo);
     const highlight = () => {
       this.root.classList.add('filedrop');
@@ -463,18 +466,9 @@ class ModelViewerClass extends HTMLElement {
     });
   }
 
-  attributeChangedCallback(name, oldValue, newValue)
+  attributeChangedCallback(name/*, oldValue, newValue*/)
   {
     switch (name) {
-    case 'proxy':
-      if (!this.src) {
-        fetch(newValue)
-          .then(response => response.json())
-          .then(responseJSON => {
-            this.src = responseJSON.data.url;
-          });
-      }
-      break;
     case 'scripts':
       this.load();
       break;
@@ -524,7 +518,6 @@ class ModelViewerClass extends HTMLElement {
 
   createElement()
   {
-    this.loadInfo.remove();
     if (this.preview) {
       this.preview.remove();
       delete this.preview;
@@ -534,10 +527,6 @@ class ModelViewerClass extends HTMLElement {
     this.loaded = false;
     this.scene = new THREE.Scene();
 
-    this.loadInfo = document.createElement('div');
-    this.loadInfo.classList.add('state');
-    this.root.append(this.loadInfo);
-
     const optionsArea = document.createElement('div');
     optionsArea.classList.add('options');
     this.root.append(optionsArea);
@@ -638,9 +627,19 @@ class ModelViewerClass extends HTMLElement {
     );
   }
 
+  /**
+   * Changes the button which is used to start the model download process into a state div
+   */
+  changeLoadInfoButtonToStateDisplay()
+  {
+    this.loadInfo.remove();
+    this.loadInfo = document.createElement('div');
+    this.loadInfo.classList.add('state');
+    this.root.append(this.loadInfo);
+  }
+
   loadGLTF()
   {
-    this.loadInfo.textContent = this.translations['loading file'] || 'Model loading.';
     if (!loader) {
       loader = new THREE.GLTFLoader();
       if (this.decoder) {

diff --git a/themes/finna2/less/finna/record.less b/themes/finna2/less/finna/record.less
@@ -817,6 +817,9 @@ finna-model-viewer {
     font-weight: 500;
     line-height: 1.5;
     border-radius: 4px;
+    span.fa-spinner::before {
+      color: white;
+    }
   }
   &.fullscreen {
     position: absolute;