rails_stackview 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1dcc75e8d87f6311a1b7c4bdca4f7b0705ed41db
+  data.tar.gz: fda9b0a44729a94c66949106518e2b9bd7b77f48
+SHA512:
+  metadata.gz: 2d7c495b8684b66d9e544643c1ae9ee8d1d855e951c77e135e1d44a55baa4341303894944249556195a4b6b964f58b89441eeaba4b22331d0106c0afb504e31b
+  data.tar.gz: 920ce32703b2f2a27cb79b3385b8bd4a3f25d7944707236737014858c877dd3cbc6e8ad6f0e02c78b6e4b654acd9ae2d3fc8079d0432af3f955c3352a8ba57f6

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 Jonathan Rochkind
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,288 @@
+# RailsStackview
+
+IN PROGRESS UNDER DEVELOPMENT NOT USABLE YET
+
+**Tools** for integrating the Harvard Innovation Lab [stackview](https://github.com/harvard-lil/stackview) Javascript into a Rails app. 
+
+This is not an out of the box solution, integrating it into your app will require some development.
+
+The hardest part, for call-number browse, is typically arranging your call numbers somewhere
+so they can be accessed in sorted order. 
+
+RailsStackview contains the original stackview assets, arranged for the Rails asset pipeline. Along with some higher-level components. These higher-level have been created for my own use cases and needs; while I've tried to give a nod to future expandability, they haven't been created to be fully robust and configurable for all use cases. In this project, for a change, I've tried to be guided by keeping it simple and [YAGNI](http://martinfowler.com/bliki/Yagni.html). 
+
+My focused use case is 'shelf browse', browse through a very long list of ordered
+items, starting at a specified point in the middle. 
+
+## Requirements
+
+The Stackview code needs JQuery, so you should have JQuery loaded in your app. 
+
+This code is meant for integration with a Rails app. It does not assume Blacklight,
+although is usable with Blacklight. 
+
+Add it to your app like any other gem, by listing in the Gemfile. 
+
+## Usage
+
+### Stackview assets are available. 
+
+To use the stackview assets directly, include them in your asset pipeline. 
+
+You can include just the original stackview JS and CSS:
+
+~~~ruby
+# app/assets/javascripts/application.js
+//= require jquery.stackview.js
+~~~
+
+~~~ruby 
+# app/assets/stylesheets/application.css
+*= require stackview/jquery.stackview.scss
+~~~
+
+Now Stackview will be available in your app, via the asset pipeline,
+using the documented stackview API. (eg `$(something).stackView(something)`)
+
+Or alternatley you can include all RailsStackview JS/CSS, which provides some
+support for higher level features, along with the original stackview assets:
+
+~~~ruby
+# app/assets/javascripts/application.js
+//= require rails_stackview
+~~~
+
+~~~ruby 
+# app/assets/stylesheets/application.css
+*= require rails_stackview
+~~~
+
+One additional feature included is an automatic application of stackview
+to any `<div>` with a `data-stackview-init` attribute, containing JSON
+serialization of stackview init arguments. 
+
+This can be convenient for integrating with Rails, letting you for instance
+specify your own rails controller as a data provider to stackview:
+
+~~~erb
+<%= content_tag("div", "",
+    :id => "whatever_you_want",
+    :class => "whatever you want",
+    :data => {
+        :stackview_init => {
+            :id => 0,
+            :url => your_route_helper(some_args),
+            :search_type => "loc_sort_order"
+        }
+    })
+%>
+~~~
+
+The data-stackview-init hash can be whatever you like, as initialization
+arguments for the original stackview. 
+
+### Back-End Support: The StackviewDataController to feed data to stackview
+
+The [StackviewDataController](./app/controllers/stackview_data_controller.rb) is provided
+to feed data to a stackview UI,
+with the use case of 'call number browse', or starting at an arbitrary
+point in a very long list of items, and paging both back and forwards. 
+
+The current implementation of the StackviewDataController counts
+on a table of individual call numbers existing in your database. 
+It is difficult to get the querries we need out of Solr directly, and
+we opted to create a duplicate 'denormalized' database table with
+exactly the info needed to support the front-end. 
+
+Once you've added `rails_stackview` to your Gemfile, you can
+install a migration into your app to create the `stackview_call_numbers` table,
+with:
+
+    bundle exec rake rails_stackview_engine:install:migrations
+
+It is up to you to fill this table with call number data. If you
+use [traject](https://github.com/traject/traject) to index
+MARC to Solr, you can look at [this example of how I handle
+creating the stackview_call_numbers table at the same time
+I do my Solr indexing](./docs/traject-indexing.example.rb)
+
+Here are the elements of the `stackview_call_numbers` table:
+
+* `system_id` (string), the primary key of the original item
+   in your overall system, used for linking from stackview
+   to your system. 
+* `sort_key` (string), a _sortable_ representation of your call
+   number or other ordering. Used for sorting the stack. If you
+   are using LC Call Numbers and populating this table in ruby,
+   we suggest the [Lcsort](https://github.com/pulibrary/lcsort) gem for turning a call number
+   into a sortable representation. Some features will end up less confusing if
+   sort_keys are unique, although they aren't required to be -- I append
+   the bibID to the end of each sort_key, to make them unique even if two
+   bibs share the same call number. 
+* `sort_key_display` (string, optional), the original human-displayable
+   call number, can be used for display.
+* `title` (string), title to use in stackview representation. 
+* `creator` (string, optional), author to use in stackview representation. 
+* `pub_date` (string, optional), publication year (as string) to use in stackview representation. 
+* `measurement_page_numeric` (int, optional), page count, passed to stackview for represnetation width.
+* `measurement_height_numeric` (int, optional), item height (usually in cm), passed to stackview for representation height
+* `shelfrank` (int, optional), 1-100, passed to stackview for "heatmap" intensity coloring of representation. Normally a count of number of times checked out. 
+* `created_at` (datetime, optional), can set to row creation date for your administrative convenience. 
+* `format`: Passed to stackview to choose a format-specific view template, should be one of magic words from stackview's own source (case-sensitive, not entirely consistent): `book` `Serial`, `Sound Recording`, `Video/Film`, `webpage`. Also our own special `plain` format, which can also take a specific description etc `plain:VHS`.  See more at "Custom Plain Format" below. 
+* `sort_key_type` (string): Eventually we plan to support multiple separate call number runs, which will
+be identified by `sort_key_type`. We have the beginnings of such an architecture, but
+it may not be fully fleshed out and may have performance implications. For now recommend always setting
+this to the default, `lc`. 
+
+Once you've filled this database, you can use it with our Browser front-end, or you can construct your own stackview front-end telling stackview to use this to use this controller as a source for:
+
+Add routing to the StackviewDataController in your own `./config/routes.rb`
+
+~~~ruby
+    get 'stackview_data/:call_number_type', :to => "stackview_data#fetch", :as => "stackview_data"
+~~~
+
+(That specific `:as => 'stackview_data'` is needed if you are using our Browser front-end)
+
+When you initialize a stackview UI element, you have to tell it what item to start at, by giving it a `sort_key` (normalized sortable call number representation) value.  One way to get a sort_key for
+a known item, is simply to look it up from the existing `stackview_call_numbers` table:
+
+~~~ruby
+# may be nil if no such system_id recorded
+origin_sort_key = StackviewCallNumber.where(:system_id => document.id).order("created_at").pluck(:sort_key).first 
+~~~
+
+Now you can initialize a stackview UI element, using the RailsStackview feature
+to automatically init a stackview from a data-stackview-init attribute:
+
+~~~erb
+    <%= content_tag("div", "",
+        :id => "my_stackview",
+        :data => {
+            :stackview_init => {
+                :id => 0,
+                :url => stackview_data_path("lc", :origin_sort_key => origin_sort_key),
+                :search_type => "loc_sort_order"
+            }
+        })
+    %>
+~~~
+
+If you pass an :origin_sort_key that doesn't actually exist in the database,
+the StackviewDataController will still put the user into the stacks at the closest
+point to that theoretical call number. 
+
+#### Set the link URL
+
+To set the `link` property on the JS objects passed to stackview, which will be used
+as the `href` on stackview item hyperlinks, set a lambda/proc as configuration, perhaps
+in an initializer. The proc gets the already constructed stackview hash as a parameter,
+and will be executed in the context of the controller so you can use controller
+methods, such as Rails route helpers. 
+
+      StackviewDataController.set_config_for_type("default", {
+        :link => lambda do |hash|
+          catalog_path(hash["system_id"])
+        end
+      })
+
+Above is similar to the default, which should work for at least some versions
+of Blacklight by default. 
+
+
+#### What's it doing then?
+
+To use the current stackview API (as far as what it fetches from it's back-end), in
+a flexible and high-performance way, we do something a bit odd. 
+
+The URL fixes the controller to have an 'origin' you specify. Stackview, in "search_type: loc_sort_order" (stackview's terminology) will then send it negative and positive offsets as the user browses -- eg asking
+for items 10 to 20, or -25 to -35. The controller will use SQL `OFFSET` to page forwards and backwards
+around the origin.  This ends up pretty performant, although it is odd. 
+
+The Stackview `loc_sort_order` mode is under-documented on stackview's site, but it's meant
+for 'infinite' scrolling both forwards and back around an origin. Stackview assumes
+you're initialize it to the actual i-index `id` where you want to start; but we set
+a "logical" id starting point of 0, and encode our actual origin in the URL instead. Then
+we can consider stackview's indexes to actually be offsets from our origin. 
+
+Weird, but it works, without major changes to the stackview JS code itself.
+
+
+#### Don't want to use the stackview_call_numbers table?
+
+It is kind of hacky. Do you have another source for your call numbers? Do you want
+to try to get them via Solr directly using the ndushay/stanford hack? 
+
+The code extracts out the actual fetch logic into a [RailsStackview::DbWindowFetcher](./app/fetch_adapters/rails_stackview/db_window_fetcher.rb) adapter.
+We intend to let you replace it with your own adapter, that takes the HTTP params sent by
+stackview itself, and returns a list of hashes to be given back to it. 
+
+This architecture isn't neccesarily fully fleshed out, some parts of RailsStackview
+may be hard-coded in unpleasant ways, but the beginnings are there. 
+
+
+### Front-end Support: The Browser Template
+
+You can write your own Rails template with the stackview element on it. It turns
+out it's a bit tricky to get right for common cases. 
+
+`rails_stackview` provides a 'browser' template you can use, which is a two-column
+display with stackview on the left, and an item detail panel on the right. It
+takes care of a lot of odd edge cases and details, especially focused again on
+an 'infinite' shelf browser use case. 
+
+You can use this template in your own controller action method. It needs to be
+initialized with an starting point sortkey, which the stack will center on. It's
+recommended you use a query parameter to pass in the sort key -- the browser
+javascript includes some code to update such a query param with JS replaceState(),
+to keep back button working well. 
+
+    render :template => 'rails_stackview/browser', :locals => {:origin_sort_key => params["origin_sort_key"]}
+
+You may want to customize your Rails layout template to work best with the browser template. 
+The browser template is designed best to work with _no_ padding or spacing
+underneath it -- Javascript will set the stackview element to stretch to the bottom
+of the browser. A small header is okay. No right or left margin or padding is best. 
+
+The browser template does use the back-end StackviewDataController, you will need
+to have that set up properly as above. 
+
+If you want a click on a stack item to load information in the right panel, then you need
+to define your own Rails route with a `stackview_browser_item`, which returns partial
+HTML that should be loaded (via AJAX) in the item detail panel on a click. 
+
+After an item is loaded by the browser JS, a custom `stackview-item-load` JS event is
+triggered, with the item panel div as the target. 
+
+On very small screens, the browser is only a single column without the item detail panel,
+and clicks on items will follow the href set on the items, see above under `Set the link URL`. 
+
+
+### Custom format plain
+
+`rails_stackview` adds it's own custom "plain" format, which we use for items
+that are neither books, CDs, DVDs, etc. Or where we can't be sure what format they are. 
+
+The design isn't too sophisticated, but is meant to look kind of like a plain
+box with a printed label. It does implement stackview heatmap coloring. 
+
+If you have included `rails_stackview` CSS and JS, the plain format is available.
+
+Set format format property to `plain` to trigger. Or, you can set
+additional format description after a colon: `plain:LP`, or `plain:Whatever we want`,
+and the additional format description will be included on the label. 
+
+## Development
+
+### Vendored stackview assets
+
+Stackview assets (JS, CSS, images) are included directly in source here, 
+under [./vendor/assets](./vendor/assets).
+
+The original stackview is not versioned, but the git SHA hash of
+the currently vendored assets is included at 
+[./vendor/assets/stackview.sha](./vendor/assets/stackview.sha)
+
+There is a script for refreshing these assets in rails_stackview source,
+see [./vendor/assets/README.md](./vendor/assets/README.md).
+

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'RailsStackview'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/javascripts/rails_stackview/auto_init.js

@@ -0,0 +1,15 @@
+// On page load, look for any elements with a data-stackview-init attribute. 
+// That data attribute is expected to include a JSON serialized hash that
+// is an init argument to the stackView() initializer. 
+
+// We will initialize element with that argument. 
+(function( $ ) {
+  // page:load for turbolinks too, not sure if it really works right.     
+  $(document).on('ready page:load', function () {
+    $("[data-stackview-init]").each(function(i, element) {
+      element = $(element);
+      element.stackView(element.data("stackviewInit"));
+    });   
+  });
+
+})( jQuery );

data/app/assets/javascripts/rails_stackview/browser.js

@@ -0,0 +1,161 @@
+(function($, undefined) {
+
+  function fitToWindowHeight() {
+    var shelfbrowser = $(".shelfbrowser");
+
+    if (shelfbrowser.size() > 0) {
+      var topOffset = shelfbrowser.offset().top;
+      var height    = $(window).innerHeight() - topOffset;
+
+      shelfbrowser.css("height",  height);
+      // set a bunch of elements to have same height, CSS tricks
+      // to make it expand to fit weren't working esp in IE. 
+      $(".shelfbrowser-stackview").css("height", height);
+      $(".shelfbrowser-browser-column").css("height", height);
+      $(".shelfbrowser-info-column").css("height", height);
+    }
+  }
+
+  window.doit = true;
+
+  function loadItem(base_url, panel, item) {
+    // Fade out the existing content with a pretty cheesy effect,
+    // ends up less confusing when load is slowish. Cheesy implementation.
+    panel.wrapInner("<div class='rails-stackview-panel-wrap'></div>");
+    panel.find(".rails-stackview-panel-wrap").delay(400).fadeTo(600, 0.2);
+
+
+
+    if (window.doit) {
+    $.ajax({
+      url: base_url,
+      data: {
+        'id': item.system_id,
+        'sort_key': item.sort_key,
+        'sort_key_display': item.sort_key_display,
+        'sort_key_type': item.sort_key_type
+      },
+      dataType: "html",
+      success: function(html, status, xhr) {
+        panel.html( html );
+        panel.trigger("stackview-item-load");
+      },
+      error: function(xhr, status, error) {
+        panel.html(errorPanel(error));
+      },
+      complete: function(xhr, status) {
+        // Some kind of bug in chrome/webkit is sometimes making
+        // parts of the info column be not properly painted, especially
+        // on retina screens.  Think we trigger it by changing DOM inside an
+        // overflow:auto section.
+        // This seems to work around it hackily:
+        $(".shelfbrowser-info-column").fadeTo(1, .99).fadeTo(1, 1);
+
+        // If the info column was previously scrolled, we want
+        // to go to top for this new content. 
+        $(".shelfbrowser-info-column").scrollTop(0);
+      }
+    });
+    }
+  }
+
+  function errorPanel(text) {
+    return '<div class="alert alert-warning" role="alert">Sorry, we can not display this item.' +
+    (text ? (' (' + text + ')') : '') +
+    '</div>';
+  }
+
+  // We add origin_sort_key=$sort_key into the current
+  // URL using pushState, if in a browser that supports. 
+  //
+  // The intention is to 'remember' the currently selected
+  // item on browser back button to this page, etc. 
+  //
+  // It does assume the host app is supporting ?origin_sort_key=$sort_key
+  // and passing it to template, to work. Could make more configurable
+  // later. 
+  function replaceSelectedState(item) {
+    if ('history' in window && 'replaceState' in history && 'sort_key' in item) { 
+      var query = location.search;
+      if (query.length == 0)
+        query = '?';
+
+      // replace origin_sort_key only if it exists
+      var re = new RegExp("([\\?&])origin_sort_key=([^&#]*)");
+      query = query.replace(re, '$1origin_sort_key=' + encodeURIComponent(item.sort_key));
+      
+      history.replaceState({}, '', query + location.hash);
+    }
+  }
+
+  $( document ).on("ready", function() {
+    if ($(".shelfbrowser").length > 0) {
+      fitToWindowHeight();
+
+      $( window ).on("resize orientationchange", function() {
+        fitToWindowHeight();
+      });
+      
+      // If stackview_browser_item_path is defined, click on item
+      // should load partial via AJAX, and preventDefault. 
+      $(document).on("click", ".shelfbrowser .stack-item a", function(event) {
+        var target        = $(event.target);
+        var item_load_url = target.closest(".shelfbrowser-browse-column").data('stackviewBrowserItemPath');
+        var panel         = target.closest(".shelfbrowser").find(".shelfbrowser-info-column .stack-item-panel").filter(":visible");
+
+        var item_attribute_hash = target.closest(".stack-item").data("stackviewItem");
+
+        replaceSelectedState(item_attribute_hash);
+
+        if(item_load_url && panel.length > 0) {
+          event.preventDefault();
+
+          loadItem(item_load_url,  panel,  item_attribute_hash );
+
+          $('.active-item').removeClass('active-item');
+          $(this).parent().addClass('active-item');
+        }
+      });
+
+      // Catch stackview.page the FIRST time, so we can find the origin
+      // document and add a special class to it, which we'll use to click
+      // on it immediately, and set the scroll view so it's centered. 
+      $(document).on("stackview.pageload.initial-select", function(event) {
+        // Find the .stack-item which has data origin:true set, and click it. 
+        // Since we're only executing on first load, this shouldn't be
+        // that many items. 
+
+        var item_load_url = $(event.target).closest(".shelfbrowser-browse-column").data('stackviewBrowserItemPath');
+
+        var $origin_item;
+
+        // Add .origin-item to origin, so we can do things with it....
+        $(event.target).find(".stack-item").each(function(index, item) {
+          if($(item).data("stackviewItem").is_origin_item) {
+            $origin_item = $(item);
+            // We add stackview-origin class to allow us to
+            // find it and position the scroll properly on load. 
+            $origin_item.addClass("stackview-origin");
+          }
+        });
+
+        //... we want to simulate clicking the origin, if we have a load url,
+        // so we can load it. 
+        if (item_load_url) {
+          $origin_item.find("a").trigger('click');
+        }
+
+        //... we want to try to set the scroll such that our origin item is
+        // centered. 
+        // stackview out of the box doesn't quite get this right, it's tricky,
+        // we seem to be doing okay. 
+        var container = $origin_item.closest("ul.stack-items");
+        container.scrollTop( $origin_item.get(0).offsetTop - (container.height() / 2) + ($origin_item.height() / 2) )
+        
+        // Remove our handler, we only want to do this once. 
+        $(document).off("stackview.pageload.initial-select");
+      });
+    }
+  });
+
+})(jQuery);

data/app/assets/javascripts/rails_stackview/plain.js

@@ -0,0 +1,128 @@
+(function($, window, undefined) {
+  /*
+      A very poorly-designed type meant for 'other', meant to look
+      sort of like a simple box with a typed sticky label.  
+
+      Trigger with "format: 'plain'", OR add a format label on the end
+      too:
+
+          format: "plain: VHS"
+
+      The 'title' and extra format info will be displayed, along with pub_date. 
+      Author display not currently included. 
+
+      measurement_height_numeric can control box height, like 'book'
+      type. Box width is fixed though. 
+  */
+ $.extend(true, window.StackView.defaults, {
+    selectors: {
+      plain: '.stack-plain'
+    },
+    plain: {
+      max_height_percentage: 100,
+      max_height: 39,
+      min_height_percentage: 20,
+      min_height: 10
+    }
+  });
+
+  /*
+     #translate(number, number, number, number, number) - Private
+  
+     Takes a value (the first argument) and two ranges of numbers. Translates
+     this value from the first range to the second range.  E.g.:
+  
+     translate(0, 0, 10, 50, 100) returns 50.
+     translate(10, 0, 10, 50, 100) returns 100.
+     translate(5, 0, 10, 50, 100) returns 75.
+  
+     http://stackoverflow.com/questions/1969240/mapping-a-range-of-values-to-another
+  */
+  var translate = function(value, start_min, start_max, end_min, end_max) {
+    var start_range = start_max - start_min,
+        end_range = end_max - end_min,
+        scale = (value - start_min) / (start_range);
+    
+    return end_min + scale * end_range;
+  };
+
+  /*
+     #get_height(StackView, object) - Private
+  
+     Takes a StackView options object and a book object. Returns a
+     normalized book height percentage, taking into account the minimum
+     height, maximum height, height multiple, and translating them onto
+     the percentage range specified in the stack options.
+  */
+  var get_height = function(options, book) {
+    var height = parseInt(book.measurement_height_numeric, 10),
+        min = options.book.min_height,
+        max = options.book.max_height;
+    
+    if (isNaN(height)) {
+      height = min;
+    }
+    height = Math.min(Math.max(height, min), max);
+    height = translate(
+      height,
+      options.plain.min_height,
+      options.plain.max_height,
+      options.plain.min_height_percentage,
+      options.plain.max_height_percentage
+    );
+    return height + '%';
+  };
+
+  /*
+     #get_author(object) - Private
+  
+     Takes an item and returns the item's author, taking the first
+     author if an array of authors is defined.
+  */
+  var get_author = function(item) {
+    var author = item.creator && item.creator.length ? item.creator[0] : '';
+    
+    if(/^([^,]*)/.test(author)) {
+      author = author.match(/^[^,]*/);
+    }
+    
+    return author;
+  };
+
+
+  window.StackView.register_type({
+    name: 'plain',
+
+    match: function(item) {
+      return item.format === 'plain' || item.format.match(/^plain\:/);
+    },
+
+    adapter: function(item, options) {
+      return {
+        heat: window.StackView.utils.get_heat(item.shelfrank),
+        box_height: get_height(options, item),
+        link: item.link,
+        title: item.title,
+        author: get_author(item),
+        year: item.pub_date,
+        format_descr: item.format.match(/^plain\:/) ? item.format.replace(/^plain\:/, '') : undefined
+      };
+    },
+
+    template: '\
+      <li class="stack-item stack-plain heat<%= heat %>" style="width:<%= box_height %>">\
+        <a href="<%= link %>" target="_blank">\
+          <span class="label-container">\
+            <span class="spine-text">\
+                <p class="plain-title"><%= title %></p>\
+                <p class="plain-format"><%= format_descr %></p>\
+                <p class="plain-author"><%= author %></p>\
+            </span>\
+          </span>\
+          <span class="spine-year"><%= year %></span>\
+          <span class="plain-top item-colors"></span>\
+          <span class="plain-edge item-colors"></span>\
+        </a>\
+      </li>'
+  });
+})(jQuery, window);

data/app/assets/javascripts/rails_stackview.js

@@ -0,0 +1,11 @@
+// rails_stackview sprockets JS manifest that includes vendored stackview JS as well as custom JS
+//
+//= require jquery.stackview.js
+//= require ./rails_stackview/plain.js
+//
+// Important to load browser, which adjusts the size of the stackview div,
+// BEFORE auto-init, to make sure the div is the right size when stackview
+// gets init'd, since it will base some things on the size of the div. 
+//= require ./rails_stackview/browser.js
+//
+//= require ./rails_stackview/auto_init.js