ballonizer 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/examples/ballonizer_app/config.ru +59 -0
  3. data/examples/ballonizer_app/index.html +159 -0
  4. data/examples/ballonizer_js_module/index.html +196 -0
  5. data/lib/assets/javascripts/ballonizer.js +482 -0
  6. data/lib/assets/stylesheets/ballonizer.css +78 -0
  7. data/lib/ballonizer.rb +201 -36
  8. data/spec/ballonizer_spec.rb +153 -2
  9. data/spec/javascripts/ballonizer_spec.js +568 -0
  10. data/spec/javascripts/fixtures/ballonized-xkcd-with-anchor-in-image.html +163 -0
  11. data/spec/javascripts/fixtures/ballonized-xkcd-with-ballons.html +163 -0
  12. data/spec/javascripts/fixtures/ballonized-xkcd-without-ballons.html +163 -0
  13. data/spec/javascripts/fixtures/xkcd.css +191 -0
  14. data/spec/javascripts/helpers/jasmine-jquery.js +660 -0
  15. data/spec/javascripts/helpers/jquery.simulate-ext.js +32 -0
  16. data/spec/javascripts/helpers/jquery.simulate.drag-n-drop.js +583 -0
  17. data/spec/javascripts/helpers/jquery.simulate.js +328 -0
  18. data/spec/javascripts/support/jasmine.yml +99 -0
  19. data/vendor/assets/javascripts/jquery-2.0.1.js +8837 -0
  20. data/vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js +6 -0
  21. data/vendor/assets/javascripts/jquery.json-2.4.min.js +24 -0
  22. data/vendor/assets/stylesheets/ui-lightness/images/animated-overlay.gif +0 -0
  23. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png +0 -0
  24. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png +0 -0
  25. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_flat_10_000000_40x100.png +0 -0
  26. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
  27. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
  28. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
  29. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png +0 -0
  30. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png +0 -0
  31. data/vendor/assets/stylesheets/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
  32. data/vendor/assets/stylesheets/ui-lightness/images/ui-icons_222222_256x240.png +0 -0
  33. data/vendor/assets/stylesheets/ui-lightness/images/ui-icons_228ef1_256x240.png +0 -0
  34. data/vendor/assets/stylesheets/ui-lightness/images/ui-icons_ef8c08_256x240.png +0 -0
  35. data/vendor/assets/stylesheets/ui-lightness/images/ui-icons_ffd27a_256x240.png +0 -0
  36. data/vendor/assets/stylesheets/ui-lightness/images/ui-icons_ffffff_256x240.png +0 -0
  37. data/vendor/assets/stylesheets/ui-lightness/jquery-ui-1.10.3.custom.min.css +5 -0
  38. metadata +51 -3
