shutterbug 0.0.8 → 0.0.9

Sign up to get free protection for your applications and to get access to all the features.
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