Move weather from iframe to main document

newtab.html

@@ -46,7 +46,17 @@
         <a data-target="nw"></a>
       </nav>
       <section data-id="nw">
-        <div id="weatherdiv"></div>
+        <div id="weatherdiv">
+          <div id="weather">
+            <div id="temp">
+              <h1 id="temperature"></h1>
+              <div id="condition"></div>
+            </div>
+          </div>
+          <footer>
+            <span><a href="https://darksky.net/poweredby/" target="_blank">Powered by Dark Sky</a></span>
+          </footer>
+        </div>
         <ol id="newslist"></ol>
       </section>
     </aside>

ntp.js

@@ -964,10 +964,130 @@ xhr(chrome.extension.getURL("/consts/default_settings.json"), function(res) {
     /* sidebar stuff */
 
     var sidebarFirstTime = true
+    const weatherDivElem = document.getElementById("weatherdiv")
 
     var sidebarOnFirstOpen = function() {
       /* weather */
-      document.getElementById("weatherdiv").innerHTML = "<iframe id='weatherframe' src='weather/weather.html'></iframe>"
+      (function() {
+        const availableLocales = [ // as provided by Dark Sky's api
+          "ar", "az", "be", "bg", "bs", "ca", "cs", "de", "el", "en", "es", "et", "fr",
+          "hr", "hu", "id", "it", "is", "kw", "nb", "nl", "pl", "pt", "ru", "sk", "sl",
+          "sr", "sv", "tet", "tr", "uk", "zh"
+        ] // and zh-tw, handled separately
+
+        var codeIconMap = {
+          "clear-day": "Sun",
+          "clear-night": "Moon",
+          "rain": "Cloud-Rain",
+          "snow": "Cloud-Snow",
+          "sleet": "Cloud-Snow",
+          "wind": "Wind",
+          "fog": "Cloud-Fog",
+          "cloudy": "Cloud",
+          "partly-cloudy-day": "Cloud-Sun",
+          "partly-cloudy-night": "Cloud-Moon"
+        }
+
+        var useImperial = false, overrideWxLocation = false
+        var wxCoordsLat = 0, wxCoordsLong = 0
+        var lastChecked
+
+        function displayWeather(data) {
+          var conditionData = data.weather.currently
+
+          var tempElem = document.getElementById("temp")
+          var temperatureElem = document.getElementById("temperature")
+          var conditionElem = document.getElementById("condition")
+
+          var temperature = conditionData.temperature
+          if (useImperial) {
+            temperature = (temperature * 9 / 5) + 32
+          }
+
+          tempElem.style.backgroundImage = `url(/img/weather/${codeIconMap[conditionData.icon]}.svg)`
+          temperatureElem.textContent = Math.round(temperature).toString()
+          conditionElem.textContent = conditionData.summary
+
+          // document.body.classList.add("visible")
+        }
+
+        var dontUseCache
+
+        function gotCoords() {
+          var requestUrl = "https://nntp-server-redux.netlify.com/.netlify/functions/wx?foo=bar"
+          if (overrideWxLocation) {
+            requestUrl += `&coords=${wxCoordsLat},${wxCoordsLong}`
+          }
+
+          var chromeUILang = chrome.i18n.getUILanguage()
+          if (chromeUILang.toLowerCase() === "zh-tw") {
+            requestUrl += "&lang=zh-tw"
+          } else if (availableLocales.indexOf(chromeUILang.split("-")[0]) !== -1) {
+            requestUrl += `&lang=${chromeUILang.split("-")[0]}`
+          }
+
+          if (dontUseCache) {
+            // console.log("getting fresh weather")
+            xhr(requestUrl, function(data) {
+              data = JSON.parse(data)
+
+              displayWeather(data)
+
+              localStorage.setItem("last_checked", new Date().getTime())
+              localStorage.setItem("last_weather", JSON.stringify(data))
+            })
+          } else if (localStorage.last_weather) {
+            // console.log("using cached weather")
+            displayWeather(JSON.parse(localStorage.getItem("last_weather")))
+          }
+        }
+
+        chrome.storage.sync.get(["useFahrenheit", "overrideWxLocation", "wxCoordsLat", "wxCoordsLong", "wxUseGPS"], function(r) {
+          if (r.useFahrenheit !== undefined) {
+            useImperial = r.useFahrenheit
+          }
+
+          if (r.overrideWxLocation === true) {
+            overrideWxLocation = true
+            if (r.wxCoordsLat) {
+              wxCoordsLat = r.wxCoordsLat
+            }
+            if (r.wxCoordsLong) {
+              wxCoordsLong = r.wxCoordsLong
+            }
+          }
+
+          if (localStorage.last_checked) {
+            lastChecked = Number(localStorage.last_checked)
+            dontUseCache = !lastChecked || (new Date().getTime() - lastChecked >= 900000 && navigator.onLine)
+          } else {
+            dontUseCache = true
+          }
+
+          if (dontUseCache && r.wxUseGPS === true && overrideWxLocation === false) {
+            navigator.geolocation.getCurrentPosition((r) => {
+              overrideWxLocation = true
+              wxCoordsLat = r.coords.latitude
+              wxCoordsLong = r.coords.longitude
+              gotCoords()
+            }, (err) => {
+              if (err && (err.code === 1 || err.code === 2 || err.code === 3)) {
+                gotCoords() // fall back to IP-based location
+              }
+            })
+          } else {
+            gotCoords()
+          }
+        })
+
+        weatherDivElem.addEventListener("click", e => {
+          if (e.target.tagName.toLowerCase() !== "a") {
+            chrome.tabs.create({
+              url: "https://darksky.net/"
+            })
+          }
+        })
+      }())
 
       /* news */
       function stripTags(html) {

style.css

@@ -421,19 +421,62 @@ button {
   background: black;
 }
 
-/*.customscrollbars #weatherframe::-webkit-scrollbar {
-  background: #bbb;
+#weatherdiv {
+  margin-top: 20px;
 }
 
-#options::-webkit-scrollbar-thumb, #weatherframe::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, .3);
-}*/
+#weatherdiv #weather {
+  width: 100%;
+  position: relative;
+  z-index: 3;
+  margin: 0 auto;
+}
 
-#weatherframe {
+#weatherdiv #temp {
   width: 100%;
-  height: 170px;
-  overflow: hidden;
+  padding-left: 175px;
+  text-align: left;
+  background-repeat: no-repeat;
+  background-size: 200px;
+  background-position: -15px -25px;
+}
+
+#weatherdiv #temp h1 {
+  font-size: 100px;
+  font-weight: 400;
+  margin: 0;
+  letter-spacing: -5px;
+}
+
+#weatherdiv #temp div {
+  font-size: 20px;
+  color: rgba(255, 255, 255, .8);
+  margin-left: 5px;
+  margin-top: -5px;
+}
+
+#weatherdiv #temp h1:after {
+  content: "\0000b0";
+  font-weight: 100;
+}
+
+#weatherdiv #condition {
+  line-height: 1.21;
+}
+
+#weatherdiv footer {
+  color: rgba(255, 255, 255, .5);
+  position: relative;
+  z-index: 3;
   margin-top: 20px;
+  text-align: center;
+  font-size: 10px;
+
+  transition: opacity .3s;
+}
+
+#weatherdiv footer span, #weatherdiv footer span a {
+  color: inherit;
 }
 
 #topright {