Bug fixes

Tag-related bug fix + Save and focus out added idea while editing on Enter press

canvas/js/canvas.js

@@ -334,25 +334,22 @@ $(document).ready(function() {
         Should this still become an issue later on, try increasing the amount of milliseconds.
          */
         window.setTimeout(function() {
-            // Declarations
-            var loopCounter = 0;
-            var text;
-            
             // For every added item
             $("li.added_item .expandable").each(function() {            
                 // Declarations
-                text = $(this).text();
+                // var instanceCounter;
+                var loopCounter = 0;
+                var text = $(this).text();
                 
                 // For every tag in the database that belongs to the active user
                 for(t in tags) {
-                    console.log(loopCounter);
-                    // 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 (j49b3e4a)
-                        
-                        // Apply the tag
+                    // Apply the tag for every instance of the current term
+                    // instanceCounter = text.indexOf(tags[loopCounter]);
+                    
+                    // while(instanceCounter > -1) {
                         text = text.replace(tags[loopCounter], "<a class='tag' contenteditable='false'>" + tags[loopCounter] + "</a>");
-                    }
+                        // instanceCounter = text.indexOf(tags[loopCounter], instanceCounter + 1);
+                    // }
                     
                     loopCounter++;
                 }
@@ -364,39 +361,6 @@ $(document).ready(function() {
             showTagWindowOnTagClick();
         }, 100);
         
-        /*
-        window.setTimeout(function() {
-            // Declarations
-            var text;
-            
-            // For every added item
-            // $("li.added_item textarea").each(function() {
-            $("li.added_item div").each(function() {            
-                // Declarations
-                var loopCounter = 0;
-                
-                // For every tag in the database that belongs to the active user
-                for(t in tags) {                    
-                    text = $(this).text();
-                    
-                    // 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);                        
-                    }
-                    
-                    loopCounter++;
-                }
-            });
-            
-            // Show the tag window on tag click
-            showTagWindowOnTagClick();
-        }, 100);
-         */
-        
         // Populate "Saved Tags"
         var loopCounter = 0;
         var savedTags = $("div.saved-tags p");
@@ -813,6 +777,36 @@ $(document).ready(function() {
         return false;
     }
      */
+        
+    /* ================================================
+    Save added idea on Enter press
+    ================================================= */
+    
+    function saveAddedIdeaOnEnterPress(li) {
+        $("li.added_item textarea.expandable").on("keydown", function(event) {
+            if(event.which === 13) {
+                event.preventDefault();
+                
+                // Replace textarea with a div
+                $(this).replaceWith(
+                    "<div class='expandable' 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();
+            }
+        });
+    }
     
     /* ================================================
     Toggle textarea.expandable/div.expandable on edit
@@ -839,10 +833,14 @@ $(document).ready(function() {
                 li.find("textarea").css("-webkit-transform", "scale(1.03)");
                 li.find("textarea").css("transform", "scale(1.03)");
                 
+                // Save added idea on Enter press
+                saveAddedIdeaOnEnterPress(li);
+                
+                // Replace textarea with a div
                 $("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>"
+                        "<div class='expandable' name='" + $(this).attr("name") + "'>" + $(this).val() + "</div>"
                     );
                     
                     // Update tags on the canvas
@@ -1135,13 +1133,13 @@ $(document).ready(function() {
                             
                             itemListHTML +=
                                 // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + key + '">' + itm + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
-                                '<li class="added_item"><div class="expandable" contenteditable="true" name="' + key + '">' + itm + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
+                                '<li class="added_item"><div class="expandable" name="' + key + '">' + itm + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                         });
                     }
                     else { // a single value string
                         itemListHTML +=
                             // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + key + '">' + value + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
-                            '<li class="added_item"><div class="expandable" contenteditable="true" name="' + key + '">' + value + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
+                            '<li class="added_item"><div class="expandable" name="' + key + '">' + value + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>';
                     }
                     /* Append the created list items/textatreas to the right field based on the "key"*/
                     /* the str.substr(start,length)
@@ -1287,7 +1285,7 @@ $(document).ready(function() {
             // The height of the newly added item = the height of the add new idea textarea
             $(this).closest('.card').find('ul.item_list').append(
                 // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + field_attr + '">' + new_item + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
-                '<li class="added_item"><div class="expandable" contenteditable="true" name="' + field_attr + '">' + new_item + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
+                '<li class="added_item"><div class="expandable" name="' + field_attr + '">' + new_item + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
             );
             
             // Fix the heights only after a new item is added
@@ -1333,7 +1331,7 @@ $(document).ready(function() {
         /* The jQuery event.which -->
         Returns which keyboard key was pressed: */
         // if the enter is pressed, event.which === 13
-        if (event.which === 13) {
+        if (event.which === 13 && !$("li.added_item .expandable").is(":focus")) {
             var new_item = $(this).closest('.card').find('.new_item').val();
             var new_item_height = $(this).closest('.card').find('.new_item').height();
             // number of items are in the list
@@ -1351,7 +1349,7 @@ $(document).ready(function() {
                 // The height of the newly added item = the height of the add new idea textarea
                 $(this).closest('.card').find('ul.item_list').append(
                     // '<li class="added_item"><span class="handle glyphicon glyphicon-move"></span><textarea maxlength="100" class="expandable" rows="3" data-limit-rows="true" data-autoresize name="' + field_attr + '">' + new_item + '</textarea><span class="remove glyphicon glyphicon-remove-circle"></span></li>');
-                    '<li class="added_item"><div class="expandable" contenteditable="true" name="' + field_attr + '">' + new_item + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
+                    '<li class="added_item"><div class="expandable" name="' + field_attr + '">' + new_item + '</div><span class="handle glyphicon glyphicon-list"></span><span class="move-up glyphicon glyphicon-chevron-up"></span><span class="move-down glyphicon glyphicon-chevron-down"></span><span class="remove glyphicon glyphicon-remove-circle"></span></li>'
                 );
                 // Fix the heights only after a new item is added
                 // fixHeights();