Merge branch 'master' of github.com:keith24/Compass

coordinates.js

@@ -0,0 +1,47 @@
+'use strict'
+/* global navigator $ */
+
+
+// Set units based on browser locale
+const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my')
+
+// Check for GPS capability
+if (!navigator.geolocation) $('#no-gps').show()
+
+// Start tracking
+else navigator.geolocation.watchPosition(
+		
+	// Got location callbackw
+	function(pos) {
+		let lat = pos.coords.latitude.toFixed(4)
+		let lon = pos.coords.longitude.toFixed(4)
+		$('#lat').text(
+			(lat.substring(0,1)=='-')? // Negative values are South
+				lat.substring(1)+' S' : lat+' N'
+		)
+		$('#lon').text(
+			(lon.substring(0,1)=='-')? // Negative values are East
+				lon.substring(1)+' W' : lon+' E'
+		)
+		
+		// Get altitude 
+		if (pos.coords.altitude) {
+			$('#alt').show().text(
+				(metric)? // Convert to feet if needed
+					pos.coords.altitude.toFixed(1)+' m':
+					(pos.coords.altitude*3.28084).toFixed(1)+' ft'
+			)
+	}
+		else $('#alt').hide()
+	},
+	
+	// Got error
+	function() {
+		$('.coord').hide()
+		$('#no-gps').show()
+	}, 
+	
+	// Options
+	{ enableHighAccuracy:true }
+	
+)

direction.js

@@ -0,0 +1,21 @@
+'use strict'
+/* global $ window */
+
+
+window.addEventListener('deviceorientation', function(e){
+	
+	// No orientation data
+	if(!e) $('#no-dir').show()
+	
+	// Set orientation
+	else {
+		$('#no-dir').hide()
+		const rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)'
+		$('#rose').css({
+			'-ms-transform': rot,
+			'-webkit-transform': rot,
+			'transform': rot
+		})
+	}
+	
+}, true)

index.html

@@ -47,8 +47,8 @@
 		<header>
 			
 			<div class='error' id='no-gps'>No GPS data available. </div>
-			<div class='coord' id='lat'>0.00000 N</div>
-			<div class='coord' id='lon'>0.00000 E</div>
+			<div class='coord' id='lat'>0.0000 N</div>
+			<div class='coord' id='lon'>0.0000 W</div>
 			
 			<div class='coord' id='alt'></div>
 			
@@ -58,7 +58,6 @@
 			
 			<noscript>You need javascript to use this. </noscript>
 			<div class='error' id='no-dir'>No direction available.  Try this on a smartphone with an internal compass.</div>
-			<div class='error' id='rotated'>Note: the compass may be 90&deg; off when used in landscape mode.</div>
 			
 			<img id='rose' src="rose.svg">
 			
@@ -66,11 +65,12 @@
 		
 		<footer>
 			<div id='about'><a href="https://github.com/keith24/Compass/blob/master/README.md">About</a></div>
-			<div id='by'>by <a href="https://keithirwin.us/">Keith Irwin</a></div>
+			<div id='by'>by <a href="https://www.keithirwin.us/">Keith Irwin</a></div>
 		</footer>
 		
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-		<script src="script.js"></script>
+		<script src="coordinates.js"></script>
+		<script src="direction.js"></script>
 		
 	</body>
 	

script.js

@@ -1,61 +0,0 @@
-'use strict';
-/* global navigator $ */
-
-// Set units based on browser locale
-const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my');
-
-// Track GPS location
-if (!navigator.geolocation){ $('#no-gps').show(); }
-else { navigator.geolocation.watchPosition(
-		
-		// Got location
-		function(pos) {
-			let lat = pos.coords.latitude.toFixed(4);
-			let lon = pos.coords.longitude.toFixed(4);
-			$('#lat').text((lat.substring(0,1)=='-')? lat.substring(1)+' S' : lat+' N');
-			$('#lon').text((lon.substring(0,1)=='-')? lon.substring(1)+' E' : lon+' W');
-			
-			// Get altitude
-			if (pos.coords.altitude){
-				var alt = (metric)? pos.coords.altitude.toFixed(1)+' m':(pos.coords.altitude*0.3048).toFixed(1)+' ft';
-				$('#alt').show().text(alt);
-			}
-			else {
-				$('#alt').hide();
-			}
-		},
-		
-		// Got error
-		function() {
-			$('.coord').hide();
-			$('#rotated').hide();
-			$('#no-gps').show();
-		}, 
-		
-		// Options
-		{ enableHighAccuracy:true }
-		
-	);
-}
-
-// Set compass orientation
-function setRose(e) {
-	
-	// No orientation data
-	if(!e.absolute) {
-		$('#rotated').hide();
-		$('#no-dir').show();
-	}
-		
-	// Set orientation
-	else {
-		var rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)';
-		$('#rose').css({
-			'-ms-transform': rot,
-			'-webkit-transform': rot,
-			'transform': rot
-		});
-	}
-	
-}
-window.addEventListener("deviceorientation", setRose, true);

style.css

@@ -38,7 +38,7 @@ header, main, footer, .error, noscript {
 }
 
 @media (orientation:portrait) {
-	.error#rotated { display: none; }
+	/*.error#rotated { display: none; }*/
 	header, main, footer {
 		width: 90vw;
 		padding: 5vw;
@@ -66,7 +66,7 @@ header, main, footer, .error, noscript {
 	}
 }
 @media (orientation:landscape) {
-	.error#rotated { display: block; }
+	/*.error#rotated { display: block; }*/
   header, main, footer {
     height: 90vh;
     padding: 5vh;