openseadragon 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e12e9c50a4a9023440e3b37865b4bf09048664dc
-  data.tar.gz: f07185164b09b31209832bac80e8eed41ae996bc
+  metadata.gz: dc2f571409c5211449a6282bb40f910577d61c54
+  data.tar.gz: 95071d5309b293c0de161fcf75d7dc04a3bc1a65
 SHA512:
-  metadata.gz: 028ed72ab4f4c9d35552afc06d2e544be1640242c425ad56cd0013e09e647cdb8f7c17e16fbace4981de56b9710d50768200b7f150b245f2cdffd6cfea63154a
-  data.tar.gz: a5469f0c71b0ac59751474272bdceef7c00b6c17aefec9e35f7e3b35a4c51551622bf0973161e18aabc832c2c8d4c12bd7dfa0fbbf0688b9dd66237630440ea7
+  metadata.gz: c7ed4e37466254b265e47581d5e8a1253031f1ea2470013119900c28d39aaa71e1fe27ca30ce7618895bdf9c0c5b27a8d08ccbcbfe71129482b8264817967f56
+  data.tar.gz: 23a828bdd797015e43b8c8aeb24514d0c668ee7864801b8362e82790d4166545d910635eb300c82bbee07fc4c546243ea2a84ae700b8cc0330633eaae9231487

data/.gitignore

@@ -15,3 +15,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+spec/internal

data/README.md

@@ -4,21 +4,72 @@ OpenSeadragon is a javascript library for displaying tiling images. This gem pac
 
 http://openseadragon.github.io/
 
-# Setup
+# Usage
 
