ballonizer 0.2.4 → 0.4.0

data/lib/assets/stylesheets/ballonizer.css

@@ -14,7 +14,9 @@
 	background-color: white;
 	color: black;
 	text-align: center;
-	overflow: hidden;
+    display: block;
+    word-wrap: break-word;
+    overflow: hidden;
 }
 
 .ballonizer_ballon_hidden_for_edition
@@ -31,44 +33,47 @@
  * occupy space (no one). With this the form is "hidden" because don't occupy
  * any space (the width AND height are equal zero).
  */
-.ballonizer_image_form
+.ballonizer_image_form, .ballonizer_image_form div
 {
 	margin: 0;
 	padding: 0;
 	border: 0;
+    left: 0;
+    top: 0;
 	display: inline-block;
+    /* we must */
+    position: relative;
 }
 
-.ballonizer_image_form > *
+.ballonizer_image_form .ballonizer_edition_ballon
 {
 	position: absolute;
 	display: none;
+	border: 0;
 	margin: 0;
 	text-align: center;
 }
 
-.ballonizer_image_form > .ballonizer_ballon_in_edition
+.ballonizer_image_form .ballonizer_edition_ballon.ballonizer_ballon_in_edition
 {
 	display: block;
 }
 
 /* We use the same trick used in the image form in the page form */
-.ballonizer_page_form
+.ballonizer_page_form, .ballonizer_page_form div
 {
 	display: inline-block;
-	padding: 0;
 	margin: 0;
-	border: 0;
+	padding: 0;
+    border: 0;
 }
 
-.ballonizer_page_form > *
+.ballonizer_page_form input[type=submit]
 {
-	display: none;
-	margin: 0;
-	padding: 0;
+    display: none;
 }
 
