Commit: 8afedfb913f32e536b0cc14526f7f8f518d25e70 - devitnis-timeline (hg)

Commit MetaInfo

• Revision: 8afedfb913f32e536b0cc14526f7f8f518d25e70 (tree)
• Time: 2020-01-26 05:37:06
• Author: Capsia Tech <cmsuser3754@zoho...>
• Commiter: Capsia Tech

Log Message

Code Decluttering

Change Summary

• modified: js/dataloader.js
• modified: js/svg-animator.js
• add: js/dataloader.js~
• add: js/svg-animator.js~

Incremental Difference

diff -r 2f0a54c31d10 -r 8afedfb913f3 js/dataloader.js
--- a/js/dataloader.js	Fri Jan 24 18:07:51 2020 +0100
+++ b/js/dataloader.js	Sat Jan 25 21:37:06 2020 +0100
@@ -7,9 +7,8 @@
 		svg_block.style.width = width + "px";
 		svg_block.style.height = height + "px";
 	}
-	var posArr = [[0.08, 0.5],[0.16, 0.5], [0.24, 0.5], [0.32, 0.5], [0.40, 0.5], [0.48, 0.5], [0.56, 0.5]];
 	sizing();
-	res = initSVG(posArr);
+	res = initSVG();
 	function runRes() {
 		res(window.innerWidth, window.innerHeight);
 		sizing();

diff -r 2f0a54c31d10 -r 8afedfb913f3 js/dataloader.js~
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/dataloader.js~	Sat Jan 25 21:37:06 2020 +0100
@@ -0,0 +1,18 @@
+window.onload = setSizes;
+function setSizes() {
+	function sizing() {
+		var height = window.innerHeight,
+		width = window.innerWidth,
+		svg_block = document.getElementById("svg");
+		svg_block.style.width = width + "px";
+		svg_block.style.height = height + "px";
+	}
+	var posArr = [[0.08, 0.5],[0.16, 0.5], [0.24, 0.5], [0.32, 0.5], [0.40, 0.5], [0.48, 0.5], [0.56, 0.5]];
+	sizing();
+	res = initSVG(posArr);
+	function runRes() {
+		res(window.innerWidth, window.innerHeight);
+		sizing();
+	}
+	$(window).resize(runRes);
+}

diff -r 2f0a54c31d10 -r 8afedfb913f3 js/svg-animator.js
--- a/js/svg-animator.js	Fri Jan 24 18:07:51 2020 +0100
+++ b/js/svg-animator.js	Sat Jan 25 21:37:06 2020 +0100
@@ -6,46 +6,41 @@
 Riccardo Riccio
 Simon Tomsič*/
 
-function initSVG(posArr) { // Snap.SVG.JS needs to be started on load
+function initSVG() { // Snap.SVG.JS needs to be started on load
 // Starting Snap SVG, basic objects and variables. To change discs positions use posArr.
 // Global setup
 	document.getElementById("overlay").style.visibility = "hidden";
+	window.nowFull = -1;
 	var height = window.innerHeight,
 	width = window.innerWidth,
+	fontSize = parseFloat(getComputedStyle(document.body).fontSize)*0.6,
+	dates = [2012, 2015, 2016, 2018, 2019],
+	posArr = [],
+
 	s = Snap("#svg"), // set element to draw in
 // Start drawing
+	dateLine = s.line(0, height/2, width, height/2),
 	discs = s.group(), // group of all circles
-	nums = s.group(),
-	rect = s.rect(0,0,width,height);
-	if (width/height > 1.05) {
-		var bigCircle = s.circle(0, height/2, height/2);
-	} else {
-		var bigCircle = s.circle(0, width/3, width/3);
+	nums = s.group();
+
+	for (i = 1; i <= dates.length; i++ ) {
+		posArr.push([0.08*i, 0.5]);
 	}
+
 	function SVGsizes(width, height) {
-		if (width/height > 1.05) {
-			bigCircle.attr({
-				r: height/2,
-				cy: height/2
-			});
-		} else {
-			bigCircle.attr({
-				r: width/3,
-				cy: width/3
-			});
-		}
-		rect.attr({
-			width: width,
-			height: height
+		dateLine.attr({
+			x2: width,
+			y1: height / 2,
+			y2: height / 2
 		});
 		for (i = 0; i < posArr.length; i++) {
-			discs.select("circle:nth-child(" + (i+1) + ")").attr({
+			discs[i].attr({
 				cx: width*posArr[i][0],
 				cy: height*posArr[i][1]
 			});
-			nums.select("text:nth-child(" + (i+1) + ")").attr({
-				x: (width*posArr[i][0])-7,
-				y: (height*posArr[i][1])+5
+			nums[i].attr({
+				x: (width*posArr[i][0])-32,
+				y: (height*posArr[i][1])+50
 			});
 		}
 	}
@@ -58,62 +53,45 @@
 	}
 	//console.log(initSVG.SVGsizes);
 // Setting default styles for rectangle and discs
-	rect.attr({
-		fill: " #383c4a",
-		visibility: "hidden",
-		opacity: 0
-	});
-	bigCircle.attr({
-		fill: "#4e9a06",
-		stroke: "#ca64ff",
-		strokeWidth: 20,
-		visibility: "hidden"
-	});
 	discs.attr({
 		fill: "#4e9a06",
 		stroke: "#ca64ff",
 		strokeWidth: 5
 	});
+	dateLine.attr({
+		stroke: "#333",
+		strokeWidth: 30
+	});
 	nums.attr({
-		pointerEvents: "none"
+		fontSize: "1.8em",
+		fontWeight: "bold"
+//		pointerEvents: "none"
 	});
 // Initialize circles
 	for (i = 0; i < posArr.length; i++) {
 		discs.add(s.circle(width*posArr[i][0], height*posArr[i][1], 20)); // Create and add circles to discs.
-		nums.add(s.text((width*posArr[i][0])-7, (height*posArr[i][1])+5, addZyro(i)));
-		discs.select("circle:nth-child(" + (i+1) + ")").click( function() {
-//			console.log(this); //Enable this for debug
-			var save = [this.node.attributes.r.nodeValue, this.node.attributes.cx.nodeValue, this.node.attributes.cy.nodeValue],
-			reback = this; // Save elements for later
-//			displayInfo(posArr, save);
-			nums.attr({visibility: "hidden"});
-			this.animate({r: window.innerWidth, cy: (window.innerHeight / 2) , cx: (window.innerWidth / 2), strokeWidth: 50}, 1000); //Move circle
-			setTimeout(function(){ // Wait 1s function
+		nums.add(s.text((width*posArr[i][0])-32, (height*posArr[i][1])+50, dates[i]));
+		discs[i].click( function() {
+			if (window.nowFull == -1) {
+				for ( i = 0; i < posArr.length; i++ ) {
+					if (discs[i].id == this.id) {
+						window.nowFull = i;
+					}
+				}
+				nums.attr({visibility: "hidden"});
 				discs.attr({visibility: "hidden"}); // Hide discs to prevent ovelay viewing
-				bigCircle.attr({visibility: ""}); // Show big circle
-				rect.attr({visibility: ""}); //Show rectangle
-				rect.animate({opacity: 0.8}, 500); // Animate opacity
-				reback.animate({r: 20, cy: save[2], cx: save[1], strokeWidth: 5}, 1000); //Return circle to original position
-				document.getElementById("overlay").style.visibility = ""; 
-			}, 1000);
+				this.attr({visibility: "visible"}); // Hide discs to prevent ovelay viewing
+				this.animate({r: window.innerWidth, cy: (window.innerHeight / 2) , cx: (window.innerWidth / 2), strokeWidth: 50}, 1000); //Move circle
+				document.getElementById("overlay").style.visibility = "";
+			} else {
+				discs[window.nowFull].animate({r: 20, cy: height*posArr[window.nowFull][1], cx: width*posArr[window.nowFull][0], strokeWidth: 5}, 1000); //Return circle to original position
+				discs[window.nowFull].attr({visibility: ""});
+				nums.attr({visibility: ""});
+				discs.attr({visibility: ""}); // Unhide circles
+				document.getElementById("overlay").style.visibility = "hidden"; 
+				window.nowFull = -1;
+			}
 		});
 	}
-// Return function on bigCircle (click to return)
-	bigCircle.click(bConClick);
-	rect.click(bConClick);
-	function bConClick() {
-		nums.attr({visibility: ""});
-		discs.attr({visibility: ""}); // Unhide circles
-		bigCircle.attr({visibility: "hidden"}); // Hide big side circle
-		rect.attr({visibility: "hidden", opacity: "0"}); // Hide rectangle and set animation
-		document.getElementById("overlay").style.visibility = "hidden"; 
-	}
-	function addZyro(num) {
-		if (num < 9) {
-			return "0" + (num+1);
-		} else {
-			return (num+1);
-		}
-	}
 	return SVGsizes;
 }

diff -r 2f0a54c31d10 -r 8afedfb913f3 js/svg-animator.js~
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/svg-animator.js~	Sat Jan 25 21:37:06 2020 +0100
@@ -0,0 +1,100 @@
+// Welcome to SVG Virtual Map Animator by Capsia Tech
+
+/* Written by:
+Desirée Schembri
+Niccolò Celoro
+Riccardo Riccio
+Simon Tomsič*/
+
+function initSVG() { // Snap.SVG.JS needs to be started on load
+// Starting Snap SVG, basic objects and variables. To change discs positions use posArr.
+// Global setup
+	document.getElementById("overlay").style.visibility = "hidden";
+	window.nowFull = -1;
+	var height = window.innerHeight,
+	width = window.innerWidth,
+	fontSize = parseFloat(getComputedStyle(document.body).fontSize)*0.6,
+	dates = [2012, 2015, 2016, 2018, 2019],
+	posArr = [],
+
+	s = Snap("#svg"), // set element to draw in
+// Start drawing
+	dateLine = s.line(0, height/2, width, height/2),
+	discs = s.group(), // group of all circles
+	nums = s.group();
+
+	for (i = 1; i <= dates.length; i++ ) {
+		posArr.push([0.08*i, 0.5]);
+	}
+
+	function SVGsizes(width, height) {
+		dateLine.attr({
+			x2: width,
+			y1: height / 2,
+			y2: height / 2
+		});
+		for (i = 0; i < posArr.length; i++) {
+			discs[i].attr({
+				cx: width*posArr[i][0],
+				cy: height*posArr[i][1]
+			});
+			nums[i].attr({
+				x: (width*posArr[i][0])-32,
+				y: (height*posArr[i][1])+50
+			});
+		}
+	}
+	function WHforDiscs(width, height) {
+		if (width/height > 1.05) {
+			return height/2;
+		} else {
+			return width/3;
+		}
+	}
+	//console.log(initSVG.SVGsizes);
+// Setting default styles for rectangle and discs
+	discs.attr({
+		fill: "#4e9a06",
+		stroke: "#ca64ff",
+		strokeWidth: 5
+	});
+	dateLine.attr({
+		stroke: "#333",
+		strokeWidth: 30
+	});
+	nums.attr({
+		fontSize: "1.8em",
+		fontWeight: "bold"
+//		pointerEvents: "none"
+	});
+// Initialize circles
+	for (i = 0; i < posArr.length; i++) {
+		discs.add(s.circle(width*posArr[i][0], height*posArr[i][1], 20)); // Create and add circles to discs.
+		nums.add(s.text((width*posArr[i][0])-32, (height*posArr[i][1])+50, dates[i]));
+		discs[i].click( function() {
+			if (window.nowFull == -1) {
+				for ( i = 0; i < posArr.length; i++ ) {
+					if (discs[i].id == this.id) {
+						window.nowFull = i;
+					}
+				}
+				nums.attr({visibility: "hidden"});
+				discs.attr({visibility: "hidden"}); // Hide discs to prevent ovelay viewing
+				this.attr({visibility: "visible"}); // Hide discs to prevent ovelay viewing
+				this.animate({r: window.innerWidth, cy: (window.innerHeight / 2) , cx: (window.innerWidth / 2), strokeWidth: 50}, 1000); //Move circle
+				rect.attr({visibility: ""}); //Show rectangle
+				rect.animate({opacity: 0.8}, 500); // Animate opacity
+				document.getElementById("overlay").style.visibility = "";
+			} else {
+				discs[window.nowFull].animate({r: 20, cy: height*posArr[window.nowFull][1], cx: width*posArr[window.nowFull][0], strokeWidth: 5}, 1000); //Return circle to original position
+				discs[window.nowFull].attr({visibility: ""});
+				nums.attr({visibility: ""});
+				discs.attr({visibility: ""}); // Unhide circles
+				rect.attr({visibility: "hidden", opacity: "0"}); // Hide rectangle and set animation
+				document.getElementById("overlay").style.visibility = "hidden"; 
+				window.nowFull = -1;
+			}
+		});
+	}
+	return SVGsizes;
+}