@myxo-victor/chexjs 6.0.0

package/ChexJs/libs/orbit.js

@@ -0,0 +1,217 @@
+/**
+ * OrbitJS Engine V3.1.0 - Professional Grade
+ * Fixed Visibility & Dynamic Rendering Support
+ * Features: Seamless Loop, Touch, Hover-Pause, Auto-Dots, Chex-Ready.
+ * @author Myxo victor
+ * Single Image slider (Allows us to display slide through bunch of images 1 by 1)
+ */
+
+const orbit = {
+    _sliders: [],
+
+    /**
+     * Initialize the sliding logic
+     * @param {Object} config - { IDs: ['id1', 'id2'], interval: 4000, dots: true }
+     */
+    slides: function(config) {
+        // 1. Initial Check & Delay for Dynamic Content (Chex support)
+        const init = () => {
+            const ids = config.IDs || [];
+            const elements = ids.map(id => document.getElementById(id)).filter(el => el !== null);
+
+            // If elements aren't in the DOM yet, retry in 100ms
+            if (elements.length === 0) {
+                setTimeout(init, 100);
+                return;
+            }
+
+            this._build(config, elements);
+        };
+
+        init();
+    },
+
+    _build: function(config, elements) {
+        const interval = config.interval || 4000;
+        const showDots = config.dots !== false;
+        const pauseOnHover = config.pauseOnHover !== false;
+        const wrapper = elements[0].parentElement;
+        const originalCount = elements.length;
+
+        // Prevent nested/duplicate initialization (can blank out content)
+        if (wrapper && wrapper.classList && wrapper.classList.contains('orbit-track')) {
+            return;
+        }
+        if (wrapper && wrapper.querySelector && wrapper.querySelector('.orbit-track')) {
+            return;
+        }
+
+        // 2. Setup Wrapper Layout
+        // If height is 0, images will be invisible. We force a min-height.
+        if (wrapper.offsetHeight === 0) {
+            wrapper.style.minHeight = "300px"; 
+        }
+        wrapper.style.position = 'relative';
+        wrapper.style.overflow = 'hidden';
+        wrapper.style.display = 'block';
+        wrapper.style.touchAction = 'pan-y';
+
+        // 3. Create Seamless Track
+        const track = document.createElement('div');
+        track.className = 'orbit-track';
+        track.style.cssText = `
+            display: flex;
+            width: 100%;
+            height: 100%;
+            z-index: 5;
+            transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
+            will-change: transform;
+        `;
+
+        // 4. Handle Clones for Seamless Loop
+        const firstClone = elements[0].cloneNode(true);
+        const lastClone = elements[elements.length - 1].cloneNode(true);
+        firstClone.id += '-clone';
+        lastClone.id += '-clone';
+
+        const trackElements = [lastClone, ...elements, firstClone];
+
+        trackElements.forEach(el => {
+            el.style.flex = '0 0 100%';
+            el.style.width = '100%';
+            el.style.height = '100%';
+            el.style.objectFit = 'cover';
+            el.style.display = 'block'; // Force visibility
+            el.style.visibility = 'visible';
+            el.style.opacity = '1';
+            track.appendChild(el);
+        });
+
+        // 5. Replace contents and start
+        wrapper.innerHTML = ''; 
+        wrapper.appendChild(track);
+
+        // Force a browser reflow to ensure the -100% takes effect immediately
+        track.offsetHeight; 
+        let currentIndex = 1;
+        track.style.transform = `translateX(-100%)`;
+
+        const state = {
+            wrapper, track, originalCount, currentIndex, interval,
+            timer: null, started: false, isTransitioning: false, dots: []
+        };
+
+        if (showDots) this._createDots(wrapper, state);
+        if (pauseOnHover) {
+            wrapper.addEventListener('mouseenter', () => this._pause(state));
+            wrapper.addEventListener('mouseleave', () => this._start(state));
+        }
+
+        this._addTouchListeners(wrapper, state);
+        track.addEventListener('transitionend', () => this._handleTransitionEnd(state));
+        
+        this._sliders.push(state);
+        this._observe(wrapper, state);
+    },
+
+    _createDots: function(wrapper, state) {
+        const dotsContainer = document.createElement('div');
+        dotsContainer.style.cssText = 'position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:20;';
+        
+        for (let i = 0; i < state.originalCount; i++) {
+            const dot = document.createElement('div');
+            dot.style.cssText = 'width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:0.3s;';
+            if (i === 0) dot.style.background = '#fff';
+            dot.onclick = (e) => { e.stopPropagation(); this._goTo(state, i + 1); };
+            dotsContainer.appendChild(dot);
+            state.dots.push(dot);
+        }
+        wrapper.appendChild(dotsContainer);
+    },
+
+    _updateDots: function(state) {
+        if (state.dots.length === 0) return;
+        let activeDot = state.currentIndex - 1;
+        if (activeDot >= state.originalCount) activeDot = 0;
+        if (activeDot < 0) activeDot = state.originalCount - 1;
+
+        state.dots.forEach((dot, i) => {
+            dot.style.background = i === activeDot ? '#fff' : 'rgba(255,255,255,0.5)';
+            dot.style.transform = i === activeDot ? 'scale(1.2)' : 'scale(1)';
+        });
+    },
+
+    _addTouchListeners: function(wrapper, state) {
+        let startX = 0;
+        wrapper.addEventListener('touchstart', (e) => {
+            startX = e.touches[0].clientX;
+            this._pause(state);
+        }, {passive: true});
+
+        wrapper.addEventListener('touchend', (e) => {
+            let endX = e.changedTouches[0].clientX;
+            let diff = startX - endX;
+            if (Math.abs(diff) > 50) { 
+                diff > 0 ? this._next(state) : this._prev(state);
+            }
+            this._start(state);
+        }, {passive: true});
+    },
+
+    _handleTransitionEnd: function(state) {
+        state.isTransitioning = false;
+        if (state.currentIndex === 0) {
+            state.track.style.transition = 'none';
+            state.currentIndex = state.originalCount;
+            state.track.style.transform = `translateX(-${state.currentIndex * 100}%)`;
+        } else if (state.currentIndex === state.originalCount + 1) {
+            state.track.style.transition = 'none';
+            state.currentIndex = 1;
+            state.track.style.transform = `translateX(-100%)`;
+        }
+        this._updateDots(state);
+    },
+
+    _goTo: function(state, index) {
+        if (state.isTransitioning) return;
+        state.isTransitioning = true;
+        state.currentIndex = index;
+        state.track.style.transition = 'transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1)';
+        state.track.style.transform = `translateX(-${index * 100}%)`;
+        this._updateDots(state);
+    },
+
+    _next: function(state) { this._goTo(state, state.currentIndex + 1); },
+    _prev: function(state) { this._goTo(state, state.currentIndex - 1); },
+
+    _observe: function(target, state) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && !state.started) {
+                    this._start(state);
+                    state.started = true;
+                }
+            });
+        }, { threshold: 0.1 }); 
+        observer.observe(target);
+    },
+
+    _start: function(state) {
+        if (state.timer) clearInterval(state.timer);
+        state.timer = setInterval(() => this._next(state), state.interval);
+    },
+
+    _pause: function(state) { clearInterval(state.timer); }
+};
+
+
+/**************************
+How to use this library
+**************************
+*/
+
+  /*  orbit.slides({
+        IDs: ['ic','ic','ic'],
+        interval: 5000,
+        dots: true
+    })*/

