ballonizer 0.2.4 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d0c952e482196754c61560f3f13560bc86fb5d27
4
- data.tar.gz: 34b1558bde993de958a822318184761283c88539
3
+ metadata.gz: 5bf4f7c8da8c6850ded2132c67beebc4bb5306ff
4
+ data.tar.gz: 8238aea52c3812bdb5ef6113744d2c2f01d0e488
5
5
  SHA512:
6
- metadata.gz: a572d9a10cb4a5bf4a572fad6af8aa56f04b5130431d40a5987c0fb07db3193faf9a199bdc34ea6e599e7aa3ee6c67cafbe2abede9f6c69804bd938e8c7b32ba
7
- data.tar.gz: 5256a91b0b6e03c7d3ea34901df125dd1795d73f4894ba22eab39dfe9b9883246b2f45f05fe5dd9ed73eb2acc5e05b947a7e4b0da8d1cd4e87c07fee76772f79
6
+ metadata.gz: b7b614154da4bf1e78483c9266e067d33a425f57dd4d10f662732163316a5852b76aac86e59aba5e591ac9531d45d1829b1990b9e3b6d349d2f6ee2693b8d527
7
+ data.tar.gz: 4ebfcf50deafb861e2cce5f5e20120399e133748ece9865dec01c1def8cf936ff81b926d6e4f1fbca8aca39c8ff6754507a9743c2d1074813a7ef5e1150d31b8
@@ -13,6 +13,7 @@ html_name = 'index.html'
13
13
  html = File.read("#{path_rake_to_app}#{html_name}")
14
14
 
