summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLaria Carolin Chabowski <laria@laria.me>2020-10-14 22:52:21 +0200
committerLaria Carolin Chabowski <laria@laria.me>2020-10-14 22:52:21 +0200
commitb8f7e622bbee068ac9e6a96c2307dbc7d7b02b14 (patch)
treec945307775d90c51301d060878ff816aae4f017d
parent5b456afb49bfa6ff1567510bc1d9362377d32216 (diff)
downloadstartpage-b8f7e622bbee068ac9e6a96c2307dbc7d7b02b14.tar.gz
startpage-b8f7e622bbee068ac9e6a96c2307dbc7d7b02b14.tar.bz2
startpage-b8f7e622bbee068ac9e6a96c2307dbc7d7b02b14.zip
Lazy load background image using XHR
We now don't immediately reload the reddit background image, as this delays the initial page load quite a bit. Instead we trigger an XHR request on page load to update the background image.
-rw-r--r--main.go23
-rw-r--r--reddit_background/reddit_background.go38
-rw-r--r--template.html69
3 files changed, 107 insertions, 23 deletions
diff --git a/main.go b/main.go
index e1ee16c..77944c0 100644
--- a/main.go
+++ b/main.go
@@ -1,6 +1,7 @@
package main
import (
+ "encoding/json"
"errors"
"flag"
"fmt"
@@ -61,6 +62,7 @@ func main() {
http.HandleFunc("/", startpage(*config, redditImageProvider))
http.HandleFunc("/bgimg", bgimg(redditImageProvider))
+ http.HandleFunc("/update-bgimg", updateBgimg(redditImageProvider))
if config.BackgroundSavepath != "" {
http.HandleFunc("/savebg", savebg(redditImageProvider, config.BackgroundSavepath))
@@ -70,7 +72,7 @@ func main() {
}
type TplData struct {
- BgImage *reddit_background.RedditImage
+ BgImage *reddit_background.RedditImageForAjax
Weather *weather.Weather
Links []Link
CanSaveBg bool
@@ -91,7 +93,7 @@ func startpage(config Config, redditImageProvider *reddit_background.RedditImage
}
if err := tpl.Execute(rw, &TplData{
- redditImageProvider.Image(),
+ redditImageProvider.Image().ForAjax(),
curWeather,
config.Links,
config.BackgroundSavepath != "",
@@ -118,6 +120,23 @@ func bgimg(redditImageProvider *reddit_background.RedditImageProvider) http.Hand
}
}
+func updateBgimg(redditImageProvider *reddit_background.RedditImageProvider) http.HandlerFunc {
+ return func(rw http.ResponseWriter, req *http.Request) {
+ defer req.Body.Close()
+
+ updated := redditImageProvider.UpdateImage()
+
+ rw.Header().Set("Content-Type", "application/json")
+ json.NewEncoder(rw).Encode(struct {
+ Updated bool
+ Image *reddit_background.RedditImageForAjax
+ }{
+ updated,
+ redditImageProvider.Image().ForAjax(),
+ })
+ }
+}
+
func savebg(redditImageProvider *reddit_background.RedditImageProvider, savepath string) http.HandlerFunc {
return func(rw http.ResponseWriter, req *http.Request) {
defer req.Body.Close()
diff --git a/reddit_background/reddit_background.go b/reddit_background/reddit_background.go
index 67b25d0..60ba4ec 100644
--- a/reddit_background/reddit_background.go
+++ b/reddit_background/reddit_background.go
@@ -41,6 +41,23 @@ type RedditImage struct {
Mediatype string `json:"-"`
}
+type RedditImageForAjax struct {
+ Permalink string
+ Title string
+ Saved bool
+}
+
+func (ri *RedditImage) ForAjax() *RedditImageForAjax {
+ if ri == nil {
+ return nil
+ }
+ return &RedditImageForAjax{
+ Permalink: ri.Permalink,
+ Title: ri.Title,
+ Saved: ri.Saved,
+ }
+}
+
func GetRedditImage(maxsize int, subreddit string) (*RedditImage, error) {
subredditUrl := fmt.Sprintf("https://www.reddit.com/r/%s.json", subreddit)
@@ -211,21 +228,28 @@ func NewRedditImageProvider(maxsize int, subreddit string) *RedditImageProvider
}
}
-func (rip *RedditImageProvider) Image() *RedditImage {
+func (rip *RedditImageProvider) UpdateImage() bool {
+ updated := false
+
rip.intervalRunner.Run(func() bool {
log.Printf("Getting new RedditImage")
- var err error
- rip.image, err = GetRedditImage(rip.maxsize, rip.subreddit)
+ image, err := GetRedditImage(rip.maxsize, rip.subreddit)
- if err == nil {
- log.Printf("Successfully loaded RedditImage")
- } else {
+ if err != nil {
log.Printf("Failed loading RedditImage: %s", err)
+ return false
}
- return err == nil
+ log.Printf("Successfully loaded RedditImage")
+ rip.image = image
+ updated = true
+ return true
})
+ return updated
+}
+
+func (rip *RedditImageProvider) Image() *RedditImage {
return rip.image
}
diff --git a/template.html b/template.html
index ffb833c..4b20536 100644
--- a/template.html
+++ b/template.html
@@ -4,16 +4,17 @@
<title>Startpage</title>
<style type="text/css">
body {
- background: grey;
+ background-color: grey;
+ background-image: none;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-attachment: fixed;
+
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
+ transition: background-color 0.5s, background-image 0.5s;
}
- {{ if .BgImage }}
- body {
- background: black url(/bgimg) no-repeat center center fixed;
- }
- {{ end }}
a {
color: #eee;
text-decoration: none;
@@ -76,7 +77,7 @@
}
</style>
</head>
- <body>
+ <body {{ if .BgImage }} style="background-color: black; background-image: url(/bgimg);"{{ end }}>
{{ if .Weather }}
<div id="weather">
<a href="{{ .Weather.URL }}"><img src="{{ .Weather.Icon }}" alt="" /></a>
@@ -99,13 +100,53 @@
<div id="yr_no_credit">Weather forecast from Yr, delivered by the Norwegian Meteorological Institute and NRK</div>
{{ end }}
- {{ if .BgImage }}
- <span id="imageinfo">
- <a href="http://reddit.com{{ .BgImage.Permalink }}">{{ .BgImage.Title }}</a>{{ if .CanSaveBg}}
- | {{ if .BgImage.Saved }}saved{{ else }}<a href="/savebg">save</a>{{ end }}
- {{ end }}
- </span>
- {{ end}}
+ <span id="imageinfo"></span>
</footer>
+
+ <script type="text/javascript">
+ var CanSaveBg = {{ .CanSaveBg }};
+
+ function link(href, text) {
+ var a = document.createElement("a");
+ a.href = href;
+ a.innerText = text;
+ return a;
+ }
+
+ function updateImageInfo(image) {
+ var imageinfo = document.getElementById("imageinfo");
+ imageinfo.innerHTML = "";
+ imageinfo.appendChild(link("http://reddit.com" + image.Permalink, image.Title));
+ if (CanSaveBg) {
+ imageinfo.appendChild(document.createTextNode(" | "));
+ if (image.Saved) {
+ imageinfo.appendChild(document.createTextNode("saved"));
+ } else {
+ imageinfo.appendChild(link("/savebg", "save"));
+ }
+ }
+ }
+
+ {{ if .BgImage }}
+ updateImageInfo({{ .BgImage }});
+ {{ end }}
+
+ var xhr = new XMLHttpRequest();
+ xhr.addEventListener("load", function () {
+ if (!xhr.response.Updated) {
+ return;
+ }
+
+ var bodyStyle = document.body.style;
+ bodyStyle.setProperty("background-image", "url(/bgimg?rand=" + Math.random() + ")");
+ bodyStyle.setProperty("background-color", "black");
+
+ updateImageInfo(xhr.response.Image);
+ });
+
+ xhr.open("GET", "/update-bgimg");
+ xhr.responseType = "json";
+ xhr.send();
+ </script>
</body>
</html>