Merge pull request #4989 from sul-dlss/preview-with-turbolinks

Load brief preview with turbo-frame

Author: cbeer

app/components/search_result/document_brief_component.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="preview-brief" data-preview-brief-url-value="<%= preview_path(document[:id]) %>">
+<div data-controller="preview-brief">
   <div class="brief-document container-fluid">
     <div class="row brief-container">
       <div class="col-md-10">
@@ -44,5 +44,6 @@
   </div>
   <div class="container-fluid preview-container brief-preview-container" data-preview-brief-target="preview">
     <div class='preview-arrow'></div>
+    <turbo-frame id="preview_<%= document[:id] %>" src="<%= preview_path(document[:id]) %>" loading="lazy"></turbo-frame>
   </div>
 </div>

app/javascript/controllers/preview_brief_controller.js

@@ -2,24 +2,14 @@ import { Controller } from "@hotwired/stimulus"
 import PreviewContent from '../preview-content'
 
 export default class extends Controller {
-  static values = {
-    url: String
-  }
-
   static targets = ["preview", "showButton", "hideButton"]
 
   showPreview() {
     this.previewTarget.classList.add('preview')
-    this.appendPointer()
-    PreviewContent.append(this.urlValue, $(this.previewTarget));
     this.showButtonTarget.hidden = true
     this.hideButtonTarget.hidden = false
   }
 
-  appendPointer() {
-    this.previewTarget.innerHTML = '<div class="preview-arrow"></div>'
-  }
-
   closePreview() {
     this.previewTarget.classList.remove('preview')
     this.showButtonTarget.hidden = false

app/views/preview/show.html.erb

@@ -1,2 +1,4 @@
-<%= render_document_partial @document, 'show_header' %>
-<%= render_document_partial @document, 'show' %>
+<turbo-frame id="preview_<%= @document[:id] %>">
+  <%= render_document_partial @document, 'show_header' %>
+  <%= render_document_partial @document, 'show' %>
+</turbo-frame>

spec/features/brief_view_spec.rb

@@ -12,13 +12,13 @@
     end
     expect(page).to have_css("i.fa.fa-align-justify")
 
-    within '[data-preview-brief-url-value="/preview/1"]' do
+    within '[data-controller="preview-brief"]:has(a[href="/view/1"])' do
       expect(page).to have_css(".brief-document h3.index_title", text: "An object")
       expect(page).to have_css('.brief-document ul li', text: 'Earth Sciences Library (Branner) : Stacks : G70.212 .A426 2011')
       expect(page).to have_css(".brief-document button.btn-preview", text: "Preview")
       expect(page).to have_css("form.bookmark-toggle label.toggle-bookmark", text: "Select")
     end
-    within '[data-preview-brief-url-value="/preview/10"]' do
+    within '[data-controller="preview-brief"]:has(a[href="/view/10"])' do
       expect(page).to have_css('.brief-document ul li', text: 'SAL3 (off-campus storage) : Stacks : HF1604 .G368 2024')
       expect(page).to have_css('.brief-document ul li', text: 'Engineering Library (Terman) : Periodicals : (no call number)')
       expect(page).to have_css('.brief-document ul li', text: 'Engineering Library (Terman) : Stacks : CBA')