Fix issue previweing and realoding assets on hover and after viewmode change [SCI-8914]

app/assets/javascripts/sitewide/active_storage_previews.js

@@ -32,8 +32,8 @@ var ActiveStoragePreviews = (function() {
     },
     reloadPreview: function(target) {
       $(target)
-        .one('error', (event) => this.reCheckPreview(event))
-        .one('load', (event) => this.showPreview(event))
+        .on('error', event => this.reCheckPreview(event))
+        .on('load', event => this.showPreview(event))
         .trigger('error');
     }
   });

app/assets/javascripts/sitewide/image_editor.js

@@ -365,13 +365,10 @@ var ImageEditorModal = (function() {
         contentType: false,
         processData: false,
         success: function(res) {
-          $(`.asset[data-asset-id=${data.id}] .image-container img`)
-            .replaceWith($(res.html).find('.image-container img'));
-          $(`.asset[data-asset-id=${data.id}] .attachment-preview img`)
-            .replaceWith($(res.html).find('.attachment-preview img'));
+          $(`.asset[data-asset-id=${data.id}] img`)
+            .replaceWith($(res.html).find(`.asset[data-asset-id=${data.id}] img`));
+          ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${data.id}] img`);
           $(`.asset[data-asset-id=${data.id}]`).closest('.attachments').trigger('reorder');
-          ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${data.id}] .attachment-preview img,
-          .asset[data-asset-id=${data.id}] .image-container img`);
           closeEditor();
         }
       });

app/javascript/vue/shared/content/attachments/context_menu.vue

@@ -138,6 +138,12 @@
           type: 'PATCH',
           dataType: 'json',
           data: { asset: { view_mode: viewMode } }
+        }).done(data => {
+          this.$nextTick(function() {
+            $(`.asset[data-asset-id=${this.attachment.id}] img`)
+              .replaceWith($(data.html).find(`.asset[data-asset-id=${this.attachment.id}] img`));
+            ActiveStoragePreviews.reloadPreview(`.asset[data-asset-id=${this.attachment.id}] img`);
+          })
         });
       },
       deleteAttachment() {

app/javascript/vue/shared/content/attachments/inline.vue

@@ -57,8 +57,6 @@
     <template v-else-if="attachment.attributes.large_preview !== null">
       <div class="image-container">
         <img :src="attachment.attributes.large_preview"
-             @error="ActiveStoragePreviews.reCheckPreview"
-             @load="ActiveStoragePreviews.showPreview"
              style='opacity: 0' />
       </div>
     </template>
@@ -98,6 +96,11 @@
     },
     mounted() {
       this.showWopi = this.attachment.attributes.file_size > 0;
+      $(this.$nextTick(function() {
+        $(`.image-container img`)
+          .on('error', (event) => ActiveStoragePreviews.reCheckPreview(event))
+          .on('load', (event) => ActiveStoragePreviews.showPreview(event))
+      }))
     },
     methods: {
       reloadAsset() {

app/javascript/vue/shared/content/attachments/thumbnail.vue

@@ -4,7 +4,7 @@
        @mouseover="isHovered = true"
        @mouseleave="isHovered = false"
   >
-    <a v-if="!isHovered"
+    <a  :class="{ hidden: isHovered }"
         :href="attachment.attributes.urls.blob"
         class="file-preview-link file-name"
         :id="`modal_link${attachment.id}`"
@@ -17,8 +17,6 @@
         <img v-if="attachment.attributes.medium_preview !== null"
             class="rounded-sm"
             :src="attachment.attributes.medium_preview"
-            @error="ActiveStoragePreviews.reCheckPreview"
-            @load="ActiveStoragePreviews.showPreview"
             style='opacity: 0' />
         <div v-else class="w-[186px] h-[186px] bg-sn-super-light-grey rounded-sm"></div>
       </div>
@@ -32,7 +30,7 @@
         </span>
       </div>
     </a>
-    <div v-else class="hovered-thumbnail h-full">
+    <div :class="{ hidden: !isHovered }" class="hovered-thumbnail h-full">
       <a
         :href="attachment.attributes.urls.blob"
         class="file-preview-link file-name"
@@ -126,6 +124,25 @@
         isHovered: false,
         deleteModal: false
       };
+    },
+    mounted() {
+      $(this.$nextTick(function() {
+        $(`.attachment-preview img`)
+          .on('error', (event) => ActiveStoragePreviews.reCheckPreview(event))
+          .on('load', (event) => ActiveStoragePreviews.showPreview(event))
+      }))
+    },
+    watch: {
+      isHovered: function(newValue) {
+        // reload thumbnail on mouse out
+        if(newValue) return;
+
+        $(this.$nextTick(function() {
+          $(`.attachment-preview img`)
+            .on('error', (event) => ActiveStoragePreviews.reCheckPreview(event))
+            .on('load', (event) => ActiveStoragePreviews.showPreview(event))
+        }))
+      }
     }
   }
 </script>

app/views/assets/_asset.html.erb

@@ -10,10 +10,12 @@ partial_locals = {
   editable: editable
 }
 %>
-<% if asset.inline? %>
-    <%= render partial: 'assets/asset_inline', locals: partial_locals %>
-<% elsif asset.list? %>
-    <%= render partial: 'assets/asset_list', locals: partial_locals %>
-<% else %>
-    <%= render partial: 'assets/asset_thumbnail', locals: partial_locals %>
-<% end %>
+<div>
+    <% if asset.inline? %>
+        <%= render partial: 'assets/asset_inline', locals: partial_locals %>
+    <% elsif asset.list? %>
+        <%= render partial: 'assets/asset_list', locals: partial_locals %>
+    <% else %>
+        <%= render partial: 'assets/asset_thumbnail', locals: partial_locals %>
+    <% end %>
+</div>