✨ add daily mode, settings page, and load new artwork button

art-institute-of-chicago · Jun 6, 2024 · 1db0305 · 1db0305
1 parent 58f7a54
commit 1db0305
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 10 deletions.
diff --git a/assets/reload--24.svg b/assets/reload--24.svg
diff --git a/index.html b/index.html
@@ -15,8 +15,13 @@
             <div id="artwork-container" oncontextmenu="return false;"></div>
             <img id="artwork-save-overlay" ondragstart="return false;" ondrop="return false;" />
         </a>
+        <div id="reload-container">
+            <a id="reload-link" title="Load new artwork" tabindex="0">
+                <img src="assets/reload--24.svg" alt="Load new artwork" />
+            </a>
+        </div>
         <div id="download-container">
-            <a id="download-link">
+            <a id="download-link" title="Download image">
                 <img src="assets/download--24.svg" alt="Download image" />
             </a>
         </div>

diff --git a/manifest.json b/manifest.json
@@ -22,5 +22,7 @@
     "chrome_url_overrides": {
         "newtab": "index.html"
     },
-    "permissions": ["storage"]
+    "permissions": ["storage"],
+
+    "options_page": "options.html"
 }
diff --git a/options.html b/options.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Art Institute of Chicago: Art Tab - Options</title>
+    <style>
+        body {
+            background: #21212c;
+            color: lightgrey;
+            font-family: sans-serif;
+            font-size: 16px;
+            padding: 0 32px;
+        }
+        label, select {
+            font-size: 24px;
+        }
+        select {
+            margin: 0 24px;
+        }
+        .setting {
+            margin: 24px 0;
+        }
+    </style>
+  </head>
+  <body>
+    <h1>Art Institute of Chicago: Art Tab - Options</h1>
+    <hr>
+    <div class="setting">
+        <label for="daily">Daily mode:</label>
+        <select id="daily">
+          <option value="false" selected>No</option>
+          <option value="true">Yes</option>
+        </select>
+        <span>Reload artwork image once per day instead of on every new tab</span>
+    </div>
+    <hr>
+
+    <script src="options.js"></script>
+  </body>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,10 @@
+const extensionSettingsKey = 'extensionSettings';
+const settings = JSON.parse(localStorage.getItem(extensionSettingsKey)) || {};
+
+const selectDaily = document.querySelector('#daily');
+selectDaily.value = settings.dailyMode;
+
+selectDaily.addEventListener('change', e => {
+    settings.dailyMode = e.target.value === 'true';
+    localStorage.setItem(extensionSettingsKey, JSON.stringify(settings));
+})
diff --git a/script.js b/script.js
@@ -3,6 +3,10 @@
     const savedResponseKey = 'response';
     const preloadedImagesKey = 'preloaded';
     const preloadingImagesKey = 'preloading';
+    const lastLoadedDateKey = 'lastLoadedDate'
+    const extensionSettingsKey = 'extensionSettings';
+
+    const settings = JSON.parse(localStorage.getItem(extensionSettingsKey)) || {};
 
     // Settings for cache aggressiveness
     const artworksToPrefetch = 50;
@@ -50,26 +54,42 @@
             showSequenceControl: false,
         });
 
+        loadNewArtwork(false);
+
+        const reloadLink = document.getElementById('reload-link');
+        reloadLink.addEventListener('click', handleReload);
+        reloadLink.addEventListener('keypress', handleReload);
+    });
+
+    function handleReload(e) {
+        // handle keyboard interaction
+        if (e.type === 'click' || (e.type === 'keypress' && (e.key === 'Enter' || e.key === ' '))) {
+          e.preventDefault();
+          loadNewArtwork(true);
+        }
+      }
+
+    function loadNewArtwork(forceNew){
         // https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem
         // ...returns `null` if not found. JSON.parsing `null` also returns `null`
         let savedResponse = JSON.parse(localStorage.getItem(savedResponseKey));
 
         if (savedResponse !== null) {
             if (savedResponse.data.length > 0) {
-                return processResponse(savedResponse);
+                return processResponse(savedResponse, forceNew);
             }
         }
 
-        getJson('https://api.artic.edu/api/v1/search', getQuery(), processResponse);
-    });
+        getJson('https://api.artic.edu/api/v1/search', getQuery(), processResponse, forceNew);
+    }
 
-    function getJson(url, body, callback) {
+    function getJson(url, body, callback, forceNew) {
         let request = new XMLHttpRequest();
         request.open('POST', url, true);
         request.setRequestHeader('Content-Type', 'application/json');
         request.onreadystatechange = function () {
             if (this.readyState === 4 && this.status === 200) {
-                callback(JSON.parse(this.responseText));
+                callback(JSON.parse(this.responseText), forceNew);
             }
         };
         request.send(JSON.stringify(body));
@@ -78,9 +98,21 @@
     /**
      * Remove one artwork from the response and save it to LocalStorage.
      */
-    function processResponse(response) {
+    function processResponse(response, forceNew) {
         let artwork = response.data[0];
-        response.data = response.data.slice(1);
+
+        const dateNow = (new Date()).toLocaleDateString();
+        const lastLoaded = localStorage.getItem(lastLoadedDateKey);
+
+        if(!settings.dailyMode || forceNew || lastLoaded !== dateNow) {
+            localStorage.setItem(lastLoadedDateKey, (new Date()).toLocaleDateString());
+            response.data = response.data.slice(1);
+            artwork = response.data[0];
+        }
+        else {
+          // artwork was loaded on today's date, don't load a new one
+        }
+
         localStorage.setItem(savedResponseKey, JSON.stringify(response));
 
         // Remove any artwork not in left-over response from preloaded trackers
@@ -156,6 +188,12 @@
         // Save this so we can add it to our preload log
         let currentImageId = artwork.image_id;
 
+        if(!isPreload)
+        {
+            // clear out any previous
+            viewer.world.removeAll();
+        }
+
         // https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#addTiledImage
         viewer.addTiledImage({
             tileSource: {

diff --git a/style.css b/style.css
@@ -50,6 +50,49 @@ body {
     opacity: 0;
 }
 
+#reload-container {
+    position: absolute;
+    bottom: calc(var(--spacing) * 4);
+    right: var(--spacing);
+
+    display: flex;
+    align-items: flex-end;
+}
+
+#reload-container > * {
+    display: block;
+}
+
+#reload-container #reload-link {
+    margin-left: calc(var(--spacing) / 2);
+
+    width: 48px;
+    height: 48px;
+
+    text-align: center;
+    cursor: pointer;
+
+    transition-property: background-color;
+    transition-duration: 0.15s;
+    transition-timing-function: ease-in-out;
+
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#reload-container #reload-link:hover {
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+#reload-container #reload-link img {
+    top: 24px;
+    position: relative;
+    margin: -1px auto 0;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
 #download-container {
     position: absolute;
     bottom: var(--spacing);
@@ -146,7 +189,7 @@ body {
     /*text-shadow: 0px 0px 2px black;*/
 }
 
-#tombstone #title a:hover {
+a#tombstone:hover {
     color: gray;
     text-decoration: underline;
 }
@@ -184,4 +227,17 @@ body {
     #logo img {
         filter: invert(0.87);
     }
+
+    #reload-container #reload-link:hover {
+        filter: invert(0.87);
+    }
+
+    #download-container #download-link:hover {
+        filter: invert(0.87);
+    }
+
+    a#tombstone:hover {
+        color: lightgrey;
+        text-decoration: underline;
+    }
 }