-In order to display a file, OpenSeadragon needs to know the full dimension of the image.  In order to do this we need to inject an image resolver. Here's an example.
+This gem provides two helpers, `#picture_tag` and `#openseadragon_picture_tag`.
+
+## picture_tag
+
+The `#picture_tag` helper creates [HTML5 <picture> tags](http://www.w3.org/TR/html-picture-element/).
+
+In the simple case, a view like:
+
+```ruby
+picture_tag 'page1.jpg', 'page2.jpg', 'page3.jpg'
+```
+
+Creates the HTML like:
+
+```html
+<picture>
+  <source src="page1.jpg" />
+  <source src="page2.jpg" />
+  <source src="page3.jpg" />
+</picture>
+```
+
+You can control the attributes on `<picture>` and `<source>` elements:
+
+```ruby
+picture_tag ['page1.jpg' => { id: 'first-picture'}], 'page2.jpg', 'page3.jpg', { class: "picture-image" }, { id: 'my-picture'}
+```
+
+```html
+<picture id="my-picture">
+  <source class="picture-image" id="first-picture" src="page1.jpg">
+  <source class="picture-image" src="page2.jpg">
+  <source class="picture-image" src="page3.jpg">
+</picture>
+```
+
+## openseadragon_picture_tag
+
+If you have an OpenSeaDragon tilesource, you can use this helper to construct a HTML5 `<picture>` that will render as an OpenSeaDragon tile viewer.
 
 ```ruby
-    module ImageResolver
-      def self.find(id)
-        # Custom code here to find the height & width
-        Openseadragon::Image.new(id: id, height: 4000, width: 8000)
-      end
-    end
+openseadragon_picture_tag 'page1.jpg'
+```
 
-    # register the resolver
-    Openseadragon::Image.file_resolver = ImageResolver
+```html
+<picture data-openseadragon="true">
+  <source media="openseadragon" src="page1.jpg" />
+</picture>
 ```
 
-The image resolver only needs to implement the `find` method. It takes an id as a parameter and returns a new instance of `Openseadragon::Image`
+This gem includes some javascript that translates that markup to the OSD viewer.
+
+As with `#picture_tag`, you can provide additional options.
+
+```ruby
+openseadragon_picture_tag 'page1.jpg', 'path/to/info.json', ['some-custom-tilesource' => { Image: {  xmlns: "...", Url: '...', Format: 'jpg', Overlap: 2}}], { class: 'osd-image'}, { data: { openseadragon: { preserveViewport: true, visibilityRatio: 1}}}
+```
+
+```html
+<picture data-openseadragon="{&quot;preserveViewport&quot;:true,&quot;visibilityRatio&quot;:1}">
+    <source class="osd-image" media="openseadragon" src="page1.jpg" />
+    <source class="osd-image" media="openseadragon" src="path/to/info.json" />
+    <source class="osd-image" data-openseadragon="{&quot;Image&quot;:{&quot;xmlns&quot;:&quot;...&quot;,&quot;Url&quot;:&quot;...&quot;,&quot;Format&quot;:&quot;jpg&quot;,&quot;Overlap&quot;:2}}" media="openseadragon" src="some-custom-tilesource" />
+</picture>
+```
 
+The `src` attribute (or the JSON-encoded options given in the `data-openseadragon`) are translated  into an OpenSeaDragon `tilesource` configuration.

data/app/assets/javascripts/openseadragon/rails.js

@@ -0,0 +1,42 @@
+//= require openseadragon
+
+(function($) {
+  var __osd_counter = 0;
+  function generateOsdId() {
+    __osd_counter++;
+    
+    return "Openseadragon" + __osd_counter;
+  }
+
+  function initOpenSeadragon() {
+    $('picture[data-openseadragon]').each(function() {
+      var $picture = $(this);
+      
+      if (typeof $picture.attr('id') === "undefined") {
+        $picture.attr('id', generateOsdId());
+      }
+
+      var collectionOptions = $picture.data('openseadragon');
+      
+      var sources = $picture.find('source[media="openseadragon"]');
+
+      var tilesources = $.map(sources, function(e) {
+        if ($(e).data('openseadragon')) {
+          return $(e).data('openseadragon');
+        } else {
+          return $(e).attr('src');
+        }
+      });
+      
+      $picture.css("display", "block");
+      $picture.css("height", "500px");
+
+      OpenSeadragon(
+        $.extend({ id: $picture.attr('id') }, collectionOptions, { tileSources: tilesources })
+      );
+    });
+  };
+
+  window.onload = initOpenSeadragon;
+  document.addEventListener("page:load", initOpenSeadragon);
+})(jQuery);

data/app/helpers/openseadragon/openseadragon_helper.rb

@@ -1,104 +1,122 @@
 module Openseadragon
   module OpenseadragonHelper
-
-    # @param id [String] the image identifier
-    # @param options [Hash] 
-    # @option options [String] :id ('openseadragon1') HTML id
-    # @option options [Hash] :html HTML attributes
-    # @option options [String] :prefixUrl
-    # @option options [Array] :tileSources ([])
-    # @option options [Hash] :options_with_raw_js
-    def openseadragon_collection_viewer(ids_or_images, options={})
-      html_options = (options[:html] or {})
-      html_options[:id] = (options[:id] or 'openseadragon1')
-
-      tile_sources = ids_or_images.zip((options[:tileSources] or [])).map do |id_or_image, opts|
-        image_options(id_or_image, opts)
+    ##
+    # Generate a <picture> tag containing the given sources.
+    # A source can be a simple string, or a hash with the key
+    # for the value of the src attribute and the value as the
+    # arguments for the tag options.
+    #
+    # The last hash is intepreted as optional arguments for the 
+    # <picture> tag. The second to last hash is optional arguments
+    # to all <source> tags.
+    #
+    # @param sources [Array<String>, Array<Hash>]
+    # @param source_tag_options [Hash]
+    # @param picture_tag_options [Hash]
+    def picture_tag *sources
+      picture_options = sources.extract_options!.symbolize_keys
+      source_options = sources.extract_options!.symbolize_keys
+      sources.flatten!
+      content_tag :picture, picture_options do
+        safe_join(sources.map do |source|
+          tag_options =  if source.is_a? Hash
+            src, src_options = source.first
+            src_options ||= {}
+            source_options.merge(src_options.merge(src: src))
+          else  
+            source_options.merge(src: source)
+          end
+          
+          yield tag_options if block_given?
+          tag :source, tag_options
+        end)
       end
+    end
 
-      collection_options = {
-        id: html_options[:id],
-        prefixUrl: '/assets/openseadragon/',
-        tileSources: tile_sources,
-      }.deep_merge(options.except(:html, :tileSources))
+    ##
+    # Generate a <picture> tag ready to be parsed by the openseadragon/rails 
+    # javascript and transformed into an openseadragon viewer. Openseadragon
+    # tile source options are passed as a JSON encoded hash on the
+    # data-openseadragon attribute.
+    #
+    # @see [#picture_tag]
+    # @param sources [Array<String>, Array<Hash>]
+    # @param source_tag_options [Hash]
+    # @param picture_tag_options [Hash]
+    def openseadragon_picture_tag(*sources)
+      picture_options = sources.extract_options!.symbolize_keys
+      source_options = sources.extract_options!.symbolize_keys
+      sources.flatten!
 
-      js_options = options_to_js(collection_options.except(:options_with_raw_js),
-                                 collection_options[:options_with_raw_js])
+      tile_sources = sources.map { |thing| extract_openseadragon_picture_tilesource(thing) }
+      
+      picture_options[:data] ||= {}
+      picture_options[:data][:openseadragon] ||= true
 
-      js =<<-EOF
-        function initOpenSeadragon() {
-          OpenSeadragon(#{js_options});
-        }
-        window.onload = initOpenSeadragon;
-        document.addEventListener("page:load", initOpenSeadragon); // Initialize when using turbolinks
-      EOF
-      content_tag(:div, '', html_options) + javascript_tag(js)
-    end
-
-    # converts a ruby hash to a javascript object without stringifying the raw_js_keys
-    # so you can put js variables in there
-    def options_to_js(options, raw_js_keys=[])
-      normal = options.except(*raw_js_keys).stringify_keys.map do |k, v|
-        val = if v.is_a?(Hash) or v.is_a?(Array)
-                JSON.pretty_generate(v)
-              else
-                json_dump(v)
-              end
-        k.to_s.inspect + ": " + val
-      end
-      raw_js = options.slice(*raw_js_keys).map{|k, v| k.to_s + ": " + v.to_s}
-      "{\n" + (normal + raw_js).join(",\n") + "}"
+      picture_tag [tile_sources], { media: 'openseadragon' }.merge(source_options), picture_options
     end
 
+    private
 
-    # This hack is necessary for ruby 1.9.3. Just use JSON.dump(val) if Ruby >= 2.0
-    if RUBY_VERSION < "2.0.0"
-      def json_dump(val)
-        case val
-        when String, Integer, true, false
-          val.inspect
-        when Symbol
-          val.to_s.inspect
+    ##
+    # @overload extract_openseadragon_picture_tilesource(url)
+    #   @param url [String]
+    # @overload extract_openseadragon_picture_tilesource(tilesource_obj)
+    #   @param tilesource_obj [#to_tilesource] a tilesource-backed object that
+    #     is either a hash of openseadragon tilesource parameters or a URL to
+    #     a manifest containing those parameters. 
+    # @overload extract_openseadragon_picture_tilesource(options)
+    #   @param [Hash] options a hash of openseadragon tilesource options
+    #   @option options [Hash] :html parameters for the <source> tag
+    # @overload extract_openseadragon_picture_tilesource(hash_with_tilesource)
+    #   @param hash_with_tilesource [Hash<#to_tilesource, Hash>] the key of the hash
+    #     is a tilesource object, and the options will be merged with the given hash
+    #   @param [Hash] options a hash of openseadragon tilesource options, which will
+    #      override the tilesource options
+    #   @option options [Hash] :html parameters for the the <source> tag
+    def extract_openseadragon_picture_tilesource thing
+      if thing.respond_to? :to_tilesource
+        html_options ||= {}
+        html_options[:data] ||= {}
+        html_options[:data][:openseadragon] ||= {}
+        
+        tilesource = thing.to_tilesource
+        src = "openseadragon-tilesource"
+        
+        if tilesource.is_a? Hash
+          html_options[:data][:openseadragon].merge! tilesource
         else
-          raise ArgumentError, "Unexpected value #{val.inspect}"
+          src = tilesource
         end
-      end
-    else
-      def json_dump(val)
-        JSON.dump(val)
-      end
-    end
 
-    # @param id_or_image [String,Image] the image identifier or an image object
-    # @param options [Hash] 
-    # @option options [String] :html_id HTML id
-    # @option options [String] :prefix_url
-    # @option options [String] :image_host
-    # @option options [String] :tile_width
-    # @option options [String] :tile_height
-    def openseadragon_viewer(id_or_image, options={})
-      opts = {}
-      opts[:id] = options[:html_id] if options[:html_id]
-      opts[:prefixUrl] = options[:prefix_url] if options[:prefix_url]
-      opts[:tileSources] = [options.slice(:image_host, :tile_width, :tile_height)]
-      opts.deep_merge!(options.except(:html_id, :prefix_url, :image_host, :tile_width, :tile_height))
-      openseadragon_collection_viewer([id_or_image], opts)
-    end
+        [src => html_options ]
+      elsif thing.is_a? Hash
+        src, src_options = thing.first
 
-    private
+        html_options = {}
+        html_options.merge! src_options.fetch(:html, {})
+        html_options[:data] ||= {}
+        
+        osd_options = html_options[:data][:openseadragon] || {}
+        osd_options.merge!(src_options.except(:html))
 
-    # @param id_or_image [String,Image] the image identifier or an image object
-    # @param options [Hash] 
-    def image_options(id_or_image, options)
-      options ||= {}
-      image = case id_or_image
-        when String
-          image_options(Image.find(id_or_image), options)
-        when Image
-          id_or_image.to_tilesource.merge(options)
-        when Info
-          id_or_image.to_tilesource
+        if src.respond_to? :to_tilesource
+          tilesource = src.to_tilesource
+          
+          if tilesource.is_a? Hash
+            osd_options.reverse_merge! tilesource
+            src = "openseadragon-tilesource"
+          else
+            src = tilesource
+          end
         end
+        
+        html_options[:data][:openseadragon] = osd_options.to_json
+        
+        [ html_options.fetch(:src, src) => html_options ]
+      else
+        thing
+      end
     end
   end
 end

data/app/models/openseadragon/{info.rb → open_street_map.rb}

@@ -1,13 +1,12 @@
 module Openseadragon
-  class Info
-    attr_accessor :id
-
+  class OpenStreetMap
     def initialize(attributes = {})
-      self.id = attributes[:id]
     end
     
     def to_tilesource
-      id
+      {
+        type: 'openstreetmaps'
+      }
     end
   end
 end

data/lib/openseadragon/version.rb

@@ -1,3 +1,3 @@
 module Openseadragon
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
 end

data/openseadragon.gemspec

@@ -22,6 +22,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "rake"
   spec.add_development_dependency "engine_cart"
   spec.add_development_dependency "rspec-rails"
+  spec.add_development_dependency "capybara"
   spec.add_development_dependency "sqlite3"
 
   spec.add_dependency 'rails', '> 3.2.0'

data/spec/helpers/openseadragon_helper_spec.rb

@@ -1,154 +1,88 @@
 require 'spec_helper'
 
 describe Openseadragon::OpenseadragonHelper do
-  before do
-    module SpecResolver
-      def self.find(id)
-        Openseadragon::Image.new({ id: id }.merge(data(id)))
+  describe "#picture_tag" do
+    context "without any sources" do
+      it "should render an empty <picture>" do
+        expect(helper.picture_tag).to have_selector 'picture'
       end
-
-      def self.data(id)
-        { 'world' =>  {height: 400, width: 800},
-          'irises' => {height: 3282, width: 4264}}[id]
+      
+      it "should use provided options" do
+        expect(helper.picture_tag a: 1).to have_selector 'picture[a="1"]'
+      end
+    end
+    
+    context "with two sources" do
+      it "should include both sources" do
+        response = helper.picture_tag 'image1.jpg', 'image2.jpg'
+        expect(response).to have_selector 'picture source[src="image1.jpg"]'
+        expect(response).to have_selector 'picture source[src="image2.jpg"]'
+      end
+      
+      it "should use provided global options" do
+        response = helper.picture_tag 'image1.jpg', 'image2.jpg', { a: 1 }, {b: 2}
+        expect(response).to have_selector 'picture[b="2"]'
+        expect(response).to have_selector 'picture source[src="image1.jpg"][a="1"]'
+        expect(response).to have_selector 'picture source[src="image2.jpg"][a="1"]'
+      end
+      
+    end
+    
+    context "with a source given as a hash" do
+      it "should use the key of the hash for the src" do
+        expect(helper.picture_tag ['image1.jpg' => { }]).to have_selector 'picture source[src="image1.jpg"]'
+      end
+      
+      it "should use the attributes as options for the source tag" do
+        expect(helper.picture_tag ['image1.jpg' => { a: 1}]).to have_selector 'picture source[src="image1.jpg"][a="1"]'
+      end
+      
+      it "should merge the source-specific attributes with the global attributes" do
+        expect(helper.picture_tag ['image1.jpg' => { a: 1}], {a: 2, b: 2}, { }).to have_selector 'picture source[src="image1.jpg"][a="1"][b="2"]'
       end
     end
-    Openseadragon::Image.file_resolver = SpecResolver
-  end
-
-  it "should draw the single item viewer" do
-    out = openseadragon_viewer('world', image_host: '/foo', html: {class: 'stuff'})
-    out.should == '<div class="stuff" id="openseadragon1"></div><script>
-//<![CDATA[
-        function initOpenSeadragon() {
-          OpenSeadragon({
-"id": "openseadragon1",
-"prefixUrl": "/assets/openseadragon/",
-"tileSources": [
-  {
-    "identifier": "world",
-    "width": 800,
-    "height": 400,
-    "scale_factors": [
-      1,
-      2,
-      3,
-      4,
-      5
-    ],
-    "formats": [
-      "jpg",
-      "png"
-    ],
-    "qualities": [
-      "native",
-      "bitonal",
-      "grey",
-      "color"
-    ],
-    "profile": "http://library.stanford.edu/iiif/image-api/compliance.html#level3",
-    "tile_width": 1024,
-    "tile_height": 1024,
-    "image_host": "/foo"
-  }
-]});
-        }
-        window.onload = initOpenSeadragon;
-        document.addEventListener("page:load", initOpenSeadragon); // Initialize when using turbolinks
-
-//]]>
-</script>'
-  end
-
-  it "should draw the single item viewer for an info.json source" do
-    out = openseadragon_viewer(Openseadragon::Info.new(id: 'uri:to/info.json'))
-    expect(out).to match '' +'
-"tileSources": \[
-  "uri:to/info.json"
-\]\}\);'
-
-  end
-
-  it "should not crash when there's no tileSources" do
-    openseadragon_collection_viewer(['world', 'irises'], {extraOption: :some_stuff})
-    openseadragon_collection_viewer(['world', 'irises'],
-                                    {extraOption: :some_stuff,
-                                     rawOption: "(1 + 1)",
-                                     options_with_raw_js: [:rawOption]})
   end
