Toggle textarea.expandable/div.expandable

canvas/css/canvas.css

@@ -285,8 +285,7 @@ li.added_item {
     /* cursor: move; */
     cursor: text;
 }
-/* ul.item_list textarea { */
-ul.item_list div {
+ul.item_list .expandable {
     font-size: 0.95em;
     margin-left: 14px;
     margin-bottom: 5px;
@@ -302,6 +301,92 @@ ul.item_list div {
     overflow: hidden;
 }
 
+/* ----------------------------------------------
+Zoom animation
+----------------------------------------------- */
+
+.zoom-in {
+    -webkit-animation-name: zoom-in;    /* Safari 4.0-8.0 */
+    -webkit-animation-duration: 0.25s;  /* Safari 4.0-8.0 */
+    animation-name: zoom-in;
+    animation-duration: 0.25s;
+    transform: scale(1.05);
+    background-color: rgba(255, 255, 255, 1);
+}
+
+/* Safari 4.0-8.0 */
+@-webkit-keyframes zoom-in {
+    from {
+        -ms-transform: scale(1);        /* IE 9 */
+        -webkit-transform: scale(1);    /* Safari */
+        transform: scale(1);
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+    to {
+        -ms-transform: scale(1.05);      /* IE 9 */
+        -webkit-transform: scale(1.05);  /* Safari */
+        transform: scale(1.05);
+        background-color: rgba(255, 255, 255, 1);
+    }
+}
+
+/* Standard */
+@keyframes zoom-in {
+    from {
+        -ms-transform: scale(1);        /* IE 9 */
+        -webkit-transform: scale(1);    /* Safari */
+        transform: scale(1);                    
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+    to {
+        -ms-transform: scale(1.05);      /* IE 9 */
+        -webkit-transform: scale(1.05);  /* Safari */
+        transform: scale(1.05);
+        background-color: rgba(255, 255, 255, 1);
+    }
+}
+
+.zoom-out {
+    -webkit-animation-name: zoom-out;   /* Safari 4.0-8.0 */
+    -webkit-animation-duration: 0.25s;  /* Safari 4.0-8.0 */
+    animation-name: zoom-out;
+    animation-duration: 0.25s;
+    transform: scale(1);
+    background-color: rgba(255, 255, 255, 0.6);
+}
+
+/* Safari 4.0-8.0 */
+@-webkit-keyframes zoom-out {
+    from {
+        -ms-transform: scale(1);        /* IE 9 */
+        -webkit-transform: scale(1);    /* Safari */
+        transform: scale(1);
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+    to {
+        -ms-transform: scale(1.05);      /* IE 9 */
+        -webkit-transform: scale(1.05);  /* Safari */
+        transform: scale(1.05);
+        background-color: rgba(255, 255, 255, 1);
+    }
+}
+
+/* Standard */
+@keyframes zoom-out {
+    from {
+        -ms-transform: scale(1);        /* IE 9 */
+        -webkit-transform: scale(1);    /* Safari */
+        transform: scale(1);
+        background-color: rgba(255, 255, 255, 0.6);
+    }
+    to {
+        -ms-transform: scale(1.05);      /* IE 9 */
+        -webkit-transform: scale(1.05);  /* Safari */
+        transform: scale(1.05);
+        background-color: rgba(255, 255, 255, 1);
+    }
+}
+
 /* ----------------------------------------------
    List item handles: Bootstrap Glyphicon
 ----------------------------------------------- */
@@ -392,7 +477,6 @@ a.add-idea {
 
 /* Textarea of a new item input */
 
-/* textarea.new_item { */
 .new_item {
     width: 90%;
     border: 1px solid #ffffff;
@@ -421,7 +505,6 @@ li.added_item span {
     display: inline;
     margin-top: 5em;
 }
-/* textarea.expandable { */
 .expandable {
     box-sizing: border-box;
     /* remove the user resizing for the text fields */
@@ -869,8 +952,7 @@ div.dialog-content {
         min-height: 250px;
     }
     /* Adjusting textarea heights */
-    /* .added_item textarea { */
-    .added_item div {
+    .added_item .expandable {
         height: 8em;
     }
     /* Dialog */
@@ -1042,8 +1124,7 @@ div.dialog-content {
         min-height: 460px;
     }
     /* Adjusting textarea heights */
-    /* .added_item textarea { */
-    .added_item div {
+    .added_item .expandable {
         height: 8em;
     }
     /* Dialog */
@@ -1184,8 +1265,7 @@ div.dialog-content {
 }
 @media (min-width: 935px) and (max-width: 1153px) {
     /* Adjusting textarea heights */
-    /* .added_item textarea { */
-    .added_item div {
+    .added_item .expandable {
         height: 8em;
     }
 }
@@ -1245,8 +1325,7 @@ div.dialog-content {
 }
 @media (min-width: 1052px) and (max-width: 1153px) {
     /* Adjusting textarea heights */
-    /* .added_item textarea { */
-    .added_item div {
+    .added_item .expandable {
         height: 8em;
     }
     .new_item {}
@@ -1272,8 +1351,7 @@ div.dialog-content {
 }
 @media (min-width: 1154px) and (max-width: 1702px) {
     /* Adjusting textarea heights */
-    /* .added_item textarea { */
-    .added_item div {
+    .added_item .expandable {
         height: 8.5em;
     }
     .new_item {}

canvas/js/canvas.js

@@ -128,7 +128,7 @@ $(document).ready(function() {
         $("div.jump-to").removeClass("jump-to-toggle");
         $("div.jump-to-list").removeClass("jump-to-list-toggle");
         $("img.jump-to-img").removeClass("jump-to-img-toggle");
-
+        
         // If the user clicks on a link and scrolls up the page, toggle list
         $("div.jump-to-list").show();
         hasScrolledDown = false;
@@ -261,7 +261,7 @@ $(document).ready(function() {
                 tags = returnData;
                 
                 // For every added item
-                $("li.added_item div").each(function() {                    
+                $("li.added_item .expandable").each(function() {                    
                     var thisDiv = $(this);                      // Delete the declaration (because it's ugly!)
                     
                     // For every tag in the database that belongs to the active user
@@ -293,7 +293,7 @@ $(document).ready(function() {
         var loopCounter = 0;
         
         // For every added item
-        $("li.added_item div").each(function() {                    
+        $("li.added_item .expandable").each(function() {                    
             var thisDiv = $(this);                      // Delete the declaration (because it's ugly)
             
             // For every tag that belongs to the active user
@@ -319,57 +319,12 @@ $(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() {
+    function updateTags() {
         // 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.
@@ -380,8 +335,7 @@ $(document).ready(function() {
             var text;
             
             // For every added item
-            // $("li.added_item textarea").each(function() {
-            $("li.added_item div").each(function() {            
+            $("li.added_item .expandable").each(function() {            
                 // Declarations
                 
                 var loopCounter = 0;
@@ -449,8 +403,8 @@ $(document).ready(function() {
                         return a.toLowerCase().localeCompare(b.toLowerCase())
                     });
                     
-                    // Apply the tags on the canvas
-                    applyTags();
+                    // Update tags on the canvas
+                    updateTags();
                 }
             },
             error: function(xhr) {
@@ -459,6 +413,44 @@ $(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.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");
+                
+                toggleTextElementOnFocus();
+            });
+        });
+    }
+    
     /* ================================================
     Load tags if the user is logged in
     ================================================= */
@@ -618,8 +610,8 @@ $(document).ready(function() {
                     $("div#tag-window h2.similar-tags").after(htmlToAppend);
                     $("p.similar-tags-description-none").css("display", "none");
                     
-                    // Apply the tags on the canvas
-                    // applyTags();
+                    // Update tags on the canvas
+                    // updateTags();
                 }
                 else {
                     // If the tag isn't a new tag
@@ -781,15 +773,62 @@ $(document).ready(function() {
     });
     
     /* ================================================
-    If the user types a new character in the added idea field, add tag if a term could be found
+    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() {
+            // 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;
+    }
+     */
+    
+    /*
+    // ================================================
+    If the user types a new character in the added idea field, add tag if a term could be found
+    ================================================= //
+    
     // 8an33j24
     
     function applyTagOnTypeMatch() {
-        $("li.added_item div").on("focusin", function() {
+        $("li.added_item .expandable").on("focusin", function() {
             // If the user presses a key in the description textarea
-            $("li.added_item div").on("keyup", function() {
+            $("li.added_item .expandable").on("keyup", function() {
                 if(event.which !== 9  &&    // Tab
                    event.which !== 16 &&    // Shift
                    event.which !== 37 &&    // Left
@@ -807,11 +846,9 @@ $(document).ready(function() {
                     
                     // Fix the bug that triggers the event twice
                     if(!bugCounter > 0) {
-                        /*
-                        console.log("tagTextHits: " + tagTextHits);
-                        console.log("tagLinkHits: " + tagLinkHits);
-                         */
-                            
+                        // console.log("tagTextHits: " + tagTextHits);
+                        // console.log("tagLinkHits: " + tagLinkHits);
+                        
                         // For every tag that belongs to the active user
                         for(t in tags) {
                             if($(this).html().indexOf(tags[loopCounter]) != -1) {                                
@@ -859,6 +896,7 @@ $(document).ready(function() {
             });
         });
     };
+     */
     
     /* ----------------------------------------------
     Limiting the number of characters the user is allowed to type
@@ -874,7 +912,7 @@ $(document).ready(function() {
     
     function limitLengthOnInput() {        
         // Limit text on key press
-        $("li.added_item div").on("keypress", function(event) {
+        $("li.added_item .expandable").on("keypress", function(event) {
             // Declarations
             var numberOfTags = $(this).children().filter("a").length;
             var textLength = $(this).html().length;
@@ -895,7 +933,7 @@ $(document).ready(function() {
         /*
         var pastedTextOriginal;
         
-        $("li.added_item div").on("paste", function(event) {
+        $("li.added_item .expandable").on("paste", function(event) {
             pastedTextOriginal = event.originalEvent.clipboardData.getData("Text");
             
             if($(this).html().length + pastedTextOriginal > 100) {
@@ -934,7 +972,7 @@ $(document).ready(function() {
     // Update the tag variable
     document.onselectionchange = function() {        
         // if($("textarea").is(":focus")) {
-        if($("li.added_item div").is(":focus")) {                   // This is nicer: $("li.added_item div").on("focusin", function() {
+        if($("li.added_item .expandable").is(":focus")) {
             selection = window.getSelection().toString();
             tag = selection.trim();
         }
@@ -958,8 +996,7 @@ $(document).ready(function() {
     });
         
     // If the user moves the focus from the added idea, reset variables
-    // $("li.added_item textarea").on("focusout", function() {
-    $("li.added_item div").on("focusout", function() {
+    $("li.added_item .expandable").on("focusout", function() {
         selection = "";
         tag = "";
     });
@@ -1054,13 +1091,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" name="' + key + '" contenteditable="true">' + 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" 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>';
                         });
                     }
                     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" name="' + key + '" contenteditable="true">' + 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" 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>';
                     }
                     /* Append the created list items/textatreas to the right field based on the "key"*/
                     /* the str.substr(start,length)
@@ -1080,6 +1117,9 @@ $(document).ready(function() {
             
         });
         
+        // Toggle textarea.expandable/div.expandable on edit
+        toggleTextElementOnFocus();
+        
         // Get the user's tags from the database and apply them on the canvas
         getTags();
         
@@ -1203,7 +1243,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" name="' + field_attr + '" contenteditable="true">' + 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" 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>'
             );
             
             // Fix the heights only after a new item is added
@@ -1220,7 +1260,10 @@ $(document).ready(function() {
         limitLengthOnInput();
         
         // Apply event listener to the added idea handling the application of tags should the user writes one of the terms in it
-        applyTagOnTypeMatch();
+        // applyTagOnTypeMatch();
+        
+        // Toggle textarea.expandable/div.expandable on edit
+        toggleTextElementOnFocus();
         
         // Remove all tags from all fields
         removeTags();
@@ -1264,7 +1307,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" name="' + field_attr + '" contenteditable="true">' + 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" 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>'
                 );
                 // Fix the heights only after a new item is added
                 // fixHeights();
@@ -1280,7 +1323,10 @@ $(document).ready(function() {
             limitLengthOnInput();
             
             // Apply event listener to the added idea handling the application of tags should the user writes one of the terms in it
-            applyTagOnTypeMatch();
+            // applyTagOnTypeMatch();
+            
+            // Toggle textarea.expandable/div.expandable on edit
+            toggleTextElementOnFocus();
             
             // Remove all tags from all fields
             removeTags();
@@ -1502,7 +1548,7 @@ $(document).ready(function() {
             //$(selector).attr(attribute,value)
             var fieldAttr = $(this).closest('ul.item_list').attr('id');
             // $(this).find('textarea').attr('name', fieldAttr + '[]');
-            $(this).find('li.added_item div').attr('name', fieldAttr + '[]');
+            $(this).find('li.added_item .expandable').attr('name', fieldAttr + '[]');
         });
         
     });