hematite 0.0.10 → 0.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c347dece80da3456bf6c8cd42bc6daafc81212dd102ab9fffb664b4c49799e4
-  data.tar.gz: 6218c2a7ee4243942111a7a3e7dce23bfe1be5c96304a1fc671e044f16ab4906
+  metadata.gz: c5f6a0cdf074d0025f0cf3031037a4dc365af38f99aa811578f3d88f0c356175
+  data.tar.gz: 533d5d2c8897c2985977971c5a6ca66552df1edee4bae22c9184750e97478007
 SHA512:
-  metadata.gz: cdadf907f31e447adbf62dcd7dd849d56418de2a7ba975d9460d5248494065ff4ab5ad12355c60f4858928e9a7e1099434140e14e970a471bf2aa25664cf4aca
-  data.tar.gz: '093443b534ad09677b988852815e543e027060407de67399ca46b1006e28b174ecaaaf3181d52e87750bbcadf20ed928d2bc71fb77a01f3d32276ac0a1f51f61'
+  metadata.gz: be650d2182b5d2dccdc6bccc3837691246f94bf8271bda4343cd923e7da5eb2c9fa3ddc960f35d2711c13cf51b574f3b27eddd47f31afc3c8688e231ab22afe7
+  data.tar.gz: 7ebc7f1a7902040eb224a1adb08da8115207303e028e4bad22d608f061e11a3f5450da65c2e572da68a10317c835ba73469d1ebef1c7a9f2a182a5567eb4f80f

data/_sass/_nav.scss

@@ -2,7 +2,7 @@
 
 $header-z-index: 100;
 