data/spec/javascripts/fixtures/ballonized-xkcd-with-anchor-in-image.html ADDED
@@ -0,0 +1,163 @@
1
+ <div id="topContainer">
2
+ <div id="topLeft">
3
+ <ul>
4
+ <li>
5
+ <a href="http://xkcd.com/archive">Archive</a>
6
+ </li>
7
+ <li>
8
+ <a href="http://what-if.xkcd.com">What If?</a>
9
+ </li>
10
+ <li>
11
+ <a href="http://blag.xkcd.com">Blag</a>
12
+ </li>
13
+ <li>
14
+ <a href="http://store.xkcd.com/">Store</a>
15
+ </li>
16
+ <li>
17
+ <a rel="author" href="http://xkcd.com/about">About</a>
18
+ </li>
19
+ </ul>
20
+ </div>
21
+ <div id="topRight">
22
+ <div id="masthead">
23
+ <span>
24
+ <a href="http://xkcd.com/">
25
+ <img src="http://imgs.xkcd.com/static/terrible_small_logo.png"
26
+ alt="xkcd.com logo" height="83" width="185" />
27
+ </a>
28
+ </span>
29
+ <span id="slogan">A webcomic of romance,
30
+ <br />sarcasm, math, and language.</span>
31
+ </div>
32
+ <div id="news">You can get the Subways comic as a
33
+ <a href="http://store-xkcd-com.myshopify.com/products/subways">
34
+ poster</a>!</div>
35
+ </div>
36
+ <div id="bgLeft" class="bg box"></div>
37
+ <div id="bgRight" class="bg box"></div>
38
+ </div>
39
+ <div id="middleContainer" class="box">
40
+ <div id="ctitle">Cells</div>
41
+ <ul class="comicNav">
42
+ <li>
43
+ <a href="http://xkcd.com/1/">|&lt;</a>
44
+ </li>
45
+ <li>
46
+ <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
47
+ </li>
48
+ <li>
49
+ <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
50
+ </li>
51
+ <li>
52
+ <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
53
+ </li>
54
+ <li>
55
+ <a href="http://xkcd.com/">&gt;|</a>
56
+ </li>
57
+ </ul>
58
+ <div id="comic">
59
+ <!-- The original img tag haven't the width and height defined, but seems that
60
+ the jasmine-headless-webkit don't load the image and use its width and
61
+ height. So it's necessary define them if we want to test. In a real browser
62
+ the events will not trigger until the image is loaded because the divs
63
+ are defined with percentuals and will have size zero (impossible to click).
64
+ -->
65
+ <a href="http://xkcd.com/1218/" ><div class="ballonizer_image_container"><img src="http://imgs.xkcd.com/comics/cells.png"
66
+ title="Now, if it selectively kills cancer cells in a petri dish, you can be sure it's at least a great breakthrough for everyone suffering from petri dish cancer."
67
+ width="218px"
68
+ height="339px"
69
+ alt="Cells" /></div></a>
70
+ </div>
71
+ <ul class="comicNav">
72
+ <li>
73
+ <a href="http://xkcd.com/1/">|&lt;</a>
74
+ </li>
75
+ <li>
76
+ <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
77
+ </li>
78
+ <li>
79
+ <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
80
+ </li>
81
+ <li>
82
+ <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
83
+ </li>
84
+ <li>
85
+ <a href="http://xkcd.com/">&gt;|</a>
86
+ </li>
87
+ </ul>
88
+ <br />Permanent link to this comic: http://xkcd.com/1217/
89
+ <br />Image URL (for hotlinking/embedding):
90
+ http://imgs.xkcd.com/comics/cells.png
91
+ <div id="transcript" style="display: none">When you see a claim
92
+ that a common drug or vitamin "kills cancer cells in a petri
93
+ dish," keep in mind: [[A scientist stands on a chair next to a
94
+ desk, pointing a gun at a petri dish. There is a microscope on
95
+ the desk.]] So does a handgun. {{Title text: Now, if it
96
+ selectively kills cancer cells in a petri dish, you can be sure
97
+ it's at least a great breakthrough for everyone suffering from
98
+ petri dish cancer.}}</div></div>
99
+ <div id="bottom" class="box">
100
+ <img src="http://imgs.xkcd.com/s/a899e84.jpg" width="520"
101
+ height="100" alt="Selected Comics" usemap="#comicmap" />
102
+ <map id="comicmap">
103
+ <!-- http://code.google.com/p/chromium/issues/detail?id=108489 Might be MIME dependant. -->
104
+ <area shape="rect" coords="0,0,100,100" href="http://xkcd.com/150/"
105
+ alt="Grownups" />
106
+ <area shape="rect" coords="104,0,204,100" href="http://xkcd.com/730/"
107
+ alt="Circuit Diagram" />
108
+ <area shape="rect" coords="208,0,308,100" href="http://xkcd.com/162/"
109
+ alt="Angular Momentum" />
110
+ <area shape="rect" coords="312,0,412,100" href="http://xkcd.com/688/"
111
+ alt="Self-Description" />
112
+ <area shape="rect" coords="416,0,520,100" href="http://xkcd.com/556/"
113
+ alt="Alternative Energy Revolution" />
114
+ </map>
115
+ <div>Search comic titles and transcripts:
116
+ <form action="http://www.google.com/cse" id="cse-search-box">
117
+ <div>
118
+ <input type="hidden" name="cx"
119
+ value="012652707207066138651:zudjtuwe28q" />
120
+ <input type="hidden" name="ie" value="UTF-8" />
121
+ <input type="text" name="q" id="q" size="31" />
122
+ <input type="submit" name="sa" value="Search" />
123
+ </div>
124
+ </form>
125
+ <script type="text/javascript"
126
+ src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en">
127
+ </script>
128
+ <a href="http://xkcd.com/rss.xml">RSS Feed</a>-
129
+ <a href="http://xkcd.com/atom.xml">Atom Feed</a></div>
130
+ <br />
131
+ <div id="comicLinks">Comics I enjoy:
132
+ <br />
133
+ <a href="http://threewordphrase.com/">Three Word Phrase</a>,
134
+ <a href="http://oglaf.com/">Oglaf</a>(nsfw),
135
+ <a href="http://www.smbc-comics.com/">SMBC</a>,
136
+ <a href="http://www.qwantz.com">Dinosaur Comics</a>,
137
+ <a href="http://www.asofterworld.com">A Softer World</a>,
138
+ <a href="http://buttersafe.com/">Buttersafe</a>,
139
+ <a href="http://pbfcomics.com/">Perry Bible Fellowship</a>,
140
+ <a href="http://questionablecontent.net/">Questionable
141
+ Content</a>,
142
+ <a href="http://www.buttercupfestival.com/">Buttercup
143
+ Festival</a></div>
144
+ <p>Warning: this comic occasionally contains strong language
145
+ (which may be unsuitable for children), unusual humor (which
146
+ may be unsuitable for adults), and advanced mathematics
147
+ (which may be unsuitable for liberal-arts majors).</p>
148
+ <div id="footnote">BTC 1NEPgrUmed3VyXpqbYZom7YVJ8MozYrNWx
149
+ <br />We did not invent the algorithm. The algorithm
150
+ consistently finds Jesus. The algorithm killed Jeeves.
151
+ <br />The algorithm is banned in China. The algorithm is from
152
+ Jersey. The algorithm constantly finds Jesus.
153
+ <br />This is not the algorithm. This is close.</div>
154
+ <div id="licenseText">
155
+ <p>This work is licensed under a
156
+ <a href="http://creativecommons.org/licenses/by-nc/2.5/">
157
+ Creative Commons Attribution-NonCommercial 2.5
158
+ License</a>.</p>
159
+ <p>This means you're free to copy and share these comics
160
+ (but not to sell them).
161
+ <a rel="license" href="http://xkcd.com/license.html">More details</a>.</p>
162
+ </div>
163
+ </div>
data/spec/javascripts/fixtures/ballonized-xkcd-with-ballons.html ADDED
@@ -0,0 +1,163 @@
1
+ <div id="topContainer">
2
+ <div id="topLeft">
3
+ <ul>
4
+ <li>
5
+ <a href="http://xkcd.com/archive">Archive</a>
6
+ </li>
7
+ <li>
8
+ <a href="http://what-if.xkcd.com">What If?</a>
9
+ </li>
10
+ <li>
11
+ <a href="http://blag.xkcd.com">Blag</a>
12
+ </li>
13
+ <li>
14
+ <a href="http://store.xkcd.com/">Store</a>
15
+ </li>
16
+ <li>
17
+ <a rel="author" href="http://xkcd.com/about">About</a>
18
+ </li>
19
+ </ul>
20
+ </div>
21
+ <div id="topRight">
22
+ <div id="masthead">
23
+ <span>
24
+ <a href="http://xkcd.com/">
25
+ <img src="http://imgs.xkcd.com/static/terrible_small_logo.png"
26
+ alt="xkcd.com logo" height="83" width="185" />
27
+ </a>
28
+ </span>
29
+ <span id="slogan">A webcomic of romance,
30
+ <br />sarcasm, math, and language.</span>
31
+ </div>
32
+ <div id="news">You can get the Subways comic as a
33
+ <a href="http://store-xkcd-com.myshopify.com/products/subways">
34
+ poster</a>!</div>
35
+ </div>
36
+ <div id="bgLeft" class="bg box"></div>
37
+ <div id="bgRight" class="bg box"></div>
38
+ </div>
39
+ <div id="middleContainer" class="box">
40
+ <div id="ctitle">Cells</div>
41
+ <ul class="comicNav">
42
+ <li>
43
+ <a href="http://xkcd.com/1/">|&lt;</a>
44
+ </li>
45
+ <li>
46
+ <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
47
+ </li>
48
+ <li>
49
+ <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
50
+ </li>
51
+ <li>
52
+ <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
53
+ </li>
54
+ <li>
55
+ <a href="http://xkcd.com/">&gt;|</a>
56
+ </li>
57
+ </ul>
58
+ <div id="comic">
59
+ <!-- The original img tag haven't the width and height defined, but seems that
60
+ the jasmine-headless-webkit don't load the image and use its width and
61
+ height. So it's necessary define them if we want to test. In a real browser
62
+ the events will not trigger until the image is loaded because the divs
63
+ are defined with percentuals and will have size zero (impossible to click).
64
+ -->
65
+ <div class="ballonizer_image_container"><p style="left: 0px; top: 0px; width: 218px; height: 82px;" class="ballonizer_ballon" >When you see a claim that a common drug or vitamin "kills cancer cells in a petri dish", keep in mind:</p><p style="top: 319px; left: 21px; width: 170px; height: 19px;" class="ballonizer_ballon">So does a handgun.</p><img src="http://imgs.xkcd.com/comics/cells.png"
66
+ title="Now, if it selectively kills cancer cells in a petri dish, you can be sure it's at least a great breakthrough for everyone suffering from petri dish cancer."
67
+ width="218px"
68
+ height="339px"
69
+ alt="Cells" /></div>
70
+ </div>
71
+ <ul class="comicNav">
72
+ <li>
73
+ <a href="http://xkcd.com/1/">|&lt;</a>
74
+ </li>
75
+ <li>
76
+ <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
77
+ </li>
78
+ <li>
79
+ <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
80
+ </li>
81
+ <li>
82
+ <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
83
+ </li>
84
+ <li>
85
+ <a href="http://xkcd.com/">&gt;|</a>
86
+ </li>
87
+ </ul>
88
+ <br />Permanent link to this comic: http://xkcd.com/1217/
89
+ <br />Image URL (for hotlinking/embedding):
90
+ http://imgs.xkcd.com/comics/cells.png
91
+ <div id="transcript" style="display: none">When you see a claim
92
+ that a common drug or vitamin "kills cancer cells in a petri
93
+ dish," keep in mind: [[A scientist stands on a chair next to a
94
+ desk, pointing a gun at a petri dish. There is a microscope on
95
+ the desk.]] So does a handgun. {{Title text: Now, if it
96
+ selectively kills cancer cells in a petri dish, you can be sure
97
+ it's at least a great breakthrough for everyone suffering from
98
+ petri dish cancer.}}</div></div>
99
+ <div id="bottom" class="box">
100
+ <img src="http://imgs.xkcd.com/s/a899e84.jpg" width="520"
101
+ height="100" alt="Selected Comics" usemap="#comicmap" />
102
+ <map id="comicmap">
103
+ <!-- http://code.google.com/p/chromium/issues/detail?id=108489 Might be MIME dependant. -->
104
+ <area shape="rect" coords="0,0,100,100" href="http://xkcd.com/150/"
105
+ alt="Grownups" />
106
+ <area shape="rect" coords="104,0,204,100" href="http://xkcd.com/730/"
107
+ alt="Circuit Diagram" />
108
+ <area shape="rect" coords="208,0,308,100" href="http://xkcd.com/162/"
109
+ alt="Angular Momentum" />
110
+ <area shape="rect" coords="312,0,412,100" href="http://xkcd.com/688/"
111
+ alt="Self-Description" />
112
+ <area shape="rect" coords="416,0,520,100" href="http://xkcd.com/556/"
113
+ alt="Alternative Energy Revolution" />
114
+ </map>
115
+ <div>Search comic titles and transcripts:
116
+ <form action="http://www.google.com/cse" id="cse-search-box">
117
+ <div>
118
+ <input type="hidden" name="cx"
119
+ value="012652707207066138651:zudjtuwe28q" />
120
+ <input type="hidden" name="ie" value="UTF-8" />
121
+ <input type="text" name="q" id="q" size="31" />
122
+ <input type="submit" name="sa" value="Search" />
123
+ </div>
124
+ </form>
125
+ <script type="text/javascript"
126
+ src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en">
127
+ </script>
128
+ <a href="http://xkcd.com/rss.xml">RSS Feed</a>-
129
+ <a href="http://xkcd.com/atom.xml">Atom Feed</a></div>
130
+ <br />
131
+ <div id="comicLinks">Comics I enjoy:
132
+ <br />
133
+ <a href="http://threewordphrase.com/">Three Word Phrase</a>,
134
+ <a href="http://oglaf.com/">Oglaf</a>(nsfw),
135
+ <a href="http://www.smbc-comics.com/">SMBC</a>,
136
+ <a href="http://www.qwantz.com">Dinosaur Comics</a>,
137
+ <a href="http://www.asofterworld.com">A Softer World</a>,
138
+ <a href="http://buttersafe.com/">Buttersafe</a>,
139
+ <a href="http://pbfcomics.com/">Perry Bible Fellowship</a>,
140
+ <a href="http://questionablecontent.net/">Questionable
141
+ Content</a>,
142
+ <a href="http://www.buttercupfestival.com/">Buttercup
143
+ Festival</a></div>
144
+ <p>Warning: this comic occasionally contains strong language
145
+ (which may be unsuitable for children), unusual humor (which
146
+ may be unsuitable for adults), and advanced mathematics
147
+ (which may be unsuitable for liberal-arts majors).</p>
148
+ <div id="footnote">BTC 1NEPgrUmed3VyXpqbYZom7YVJ8MozYrNWx
149
+ <br />We did not invent the algorithm. The algorithm
150
+ consistently finds Jesus. The algorithm killed Jeeves.
151
+ <br />The algorithm is banned in China. The algorithm is from
152
+ Jersey. The algorithm constantly finds Jesus.
153
+ <br />This is not the algorithm. This is close.</div>
154
+ <div id="licenseText">
155
+ <p>This work is licensed under a
156
+ <a href="http://creativecommons.org/licenses/by-nc/2.5/">
157
+ Creative Commons Attribution-NonCommercial 2.5
158
+ License</a>.</p>
159
+ <p>This means you're free to copy and share these comics
160
+ (but not to sell them).
161
+ <a rel="license" href="http://xkcd.com/license.html">More details</a>.</p>
162
+ </div>
163
+ </div>
data/spec/javascripts/fixtures/ballonized-xkcd-without-ballons.html ADDED
@@ -0,0 +1,163 @@
1
+ <div id="topContainer">
2
+ <div id="topLeft">
3
+ <ul>
4
+ <li>
5
+ <a href="http://xkcd.com/archive">Archive</a>
6
+ </li>
7
+ <li>
8
+ <a href="http://what-if.xkcd.com">What If?</a>
9
+ </li>
10
+ <li>
11
+ <a href="http://blag.xkcd.com">Blag</a>
12
+ </li>
13
+ <li>
14
+ <a href="http://store.xkcd.com/">Store</a>
15
+ </li>
16
+ <li>
17
+ <a rel="author" href="http://xkcd.com/about">About</a>
18
+ </li>
19
+ </ul>
20
+ </div>
21
+ <div id="topRight">
22
+ <div id="masthead">
23
+ <span>
24
+ <a href="http://xkcd.com/">
25
+ <img src="http://imgs.xkcd.com/static/terrible_small_logo.png"
26
+ alt="xkcd.com logo" height="83" width="185" />
27
+ </a>
28
+ </span>
29
+ <span id="slogan">A webcomic of romance,
30
+ <br />sarcasm, math, and language.</span>
31
+ </div>
32
+ <div id="news">You can get the Subways comic as a
33
+ <a href="http://store-xkcd-com.myshopify.com/products/subways">
34
+ poster</a>!</div>
35
+ </div>
36
+ <div id="bgLeft" class="bg box"></div>
37
+ <div id="bgRight" class="bg box"></div>
38
+ </div>
39
+ <div id="middleContainer" class="box">
40
+ <div id="ctitle">Cells</div>
41
+ <ul class="comicNav">
42
+ <li>
43
+ <a href="http://xkcd.com/1/">|&lt;</a>
44
+ </li>
45
+ <li>
46
+ <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
47
+ </li>
48
+ <li>
49
+ <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
50
+ </li>
51
+ <li>
52
+ <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
53
+ </li>
54
+ <li>
55
+ <a href="http://xkcd.com/">&gt;|</a>
56
+ </li>
57
+ </ul>
58
+ <div id="comic">
59
+ <!-- The original img tag haven't the width and height defined, but seems that
60
+ the jasmine-headless-webkit don't load the image and use its width and
61
+ height. So it's necessary define them if we want to test. In a real browser
62
+ the events will not trigger until the image is loaded because the divs
63
+ are defined with percentuals and will have size zero (impossible to click).
64
+ -->
65
+ <div class="ballonizer_image_container"><img src="http://imgs.xkcd.com/comics/cells.png"
66
+ title="Now, if it selectively kills cancer cells in a petri dish, you can be sure it's at least a great breakthrough for everyone suffering from petri dish cancer."
67
+ width="218px"
68
+ height="339px"
69
+ alt="Cells" /></div>
70
+ </div>
71
+ <ul class="comicNav">
72
+ <li>
73
+ <a href="http://xkcd.com/1/">|&lt;</a>
74
+ </li>
75
+ <li>
76
+ <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
77
+ </li>
78
+ <li>
79
+ <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
80
+ </li>
81
+ <li>
82
+ <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
83
+ </li>
84
+ <li>
85
+ <a href="http://xkcd.com/">&gt;|</a>
86
+ </li>
87
+ </ul>
88
+ <br />Permanent link to this comic: http://xkcd.com/1217/
89
+ <br />Image URL (for hotlinking/embedding):
90
+ http://imgs.xkcd.com/comics/cells.png
91
+ <div id="transcript" style="display: none">When you see a claim
92
+ that a common drug or vitamin "kills cancer cells in a petri
93
+ dish," keep in mind: [[A scientist stands on a chair next to a
94
+ desk, pointing a gun at a petri dish. There is a microscope on
95
+ the desk.]] So does a handgun. {{Title text: Now, if it
96
+ selectively kills cancer cells in a petri dish, you can be sure
97
+ it's at least a great breakthrough for everyone suffering from
98
+ petri dish cancer.}}</div></div>
99
+ <div id="bottom" class="box">
100
+ <img src="http://imgs.xkcd.com/s/a899e84.jpg" width="520"
101
+ height="100" alt="Selected Comics" usemap="#comicmap" />
102
+ <map id="comicmap">
103
+ <!-- http://code.google.com/p/chromium/issues/detail?id=108489 Might be MIME dependant. -->
104
+ <area shape="rect" coords="0,0,100,100" href="http://xkcd.com/150/"
105
+ alt="Grownups" />
106
+ <area shape="rect" coords="104,0,204,100" href="http://xkcd.com/730/"
107
+ alt="Circuit Diagram" />
108
+ <area shape="rect" coords="208,0,308,100" href="http://xkcd.com/162/"
109
+ alt="Angular Momentum" />
110
+ <area shape="rect" coords="312,0,412,100" href="http://xkcd.com/688/"
111
+ alt="Self-Description" />
112
+ <area shape="rect" coords="416,0,520,100" href="http://xkcd.com/556/"
113
+ alt="Alternative Energy Revolution" />
114
+ </map>
115
+ <div>Search comic titles and transcripts:
116
+ <form action="http://www.google.com/cse" id="cse-search-box">
117
+ <div>
118
+ <input type="hidden" name="cx"
119
+ value="012652707207066138651:zudjtuwe28q" />
120
+ <input type="hidden" name="ie" value="UTF-8" />
121
+ <input type="text" name="q" id="q" size="31" />
122
+ <input type="submit" name="sa" value="Search" />
123
+ </div>
124
+ </form>
125
+ <script type="text/javascript"
126
+ src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en">
127
+ </script>
128
+ <a href="http://xkcd.com/rss.xml">RSS Feed</a>-
129
+ <a href="http://xkcd.com/atom.xml">Atom Feed</a></div>
130
+ <br />
131
+ <div id="comicLinks">Comics I enjoy:
132
+ <br />
133
+ <a href="http://threewordphrase.com/">Three Word Phrase</a>,
134
+ <a href="http://oglaf.com/">Oglaf</a>(nsfw),
135
+ <a href="http://www.smbc-comics.com/">SMBC</a>,
136
+ <a href="http://www.qwantz.com">Dinosaur Comics</a>,
137
+ <a href="http://www.asofterworld.com">A Softer World</a>,
138
+ <a href="http://buttersafe.com/">Buttersafe</a>,
139
+ <a href="http://pbfcomics.com/">Perry Bible Fellowship</a>,
140
+ <a href="http://questionablecontent.net/">Questionable
141
+ Content</a>,
142
+ <a href="http://www.buttercupfestival.com/">Buttercup
143
+ Festival</a></div>
144
+ <p>Warning: this comic occasionally contains strong language
145
+ (which may be unsuitable for children), unusual humor (which
146
+ may be unsuitable for adults), and advanced mathematics
147
+ (which may be unsuitable for liberal-arts majors).</p>
148
+ <div id="footnote">BTC 1NEPgrUmed3VyXpqbYZom7YVJ8MozYrNWx
149
+ <br />We did not invent the algorithm. The algorithm
150
+ consistently finds Jesus. The algorithm killed Jeeves.
151
+ <br />The algorithm is banned in China. The algorithm is from
152
+ Jersey. The algorithm constantly finds Jesus.
153
+ <br />This is not the algorithm. This is close.</div>
154
+ <div id="licenseText">
155
+ <p>This work is licensed under a
156
+ <a href="http://creativecommons.org/licenses/by-nc/2.5/">
157
+ Creative Commons Attribution-NonCommercial 2.5
158
+ License</a>.</p>
159
+ <p>This means you're free to copy and share these comics
160
+ (but not to sell them).
161
+ <a rel="license" href="http://xkcd.com/license.html">More details</a>.</p>
162
+ </div>
163
+ </div>
data/spec/javascripts/fixtures/xkcd.css ADDED
@@ -0,0 +1,191 @@
1
+ /* START GENERAL FORMAT */
2
+ body{
3
+ background-color:#96A8C8;
4
+ text-align:center;
5
+ font-size:16px;
6
+ font-variant:small-caps;
7
+ font-family:Lucida,Helvetica,sans-serif;
8
+ font-weight:500;
9
+ text-decoration: none;
10
+ position: absolute;
11
+ left: 50%;
12
+ width: 780px;
13
+ margin-left: -390px;
14
+ }
15
+ a{
16
+ color:#96A8C8;
17
+ text-decoration:none;
18
+ font-weight:800
19
+ }
20
+ a:hover{
21
+ text-decoration:underline
22
+ }
23
+ img{
24
+ border:0
25
+ }
26
+ .box { /*any of the box layouts & white backgrounds*/
27
+ background:white;
28
+ border-style:solid;
29
+ border-width:1.5px;
30
+ border-color:#071419;
31
+ border-radius: 12px;
32
+ -moz-border-radius: 12px;
33
+ }
34
+ /* END GENERAL FORMAT */
35
+ /* START UPPER LAYOUT */
36
+ #topContainer{
37
+ width:780px;
38
+ position:relative;
39
+ overflow:hidden;
40
+ }
41
+ #topLeft{
42
+ width:166px;
43
+ float:left;
44
+ position:relative;
45
+ text-align:left;
46
+ padding: 17px;
47
+ }
48
+ #topLeft ul {
49
+ margin: 0;
50
+ list-style-type: none;
51
+ }
52
+ #topLeft a {
53
+ color: #282B30;
54
+ font-size: 21px;
55
+ font-weight: 800;
56
+ }
57
+ #topLeft a:hover {
58
+ text-decoration: underline;
59
+ }
60
+ #bgLeft {
61
+ float: left;
62
+ left:0;
63
+ width: 200px;
64
+ bottom:0;
65
+ top: 0px;
66
+ }
67
+ #topRight {
68
+ width:560px;
69
+ padding-top:15px;
70
+ padding-bottom:15px;
71
+ padding-left:15px;
72
+ float:right;
73
+ position:relative;
74
+ text-align:left;
75
+ line-height: 150%;
76
+ }
77
+ #masthead {
78
+ display: block;
79
+ }
80
+ #slogan {
81
+ padding: 20px;
82
+ display: inline-block;
83
+ font-size: 20px;
84
+ font-style: italic;
85
+ font-weight: 800;
86
+ line-height: 120%;
87
+ vertical-align: top;
88
+ }
89
+ #bgRight {
90
+ right: 0;
91
+ float: right;
92
+ width: 572px;
93
+ bottom:0;
94
+ top: 0px;
95
+ }
96
+ .bg { /* necessary for positioning box layouts for bg */
97
+ position:absolute;
98
+ z-index:-1;
99
+ }
100
+ /* END UPPER LAYOUT */
101
+
102
+ /*START MIDDLE */
103
+ #middleContainer {
104
+ width:780px;
105
+ margin: 5px auto;
106
+ padding: 10px 0;
107
+ }
108
+
109
+ #ctitle {
110
+ margin: 10px;
111
+ font-size: 21px;
112
+ font-weight: 800;
113
+ }
114
+
115
+ ul.comicNav {
116
+ padding:0;
117
+ list-style-type:none;
118
+ }
119
+ ul.comicNav li {
120
+ display: inline;
121
+ }
122
+
123
+ ul.comicNav li a {
124
+ /*background-color: #6E6E6E;*/
125
+ background-color:#6E7B91;
126
+ color: #FFF;
127
+ border: 1.5px solid #333;
128
+ font-size: 16px;
129
+ font-weight: 600;
130
+ padding: 1.5px 12px;
131
+ margin: 0 4px;
132
+ text-decoration: none;
133
+ border-radius: 3px;
134
+ -moz-border-radius: 3px;
135
+ -webkit-border-radius: 3px;
136
+ box-shadow: 0 0 5px 0 gray;
137
+ -moz-box-shadow: 0 0 5px 0 gray;
138
+ -webkit-box-shadow: 0 0 5px 0 gray;
139
+ }
140
+
141
+
142
+ ul.comicNav a:hover {
143
+ background-color: #FFF;
144
+ color: #6E7B91;
145
+ box-shadow: none;
146
+ -moz-box-shadow: none;
147
+ -webkit-box-shadow: none;
148
+ }
149
+
150
+ .comicInfo {
151
+ font-size:12px;
152
+ font-style:italic;
153
+ font-weight:800;
154
+ }
155
+ #bottom {
156
+ margin-top:5px;
157
+ padding:25px 15px;
158
+ width:750px;
159
+ }
160
+ #comicLinks {
161
+ display: block;
162
+ margin: auto;
163
+ width: 300px;
164
+ }
165
+ #footnote {
166
+ clear: both;
167
+ font-size: 6px;
168
+ font-style: italic;
169
+ font-variant: small-caps;
170
+ font-weight: 800;
171
+ margin: 0;
172
+ padding: 0;
173
+ }
174
+ #licenseText {
175
+ display: block;
176
+ margin: auto;
177
+ width: 410px;
178
+ }
179
+
180
+ #transcript {display: none;}
181
+
182
+ #middleContainer { position:relative; left:50%; margin-left:-390px; }
183
+ #comic .comic { position:absolute; }
184
+ #comic .panel, #comic .cover, #comic .panel img { position:absolute; }
185
+ #comic .cover { z-index:10; }
186
+
187
+ @font-face {
188
+ font-family: 'xkcd-Regular';
189
+ src: url('//xkcd.com/fonts/xkcd-Regular.eot?') format('eot'), url('//xkcd.com/fonts/xkcd-Regular.otf') format('opentype');
190
+ }
191
+