Make lock option work

cemarciano · Jan 24, 2018 · 815d7fb · 815d7fb
1 parent cd7c962
commit 815d7fb
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 65 deletions.
diff --git a/css/flowchart.css b/css/flowchart.css
@@ -134,20 +134,36 @@ html, body {
     user-select: none;
 }
 
-/* Options menu */
+/* Options menu: */
 
-#options-menu {
-	position: relative;
+#options-menu .option {
+	position: absolute;
+	top: 2.2vh;
+	right: 0.8vw;
+	text-align: center;
+	border-radius: 50%;
+    border: 0.08vw solid black;
+	width: 1.85vw;
+	height: 1.85vw;
+	cursor: default;
+    /* Rollover effect: */
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+	/* Image icon positioning: */
+	background-size: 1.85vw 1.85vw;
+	background-position: center;
 }
 
-#options-menu img {
-	cursor: default;
-	position: absolute;
-	width: 2vw;
-	height: 2vw;
+
+#options-menu #help {
+	background-image: url("images/help.png");
+}
+
+#options-menu #lock {
+	top: 3.7vw;
+	background-image: url("images/lock.png");
 }
 
-#lock-wrapper {
-	position: relative;
-	top: 2.3vw;
+.option-marked {
+	background-color: #b1fca4;
 }
diff --git a/css/images/help-hover.png b/css/images/help-hover.png
diff --git a/css/images/help.png b/css/images/help.png
diff --git a/css/images/lock-hover.png b/css/images/lock-hover.png
diff --git a/css/images/lock.png b/css/images/lock.png
diff --git a/css/images/unlock-hover.png b/css/images/unlock-hover.png
diff --git a/css/images/unlock.png b/css/images/unlock.png
diff --git a/flowchart.html b/flowchart.html
@@ -9,7 +9,6 @@
         <script src="js/jquery-3.2.1.min.js"></script>
         <script src="js/nouislider.min.js"></script>
         <script src="js/database.js"></script>
-		<script src="js/options.js"></script>
         <script src="js/flowchart.js"></script>
 	</head>
 	<body>
@@ -18,15 +17,8 @@
         </div>
 
 		<div id="options-menu">
-			<a id="help-wrapper" target="_blank" href="https://github.com/carloseduardov8/Interactive-Flowchart/wiki">
-				<img id="help-hover" src="css/images/help-hover.png">
-				<img id="help" src="css/images/help.png">
-			</a>
-
-			<a id="lock-wrapper" target="_blank" href="https://github.com/carloseduardov8/Interactive-Flowchart/wiki">
-				<img id="lock-hover" src="css/images/lock-hover.png">
-				<img id="lock" src="css/images/lock.png">
-			</a>
+	        <a id="help" class="option incomplete-course" target="_blank" href="https://github.com/carloseduardov8/Interactive-Flowchart/wiki"></a>
+			<a id="lock" class="option"></a>
 		</div>
 
 	</body>

diff --git a/js/flowchart.js b/js/flowchart.js
@@ -1,6 +1,7 @@
 
 var openTooltips = [];          // (internal) Array of IDs of currently active tooltips
 var timer = null;               // (internal) Timer to keep track of "click and hold" or just "simple click"
+var editLock = "false";			// (internal) Variable to hold if course selection is locked due to options menu
 var pressAndHoldTime = 500;     // Period of time for the program to consider a touch/click as a "click and hold"
 
 /* Initialization function: */
@@ -9,6 +10,9 @@ var pressAndHoldTime = 500;     // Period of time for the program to consider a
      // Loads data for course completion:
      checkCookies();
 
+	 // Adds functionality to buttons in the options menu:
+	 handleOptionsMenu();
+
      // Adds click event to close all tooltips:
      $("body").click(function(e) {
 
@@ -77,10 +81,10 @@ var pressAndHoldTime = 500;     // Period of time for the program to consider a
             rectangle.on(mouseDown, function(e){
                 // Starts the timer:
                 timer = setTimeout(function(){ onLongTouch(i) }, pressAndHoldTime);
-            // Impedes click event from being triggered by descendants:
-            }).on('click', 'div', function(e) {
-                e.stopPropagation();
-            });
+	            // Impedes click event from being triggered by descendants:
+	            }).on('click', 'div', function(e) {
+	                e.stopPropagation();
+	            });
             // Event for when click is released:
             rectangle.on(mouseUp, function(e){
                 // If this passes, click wasn't a hold:
@@ -89,12 +93,15 @@ var pressAndHoldTime = 500;     // Period of time for the program to consider a
                     clearTimeout(timer);
                     // Signals there was no "click and hold":
                     timer = null;
-                    // Decides to assign a tooltip or a toggle event:
-                    if (courses[i].step != undefined){
-                        courseTooltip(i);
-                    } else {
-                        courseToggle(i);
-                    }
+					// If editting is unlocked (by option in menu):
+					if (editLock != "true"){
+	                    // Decides to assign a tooltip or a toggle event:
+	                    if (courses[i].step != undefined){
+	                        courseTooltip(i);
+	                    } else {
+	                        courseToggle(i);
+	                    }
+					}
                 }
             // Impedes click event from being triggered by descendants:
             }).on('click', 'div', function(e) {
@@ -370,6 +377,43 @@ function verifySemester(index){
 }
 
 
+// Adds functionality to buttons in the options menu:
+function handleOptionsMenu(){
+
+	// Checks if device has touch or mouse:
+	var mouseDown = "touchstart";
+	if (document.ontouchstart !== null){
+		mouseDown = "mousedown";
+	}
+
+	// Lock option icon:
+	var lockButton = $("#lock");
+
+	// Colors the lock button according to cookie preset:
+	if (editLock == "true"){
+		lockButton.addClass("complete-course");
+	} else {
+		lockButton.addClass("incomplete-course");
+	}
+
+	// When clicking lock option:
+	lockButton.on(mouseDown, function(){
+		// If option is already marked:
+		if (lockButton.hasClass("incomplete-course")){
+			// Mark option:
+	        lockButton.removeClass("incomplete-course").addClass("complete-course");
+			editLock = "true";
+		} else {
+			// Unmarks option:
+			lockButton.removeClass("complete-course").addClass("incomplete-course");
+			editLock = "false";
+		}
+		// Saves the cookie:
+		setCookie("editLock", editLock);
+		console.log(getCookie("editLock"));
+	});
+}
+
 
 /* COOKIE FUNCTIONS */
 
@@ -381,6 +425,8 @@ function checkCookies() {
     if (check == "") {
         // Sets the first visit as false:
         setCookie("newcomer8", "false");
+		// Sets the edit-lock as false:
+        setCookie("editLock", "false");
         // Creates a cookie for each course:
         for (var i in courses){
             setCookie(i, "0");
@@ -391,6 +437,8 @@ function checkCookies() {
         for (var i in courses){
             courses[i].status = getCookie(i);
         }
+		editLock = getCookie("editLock");
+		console.log(editLock);
     }
 }
 

diff --git a/js/options.js b/js/options.js