shutterbug 0.4.3 → 0.5.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MjY4NTQ1OTA1ZjFjZmFjZGUzNjVhMWZmNjc4ODM4N2VjZTVkMDFiYQ==
+    ZDhhMGNiMWQ4MGY0Yzc3N2FkNWEyYWY4OWMyYjhmOTgzYWE3YjBlYg==
   data.tar.gz: !binary |-
-    NzhmMTc5NGEzNzIzYjNjM2M1ZmIzM2U3NGJlMDhjYTgyYzRjNDZhNg==
+    ZjM4NDMyODcyYWIxNWJjN2FkN2MzZjRjMjA2NDExODBjNGZmODFlOQ==
 SHA512:
   metadata.gz: !binary |-
-    NmJkMjRiYjMyYjZhZjAyZmUyYTUxOTc3ZThiNjZlMWVkNWUwMjFmYTNlNTBi
-    MjcyM2EyZTE5MWZmNjgxMDdlM2UxZDRjOWRjYWI1NjFlMmUzNzExMWM4ZjRk
-    YmU5YWI5Y2YxY2MyYTkyOTE2YzdhMDAwZDBjYWE4M2RkZDliY2U=
+    YTk4ZTlhOGYxOTBiMGY2OTE0ZDc2YThlMjE4MDI2NzNhZmY1ZmMwYTVhYjE2
+    ZjhjNTUzMzY4MTMzYWQyMWQ4YmM0ZDM2Yzk2NDhlNjk2MjIyNTM3MDRjOWIx
+    ODU2ZWFhMzU5OGVkNDZiMzdhZDA5MDhjNjBmZGVmZDg5ZjA0OWQ=
   data.tar.gz: !binary |-
-    ZDFmZmM5ZjZiZjVjYjI4ODk0OTdlZmQxZmRiZmY5OTVlNjhmYTAzZjE4MzYz
-    ZWU1OTk4YjhkMmMwNjcxNmNhOWVhYzNjMzZkZGMyMWNhMTA2YjMzMjJiZDVh
-    ZWRlMzE0YzcyZmRjNTUyZGZlNzA5NTFlM2VhYzYwMzU2NmYxMmM=
+    NTkwNDc5OTFkNWRiNjMxNzEyMTg2NjRiMTY2MjRiODEwMjcwMmU5NWRlMWJk
+    Zjk0MDE2YTdjN2IyM2Q3M2VhNmIwZTA3YmJmOGYxMjM0ZDUxNmY2ZTM3ODNl
+    ODIyNDAwNjcwNDU3NjdkZWQ4ZTA3MzU2YmU4ZjcyZDJjNDA1NTM=

data/README.md

@@ -6,19 +6,7 @@
 
 ## Overview ##
 
