ballonizer 0.1.0 → 0.2.0

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 (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
+