package/ChexJs/libs/racket.js

@@ -0,0 +1,374 @@
+/**
+ * Racket.js - Generic HTML Element Infinite Slider Engine
+ * Supports standard arrays, handles auto-hiding of source nodes,
+ * clones entire rich DOM structures, and adapts dynamically
+ * to mobile viewports (1 slide) and desktop viewports (3 slides).
+ * Use for image slider or carousel
+ */
+class Racket {
+  constructor() {
+    this.rawInputList = [];       // Holds raw ID/selector inputs
+    this.slides = [];             // Stores resolved, hidden source nodes
+    this.intervalDuration = 2000; // Carousel speed
+    this.currentPage = 0;         // Slide page index
+    this.container = null;        // Slider mounting viewport
+    this.timer = null;            // Animation rotation timer
+    this.isPlaying = false;       // Playback state
+    this.track = null;            // Inner moving rail
+    this.changeCallback = null;   // Realtime callback updates
+    this.isTransitioning = false; // Transition guard locks
+    this.isHovered = false;       // Cursor tracking
+    this.isHoverPaused = false;   // Hover suspension state
+    this.lastItemsPerPage = this.getItemsPerPage(); // Cache to check breakpoint changes
+    this.resizeBound = false;     // Guard duplicate resize listeners
+  }
+
+  /**
+   * Helper to detect active items per page based on viewport size.
+   * Mobile (< 768px) shows 1 slide at a time. Desktop (>= 768px) shows 3.
+   * @returns {number}
+   */
+  getItemsPerPage() {
+    if (typeof window !== 'undefined' && window.innerWidth < 768) {
+      return 1;
+    }
+    return 3;
+  }
+
+  /**
+   * Mounts the Racket slider onto a targeted DOM element wrapper.
+   * @param {string|HTMLElement} selector
+   */
+  mount(selector) {
+    this.container = typeof selector === 'string' 
+      ? document.querySelector(selector) 
+      : selector;
+
+    if (!this.container) {
+      console.warn(`Racket.js: Mounting container "${selector}" not found yet. Retrying on render.`);
+    } else {
+      this.setupHoverEvents();
+      this.setupResizeEvent();
+    }
+    return this;
+  }
+
+  /**
+   * Listens for mouse hover patterns to suspend playback.
+   */
+  setupHoverEvents() {
+    if (!this.container) return;
+
+    // Use a flag to avoid adding duplicate event listeners
+    if (this.container.dataset.racketHoverBound) return;
+    this.container.dataset.racketHoverBound = "true";
+
+    this.container.addEventListener('mouseenter', () => {
+      this.isHovered = true;
+      if (this.isPlaying && !this.isHoverPaused) {
+        this.isHoverPaused = true;
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+        this.updatePosition();
+        if (window.logToSandboxConsole) {
+          window.logToSandboxConsole('Carousel auto-rotation paused on hover 🧊', 'info');
+        }
+      }
+    });
+
+    this.container.addEventListener('mouseleave', () => {
+      this.isHovered = false;
+      if (this.isPlaying && this.isHoverPaused) {
+        this.isHoverPaused = false;
+        this.startTimer();
+        this.updatePosition();
+        if (window.logToSandboxConsole) {
+          window.logToSandboxConsole('Carousel auto-rotation resumed 🚀', 'info');
+        }
+      }
+    });
+  }
+
+  /**
+   * Attaches window resize listeners to trigger smooth layout adaptions.
+   */
+  setupResizeEvent() {
+    if (this.resizeBound || typeof window === 'undefined') return;
+    this.resizeBound = true;
+
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const currentBreakpointVal = this.getItemsPerPage();
+        if (currentBreakpointVal !== this.lastItemsPerPage) {
+          this.lastItemsPerPage = currentBreakpointVal;
+          this.currentPage = 0; // Reset to start index to avoid layout miscalculation
+          this.render();
+          if (window.logToSandboxConsole) {
+            window.logToSandboxConsole(`Responsive Layout update: Displaying ${currentBreakpointVal} item(s) per frame 📱💻`, 'info');
+          }
+        }
+      }, 150);
+    });
+  }
+
+  /**
+   * Accepts array list representing raw image IDs or direct URLs.
+   * @param {Array} imgArray 
+   */
+  images(imgArray) {
+    this.rawInputList = Array.isArray(imgArray) ? imgArray : [imgArray];
+    this.render();
+    return this;
+  }
+
+  /**
+   * Adjusts the transition frequency duration limit.
+   * @param {number} ms 
+   */
+  duration(ms) {
+    this.intervalDuration = Number(ms) || 2000;
+    if (this.isPlaying && !this.isHoverPaused) {
+      this.play();
+    } else {
+      this.updatePosition();
+    }
+    return this;
+  }
+
+  /**
+   * Resolves elements from IDs, clones them, hides the static versions,
+   * and compiles the infinite scrolling layout.
+   */
+  render() {
+    this.slides = [];
+    this.rawInputList.forEach(item => {
+      if (typeof item === 'string') {
+        const trimmed = item.trim();
+        const element = document.getElementById(trimmed) || document.querySelector(trimmed);
+        if (element) {
+          // Hide the static element from the page layout so they don't appear stacked!
+          element.style.display = 'none';
+          this.slides.push({ type: 'dom', node: element });
+        } else {
+          // Fallback to simple URL string
+          this.slides.push({ type: 'url', url: item });
+        }
+      } else {
+        this.slides.push({ type: 'url', url: String(item) });
+      }
+    });
+
+    if (this.slides.length === 0) return;
+
+    if (!this.container) {
+      const firstDom = this.slides.find(s => s.type === 'dom');
+      if (firstDom && firstDom.node.parentElement) {
+        this.container = firstDom.node.parentElement;
+        this.setupHoverEvents();
+        this.setupResizeEvent();
+      }
+    }
+
+    if (!this.container) return;
+
+    // Setup container dimensions & structural viewport wrapper
+    this.container.style.position = 'relative';
+    this.container.style.overflow = 'hidden';
+
+    let viewport = this.container.querySelector('.racket-viewport-wrapper');
+    if (!viewport) {
+      viewport = document.createElement('div');
+      viewport.className = 'racket-viewport-wrapper';
+      viewport.style.overflow = 'hidden';
+      viewport.style.width = '100%';
+      this.container.appendChild(viewport);
+    } else {
+      viewport.innerHTML = ''; // Clean old slider rails
+    }
+
+    const track = document.createElement('div');
+    track.className = 'racket-track';
+    track.style.display = 'flex';
+    track.style.transition = 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
+    track.style.width = '100%';
+    viewport.appendChild(track);
+
+    // Dynamic items per view page depending on responsiveness parameters
+    const itemsPerPage = this.getItemsPerPage();
+    const originalCount = this.slides.length;
+    const paddedSlides = [...this.slides];
+
+    // Align padding sizes dynamically to avoid division remainders
+    while (paddedSlides.length % itemsPerPage !== 0) {
+      paddedSlides.push(this.slides[paddedSlides.length % originalCount]);
+    }
+    const totalPages = paddedSlides.length / itemsPerPage;
+
+    // Build responsive dynamic circular buffers (cloned items for infinite scrolling loop)
+    const lastPageItems = paddedSlides.slice((totalPages - 1) * itemsPerPage);
+    const firstPageItems = paddedSlides.slice(0, itemsPerPage);
+    const trackItems = [...lastPageItems, ...paddedSlides, ...firstPageItems];
+
+    trackItems.forEach((slide) => {
+      const itemWrapper = document.createElement('div');
+      itemWrapper.style.flex = `0 0 calc(100% / ${itemsPerPage})`;
+      itemWrapper.style.maxWidth = `calc(100% / ${itemsPerPage})`;
+      itemWrapper.style.boxSizing = 'border-box';
+      itemWrapper.style.padding = '8px'; // Uniform gap spacing
+
+      if (slide.type === 'dom') {
+        // Clone the entire rich card element (maintaining styles, names, text, and images)
+        const clone = slide.node.cloneNode(true);
+        clone.style.display = ''; // Clear display: none
+        clone.style.width = '100%';
+        clone.removeAttribute('id'); // Avoid element ID duplication
+        itemWrapper.appendChild(clone);
+      } else {
+        // Render simple fallback image block
+        const imgWrapper = document.createElement('div');
+        imgWrapper.style.position = 'relative';
+        imgWrapper.style.width = '100%';
+        imgWrapper.style.overflow = 'hidden';
+        imgWrapper.style.borderRadius = '12px';
+        imgWrapper.style.aspectRatio = '4/3';
+        imgWrapper.style.backgroundColor = '#111827';
+
+        const img = document.createElement('img');
+        img.src = slide.url;
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.objectFit = 'cover';
+        imgWrapper.appendChild(img);
+        itemWrapper.appendChild(imgWrapper);
+      }
+
+      track.appendChild(itemWrapper);
+    });
+
+    this.track = track;
+
+    this.track.addEventListener('transitionend', () => {
+      this.isTransitioning = false;
+      if (this.currentPage >= totalPages) {
+        this.track.style.transition = 'none';
+        this.currentPage = 0;
+        this.updatePosition();
+        this.track.offsetHeight; // Force layout flow reflow
+        this.track.style.transition = 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
+      }
+      if (this.currentPage <= -1) {
+        this.track.style.transition = 'none';
+        this.currentPage = totalPages - 1;
+        this.updatePosition();
+        this.track.offsetHeight; // Force layout flow reflow
+        this.track.style.transition = 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
+      }
+    });
+
+    this.updatePosition();
+  }
+
+  /**
+   * Transforms slider tracks smoothly relative to target index.
+   */
+  updatePosition() {
+    if (!this.track || this.slides.length === 0) return;
+    const itemsPerPage = this.getItemsPerPage();
+    const originalCount = this.slides.length;
+    const totalPages = Math.ceil(originalCount / itemsPerPage);
+
+    const visualPageIndex = this.currentPage + 1;
+    this.track.style.transform = `translateX(-${visualPageIndex * 100}%)`;
+
+    if (this.changeCallback) {
+      let normalizedPage = this.currentPage;
+      if (normalizedPage >= totalPages) normalizedPage = 0;
+      if (normalizedPage < 0) normalizedPage = totalPages - 1;
+
+      this.changeCallback({
+        currentIndex: normalizedPage * itemsPerPage,
+        pageIndex: normalizedPage,
+        totalPages: totalPages,
+        interval: this.intervalDuration,
+        isPlaying: this.isPlaying,
+        isHoverPaused: this.isHoverPaused,
+        itemsPerPage: itemsPerPage
+      });
+    }
+  }
+
+  next() {
+    if (this.isTransitioning) return this;
+    this.isTransitioning = true;
+    this.currentPage++;
+    this.updatePosition();
+    return this;
+  }
+
+  prev() {
+    if (this.isTransitioning) return this;
+    this.isTransitioning = true;
+    this.currentPage--;
+    this.updatePosition();
+    return this;
+  }
+
+  startTimer() {
+    if (this.timer) clearInterval(this.timer);
+    this.timer = setInterval(() => {
+      this.next();
+    }, this.intervalDuration);
+  }
+
+  play() {
+    this.isPlaying = true;
+    if (this.isHovered) {
+      this.isHoverPaused = true;
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+    } else {
+      this.isHoverPaused = false;
+      this.startTimer();
+    }
+    this.updatePosition();
+    return this;
+  }
+
+  stop() {
+    this.isPlaying = false;
+    this.isHoverPaused = false;
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.updatePosition();
+    return this;
+  }
+
+  onUpdate(fn) {
+    this.changeCallback = fn;
+    return this;
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.Racket = Racket;
+  window.racket = new Racket();
+}
+
+
+/**************************
+How to use this library
+**************************
+*/
+/*
+racket.images(['img1', 'img2', 'img3'])//list of image IDs
+racket.duration([2000])//Duration
+racket.play()//Start carousel
+*/

