Tag-related bug fixes

canvas/js/canvas.js

@@ -11,7 +11,7 @@ $(document).ready(function() {
     document.getElementById("7-5-col-layout").style.MozColumnCount = "7";
     document.getElementById("2-col-layout").style.MozColumnCount = "2";
      */
-    
+        
     // Prevent pressing ENTER on Project Title from submitting the form
     $('.proj_title').keydown(function(event){
         if(event.keyCode == 13) {
@@ -19,7 +19,7 @@ $(document).ready(function() {
             return false;
         }
     });
-        
+    
     /* ================================================
     Rearrange fields numerically if 1 column is displayed
     ================================================= */
@@ -319,49 +319,93 @@ $(document).ready(function() {
          */
     }
     
+    /* ================================================
+    If the user clicks on a tag, show the tag window
+    ================================================= */
+    // If the user clicks on a tag
+    function showTagWindowOnTagClick() {
+        $("a.tag").on("click", function() {                                // Event not triggered...
+            // Declarations
+            tag = $(this).text();
+            
+            // If the user is logged in
+            if($("input[name='username']").val() != "") {
+                // Show the tag window
+                showTagWindow();
+            }
+            else {
+                // Show a dialog
+                $("div#shadow").css("display", "block");
+                $("div#dialog-log-in").css("display", "block");
+            }
+        });
+    }
+    
+    /*
+    // Mouse-enabled devices
+    $("tag").mouseenter(function() {
+        timer = setTimeout(function() {
+            showTagWindow();                                            // showTagWindow needs a parameter!
+        }, 400);
+    }).mouseleave(function() {
+        clearTimeout(timer);
+    });
+    
+    // Touch devices
+    try {
+        document.createEvent("TouchEvent");
+        
+        $("a.tag").on("click", showTagWindow());                     // showTagWindow needs a parameter!
+        
+        return true;
+    }
+    catch(e) {
+        return false;
+    }
+     */
+        
     /* ================================================
     Get the user's tags from the database and apply them on the canvas
     ================================================= */
     
     // Apply tags (Incoming parameter is an array with every tag from the database belonging to the active user)
     function applyTags() {
-        var loopCounter = 0;
-        
-        // For every added item
-        // $("li.added_item textarea").each(function() {
-        $("li.added_item div").each(function() {
-            // Here the selector is retrieving the objects it is supposed to...
+        // Apply tags on the canvas
+        /*
+        IMPORTANT! A timer was needed in order to solve several bugs related to tags not being applied on the canvas.
+        Should this still become an issue later on, try increasing the amount of milliseconds.
+         */
+        window.setTimeout(function() {
+            // Declarations
+            var text;
             
-            // For every tag in the database that belongs to the active user
-            for(t in tags) {
-                // console.log("tags.length: " + tags.length);
-                // console.log("tag: " + tags[loopCounter]);
-                // console.log($(this));
-                
-                // console.log("Now working with " + tags[loopCounter]);
-                
-                // console.log($(this).html());
-                
-                // console.log("The tag " + tags[loopCounter] + " has index '" + tags[loopCounter].indexOf(" ") + "' for ' '");
+            // For every added item
+            // $("li.added_item textarea").each(function() {
+            $("li.added_item div").each(function() {            
+                // Declarations
                 
-                var text = $(this).html();
+                var loopCounter = 0;
                 
-                // If the current tag exists in the textarea
-                if(text.indexOf(tags[loopCounter]) != -1) {
-                    // console.log($(this).html());
-                    
-                    // ... But here the selector only seems to retrieve the first instance
+                // For every tag in the database that belongs to the active user
+                for(t in tags) {                    
+                    text = $(this).text();
                     
-                    // console.log("Inside if!");
+                    // If the current tag exists in the textarea
+                    if(text.indexOf(tags[loopCounter]) != -1) {
+                        // While loop here if we want to apply the tag for every instance of a given term
+                        
+                        // Apply the tag
+                        text = text.replace(tags[loopCounter], "<a class='tag' contenteditable='false'>" + tags[loopCounter] + "</a>");
+                        $(this).html(text);                        
+                    }
                     
-                    // Apply the tag
-                    text = text.replace(tags[loopCounter], "<a class='tag' contenteditable='false'>" + tags[loopCounter] + "</a>");
-                    $(this).html(text);
+                    loopCounter++;
                 }
-                
-                loopCounter++;
-            }
-        });
+            });
+            
+            // Show the tag window on tag click
+            showTagWindowOnTagClick();
+        }, 100);
         
         // Populate "Saved Tags"
         loopCounter = 0;
@@ -407,7 +451,6 @@ $(document).ready(function() {
                     
                     // Apply the tags on the canvas
                     applyTags();
-                    showTagWindowOnTagClick();
                 }
             },
             error: function(xhr) {
@@ -577,7 +620,6 @@ $(document).ready(function() {
                     
                     // Apply the tags on the canvas
                     // applyTags();
-                    // showTagWindowOnTagClick();
                 }
                 else {
                     // If the tag isn't a new tag
@@ -804,6 +846,8 @@ $(document).ready(function() {
                                     // Apply the tag
                                     text = text.replace(tags[loopCounter], "<a class='tag' contenteditable='false'>" + tags[loopCounter] + "</a>");
                                     $(this).html(text);
+                                    
+                                    // Restore caret position           // u78krf3t
                                 }
                             }
                             
@@ -817,7 +861,7 @@ $(document).ready(function() {
     };
     
     /* ----------------------------------------------
-    Limiting the number of characters the user is able to type
+    Limiting the number of characters the user is allowed to type
     ----------------------------------------------- */
     var maxLength = 100;
     
@@ -849,29 +893,21 @@ $(document).ready(function() {
         
         // Limit text on paste
         /*
+        var pastedTextOriginal;
+        
         $("li.added_item div").on("paste", function(event) {
-            var pastedText;
+            pastedTextOriginal = event.originalEvent.clipboardData.getData("Text");
             
-            $("li.added_item div").bind("paste", function(e) {
-                pastedText = e.originalEvent.clipboardData.getData("Text");
-                
-                console.log(pastedText);
-                
-                if($(this).html().length + pastedText >= 100) {
-                    event.preventDefault();
-                }
+            if($(this).html().length + pastedTextOriginal > 100) {
+                console.log("Too long!");
                 
-            });
-            
-            // var text = $(this).html()
-            // var length = text.length;
-            // var newText = text.substring(0, maxLength);
-            
-            // if(length >= maxLength) {
-                // $(this).html(newText);
+                event.preventDefault();
                 
-                // Move the text cursor to the very end
+                // var caretPosition = the text position
+                // Insert the text after caretPosition
             }
+            
+            // return false;
         });
          */
     }
@@ -928,51 +964,6 @@ $(document).ready(function() {
         tag = "";
     });
     
-    /* ================================================
-    If the user clicks on a tag, show the tag window
-    ================================================= */
-    // If the user clicks on a tag
-    function showTagWindowOnTagClick() {
-        $("a.tag").on("click", function() {                                // Event not triggered...
-            // Declarations
-            tag = $(this).text();
-            
-            // If the user is logged in
-            if($("input[name='username']").val() != "") {
-                // Show the tag window
-                showTagWindow();
-            }
-            else {
-                // Show a dialog
-                $("div#shadow").css("display", "block");
-                $("div#dialog-log-in").css("display", "block");
-            }
-        });
-    }
-    
-    /*
-    // Mouse-enabled devices
-    $("tag").mouseenter(function() {
-        timer = setTimeout(function() {
-            showTagWindow();                                            // showTagWindow needs a parameter!
-        }, 400);
-    }).mouseleave(function() {
-        clearTimeout(timer);
-    });
-    
-    // Touch devices
-    try {
-        document.createEvent("TouchEvent");
-        
-        $("a.tag").on("click", showTagWindow());                     // showTagWindow needs a parameter!
-        
-        return true;
-    }
-    catch(e) {
-        return false;
-    }
-     */
-        
     /* ================================================
         Serialize Form to JSON
     ================================================= */
@@ -1235,7 +1226,7 @@ $(document).ready(function() {
         removeTags();
         
         // Get the user's tags from the database and apply them on the canvas
-        getTags();      // Really necessary?
+        getTags();
         
         // Show "Tag selected term" link
         if($(this).parent().parent().prev().prev().children().length > 0) {
@@ -1295,7 +1286,7 @@ $(document).ready(function() {
             removeTags();
             
             // Get the user's tags from the database and apply them on the canvas
-            getTags();      // Really necessary?
+            getTags();
             
             // Show "Tag selected term" link
             if($(this).parent().parent().parent().prev().prev().children().length > 0) {