🌙 Add location based auto theme

Use lat/long | browser location data to automatically set light/dark mode. 

Sunrise/sunset is already returned in the openweathermap API, so this is fairly simple.

Converted the functions in weather.js to async as opposed to using .then chains

Author: lewisdoesstuff

assets/js/theme.js

@@ -61,3 +61,18 @@ if (CONFIG.changeThemeByHour && CONFIG.autoChangeTheme && !CONFIG.changeThemeByO
 		disableDark();
 	}
 }
+
+// there may be a better way to do this &&
+if (CONFIG.changeThemeByLocation && CONFIG.autoChangeTheme && !CONFIG.changeThemeByOS && !CONFIG.changeThemeByHour) {
+  Promise.resolve(weatherPromise).then(weather => {
+    const unix = Date.now() / 1000;
+    if (
+      unix >= weather.sunrise &&
+      unix < weather.sunset
+    ) {
+      disableDark();
+    } else {
+      enableDark();
+    }
+  });
+}

assets/js/weather.js

@@ -7,56 +7,55 @@ const iconElement = document.querySelector('.weatherIcon');
 const tempElement = document.querySelector('.weatherValue p');
 const descElement = document.querySelector('.weatherDescription p');
 
-const weather = {};
-weather.temperature = {
-	unit: 'celsius',
-};
-
 var tempUnit = CONFIG.weatherUnit;
 
 const KELVIN = 273.15;
 const key = `${CONFIG.weatherKey}`;
-setPosition();
-
-function setPosition(position) {
-	if (!CONFIG.trackLocation || !navigator.geolocation) {
-		if (CONFIG.trackLocation) {
-			console.error('Geolocation not available');
-		}
-		getWeather(CONFIG.defaultLatitude, CONFIG.defaultLongitude);
-		return;
-	}
-	navigator.geolocation.getCurrentPosition(
-		pos => {
-			getWeather(pos.coords.latitude.toFixed(3), pos.coords.longitude.toFixed(3));
-		},
-		err => {
-			console.error(err);
-			getWeather(CONFIG.defaultLatitude, CONFIG.defaultLongitude);
-		}
-	);
+const weatherPromise = getWeather();
+displayWeather();
+
+async function setPosition() {
+  let pos;
+  if (!CONFIG.trackLocation || !navigator.geolocation) {
+    if (CONFIG.trackLocation) {
+      console.error('Geolocation not available');
+    }
+    pos = ({ lat: CONFIG.defaultLatitude, lon: CONFIG.defaultLongitude });
+  }
+
+  pos = new Promise((resolve) => {
+    navigator.geolocation.getCurrentPosition((pos) => {
+      resolve({ lat: pos.coords.latitude.toFixed(3), lon: pos.coords.longitude.toFixed(3) });
+    },
+      () => {
+        resolve({ lat: CONFIG.defaultLatitude, lon: CONFIG.defaultLongitude });
+      });
+  });
+  return pos;
 }
 
-function getWeather(latitude, longitude) {
-	let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&lang=${CONFIG.language}&appid=${key}`;
-	fetch(api)
-		.then(function(response) {
-			let data = response.json();
-			return data;
-		})
-		.then(function(data) {
-			let celsius = Math.floor(data.main.temp - KELVIN);
-			weather.temperature.value = tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32;
-			weather.description = data.weather[0].description;
-			weather.iconId = data.weather[0].icon;
-		})
-		.then(function() {
-			displayWeather();
-		});
+async function getWeather() {
+  const position = await setPosition();
+  let api = `https://api.openweathermap.org/data/2.5/weather?lat=${position.lat}&lon=${position.lon}&lang=${CONFIG.language}&appid=${key}`;
+
+  let response = await fetch(api).catch(err => {
+    console.log(err);
+  });
+  let data = await response.json();
+
+  let celsius = Math.floor(data.main.temp - KELVIN);
+  return {
+    description: data.weather[0].description,
+    iconId: data.weather[0].icon,
+    sunrise: data.sys.sunrise,
+    sunset: data.sys.sunset,
+    temperature: tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32
+  };
 }
 
-function displayWeather() {
-	iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
-	tempElement.innerHTML = `${weather.temperature.value.toFixed(0)}°<span class="darkfg">${tempUnit}</span>`;
-	descElement.innerHTML = weather.description;
+async function displayWeather() {
+  var weather = await weatherPromise;
+  iconElement.innerHTML = `<img src="assets/icons/${CONFIG.weatherIcons}/${weather.iconId}.png"/>`;
+  tempElement.innerHTML = `${weather.temperature.toFixed(0)}°<span class="darkfg">${tempUnit}</span>`;
+  descElement.innerHTML = weather.description;
 }

config.js

@@ -47,9 +47,12 @@ const CONFIG = {
 	hourDarkThemeActive: '18:30',
 	hourDarkThemeInactive: '07:00',
 
-	// ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
-	// ├┴┐│ │ │  │ │ ││││└─┐
-	// └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
+  	// Autochange automatically based on location (sunrise/sunset). Openweathermap API key required.
+  	changeThemeByLocation: false,
+
+  // ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
+  // ├┴┐│ │ │  │ │ ││││└─┐
+  // └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 
 	firstButtonsContainer: [
 		{

index.html

@@ -60,10 +60,10 @@
 
     <!-- Scripts  -->
     <script src="assets/js/layout.js"></script>
-    <script src="assets/js/theme.js"></script>
     <script src="assets/js/time.js"></script>
     <script src="assets/js/greeting.js"></script>
-    <script src="assets/js/weather.js"></script>
+	<script src="assets/js/weather.js"></script>
+	<script src="assets/js/theme.js"></script>
     <script src="assets/js/title.js"></script>
 
     <!-- Generators  -->