ballonizer 0.6.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 81a2f00a9f342ae4610b16bb9ff9c76f23303d42
-  data.tar.gz: f52c953ad0e04fe39a02bb8be9c13fb0cbf22171
+  metadata.gz: b3aa463bc872474ad1a3c7026aed2dc957f52814
+  data.tar.gz: a698fdd12b78996403a37dc938bd72f9ecfde3c9
 SHA512:
-  metadata.gz: d17a3d75edde1678fdba891400cd52e4d583c9cd2d6155d68632a4c800c5b09029b6ccc95f95704d4c6ebc1ef4a4dec175d372e74456a5264d111cdb4f43ccab
-  data.tar.gz: dd8e30865b5de73b832d6649385742ed6baa203e1c5525aaf3427f8e8604def73ecc62d8fac8d2bd69239fecd1fdb9174bc65368c17c48ab3b7d4107a17c4253
+  metadata.gz: 3c242c148ec73d9d41e0ce702e7af3f288e85027920d00b9395361a5325a5ce8560bbddce6213b0ed4000ebf3fafe90023cd9660f316be7fe1e4a60d44b8c222
+  data.tar.gz: c2a5b76cabc58123e2778df531f4747e927607fbddd5ee30cfa02b8fe78c1c2bb92984ca63643482c2234e06b438bc0f8615bb07bd9290b72a18139e0058371f

data/Rakefile

@@ -13,7 +13,7 @@ end
 RSpec::Core::RakeTask.new :spec
 
 Jshintrb::JshintTask.new :jshint do |t|