-.ballonizer_page_form > .ballonizer_ballons_have_changes
+.ballonizer_page_form input[type=submit].ballonizer_ballons_have_changes
 {
 	display: block;
 	position: fixed;

data/lib/ballonizer.rb

@@ -54,6 +54,24 @@ require 'sprockets'
 # The tables names are: images, ballons, ballonized_image_versions,
 # ballonized_image_ballons.
 #
+# Changelog:
+#  v0.4.0: 
+#   * Changed the way the Javascript module add containers in the page
+#     to avoid creating invalid HTML4.0.1/XHTML1.1/HTML5 documents.
+#   * Now the ballonize_page takes a mime-type argument to decide if
+#     the page has to be parsed as XML or HTML (trying to be in
+#     conformance with http://www.w3.org/TR/xhtml-media-types/).
+#   * The change in the ballon size now change the font-size of the
+#     ballon text.
+#   * Database schema change, as consequence of the font-size change,
+#     the database now stores the font-size. No migration provided for
+#     databases in the old format, but the font-size field can be null.
+#     The migration only require adding this column with null value to
+#     all records (see the create_tables code).
+#   * Fixed a bug in the Javascript module that give wrong position and
+#     size values to all ballons that aren't edited/added before submmiting
+#     (only if the image wasn't loaded before the javascript loading).
+#
 class Ballonizer
   
   # The superclass of any error explicitly raised by the Ballonizer class.
@@ -75,22 +93,38 @@ class Ballonizer
       e.freeze
     end
 
-    def self.parse_html_or_xhtml(doc)
-      # If you parse XHTML as HTML with Nokogiri and use to_s after the markup can be messed up
+    def self.parse_html_or_xhtml(doc, mime_type)
+      # If you parse XHTML as HTML with Nokogiri, and use to_s after, the markup
+      # can be messed up, breaking the structural integrity of the xml
       # 
       # Example:     <meta name="description" content="not important" />
       #   becomes    <meta name="description" content="not important" >
-      # To avoid this we parse a document that is XML valid as XML, and, otherwise as HTML
+      #
+      # In the other side if you parse HTML as a XML, and use to_s after, the
+      # Nokogiri make empty content tags self-close
+      #
+      # Example:    <script type="text/javascript" src="/ballonizer.js"></script>
+      #   becomes:  <script type="text/javascript" src="/ballonizer.js" />
+      #
+      # What's even worse than the contrary (xml as html)
       parsed_doc = nil
-      begin
-        # this also isn't a great way to do this
-        # the Nokogiri don't have exception classes, this way any StandardError will be silenced
+
+      case mime_type
+      when /text\/html/
+        parsed_doc = Nokogiri::HTML(doc)
+      when /application\/xhtml\+xml/
         options = Nokogiri::XML::ParseOptions::DEFAULT_XML &
                     Nokogiri::XML::ParseOptions::STRICT &
                     Nokogiri::XML::ParseOptions::NONET
-        parsed_doc = Nokogiri::XML::Document.parse(doc, nil, nil, options)
-      rescue
-        parsed_doc = Nokogiri::HTML(doc)
+        begin
+          parsed_doc = Nokogiri::XML::Document.parse(doc, nil, nil, options)
+        rescue
+          return nil
+        end
+      else
+        fail Error, "the only mime-types accepted are text/html and" +
+                    " application/xhtml+xml, the passed argument was " +
+                    "'#{mime_type}'"
       end
 
       parsed_doc
@@ -258,12 +292,16 @@ class Ballonizer
         if ballon["text"].empty?
           fail SubmitError, "the ballon text is empty"
         end
+        [:top, :left, :width, :height, :font_size].each do | numeric_attr_name |
+          numeric_attr = ballon[numeric_attr_name.to_s]
+          unless numeric_attr.is_a?(Fixnum) || numeric_attr.is_a?(Float)
+            fail SubmitError, "the #{numeric_attr_name} " +
+                              "(#{numeric_attr}) isn't a Fixnum or " +
+                              "Float (is a '#{numeric_attr.class}')"
+          end
+        end
         [:top, :left, :width, :height].each do | bound_name |
           bound = ballon[bound_name.to_s]
-          unless bound.is_a?(Fixnum) || bound.is_a?(Float)
-            fail SubmitError, "the #{bound_name.to_s} (#{bound.to_s}) isn't" +
-                              " a Fixnum or Float (is a '#{bound.class.to_s}')"
-          end
           unless bound >= 0 && bound <= 1
             fail SubmitError, "the #{bound_name.to_s} (#{bound.to_s}) isn't"
                               " between 0 and 1 (both inclusive)"
@@ -271,14 +309,14 @@ class Ballonizer
         end
 
         ballon_end = {}
-        ballon_end[:x] = ballon["top"] + ballon["height"]
-        ballon_end[:y] = ballon["left"] + ballon["width"]
+        ballon_end[:x] = ballon["left"] + ballon["width"]
+        ballon_end[:y] = ballon["top"] + ballon["height"]
 
         [:x, :y].each do | axis |
           if ballon_end[axis] > 1
-            fail SubmitError, "the ballon with text #{ballon["text"]} is trespassing" +
-                              " the #{ {x: "right side", y: "bottom"} [axis] }" +
-                              " of the image"
+            side = { x: "right side", y: "bottom" }[axis]
+            fail SubmitError, "the ballon with text #{ballon["text"].to_s} " +
+                              "is trespassing the #{side} of the image"
           end
         end
       end
@@ -351,22 +389,35 @@ class Ballonizer
   # Wrap each image to ballonize with a container, add its ballons to the
   # container and, possibly, add the css and js libs and snippet for the
   # edition initialization. Don't make any change if the page has no images
-  # to ballonize.
+  # to ballonize. If the page can't be parsed (as HTML or X(HT)ML, depending
+  # of the mime-type) return the page argument without throwing any exceptions.
+  # Throw an exception if the mime-type doesn't match with html or xhtml.
   # @param page [String] The (X)HTML page.
   # @param page_url [String] The url of the page to be ballonized, necessary
   #   to make absolute the src attribute of img (if it's relative).
   # @param settings [Hash{Symbol => String}] Optional. If not provided the
   #   #settings will be used.
-  # @return [String] The page ballonized (new string).
-  def ballonize_page(page, page_url, settings = {})
+  # @param mime_type A string that have the substring 'text/html' or
+  #   'application/xhtml+xml'.
+  # @return [String] The ballonized page (new string), or the same string,
+  #   if the parse has failed.
+  # @raise [Ballonizer::Error] If the mime-type don't match either 'text/html'
+  #   or 'application/xhtml+xml'.
+  def ballonize_page(page, page_url, mime_type, settings = {})
     settings = self.settings.merge(settings)
 
-    parsed_page = Workaround.parse_html_or_xhtml(page)
+    # can raise Ballonizer::Error if the mime-type is invalid
+    parsed_page = Workaround.parse_html_or_xhtml(page, mime_type)
+    # if can't parse return the page unaltered
+    if parsed_page.nil?
+      return page
+    end
+
     selector = settings[:img_to_ballonize_css_selector]
     imgs = parsed_page.css(selector)
 
     unless imgs.empty?
-      imgs.wrap('<div class="ballonizer_image_container" ></div>')
+      imgs.wrap('<span class="ballonizer_image_container" ></span>')
 
       imgs.each do | img |
         img_src = img['src']
@@ -403,8 +454,9 @@ class Ballonizer
       # transform ratio [0,1] to percent [0, 100]
       style = style + "#{sym}: #{(ballon_data[sym] * 100)}%;"
     end
+    style = style + "font-size: #{ballon_data[:font_size]}px;"
 
-    "<p class='ballonizer_ballon' style='#{style}'>#{text}</p>"
+    "<span class='ballonizer_ballon' style='#{style}'>#{text}</span>"
   end
 
   # @api private
@@ -422,7 +474,8 @@ class Ballonizer
           .join(:ballons, { ballonized_image_ballons__version: version,
                             ballonized_image_ballons__image_id: image_id,
                             ballonized_image_ballons__ballon_id: :ballons__id
-                          }).select(:text, :top, :left, :width, :height).all
+                          }).select(:text, :top, :left, :width, :height,
+                                    :font_size).all
     else
       []
     end
@@ -458,6 +511,9 @@ class Ballonizer
       Float :left, :allow_null => false
       Float :width, :allow_null => false
       Float :height, :allow_null => false
+      # the font_size allow null to support databases migrated from old versions
+      # (that don't have this field)
+      Float :font_size, :allow_null => true
     end
     db.create_table(:ballonized_image_versions) do
       Integer :version

data/spec/ballonizer_spec.rb

@@ -31,6 +31,24 @@ RSpec::Matchers.define :exist_in_filesystem do
     "be a list of absolute paths for existing files or directories"
   end
 end
+# TODO: check the font-size, the position and the size of the ballon
+# TODO: check the src of the image inside the container (not so easy
+# because the src is relative in the html but absolute in the database)
+RSpec::Matchers.define :have_ballons_as_submitted_by do | expected |
+  match do | actual |
+    expected.each do | img_src, ballons |
+      expect(actual).to(have_tag('.ballonizer_image_container') do
+        with_tag('img')
+        ballons.each do | b |
+          with_tag('span', { text: b['text'], with: { class: 'ballonizer_ballon' }})
+        end
+      end)
+    end
+  end
+  description do
+    'have ballons as the ones added by the last submit'
+  end
+end
 
 describe Ballonizer do
 
@@ -42,17 +60,23 @@ describe Ballonizer do
     db[:images].insert({img_src: 'http://comic-translation.com/tr/pt-BR/a_comic/imgs/3.jpg'})
 
     db[:ballons].insert({ text: 'first ballon of first image',
-                          top: 0, left: 0, width: 0.5, height: 0.5 })
+                          top: 0, left: 0, width: 0.5, height: 0.5,
+                          font_size: 16 })
     db[:ballons].insert({ text: 'second ballon of first image',
-                          top: 0.5, left: 0.5, width: 0.5, height: 0.5 })
+                          top: 0, left: 0, width: 0.5, height: 0.5,
+                          font_size: 16 })
     db[:ballons].insert({ text: 'first ballon of second image',
-                          top: 0, left: 0, width: 0.5, height: 0.5 })
+                          top: 0, left: 0, width: 0.5, height: 0.5,
+                          font_size: 16 })
     db[:ballons].insert({ text: 'second ballon of second image',
-                          top: 0.5, left: 0.5, width: 0.5, height: 0.5 })
+                          top: 0, left: 0, width: 0.5, height: 0.5,
+                          font_size: 16 })
     db[:ballons].insert({ text: 'first ballon of third image',
-                          top: 0, left: 0, width: 0.5, height: 0.5 })
+                          top: 0, left: 0, width: 0.5, height: 0.5,
+                          font_size: 16 })
     db[:ballons].insert({ text: 'second ballon of third image',
-                          top: 0.5, left: 0.5, width: 0.5, height: 0.5 })
+                          top: 0, left: 0, width: 0.5, height: 0.5,
+                          font_size: 16 })
 
     # both ballons added in the first version
     db[:ballonized_image_versions].insert({image_id: 1, version: 1, time: time})
