blacklight-gallery 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 94afcde16a490934a83e5232c0f1f647a65546d7
-  data.tar.gz: 578e0ba2d4baaeebe736af68c87645611ad27374
+  metadata.gz: dba81d9ebc340387c2228289ecdde6641cf494d4
+  data.tar.gz: ce6c1b068aa9021a04428ae550d1ccec85f801e9
 SHA512:
-  metadata.gz: b5df9ae74acf4f310055aedbabd9ab576fdb6dfe441c4809d3c1d18a511a428a61a1b41279c7f5f514b5db3ac113787715a4f17b0bd232ac5e34de37da082e2b
-  data.tar.gz: 6ab0242fc6d8b6dfd5bee324a3f8cdc52b6e30a5ec15e846a7282cd00841d311cbe6cc564d5c9fb27e6c99afd9937fcda396bdbc066a80cdc91e8cc7178a9328
+  metadata.gz: 69f036f9a806c8d645e7df9c7d4461b1ceffdbc30090a7b0f7aac019784b14083f7e07ab2df665316504a016350fe8148919d309d44df6faabba658de5c29090
+  data.tar.gz: 95677dd746ca34b0b2536c1be819c14c411d4e510be7d3838b80bf10301dbed24b2d8d0c067bb8a3902c8043353b6bb7f765cd54ec1d3aaa83dab990d9e4112e

data/Gemfile

@@ -3,6 +3,16 @@ source 'https://rubygems.org'
 # Specify your gem's dependencies in blacklight-gallery.gemspec
 gemspec
 
+# If we don't specify 2.11.0 we'll end up with sprockets 2.12.0 in the main 
+# Gemfile.lock but since sass-rails gets generated (rails new) into the test app
+# it'll want sprockets 2.11.0 and we'll have a conflict
+gem 'sprockets', '2.11.0'
+
+# If we don't specify 3.2.15 we'll end up with sass 3.3.2 in the main 
+# Gemfile.lock but since sass-rails gets generated (rails new) into the test app
+# it'll want sass 3.2.0 and we'll have a conflict
+gem 'sass', '~> 3.2.0'
+
 group :test do
   gem "bootstrap-sass"
   gem 'turbolinks'
@@ -13,4 +23,4 @@ gem 'activerecord-jdbcsqlite3-adapter', :platform => :jruby
 
 if File.exists?('spec/test_app_templates/Gemfile.extra')
   eval File.read('spec/test_app_templates/Gemfile.extra'), nil, 'spec/test_app_templates/Gemfile.extra'
-end
+end

data/README.md

@@ -1,4 +1,5 @@
 # Blacklight::Gallery
