Move idea to a different category

canvas/css/canvas.css

@@ -473,30 +473,73 @@ div#shadow {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* Tag window */
+/* ----------------------------------------------
+    Move and tag window
+----------------------------------------------- */
 
-div#tag-window {
+div.window {
     position: fixed;
     z-index: 1;
     top: 20%;
-    left: 12.5%;
     border-radius: 10px;
-    padding: 0.75em 1.5em 0.75em 0.75em;
+    padding: 1em 1.5em 1em 1em;
     background-color: rgba(236, 239, 241, 0.95);
-    width: 75%;
     display: none;
-    /* overflow: scroll; */
 }
-div#tag-window button[aria-label="Close"] {
+div.window button.close {
     outline: 0;
+    position: relative;
+    top: -8px;
     font-size: 2.5em;
 }
-div#tag-window h2#tag-description {
+div.window h2 {
     margin: 0 0 0.4em 0;
     font-size: 1.4em;
-    /* font-size: 1em; */
     line-height: 1.5;
 }
+div.window p {
+    font-size: 0.95em;
+}
+
+/* ----------------------------------------------
+    Move window
+----------------------------------------------- */
+
+div#move-window {
+    left: 37.5%;
+    width: 25%;
+}
+div#move-window .move-window-button {
+    background-color: transparent;
+    color: rgb(51, 51, 51);
+    padding: 0.25em 1.2em;
+    border: 0.12em solid rgb(51, 51, 51);
+    border-radius: 0.5em;
+}
+div#move-window .move-window-button:hover {
+    color: #ffffff;
+    border-color: #ffffff;
+}
+div#move-window h2 {
+
+}
+div#move-window ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+/* ----------------------------------------------
+    Tag window
+----------------------------------------------- */
+
+div#tag-window {
+    left: 12.5%;
+    width: 75%;
+}
+/*
+div#tag-window h2#tag-description { 
+}
+ */
 div#tag-window textarea#tag-description {
     font-size: 0.95em;
     outline: none;
@@ -528,21 +571,15 @@ div#tag-window #delete-tag {
 }
 div#tag-window h2.similar-tags {
     margin: 0.95em 0 -0.2em 0;
-    font-size: 1.4em;
-    /* font-size: 1em; */
-    line-height: 1.5;
 }
 div#tag-window p.similar-tags-tag {
     margin: 0.95em 0 0.4em 0;
-    font-size: 0.95em;
 }
 div#tag-window p.similar-tags-description {
     margin: 0;
-    font-size: 0.95em;
 }
 div#tag-window p.similar-tags-description-none {
     margin: 0.25em 0 0 0;
-    font-size: 0.95em;
     display: none;
 }
 div#tag-window p.similar-tags-username {

canvas/index.php

@@ -43,6 +43,9 @@
         <div class="container-fluid">
 
             <form class="canvas-form form" action="mpdf/canvas-pdf.php" method="post" target="_blank">
+                <!-- Username -->
+                <!-- <input type="hidden" name="username" value="<?php echo($email) ?>" /> -->
+                <input type="hidden" name="username" value="dave.lewis@adaptcentre.ie" />
                 <!-- Canvas Form Header -->
                 <div class="form-header row text-center">
                     <div class="col-md-3">
@@ -153,7 +156,6 @@
                                     <span class="intro-toggle-text">Hide description</span>
                                 </button>
                                 -->
-
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
                                 <ul id="field_01" class="item_list sortable connectedList">
@@ -215,7 +217,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_05" class="item_list sortable connectedList">
+                                <ul id="field_03" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -274,7 +276,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_06" class="item_list sortable connectedList">
+                                <ul id="field_04" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -333,7 +335,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_12" class="item_list sortable connectedList">
+                                <ul id="field_09" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -392,7 +394,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_08" class="item_list sortable connectedList">
+                                <ul id="field_05" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -451,7 +453,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_11" class="item_list sortable connectedList">
+                                <ul id="field_06" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -575,7 +577,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_09" class="item_list sortable connectedList">
+                                <ul id="field_07" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -634,7 +636,7 @@
                                 -->
                                 <!-- Item list in the field -->
                                 <!-- The ul id is used in js code to give the right name attribute to the added cards (user input) -->
-                                <ul id="field_10" class="item_list sortable connectedList">
+                                <ul id="field_08" class="item_list sortable connectedList">
                                 </ul>
                                 <!-- The Box With All User input Thing -->
                                 <!-- # Tag selected term link -->
@@ -726,11 +728,63 @@
 
                 </div>
 