-header {
+body > header {
     position: sticky;
     top: 0;
     z-index: $header-z-index;
@@ -41,6 +41,33 @@ header {
     }
 }
 
+:root.minimizedNavHeader body > header {
+    > *:not(#toggle_sidebar_btn) {
+        opacity: 0;
+        display: inline-block;
+        transition: opacity 0.5s ease;
+    }
+
+    word-wrap: break-word;
+    width: var(--header-height);
+    padding: 0;
+    transition: width 0.5s ease;
+
+    position: fixed;
+
+    // The minimizedNavHeader class is added after page load. Make the
+    // transition less jarring.
+    animation: fade-in 0.5s ease 1;
+}
+
+:root.minimizedNavHeader.hasOpenSidebar body > header {
+    > *:not(#toggle_sidebar_btn) {
+        opacity: 1;
+    }
+
+    width: calc(var(--nav-width) + #{2 * $navbar-padding});
+}
+
 nav.sidebar {
     position: fixed;
     top: var(--header-height);
@@ -58,7 +85,7 @@ nav.sidebar {
     color: var(--primary-text-color);
     background-color: var(--primary-background-color);
     box-shadow: 0 0 2px var(--shadow-color-light);
-    padding: 10px;
+    padding: $navbar-padding;
 
     z-index: $header-z-index - 1;
 

data/_sass/_sizes.scss

@@ -1,6 +1,7 @@
 
 $site-content-preferred-width: 700px;
 $content-main-padding: 30px;
+$navbar-padding: 10px;
 
 // CSS variables
 :root {

data/assets/html/settings.html

@@ -30,6 +30,9 @@ noindex: true
         <label id="page_theme_lbl" for="page_theme">settings_theme_label</label>
         <select id="page_theme"></select>
     </div>
+    <div>
+        <label id="page_minimize_header_lbl" for="minimize_page_hdr">settings_minimize_header</label>
+        <input type="checkbox" id="minimize_page_hdr"/>
 </fieldset>
 
 <script type="module">
@@ -39,7 +42,7 @@ import { stringLookup } from "{{ 'assets/js/strings.mjs' | relative_url }}";
 let settingsTextElemIDs = [
     `settings_header`, `settings_description`, `font_legend`,
     `font_family_lbl`, `font_size_lbl`, `theme_legend`,
-    `page_theme_lbl`,
+    `page_theme_lbl`, `page_minimize_header_lbl`,
 ];
 
 // Localize all descriptive settings elements (each should contian the
@@ -52,6 +55,7 @@ for (const id of settingsTextElemIDs) {
 let fontSizeSelect = document.querySelector("#font_size");
 let fontFamilySelect = document.querySelector("#font_family");
 let pageThemeSelect = document.querySelector("#page_theme");
+let minimizeHeaderCheckbox = document.querySelector("#minimize_page_hdr");
 
 pageThemeSelect.innerHTML =
 `
@@ -87,8 +91,13 @@ pageThemeSelect.oninput = () => {
     Settings.setTheme(pageThemeSelect.value);
 };
 
+minimizeHeaderCheckbox.oninput = () => {
+    Settings.setHeaderMinimized(minimizeHeaderCheckbox.checked);
+};
+
 pageThemeSelect.value = Settings.getTheme();
 fontFamilySelect.value = Settings.getFontFamily();
 fontSizeSelect.value = Settings.getFontSize();
+minimizeHeaderCheckbox.checked = Settings.getHeaderMinimized();
 
 </script>

data/assets/js/Settings.mjs

@@ -1,5 +1,9 @@
 ---
 ---
+import AsyncUtil from "./AsyncUtil.mjs";
+import AnimationUtil from "./AnimationUtil.mjs";
+
+const THEME_TRANSITION_TIME = 500; // ms
 
 class Settings {
     THEME_AUTO = 'auto';
@@ -18,6 +22,7 @@ class Settings {
     FONT_SIZE_KEY_ = 'hematite-setting-font-size';
     FONT_FAMILY_KEY_ = 'hematite-setting-font-family';
     THEME_KEY_ = 'hematite-setting-theme';
+    HEADER_MINIMIZED_KEY_ = 'hematite-setting-minimize-header';
 
     constructor() {
     }
@@ -43,6 +48,11 @@ class Settings {
         return this.getSetting_(this.FONT_SIZE_KEY_) ?? this.FONT_SIZE_DEFAULT;
     }
 
+    getHeaderMinimized() {
+        let minimizedStr = this.getSetting_(this.HEADER_MINIMIZED_KEY_) ?? {{ site.hematite.minimize_header | default: "false" | jsonify }};
+        return minimizedStr == "true";
+    }
+
     setFontSize(sizeOption) {
         this.setSetting_(this.FONT_SIZE_KEY_, sizeOption);
     }
@@ -55,6 +65,10 @@ class Settings {
         this.setSetting_(this.THEME_KEY_, themeOption);
     }
 
+    setHeaderMinimized(minimize) {
+        this.setSetting_(this.HEADER_MINIMIZED_KEY_, `${minimize}`);
+    }
+
     getFontSizePt_() {
         let fontSizeOption = this.getFontSize();
 
@@ -87,7 +101,9 @@ class Settings {
         return this.getTheme() == this.THEME_LIGHT;
     }
 
-    applySettings() {
+    async applySettings() {
+        document.documentElement.classList.add("changingTheme");
+
         // Clean up previous changes. We might be re-applying styles.
         document.documentElement.classList.remove("lightTheme");
         document.documentElement.classList.remove("darkTheme");
@@ -99,7 +115,12 @@ class Settings {
         }
 
 
-        let styleHTML = '';
+        let styleHTML =
+        `
+            :root.changingTheme * {
+                transition: ${THEME_TRANSITION_TIME}ms ease all;
+            }
+        `;
 
         // Font family
         if (this.usingNonDefaultFontFamily_()) {
@@ -121,6 +142,9 @@ class Settings {
             `;
         }
 
+        this.style_.innerHTML = styleHTML;
+        document.documentElement.appendChild(this.style_);
+
         // Theme
         if (this.forcingDarkTheme_()) {
             document.documentElement.classList.add("darkTheme");
@@ -129,8 +153,28 @@ class Settings {
             document.documentElement.classList.add("lightTheme");
         }
 
-        this.style_.innerHTML = styleHTML;
-        document.documentElement.appendChild(this.style_);
+        if (this.getHeaderMinimized()) {
+            // Run roughly in parallel
+            (async () => {
+                let header = document.querySelector("body > header");
+                if (header) {
+                    await AnimationUtil.collapseOutVert(header, THEME_TRANSITION_TIME / 2);
+                }
+
+                document.documentElement.classList.add("minimizedNavHeader");
+
+                // Animate the header.
+                if (header) {
+                    await AnimationUtil.expandInVert(header, THEME_TRANSITION_TIME / 2);
+                }
+            })();
+        }
+        else {
+            document.documentElement.classList.remove("minimizedNavHeader");
+        }
+
+        await AsyncUtil.waitMillis(THEME_TRANSITION_TIME);
+        document.documentElement.classList.remove("changingTheme");
     }
 }
 

data/assets/js/main.mjs

@@ -17,7 +17,7 @@ addEventListener("load", () => {
 // After loading elements, but before loading elements like images.
 addEventListener("DOMContentLoaded", () => {
     handleSidebar();
-
-    // Apply user-specified settings
-    Settings.applySettings();
 });
+
+// Apply user-specified settings
+Settings.applySettings();

data/assets/js/sidebar.mjs

@@ -17,11 +17,11 @@ function handleSidebar() {
     const setSidebarOpen = (open) => {
         if (!open) {
             sidebar.classList.remove(`open`);
-            document.scrollingElement?.classList.remove(`hasOpenSidebar`);
+            document.documentElement.classList.remove(`hasOpenSidebar`);
         }
         else {
             sidebar.classList.add(`open`);
-            document.scrollingElement?.classList.add(`hasOpenSidebar`);
+            document.documentElement.classList.add(`hasOpenSidebar`);
         }
     };
 

data/assets/string_data/en.mjs

@@ -51,4 +51,5 @@ export default {
     page_theme_auto: 'Automatic',
     page_theme_dark: 'Dark Theme',
     page_theme_light: 'Light Theme',
+    settings_minimize_header: 'Hide Header: '
 };

data/assets/string_data/es.mjs

@@ -49,4 +49,5 @@ export default {
     page_theme_auto: 'Automático',
     page_theme_dark: 'Oscuro',
     page_theme_light: 'Brillante',
+    settings_minimize_header: 'Título escondido: '
 };

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hematite
 version: !ruby/object:Gem::Version
-  version: 0.0.10
+  version: 0.0.11
 platform: ruby
 authors:
 - Henry Heino