package/ChexJs/libs/rinx.js

@@ -0,0 +1,88 @@
+/**
+ * Rinx Text Slider V1.0
+ * Specifically designed for sliding text blocks inside overlays 
+ * without breaking parent container layouts.
+ * This library allows us to make a container holding some texts to slide one by one
+ */
+
+const rinx = {
+    _instances: [],
+
+    slides: function(config) {
+        const ids = config.IDs || [];
+        const interval = config.interval || 3000;
+        const effect = config.effect || 'fade'; // 'fade' or 'slide'
+
+        const elements = ids.map(id => document.getElementById(id)).filter(el => el !== null);
+        if (elements.length === 0) return;
+
+        // Setup Initial State
+        elements.forEach((el, index) => {
+            el.style.transition = 'all 0.8s ease-in-out';
+            if (index === 0) {
+                el.style.opacity = '1';
+                el.style.display = 'block';
+                el.style.transform = 'translateX(0)';
+            } else {
+                el.style.opacity = '0';
+                el.style.display = 'none';
+                el.style.transform = 'translateX(20px)';
+            }
+        });
+
+        let currentIndex = 0;
+
+        const state = {
+            elements: elements,
+            interval: interval,
+            timer: null,
+            next: () => {
+                const current = elements[currentIndex];
+                currentIndex = (currentIndex + 1) % elements.length;
+                const nextEl = elements[currentIndex];
+
+                // Hide Current
+                current.style.opacity = '0';
+                current.style.transform = 'translateX(-20px)';
+                
+                setTimeout(() => {
+                    current.style.display = 'none';
+                    
+                    // Show Next
+                    nextEl.style.display = 'block';
+                    // Small timeout to trigger CSS transition after display:block
+                    setTimeout(() => {
+                        nextEl.style.opacity = '1';
+                        nextEl.style.transform = 'translateX(0)';
+                    }, 50);
+                }, 400); // Wait for fade out
+            }
+        };
+
+        state.timer = setInterval(state.next, interval);
+        this._instances.push(state);
+        return state;
+    },
+
+    destroyAll: function() {
+        if (!this._instances || this._instances.length === 0) return;
+        this._instances.forEach((instance) => {
+            if (instance && instance.timer) clearInterval(instance.timer);
+            if (instance) instance.timer = null;
+        });
+        this._instances = [];
+    }
+};
+
+
+/**************************
+How to use this library
+***************************
+*/
+/*
+rinx.slides({
+            IDs: ['scroll1', 'scroll2', 'scroll3'],
+            interval: 5000,
+            effect:'slide'
+        });
+*/