-
-  it "should draw the collection viewer" do
-    out = openseadragon_collection_viewer(['world', 'irises'],
-                                          {tileSources: [{profile: :foo}, {profile: :bar}],
-                                           extraOption: :some_stuff,
-                                           rawOption: "(1 + 1)",
-                                           options_with_raw_js: [:rawOption]})
-    out.should == '<div id="openseadragon1"></div><script>
-//<![CDATA[
-        function initOpenSeadragon() {
-          OpenSeadragon({
-"id": "openseadragon1",
-"prefixUrl": "/assets/openseadragon/",
-"tileSources": [
-  {
-    "identifier": "world",
-    "width": 800,
-    "height": 400,
-    "scale_factors": [
-      1,
-      2,
-      3,
-      4,
-      5
-    ],
-    "formats": [
-      "jpg",
-      "png"
-    ],
-    "qualities": [
-      "native",
-      "bitonal",
-      "grey",
-      "color"
-    ],
-    "profile": "foo",
-    "tile_width": 1024,
-    "tile_height": 1024,
-    "image_host": "/image-service"
-  },
-  {
-    "identifier": "irises",
-    "width": 4264,
-    "height": 3282,
-    "scale_factors": [
-      1,
-      2,
-      3,
-      4,
-      5
-    ],
-    "formats": [
-      "jpg",
-      "png"
-    ],
-    "qualities": [
-      "native",
-      "bitonal",
-      "grey",
-      "color"
-    ],
-    "profile": "bar",
-    "tile_width": 1024,
-    "tile_height": 1024,
-    "image_host": "/image-service"
-  }
-],
-"extraOption": "some_stuff",
-rawOption: (1 + 1)});
-        }
-        window.onload = initOpenSeadragon;
-        document.addEventListener("page:load", initOpenSeadragon); // Initialize when using turbolinks
-
-//]]>
-</script>'
+  
+  describe "#openseadragon_picture_tag" do
+    it "should mark the <picture> as an openseadragon tag" do
+        expect(helper.openseadragon_picture_tag).to have_selector 'picture[data-openseadragon="true"]'
+    end
+    
+    it "should pass simple strings through" do
+      response = helper.openseadragon_picture_tag('image1.jpg', 'image2.jpg')
+      expect(response).to have_selector 'picture source[src="image1.jpg"][media="openseadragon"]'
+      expect(response).to have_selector 'picture source[src="image2.jpg"][media="openseadragon"]'
+    end
+    
+    context "with tilesource objects" do
+      it "should convert sources to tilesources" do
+        source = double(to_tilesource: { a: 1})
+        response = helper.openseadragon_picture_tag(source)
+        expect(response).to have_selector 'picture source[src="openseadragon-tilesource"]'
+        expect(response).to match /data-openseadragon="#{helper.escape_once({a: 1}.to_json)}"/
+      end
+    end
+    
+    context "with a source given as a hash" do
+      it "should extract html options" do
+        response = helper.openseadragon_picture_tag(['image1.jpg' => { html: { id: 'xyz' }}])
+        expect(response).to have_selector 'picture source[src="image1.jpg"][id="xyz"]'
+      end
+      
+      it "should pass the remaining options as encoded openseadragon options" do
+        response = helper.openseadragon_picture_tag(['image1.jpg' => { a: 1}])
+        expect(response).to have_selector 'picture source[src="image1.jpg"]'
+        expect(response).to have_selector 'picture source[src="image1.jpg"][data-openseadragon]'
+        expect(response).to match /data-openseadragon="#{helper.escape_once({a: 1}.to_json)}"/
+      end
+      
+      it "should merge a tilesource key with the options provided" do
+        source = double(to_tilesource: { a: 1, b: 1})
+        response = helper.openseadragon_picture_tag([source => { html: { id: 'xyz' }, b: 2, c: 3}])
+        expect(response).to have_selector 'picture source[src="openseadragon-tilesource"]'
+        expect(response).to have_selector 'picture source[src="openseadragon-tilesource"][id="xyz"]'
+        expect(response).to match /data-openseadragon="#{helper.escape_once({b: 2, c: 3, a: 1, }.to_json)}"/
+      end
+    end
   end
 end