mod: оптимизация загрузки (svg-картинки подгружаются динамически при прокрутке, с джиттером и т.п.)

2026-09-25 21:35:57 +03:00
parent 5e9d4e0902
commit 7c44f2ef35
5 changed files with 196 additions and 55 deletions
@@ -0,0 +1,175 @@
+/**
+ * hypn0.js — Основной клиентский скрипт для hypn0.xyz
+ * Обеспечивает интеграцию HTMX, работу с Declarative Shadow DOM
+ * и ленивую асинхронную подгрузку SVG-халфтонов через Alpine.js.
+ */
+
+// Автоматическая передача CSRF-токена в AJAX-запросах HTMX
+document.addEventListener('htmx:configRequest', function(evt) {
+  var csrfInput = document.querySelector('[name=csrfmiddlewaretoken]');
+  var token = csrfInput ? csrfInput.value : null;
+  if (!token) {
+    var match = document.cookie.match(/csrftoken=([^;]+)/);
+    if (match) token = match[1];
+  }
+  if (token) {
+    evt.detail.headers['X-CSRFToken'] = token;
+  }
+});
+
+// Полифилл / обработка Declarative Shadow DOM для старых браузеров и динамических вставок
+function attachShadowRoots(root) {
+  (root || document).querySelectorAll('template[shadowrootmode]').forEach(function(tmpl) {
+    if (!tmpl.parentElement.shadowRoot) {
+      var mode = tmpl.getAttribute('shadowrootmode') || 'open';
+      var shadow = tmpl.parentElement.attachShadow({ mode: mode });
+      shadow.appendChild(tmpl.content.cloneNode(true));
+      tmpl.remove();
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  attachShadowRoots(document);
+});
+
+// Обработка HTMX swap: инициализация теневого корня и Alpine.js компонентов в новом DOM-фрагменте
+document.addEventListener('htmx:afterSwap', function(evt) {
+  attachShadowRoots(evt.detail.target);
+  if (window.Alpine && evt.detail && evt.detail.target) {
+    window.Alpine.initTree(evt.detail.target);
+  }
+});
+
+/**
+ * hypn0LazySvg — Alpine-компонент ленивой асинхронной загрузки SVG в Shadow DOM.
+ * Защищает от лагов быстрого скролла (AbortController + debounce),
+ * размазывает пиковые сетевые всплески (джиттер) и изолирует стили/ID.
+ */
+function hypn0LazySvg(svgUrl) {
+  return {
+    svgUrl: svgUrl || '',
+    loaded: false,
+    error: false,
+    _observer: null,
+    _controller: null,
+    _timer: null,
+
+    init() {
+      if (!this.svgUrl) return;
+      var el = this.$el;
+
+      if (!('IntersectionObserver' in window)) {
+        this.fetchSvg(el);
+        return;
+      }
+
+      var self = this;
+      this._observer = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (entry.isIntersecting) {
+            var jitter = Math.floor(Math.random() * 60);
+            self._timer = setTimeout(function() {
+              self.fetchSvg(el);
+            }, 120 + jitter);
+          } else {
+            if (self._timer) {
+              clearTimeout(self._timer);
+              self._timer = null;
+            }
+            if (self._controller) {
+              self._controller.abort();
+              self._controller = null;
+            }
+          }
+        });
+      }, {
+        rootMargin: '120px 0px 120px 0px',
+        threshold: 0.01
+      });
+
+      this._observer.observe(el);
+    },
+
+    fetchSvg(el) {
+      if (this.loaded) return;
+      if (this._controller) this._controller.abort();
+      this._controller = new AbortController();
+
+      var self = this;
+      fetch(this.svgUrl, { signal: this._controller.signal })
+        .then(function(resp) {
+          if (!resp.ok) throw new Error('HTTP ' + resp.status);
+          return resp.text();
+        })
+        .then(function(svgText) {
+          if (!svgText) return;
+
+          var shadow = el.shadowRoot;
+          if (!shadow) {
+            shadow = el.attachShadow({ mode: 'open' });
+          }
+
+          var style = document.createElement('style');
+          style.textContent = [
+            ':host {',
+            '  display: flex;',
+            '  width: 100%;',
+            '  height: 100%;',
+            '  align-items: center;',
+            '  justify-content: center;',
+            '  pointer-events: auto;',
+            '  opacity: 0;',
+            '  transition: opacity 0.35s ease-out;',
+            '}',
+            ':host(.is-loaded), :host([data-loaded]) {',
+            '  opacity: 1;',
+            '}',
+            'svg {',
+            '  width: 100%;',
+            '  height: 100%;',
+            '  object-fit: contain;',
+            '}',
+            ':host(:hover) svg, svg:hover {',
+            '  --hypn0-play: running !important;',
+            '}'
+          ].join('\n');
+
+          var parser = new DOMParser();
+          var doc = parser.parseFromString(svgText, 'image/svg+xml');
+          var svgEl = doc.querySelector('svg');
+
+          shadow.innerHTML = '';
+          shadow.appendChild(style);
+          if (svgEl) {
+            shadow.appendChild(svgEl);
+          } else {
+            var container = document.createElement('div');
+            container.innerHTML = svgText;
+            var innerSvg = container.querySelector('svg');
+            if (innerSvg) shadow.appendChild(innerSvg);
+          }
+
+          self.loaded = true;
+          self.error = false;
+          el.setAttribute('data-loaded', 'true');
+          el.classList.add('is-loaded');
+
+          if (self._observer) {
+            self._observer.disconnect();
+            self._observer = null;
+          }
+        })
+        .catch(function(err) {
+          if (err.name === 'AbortError') return;
+          self.error = true;
+        });
+    },
+
+    destroy() {
+      if (this._timer) clearTimeout(this._timer);
+      if (this._controller) this._controller.abort();
+      if (this._observer) this._observer.disconnect();
+    }
+  };
+}