skylike_me/test-animation.html at master · tomasgatial/skylike_me · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="http://d3js.org/d3.v3.min.js"></script>

		<script id="linkscript">
			//this link will get replaced by actual login link by php script
			var loginLink = #;
		</script>

	</head>

    <body class="sunset">
    <img id="logo" src="img/skylikes-logos.svg"/>

    <div class="login-container">

    	<h3 class="login-big" id="status">hello</h3>

    	<svg class="loading-stars">
    		<!-- upper center star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="214.1" cy="46.7" r="4.5"/>
			<!-- upper left corner star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="67.5" cy="21.4" r="4.5"/>
			<!-- lower left corner star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="67.5" cy="272.3" r="6.8"/>
			<!-- lower center star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="215.7" cy="299.4" r="5"/>

			<!-- lover right corner star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="361.9" cy="274.1" r="6.8"/>

			<!-- upper right corner star-->
			<circle fill="url(#grad1)" sstyle="opacity: 1;" cx="362.8" cy="21.4" r="4.5"/>

			<!-- lower page corner star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="336.3" cy="238" r="4.5"/>

			<!-- upper page corner star-->
			<circle fill="url(#grad1)" style="opacity: 1;" cx="336.3" cy="52.4" r="3.2"/>

           	<path class="path" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="0"
  			d="M214.1,46.7 67.5,21.4 67.5,272.3 215.7,299.4 361.9,274.1 362.8,21.4 213.1,45.7 214.7,298.4 336.3,238 336.3,52.4 "/>
    	</svg>
    </div>

    <script src="js/functions.js"></script>
    <script src="js/goodreadsDataFetches.js"></script>
    <script>

		goodreadsDataFetches.statusUpdate = function(percentage,state){
			console.log("percentage " + percentage +" state "+ state)
			var newwidht = 1678-(percentage/100*1678);
			d3.select(".path").transition().duration(1000).style("stroke-dashoffset", newwidht)

			document.getElementById("status").innerHTML = "Creating the big bang. " +percentage +"% of the universe ready"
		}

		goodreadsDataFetches.finished = function(data){
			console.log("done")
			document.getElementById("status").innerHTML = "DONE!"

		}

		var isUsingTestingDataset = getParameterByName("testingData") == "1"

		if(isUsingTestingDataset){
			console.log("startWithTestingData")
			goodreadsDataFetches.startWithTestingData()
		}else{
			console.log("start realData!")
			goodreadsDataFetches.start()
		}

		//http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
		function getParameterByName(name) {
		    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
		    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
		        results = regex.exec(location.search);
		    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
		}


</script>
</body>
</html>