Merge pull request #17 from benjaminluck/menu-xs

Menu xs
bennyvdhoogen · Jun 7, 2017 · bc080c5 · bc080c5
2 parents 475db66 + 04f8693
commit bc080c5
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 189 deletions.
diff --git a/index.php b/index.php
@@ -17,7 +17,7 @@
   <body>
     <header>
       <div class="menu-wrapper">
-        <div class="menu init float-left">
+        <div id="menu-elem" class="menu init float-left">
           <ul>
             <li><?= $info['release']; ?></li>
             <li><?= $info['artist']; ?></li>
@@ -42,7 +42,7 @@
       <div id="track-info-text">
 
       </div>
-      <div id="actions" class="float-right hidden-xs">
+      <div id="actions" class="float-right">
         <button id="mute-btn" onclick="mutePlayer();" class="mute-btn mute-btn-unmuted"></button>
         <div id="mute-btn-muted" class="mute-btn mute-btn-muted hidden"></div>
       </div>

diff --git a/js/components/InputController.js b/js/components/InputController.js
@@ -14,6 +14,16 @@ function detachIOEventListeners(){
 	window.removeEventListener( 'mousewheel', onMouseWheel, false );
 }
 
+menuElem = document.getElementById('menu-elem');
+menuElem.addEventListener("touchstart", toggleMobileExpand, false);
+trackInfoElem = document.getElementById('track-information');
+trackInfoElem.addEventListener("touchstart", toggleMobileExpand, false);
+
+function toggleMobileExpand(){
+  menuElem.classList.toggle('expand-mobile');
+  trackInfoElem.classList.toggle('expand-mobile');
+}
+
 document.addEventListener( 'mouseout' , mouseLeaves, false);
 
 function mouseLeaves() {
@@ -41,7 +51,6 @@ function checkIfMouseNearEdges(event){
     var progress = (event.clientX - edges.right.x.start);
     window.percentageInEdge  = progress / edges.right.x.size;
   }
-
 }
 
 function onWindowResize() {
@@ -93,26 +102,27 @@ function onTouchEnd(event){
 function onTouchStart(event){
   console.log(event);
   if(event.targetTouches){
+    mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
+    mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;
 
-	}else{
-		return false;
-	}
-  mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
-  mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;
-
-  raycaster.setFromCamera( mouse, camera );
-
-  var intersects = raycaster.intersectObjects( scene.children[3].children, true);
+    raycaster.setFromCamera( mouse, camera );
 
-  if ( intersects.length > 0 ) {
+    var intersects = raycaster.intersectObjects( scene.children[1].children, true);
 
-    var mesh  = intersects[0].object.parent;
-    if(mesh.name == 'Cylinder'){
-      moveToDownloadPage();
-    }
-    SoundManager.playTrackByName(mesh.name);
+    if ( intersects.length > 0 ) {
+    //  alert(mesh.name);
 
-  }
+      var mesh  = intersects[0].object.parent;
+      if(mesh.name == 'Cylinder'){
+        moveToDownloadPage();
+      }
+    //  console.log(intersects[0].object.parent)
+    //  alert(mesh.name);
+      SoundManager.playTrackByName(mesh.name);
+     }
+  }else{
+		return false;
+	}
 }
 
 function onDocumentMouseDown( event ) {

diff --git a/js/components/SoundManager.js b/js/components/SoundManager.js
@@ -30,7 +30,7 @@ var SoundManager = (function () {
 
 	self.displayTrackName = function(){
 		var elemWrapper = document.getElementById("track-information");
-		elemWrapper.classList = 'track-information active';
+		elemWrapper.classList.toggle('active');
 		var elem = document.getElementById("track-info-text");
 		var trackTitle = self.songs[self.currentPlayingIndex].displayName;
 		elem.innerHTML = trackTitle;
@@ -42,7 +42,7 @@ var SoundManager = (function () {
 			console.log(sounds);
 			sounds.forEach(function(sound, index){
 				if(sound.title){
-					if(self.songs[index]){  
+					if(self.songs[index]){
 						self.songs[index].displayName = sound.title;
 					}
 				}

diff --git a/styles/css/style.css b/styles/css/style.css
diff --git a/styles/css/style.css.map b/styles/css/style.css.map