ballonizer 0.1.0 → 0.2.0

data/lib/assets/javascripts/ballonizer.js

@@ -0,0 +1,482 @@
+// Module pattern
+(function (global) {
+    "use strict";
+    var Ballonizer = (function () {
+
+        var htmlEscape = function (str) {
+            return (str)
+                .replace(/&/g, "&")
+                .replace(/"/g, """)
+                .replace(/'/g, "'")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;");
+        };
+
+        var objectIsEmpty = function (obj) {
+            for (var p in obj) {
+                if (obj.hasOwnProperty(p)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+
+        // Classes used by the module
+        var Ballonizer;
+        var BallonizedImageContainer;
+        var InterfaceBallon;
+
+         /**
+            * @constructor Construct a Ballonizer object. This includes
+            *  the BallonizedImageContainer objects for any images who match
+            *  the ballonizerContainerSelector in the context. Add form for the
+            *  submit of the ballonized image changes.
+            * @param actionFormURL A string with the value of the action
+            *  attribute of the ballonizer form.
+            * @param ballonizerContainerSelector A css selector string who
+            *  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 config A hash with the config to be used in some
+            *   situations:
+            *   ballonInitialText: ballon text when the ballon is created (do
+            *       not use a empty string or only spaces). Defaults
+            *       to "double click to edit ballon text";
+            *   submitButtonValue: text of the button who submits the changes
+            *       in the ballons. Defaults to "Submit ballon changes";
+            * @return Ballonizer object
+            */
+        Ballonizer = function (actionFormURL,
+                                ballonizerContainerSelector,
+                                context,
+                                config) {
+
+            // Implicit constructor pattern
+            if (!(this instanceof Ballonizer)) {
+                return new Ballonizer(actionFormURL,
+                                        ballonizerContainerSelector,
+                                        context,
+                                        config);
+            }
+            
+            if (null == config) {
+                this.config = {
+                    ballonInitialText: "double click to edit ballon text",
+                    submitButtonValue: "Submit ballon changes"
+                };
+            } else {
+                this.config = config;
+            }
+
+            this.actionFormURL = actionFormURL;
+            this.context = $(context);
+
+            this.ballonizedImages = {};
+
+            var imageContainers = $(ballonizerContainerSelector, this.context);
+            imageContainers.each($.proxy(function (ix, element) {
+                var container = $(element);
+                var ballonizedContainer = new BallonizedImageContainer(this, container);
+                var imgSrc = $("img", container).prop("src");
+
+                this.ballonizedImages[imgSrc] = ballonizedContainer;
+
+            }, this));
+
+            this.formNode = null;
+            if (!objectIsEmpty(this.ballonizedImages)) {
+                this.formNode = this.generateBallonizerFormNode();
+                this.context.children().last().after(this.formNode);
+            }
+
+            return this;
+        };
+
+        Ballonizer.Error = function (message) {
+            this.message = message;
+        };
+
+        Ballonizer.Error.prototype = new Error();
+
+        // Instance methods
+        Ballonizer.prototype.getBallonInitialText = function () {
+            return this.config.ballonInitialText;
+        };
+
+        Ballonizer.prototype.getContext = function () {
+            return this.context;
+        };
+
+        Ballonizer.prototype.getForm = function () {
+            return this.formNode;
+        };
+
+        Ballonizer.prototype.getBallonizedImageContainers = function () {
+            return this.ballonizedImages;
+        };
+
+        Ballonizer.prototype.generateBallonizerFormNode = function () {
+            var form = $("<form class='ballonizer_page_form' method='post' >" +
+                            "<input name='ballonizer_data' type='hidden' />" +
+                            "<input name='ballonizer_submit' type='submit' " +
+                            "value='" + this.config.submitButtonValue +
+                            "' /></form>");
+
+            form.attr("action", this.actionFormURL);
+
+            return form;
+        };
+
+        Ballonizer.prototype.notifyBallonChange = function () {
+            var submitButton = $("input[type='submit']", this.formNode);
+            var dataInput = $("input[type='hidden']", this.formNode);
+
+            if (!submitButton.hasClass("ballonizer_ballons_have_changes")) {
+                submitButton.addClass("ballonizer_ballons_have_changes");
+            }
+
+            dataInput.val(jQuery.toJSON(this.serialize()));
+
+            return true;
+        };
+
+        Ballonizer.prototype.serialize = function () {
+            var serialization = {};
+
+            jQuery.each(this.ballonizedImages, function (ix, el) {
+                // makeArray remove non-numerical keys as img_src
+                serialization[ix] = jQuery.makeArray(el.serialize());
+            });
+
+            return serialization;
+        };
+
+        BallonizedImageContainer = (function () {
+            var BallonizedImageContainer = function (ballonizerInstance,
+                                                        containerNode) {
+
+                // Implicit constructor pattern
+                if (!(this instanceof BallonizedImageContainer)) {
+                    return new BallonizedImageContainer(ballonizerInstance,
+                                                            containerNode);
+                }
+
+                this.ballonizerInstance = ballonizerInstance;
+                this.containerNode = containerNode;
+                this.ballons = [];
+
+                // Insert the form for the ballons in edit mode
+                $("<form class='ballonizer_image_form' method='#'></form>").insertBefore(
+                    this.containerNode.children().first()
+                );
+
+                var ballons = $(".ballonizer_ballon",
+                        this.ballonizerInstance.getContext());
+
+                ballons.each($.proxy(function (ix, element) {
+                    this.ballons.push(new InterfaceBallon(this, $(element)));
+                }, this));
+
+                var img = $("img", this.containerNode);
+                img.click($.proxy(function (event) {
+                    this.click(event);
+                }, this));
+                img.dblclick($.proxy(function (event) {
+                    this.dblclick(event);
+                }, this));
+            };
+
+            BallonizedImageContainer.prototype.getContainerNode = function () {
+                return this.containerNode;
+            };
+
+            BallonizedImageContainer.prototype.getBallonizerInstance = function () {
+                return this.ballonizerInstance;
+            };
+
+            BallonizedImageContainer.prototype.notifyBallonChange = function () {
+                return this.ballonizerInstance.notifyBallonChange();
+            };
+
+            BallonizedImageContainer.prototype.removeBallonFromList = function (ballon) {
+                var ix = jQuery.inArray(ballon, this.ballons);
+                this.ballons.splice(ix, 1);
+
+                this.notifyBallonChange();
+
+                return this;
+            };
+
+            BallonizedImageContainer.prototype.getBallons = function () {
+                return this.ballons;
+            };
+
+            BallonizedImageContainer.prototype.click = function (event) {
+                // The container don't have an action to do when it's clicked,
+                // but it have when are double-clicked, and a double-click
+                // trigger a click event too. To avoid problems with webcomic
+                // pages who are links to the next page we disable the default
+                // efects of the click.
+                event.preventDefault();
+            };
+
+            BallonizedImageContainer.prototype.dblclick = function (event) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                var offset = this.containerNode.offset();
+                var ballonX = event.pageX - offset.left;
+                var ballonY = event.pageY - offset.top;
+
+                // Width and height are magic number choosen for no good reason
+                var ballonWidth = 129, ballonHeight = 41;
+                var ballon = new InterfaceBallon(this, ballonX, ballonY,
+                        ballonWidth, ballonHeight,
+                        this.ballonizerInstance.getBallonInitialText());
+
+                this.ballons.push(ballon);
+
+                this.notifyBallonChange();
+            };
+
+            BallonizedImageContainer.prototype.serialize = function () {
+                /* jshint camelcase: false */
+                var serialization = {
+                    // The img_src 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
+                    img_src: $("img", this.containerNode).prop("src"),
+                    length: this.ballons.length
+                };
+
+                jQuery.each(this.ballons, function (ix, el) {
+                    serialization[ix] = el.serialize();
+                });
+
+                return serialization;
+            };
+
+            return BallonizedImageContainer;
+        })();
+
+        InterfaceBallon = (function () {
+            var InterfaceBallon = function (imgContainer, xOrNode, y, width,
+                    height, initialText) {
+
+                // Implicit constructor pattern
+                if (!(this instanceof InterfaceBallon)) {
+                    return new InterfaceBallon(imgContainer, xOrNode, y, width,
+                            height, initialText);
+                }
+
+                this.imgContainer = imgContainer;
+                this.state = "initial";
+
+                if (2 === arguments.length) {
+                    this.node = xOrNode;
+                    this.updatePositionAndSize();
+                    this.text = this.node.text();
+                } else {
+                    this.left = xOrNode;
+                    this.top = y;
+                    this.width = width;
+                    this.height = height;
+                    var containerNode = this.imgContainer.getContainerNode();
+
+                    // The ifs purpose are avoid the ballon of being created
+                    // partially outside of the image (after the creation the
+                    // jQueryUI handles this for us).
+                    if (this.left + this.width > containerNode.width()) {
+                        if (containerNode.width() < this.width) {
+                            this.left = 0;
+                            this.width = containerNode.width();
+                        } else {
+                            this.left = containerNode.width() - this.width;
+                        }
+                    }
+                    if (this.top + this.height > containerNode.height()) {
+                        if (containerNode.height() < this.height) {
+                            this.top = 0;
+                            this.height = containerNode.height();
+                        } else {
+                            this.top = containerNode.height() - this.height;
+                        }
+                    }
+
+                    this.text = initialText;
+                    this.node = this.generateBallonNode();
+                    this.node.insertBefore(
+                        this.imgContainer.getContainerNode().children().first()
+                    );
+                }
+
+                this.node.draggable({
+                    containment: "parent",
+                    opacity: 0.5,
+                    distance: 5,
+                    stop: $.proxy(function (event, ui) {
+                        /* jshint unused: false */
+                        this.updatePositionAndSize();
+                    }, this)
+                });
+                this.node.resizable({
+                    containment: "parent",
+                    opacity: 0.5,
+                    distance: 5,
+                    // Hides the handle when not hovering
+                    autoHide: true,
+                    stop: $.proxy(function (event, ui) {
+                        /* jshint unused: false */
+                        this.updatePositionAndSize();
+                    }, this)
+                });
+
+                var imageForm = $(".ballonizer_image_form",
+                        this.imgContainer.getContainerNode());
+                var editionBallon = $(
+                    "<textarea class='ballonizer_edition_ballon'></textarea>"
+                ).val(this.text);
+
+                this.editionNode = editionBallon;
+                imageForm.prepend(this.editionNode);
+
+                this.editionNode.blur($.proxy(function (event) {
+                    this.blur(event);
+                }, this));
+                this.node.dblclick($.proxy(function (event) {
+                    this.dblclick(event);
+                }, this));
+            };
+
+            InterfaceBallon.prototype.getBallonizedImageContainer = function () {
+                return this.imgContainer;
+            };
+            
+            InterfaceBallon.prototype.generateBallonNode = function () {
+                var nodeStyle = ["left: ", this.left, "px; ", "top: ",
+                    this.top, "px; ", "width: ", this.width, "px; ",
+                    "height: ", this.height, "px;"].join("");
+                var node = $("<p class='ballonizer_ballon' ></p>");
+
+                // The use of ".text" will escape '<', '>', and others
+                node.text(this.text).attr("style", nodeStyle);
+
+                return node;
+            };
+
+            InterfaceBallon.prototype.getText = function () {
+                return this.text;
+            };
+            InterfaceBallon.prototype.getPositionAndSize = function () {
+                return {
+                    left: this.left,
+                    top: this.top,
+                    width: this.width,
+                    height: this.height
+                };
+            };
+            InterfaceBallon.prototype.updatePositionAndSize = function () {
+                var newX = this.node.position().left;
+                var newY = this.node.position().top;
+                var newWidth = this.node.width();
+                var newHeight = this.node.height();
+
+                if (newX !== this.left || newY !== this.top ||
+                        newWidth !== this.width || newHeight !== this.height) {
+
+                    this.left = newX;
+                    this.top = newY;
+                    this.width = newWidth;
+                    this.height = newHeight;
+                    this.imgContainer.notifyBallonChange();
+                }
+            };
+            InterfaceBallon.prototype.getState = function () {
+                return this.state;
+            };
+            InterfaceBallon.prototype.getNode = function () {
+                if (this.state.match(/edit/)) {
+                    return this.editionNode;
+                } else {
+                    return this.node;
+                }
+            };
+            InterfaceBallon.prototype.getNormalNode = function () {
+                return this.node;
+            };
+            InterfaceBallon.prototype.getEditionNode = function () {
+                return this.editionNode;
+            };
+            InterfaceBallon.prototype.blur = function () {
+                /* jshint loopfunc: true */
+                if ("edit" !== this.state) {
+                    throw new Ballonizer.Error(
+                        "losing focus when not in the edit state"
+                    );
+                }
+                var oldText = this.text;
+                this.text = this.editionNode.val();
+                if ((/^\s*$/).test(this.text)) {
+                    this.node.remove();
+                    this.editionNode.remove();
+                    // implies notifyBallonChange
+                    this.imgContainer.removeBallonFromList(this);
+                    // throw a exception if any method is called
+                    for (var method in InterfaceBallon.prototype)
+                    {
+                        if (InterfaceBallon.prototype.hasOwnProperty(method)) {
+                            this[method] = function () {
+                                throw new Ballonizer.Error(
+                                    "this ballon already have been destroyed" +
+                                    ", do not call any methods over it ('" +
+                                    method + "' was called)");
+                            };
+                        }
+                    }
+                } else {
+                    this.state = "initial";
+                    // only change the text in the node, and not what
+                    // the resizable insert inside the element (the handles)
+                    this.node.contents().filter(function () {
+                        return this.nodeType === 3;
+                    }).replaceWith(htmlEscape(this.text));
+                    this.node.removeClass("ballonizer_ballon_hidden_for_edition");
+                    this.editionNode.removeClass("ballonizer_ballon_in_edition");
+                    if (this.text !== oldText) {
+                        this.imgContainer.notifyBallonChange();
+                    }
+                }
+            };
+
+            InterfaceBallon.prototype.dblclick = function () {
+                this.state = this.state.replace("initial", "edit");
+                this.node.addClass("ballonizer_ballon_hidden_for_edition");
+                this.editionNode.attr("style", this.node.attr("style"));
+                this.editionNode.addClass("ballonizer_ballon_in_edition");
+                // focus after is visible, otherwise will crash in IE
+                // http://api.jquery.com/focus/#focus
+                this.editionNode.focus();
+            };
+
+            InterfaceBallon.prototype.serialize = function () {
+                var containerWidth = this.imgContainer.getContainerNode().width();
+                var containerHeight = this.imgContainer.getContainerNode().height();
+
+                return {
+                    left: this.left / containerWidth,
+                    top: this.top / containerHeight,
+                    width: this.width / containerWidth,
+                    height: this.height / containerHeight,
+                    text: this.text
+                };
+            };
+
+            return InterfaceBallon;
+        })();
+
+        return Ballonizer;
+    })();
+
+    global.Ballonizer = Ballonizer;
+
+})(this);
+

data/lib/assets/stylesheets/ballonizer.css

@@ -0,0 +1,78 @@
+.ballonizer_image_container
+{
+	position: relative;
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+
+.ballonizer_ballon
+{
+	position: absolute;
+	margin: 0;
+	background-color: white;
+	color: black;
+	text-align: center;
+	overflow: hidden;
+}
+
+.ballonizer_ballon_hidden_for_edition
+{
+	display: none;
+}
+
+/* The ballonizer image form is hidden but we don't use "display: none".
+ * The "display: none" in a parent element make impossible to diplay the child
+ * elements. So we remove any padding. As the childs are positioned
+ * absolutely they don't ocuppy space. This make height equal zero, but
+ * width is equal to the width of the parent element. Using "display: inline-block"
+ * fix this problem and the height is equal to the sum of the childs who
+ * 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
+{
+	margin: 0;
+	padding: 0;
+	border: 0;
+	display: inline-block;
+}
+
+.ballonizer_image_form > *
+{
+	position: absolute;
+	display: none;
+	margin: 0;
+	text-align: center;
+}
+
+.ballonizer_image_form > .ballonizer_ballon_in_edition
+{
+	display: block;
+}
+
+/* We use the same trick used in the image form in the page form */
+.ballonizer_page_form
+{
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	border: 0;
+}
+
+.ballonizer_page_form > *
+{
+	display: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ballonizer_page_form > .ballonizer_ballons_have_changes
+{
+	display: block;
+	position: fixed;
+	top: 0;
+	right: 0;
+}
+