@@ -81,6 +105,10 @@ describe Ballonizer do
     JSON.parse(JSON.generate(v))
   end
 
+  # definitions to be overriden in need, but who doesn't need a *_example
+  # counterpart (are so simple that clone and change isn't pratical)
+  let (:mime_type) { 'application/xhtml+xml' }
+
   # Definitions ending with '_example' are to be cloned and defined in a
   # context without the sufix. Definitions without the sufix are used in the
   # specs and may require the definition of some without '_example' counterparts.
@@ -139,7 +167,7 @@ describe Ballonizer do
     {}
   end
   let (:submit_json_example) do
-    '{"http://imgs.xkcd.com/comics/cells.png":[{"left":0,"top":0,"width":1,"height":0.23837209302325582,"text":"When you see a claim that a common drug or vitamin \"kills cancer cells in a petri dish\", keep in mind:"},{"left":0.0963302752293578,"top":0.9273255813953488,"width":0.7798165137614679,"height":0.055232558139534885,"text":"So does a handgun."}]}'
+    '{"http://imgs.xkcd.com/comics/cells.png":[{"left":0,"top":0,"width":1,"height":0.23837209302325582,"font_size":15,"text":"When you see a claim that a common drug or vitamin \"kills cancer cells in a petri dish\", keep in mind:"},{"left":0.0963302752293578,"top":0.9273255813953488,"width":0.7798165137614679,"height":0.055232558139534885,"font_size":16,"text":"So does a handgun."}]}'
   end
   let (:submit_hash_example) do
     JSON.parse(submit_json_example)
@@ -158,14 +186,53 @@ describe Ballonizer do
 
   # Definition who need others (no *_example)
   let (:instance) { described_class.new(*ballonizer_new_args) }
+  let (:ballonize_page_call) do
+    lambda { instance.ballonize_page(original_page, page_url, mime_type, settings) }
+  end
   let (:ballonized_page) do
-    instance.ballonize_page(original_page, page_url, settings)
+    ballonize_page_call.call
   end
 
   # TODO: verify if the style property has the correct values
   describe '#ballonize_page' do
     subject { ballonized_page }
 
+    context "when the mime-type isn't valid" do
+      let (:mime_type) { 'a invalid mime-type' }
+      it { expect(ballonize_page_call).to raise_error(Ballonizer::Error) }
+    end
+    context "when the mime-type is valid" do
+      context '(text/html)' do
+        let (:mime_type) { 'text/html; charset=utf8' }
+        it { expect(ballonize_page_call).to_not raise_error }
+      end
+      context '(application/xhtml+xml)' do
+        let (:mime_type) { 'application/xhtml+xml; charset=utf8' }
+        it { expect(ballonize_page_call).to_not raise_error }
+      end
+    end
+    context "when the mime-type is 'application/xhtml+xml'" do
+      context "but the page isn't a xml" do
+        let (:original_page) do
+          <<-END
+            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+            "http://www.w3.org/TR/html4/strict.dtd">
+            <html>
+              <head>
+                <title>A title</title>
+                <!-- this isn't a valid xml because the meta tag isn't closed -->
+                <meta http-equiv="content-type" content="text/html" charset=UTF-8">
+              </head>
+              <body>
+              </body>
+            </html>
+          END
+        end
+        it 'return the original (not cloned) page argument, unmodified' do
+          expect(ballonized_page).to be(original_page)
+        end
+      end
+    end
     context 'when the page has no img elements to ballonize' do
       it "don't make changes in the page" do
         should be_equivalent_to(original_page)
