agex 0.2.4 → 0.2.6

package/assets/assets/assets/cursor.js

@@ -0,0 +1,192 @@
+(() => {
+  let hasMoved = false;
+  let clickRippleEnabled = true;
+  let trailEnabled = false;
+  let trailPoints = [];
+
+  function createCursor() {
+    if (document.getElementById('agex-cursor')) return;
+
+    const cursor = document.createElement('div');
+    cursor.id = 'agex-cursor';
+    cursor.style.cssText = `
+      width: 24px;
+      height: 24px;
+      background: rgba(255, 50, 50, 0.85);
+      border: 2px solid white;
+      border-radius: 50%;
+      position: fixed;
+      pointer-events: none;
+      z-index: 2147483647;
+      transform: translate(-50%, -50%);
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+      left: -100px;
+      top: -100px;
+      opacity: 0;
+      transition: left 0.08s ease-out, top 0.08s ease-out, opacity 0.15s, transform 0.1s, background 0.1s;
+    `;
+    document.body.appendChild(cursor);
+
+    const style = document.createElement('style');
+    style.id = 'agex-cursor-style';
+    style.textContent = `
+      .agex-cursor-ripple {
+        position: fixed;
+        border-radius: 50%;
+        background: rgba(255, 50, 50, 0.4);
+        pointer-events: none;
+        z-index: 2147483646;
+        transform: translate(-50%, -50%) scale(0);
+        animation: agex-ripple 0.4s ease-out forwards;
+      }
+      @keyframes agex-ripple {
+        to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+      }
+      .agex-cursor-trail {
+        position: fixed;
+        width: 8px;
+        height: 8px;
+        background: rgba(255, 50, 50, 0.3);
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 2147483645;
+        transform: translate(-50%, -50%);
+      }
+    `;
+    document.head.appendChild(style);
+
+    document.addEventListener('mousemove', (e) => {
+      const c = document.getElementById('agex-cursor');
+      if (c) {
+        c.style.left = `${e.clientX}px`;
+        c.style.top = `${e.clientY}px`;
+        if (!hasMoved) {
+          hasMoved = true;
+          c.style.opacity = '1';
+        }
+        
+        if (trailEnabled) {
+          createTrailPoint(e.clientX, e.clientY);
+        }
+      }
+    }, true);
+
+    document.addEventListener('mousedown', (e) => {
+      const c = document.getElementById('agex-cursor');
+      if (c) {
+        c.style.transform = 'translate(-50%, -50%) scale(0.8)';
+        c.style.background = 'rgba(255, 200, 50, 1)';
+        
+        if (clickRippleEnabled) {
+          createClickRipple(e.clientX, e.clientY);
+        }
+      }
+    }, true);
+
+    document.addEventListener('mouseup', () => {
+      const c = document.getElementById('agex-cursor');
+      if (c) {
+        c.style.transform = 'translate(-50%, -50%) scale(1)';
+        c.style.background = 'rgba(255, 50, 50, 0.85)';
+      }
+    }, true);
+  }
+
+  function createClickRipple(x, y) {
+    const ripple = document.createElement('div');
+    ripple.className = 'agex-cursor-ripple';
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = '60px';
+    ripple.style.height = '60px';
+    document.body.appendChild(ripple);
+    setTimeout(() => ripple.remove(), 400);
+  }
+
+  function createTrailPoint(x, y) {
+    const point = document.createElement('div');
+    point.className = 'agex-cursor-trail';
+    point.style.left = `${x}px`;
+    point.style.top = `${y}px`;
+    document.body.appendChild(point);
+    trailPoints.push(point);
+    
+    setTimeout(() => {
+      point.style.opacity = '0';
+      point.style.transition = 'opacity 0.3s';
+    }, 100);
+    
+    setTimeout(() => {
+      point.remove();
+      trailPoints = trailPoints.filter(p => p !== point);
+    }, 400);
+  }
+
+  // Expose cursor configuration API
+  window.__agexCursor = {
+    setSize(size) {
+      const cursor = document.getElementById('agex-cursor');
+      if (!cursor) return;
+      const sizes = { normal: 16, large: 24, 'extra-large': 32 };
+      const s = sizes[size] || sizes.large;
+      cursor.style.width = `${s}px`;
+      cursor.style.height = `${s}px`;
+    },
+    setClickRipple(enabled) {
+      clickRippleEnabled = enabled;
+    },
+    setTrail(enabled) {
+      trailEnabled = enabled;
+    },
+    configure(options = {}) {
+      if (options.size) this.setSize(options.size);
+      if (options.clickRipple !== undefined) this.setClickRipple(options.clickRipple);
+      if (options.trail !== undefined) this.setTrail(options.trail);
+    },
+    sync() {
+      const cursor = document.getElementById('agex-cursor');
+      if (!cursor) return Promise.resolve('no cursor');
+      return new Promise(resolve => {
+        const handler = function(e) {
+          cursor.style.left = e.clientX + 'px';
+          cursor.style.top = e.clientY + 'px';
+          cursor.style.opacity = '1';
+          resolve('moved to ' + e.clientX + ',' + e.clientY);
+        };
+        document.addEventListener('mousemove', handler, { once: true });
+        setTimeout(function() {
+          document.removeEventListener('mousemove', handler);
+          resolve('hover complete');
+        }, 150);
+      });
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', createCursor);
+  } else {
+    createCursor();
+  }
+
+  const observer = new MutationObserver(() => {
+    if (!document.getElementById('agex-cursor') && document.body) {
+      createCursor();
+    }
+  });
+
+  if (document.body) {
+    observer.observe(document.body, { childList: true, subtree: true });
+  } else {
+    document.addEventListener('DOMContentLoaded', () => {
+      observer.observe(document.body, { childList: true, subtree: true });
+    });
+  }
+
+  window.addEventListener('load', createCursor);
+
+  setInterval(() => {
+    if (!document.getElementById('agex-cursor') && document.body) {
+      createCursor();
+    }
+  }, 500);
+})();