shutterbug 0.0.8 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +11 -2
- data/demo/iframe2.html +30 -0
- data/demo/index.html +1 -1
- data/demo/withIframe.html +11 -4
- data/lib/shutterbug.rb +1 -1
- data/lib/shutterbug/shutterbug.js +10 -5
- 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
|
-
|
46
|
-
|
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
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
|
-
|
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 =
|
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
@@ -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
|
-
|
133
|
-
|
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.
|
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-
|
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:
|
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:
|
174
|
+
hash: 3398938628645740701
|
174
175
|
requirements: []
|
175
176
|
rubyforge_project:
|
176
177
|
rubygems_version: 1.8.23
|