+[![Gem Version](https://badge.fury.io/rb/blacklight-gallery.svg)](http://badge.fury.io/rb/blacklight-gallery)
 
 Gallery views for Blacklight search results
 
@@ -22,6 +23,10 @@ Run the gallery generator:
 
     $ rails g blacklight_gallery:install
 
+## Screenshot
+
+![Screenshot](docs/screen_shot.png)
+
 ## Contributing
 
 1. Fork it ( http://github.com/<my-github-username>/blacklight-gallery/fork )

data/Rakefile

@@ -7,7 +7,6 @@ require 'rspec/core/rake_task'
 require 'engine_cart/rake_task'
 
 require 'jettywrapper'
-require 'blacklight'
 
 task :default => :ci
 
@@ -41,4 +40,4 @@ task :ci => ['jetty:clean', 'engine_cart:generate'] do
     Rake::Task['spec'].invoke
   end
   raise "test failures: #{error}" if error
-end
+end

data/app/assets/javascripts/blacklight_gallery/slideshow.js

@@ -0,0 +1,119 @@
+(function($){
+  var Slideshow = function (element, options) {
+    this.$element = $(element);
+    this.options  = options;
+    this.paused   = false;
+    this.activeIndex = 0;
+
+    this.init = function() {
+      this.$items = this.$element.find('.item');
+    }
+
+    this.attachEvents();
+    this.init();
+  }
+
+
+  Slideshow.prototype = {
+
+    slide: function(item) {
+      var $item     = $(item),
+          $frame    = $item.find('.frame'),
+          marginTop = 0;
+
+      this.$items.hide();
+      $item.show();
+
+      marginTop = Math.round($item.height() - $frame.height())/2;
+      this.activeIndex = this.$items.index(item);
+
+      if (this.options.autoPlay && !this.paused) this.play();
+
+      return this;
+    },
+
+    play: function() {
+      this.paused = false;
+
+      if (this.interval) clearInterval(this.interval);
+      this.interval = setInterval($.proxy(this.next, this), this.options.interval);
+    },
+
+    pause: function() {
+      this.paused = true;
+      this.interval = clearInterval(this.interval);
+
+      return this;
+    },
+
+    startAt: function(pos) {
+      this.to(pos);
+    },
+
+    next: function() {
+      return this.to('next');
+    },
+
+    to: function(pos) {
+      if (pos === 'next') pos = this.activeIndex + 1;
+      if (pos === 'prev') pos = this.activeIndex - 1;
+
+      return this.slide(this.$items[this.getValidIndex(pos)]);
+    },
+
+    getValidIndex: function(index) {
+      if (typeof index === 'undefined' || index > (this.$items.length - 1)) index = 0;
+      if (index < 0) index = this.$items.length - 1;
+
+      return index;
+    },
+
+    attachEvents: function() {
+      var $img = this.$element.find('.frame img'),
+          _this = this;
+
+      // pause slideshow on image mouseenter event
+      $img.on('mouseenter', function() {  _this.pause(); });
+
+      // play slideshow on image mouseleave event
+      $img.on('mouseleave', function() {
+        if (_this.options.autoPlay) _this.play();
+      });
+
+      $(document).on('click', '[data-slide], [data-slide-to]', function() {
+        pos = parseInt($(this).attr('data-slide-to'), 10) || $(this).attr('data-slide');
+
+        if (pos === 'next' || pos === 'prev') _this.pause();
+        _this.to(pos);
+      });
+
+      // pause slideshow on modal close
+      $('#slideshow-modal').on('hidden.bs.modal', function() {
+        _this.pause();
+      });
+    }
+  }
+
+
+  Slideshow.DEFAULTS = {
+    autoPlay: true,
+    interval: 5000 // in milliseconds
+  }
+
+
+  $.fn.slideshow = function(option) {
+    return this.each(function() {
+      var $this = $(this);
+      var data  = $this.data('slideshow');
+      var options = $.extend({}, Slideshow.DEFAULTS, $this.data(), typeof option == 'object' && option);
+
+      if (!data) $this.data('slideshow', (data = new Slideshow(this, options)));
+    })
+  }
+
+})(jQuery);
+
+
+Blacklight.onLoad(function() {
+  $('#slideshow').slideshow();
+});

data/app/assets/stylesheets/blacklight_gallery/_slideshow.css.scss

@@ -0,0 +1,140 @@
+$gray-light: lightgray !default;
+$gray-dark: darkgray !default;
+
+#slideshow-modal {
+  .modal-dialog {
+    width: 100%;
+    margin: 1% auto;
+
+    .modal-content {
+      background-color: $gray-dark;
+    }
+
+    .modal-header {
+      border-bottom: none;
+
+      .close {
+        color: white;
+      }
+    }
+
+    .modal-body {
+      padding: 1%;
+      height: 90%;
+    }
+  }
+}
+
+#slideshow {
+  height: 100%;
+
+  .slideshow-inner {
+    height: 100%;
+    overflow: hidden;
+
+    .item {
+      width: 100%;
+      height: 100%;
+      display: table;
+      vertical-align: middle;
+      position: relative;
+
+      .frame {
+        margin: 0 auto;
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+        overflow: auto;
+
+        img {
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .carousel-control {
+    background-image: none;
+    height: 100%;
+    width: 50px;
+
+    .glyphicon {
+      color: $gray-light;
+    }
+  }
+  .carousel-control.left .glyphicon  {
+    padding-right: 3px;
+  }
+  .carousel-control.right .glyphicon  {
+    padding-left: 2px;
+  }
+
+  .caption {
+    font-size: 14px;
+    color: $gray-light;
+    margin: 10px auto;
+    min-width: 200px;
+    max-width: 50%;
+  }
+
+  .counter {
+    // background-color: $gray-light;
+    border-radius: 12px;
+    border: 1px solid $gray-light;
+    color: $gray-light;
+    font-size: 12px;
+    overflow: auto;
+    padding: 4px 10px;
+    text-align: center;
+  }
+}
+
+#documents {
+  margin: 0;
+
+  .info {
+    text-align: center;
+    margin-bottom: 15px;
+  }
+
+  h3 {
+    background-color: whitesmoke;
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    display: inline-block;
+    font-size: 16px;
+    margin: 10px auto;
+    padding: 10px 15px;
+  }
+
+  .grid {
+    $square-thumb-size: 100px;
+
+    .document {
+      float: left;
+      margin-right: 20px;
+      margin-top: 0;
+      padding-top: 0;
+      border-bottom: 0;
+
+      .thumbnail {
+        border: 1px solid #999;
+        border-radius: 0;
+        min-width: $square-thumb-size;
+        min-height: $square-thumb-size;
+        overflow: hidden;
+        position: relative;
+        width: $square-thumb-size;
+
+        a > img {
+          position: absolute;
+          max-width: none;
+          max-height: none;
+          left: -50%;
+          top: -50%;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/blacklight_gallery/default.css.scss

@@ -1,7 +1,26 @@
+@import "slideshow";
+
 #documents.gallery {
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-flow: row wrap;
+
+
   .document {
     border-bottom: none;
-    min-height: 400px;
+
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+
+    min-width: 250px;
+    min-height: 250px;
   }
 
   .index_title {
@@ -15,8 +34,23 @@
   .index-document-functions {
     clear: left;
   }
+
+  .document-metadata { 
+    dt, dd {
+      float: none;
+      width: auto;
+      clear: none;
+      text-align: left;
+      margin: 0;
+      padding: 0;
+    }
+
+  }
 }
 
 .view-icon-gallery {
   &:before { content: "\e011"; } 
-}
+}
+.view-icon-slideshow {
+  &:before { content: "\e158"; } 
+}

data/app/views/catalog/_document_slideshow.html.erb

@@ -0,0 +1,14 @@
+<% # container for all documents in slideshow view -%>
+<div id="documents" class="row slideshow">
+  <div class="info">
+    <h3><%= t(:'blacklight_gallery.catalog.document_slideshow.header') %></h3>
+  </div>
+
+  <div class="grid">
+    <%= render collection: documents, as: :document, partial: 'grid_slideshow' %>
+  </div>
+
+  <%= render layout: 'slideshow_modal', locals: {documents: documents} do %>
+    <%= render partial: 'slideshow', locals: {documents: documents} %>
+  <% end %>
+</div>

data/app/views/catalog/_grid_slideshow.html.erb

@@ -0,0 +1,7 @@
+<div class="document">
+  <div class="thumbnail">
+    <%= link_to '#', data: { :'slide-to' => document_counter, toggle: "modal", target: "#slideshow-modal" } do %>
+      <%= image_tag thumbnail_url(document) %>
+    <% end %>
+  </div>
+</div>

data/app/views/catalog/_index_gallery.html.erb

@@ -1,8 +1,8 @@
 <div class="document col-xs-6 col-md-3">
   <div class="thumbnail">
-    <%= render_thumbnail_tag document %>
+    <%= render_thumbnail_tag(document, {}, :counter => document_counter_with_offset(document_counter)) %>
     <div class="caption">
       <%= render_document_partials document, blacklight_config.view_config(:gallery).partials, :document_counter => document_counter %>
     </div>
   </div>
-</div>
+</div>

data/app/views/catalog/_index_slideshow.html.erb

@@ -0,0 +1,11 @@
+<div class="item<%= ' active' if document_counter == 0 %>">
+  <div class="frame">
+      <%= image_tag thumbnail_url(document) %>
+      <div class="caption">
+        <%= render_document_index_label document, label: document_show_link_field(document) %>
+      </div>
+      <span class="counter">
+        <%= t :'blacklight_gallery.catalog.modal_slideshow.counter', counter: document_counter + 1, count: count %>
+      </span>
+  </div>
+</div>

data/app/views/catalog/_slideshow.html.erb

@@ -0,0 +1,16 @@
+  <div id="slideshow" class="">
+    <!-- Wrapper for slides -->
+    <div class="slideshow-inner">
+      <%= render collection: documents, as: :document, partial: 'index_slideshow', locals: {count: documents.count} %>
+    </div>
+
+    <!-- Controls -->
+    <a class="left carousel-control prev" href="#slideshow" data-slide="prev">
+      <span class="glyphicon glyphicon-chevron-left"></span>
+    </a>
+    <a class="right carousel-control next" href="#slideshow" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right"></span>
+    </a>
+
+  </div>
+

data/app/views/catalog/_slideshow_modal.html.erb

@@ -0,0 +1,14 @@
+  <!-- Modal -->
+  <div class="modal fade" id="slideshow-modal" tabindex="-1" role="dialog" aria-labelledby="slideshow-modal-label" aria-hidden="true">
+    <div class="modal-dialog col-md-10">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
+        </div>
+        <div class="modal-body">
+          <%= yield %>
+        </div>
+      </div>
+    </div>
+  </div>
+

data/blacklight-gallery.gemspec

@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
   spec.authors       = ["Chris Beer"]
   spec.email         = ["cabeer@stanford.edu"]
   spec.summary       = %q{Gallery display for Blacklight}
-  spec.homepage      = ""
+  spec.homepage      = "https://github.com/projectblacklight/blacklight-gallery"
   spec.license       = "Apache 2.0"
 
   spec.files         = `git ls-files`.split($/)
@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_dependency "rails"
-  spec.add_dependency "blacklight", ">= 5.0.0.pre4", "< 6.0"
+  spec.add_dependency "blacklight", "~> 5.0"
   spec.add_dependency "bootstrap-sass", "~> 3.0"
 
   spec.add_development_dependency "bundler", "~> 1.5"

data/config/jetty.yml

@@ -0,0 +1,2 @@
+test:
+  jetty_port: 8888

data/config/locales/blacklight-gallery.en.yml

@@ -2,4 +2,11 @@ en:
   blacklight:
     search:
       view:
-        gallery: "Gallery"
+        gallery: "Gallery"
+        slideshow: "Slideshow"
+  blacklight_gallery:
+    catalog:
+      document_slideshow:
+        header: "Select an image to start the slideshow"
+      modal_slideshow:
+        counter: "%{counter} of %{count}"

data/lib/blacklight/gallery/engine.rb

@@ -3,7 +3,8 @@ require 'blacklight'
 module Blacklight
   module Gallery
     class Engine < Rails::Engine
-      Blacklight::Configuration.default_values[:view].gallery.partials = [:index_header]
+      Blacklight::Configuration.default_values[:view].gallery.partials = [:index_header, :index]
+      Blacklight::Configuration.default_values[:view].slideshow.partials = [:index]
     end
   end
 end

data/lib/blacklight/gallery/version.rb

@@ -1,5 +1,5 @@
 module Blacklight
   module Gallery
-    VERSION = "0.0.1"
+    VERSION = "0.0.2"
   end
 end

data/lib/generators/blacklight_gallery/install_generator.rb

@@ -7,6 +7,7 @@ module BlacklightGallery
 
     def assets
       copy_file "blacklight_gallery.css.scss", "app/assets/stylesheets/blacklight_gallery.css.scss"
+      copy_file "blacklight_gallery.js", "app/assets/javascripts/blacklight_gallery.js"
     end
   end
-end
+end

data/lib/generators/blacklight_gallery/templates/blacklight_gallery.js

@@ -0,0 +1 @@
+//= require blacklight_gallery/slideshow

data/spec/features/slideshow_spec.rb

@@ -0,0 +1,16 @@
+require 'spec_helper'
+
+describe "Slideshow", :js do
+
+  it "should open when one of the grid panes are clicked" do
+    visit catalog_index_path( :q => 'medicine', :view => 'slideshow' )
+    expect(page).to have_content "You searched for:"
+    within ".view-type" do
+      click_link "Slideshow"
+    end
+
+    find('.grid [data-slide-to="0"]').trigger('click')
+    expect(page).to have_selector '#slideshow', visible: true
+  end
+
+end

data/spec/spec_helper.rb

@@ -7,4 +7,10 @@ require 'engine_cart'
 EngineCart.load_application!
 
 require 'rspec/rails'
-require 'capybara/rspec'
+require 'capybara/poltergeist'
+Capybara.javascript_driver = :poltergeist
+
+RSpec.configure do |c|
+  c.treat_symbols_as_metadata_keys_with_true_values = true
+end
+

data/spec/views/catalog/_document_slideshow.html.erb_spec.rb

@@ -0,0 +1,20 @@
+require 'spec_helper'
+
+describe "catalog/_document_slideshow.html.erb" do
+  let(:blacklight_config) { Blacklight::Configuration.new }
+
+  let(:document) { stub_model(::SolrDocument) }
+
+  before do
+    view.stub(blacklight_config: blacklight_config)
+    view.stub(documents: [document])
+  end
+
+  it "should have a edit tag form" do
+    render
+    expect(rendered).to have_selector '#slideshow-modal'
+    expect(rendered).to have_selector '[data-slide="prev"]'
+    expect(rendered).to have_selector '[data-slide="next"]'
+    expect(rendered).to have_selector '[data-slide-to="0"][data-toggle="modal"][data-target="#slideshow-modal"]'
+  end
+end

data/spec/views/catalog/_index_gallery.html.erb_spec.rb

@@ -0,0 +1,22 @@
+require 'spec_helper'
+
+describe "catalog/_index_gallery.html.erb" do
+  let(:blacklight_config) { Blacklight::Configuration.new }
+
+  let(:document) { stub_model(::SolrDocument) }
+
+  before do
+    blacklight_config.view.gallery.partials = ['a', 'b']
+    view.stub(blacklight_config: blacklight_config)
+    view.stub(document: document)
+    view.stub(document_counter: 3, document_counter_with_offset: 3)
+  end
+
+  it "should have thumbnail and caption" do
+    view.should_receive(:render_thumbnail_tag).with(document, {}, hash_including(:counter)).and_return('Thumbnail')
+    view.should_receive(:render_document_partials).with(document, ['a', 'b'], document_counter: 3).and_return('Z')
+    render
+    expect(rendered).to have_selector '.thumbnail', text: 'Thumbnail'
+    expect(rendered).to have_selector '.caption', text: 'Z'
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: blacklight-gallery
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Chris Beer
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-05 00:00:00.000000000 Z
+date: 2014-08-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -28,22 +28,16 @@ dependencies:
   name: blacklight
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 5.0.0.pre4
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '5.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 5.0.0.pre4
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '5.0'
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
   requirement: !ruby/object:Gem::Requirement
@@ -155,21 +149,34 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascripts/blacklight_gallery/slideshow.js
+- app/assets/stylesheets/blacklight_gallery/_slideshow.css.scss
 - app/assets/stylesheets/blacklight_gallery/default.css.scss
 - app/views/catalog/_document_gallery.html.erb
+- app/views/catalog/_document_slideshow.html.erb
+- app/views/catalog/_grid_slideshow.html.erb
 - app/views/catalog/_index_gallery.html.erb
+- app/views/catalog/_index_slideshow.html.erb
+- app/views/catalog/_slideshow.html.erb
+- app/views/catalog/_slideshow_modal.html.erb
 - blacklight-gallery.gemspec
+- config/jetty.yml
 - config/locales/blacklight-gallery.en.yml
+- docs/screen_shot.png
 - lib/blacklight/gallery.rb
 - lib/blacklight/gallery/engine.rb
 - lib/blacklight/gallery/version.rb
 - lib/generators/blacklight_gallery/install_generator.rb
 - lib/generators/blacklight_gallery/templates/blacklight_gallery.css.scss
+- lib/generators/blacklight_gallery/templates/blacklight_gallery.js
 - spec/features/gallery_spec.rb
+- spec/features/slideshow_spec.rb
 - spec/spec_helper.rb
 - spec/test_app_templates/Gemfile.extra
 - spec/test_app_templates/lib/generators/test_app_generator.rb
-homepage: ''
+- spec/views/catalog/_document_slideshow.html.erb_spec.rb
+- spec/views/catalog/_index_gallery.html.erb_spec.rb
+homepage: https://github.com/projectblacklight/blacklight-gallery
 licenses:
 - Apache 2.0
 metadata: {}
@@ -189,12 +196,15 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.0
+rubygems_version: 2.4.1
 signing_key: 
 specification_version: 4
 summary: Gallery display for Blacklight
 test_files:
 - spec/features/gallery_spec.rb
+- spec/features/slideshow_spec.rb
 - spec/spec_helper.rb
 - spec/test_app_templates/Gemfile.extra
 - spec/test_app_templates/lib/generators/test_app_generator.rb
+- spec/views/catalog/_document_slideshow.html.erb_spec.rb
+- spec/views/catalog/_index_gallery.html.erb_spec.rb