Implement Recent Items Widget

app/assets/javascripts/application.js

@@ -26,6 +26,7 @@
 //= require pom_boot
 //= require more_link
 //= require back_to_top
+//= require sir_trevor/blocks/recent_items
 
 Blacklight.onLoad(function() {
   Initializer = require('pom_boot')

app/assets/javascripts/sir_trevor/blocks/recent_items.js

@@ -0,0 +1,26 @@
+SirTrevor.Blocks.RecentItems = (function(){
+
+  return SirTrevor.Block.extend({
+    type: "recent_items",
+
+    title: function() { return "Recent Items"; },
+
+    description: function() { return "Display a list of recent items"; },
+
+    blockGroup: function() { return i18n.t("blocks:group:items") },
+
+    icon_name: "rule",
+
+    editorHTML: function() {
+      return _.template(this.template, this)(this);
+    },
+
+    template: [
+      '<div class="form resources-admin clearfix">',
+        '<div class="widget-header">',
+          '<%= description() %>',
+        '</div>',
+      '</div>'
+    ].join("\n"),
+  });
+})();

app/assets/stylesheets/application.scss

@@ -295,3 +295,160 @@ a.morelink {
 .nav-pills {
   padding-bottom: 1em;
 }
+
+#documents {
+  &.recent-items {
+
+    .document {
+      border-bottom: none;
+
+      min-width: 250px;
+      max-height: 350px;
+      min-height: 350px;
+      display: inline-block;
+      .thumbnail {
+        border: 0;
+      }
+    }
+
+    .index_title {
+      width: 100%;
+    }
+
+    .document-counter {
+      display: none;
+    }
+
+    .index-document-functions {
+      clear: left;
+    }
+
+    .document-metadata { 
+      dt, dd {
+        float: none;
+        width: auto;
+        clear: none;
+        text-align: left;
+        margin: 0;
+        padding: 0;
+      }
+
+    }
+  }
+}
+
+
+$base-font-color: black;
+$base-background-color: white;
+$base-accent-color: #eee;
+// $base-border-radius: 4px;
+$base-spacing: 1.4em;
+$gutter: 2em;
+$card-background-color: white;
+
+.cards {
+  margin: 0.5em 0;
+  padding: 0;
+  -moz-column-gap: 0.5em;
+  -webkit-column-gap: 0.5em;
+  column-gap: 0.5em;
+}
+
+.cards .card {
+  display: inline-block;
+  padding: 1em;
+  margin: 0 0 0.5em;
+  width: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  .thumbnail {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+.cards .card img {
+  width: 100%;
+}
+
+@media only screen and (min-width: $tab) {
+  .cards {
+    -moz-column-count: 2;
+    -webkit-column-count: 2;
+    column-count: 2;
+  }
+}
+
+@media only screen and (min-width: $tab-desk) {
+  .cards {
+    -moz-column-count: 3;
+    -webkit-column-count: 3;
+    column-count: 3;
+  }
+}
+
+@media only screen and (min-width: $desk) {
+  .cards {
+    -moz-column-count: 4;
+    -webkit-column-count: 4;
+    column-count: 4;
+  }
+}
+
+.cards {
+  @include clearfix;
+}
+
+.card {
+  $card-border-color: #ddd;
+  $card-border: none;//1px solid $card-border-color;
+  $card-background: lighten($card-background-color,2);
+  $card-header-background: $card-background;
+  $card-hover-background: lighten($card-background, 5);
+  $card-image-background: #DBD199;
+  $card-image-hover-background: lighten($card-image-background, 5);
+
+  @include transition (all 0.2s ease-in-out);
+  background-color: $card-background;
+  border: $card-border;
+  margin-bottom: $base-spacing*1.5;
+  padding: 0 1em;
+  cursor: pointer;
+  position: relative;
+
+  a {
+    text-decoration: none;
+  }
+
+  img {
+    width: 100%;
+    @include transition (all 0.2s ease-in-out);
+    background: $card-image-background;
+  }
+
+  .card-header {
+    padding-top: 0.7em;
+  }
+
+  &:hover {
+    background-color: $card-hover-background;
+
+    .card-image img {
+      background: $card-image-hover-background;
+    }
+
+    .card-header {
+      background-color: $card-hover-background;
+    }
+  }
+
+  &:active {
+    background-color: $card-background;
+
+    .card-header {
+      background-color: $card-background;
+    }
+  }
+}

app/sir_trevor_blocks/recent_items_block.rb

@@ -0,0 +1,13 @@
+class RecentItemsBlock < SirTrevorRails::Blocks::SolrDocumentsBlock
+  def documents
+    search_results.last
+  end
+
+  def search_results
+    @search_results ||= solr_helper.search_results(user_query)
+  end
+
+  def user_query
+    Blacklight::SearchState.new({ sort: "timestamp DESC", rows: 9 }, blacklight_config).to_h
+  end
+end

app/views/spotlight/sir_trevor/blocks/_recent_item.html.erb

@@ -0,0 +1,8 @@
+<div class="card">
+  <div class="thumbnail">
+    <%= link_to_document document, image_tag(thumbnail_url(document).to_s.gsub(/full\/.*\/0/,"full/!400,400/0")) %>
+    <div class="card-header">
+      <%= render_index_document document %> 
+    </div>
+  </div>
+</div>

app/views/spotlight/sir_trevor/blocks/_recent_items_block.html.erb

@@ -0,0 +1,9 @@
+<h1>Recent Additions</h1>
+<div class="content-block documents">
+  <% recent_items_block.with_solr_helper(self) %>
+  <%- if recent_items_block.documents.present? %>
+    <div class="cards">
+      <%= render collection: recent_items_block.documents, as: :document, partial: 'spotlight/sir_trevor/blocks/recent_item' %>
+    </div>
+  <% end %>
+</div>

config/initializers/spotlight_config.rb

@@ -3,3 +3,9 @@
 Spotlight::Engine.config.upload_fields = []
 Spotlight::Engine.config.iiif_metadata_class = -> { ManifestMetadata }
 Spotlight::Engine.config.iiif_manifest_field = :content_metadata_iiif_manifest_field_ssi
+
+Spotlight::Engine.config.sir_trevor_widgets = %w[
+  Heading Text List Quote Iframe Video Oembed Rule UploadedItems Browse
+  FeaturedPages SolrDocuments SolrDocumentsCarousel SolrDocumentsEmbed
+  SolrDocumentsFeatures SolrDocumentsGrid SearchResults RecentItems
+]

spec/factories/iiif_resource.rb

@@ -0,0 +1,23 @@
+FactoryBot.define do
+  factory :iiif_resource, class: IIIFResource do
+    transient do
+      # Fixture to use for stubbing the manifest.
+      manifest_fixture { nil }
+      # Source metadata identifier to stub out
+      source_metadata_identifier { nil }
+      # Reference to the spec to enable the factory to stub out requests.
+      spec { nil }
+    end
+
+    before(:create) do |resource, evaluator|
+      if evaluator.spec.present?
+        evaluator.spec.stub_manifest(url: resource.url, fixture: evaluator.manifest_fixture) if evaluator.manifest_fixture
+        evaluator.spec.stub_metadata(id: evaluator.source_metadata_identifier) if evaluator.source_metadata_identifier
+      end
+    end
+    after(:create) do |resource, evaluator|
+      resource.save_and_index
+      Blacklight.default_index.connection.commit
+    end
+  end
+end

spec/views/spotlight/sir_trevor/blocks/_recent_items_block.html.erb_spec.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+describe 'spotlight/sir_trevor/blocks/_recent_items_block.html.erb', type: :view do
+  let(:p) { 'spotlight/sir_trevor/blocks/recent_items_block.html.erb' }
+  let(:block) do
+    RecentItemsBlock.new({ type: 'block', data: {} }, view)
+  end
+  let(:exhibit) { FactoryBot.create(:exhibit) }
+
+  before do
+    # Include the search helper so the block can run a scoped query. Normally
+    # the view has access to this from the controller, but this test uses an
+    # anonymous controller.
+    view.class.include Blacklight::SearchHelper
+    allow(view).to receive_messages(recent_items_block: block)
+    allow(view).to receive_messages(
+      blacklight_config: CatalogController.blacklight_config,
+      current_exhibit: exhibit,
+      search_session: {},
+      current_search_session: {}
+    )
+
+    FactoryBot.create(
+      :iiif_resource,
+      url: "https://hydra-dev.princeton.edu/concern/scanned_resources/1r66j1149/manifest",
+      exhibit: exhibit,
+      manifest_fixture: "1r66j1149-expanded.json",
+      source_metadata_identifier: "12345678",
+      spec: self
+    )
+    FactoryBot.create(
+      :iiif_resource,
+      url: "https://hydra-dev.princeton.edu/concern/scanned_resources/44558d29f/manifest",
+      exhibit: exhibit,
+      manifest_fixture: "44558d29f.json",
+      spec: self
+    )
+  end
+
+  it 'renders a set of recent items' do
+    render partial: p, locals: { recent_items_block: block }
+
+    expect(rendered).to have_selector ".card", count: 2
+    # Assert first document is the newest indexed one.
+    expect(rendered).to have_selector ".card:nth-child(1)", text: "L''ordine dorico ossia il tempio d''Ercole nella città di Cori umiliato alla santita di nostro signore Papa Pio Sesto"
+  end
+end