-                <!-- Start of tag-window -->
-                <!-- <input type="hidden" name="username" value="<?php echo($email) ?>" /> -->
-                <input type="hidden" name="username" value="dave.lewis@adaptcentre.ie" />
+                <!-- Start of move-window -->
 
-                <div id="tag-window">
+                <div class="window" id="move-window">
+                    <button type="button" class="close" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h2>Move idea</h2>
+                    <ul>
+                        <li>
+                            <a href="#">1.&nbsp;&nbsp;Individuals Affected</a>
+                        </li>
+                        <li>
+                            <a href="#">2.&nbsp;&nbsp;Groups Affected</a>
+                        </li>
+                        <li>
+                            <a href="#">3.&nbsp;&nbsp;Behaviour</a>
+                        </li>
+                        <li>
+                            <a href="#">4.&nbsp;&nbsp;Relations</a>
+                        </li>
+                        <li>
+                            <a href="#">5.&nbsp;&nbsp;Worldviews</a>
+                        </li>
+                        <li>
+                            <a href="#">6.&nbsp;&nbsp;Group Conflicts</a>
+                        </li>
+                        <li>
+                            <a href="#">7.&nbsp;&nbsp;Product or Service Failure</a>
+                        </li>
+                        <li>
+                            <a href="#">8.&nbsp;&nbsp;Problematic Use of Resources</a>
+                        </li>
+                        <li>
+                            <a href="#">9.&nbsp;&nbsp;What can we do?</a>
+                        </li>
+                    </ul>
+                    <!--
+                    <h2 id="tag-description">
+                        My description of this tag
+                    </h2>
+                    <textarea rows="4" cols="50" maxlength="200" id="tag-description">Please enter a description...</textarea><br />
+                    <p class="chars-count">
+                        <span class="chars">200</span>
+                        characters remaining
+                    </p>
+                    <button type="button" class="move-window-button" id="save-tag">Save tag</button>&nbsp;
+                    <button type="button" class="move-window-button" id="delete-tag">Delete tag</button>
+                    <h2 class="similar-tags">Similar tags by other users</h2>
+                    <p class='similar-tags-description-none'>No similar tags could be found!</p>
+                    -->
+                </div>
+                
+                <!-- End of move-window -->
+                
+                <!-- Start of tag-window -->
+                
+                <div class="window" id="tag-window">
                     <button type="button" class="close" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
@@ -744,7 +798,7 @@
                     </p>
                     <button type="button" class="tag-window-button" id="save-tag">Save tag</button>&nbsp;
                     <button type="button" class="tag-window-button" id="delete-tag">Delete tag</button>
-                    <h2 class="similar-tags">Similar tags</h2>
+                    <h2 class="similar-tags">Similar tags by other users</h2>
                     <p class='similar-tags-description-none'>No similar tags could be found!</p>
                 </div>
                 <!-- End of tag-window -->

canvas/js/canvas.js

