datalog-theme 0.6.1 → 0.8.0

data/_includes/components/user-preferences.html

@@ -1,566 +0,0 @@
-{%- comment -%}
-User Preferences Panel Component
-Provides customizable reading experience controls
-
-Parameters:
-  - show_theme_toggle: Show dark/light theme toggle (default: true)
-  - show_font_size: Show font size controls (default: true)
-  - show_reading_mode: Show reading mode toggle (default: true)
-  - show_layout: Show layout preferences (default: true)
-  - position: Panel position (floating, sidebar) (default: floating)
-{%- endcomment -%}
-
-{%- assign show_theme_toggle = include.show_theme_toggle | default: true -%}
-{%- assign show_font_size = include.show_font_size | default: true -%}
-{%- assign show_reading_mode = include.show_reading_mode | default: true -%}
-{%- assign show_layout = include.show_layout | default: true -%}
-{%- assign position = include.position | default: "floating" -%}
-
-<div class="user-preferences user-preferences--{{ position }}"
-     data-user-preferences
-     aria-label="User preferences">
-
-  <button type="button"
-          class="user-preferences__trigger"
-          data-preferences-trigger
-          aria-label="Open preferences"
-          aria-expanded="false"
-          aria-controls="preferences-panel">
-    <svg xmlns="http://www.w3.org/2000/svg"
-         width="24"
-         height="24"
-         viewBox="0 0 24 24"
-         fill="none"
-         stroke="currentColor"
-         stroke-width="2"
-         stroke-linecap="round"
-         stroke-linejoin="round"
-         aria-hidden="true">
-      <circle cx="12" cy="12" r="3"></circle>
-      <path d="M12 1v6m0 6v6m7.071-13.071l-4.243 4.243m0 5.656l4.243 4.243M1 12h6m6 0h6m-13.071 7.071l4.243-4.243m5.656 0l4.243 4.243"></path>
-    </svg>
-    <span class="user-preferences__trigger-text">Preferences</span>
-  </button>
-
-  <div class="user-preferences__panel"
-       id="preferences-panel"
-       data-preferences-panel
-       role="dialog"
-       aria-modal="true"
-       aria-labelledby="preferences-title"
-       hidden>
-
-    <div class="user-preferences__header">
-      <h3 class="user-preferences__title" id="preferences-title">
-        <svg xmlns="http://www.w3.org/2000/svg"
-             width="20"
-             height="20"
-             viewBox="0 0 24 24"
-             fill="none"
-             stroke="currentColor"
-             stroke-width="2"
-             aria-hidden="true">
-          <circle cx="12" cy="12" r="3"></circle>
-          <path d="M12 1v6m0 6v6m7.071-13.071l-4.243 4.243m0 5.656l4.243 4.243M1 12h6m6 0h6m-13.071 7.071l4.243-4.243m5.656 0l4.243 4.243"></path>
-        </svg>
-        Customize Your Experience
-      </h3>
-
-      <button type="button"
-              class="user-preferences__close"
-              data-preferences-close
-              aria-label="Close preferences">
-        <svg xmlns="http://www.w3.org/2000/svg"
-             width="20"
-             height="20"
-             viewBox="0 0 24 24"
-             fill="none"
-             stroke="currentColor"
-             stroke-width="2"
-             aria-hidden="true">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </button>
-    </div>
-
-    <div class="user-preferences__content">
-
-      {%- if show_theme_toggle -%}
-        <div class="preference-section">
-          <h4 class="preference-section__title">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 width="18"
-                 height="18"
-                 viewBox="0 0 24 24"
-                 fill="none"
-                 stroke="currentColor"
-                 stroke-width="2"
-                 aria-hidden="true">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-            </svg>
-            Theme
-          </h4>
-
-          <div class="preference-section__control">
-            <div class="theme-toggle" data-theme-control>
-              <button type="button"
-                      class="theme-toggle__option"
-                      data-theme="light"
-                      aria-label="Light theme">
-                <svg xmlns="http://www.w3.org/2000/svg"
-                     width="20"
-                     height="20"
-                     viewBox="0 0 24 24"
-                     fill="none"
-                     stroke="currentColor"
-                     stroke-width="2">
-                  <circle cx="12" cy="12" r="5"></circle>
-                  <line x1="12" y1="1" x2="12" y2="3"></line>
-                  <line x1="12" y1="21" x2="12" y2="23"></line>
-                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                  <line x1="1" y1="12" x2="3" y2="12"></line>
-                  <line x1="21" y1="12" x2="23" y2="12"></line>
-                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                </svg>
-                <span>Light</span>
-              </button>
-
-              <button type="button"
-                      class="theme-toggle__option"
-                      data-theme="dark"
-                      aria-label="Dark theme">
-                <svg xmlns="http://www.w3.org/2000/svg"
-                     width="20"
-                     height="20"
-                     viewBox="0 0 24 24"
-                     fill="none"
-                     stroke="currentColor"
-                     stroke-width="2">
-                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                </svg>
-                <span>Dark</span>
-              </button>
-
-              <button type="button"
-                      class="theme-toggle__option"
-                      data-theme="auto"
-                      aria-label="Auto theme (system)">
-                <svg xmlns="http://www.w3.org/2000/svg"
-                     width="20"
-                     height="20"
-                     viewBox="0 0 24 24"
-                     fill="none"
-                     stroke="currentColor"
-                     stroke-width="2">
-                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-                  <line x1="8" y1="21" x2="16" y2="21"></line>
-                  <line x1="12" y1="17" x2="12" y2="21"></line>
-                </svg>
-                <span>Auto</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      {%- endif -%}
-
-      {%- if show_font_size -%}
-        <div class="preference-section">
-          <h4 class="preference-section__title">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 width="18"
-                 height="18"
-                 viewBox="0 0 24 24"
-                 fill="none"
-                 stroke="currentColor"
-                 stroke-width="2"
-                 aria-hidden="true">
-              <polyline points="4 7 4 4 20 4 20 7"></polyline>
-              <line x1="9" y1="20" x2="15" y2="20"></line>
-              <line x1="12" y1="4" x2="12" y2="20"></line>
-            </svg>
-            Font Size
-          </h4>
-
-          <div class="preference-section__control">
-            <div class="font-size-control" data-font-size-control>
-              <button type="button"
-                      class="font-size-control__button"
-                      data-action="decrease"
-                      aria-label="Decrease font size">
-                <span class="font-size-control__label">A-</span>
-              </button>
-
-              <div class="font-size-control__display">
-                <span data-font-size-value>100</span>%
-              </div>
-
-              <button type="button"
-                      class="font-size-control__button"
-                      data-action="increase"
-                      aria-label="Increase font size">
-                <span class="font-size-control__label">A+</span>
-              </button>
-
-              <button type="button"
-                      class="font-size-control__reset"
-                      data-action="reset"
-                      aria-label="Reset font size">
-                Reset
-              </button>
-            </div>
-          </div>
-        </div>
-      {%- endif -%}
-
-      {%- if show_reading_mode -%}
-        <div class="preference-section">
-          <h4 class="preference-section__title">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 width="18"
-                 height="18"
-                 viewBox="0 0 24 24"
-                 fill="none"
-                 stroke="currentColor"
-                 stroke-width="2"
-                 aria-hidden="true">
-              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-            </svg>
-            Reading Mode
-          </h4>
-
-          <div class="preference-section__control">
-            <label class="toggle-switch">
-              <input type="checkbox"
-                     data-reading-mode-toggle
-                     aria-label="Enable reading mode (focus mode)">
-              <span class="toggle-switch__slider"></span>
-              <span class="toggle-switch__label">
-                Focus mode (minimal distractions)
-              </span>
-            </label>
-          </div>
-        </div>
-      {%- endif -%}
-
-      {%- if show_layout -%}
-        <div class="preference-section">
-          <h4 class="preference-section__title">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 width="18"
-                 height="18"
-                 viewBox="0 0 24 24"
-                 fill="none"
-                 stroke="currentColor"
-                 stroke-width="2"
-                 aria-hidden="true">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="9" y1="3" x2="9" y2="21"></line>
-            </svg>
-            Layout
-          </h4>
-
-          <div class="preference-section__control">
-            <div class="layout-toggle" data-layout-control>
-              <button type="button"
-                      class="layout-toggle__option"
-                      data-layout="default"
-                      aria-label="Default layout">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-                </svg>
-                <span>Default</span>
-              </button>
-
-              <button type="button"
-                      class="layout-toggle__option"
-                      data-layout="wide"
-                      aria-label="Wide layout">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="2" y="6" width="20" height="12" rx="2"></rect>
-                </svg>
-                <span>Wide</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      {%- endif -%}
-
-    </div>
-
-    <div class="user-preferences__footer">
-      <button type="button"
-              class="user-preferences__reset-all"
-              data-reset-all-preferences
-              aria-label="Reset all preferences to defaults">
-        <svg xmlns="http://www.w3.org/2000/svg"
-             width="16"
-             height="16"
-             viewBox="0 0 24 24"
-             fill="none"
-             stroke="currentColor"
-             stroke-width="2"
-             aria-hidden="true">
-          <polyline points="1 4 1 10 7 10"></polyline>
-          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
-        </svg>
-        Reset All to Defaults
-      </button>
-    </div>
-
-  </div>
-
-  <div class="user-preferences__backdrop"
-       data-preferences-backdrop
-       hidden></div>
-</div>
-
-<script>
-(function() {
-  'use strict';
-
-  const STORAGE_KEY = 'userPreferences';
-  const DEFAULTS = {
-    theme: 'auto',
-    fontSize: 100,
-    readingMode: false,
-    layout: 'default'
-  };
-
-  class UserPreferences {
-    constructor() {
-      this.preferences = this.loadPreferences();
-      this.panel = document.querySelector('[data-user-preferences]');
-      if (!this.panel) return;
-
-      this.initElements();
-      this.attachEventListeners();
-      this.applyPreferences();
-    }
-
-    initElements() {
-      this.trigger = this.panel.querySelector('[data-preferences-trigger]');
-      this.panelContent = this.panel.querySelector('[data-preferences-panel]');
-      this.backdrop = this.panel.querySelector('[data-preferences-backdrop]');
-      this.closeBtn = this.panel.querySelector('[data-preferences-close]');
-    }
-
-    attachEventListeners() {
-      // Open/close panel
-      this.trigger?.addEventListener('click', () => this.togglePanel());
-      this.closeBtn?.addEventListener('click', () => this.closePanel());
-      this.backdrop?.addEventListener('click', () => this.closePanel());
-
-      // ESC key to close
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && !this.panelContent?.hidden) {
-          this.closePanel();
-        }
-      });
-
-      // Theme control
-      const themeButtons = this.panel.querySelectorAll('[data-theme]');
-      themeButtons.forEach(btn => {
-        btn.addEventListener('click', (e) => {
-          const theme = e.currentTarget.dataset.theme;
-          this.setTheme(theme);
-        });
-      });
-
-      // Font size control
-      const fontSizeControl = this.panel.querySelector('[data-font-size-control]');
-      if (fontSizeControl) {
-        fontSizeControl.addEventListener('click', (e) => {
-          const button = e.target.closest('button');
-          if (!button) return;
-
-          const action = button.dataset.action;
-          if (action === 'increase') this.changeFontSize(10);
-          else if (action === 'decrease') this.changeFontSize(-10);
-          else if (action === 'reset') this.resetFontSize();
-        });
-      }
-
-      // Reading mode toggle
-      const readingModeToggle = this.panel.querySelector('[data-reading-mode-toggle]');
-      readingModeToggle?.addEventListener('change', (e) => {
-        this.setReadingMode(e.target.checked);
-      });
-
-      // Layout control
-      const layoutButtons = this.panel.querySelectorAll('[data-layout]');
-      layoutButtons.forEach(btn => {
-        btn.addEventListener('click', (e) => {
-          const layout = e.currentTarget.dataset.layout;
-          this.setLayout(layout);
-        });
-      });
-
-      // Reset all
-      const resetAllBtn = this.panel.querySelector('[data-reset-all-preferences]');
-      resetAllBtn?.addEventListener('click', () => this.resetAll());
-    }
-
-    togglePanel() {
-      const isHidden = this.panelContent.hidden;
-      if (isHidden) {
-        this.openPanel();
-      } else {
-        this.closePanel();
-      }
-    }
-
-    openPanel() {
-      this.panelContent.hidden = false;
-      this.backdrop.hidden = false;
-      this.trigger?.setAttribute('aria-expanded', 'true');
-      document.body.style.overflow = 'hidden';
-
-      // Focus first interactive element
-      const firstButton = this.panelContent.querySelector('button');
-      firstButton?.focus();
-    }
-
-    closePanel() {
-      this.panelContent.hidden = true;
-      this.backdrop.hidden = true;
-      this.trigger?.setAttribute('aria-expanded', 'false');
-      document.body.style.overflow = '';
-      this.trigger?.focus();
-    }
-
-    setTheme(theme) {
-      this.preferences.theme = theme;
-      this.savePreferences();
-      this.applyTheme();
-      this.updateThemeButtons();
-    }
-
-    applyTheme() {
-      const { theme } = this.preferences;
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
-
-      document.body.classList.toggle('dark-mode', isDark);
-      document.body.dataset.theme = isDark ? 'dark' : 'light';
-      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
-    }
-
-    updateThemeButtons() {
-      const buttons = this.panel.querySelectorAll('[data-theme]');
-      buttons.forEach(btn => {
-        const isActive = btn.dataset.theme === this.preferences.theme;
-        btn.classList.toggle('theme-toggle__option--active', isActive);
-        btn.setAttribute('aria-pressed', isActive);
-      });
-    }
-
-    changeFontSize(delta) {
-      const newSize = Math.max(80, Math.min(140, this.preferences.fontSize + delta));
-      this.preferences.fontSize = newSize;
-      this.savePreferences();
-      this.applyFontSize();
-    }
-
-    resetFontSize() {
-      this.preferences.fontSize = DEFAULTS.fontSize;
-      this.savePreferences();
-      this.applyFontSize();
-    }
-
-    applyFontSize() {
-      const { fontSize } = this.preferences;
-      document.documentElement.style.setProperty('--user-font-size', `${fontSize}%`);
-
-      const display = this.panel.querySelector('[data-font-size-value]');
-      if (display) display.textContent = fontSize;
-    }
-
-    setReadingMode(enabled) {
-      this.preferences.readingMode = enabled;
-      this.savePreferences();
-      this.applyReadingMode();
-    }
-
-    applyReadingMode() {
-      document.body.classList.toggle('reading-mode', this.preferences.readingMode);
-
-      const toggle = this.panel.querySelector('[data-reading-mode-toggle]');
-      if (toggle) toggle.checked = this.preferences.readingMode;
-    }
-
-    setLayout(layout) {
-      this.preferences.layout = layout;
-      this.savePreferences();
-      this.applyLayout();
-      this.updateLayoutButtons();
-    }
-
-    applyLayout() {
-      document.body.dataset.layout = this.preferences.layout;
-    }
-
-    updateLayoutButtons() {
-      const buttons = this.panel.querySelectorAll('[data-layout]');
-      buttons.forEach(btn => {
-        const isActive = btn.dataset.layout === this.preferences.layout;
-        btn.classList.toggle('layout-toggle__option--active', isActive);
-        btn.setAttribute('aria-pressed', isActive);
-      });
-    }
-
-    resetAll() {
-      if (confirm('Reset all preferences to defaults?')) {
-        this.preferences = { ...DEFAULTS };
-        this.savePreferences();
-        this.applyPreferences();
-      }
-    }
-
-    applyPreferences() {
-      this.applyTheme();
-      this.applyFontSize();
-      this.applyReadingMode();
-      this.applyLayout();
-      this.updateThemeButtons();
-      this.updateLayoutButtons();
-    }
-
-    loadPreferences() {
-      try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        return stored ? { ...DEFAULTS, ...JSON.parse(stored) } : { ...DEFAULTS };
-      } catch (e) {
-        console.error('Failed to load preferences:', e);
-        return { ...DEFAULTS };
-      }
-    }
-
-    savePreferences() {
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.preferences));
-      } catch (e) {
-        console.error('Failed to save preferences:', e);
-      }
-    }
-  }
-
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => new UserPreferences());
-  } else {
-    new UserPreferences();
-  }
-
-  // Listen for system theme changes
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    const prefs = new UserPreferences();
-    if (prefs.preferences.theme === 'auto') {
-      prefs.applyTheme();
-    }
-  });
-})();
-</script>