@andreyshpigunov/x 0.3.72

package/index.js

@@ -0,0 +1 @@
+import './dist/x.js';

package/jest.config.mjs

@@ -0,0 +1,7 @@
+// jest.config.mjs
+export default {
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+  },
+  testEnvironment: 'jsdom'
+};

package/jsdoc.json

@@ -0,0 +1,11 @@
+{
+  "source": {
+    "include": ["src/components/x"],
+    "includePattern": ".js$"
+  },
+  "opts": {
+    "destination": "./docs",
+    "recurse": true,
+    "template": "node_modules/docdash"
+  }
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@andreyshpigunov/x",
+	"version": "0.3.72",
+	"devDependencies": {
+		"@babel/preset-env": "^7.26.9",
+		"@jest/globals": "^29.7.0",
+		"@parcel/logger": "*",
+		"autoprefixer": "^10.1.0",
+		"babel-jest": "^29.7.0",
+		"cssnano": "^5.0.2",
+		"docdash": "^2.0.2",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"jsdoc": "^4.0.4",
+		"parcel": "^2.0.1",
+		"postcss": "^8.5",
+		"postcss-cli": "^8.3.0",
+		"postcss-custom-media": "^11.0.1",
+		"postcss-custom-selectors": "^8.0.1",
+		"postcss-each": "^1.1.0",
+		"postcss-extend": "^1.0.5",
+		"postcss-for": "^2.1.1",
+		"postcss-import": "^14.0.2",
+		"postcss-nesting": "^10.2.0",
+		"postcss-simple-vars": "^7.0.1"
+	},
+	"type": "module",
+	"scripts": {
+		"build-css": "postcss src/css/*.css -u postcss-import -u postcss-nesting -u postcss-custom-media -u postcss-custom-selectors -u postcss-extend -u postcss-for -u postcss-each -u autoprefixer -u cssnano --no-map -d dist/",
+		"build-js": "parcel build src/js/*.js --no-source-maps --no-cache --dist-dir dist/",
+		"build": "npm run build-css && npm run build-js",
+		"test": "exit 0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/andreyshpigunov/x.git"
+	},
+	"author": "Andrey Shpigunov",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/andreyshpigunov/x/issues"
+	},
+	"homepage": "https://andreyshpigunov.github.io/x/",
+	"browserslist": [
+		"defaults"
+	],
+	"dependencies": {
+		"alpinejs": "^3.14.1"
+	}
+}

package/src/components/x/animate.js