@@ -468,7 +468,7 @@ $(document).ready(function() {
         $("div#tag-window").css("display", "none");
     }
     
-    // When the user clicks outside the textarea    
+    // Show the tag window
     function showTagWindow() {
         // Show the tag window
         $("div#shadow").css("display", "block");
@@ -544,8 +544,8 @@ $(document).ready(function() {
         tagIsNew = false;
     });
     
-    // When the user clicks on the Close button
-    $("div#tag-window button[aria-label='Close']").on("click", function() {
+    // When the user clicks on the "Close" button
+    $("div#tag-window button.close").on("click", function() {
         // Close the tag window
         closeTagWindow();
     });
@@ -965,7 +965,9 @@ $(document).ready(function() {
         getTags();
         
         // Show "Tag selected term" link
-        $(this).parent().parent().parent().prev().css("display", "block");
+        if($(this).parent().parent().parent().prev().prev().children().length > 0) {
+            $(this).parent().parent().parent().prev().css("display", "block");
+        }
         
         // Fix the heights after importing
         // fixHeights();
@@ -1108,7 +1110,9 @@ $(document).ready(function() {
         getTags();      // Really necessary?
         
         // Show "Tag selected term" link
-        $(this).parent().parent().prev().css("display", "block");
+        if($(this).parent().parent().prev().prev().children().length > 0) {
+            $(this).parent().parent().prev().css("display", "block");
+        }
     });
     
     /* ----------------------------------------------
@@ -1166,10 +1170,128 @@ $(document).ready(function() {
             getTags();      // Really necessary?
             
             // Show "Tag selected term" link
-            $(this).parent().parent().parent().prev().css("display", "block");
+            if($(this).parent().parent().parent().prev().prev().children().length > 0) {
+                $(this).parent().parent().parent().prev().css("display", "block");
+            }
+        }
+    });
+    
+    /* ================================================
+    Moving items
+    ================================================= */
+    
+    // Declarations
+    // var categoryUl = $("div#move-window ul");
+    var categoryDestination;
+    var categoryOrigin;
+    var categoryLis = $("div#move-window ul").html();
+    var ideaLi;
+    var linkLi;
+    var linkText;
+    
+    // Remove the link to the current category, as the idea cannot be moved to its own category where it already is
+    function removeLinkToOriginCategory(text) {        
+        // If the number of the category is between 10-99
+        if(text.substring(6, 7) != "0") {
+            categoryOrigin = text.substring(6, 9) - 1;
         }
+        // If the number of the category is between 0-9
+        else {
+            categoryOrigin = text.substring(7, 9) - 1;
+        }
+        
+        // Remove "a" tag
+        linkLi = $("div#move-window ul li").get(categoryOrigin);
+        linkText = $("div#move-window ul a").get(categoryOrigin).innerHTML;
+        linkLi.innerHTML = linkText;
+    }
+   
+    // When the user clicks on the "Move" icon, show the move window
+    $('.card').on('click', 'span.handle', function() {
+        // Show the move window
+        $("div#shadow").css("display", "block");
+        $("div#move-window").css("display", "block");
+        
+        // Assign the idea that is going to be moved
+        ideaLi = $(this).parent();
+        
+        // Remove the link to the current category, as the idea cannot be moved to its own category where it already is
+        removeLinkToOriginCategory($(this).parent().parent().attr("id"));
+    });
+    
+    // Close the move window
+    function closeMoveWindow() {
+        // Close the move window
+        $("div#shadow").css("display", "none");
+        $("div#move-window").css("display", "none");
+    }
+    
+    // When the user clicks on the "Close" button
+    $("div#move-window button.close").on("click", function() {
+        // Close the move window
+        closeMoveWindow();
     });
     
+    // When the user clicks on a category, move the idea
+    function moveIdeaOnClick() {
+        $("div#move-window ul a").on("click", function() {
+            // If the number of the category is between 10-99
+            if($(this).parent().text().trim().substring(1, 2) != ".") {
+                categoryDestination = $(this).parent().text().trim().substring(0, 2);
+            }
+            // If the number of the category is between 0-9
+            else {
+                categoryDestination = $(this).parent().text().trim().substring(0, 1);
+            }
+            
+            // Move the idea
+            // If the number of the category is between 10-99
+            if(categoryDestination > 9) {
+                $("ul#field_" + categoryDestination).append(ideaLi);
+                // $("ul#field_0" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
+            }
+            // If the number of the category is between 0-9
+            else {
+                $("ul#field_0" + categoryDestination).append(ideaLi);
+                // $("ul#field_0" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
+            }
+            
+            // Close the move window
+            closeMoveWindow();
+            
+            // Restore links in the move window
+            if($("div#move-window li").length > $("div#move-window a").length) {
+                $("div#move-window ul").children().remove()
+                $("div#move-window ul").append(categoryLis);
+                moveIdeaOnClick();
+            }
+            
+            // Hide "Tag selected term" link in the origin category if there are no ideas left
+            if($("ul#field_0" + (categoryOrigin + 1)).children().length === 0) {
+                // If the number of the category is between 10-99
+                if((categoryOrigin + 1) > 9) {
+                    $("ul#field_" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
+                }
+                // If the number of the category is between 0-9
+                else {
+                    $("ul#field_0" + (categoryOrigin + 1)).parent().find("p.tag-selected-term").css("display", "none");
+                }
+            }
+            
+            // Show "Tag selected term" link in the destination category
+            // If the number of the category is between 10-99
+            if((categoryOrigin + 1) > 9) {
+                $("ul#field_" + categoryDestination).parent().find("p.tag-selected-term").css("display", "block");
+            }
+            // If the number of the category is between 0-9
+            else {
+                $("ul#field_0" + categoryDestination).parent().find("p.tag-selected-term").css("display", "block");
+            }
+        });
+    }
+    
+    moveIdeaOnClick();
+    
     /* ================================================
     Deleting items
     ================================================= */
@@ -1177,8 +1299,12 @@ $(document).ready(function() {
     // when the cross beside the textarea is clicked (span.remove)
     // remove that list item
     $('.card').on('click', 'span.remove', function() {
-        $(this).prev().parent().parent().next().css("display", "none");
+        // If there are no ideas left, hide "Tag selected term" link
+        if($(this).prev().parent().parent().children().length === 1) {
+            $(this).prev().parent().parent().next().css("display", "none");
+        }
         
+        // Remove the list item
         $(this).closest('li').remove();
     });