15
15
  ballonizer = Ballonizer.new(db_uri, {
16
+ img_to_ballonize_css_selector: '#comic img',
16
17
  create_tables_if_none: true,
17
18
  form_handler_url: '/request_handler',
18
19
  add_required_css: true,
@@ -26,9 +27,10 @@ app = Rack::Builder.new do
26
27
  run(lambda do | env |
27
28
  # the url is needed to make relative paths to images absolute
28
29
  request = Rack::Request.new(env)
29
- ballonized_page = ballonizer.ballonize_page(html, request.url)
30
+ mime_type = 'application/xhtml+xml'
31
+ ballonized_page = ballonizer.ballonize_page(html, request.url, mime_type)
30
32
 
31
- [200, {}, [ballonized_page]]
33
+ [200, { 'content-type' => mime_type }, [ballonized_page]]
32
34
  end)
33
35
  end
34
36
 
@@ -1,159 +1,107 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
- <html xmlns="http://www.w3.org/1999/xhtml">
4
- <head>
5
- <title>Um título qualquer</title>
6
- <meta http-equiv="content-type"
7
- content="application/xhtml+xml; charset=UTF-8" />
8
- <link rel="stylesheet" type="text/css"
9
- href="http://imgs.xkcd.com/static/styles_short_beta.css"
10
- title="Default" />
11
- </head>
12
- <body>
13
- <div id="topContainer">
14
- <div id="topLeft">
15
- <ul>
16
- <li>
17
- <a href="http://xkcd.com/archive">Archive</a>
18
- </li>
19
- <li>
20
- <a href="http://what-if.xkcd.com">What If?</a>
21
- </li>
22
- <li>
23
- <a href="http://blag.xkcd.com">Blag</a>
24
- </li>
25
- <li>
26
- <a href="http://store.xkcd.com/">Store</a>
27
- </li>
28
- <li>
29
- <a rel="author" href="http://xkcd.com/about">About</a>
30
- </li>
31
- </ul>
32
- </div>
33
- <div id="topRight">
34
- <div id="masthead">
35
- <span>
36
- <a href="http://xkcd.com/">
37
- <img src="http://imgs.xkcd.com/static/terrible_small_logo.png"
38
- alt="xkcd.com logo" height="83" width="185" />
39
- </a>
40
- </span>
41
- <span id="slogan">A webcomic of romance,
42
- <br />sarcasm, math, and language.</span>
43
- </div>
44
- <div id="news">You can get the Subways comic as a
45
- <a href="http://store-xkcd-com.myshopify.com/products/subways">
46
- poster</a>!</div>
47
- </div>
48
- <div id="bgLeft" class="bg box"></div>
49
- <div id="bgRight" class="bg box"></div>
50
- </div>
51
- <div id="middleContainer" class="box">
52
- <div id="ctitle">Cells</div>
53
- <ul class="comicNav">
54
- <li>
55
- <a href="http://xkcd.com/1/">|&lt;</a>
56
- </li>
57
- <li>
58
- <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
59
- </li>
60
- <li>
61
- <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
62
- </li>
63
- <li>
64
- <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
65
- </li>
66
- <li>
67
- <a href="http://xkcd.com/">&gt;|</a>
68
- </li>
69
- </ul>
70
- <div id="comic">
71
- <img class="to_ballonize" src="http://imgs.xkcd.com/comics/cells.png"
72
- 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."
73
- width="218px"
74
- height="339px"
75
- alt="Cells" />
76
- </div>
77
- <ul class="comicNav">
78
- <li>
79
- <a href="http://xkcd.com/1/">|&lt;</a>
80
- </li>
81
- <li>
82
- <a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a>
83
- </li>
84
- <li>
85
- <a href="http://dynamic.xkcd.com/random/comic/">Random</a>
86
- </li>
87
- <li>
88
- <a rel="next" href="http://xkcd.com/#" accesskey="n">Next &gt;</a>
89
- </li>
90
- <li>
91
- <a href="http://xkcd.com/">&gt;|</a>
92
- </li>
93
- </ul>
94
- <br />Permanent link to this comic: http://xkcd.com/1217/
95
- <br />Image URL (for hotlinking/embedding):
96
- http://imgs.xkcd.com/comics/cells.png
97
- <div id="transcript" style="display: none">When you see a claim
98
- that a common drug or vitamin "kills cancer cells in a petri
99
- dish," keep in mind: [[A scientist stands on a chair next to a
100
- desk, pointing a gun at a petri dish. There is a microscope on
101
- the desk.]] So does a handgun. {{Title text: Now, if it
102
- selectively kills cancer cells in a petri dish, you can be sure
103
- it's at least a great breakthrough for everyone suffering from
104
- petri dish cancer.}}</div></div>
105
- <div id="bottom" class="box">
106
- <img src="http://imgs.xkcd.com/s/a899e84.jpg" width="520"
107
- height="100" alt="Selected Comics" usemap="#comicmap" />
108
- <map id="comicmap">
109
- <!-- http://code.google.com/p/chromium/issues/detail?id=108489 Might be MIME dependant. -->
110
- <area shape="rect" coords="0,0,100,100" href="http://xkcd.com/150/"
111
- alt="Grownups" />
112
- <area shape="rect" coords="104,0,204,100" href="http://xkcd.com/730/"
113
- alt="Circuit Diagram" />
114
- <area shape="rect" coords="208,0,308,100" href="http://xkcd.com/162/"
115
- alt="Angular Momentum" />
116
- <area shape="rect" coords="312,0,412,100" href="http://xkcd.com/688/"
117
- alt="Self-Description" />
118
- <area shape="rect" coords="416,0,520,100" href="http://xkcd.com/556/"
119
- alt="Alternative Energy Revolution" />
120
- </map>
121
- <a href="http://xkcd.com/rss.xml">RSS Feed</a>-
122
- <a href="http://xkcd.com/atom.xml">Atom Feed</a></div>
123
- <br />
124
- <div id="comicLinks">Comics I enjoy:
125
- <br />
126
- <a href="http://threewordphrase.com/">Three Word Phrase</a>,
127
- <a href="http://oglaf.com/">Oglaf</a>(nsfw),
128
- <a href="http://www.smbc-comics.com/">SMBC</a>,
129
- <a href="http://www.qwantz.com">Dinosaur Comics</a>,
130
- <a href="http://www.asofterworld.com">A Softer World</a>,
131
- <a href="http://buttersafe.com/">Buttersafe</a>,
132
- <a href="http://pbfcomics.com/">Perry Bible Fellowship</a>,
133
- <a href="http://questionablecontent.net/">Questionable
134
- Content</a>,
135
- <a href="http://www.buttercupfestival.com/">Buttercup
136
- Festival</a></div>
137
- <p>Warning: this comic occasionally contains strong language
138
- (which may be unsuitable for children), unusual humor (which
139
- may be unsuitable for adults), and advanced mathematics
140
- (which may be unsuitable for liberal-arts majors).</p>
141
- <div id="footnote">BTC 1NEPgrUmed3VyXpqbYZom7YVJ8MozYrNWx
142
- <br />We did not invent the algorithm. The algorithm
143
- consistently finds Jesus. The algorithm killed Jeeves.
144
- <br />The algorithm is banned in China. The algorithm is from
145
- Jersey. The algorithm constantly finds Jesus.
146
- <br />This is not the algorithm. This is close.</div>
147
- <div id="licenseText">
148
- <p>This work is licensed under a
149
- <a href="http://creativecommons.org/licenses/by-nc/2.5/">
150
- Creative Commons Attribution-NonCommercial 2.5
151
- License</a>.</p>
152
- <p>This means you're free to copy and share these comics
153
- (but not to sell them).
154
- <a rel="license" href="http://xkcd.com/license.html">More details</a>.</p>
155
- </div>
156
- </div>
157
- </body>
1
+ <?xml version="1.0" encoding="UTF-8" ?>
2
+ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3
+ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
+ <html version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
5
+ <head>
6
+ <link rel="stylesheet" type="text/css" href="http://xkcd.com/s/d16ebb.css" title="Default"/>
7
+ <title>xkcd: Cells</title>
8
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
9
+ <link rel="shortcut icon" href="http://xkcd.com/s/919f27.ico" type="image/x-icon"/>
10
+ <link rel="icon" href="http://xkcd.com/s/919f27.ico" type="image/x-icon"/>
11
+ <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="http://xkcd.com/atom.xml"/>
12
+ <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://xkcd.com/rss.xml"/>
13
+ <link rel="apple-touch-icon-precomposed" href="http://xkcd.com/s/d9522a.png" />
14
+ </head>
15
+ <body>
16
+ <div id="topContainer">
17
+ <div id="topLeft">
18
+ <ul>
19
+ <li><a href="http://xkcd.com/archive">Archive</a></li>
20
+ <li><a href="http://what-if.xkcd.com">What If?</a></li>
21
+ <li><a href="http://blag.xkcd.com">Blag</a></li>
22
+ <li><a href="http://store.xkcd.com/">Store</a></li>
23
+ <li><a rel="author" href="http://xkcd.com/about">About</a></li>
24
+ </ul>
25
+ </div>
26
+ <div id="topRight">
27
+ <div id="masthead">
28
+ <span><a href="/"><img src="http://imgs.xkcd.com/static/terrible_small_logo.png" alt="xkcd.com logo" height="83" width="185"/></a></span>
29
+ <span id="slogan">A webcomic of romance,<br/> sarcasm, math, and language.</span>
30
+ </div>
31
+ <div id="news">
32
+ You can get the Subways comic as a <a href="http://store-xkcd-com.myshopify.com/products/subways">poster</a>!
33
+ </div>
34
+ </div>
35
+ <div id="bgLeft" class="bg box"></div>
36
+ <div id="bgRight" class="bg box"></div>
37
+ </div>
38
+ <div id="middleContainer" class="box">
39
+
40
+ <div id="ctitle">Cells</div>
41
+ <ul class="comicNav">
42
+ <li><a href="http://xkcd.com/1/">|&lt;</a></li>
43
+ <li><a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a></li>
44
+ <li><a href="http://dynamic.xkcd.com/random/comic/">Random</a></li>
45
+ <li><a rel="next" href="http://xkcd.com/1218/" accesskey="n">Next &gt;</a></li>
46
+ <li><a href="/">&gt;|</a></li>
47
+ </ul>
48
+ <div id="comic">
49
+ <img src="http://imgs.xkcd.com/comics/cells.png" title="Now, if it selectively kills cancer cells in a petri dish, you can be sure it&#39;s at least a great breakthrough for everyone suffering from petri dish cancer." alt="Cells" />
50
+ </div>
51
+ <ul class="comicNav">
52
+ <li><a href="http://xkcd.com/1/">|&lt;</a></li>
53
+ <li><a rel="prev" href="http://xkcd.com/1216/" accesskey="p">&lt; Prev</a></li>
54
+ <li><a href="http://dynamic.xkcd.com/random/comic/">Random</a></li>
55
+ <li><a rel="next" href="http://xkcd.com/1218/" accesskey="n">Next &gt;</a></li>
56
+ <li><a href="http://xkcd.com/">&gt;|</a></li>
57
+ </ul>
58
+ <br />
59
+ Permanent link to this comic: http://xkcd.com/1217/<br />
60
+ Image URL (for hotlinking/embedding): http://imgs.xkcd.com/comics/cells.png
61
+ <div id="transcript" style="display: none">When you see a claim that a common drug or vitamin &quot;kills cancer cells in a petri dish,&quot; keep in mind:
62
+ [[A scientist stands on a chair next to a desk, pointing a gun at a petri dish. There is a microscope on the desk.]]
63
+ So does a handgun.
64
+
65
+ {{Title text: Now, if it selectively kills cancer cells in a petri dish, you can be sure it&#39;s at least a great breakthrough for everyone suffering from petri dish cancer.}}</div>
66
+ </div>
67
+ <div id="bottom" class="box">
68
+ <img src="http://imgs.xkcd.com/s/a899e84.jpg" width="520" height="100" alt="Selected Comics" usemap="#comicmap"/>
69
+ <map id="comicmap">
70
+ <!-- http://code.google.com/p/chromium/issues/detail?id=108489 Might be MIME dependent. -->
71
+ <area shape="rect" coords="0,0,100,100" href="http://xkcd.com/150/" alt="Grownups"/>
72
+ <area shape="rect" coords="104,0,204,100" href="http://xkcd.com/730/" alt="Circuit Diagram"/>
73
+ <area shape="rect" coords="208,0,308,100" href="http://xkcd.com/162/" alt="Angular Momentum"/>
74
+ <area shape="rect" coords="312,0,412,100" href="http://xkcd.com/688/" alt="Self-Description"/>
75
+ <area shape="rect" coords="416,0,520,100" href="http://xkcd.com/556/" alt="Alternative Energy Revolution"/>
76
+ </map>
77
+ <div>
78
+ Search comic titles and transcripts:
79
+ <a href="http://xkcd.com/rss.xml">RSS Feed</a> - <a href="/atom.xml">Atom Feed</a>
80
+ </div>
81
+ <br />
82
+ <div id="comicLinks">
83
+ Comics I enjoy:<br/>
84
+ <a href="http://threewordphrase.com/">Three Word Phrase</a>,
85
+ <a href="http://oglaf.com/">Oglaf</a> (nsfw),
86
+ <a href="http://www.smbc-comics.com/">SMBC</a>,
87
+ <a href="http://www.qwantz.com">Dinosaur Comics</a>,
88
+ <a href="http://www.asofterworld.com">A Softer World</a>,
89
+ <a href="http://buttersafe.com/">Buttersafe</a>,
90
+ <a href="http://pbfcomics.com/">Perry Bible Fellowship</a>,
91
+ <a href="http://questionablecontent.net/">Questionable Content</a>,
92
+ <a href="http://www.buttercupfestival.com/">Buttercup Festival</a>
93
+ </div>
94
+ <p>Warning: this comic occasionally contains strong language (which may be unsuitable for children), unusual humor (which may be unsuitable for adults), and advanced mathematics (which may be unsuitable for liberal-arts majors).</p>
95
+ <div id="footnote">BTC 1NfBXWqseXc9rCBc3Cbbu6HjxYssFUgkH6<br />We did not invent the algorithm. The algorithm consistently finds Jesus. The algorithm killed Jeeves. <br/>The algorithm is banned in China. The algorithm is from Jersey. The algorithm constantly finds Jesus.<br/>This is not the algorithm. This is close.</div>
96
+ <div id="licenseText">
97
+ <p>
98
+ This work is licensed under a
99
+ <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons Attribution-NonCommercial 2.5 License</a>.
100
+ </p><p>
101
+ This means you're free to copy and share these comics (but not to sell them). <a rel="license" href="http://xkcd.com/license.html">More details</a>.</p>
102
+ </div>
103
+ </div>
104
+ </body>
105
+ <!-- Layout by Ian Clasbey, davean, and chromakode -->
158
106
  </html>
159
107
 
Binary file
@@ -9,9 +9,9 @@
9
9
  href="http://imgs.xkcd.com/static/styles_short_beta.css"
10
10
  title="Default" />
11
11
  <link rel="stylesheet" type="text/css"
12
- href="../../lib/ballonizer/ui-lightness/jquery-ui-1.10.3.custom.min.css" />
12
+ href="../../vendor/assets/stylesheets/ui-lightness/jquery-ui-1.10.3.custom.min.css" />
13
13
  <link rel="stylesheet" type="text/css"
14
- href="../../lib/ballonizer/ballonizer.css" />
14
+ href="../../lib/assets/stylesheets/ballonizer.css" />
15
15
  <script type="text/javascript"
16
16
  src="../../vendor/assets/javascripts/jquery-2.0.1.js"></script>
17
17
  <script type="text/javascript"
@@ -19,7 +19,7 @@
19
19
  <script type="text/javascript"
20
20
  src="../../vendor/assets/javascripts/jquery-ui-1.10.3.custom.min.js"></script>
21
21
  <script type="text/javascript"
22
- src="../../lib/ballonizer/ballonizer.js"></script>
22
+ src="../../lib/assets/javascripts/ballonizer.js"></script>
23
23
  <script type="text/javascript">
24
24
  $(document).ready(function() {
25
25
  Ballonizer('/path/to/form/submit',
@@ -87,7 +87,7 @@
87
87
  </li>
88
88
  </ul>
89
89
  <div id="comic">
90
- <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"
90
+ <div class="ballonizer_image_container"><p style="left: 0px; top: 0px; width: 218px; height: 82px; font-size: 15px;" 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; font-size: 14px;" class="ballonizer_ballon">So does a handgun.</p><img src="http://imgs.xkcd.com/comics/cells.png"
91
91
  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."
92
92
  width="218px"
93
93
  height="339px"
@@ -117,10 +117,11 @@
117
117
 
118
118
  Ballonizer.prototype.generateBallonizerFormNode = function () {
119
119
  var form = $("<form class='ballonizer_page_form' method='post' >" +
120
- "<input name='ballonizer_data' type='hidden' />" +
121
- "<input name='ballonizer_submit' type='submit' " +
122
- "value='" + this.config.submitButtonValue +
123
- "' /></form>");
120
+ "<div><input name='ballonizer_data' type='hidden'>" +
121
+ "</input><input name='ballonizer_submit'" +
122
+ " type='submit' value='" +
123
+ this.config.submitButtonValue +
124
+ "'></input></div></form>");
124
125
 
125
126
  form.attr("action", this.actionFormURL);
126
127
 
@@ -161,17 +162,29 @@
161
162
  containerNode);
162
163
  }
163
164
 
165
+ // See notifyBallonChange for this flag explanation
166
+ this.userAlreadyInteracted = false;
167
+
164
168
  this.ballonizerInstance = ballonizerInstance;
165
169
  this.containerNode = containerNode;
166
170
  this.ballons = [];
167
171
 
168
172
  // Insert the form for the ballons in edit mode
169
- $("<form class='ballonizer_image_form' method='#'></form>").insertBefore(
170
- this.containerNode.children().first()
173
+ this.form = $(
174
+ "<form class='ballonizer_image_form' action='#'></form>"
175
+ );
176
+ this.formInnerContainer = $(
177
+ "<div></div>"
171
178
  );
179
+ this.form.prepend(this.formInnerContainer);
180
+ // The form is prepended in the beggining of the ballonizer
181
+ // context and not inside the ballonizer_image_container
182
+ // because not every element that can wrap a image (as an
183
+ // anchor for example) can wrap a form (or a block element).
184
+ // See more in: http://www.w3.org/TR/REC-html40/struct/global.html#block-inline, http://skypoetsworld.blogspot.com.br/2008/10/dont-ever-put-block-inside-inline.html, http://stackoverflow.com/questions/1091739/html-div-in-link-problem, stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correcta
185
+ this.ballonizerInstance.getContext().prepend(this.form);
172
186
 
173
- var ballons = $(".ballonizer_ballon",
174
- this.ballonizerInstance.getContext());
187
+ var ballons = $(".ballonizer_ballon", this.containerNode);
175
188
 
176
189
  ballons.each($.proxy(function (ix, element) {
177
190
  this.ballons.push(new InterfaceBallon(this, $(element)));
@@ -186,6 +199,10 @@
186
199
  }, this));
187
200
  };
188
201
 
202
+ BallonizedImageContainer.prototype.getFormInnerContainer = function () {
203
+ return this.formInnerContainer;
204
+ };
205
+
189
206
  BallonizedImageContainer.prototype.getContainerNode = function () {
190
207
  return this.containerNode;
191
208
  };
@@ -194,7 +211,33 @@
194
211
  return this.ballonizerInstance;
195
212
  };
196
213
 
214
+ // Avoid to call this method in methods that update the ballons
215
+ // data, call this method only in callbacks of events, after calling
216
+ // the methods that update the ballons data. This is intended to
217
+ // preserve the semantics of the ballon change be always from a user
218
+ // interaction.
197
219
  BallonizedImageContainer.prototype.notifyBallonChange = function () {
220
+ // This flag is necessary to work around the load of the image.
221
+ // The ready callback don't wait for images to load and the
222
+ // load callback has several caveats with using images (see
223
+ // http://api.jquery.com/ready/ and http://api.jquery.com/load-event/).
224
+ // All the ballons are defined in percentages and probably won't
225
+ // be visible until the image is loaded (or will be over the alt
226
+ // text but is hard to think of an user edit a ballon in this
227
+ // case). So when the user interact with a ballon it will
228
+ // calculate and update the sizes in pixels of all ballons
229
+ // (the attributes used for the serialize), assuming that the
230
+ // user is already editing because the image is loaded.
231
+ // This fix a bug where all the ballons except the modified
232
+ // (who the bounds are recalculated) are serialized and
233
+ // submitted with the incorrect values (but are displayed
234
+ // corretly to the user before the submission).
235
+ if (!this.userAlreadyInteracted) {
236
+ jQuery.each(this.ballons, function (ix, ballon) {
237
+ ballon.updatePositionAndSize();
238
+ });
239
+ this.userAlreadyInteracted = true;
240
+ }
198
241
  return this.ballonizerInstance.notifyBallonChange();
199
242
  };
200
243
 
@@ -274,6 +317,7 @@
274
317
  if (2 === arguments.length) {
275
318
  this.node = xOrNode;
276
319
  this.updatePositionAndSize();
320
+ this.fontSize = parseInt(this.node.css('font-size'), 10);
277
321
  this.text = this.node.text();
278
322
  } else {
279
323
  this.left = xOrNode;
@@ -304,9 +348,8 @@
304
348
 
305
349
  this.text = initialText;
306
350
  this.node = this.generateBallonNode();
307
- this.node.insertBefore(
308
- this.imgContainer.getContainerNode().children().first()
309
- );
351
+ this.imgContainer.getContainerNode().prepend(this.node);
352
+ this.changeFontSizeToBestFitBallon();
310
353
  }
311
354
 
312
355
  this.node.draggable({
@@ -316,6 +359,7 @@
316
359
  stop: $.proxy(function (event, ui) {
317
360
  /* jshint unused: false */
318
361
  this.updatePositionAndSize();
362
+ this.imgContainer.notifyBallonChange();
319
363
  }, this)
320
364
  });
321
365
  this.node.resizable({
@@ -327,13 +371,17 @@
327
371
  stop: $.proxy(function (event, ui) {
328
372
  /* jshint unused: false */
329
373
  this.updatePositionAndSize();
374
+ this.changeFontSizeToBestFitBallon();
375
+ this.imgContainer.notifyBallonChange();
330
376
  }, this)
331
377
  });
332
378
 
333
- var imageForm = $(".ballonizer_image_form",
334
- this.imgContainer.getContainerNode());
379
+ var imageForm = this.imgContainer.getFormInnerContainer();
335
380
  var editionBallon = $(
336
- "<textarea class='ballonizer_edition_ballon'></textarea>"
381
+ // cols and rows are obrigatory attributes, the choosen
382
+ // values are magic numbers without a good reason
383
+ "<textarea cols='100' rows='40' " +
384
+ "class='ballonizer_edition_ballon'></textarea>"
337
385
  ).val(this.text);
338
386
 
339
387
  this.editionNode = editionBallon;
@@ -358,7 +406,7 @@
358
406
  var nodeStyle = ["left: ", this.left, "px; ", "top: ",
359
407
  this.top, "px; ", "width: ", this.width, "px; ",
360
408
  "height: ", this.height, "px;"].join("");
361
- var node = $("<p class='ballonizer_ballon' ></p>");
409
+ var node = $("<span class='ballonizer_ballon' ></span>");
362
410
 
363
411
  // The use of ".text" will escape '<', '>', and others
364
412
  node.text(this.text).attr("style", nodeStyle);
@@ -377,6 +425,19 @@
377
425
  height: this.height
378
426
  };
379
427
  };
428
+ InterfaceBallon.prototype.changeFontSizeToBestFitBallon = function () {
429
+ var old_height = this.node.css('height');
430
+ var desired_calc_height = this.node.height();
431
+ this.node.css('height', 'auto');
432
+ var actual_font_size = 1;
433
+ this.node.css('font-size', actual_font_size);
434
+ while (this.node.height() < desired_calc_height) {
435
+ this.node.css('font-size', ++actual_font_size + 'px');
436
+ }
437
+ this.node.css('font-size', --actual_font_size + 'px');
438
+ this.node.css('height', old_height);
439
+ this.fontSize = actual_font_size;
440
+ };
380
441
  InterfaceBallon.prototype.updatePositionAndSize = function () {
381
442
  var newX = this.node.position().left;
382
443
  var newY = this.node.position().top;
@@ -390,7 +451,6 @@
390
451
  this.top = newY;
391
452
  this.width = newWidth;
392
453
  this.height = newHeight;
393
- this.imgContainer.notifyBallonChange();
394
454
  }
395
455
  };
396
456
  InterfaceBallon.prototype.getState = function () {
@@ -445,6 +505,7 @@
445
505
  this.node.removeClass("ballonizer_ballon_hidden_for_edition");
446
506
  this.editionNode.removeClass("ballonizer_ballon_in_edition");
447
507
  if (this.text !== oldText) {
508
+ this.changeFontSizeToBestFitBallon();
448
509
  this.imgContainer.notifyBallonChange();
449
510
  }
450
511
  }