@@ -181,7 +248,7 @@ describe Ballonizer do
           page_with_images.to_s
         end
         it 'add a container around the img' do
-          should have_tag('div', :with => { class: 'ballonizer_image_container' }) do
+          should have_tag('span', :with => { class: 'ballonizer_image_container' }) do
             with_tag('img', :with => { alt: 'A test image' })
           end
         end
@@ -189,16 +256,15 @@ describe Ballonizer do
           it 'add the ballons inside the container' do
             # the parentheses of the 'should' are necessary, otherwise the
             # conditions inside the block are silently not tested
-            should(have_tag('div', :with => { class: 'ballonizer_image_container' }) do
+            should(have_tag('span', :with => { class: 'ballonizer_image_container' }) do
               with_tag("img[alt='A test image']")
-              with_tag('p', { text: 'first ballon of first image',
+              with_tag('span', { text: 'first ballon of first image',
                               with: { class: 'ballonizer_ballon' }})
-              with_tag('p', { text: 'second ballon of first image',
+              with_tag('span', { text: 'second ballon of first image',
                               with: { class: 'ballonizer_ballon'}})
             end)
           end
         end
-        # TODO: create this specs
         context 'and the settings define to insert css' do
           let (:ballonizer_settings) do
             ballonizer_settings_example.merge({
@@ -241,10 +307,10 @@ describe Ballonizer do
         end
         it 'add a container around the imgs' do
           # TODO: DRY this test
-          should(have_tag('div', :with => { class: 'ballonizer_image_container' }) do
+          should(have_tag('span', :with => { class: 'ballonizer_image_container' }) do
             with_tag('img', :with => { alt: 'the second test image' })
           end)
-          should(have_tag('div', :with => { class: 'ballonizer_image_container' }) do
+          should(have_tag('span', :with => { class: 'ballonizer_image_container' }) do
             with_tag('img', :with => { alt: 'the third test image' })
           end)
         end
@@ -252,24 +318,24 @@ describe Ballonizer do
           it 'add the ballons inside the containers' do
             # TODO: break this spec in smaller parts, this specificate more
             # than one thing
-            should(have_tag('div', :with => { class: 'ballonizer_image_container' }) do
+            should(have_tag('span', :with => { class: 'ballonizer_image_container' }) do
               # the second image have two versions, the second ballon is added
               # in the second version, so here we verify if the ballonize_page
               # recover the ballons of the last version
               with_tag('img', :with => { alt: 'the second test image' })
-              with_tag('p', { text: 'first ballon of second image',
+              with_tag('span', { text: 'first ballon of second image',
                               with: { class: 'ballonizer_ballon' }})
-              with_tag('p', { text: 'second ballon of second image',
+              with_tag('span', { text: 'second ballon of second image',
                               with: { class: 'ballonizer_ballon' }})
             end)
-            should(have_tag('div', :with => { class: 'ballonizer_image_container' }) do
+            should(have_tag('span', :with => { class: 'ballonizer_image_container' }) do
               # the third image have two versions, the second ballon is removed
               # in the second version, so here we verify if the ballonize_page
               # do not use a ballon of an old version in the image
               with_tag('img', :with => { alt: 'the third test image' })
-              with_tag('p', { text: 'first ballon of third image',
+              with_tag('span', { text: 'first ballon of third image',
                               with: { class: 'ballonizer_ballon' }})
-              without_tag('p', { text: 'second ballon of third image',
+              without_tag('span', { text: 'second ballon of third image',
                                  with: { class: 'ballonizer_ballon' }})
             end)
           end
@@ -283,7 +349,7 @@ describe Ballonizer do
           page_with_images.to_s
         end
         it "don't add a container around the imgs" do
-          should_not have_tag('div', :with => {
+          should_not have_tag('span', :with => {
             class: 'ballonizer_image_container'
           })
         end
@@ -437,6 +503,17 @@ describe Ballonizer do
       end
     end
 
+    context "when a ballon don't have font_size" do
+      let (:submit_hash) do
+        deep_copy(submit_hash_example)[submit_hash_example.keys.first]
+                                      .first.update({ font_size: nil })
+      end
+
+      it { should be_false }
+
+      include_examples 'and the second argument is true'
+    end
+
     context 'when the submit contain a image without ballons' do
       let (:submit_hash) do
         { submit_hash_example.keys.first => [] }
@@ -444,6 +521,7 @@ describe Ballonizer do
 
       it { should be_true }
     end
+
     context 'when the hash is valid' do
       it { should be_true }
 
@@ -480,14 +558,7 @@ describe Ballonizer do
 
       it 'the ballonize_page add the ballons to the image' do
         instance.process_submit_hash(submit_hash, Time.at(0))
-        expect(ballonized_page).to have_tag('p',
-          { text: 'the first ballon of the fourth image',
-            with: { class: 'ballonizer_ballon' } }
-        )
-        expect(ballonized_page).to have_tag('p',
-          { text: 'the second ballon of the fourth image',
-            with: { class: 'ballonizer_ballon' } }
-        )
+        expect(ballonized_page).to have_ballons_as_submitted_by(submit_hash)
       end
     end
     context 'when the submit refer to a image already with ballons' do
@@ -512,14 +583,7 @@ describe Ballonizer do
 
       it 'the ballonize_page use the new ballons' do
         instance.process_submit_hash(submit_hash, Time.at(0))
-        expect(ballonized_page).to have_tag('p',
-          { text: 'the first ballon (version 2) of the first image',
-            with: { class: 'ballonizer_ballon' } }
-        )
-        expect(ballonized_page).to have_tag('p',
-          { text: 'the second ballon (version 2) of the first image',
-            with: { class: 'ballonizer_ballon' } }
-        )
+        expect(ballonized_page).to have_ballons_as_submitted_by(submit_hash)
       end
     end
   end
@@ -549,9 +613,10 @@ describe Ballonizer do
       # The submit hash is used to define the env_example
       # (and in consequence the env)
       let (:submit_hash) do
-        # this input is invalid because the text field can't be empty
+        # this input is invalid because have no font_size
         { 'http://comic-translation.com/tr/pt-BR/a_comic/imgs/4.jpg' => [
-          { 'text' => '', 'left' => 0, 'top' => 0, 'width' => 0.5, 'height' => 0.5 }
+          { 'text' => 'test', 'left' => 0, 'top' => 0, 'width' => 0.5,
+            'height' => 0.5 }
         ]}
       end
       
@@ -568,7 +633,8 @@ describe Ballonizer do
       let(:submit_hash) do
         { 'http://comic-translation.com/tr/pt-BR/a_comic/imgs/4.jpg' => [
           { 'text' => 'the first ballon of the fourth image',
-            'left' => 0, 'top' => 0, 'width' => 0.5, 'height' => 0.5 }
+            'left' => 0, 'top' => 0, 'width' => 0.5, 'height' => 0.5,
+            'font_size' => 16 }
         ]}
       end
       
@@ -581,10 +647,7 @@ describe Ballonizer do
 
       it 'the ballonize_page add the ballons to the image' do
         instance.process_submit(env)
-        expect(ballonized_page).to have_tag('p',
-          { text: 'the first ballon of the fourth image',
-            with: { class: 'ballonizer_ballon' } }
-        )
+        expect(ballonized_page).to have_ballons_as_submitted_by(submit_hash)
       end
     end
   end