mostly finished js side of new design, starting on the styling

LeoMcA · Aug 22, 2011 · 119df7e · 119df7e
1 parent 3d091d8
commit 119df7e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 173 deletions.
diff --git a/index.html b/index.html
@@ -4,39 +4,14 @@
 		<title>5Pod</title>
 		<link rel="stylesheet" href="styles/html5reset-1.6.1.css">
 		<link rel="stylesheet" href="styles/style.css">
-    	<link rel="stylesheet" href="styles/desktop.css" media="screen and (min-width: 960px)">
 		<script src="js/script.js"></script>
 	</head>
 	<body>
-		<a href="http://github.com/LeoMcA/5Pod">
-			<img class="github" src="images/github.png" alt="Fork me on GitHub">
-		</a>
-		<section>
-			<header>
-				<button>
-					Play
-				</button>
-			</header>
-			<datagrid>
-				<ol>
-				</ol>
-				<p>
-					Drop files here!
-				</p>
-				<input type="file" id="input" multiple>
-			</datagrid>
-			<footer>
-				<p>
-					Drop some files from your computer in the box above to open them, or use the input box (you can always add more files by dropping or browsing for them here). Open a song by clicking on it, start/stop playback by clicking on the Play/Pause button, and change tracks but clicking the browser's forward and back buttons.
-				</p>
-			<a href="http://www.w3.org/html/logo/">
-				<img src="images/html5.png" width="293" height="64" alt="HTML5 Powered with CSS3 / Styling, Device Access, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with CSS3 / Styling, Device Access, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
-			</a>
-			<p>
-				HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>. GitHub Ribbon by <a href="https://github.com/blog/273-github-ribbons">mojombo</a>. Colour scheme by <a href="http://www.colourlovers.com/palette/1408920/More_Than_I_Deserve">huege</a>.
-			</p>
-			</footer>
-			<audio preload>
-		</section>
+        <audio preload="metadata" controls></audio>
+        <section>
+            <ol></ol>
+            <p>Drop files here!</p>
+            <input type="file" id="input" multiple>
+        </section>
 	</body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -6,87 +6,54 @@
 
 window.onload = function() {
 
-	var baseUrl = location.href.split("#")[0];
-	var play = true;
-	var button = document.getElementsByTagName("button")[0];
-	var audio = document.getElementsByTagName("audio")[0];
-	var dropbox = document.getElementsByTagName("datagrid")[0];
-	var input = document.getElementsByTagName("input")[0];
-	var ol = document.getElementsByTagName("ol")[0];
-	var playing = false;
-	var popEnabled = false;
-	var files = [];
-	var windowURL = window.URL || window.webkitURL
+	var baseUrl = location.href.split("#")[0],
+	    audio = document.getElementsByTagName("audio")[0],
+        dropbox = document.getElementsByTagName("section")[0],
+	    input = document.getElementsByTagName("input")[0],
+	    ol = document.getElementsByTagName("ol")[0],
+	    popEnabled = false,
+	    files = [],
+	    windowURL = window.URL || window.webkitURL,
+        playing = false;
 
-	button.onclick = function() {
-		if(play === true) {
-			button.innerHTML = "Pause";
-			loadRandomSong(songFromUrl());
-			playSong(songFromUrl());
-		}
-		if(play === false) {
-			button.innerHTML = "Play";
-			pauseSong();
-			currentTime = audio.currentTime;
-		}
-		toggleButton();	
-	};
-
-	window.onpopstate = function() {
+	window.onpopstate = function(event) {
 		if(popEnabled === true) {
-			if(playing === true) playSong(songFromUrl());
-			if(playing === false) pauseSong();
-			loadRandomSong(songFromUrl());
+            loadSongs();
+            if(playing === true) audio.play();
 		}
 	};
 
+    audio.addEventListener("playing", function() {
+        playing = true;
+	}, false);
+
+    audio.addEventListener("pause", function() {
+        playing = false;
+	}, false);
+
 	audio.addEventListener("ended", function() {
 		window.history.forward();
 	}, false);
 
-	function playSong(song) {
-		audio.src = files[song - 1];
-		audio.play();
-		playing = true;
-	}
-
-	function pauseSong() {
-		audio.pause();
-		playing = false;
+	function loadSongs() {
+        var song = location.hash.split("#")[1];
+        popEnabled = false;
+        if(song === undefined) song = getRandomSong();
+		history.replaceState("test", null, baseUrl + "#" + song);
+		history.pushState("test", null, baseUrl + "#" + getRandomSong(song));
+		window.history.back();
+		popEnabled = true;
+        audio.src = files[song - 1];
 	}
 
 	function getRandomSong(song) {
 		var numberSongs = files.length;
 		var randomSong = Math.floor(Math.random()*numberSongs) + 1;
-		if(randomSong != song) {
-			return randomSong;
-		}
-		else if(numberSongs == 1) {
-			return randomSong;
-		}
-		else if(randomSong == 1) {
-			return randomSong + 1;
-		}
+		if(randomSong != song) return randomSong;
+		else if(numberSongs == 1) return randomSong;
+		else if(randomSong == 1) return randomSong + 1;
 		else return randomSong - 1;
 	}
-
-	function toggleButton() {
-		play = !play;
-		return play;
-	}
-
-	function loadRandomSong(song) {
-		popEnabled = false;
-		if(song === null) song = getRandomSong(song);
-		history.replaceState(null, null, baseUrl + "#!/" + song);
-		history.pushState(null, null, baseUrl + "#!/" + getRandomSong(song));
-		window.history.back();
-		popEnabled = true;
-	}
-
-	function songFromUrl() {
-		return location.hash.split("/")[1];
-	}
 
 	dropbox.addEventListener("dragenter", dragenter, false);
 
@@ -113,18 +80,17 @@ window.onload = function() {
 	function fileList(selectedFiles) {
 		document.getElementsByTagName("p")[0].style.display = "none";
 		var x = 0;
-		console.log(selectedFiles.length);
 		while(x < selectedFiles.length) {
 			var li = document.createElement("li");
 			var a = document.createElement("a");
 			a.innerHTML = selectedFiles[x].name;
-			a.href = "#!/" + (files.length + 1);
+			a.href = "#" + (files.length + 1);
 			li.appendChild(a);
 			ol.appendChild(li);
 			files.push(windowURL.createObjectURL(selectedFiles[x]));
-			console.log(windowURL.createObjectURL(selectedFiles[x]));
 			x++;
 		}
+        loadSongs();
 	}
 
 	input.onchange = function() {

diff --git a/styles/desktop.css b/styles/desktop.css
@@ -1,17 +0,0 @@
-html {
-	height: 100%;
-}
-
-body {
-	height: 100%;
-	background: #B2D9F7;
-}
-
-section {
-	width: 960px;
-	min-height: 100%;
-	margin-left: auto;
-	margin-right: auto;
-	box-shadow:0 0 5px #000000;
-	background: #7C8071;
-}

diff --git a/styles/style.css b/styles/style.css
@@ -1,73 +1,34 @@
-body {
-	color: #DDE3CA;
-	text-shadow: 0px -1px 0px #3D3C3B;
-    background: #7C8071;
-}
-
-header {
-	text-align: center;
+audio {
+    width: 100%;
+    position: fixed;
+    bottom: 0px;
+    z-index: 2;
 }
 
-a {
-	color: #B2D9F7;
-	text-decoration: none;
+ol {
+	list-style-position: inside;
 }
 
-button {
-	background: #487AA1;
-	height: 100px;
-	width: 100px;
-	text-align: center;
-	border-radius: 100%;
-	box-shadow: 0px 1px 1px #3D3C3B;
-	border: 0px;
-	color: #B2D9F7;
-	text-shadow: 0px -1px 2px #3D3C3B;
-	font-size: 1.5em;
-	margin: 30px;
+li:nth-child(odd) {
+    background-color:#eee;
 }
 
-button:active {
-	box-shadow: 0px -1px 1px #3D3C3B;
+li:nth-child(even) {
+    background-color:#fff;
 }
 
-datagrid {
-	display: block;
-	padding: 5px;
-	margin: 0px 30px;
-	background: #3D3C3B;
-	color: #7C8071;
-	text-shadow: 0px -1px 0px #222;
-	border-radius: 5px;
-	box-shadow: 0px 1px 2px #eee;
-	text-align: center;
+li a {
+    width: 100%;
+    padding: 5px 10px;
 }
 
-datagrid a {
-	color: inherit;
-	text-decoration: none;
+a {
+    color: inherit;
+    text-decoration: none;
 }
 
 p {
-	margin: 30px 0px;
-}
-
-ol {
-	list-style-position: inside;
-}
-
-input {
-	margin: 10px;
-}
-
-footer {
-	margin: 0px 30px;
-	padding-bottom: 30px;
-	text-align: center;
-}
-
-audio {
-	display: none;
+    text-align: center;
 }
 
 .github {