Bug fix

Clicking on a tag inside an added idea field triggered the zoom effect

canvas/js/canvas.js

@@ -6,6 +6,9 @@ $(document).ready(function() {
     // Declare the currently loaded tags belonging to the user
     var tags;
     
+    // Fixes bug when added item field zooms on tag click
+    var tagWindowIsOpen = false;
+    
     // This piece of code is for making the column-count and column-gap CSS to work in Firefox
     /*
     document.getElementById("7-5-col-layout").style.MozColumnCount = "7";
@@ -408,52 +411,6 @@ $(document).ready(function() {
         });
     }
     
-    /* ================================================
-    Toggle textarea.expandable/div.expandable on edit
-    ================================================= */
-    
-    function toggleTextElementOnFocus() {
-        // If the user clicks on the added idea
-        $("li.added_item .expandable").on("click", function() {
-            var li = $(this).parent();
-            
-            // Replace div with a textarea
-            $(this).replaceWith(
-                "<textarea maxlength='100' class='expandable' rows='3' data-limit-rows='true' data-autoresize name='" + $(this).attr("name") + "'>" + $(this).text() + "</textarea>"
-            );
-            
-            // Focus immediately on click instead of having to click on the element a second time
-            li.find("textarea").focus();
-            
-            // Zoom in animation
-            li.find("textarea").addClass("zoom-in");
-            li.find("textarea").css("background-color", "rgba(255, 255, 255, 1)");
-            li.find("textarea").css("-ms-transform", "scale(1.03)");
-            li.find("textarea").css("-webkit-transform", "scale(1.03)");
-            li.find("textarea").css("transform", "scale(1.03)");
-            
-            $("li.added_item textarea.expandable").on("focusout", function() {
-                // Replace textarea with a div
-                $(this).replaceWith(
-                    "<div class='expandable' contenteditable='true' name='" + $(this).attr("name") + "'>" + $(this).val() + "</div>"
-                );
-                
-                // Update tags on the canvas
-                // window.setTimeout(updateTags(), 100);
-                updateTags();
-                
-                // Zoom out animation
-                li.find("div").addClass("zoom-out");
-                li.find("div").css("background-color", "rgba(255, 255, 255, 0.75)");
-                li.find("div").css("-ms-transform", "scale(1)");
-                li.find("div").css("-webkit-transform", "scale(1)");
-                li.find("div").css("transform", "scale(1)");
-                
-                toggleTextElementOnFocus();
-            });
-        });
-    }
-    
     /* ================================================
     Load tags if the user is logged in
     ================================================= */
@@ -632,6 +589,8 @@ $(document).ready(function() {
     
     // Close the tag window
     function closeTagWindow() {
+        tagWindowIsOpen = false;
+        
         $("div#shadow").css("display", "none");
         $("div#tag-window").css("display", "none");
     }
@@ -787,6 +746,8 @@ $(document).ready(function() {
             
             // If the user is logged in
             if($("input[name='username']").val() != "") {
+                tagWindowIsOpen = true;
+                
                 // Show the tag window
                 showTagWindow();
             }
@@ -821,6 +782,54 @@ $(document).ready(function() {
     }
      */
     
+    /* ================================================
+    Toggle textarea.expandable/div.expandable on edit
+    ================================================= */
+    
+    function toggleTextElementOnFocus() {
+        // If the user clicks on the added idea
+        $("li.added_item .expandable").on("click", function() {
+            if(tagWindowIsOpen === false) {
+                var li = $(this).parent();
+                
+                // Replace div with a textarea
+                $(this).replaceWith(
+                    "<textarea maxlength='100' class='expandable' rows='3' data-limit-rows='true' data-autoresize name='" + $(this).attr("name") + "'>" + $(this).text() + "</textarea>"
+                );
+                
+                // Focus immediately on click instead of having to click on the element a second time
+                li.find("textarea").focus();
+                
+                // Zoom in animation
+                li.find("textarea").addClass("zoom-in");
+                li.find("textarea").css("background-color", "rgba(255, 255, 255, 1)");
+                li.find("textarea").css("-ms-transform", "scale(1.03)");
+                li.find("textarea").css("-webkit-transform", "scale(1.03)");
+                li.find("textarea").css("transform", "scale(1.03)");
+                
+                $("li.added_item textarea.expandable").on("focusout", function() {
+                    // Replace textarea with a div
+                    $(this).replaceWith(
+                        "<div class='expandable' contenteditable='true' name='" + $(this).attr("name") + "'>" + $(this).val() + "</div>"
+                    );
+                    
+                    // Update tags on the canvas
+                    // window.setTimeout(updateTags(), 100);
+                    updateTags();
+                    
+                    // Zoom out animation
+                    li.find("div").addClass("zoom-out");
+                    li.find("div").css("background-color", "rgba(255, 255, 255, 0.75)");
+                    li.find("div").css("-ms-transform", "scale(1)");
+                    li.find("div").css("-webkit-transform", "scale(1)");
+                    li.find("div").css("transform", "scale(1)");
+                    
+                    toggleTextElementOnFocus();
+                });
+            }
+        });
+    }
+    
     /*
     // ================================================
     If the user types a new character in the added idea field, add tag if a term could be found
@@ -962,7 +971,7 @@ $(document).ready(function() {
     });
     
     /* ================================================
-    The user clicks on the "Tag selected term" link
+    If the user clicks on the "Tag selected term" link
     ================================================= */
     
     // Declaration
@@ -1005,7 +1014,7 @@ $(document).ready(function() {
     });
     
     /* ================================================
-        Serialize Form to JSON
+    Serialize Form to JSON
     ================================================= */
     
     $.fn.serializeObject = function() {