@@ -452,8 +513,48 @@
452
513
 
453
514
  InterfaceBallon.prototype.dblclick = function () {
454
515
  this.state = this.state.replace("initial", "edit");
516
+
517
+ var context = this.imgContainer.getBallonizerInstance().getContext();
518
+
519
+ // The add not only add this node to the set but sort the set
520
+ // (that is a array, not a set) in the order that the elements
521
+ // appears in the document. This way the most outer parent is
522
+ // the first element.
523
+ // This behaviour is documented in: http://api.jquery.com/add/
524
+ var els = this.node.parentsUntil(context).add(this.node);
525
+ var zIndexes = [];
526
+ els.each(function (ix, el) {
527
+ var zIndexCSS = $(el).css('z-index');
528
+ // the inherit is made numeric by the jQuery, we are
529
+ // filtering here only the "auto" string value
530
+ if (jQuery.isNumeric(zIndexCSS)) {
531
+ zIndexes.push(parseInt(zIndexCSS));
532
+ }
533
+ });
534
+ var zIndex = null;
535
+ if (zIndexes.length > 0) {
536
+ // The zIndex only need to be one greater than the
537
+ // zIndex of the most outer parent with a defined zIndex.
538
+ zIndex = zIndexes[0] + 1;
539
+ } else {
540
+ zIndex = 1;
541
+ }
542
+
543
+ // we subtract the offset of the imageform from the offset
544
+ // of the normal ballon because the left and top of the edition
545
+ // ballon is relative to this form (its the closest parent with
546
+ // position: relative defined)
547
+ var offset = this.node.offset();
548
+ var imageFormOffset = this.imgContainer.getFormInnerContainer().offset();
549
+
550
+ this.editionNode.css('top', offset.top - imageFormOffset.top);
551
+ this.editionNode.css('left', offset.left - imageFormOffset.left);
552
+ this.editionNode.css('width', this.node.css('width'));
553
+ this.editionNode.css('height', this.node.css('height'));
554
+ this.editionNode.css('z-index', zIndex);
555
+
556
+ // only make the ballon hidden after getting the offset
455
557
  this.node.addClass("ballonizer_ballon_hidden_for_edition");
456
- this.editionNode.attr("style", this.node.attr("style"));
457
558
  this.editionNode.addClass("ballonizer_ballon_in_edition");
458
559
  // focus after is visible, otherwise will crash in IE
459
560
  // http://api.jquery.com/focus/#focus
@@ -474,6 +575,7 @@
474
575
  top: this.top / containerHeight,
475
576
  width: this.width / containerWidth,
476
577
  height: this.height / containerHeight,
578
+ font_size: this.fontSize,
477
579
  text: this.text
478
580
  };
479
581
  };