Constraints on Try This Canvas

canvas/css/canvas.css

@@ -1114,16 +1114,33 @@ div.card {
     padding-left: 5px;
     padding-right: 5px;
 }
-.share_canvas, .pdf_exp, .publish_canvas {
+.login-to-save, .share_canvas, .pdf_exp, .publish_canvas {
     border: none;
     border-radius: 0.5em;
     padding: 1em 0;
     width: 60%;
     outline: none;
 }
-.share_canvas:hover, .pdf_exp:hover, .publish_canvas:hover {
+.login-to-save:hover, .share_canvas:hover, .pdf_exp:hover, .publish_canvas:hover {
     opacity: 0.75;
 }
+.login-to-save {
+    display: block;
+    padding: 1em;
+    color: rgb(51, 51, 51);
+    border: none;
+    border-radius: 0.5em;
+    padding: 1em 0;
+    width: 60%;
+    text-decoration: none;
+    outline: none;
+    margin: 1em auto 0 auto;
+    background-color: #a67de0;
+}
+.login-to-save:hover {
+    text-decoration: none;
+    color: rgb(51, 51, 51);
+}
 .pdf_exp:hover {
     text-decoration: none !important;
 }
@@ -1141,18 +1158,6 @@ div.card {
     display: none; /* Default (Published canvases) */
 }
 /* The sign up or login to save link for unregistered users */
-a.login-to-save {
-    display: block;
-    padding: 1em;
-    color: #444;
-    border: none;
-    border-radius: 0.5em;
-    padding: 1em 0;
-    width: 60%;
-    outline: none;
-    margin: 1em auto 0 auto;
-    background-color: #aed581;
-}
 /* The save canvas PHP under the save/export buttons */
 p#save-canvas {
     margin-bottom: 16px;

canvas/index.php

@@ -61,14 +61,12 @@
                     <input class="proj_date" name="field_00[]" type="hidden" />
                     <!-- Collaborators -->
                     <div class="col-md-3" id="collaborators-container">
-                        <?php if(!empty($name)) { ?>
                         <!-- Bootstrap dropdown component -->
                         <div class="dropdown" id="collaborators">
                             <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1">
                                 <img src="../icon/collaborators.svg" alt="collaborators" /><span>Collaborators (1 active)</span>
                             </button>
                         </div>
-                        <?php } ?>
                     </div>
                     <!-- Log in -->
                     <div class="col-md-3" id="user-profile-container">

canvas/js/canvas.js

@@ -118,6 +118,16 @@ $(document).ready(function() {
         $("button.publish_canvas").show();
     }
     
+    /* ================================================
+    If the user is using Try Online, show the Collaborators button
+    ================================================= */
+    
+    // If the user isn't logged in
+    if(username === "") {
+        $("div#collaborators-container").show();
+        $("div#collaborators-container").css("right", "50px");
+    }
+    
     /* ================================================
     Generate generic ID
     ================================================= */
@@ -322,18 +332,27 @@ $(document).ready(function() {
     
     // If the user clicks on the "Collaborators" button, show the collaborators window
     $("div#collaborators button").on("click", function() {
-        // Show the collaborators window
-        $("div#shadow").css("display", "block");
-        $("div#collaborators-window").css("display", "block");
-        
-        // In 1.5 seconds
-        window.setTimeout(function() {
-            // If the canvas is new
-            if(canvasIsNew === true) {
-                // Save the canvas
-                prepareSaveCanvas();
-            }
-        }, 1500);
+        // If the user is logged in
+        if($("input[name='username']").val() != "") {
+            // Show the collaborators window
+            $("div#shadow").css("display", "block");
+            $("div#collaborators-window").css("display", "block");
+            
+            // In 1.5 seconds
+            window.setTimeout(function() {
+                // If the canvas is new
+                if(canvasIsNew === true) {
+                    // Save the canvas
+                    prepareSaveCanvas();
+                }
+            }, 1500);
+        }
+        // If the user isn't logged in
+        else {
+            // Show a dialog
+            $("div#shadow").css("display", "block");
+            $("div#dialog-log-in").css("display", "block");
+        }
     });
     
     // Close the collaborators window
@@ -1299,12 +1318,13 @@ $(document).ready(function() {
     
     // If the user clicks on a tag
     function showTagWindowOnTagClick() {
-        $("span.tag-with-badge-effect").on("click", function() {
-            // Declarations
-            tag = $(this).text();
-            
+        $("span.tag-with-badge-effect").on("click", function() {            
             // If the user is logged in
             if($("input[name='username']").val() != "") {
+                // Declarations
+                tag = $(this).text();
+                
+                // Remember that the tag window is open
                 tagWindowIsOpen = true;
                 
                 // Show the tag window
@@ -2349,17 +2369,26 @@ $(document).ready(function() {
     
     // If the user clicks on the "Comment" icon, show the comments window
     $(".card").on("click", "span.comment", function() {
-        // Show the move window
-        $("div#shadow").css("display", "block");
-        $("div#comments-window").css("display", "block");
-        
-        // Remember the ID of the idea
-        currentCommentsId = $(this).parent().find("div").prop("id");
-        
-        // Get commments
-        getComments();
-        
-        updateRemainingCharacters();
+        // If the user is logged in
+        if($("input[name='username']").val() != "") {
+            // Show the move window
+            $("div#shadow").css("display", "block");
+            $("div#comments-window").css("display", "block");
+            
+            // Remember the ID of the idea
+            currentCommentsId = $(this).parent().find("div").prop("id");
+            
+            // Get commments
+            getComments();
+            
+            updateRemainingCharacters();
+        }
+        // If the user isn't logged in
+        else {
+            // Show a dialog
+            $("div#shadow").css("display", "block");
+            $("div#dialog-log-in").css("display", "block");
+        }
     });
     
     // Close the comments window
@@ -3061,28 +3090,37 @@ $(document).ready(function() {
         // Prevent default operation
         event.preventDefault();
         
-        // AJAX
-        $.ajax({
-            type: "POST",
-            url: "php/toggle-public.php",
-            dataType: "TEXT",
-            data: {
-                "canvas_id": canvasId
-            },
-            timeout: 5000,
-            success: function(returnData) {
-                if(returnData === "0") {
-                    $("button.publish_canvas").text("Publish for viewing/commenting");
-                }
-                else if(returnData === "1") {
-                    $("button.publish_canvas").text("Unpublish for viewing/commenting");
+        // If the user is logged in
+        if($("input[name='username']").val() != "") {
+            // AJAX
+            $.ajax({
+                type: "POST",
+                url: "php/toggle-public.php",
+                dataType: "TEXT",
+                data: {
+                    "canvas_id": canvasId
+                },
+                timeout: 5000,
+                success: function(returnData) {
+                    if(returnData === "0") {
+                        $("button.publish_canvas").text("Publish for viewing/commenting");
+                    }
+                    else if(returnData === "1") {
+                        $("button.publish_canvas").text("Unpublish for viewing/commenting");
+                    }
+                },
+                error: function(xhr) {
+                    console.log(xhr.statusText);
                 }
-            },
-            error: function(xhr) {
-                console.log(xhr.statusText);
-            }
-        });
-        
+            });
+        }
+        // If the user isn't logged in
+        else {
+            // Show a dialog
+            $("div#shadow").css("display", "block");
+            $("div#dialog-log-in").css("display", "block");
+        }
+            
         return false;
     });
     

php/config.php

@@ -1,14 +1,14 @@
 <?php
-/* Define the MySQL configuration variables */
-
-//$db_host = 'kdeg-vm-14.scss.tcd.ie'; // DEVELOPMENT
-$db_host = 'localhost'; // PRODUCTION
-$db_username = 'ethics';
-$db_password = 'Adapt2016';
-$db_port = '3306';
-$db_name = 'ethicscanvas';
-
-$mail_user = 'ethicscanvas@gmail.com'; // Gmail username
-$mail_password = 'Ethics2016'; // Gmail password
-$mail_from_name = 'Ethics Canvas'; // Name of email sender
+    /* Define the MySQL configuration variables */
+    
+    //$db_host = 'kdeg-vm-14.scss.tcd.ie'; // DEVELOPMENT
+    $db_host = 'localhost'; // PRODUCTION
+    $db_username = 'ethics';
+    $db_password = 'Adapt2016';
+    $db_port = '3306';
+    $db_name = 'ethicscanvas';
+    
+    $mail_user = 'ethicscanvas@gmail.com'; // Gmail username
+    $mail_password = 'Ethics2016'; // Gmail password
+    $mail_from_name = 'Ethics Canvas'; // Name of email sender
 ?>