-Shutterbug has two parts: a browser javascript library for taking html snapshots, and a server side utility for turning those html snapshots into images.
-
-### Browser Javascript library
-
-By itself `shutterbug.js` is useful for authors of iframe'able content. With `shutterbug.js` on the iframe'd page, the parent window can request an html snapshot even if the iframe'd page is on a different domain. To enable this functionality you need to add the following lines to your iframe'able page:
-
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-    <script src="shutterbug.js"></script>
-    <script>new Shutterbug('body');</script>
-
-The `shutterbug.js` file is located in this repository: `lib/shutterbug/handlers/shutterbug.js`
-
-`shutterbug.js` also includes the API to talk to the server side utility to generate a image of the html snapshot. See the [Usage section](#usage) below for information.
+Shutterbug has two parts: a browser javascript library for taking html snapshots, and a server side utility for turning those html snapshots into images. This repository consists of JavaScript library.
 
 ### Server Side Utility
 
@@ -40,7 +28,6 @@ Shutterbug is distributed as a Ruby Gem. The rack service delivers a javascript
 
 ## Requirements & Dependencies
 
-  * shutterbug.js requires [JQuery](http://jquery.com/), and expects JQuery to be found via window.$ . Note that shutterbug will allow you to pass in JQuery through its constructor too, in the event that its not at window.$
   * Ruby 1.9x or greater is required to run the Rack application.
   * [PhantomJS](http://phantomjs.org/) is requird to run the Rack application.
 
@@ -66,78 +53,6 @@ Or install it yourself as:
 
 See [LICENSE.md](LICENSE.md) for more information.
 
-## Usage
-
-After adding `use Shutterbug::Rackapp` to your config.ru file, you can convert pieces of your web-page into png images.  Just follow these steps:
-
-Include the following javascript in your pages:
-
-     <script src='http://<yourhost:port>/shutterbug/shutterbug.js' type='text/javascript'></script>
-
-Elsewhere in your javascript, something like this:
-
-      var shutterbug = new Shutterbug('#sourceselector', '#outselector',optCallbackFn, optIdentifier);
-      $('#button').click(function() {
-        shutterbug.getDomSnapshot();
-      });
-
-This will replace the contents of `$("#outselector")` with an `<img src="http://<yourhost:port>/gete_png/sha1hash>` tag which will magically spring into existance.  `optCallbackFn` is an optional callback function which will be invoked with the `<img src=..>` tag. `optIdentifier` is useful when there are multiple snapshot buttons targetting multiple iframes, and you need to verify the destination for various snapshot window message events.
-
-## Advanced usage
-
-You can specify a failure callback on your shutterbug object. This callback will be invoked when the server response was not 200:
-
-      var shutterbug = new Shutterbug('#sourceselector', '#outselector',optCallbackFn, optIdentifier);
-      shutterbug.setFailureCallback(function(jqXHR, textStatus, errorThrown) {
-        alert("Something went wrong: " + textStatus);
-      });
-
-### IFrame support
-
-If the element being snapshot'd is an iframe then the iframe needs to handle a postMessage API.
-Shutterbug will run something like the following JS to get the html of the iframe
-
-    iframe.contentWindow.postMessage(JSON.stringify({
-      type: 'htmlFragRequest',
-      id: id
-    }), "*");
-
-It is passing a JSON message that specifies the 'type' of message and passes an id so the caller can match up the response.
-Currently the id will be the optIdentifier passed to the Shutterbug constructor in the parent window.
-The iframe should respond by posting back to the source window a message like:
-
-    message.source.postMessage(JSON.stringfy({
-      type:  'htmlFragResponse',
-      value: {
-        content: 'htmlContent'
-        css: '<div><link rel='stylesheet'..><style>...</style></div>',
-        width: width,
-        height: height,
-        base_url: 'url that resource urls in content and css are relative to'
-        },
-      id:    id  // id sent in in the 'htmlFragRequest'
-    }), message.origin);
-
-The `shutterbug.js` script actually adds a handler for this postMessage API when the Shutterbug constructor is called.
-So if shutterbug is included in the iframe html as described in the Usage section above, then a parent page can snapshot
-the iframe. The iframe's html doesn't need the button with a click hander because the parent window will trigger things.
-Additionally the `#outselector` in the iframe is not used.
-
-You could also reimplement this API in the html of the iframe if you'd like. However the shutterbug implementation includes
-some useful things like finding and including all the css on the page, and 'serializing' canvas elements into images.
-
-### Shutterbug JQuery custom events ###
-
-Shutterbug emits a jQuery custom event called `shutterbug-saycheese` just prior to copying styles, elements, and canvas contents to the document fragment. This allows applications to do any preparation required before they are ready to be snapshotted.
-
-In your application, you can register your event-handler like this:
-
-      $(window).on('shutterbug-saycheese', function() {
-        api.renderCanvas();
-      });
-
-After all elements are copied, emits a `shutterbug-asyouwere` event.
-
 ### Deploying on Heroku ###
 
 To deploy on heroku, you are going to want to modify your stack following [these instructions](http://nerdery.crowdmob.com/post/33143120111/heroku-ruby-on-rails-and-phantomjs).
@@ -179,6 +94,9 @@ And a Procfile which looks like this:
 
 ## Changes ##
 
+*  December 11, 2014 – v 0.5.0
+    *  JS lib, JS handler and demos removed (as they are part of the new [shutterbug.js](https://github.com/concord-consortium/shutterbug.js) repo now).
+
 *  December 4, 2014 – v 0.4.3
     *  Added support of various image formats and quality settings.
 

data/lib/shutterbug.rb

@@ -1,5 +1,5 @@
 module Shutterbug
-  VERSION = "0.4.3"
+  VERSION = "0.5.0"
   autoload :Rackapp,        "shutterbug/rackapp"
   autoload :Configuration,  "shutterbug/configuration"
   autoload :Storage,        "shutterbug/storage"

data/lib/shutterbug/handlers.rb

@@ -2,7 +2,6 @@ module Shutterbug
   module Handlers
     autoload :ConvertHandler, "shutterbug/handlers/convert_handler"
     autoload :DirectUploadHandler, "shutterbug/handlers/direct_upload_handler"
-    autoload :JsFileHandler, "shutterbug/handlers/js_file_handler"
     autoload :FileHandler, "shutterbug/handlers/file_handler"
   end
 end

data/lib/shutterbug/handlers/convert_handler.rb

@@ -17,33 +17,20 @@ module Shutterbug
         helper.response(response_text, 'text/plain')
       end
 
-      def convert_quality(val, format)
-        # Client sends quality between 0 and 1 (similar to .toDataURL() second argument).
-        # This conversion tries to ensure that the size of the final image is similar to
-        # .toDataURL() output with given quality settings.
-        val = val.to_f
-        case format
-        when "png"
-          val *= 10
-        when "jpeg"
-          val *= 100
-        else
-          val *= 100
-        end
-        # PhantomJS expects integer.
-        val.to_i
+      def get_options(req)
+        opts = {}
+        opts[:html]    = req.POST()['content']
+        opts[:width]   = req.POST()['width']
+        opts[:height]  = req.POST()['height']
+        opts[:css]     = req.POST()['css']
+        opts[:format]  = req.POST()['format']
+        opts[:quality] = req.POST()['quality']
+        return opts
       end
 
       def convert(req)
-        html     = req.POST()['content'] || ""
-        width    = req.POST()['width']   || 1000
-        height   = req.POST()['height']  || 700
-        css      = req.POST()['css']     || ""
-        format   = req.POST()['format']  || "png"
-        quality  = req.POST()['quality'] || 1
-        quality  = convert_quality(quality, format)
-        config   = self.class.config
-        job = PhantomJob.new(config.base_url(req), html, css, width, height, format, quality)
+        config = self.class.config
+        job = PhantomJob.new(config.base_url(req), get_options(req))
         unless (cache_entry = config.cache_manager.find(job.cache_key))
           job.rasterize
           html_entry = Shutterbug::CacheManager::CacheEntry.new(job.html_file)

data/lib/shutterbug/phantom_job.rb

@@ -11,14 +11,32 @@ module Shutterbug
       File.join(File.dirname(__FILE__),'rasterize.js')
     end
 
-    def initialize(base_url, html, css="", width=1000, height=700, format="png", quality=10)
+    def convert_quality(val, format)
+      # Client sends quality between 0 and 1 (similar to .toDataURL() second argument).
+      # This conversion tries to ensure that the size of the final image is similar to
+      # .toDataURL() output with given quality settings.
+      val = val.to_f
+      case format
+      when "png"
+        val *= 10
+      when "jpeg"
+        val *= 100
+      else
+        val *= 100
+      end
+      # PhantomJS expects integer.
+      val.to_i
+    end
+
+    def initialize(base_url, options)
       @base_url = base_url
-      @html     = html
-      @css      = css
-      @width    = width
-      @height   = height
-      @format   = format
-      @quality  = quality
+      @html     = options[:html]    || ""
+      @css      = options[:css]     || ""
+      @width    = options[:width]   || 1000
+      @height   = options[:height]  || 700
+      @format   = options[:format]  || "png"
+      @quality  = options[:quality] || 1
+      @quality  = convert_quality(@quality, @format)
       @config   = Configuration.instance
     end
 

data/lib/shutterbug/rackapp.rb

@@ -5,7 +5,6 @@ module Shutterbug
     DefaultHandlers = [
       Shutterbug::Handlers::ConvertHandler,
       Shutterbug::Handlers::DirectUploadHandler,
-      Shutterbug::Handlers::JsFileHandler,
       Shutterbug::Handlers::FileHandler
     ]
 

data/spec/shutterbug/rackapp_spec.rb

@@ -68,13 +68,5 @@ describe Shutterbug::Rackapp do
         last_response.headers['Content-Type'].should match 'image/png'
       end
     end
-
-    describe "get shutterbug.js javascipt route" do
-      it "should return js file" do
-        get "/shutterbug/shutterbug.js"
-        last_response.should be_ok
-        last_response.headers['Content-Type'].should match 'application/javascript'
-      end
-    end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shutterbug
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - Noah Paessel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-05 00:00:00.000000000 Z
+date: 2014-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -156,24 +156,7 @@ files:
 - LICENSE.md
 - README.md
 - Rakefile
-- bower.json
 - config.ru
-- demo/The_Scream.jpg
-- demo/canvas_example.html
-- demo/iframe.html
-- demo/iframe2.html
-- demo/iframe3.html
-- demo/iframe4.html
-- demo/iframe_example.html
-- demo/iframe_no_shutterbug.html
-- demo/index.html
-- demo/main.css
-- demo/nested_iframe_example.html
-- demo/oil-and-water/heatbath.svg
-- demo/oil-and-water/ke-gradient.svg
-- demo/oil-and-water/oil-and-water.svg
-- demo/simple_example.html
-- demo/svg_example.html
 - images/shutterbug.jpg
 - lib/shutterbug.rb
 - lib/shutterbug/cache_manager.rb
@@ -184,8 +167,6 @@ files:
 - lib/shutterbug/handlers/convert_handler.rb
 - lib/shutterbug/handlers/direct_upload_handler.rb
 - lib/shutterbug/handlers/file_handler.rb
-- lib/shutterbug/handlers/js_file_handler.rb
-- lib/shutterbug/handlers/shutterbug.js
 - lib/shutterbug/phantom_job.rb
 - lib/shutterbug/rackapp.rb
 - lib/shutterbug/rasterize.js
@@ -200,7 +181,6 @@ files:
 - spec/shutterbug/direct_upload_handler_spec.rb
 - spec/shutterbug/file_handler_spec.rb
 - spec/shutterbug/file_storage_spec.rb
-- spec/shutterbug/js_file_handler_spec.rb
 - spec/shutterbug/rackapp_spec.rb
 - spec/shutterbug/s3_storage_spec.rb
 - spec/spec_helper.rb
@@ -236,7 +216,6 @@ test_files:
 - spec/shutterbug/direct_upload_handler_spec.rb
 - spec/shutterbug/file_handler_spec.rb
 - spec/shutterbug/file_storage_spec.rb
-- spec/shutterbug/js_file_handler_spec.rb
 - spec/shutterbug/rackapp_spec.rb
 - spec/shutterbug/s3_storage_spec.rb
 - spec/spec_helper.rb

data/bower.json

@@ -1,26 +0,0 @@
-{
-  "name": "shutterbug",
-  "version": "0.4.3",
-  "homepage": "https://github.com/concord-consortium/shutterbug",
-  "authors": [
-    "Noah Paessel <npaessel@concord.org>"
-  ],
-  "description": "Javascript library for facilitating rendering DOM components in rasterized form.",
-  "main": "./lib/shutterbug/handlers/shutterbug.js",
-  "dependencies": {
-    "jquery": "1.11.0"
-  },
-  "keywords": [
-    "shutterbug"
-  ],
-  "license": "MIT",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "spec",
-    "demo",
-    "images"
-  ]
-}

data/demo/canvas_example.html

@@ -1,36 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-      <title>demo</title>
-      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-      <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
-      <link rel="stylesheet" type="text/css" href="main.css">
-  </head>
-
-  <body>
-    <div>
-      <canvas id="src" width="350" height="350"></canvas>
-    </div>
-    <button class="shutterbug" data-dst="#dst">Snapshot</button>
-    <div id="dst"></div>
-  </body>
-  <script type="text/javascript">
-    $(document).ready(function(e) {
-      var img = new Image();
-      img.onload = function () {
-        var ctx = $("canvas")[0].getContext("2d");
-        ctx.fillStyle = "green";
-        ctx.fillRect(0, 0, 350, 350);
-        ctx.fillStyle = "orange";
-        ctx.fillRect(10, 10, 330, 330);
-        ctx.drawImage(img, 20, 20, 310, 310);
-      };
-      img.src = "The_Scream.jpg";
-
-      var bug = new Shutterbug("#src", "#dst", null, null, null, {format: "jpeg", quality: 0.75});
-      $("button.shutterbug").click(function(e) {
-        bug.getDomSnapshot();
-      });
-    });
-  </script>
-</html>

data/demo/iframe.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-      <title>demo</title>
-      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-      <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
-      <link rel="stylesheet" type="text/css" href="main.css"></link>
-      <style type="text/css">
-        #src {
-          color: blue;
-          width: 100px;
-          height: 100px;
-        }
-      </style>
-  </head>
-
-  <body>
-    <div id="src">
-      (iframe)
-    </div>
-  </div>
-
-  </body>
-  <script type="text/javascript">
-    var dd = null;
-    $(document).ready(function(e) {
-      dd    = new Shutterbug('#src');
-    });
-  </script>
-</html>

data/demo/iframe2.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-      <title>demo</title>
-      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-      <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
-      <link rel="stylesheet" type="text/css" href="main.css"></link>
-      <style type="text/css">
-        #src {
-          color: green;
-          width: 100px;
-          height: 100px;
-        }
-      </style>
-  </head>
-
-  <body>
-    <div id="src">
-      (iframe)
-    </div>
-  </div>
-
-  </body>
-  <script type="text/javascript">
-    var dd = null;
-    $(document).ready(function(e) {
-      dd    = new Shutterbug('#src');
-    });
-  </script>
-</html>