@@ -0,0 +1,296 @@
+/**
+ * @fileoverview Scroll-based animation controller.
+ *
+ * Observes elements with `[x-animate]` attribute and applies classes or executes functions
+ * based on the element's position in the viewport or parent container.
+ *
+ * Exported singleton: `animate`
+ *
+ * Public API:
+ *
+ * - `animate.init()` – Initialize/reinitialize animation tracking for `[x-animate]` elements.
+ *
+ * Example usage:
+ *
+ * <div x-animate='{
+ *   "parent": "#scroll-container",
+ *   "trigger": ".trigger",
+ *   "start": "120vh",
+ *   "end": "0vh",
+ *   "functionName": "coverOut",
+ *   "class": "fixed",
+ *   "classRemove": true
+ * }'></div>
+ *
+ * @author Andrey Shpigunov
+ * @version 0.3
+ * @since 2025-07-18
+ */
+
+import { lib } from './lib';
+
+/**
+ * Scroll-based animation controller.
+ */
+class Animate {
+
+  constructor() {
+    /**
+     * Prevents multiple `requestAnimationFrame` calls.
+     * @type {boolean}
+     * @private
+     */
+    this._ticking = false;
+
+    /**
+     * Array of animation items parsed from `[x-animate]` elements.
+     * @type {Object[]}
+     * @private
+     */
+    this._animations = [];
+
+    /**
+     * Bound scroll handler for `requestAnimationFrame`.
+     * @type {Function}
+     * @private
+     */
+    this._scroll = this._scroll.bind(this);
+
+    /**
+     * Bound raw scroll/resize handler.
+     * @type {Function}
+     * @private
+     */
+    this._scrollHandler = this._scrollHandler.bind(this);
+
+    /**
+     * Indicates whether `init()` was called.
+     * @type {boolean}
+     * @private
+     */
+    this._initialized = false;
+
+    /**
+     * Set of parent elements being listened to for scroll.
+     * @type {Set<HTMLElement|Window>}
+     * @private
+     */
+    this._parents = new Set();
+
+    /**
+     * NodeList of elements with `[x-animate]`.
+     * @type {NodeListOf<HTMLElement>|null}
+     * @private
+     */
+    this._elements = null;
+  }
+
+  /**
+   * Initializes or reinitializes animation tracking for `[x-animate]` elements.
+   */
+  init() {
+    this._cleanup();
+
+    this._elements = lib.qsa('[x-animate]');
+    if (!this._elements?.length) return;
+
+    this._parseElementsAnimations();
+    if (!this._animations.length) return;
+
+    this._setupListeners();
+    this._initialized = true;
+  }
+
+  /**
+   * Removes all listeners and resets internal state.
+   *
+   * @private
+   */
+  _cleanup() {
+    if (!this._initialized) return;
+
+    this._parents.forEach(parent => {
+      parent.removeEventListener('scroll', this._scrollHandler);
+    });
+
+    window.removeEventListener('resize', this._scrollHandler);
+
+    this._ticking = false;
+    this._animations = [];
+    this._parents = new Set();
+    this._elements = null;
+    this._initialized = false;
+  }
+
+  /**
+   * Parses `[x-animate]` attributes and creates animation configuration for each element.
+   *
+   * @private
+   */
+  _parseElementsAnimations() {
+    this._elements.forEach(element => {
+      try {
+        const json = JSON.parse(element.getAttribute('x-animate'));
+        const item = {
+          element,
+          trigger: lib.qs(json.trigger) || element,
+          parent: lib.qs(json.parent) || window,
+          start: json.start,
+          end: json.end || false,
+          class: json.class,
+          classRemove: json.classRemove !== false,
+          functionName: json.functionName,
+          lockedIn: false,
+          lockedOut: false,
+          log: json.log || false
+        };
+        this._animations.push(item);
+      } catch (err) {
+        console.error('Invalid JSON in x-animate attribute:', element, err);
+      }
+    });
+  }
+
+  /**
+   * Sets up scroll and resize event listeners for unique parent containers.
+   *
+   * @private
+   */
+  _setupListeners() {
+    for (const item of this._animations) {
+      if (this._parents.has(item.parent)) continue;
+      this._parents.add(item.parent);
+      item.parent.addEventListener('scroll', this._scrollHandler);
+    }
+
+    window.addEventListener('resize', this._scrollHandler);
+
+    if (document.readyState === 'complete') {
+      requestAnimationFrame(() => this._scroll());
+    } else {
+      window.addEventListener('load', () => this._scroll(), { once: true });
+    }
+  }
+
+  /**
+   * Raw scroll/resize event handler with throttling via `requestAnimationFrame`.
+   *
+   * @private
+   */
+  _scrollHandler() {
+    if (!this._ticking) {
+      this._ticking = true;
+      window.requestAnimationFrame(() => {
+        this._scroll();
+        this._ticking = false;
+      });
+    }
+  }
+
+  /**
+   * Main animation logic executed on scroll or resize.
+   *
+   * Calculates element position, progress, adds/removes classes, and calls custom functions.
+   *
+   * @private
+   */
+  _scroll() {
+    this._animations.forEach(item => {
+      const triggerRect = item.trigger.getBoundingClientRect();
+      const parentRect = item.parent !== window ? item.parent.getBoundingClientRect() : null;
+
+      const top = triggerRect.top - (parentRect ? parentRect.top : 0);
+      const start = this._2px(item.start, item.parent);
+      const end = this._2px(item.end, item.parent);
+      item.duration = isNaN(end) ? 0 : start - end;
+
+      if (item.log) console.log(top, start, end, item);
+
+      if (!isNaN(start) && !isNaN(end)) {
+        // Case: both start and end defined
+        if (top <= start && top >= end) {
+          item.lockedOut = false;
+          if (item.class) item.element.classList.add(item.class);
+
+          if (typeof window[item.functionName] === 'function') {
+            item.progress = ((start - top) / item.duration).toFixed(4);
+            window[item.functionName](item);
+          }
+
+        } else {
+          if (item.class && item.classRemove === true && item.element.classList.contains(item.class)) {
+            item.element.classList.remove(item.class);
+          }
+
+          if (!item.lockedOut && typeof window[item.functionName] === 'function') {
+            if (top >= start) {
+              item.progress = 0;
+              window[item.functionName](item);
+              item.lockedOut = true;
+            }
+            if (top <= end) {
+              item.progress = 1;
+              window[item.functionName](item);
+              item.lockedOut = true;
+            }
+          }
+        }
+
+      } else if (!isNaN(start)) {
+        // Case: only start defined
+        if (top <= start) {
+          item.lockedOut = false;
+          if (item.class) item.element.classList.add(item.class);
+
+          if (!item.lockedIn && typeof window[item.functionName] === 'function') {
+            item.progress = 1;
+            window[item.functionName](item);
+            item.lockedIn = true;
+          }
+
+        } else {
+          item.lockedIn = false;
+
+          if (item.class && item.classRemove === true && item.element.classList.contains(item.class)) {
+            item.element.classList.remove(item.class);
+          }
+
+          if (!item.lockedOut && typeof window[item.functionName] === 'function') {
+            if (top >= start) {
+              item.progress = 0;
+              window[item.functionName](item);
+              item.lockedOut = true;
+            }
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * Converts a value like '120vh', '50%' or '300' into pixels.
+   *
+   * @param {string|number} value - The value to convert.
+   * @param {HTMLElement|Window} [parent=window] - The context for percentage calculations.
+   * @returns {number} Pixel value.
+   * @private
+   */
+  _2px(value, parent = window) {
+    if (/(%|vh)/.test(value)) {
+      const height = parent === window
+        ? document.documentElement.clientHeight
+        : parent.clientHeight;
+
+      value = value.replace(/(vh|%)/, '');
+      return (height * parseFloat(value)) / 100;
+    } else {
+      return parseFloat(value);
+    }
+  }
+}
+
+/**
+ * Singleton export of the Animate controller.
+ * @type {Animate}
+ */
+export const animate = new Animate();

package/src/components/x/appear.js

@@ -0,0 +1,158 @@
+/**
+ * @fileoverview Element appearing and visibility observer.
+ *
+ * Detects when elements enter or leave the viewport and applies CSS classes accordingly.
+ * Intended for triggering animations, lazy loading, or visual effects.
+ *
+ * Exported singleton: `appear`
+ *
+ * Public API:
+ *
+ * - `appear.init(config)` – Initializes or reinitializes the observer.
+ *
+ * Usage example:
+ *
+ * HTML:
+ * <div x-appear>Hello!</div>
+ *
+ * Behavior:
+ * - Adds `appeared` class once when the element first appears.
+ * - Adds `visible` class while the element is currently visible.
+ *
+ * Configuration via `init()`:
+ * - `appearedClass` – Custom class for the first appearance (default: 'appeared').
+ * - `visibleClass` – Custom class for current visibility (default: 'visible').
+ * - `once` – If `true`, stops observing the element after first appearance.
+ *
+ * Events:
+ * - `visible` – Dispatched when the element becomes visible.
+ * - `invisible` – Dispatched when the element leaves the viewport.
+ *
+ * @author Andrey Shpigunov
+ * @version 0.3
+ * @since 2025-07-18
+ */
+
+import { lib } from './lib';
+
+/**
+ * Element appearing and visibility observer.
+ *
+ * Uses IntersectionObserver to track elements with [x-appear] attribute and manage classes.
+ */
+class Appear {
+
+  constructor() {
+    /**
+     * List of currently observed elements.
+     * @type {HTMLElement[]}
+     * @private
+     */
+    this._targets = [];
+
+    /**
+     * Instance of IntersectionObserver.
+     * @type {IntersectionObserver|null}
+     * @private
+     */
+    this._observer = null;
+
+    /**
+     * Observer options and behavior configuration.
+     * @type {{
+     *   appearedClass: string,
+     *   visibleClass: string,
+     *   once: boolean
+     * }}
+     * @private
+     */
+    this._options = {
+      appearedClass: 'appeared',
+      visibleClass: 'visible',
+      once: false
+    };
+  }
+
+  /**
+   * Initializes or reinitializes the observer and starts observing elements.
+   *
+   * @param {Object} [config={}] - Optional configuration object.
+   * @param {string} [config.appearedClass='appeared'] - Class added once when the element first appears.
+   * @param {string} [config.visibleClass='visible'] - Class added while the element is visible.
+   * @param {boolean} [config.once=false] - If true, stops observing after first appearance.
+   *
+   * @example
+   * appear.init({ once: true });
+   */
+  init(config = {}) {
+    if (!('IntersectionObserver' in window)) return;
+
+    this._options = { ...this._options, ...config };
+
+    // Disconnect previous observer to prevent leaks
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+
+    this._targets = lib.qsa('[x-appear]');
+
+    if (this._targets.length) {
+      this._observer = new IntersectionObserver(this._observerCallback.bind(this));
+
+      this._targets.forEach(item => {
+        this._observer.observe(item);
+      });
+    }
+  }
+
+  /**
+   * IntersectionObserver callback. Handles visibility changes for tracked elements.
+   *
+   * @param {IntersectionObserverEntry[]} entries - Array of observer entries.
+   * @private
+   */
+  _observerCallback(entries) {
+    const { appearedClass, visibleClass, once } = this._options;
+
+    for (const entry of entries) {
+      const target = entry.target;
+
+      const hasAppeared = appearedClass != null;
+      const hasVisible = visibleClass != null;
+
+      if (entry.isIntersecting) {
+        // First time visibility — add appeared class
+        if (hasAppeared && !target.classList.contains(appearedClass)) {
+          target.classList.add(appearedClass);
+
+          if (once) {
+            this._observer.unobserve(target);
+          }
+        }
+
+        // While visible — add visible class and dispatch event
+        if (hasVisible) {
+          target.classList.add(visibleClass);
+          target.dispatchEvent(new CustomEvent('visible', {
+            detail: { appeared: true }
+          }));
+        }
+      } else {
+        // When leaving viewport — remove visible class and dispatch event
+        if (hasVisible && target.classList.contains(visibleClass)) {
+          target.classList.remove(visibleClass);
+          target.dispatchEvent(new CustomEvent('invisible', {
+            detail: { appeared: true }
+          }));
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Singleton export of the Appear observer.
+ * @type {Appear}
+ */
+export const appear = new Appear();

package/src/components/x/autocomplete.js

@@ -0,0 +1,150 @@
+import { lib } from './lib';
+
+class Autocomplete {
+  
+  emptyStateHtml = `<li><span class="op4">Ничего не найдено</span></li>`;
+  defaultStateHtml = `<li><span class="op4">Начните печатать</span></li>`;
+  loadingStateHtml = `<li><span class="op4">Загрузка...</span></li>`;
+  
+  init(dropdownId, options) {
+    this.emptyStateHtml = options.emptyStateHtml || this.emptyStateHtml;
+    this.defaultStateHtml = options.defaultStateHtml || this.defaultStateHtml;
+    this.loadingStateHtml = options.loadingStateHtml || this.loadingStateHtml;
+    
+    this.dropdown = x.id(dropdownId);
+    this.field = x.qs('[x-dropdown-open]', this.dropdown);
+    this.list = x.qs('[x-dropdown]', this.dropdown);
+    
+    this.data = options.data || null;
+    this.loadData = options.loadData || null;
+    this.mapData = options.mapData || null;
+    this.renderItem = options.renderItem || null;
+    this.onSelect = options.onSelect || null;
+    this.resetFunc = options.resetFunc || null;
+    
+    this._loadData = this._loadData.bind(this);
+    this.debouncedLoadData = x.lib.debounce(this._loadData, 400);
+    
+    this.keyHandler = this._keyHandler.bind(this);
+    this.clickHandler = this._clickHandler.bind(this);
+    this.hideHandler = this._hideHandler.bind(this);
+    
+    if (this.field?.value == '') {
+      this._reset();
+    } else {
+      this._defaultState();
+    }
+    this.field.addEventListener('focus', this.debouncedLoadData);
+    this.field.addEventListener('input', this.debouncedLoadData);
+    this.field.addEventListener('keydown', this.keyHandler);
+    this.list.addEventListener('click', this.clickHandler);
+    this.dropdown.addEventListener('dropdown:afterhide', this.hideHandler);
+  }
+  
+  destroy() {
+    this._reset();
+    this.field.removeEventListener('focus', this.debouncedLoadData);
+    this.field.removeEventListener('input', this.debouncedLoadData);
+    this.field.removeEventListener('keydown', this.keyHandler);
+    this.list.removeEventListener('click', this.clickHandler);
+    this.dropdown.removeEventListener('dropdown:afterhide', this.hideHandler);
+  }
+  
+  _keyHandler(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.field.blur();
+    }
+  }
+  
+  _clickHandler(e) {
+    if (this._clicked) return;
+    this._clicked = true;
+    
+    const el = e.target.closest('[data-item]');
+    if (el) {
+      try {
+        const item = JSON.parse(el.dataset.item);
+        this.onSelect(item);
+      } catch(err) {
+        console.error('Error parsing JSON');
+      }
+    } else {
+      console.log('Empty data-item');
+    }
+  }
+  
+  _hideHandler() {
+    if (this._clicked) {
+      this._clicked = false;
+      return;
+    }
+    
+    if (!this.data || !this.data.length) {
+      this._reset();
+      return;
+    }
+    this._loadingState();
+    this.onSelect(this.data[0]);
+  }
+  
+  _loadingState() {
+    x.lib.render(this.list, this.loadingStateHtml);
+  }
+  
+  _emptyState() {
+    x.lib.render(this.list, this.emptyStateHtml);
+  }
+  
+  _defaultState() {
+    x.lib.render(this.list, this.defaultStateHtml);
+  }
+  
+  _reset() {
+    this.resetFunc();
+    this.data = null;
+    this._defaultState();
+  }
+  
+  async _loadData() {
+    if (this.field?.value == '') {
+      this._reset();
+      return;
+    } else {
+      this._loadingState();
+    }
+    
+    try {
+      this._currentLoadId = Date.now();
+      const loadId = this._currentLoadId;
+      
+      this.data = await this.loadData(this);
+      
+      if (loadId !== this._currentLoadId) return;
+      
+      this.data = this.mapData(this.data);
+      this.render();
+    } catch(err) {
+      this._reset();
+      console.error('Data loading error:', err);
+    }
+  }
+  
+  async render() {
+    if (!this.data) {
+      this._reset();
+      return;
+    }
+    
+    if (!this.data.length) {
+      this._emptyState();
+      return;
+    }
+    
+    const html = this.data.map(this.renderItem).join('');
+    
+    x.lib.render(this.list, html);
+  }
+}
+
+export const autocomplete = new Autocomplete();