-  t.pattern = '{lib/ballonizer/*.js,spec/javascripts/*.js}'
+  t.pattern = '{lib/assets/javascripts/*.js,spec/javascripts/*.js}'
   t.options = {
     bitwise: true,
     camelcase: true,

data/lib/assets/javascripts/ballonizer.js

@@ -1,6 +1,12 @@
 // Module pattern
 (function (global) {
     "use strict";
+    // We define these two variables as null to cause an error when the
+    // global version of these variables is accessed. This is used to enforce
+    // the use of the jQueryObject parameter of the ballonizer constructor.
+    var jQuery = null;
+    var $ = null;
+
     var Ballonizer = (function () {
 
         var htmlEscape = function (str) {
@@ -37,6 +43,10 @@
             *  match the container wrapped around each image to be ballonized.
             * @param context A node or JQuery object. The Ballonizer will
             *  affect and see only inside of this node.
+            * @param jQueryObject The '$' or 'jQuery' variables defined by jQuery
+            *  library. The object will use this object instead the global one.
+            *  The main utility of this is allow the use of a different jQuery
+            *  version that the used in the rest of the page scripts.
             * @param config A hash with the config to be used in some
             *   situations:
             *   ballonInitialText: ballon text when the ballon is created (do
@@ -44,11 +54,15 @@
             *       to "double click to edit ballon text";
             *   submitButtonValue: text of the button who submits the changes
             *       in the ballons. Defaults to "Submit ballon changes";
+            *   jQueryObject: a jQuery object to use instead of the global one,
+            *       the main utility of this configuration is use multiple jQuery
+            *       versions in the page.
             * @return Ballonizer object
             */
         Ballonizer = function (actionFormURL,
                                 ballonizerContainerSelector,
                                 context,
+                                jQueryObject,
                                 config) {
 
             // Implicit constructor pattern
@@ -56,16 +70,28 @@
                 return new Ballonizer(actionFormURL,
                                         ballonizerContainerSelector,
                                         context,
+                                        jQueryObject,
                                         config);
             }
             
+            var defaultConfig = {
+                ballonInitialText: "double click to edit ballon text",
+                submitButtonValue: "Submit ballon changes"
+            };
+
+            if (jQueryObject) {
+                this.jQuery = jQueryObject;
+            } else {
+                throw new Ballonizer.Error(
+                    "the parameter jQueryObject is null or undefined"
+                );
+            }
+            var $ = this.jQuery;
+
             if (null == config) {
-                this.config = {
-                    ballonInitialText: "double click to edit ballon text",
-                    submitButtonValue: "Submit ballon changes"
-                };
+                this.config = defaultConfig;
             } else {
-                this.config = config;
+                this.config = $.extend({}, defaultConfig, config);
             }
 
             this.actionFormURL = actionFormURL;
@@ -76,7 +102,9 @@
             var imageContainers = $(ballonizerContainerSelector, this.context);
             imageContainers.each($.proxy(function (ix, element) {
                 var container = $(element);
-                var ballonizedContainer = new BallonizedImageContainer(this, container);
+                var ballonizedContainer = new BallonizedImageContainer(
+                    this, container, jQueryObject
+                );
                 var imgSrc = $("img", container).prop("src");
 
                 this.ballonizedImages[imgSrc] = ballonizedContainer;
@@ -116,6 +144,8 @@
         };
 
         Ballonizer.prototype.generateBallonizerFormNode = function () {
+            var $ = this.jQuery;
+            var jQuery = this.jQuery;
             var form = $("<form class='ballonizer_page_form' method='post' >" +
                             "<div><input name='ballonizer_data' type='hidden'>" +
                             "</input><input name='ballonizer_submit'" +
@@ -125,10 +155,32 @@
 
             form.attr("action", this.actionFormURL);
 
+            // We find the greater z-index of a body direct child and
+            // increment this value by one (this way the form will not 
+            // be hiiden behind another element)
+            var zIndexes = [];
+            $("body > *").each(function (ix, el) {
+                var zIndexCSS = $(el).css('z-index');
+                // the inherit is made numeric by the jQuery, we are
+                // filtering here only the "auto" string value
+                if (jQuery.isNumeric(zIndexCSS)) {
+                    zIndexes.push(parseInt(zIndexCSS, 10));
+                }
+            });
+            var zIndex = null;
+            if (zIndexes.length > 0) {
+                zIndex = Math.max.apply(null, zIndexes) + 1;
+            } else {
+                zIndex = 1;
+            }
+            $("input[name='ballonizer_submit']", form).css("z-index", zIndex);
+
             return form;
         };
 
         Ballonizer.prototype.notifyBallonChange = function () {
+            var $ = this.jQuery;
+            var jQuery = this.jQuery;
             var submitButton = $("input[type='submit']", this.formNode);
             var dataInput = $("input[type='hidden']", this.formNode);
 
@@ -142,6 +194,7 @@
         };
 
         Ballonizer.prototype.serialize = function () {
+            var jQuery = this.jQuery;
             var serialization = {};
 
             jQuery.each(this.ballonizedImages, function (ix, el) {
@@ -154,14 +207,19 @@
 
         BallonizedImageContainer = (function () {
             var BallonizedImageContainer = function (ballonizerInstance,
-                                                        containerNode) {
+                                                        containerNode,
+                                                        jQueryObject) {
 
                 // Implicit constructor pattern
                 if (!(this instanceof BallonizedImageContainer)) {
                     return new BallonizedImageContainer(ballonizerInstance,
-                                                            containerNode);
+                                                            containerNode,
+                                                            jQueryObject);
                 }
 
+                this.jQuery = jQueryObject;
+                var $ = this.jQuery;
+
                 // See notifyBallonChange for this flag explanation
                 this.userAlreadyInteracted = false;
 
@@ -187,7 +245,9 @@
                 var ballons = $(".ballonizer_ballon", this.containerNode);
 
                 ballons.each($.proxy(function (ix, element) {
-                    this.ballons.push(new InterfaceBallon(this, $(element)));
+                    this.ballons.push(new InterfaceBallon(
+                        this, $(element), this.jQuery
+                    ));
                 }, this));
 
                 var img = $("img", this.containerNode);
@@ -217,6 +277,7 @@
             // preserve the semantics of the ballon change be always from a user
             // interaction.
             BallonizedImageContainer.prototype.notifyBallonChange = function () {
+                var jQuery = this.jQuery;
                 // This flag is necessary to work around the load of the image.
                 // The ready callback don't wait for images to load and the
                 // load callback has several caveats with using images (see
@@ -242,7 +303,7 @@
             };
 
             BallonizedImageContainer.prototype.removeBallonFromList = function (ballon) {
-                var ix = jQuery.inArray(ballon, this.ballons);
+                var ix = this.jQuery.inArray(ballon, this.ballons);
                 this.ballons.splice(ix, 1);
 
                 this.notifyBallonChange();
@@ -274,7 +335,8 @@
                 var ballonWidth = 129, ballonHeight = 41;
                 var ballon = new InterfaceBallon(this, ballonX, ballonY,
                         ballonWidth, ballonHeight,
-                        this.ballonizerInstance.getBallonInitialText());
+                        this.ballonizerInstance.getBallonInitialText(),
+                        this.jQuery);
 
                 this.ballons.push(ballon);
 
@@ -282,6 +344,8 @@
             };
 
             BallonizedImageContainer.prototype.serialize = function () {
+                var $ = this.jQuery;
+                var jQuery = this.jQuery;
                 /* jshint camelcase: false */
                 var serialization = {
                     // The img_src is out of style (not in camel case) because
@@ -302,28 +366,30 @@
         })();
 
         InterfaceBallon = (function () {
-            var InterfaceBallon = function (imgContainer, xOrNode, y, width,
-                    height, initialText) {
+            var InterfaceBallon = function (imgContainer, xOrNode, yOrJQueryObject,
+                    width, height, initialText, jQueryObject) {
 
                 // Implicit constructor pattern
                 if (!(this instanceof InterfaceBallon)) {
-                    return new InterfaceBallon(imgContainer, xOrNode, y, width,
-                            height, initialText);
+                    return new InterfaceBallon(imgContainer, xOrNode, yOrJQueryObject, width,
+                            height, initialText, jQueryObject);
                 }
 
                 this.imgContainer = imgContainer;
                 this.state = "initial";
 
-                if (2 === arguments.length) {
+                if (3 === arguments.length) {
                     this.node = xOrNode;
+                    this.jQuery = yOrJQueryObject;
                     this.updatePositionAndSize();
                     this.fontSize = parseInt(this.node.css('font-size'), 10);
                     this.text = this.node.text();
                 } else {
                     this.left = xOrNode;
-                    this.top = y;
+                    this.top = yOrJQueryObject;
                     this.width = width;
                     this.height = height;
+                    this.jQuery = jQueryObject;
                     var containerNode = this.imgContainer.getContainerNode();
 
                     // The ifs purpose are avoid the ballon of being created
@@ -352,6 +418,8 @@
                     this.changeFontSizeToBestFitBallon();
                 }
 
+                var $ = this.jQuery;
+
                 this.node.draggable({
                     containment: "parent",
                     opacity: 0.5,
@@ -403,6 +471,7 @@
             };
             
             InterfaceBallon.prototype.generateBallonNode = function () {
+                var $ = this.jQuery;
                 var nodeStyle = ["left: ", this.left, "px; ", "top: ",
                     this.top, "px; ", "width: ", this.width, "px; ",
                     "height: ", this.height, "px;"].join("");
@@ -426,17 +495,17 @@
                 };
             };
             InterfaceBallon.prototype.changeFontSizeToBestFitBallon = function () {
-                var old_height = this.node.css('height');
-                var desired_calc_height = this.node.height();
+                var oldHeight = this.node.css('height');
+                var desiredCalcHeight = this.node.height();
                 this.node.css('height', 'auto');
-                var actual_font_size = 1;
-                this.node.css('font-size', actual_font_size);
-                while (this.node.height() < desired_calc_height) {
-                    this.node.css('font-size', ++actual_font_size + 'px');
+                var actualFontSize = 1;
+                this.node.css('font-size', actualFontSize);
+                while (this.node.height() < desiredCalcHeight) {
+                    this.node.css('font-size', ++actualFontSize + 'px');
                 }
-                this.node.css('font-size', --actual_font_size + 'px');
-                this.node.css('height', old_height);
-                this.fontSize = actual_font_size;
+                this.node.css('font-size', --actualFontSize + 'px');
+                this.node.css('height', oldHeight);
+                this.fontSize = actualFontSize;
             };
             InterfaceBallon.prototype.updatePositionAndSize = function () {
                 var newX = this.node.position().left;
@@ -512,6 +581,8 @@
             };
 
             InterfaceBallon.prototype.dblclick = function () {
+                var $ = this.jQuery;
+                var jQuery = this.jQuery;
                 this.state = this.state.replace("initial", "edit");
 
                 var context = this.imgContainer.getBallonizerInstance().getContext();
@@ -528,7 +599,7 @@
                     // the inherit is made numeric by the jQuery, we are
                     // filtering here only the "auto" string value
                     if (jQuery.isNumeric(zIndexCSS)) {
-                        zIndexes.push(parseInt(zIndexCSS));
+                        zIndexes.push(parseInt(zIndexCSS, 10));
                     }
                 });
                 var zIndex = null;
@@ -575,8 +646,12 @@
                     top: this.top / containerHeight,
                     width: this.width / containerWidth,
                     height: this.height / containerHeight,
-                    font_size: this.fontSize,
-                    text: this.text
+                    text: this.text,
+                    /* jshint camelcase: false */
+                    // The fontSize is out of style (not in camel case) because
+                    // it will be submitted to the ruby, and i'm giving
+                    // preference to the ruby convention when in conflict
+                    font_size: this.fontSize
                 };
             };
 

data/lib/assets/stylesheets/ballonizer.css

@@ -17,6 +17,7 @@
     display: block;
     word-wrap: break-word;
     overflow: hidden;
+    border-radius: 50% 50%;
 }
 
 .ballonizer_ballon_hidden_for_edition
@@ -79,5 +80,7 @@
 	position: fixed;
 	top: 0;
 	right: 0;
+	width: auto;
+	height: auto;
 }
 

data/lib/ballonizer.rb

@@ -55,6 +55,16 @@ require 'sprockets'
 # ballonized_image_ballons.
 #
 # Changelog:
+#  v0.6.1
+#   * Add the jquery_no_conflict option. If this option is true the
+#     js_load_snippet will restore any previous loaded version of
+#     jQuery after the ballonizer javascript client code already
+#     referenced the latest loaded version (use this option if the page
+#     already use a jQuery version that's different from the used by
+#     the gem, and you use the add_required_js_libs_for_edition and
+#     add_js_for_edition options).
+#  v0.6.0
+#   * Change the jQuery version provided by the gem to the 1.10.2
 #  v0.5.1:
 #   * js_load_snippet can take a settings arg too. Fixed ballonize_page to
 #     use the :form_handler_url from the settings argument.
@@ -193,7 +203,11 @@ class Ballonizer
     # If true and the database argument don't have any of the tables used by
     # the class call create_tables over the database argument. If false or the
     # database has at leat one of the tables does nothing.
-    create_tables_if_none: false
+    create_tables_if_none: false,
+    # Use the jQuery.noConflict to restore any previous loaded version of the
+    # jQuery in a ballonized page. Only works with add_js_for_edition, and
+    # probably only makes sense with add_required_js_libs_for_edition.
+    jquery_no_conflict: false
   }.freeze.each { | _, v| v.freeze }
 
   USED_TABLES = [ :images, :ballons, :ballonized_image_ballons,
@@ -497,13 +511,19 @@ class Ballonizer
   # @return [String] The added snippet. Already with the <script/> tag around it.
   def js_load_snippet(settings = {})
     settings = @settings.merge(settings)
+    # We create a reference to the jQuery because the global variable can be
+    # cleaned by the jQuery.noConflict(true), if the jquery_no_conflict
+    # setting is defined
     <<-EOF
       <script type="text/javascript">
-        $(document).ready(function() {
+        var jQueryReference = jQuery;
+        jQueryReference(document).ready(function() {
           Ballonizer('#{settings[:form_handler_url]}',
                      '.ballonizer_image_container',
-                     $('body'));
+                     jQueryReference('body'),
+                     jQueryReference);
         })
+        #{ 'jQuery.noConflict(true); ' if settings[:jquery_no_conflict] }
       </script>
     EOF
   end

data/spec/javascripts/ballonizer_spec.js

@@ -65,24 +65,24 @@ describe("Ballonizer", function () {
         describe("but none in the context", function () {
             it("doesn't create a form", function () {
                 loadFixtures("ballonized-xkcd-without-ballons.html");
-                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"));
+                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"), $);
                 expect($("form.ballonizer_page_form")).not.toExist();
             });
             it(".getForm return null", function () {
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#bottom"), $);
                 expect(instance.getForm()).toEqual(null);
             });
         });
         describe("and they are in the context", function () {
             it("create a hidden form as the last child of the context", function () {
                 loadFixtures("ballonized-xkcd-without-ballons.html");
-                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                 expect($("#jasmine-fixtures")).toHaveBallonizerForm(actionFormURL);
                 expect($("form.ballonizer_page_form")).toBeHidden();
             });
             it("changes in .getForm result affect the node in the DOM", function () {
                 loadFixtures("ballonized-xkcd-without-ballons.html");
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                 instance.getForm().attr("method", "get");
                 expect($("form.ballonizer_page_form")).toHaveAttr("method", "get");
             });
@@ -90,7 +90,7 @@ describe("Ballonizer", function () {
         describe("when the ballonized image is double clicked", function () {
             it("a new ballon will be created", function () {
                 loadFixtures("ballonized-xkcd-without-ballons.html");
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
 
                 var ballonizedImg = $(".ballonizer_image_container img");
                 ballonizedImg.trigger("dblclick");
@@ -98,7 +98,7 @@ describe("Ballonizer", function () {
             });
             it("the default action of clicking the image (if any) will not trigger", function () {
                 loadFixtures("ballonized-xkcd-with-anchor-in-image.html");
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                 var spyAnchor = spyOnEvent("#comic a", "click");
                 var ballonizedImg = $(".ballonizer_image_container img");
                 // In a real browser the dblclick event will be generated with one or
@@ -112,7 +112,7 @@ describe("Ballonizer", function () {
     describe(".getBallonizedImageContainers", function () {
         describe("when there's no image to ballonize", function () {
             it("return an object without any keys", function () {
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                 var ballonizedImageContainers = instance.getBallonizedImageContainers();
                 expect(ballonizedImageContainers).toBeAnEmptyObject();
             });
@@ -120,7 +120,7 @@ describe("Ballonizer", function () {
         describe("when there's a image to ballonize", function () {
             it("return an object with the img src as key and the object as value", function () {
                 loadFixtures("ballonized-xkcd-without-ballons.html");
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                 var ballonizedImageContainers = instance.getBallonizedImageContainers();
                 expect(ballonizedImageContainers.hasOwnProperty("http://imgs.xkcd.com/comics/cells.png")).toBeTruthy();
             });
@@ -129,7 +129,7 @@ describe("Ballonizer", function () {
     describe("BallonizedImageContainer", function () {
         it("adds a hidden form for the ballon edition in the body", function () {
             loadFixtures("ballonized-xkcd-without-ballons.html");
-            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
             expect($("body")).toContain("form.ballonizer_image_form");
             // What the value of action is not important, but the action attribute
             // is required (http://www.w3.org/TR/html401/interact/forms.html#h-17.3)
@@ -139,7 +139,7 @@ describe("Ballonizer", function () {
         describe("when there's a image with ballons", function () {
             it("getBallons return they", function () {
                 loadFixtures("ballonized-xkcd-with-ballons.html");
-                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                 var ballonizedImageContainers = instance.getBallonizedImageContainers();
                 var ballons = ballonizedImageContainers["http://imgs.xkcd.com/comics/cells.png"].getBallons();
 
@@ -168,7 +168,7 @@ describe("Ballonizer", function () {
         var containerWidth, containerHeight;
         var getBallons = function () {
             loadFixtures("ballonized-xkcd-with-ballons.html");
-            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+            instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
             var imageContainer = instance.getBallonizedImageContainers()["http://imgs.xkcd.com/comics/cells.png"],
                 ballons = imageContainer.getBallons(),
                 containerNode = imageContainer.getContainerNode();
@@ -288,7 +288,7 @@ describe("Ballonizer", function () {
                 it("prevent the default action of changing the page", function () {
                     // first create a ballon
                     loadFixtures("ballonized-xkcd-with-anchor-in-image.html");
-                    instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"));
+                    instance = Ballonizer(actionFormURL, imageToBallonizeCSSSelector, $("#jasmine-fixtures"), $);
                     var ballonizedImg = $(".ballonizer_image_container img");
                     realWorldEvent("dblclick", ballonizedImg);
                     var ballon = $(".ballonizer_ballon");

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ballonizer
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.1
 platform: ruby
 authors:
 - Henrique Becker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-23 00:00:00.000000000 Z
+date: 2013-07-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri