shutterbug 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. data/README.md +11 -2
  2. data/demo/iframe2.html +30 -0
  3. data/demo/index.html +1 -1
  4. data/demo/withIframe.html +11 -4
  5. data/lib/shutterbug.rb +1 -1
  6. data/lib/shutterbug/shutterbug.js +10 -5
  7. metadata +5 -4
data/README.md CHANGED
@@ -42,9 +42,18 @@ See [LICENSE.md](license.md) for more information.
42
42
 
43
43
  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:
44
44
 
45
- 1. include the following javascript in your pages: `<script src='http://<yourhost:port>/shutterbug/shutterbug.js' type='text/javascript'></script>`
46
- 1. Elsewhere in your javascript call `getDomSnapshot($("#sourceDomID"),$("#imageOutputDomId"));` This will replace the contents of `$("#imageOutputDomId")` with an `<img src="http://<yourhost:port>/gete_png/sha1hash>` tag which will magically spring into existance.
45
+ include the following javascript in your pages:
46
+
47
+ <script src='http://<yourhost:port>/shutterbug/shutterbug.js' type='text/javascript'></script>
48
+
49
+ Elsewhere in your javascript, something like this:
50
+
51
+ var shutterbug = new Shutterbug('#sourceselector', '#outselector',optCallbackFn, optIdentifier);
52
+ $('#button').click(function() {
53
+ shutterbug.getDomSnapshot();
54
+ });
47
55
 
56
+ 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 whith 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.
48
57
 
49
58
  ## Deploying on Heroku ##
50
59
 
data/demo/iframe2.html ADDED
@@ -0,0 +1,30 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <title>demo</title>
5
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6
+ <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
7
+ <link rel="stylesheet" type="text/css" href="main.css"></link>
8
+ <style type="text/css">
9
+ #src {
10
+ color: green;
11
+ width: 100px;
12
+ height: 100px;
13
+ }
14
+ </style>
15
+ </head>
16
+
17
+ <body>
18
+ <div id="src">
19
+ (iframe)
20
+ </div>
21
+ </div>
22
+
23
+ </body>
24
+ <script type="text/javascript">
25
+ var dd = null;
26
+ $(document).ready(function(e) {
27
+ dd = new Shutterbug('#src');
28
+ });
29
+ </script>
30
+ </html>
data/demo/index.html CHANGED
@@ -27,7 +27,7 @@
27
27
  var target = $(e.target);
28
28
  var src = target.attr('data-src');
29
29
  var dst = target.attr('data-dst');
30
- var bug = new Shutterbug(src,dst);
30
+ var bug = new Shutterbug(src,dst,null,"xxyyz");
31
31
  bug.getDomSnapshot();
32
32
  });
33
33
  });
data/demo/withIframe.html CHANGED
@@ -13,19 +13,26 @@
13
13
  </head>
14
14
 
15
15
  <body>
16
- <iframe src="iframe.html" width="300" height="300"></iframe>
16
+ <iframe id="src1" src="iframe.html" width="300" height="300"></iframe>
17
17
  <button class="shutterbug" data-dst="#dst">Snapshot</button>
18
- <div id="dst">
19
- </div>
18
+ <div id="dst"></div>
19
+ <body>
20
+ <iframe id="src2" src="iframe2.html" width="300" height="300"></iframe>
21
+ <button class="shutterbug2" data-dst="#dst">Snapshot</button>
22
+ <div id="dst2"></div>
20
23
 
21
24
  </body>
22
25
  <script type="text/javascript">
23
26
  var bug = null;
24
27
  $(document).ready(function(e) {
25
- bug = new Shutterbug("iframe","#dst");
28
+ bug = new Shutterbug("#src1","#dst");
29
+ bug2 = new Shutterbug("#src2","#dst2",null,"plugh");
26
30
  $("button.shutterbug").click(function(e) {
27
31
  bug.getDomSnapshot();
28
32
  });
33
+ $("button.shutterbug2").click(function(e) {
34
+ bug2.getDomSnapshot();
35
+ });
29
36
  });
30
37
  </script>
31
38
  </html>
data/lib/shutterbug.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Shutterbug
2
- VERSION = "0.0.8"
2
+ VERSION = "0.0.9"
3
3
  autoload :Service, "shutterbug/service"
4
4
  autoload :Rackapp, "shutterbug/rackapp"
5
5
  autoload :Configuration, "shutterbug/configuration"
data/lib/shutterbug/shutterbug.js CHANGED
@@ -92,16 +92,18 @@
92
92
  var requestHtmlFrag = function() {
93
93
  var destination = $(this.element)[0].contentWindow;
94
94
  var message = {
95
- type: 'htmlFragRequest'
95
+ type: 'htmlFragRequest',
96
+ id: this.id
96
97
  };
97
98
  destination.postMessage(JSON.stringify(message),"*");
98
99
  };
99
100
 
100
- window.Shutterbug = function(selector,imgDst,callback) {
101
+ window.Shutterbug = function(selector,imgDst,callback,id) {
101
102
  var shutterbugInstance = {
102
103
  element: selector,
103
104
  imgDst: imgDst,
104
105
  callback: callback,
106
+ id: id,
105
107
  getDomSnapshot: getPng,
106
108
  getPng: getPng,
107
109
  getHtmlFragment: getHtmlFragment,
@@ -116,7 +118,8 @@
116
118
  if(data.type === 'htmlFragRequest') {
117
119
  var response = {
118
120
  type: 'htmlFragResponse',
119
- value: shutterbugInstance.getHtmlFragment()
121
+ value: shutterbugInstance.getHtmlFragment(),
122
+ id: data.id // return to sender only...
120
123
  };
121
124
  message.source.postMessage(JSON.stringify(response),"*");
122
125
  }
@@ -129,8 +132,10 @@
129
132
  }
130
133
  var html = null;
131
134
  if(data.type === 'htmlFragResponse') {
132
- html = data.value;
133
- shutterbugInstance.getPng(html);
135
+ if(data.id == shutterbugInstance.id) {
136
+ html = data.value;
137
+ shutterbugInstance.getPng(html);
138
+ }
134
139
  }
135
140
  };
136
141
  window.addEventListener('message', htmlFragRequestListen, false);
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shutterbug
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.8
4
+ version: 0.0.9
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-07-10 00:00:00.000000000 Z
12
+ date: 2013-07-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bundler
@@ -129,6 +129,7 @@ files:
129
129
  - Rakefile
130
130
  - config.ru
131
131
  - demo/iframe.html
132
+ - demo/iframe2.html
132
133
  - demo/index.html
133
134
  - demo/main.css
134
135
  - demo/withIframe.html
@@ -161,7 +162,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
161
162
  version: '0'
162
163
  segments:
163
164
  - 0
164
- hash: -375693095855382946
165
+ hash: 3398938628645740701
165
166
  required_rubygems_version: !ruby/object:Gem::Requirement
166
167
  none: false
167
168
  requirements:
@@ -170,7 +171,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
170
171
  version: '0'
171
172
  segments:
172
173
  - 0
173
- hash: -375693095855382946
174
+ hash: 3398938628645740701
174
175
  requirements: []
175
176
  rubyforge_project:
176
177
  rubygems_version: 1.8.23