anime-cursor 0.3.1 → 1.0.0

package/dist/anime-cursor.esm.js

@@ -1,5 +1,5 @@
 // AnimeCursor by github@ShuninYu
-// v0.3.0
+// v1.0.0
 
 // 静态变量存储唯一实例
 let _instance = null;
@@ -173,14 +173,14 @@ class AnimeCursor {
     // ----------------------------
     _validateOptions() {
         if (this.disabled) return;
-
+    
         if (!this.options || !this.options.cursors) {
             console.error('[AnimeCursor] missing cursors set up');
             throw new Error('AnimeCursor init failed');
         }
-
+    
         this.defaultCursorType = null;
-
+    
         for (const [name, cfg] of Object.entries(this.options.cursors)) {
             if (cfg.default === true) {
                 if (this.defaultCursorType) {
@@ -189,7 +189,7 @@ class AnimeCursor {
                 this.defaultCursorType = name;
             }
         }
-
+    
         for (const [name, cfg] of Object.entries(this.options.cursors)) {
             const required = ['size', 'image'];
             required.forEach(key => {
@@ -198,14 +198,51 @@ class AnimeCursor {
                     throw new Error('AnimeCursor init failed');
                 }
             });
-            
-            if (cfg.tags !== undefined && !Array.isArray(cfg.tags)) {
-                console.error(`[AnimeCursor] default cursor "${name}" 's tags must be an array if provided`);
-                throw new Error('AnimeCursor init failed');
+    
+            // 新增：校验 frames 与 duration 的类型一致性
+            if (cfg.frames !== undefined) {
+                if (Array.isArray(cfg.frames)) {
+                    // frames 为数组时，duration 必须为等长数组
+                    if (!Array.isArray(cfg.duration) || cfg.duration.length !== cfg.frames.length) {
+                        console.error(`[AnimeCursor] cursor "${name}" has frames as array but duration is not an array of same length`);
+                        throw new Error('AnimeCursor init failed');
+                    }
+                    // 检查 frames 数组元素是否为正整数
+                    for (let f of cfg.frames) {
+                        if (!Number.isInteger(f) || f <= 0) {
+                            console.error(`[AnimeCursor] cursor "${name}" frames array must contain positive integers`);
+                            throw new Error('AnimeCursor init failed');
+                        }
+                    }
+                    // 检查 duration 数组元素是否为正数
+                    for (let d of cfg.duration) {
+                        if (typeof d !== 'number' || d <= 0) {
+                            console.error(`[AnimeCursor] cursor "${name}" duration array must contain positive numbers`);
+                            throw new Error('AnimeCursor init failed');
+                        }
+                    }
+                } else if (typeof cfg.frames === 'number') {
+                    // frames 为数字时，duration 可选，但不能是数组
+                    if (Array.isArray(cfg.duration)) {
+                        console.error(`[AnimeCursor] cursor "${name}" frames is number but duration is array, must be consistent`);
+                        throw new Error('AnimeCursor init failed');
+                    }
+                    if (!Number.isInteger(cfg.frames) || cfg.frames <= 0) {
+                        console.error(`[AnimeCursor] cursor "${name}" frames must be a positive integer`);
+                        throw new Error('AnimeCursor init failed');
+                    }
+                    if (cfg.duration !== undefined && (typeof cfg.duration !== 'number' || cfg.duration <= 0)) {
+                        console.error(`[AnimeCursor] cursor "${name}" duration must be a positive number`);
+                        throw new Error('AnimeCursor init failed');
+                    }
+                } else {
+                    console.error(`[AnimeCursor] cursor "${name}" frames must be a number or an array`);
+                    throw new Error('AnimeCursor init failed');
+                }
             }
-
-            if (cfg.duration !== undefined && typeof cfg.duration !== 'number') {
-                console.error(`[AnimeCursor] cursor "${name}" 's duration must be a number(seconds)`);
+    
+            if (cfg.tags !== undefined && !Array.isArray(cfg.tags)) {
+                console.error(`[AnimeCursor] cursor "${name}" 's tags must be an array if provided`);
                 throw new Error('AnimeCursor init failed');
             }
         }
@@ -361,57 +398,110 @@ class AnimeCursor {
 
         /* 每种光标以及debug生成 CSS */
         for (const [type, cfg] of Object.entries(this.options.cursors)) {
-            const className = `.cursor-${type}`;
-            const size = cfg.size;
-            const frames = cfg.frames;
-            const image = cfg.image;
-            const offset = cfg.offset;
-            const zIndex = cfg.zIndex;
-            const scale = cfg.scale;
-            const isGif = image.toLowerCase().endsWith('.gif');
-            var pixel;
-            if (cfg.pixel) {pixel = 'pixelated';}
-            else {pixel = 'auto';}
-
-            css += `
-            ${className} {
+        const className = `.cursor-${type}`;
+        const size = cfg.size;
+        const image = cfg.image;
+        const offset = cfg.offset;
+        const zIndex = cfg.zIndex;
+        const scale = cfg.scale;
+        const isGif = image.toLowerCase().endsWith('.gif');
+        const pixel = cfg.pixel ? 'pixelated' : 'auto';
+
+        // 基础样式
+        css += `
+        ${className} {
             width: ${size[0]}px;
             height: ${size[1]}px;
             background-image: url("${image}");
             image-rendering: ${pixel};
             ${(scale || offset) ? `transform: ${[scale && `scale(${scale[0]}, ${scale[1]})`, offset && `translate(-${offset[0]}px, -${offset[1]}px)`].filter(Boolean).join(' ')};` : ''}
-            
             ${zIndex !== undefined ? `z-index:${zIndex};` : ''}
-            }`;
+        }`;
+
+        // 动画生成
+        const frames = cfg.frames;
+        const duration = cfg.duration;
 
-            /* 精灵图动画 */
-            const duration = cfg.duration;
-            const hasAnimation =
-                !isGif &&
-                frames > 1 &&
-                typeof duration === 'number';
+        // 判断是否使用新逻辑（数组形式）
+        if (Array.isArray(frames) && Array.isArray(duration) && frames.length === duration.length) {
+            // 计算总帧数和总时长
+            const totalFrames = frames.reduce((a, b) => a + b, 0);
+            const totalDuration = duration.reduce((a, b) => a + b, 0);
+            const hasAnimation = !isGif && totalFrames > 1 && totalDuration > 0;
 
             if (hasAnimation) {
                 const animName = `animecursor_${type}`;
+                // 构建关键帧数组
+                const keyframes = [];
+                let cumPercent = 0;
+                let frameIndex = 0;
+
+                for (let p = 0; p < frames.length; p++) {
+                    const segFrames = frames[p];
+                    const segDuration = duration[p];
+                    const segPercent = segDuration / totalDuration;
+                    for (let j = 0; j < segFrames; j++) {
+                        const startPercent = cumPercent + (j * segPercent) / segFrames;
+                        keyframes.push({
+                            percent: startPercent,
+                            pos: -frameIndex * size[0]
+                        });
+                        frameIndex++;
+                    }
+                    cumPercent += segPercent;
+                }
+                // 添加最后一帧的结束点（100%）
+                keyframes.push({
+                    percent: 1.0,
+                    pos: -(totalFrames - 1) * size[0]
+                });
 
+                // 生成动画属性
                 css += `
                 ${className} {
-                animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
+                    animation: ${animName} ${totalDuration}s infinite ${cfg.pingpong ? 'alternate' : ''};
+                }`;
+
+                // 生成 @keyframes
+                css += `
+                @keyframes ${animName} {`;
+                for (let i = 0; i < keyframes.length; i++) {
+                    const kf = keyframes[i];
+                    let percent = (kf.percent * 100).toFixed(5);
+                    if (kf.percent === 1.0) percent = '100'; // 确保100%显示为整数
+                    css += `
+                    ${percent}% {
+                        background-position: ${kf.pos}px 0;
+                        ${i < keyframes.length - 1 ? 'animation-timing-function: steps(1, end);' : ''}
+                    }`;
+                }
+                css += `
+                }`;
+            }
+        } else if (typeof frames === 'number' && typeof duration === 'number') {
+            // 旧逻辑：均匀动画
+            const hasAnimation = !isGif && frames > 1 && duration > 0;
+            if (hasAnimation) {
+                const animName = `animecursor_${type}`;
+                css += `
+                ${className} {
+                    animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
                 }
 
                 @keyframes ${animName} {
-                from { background-position: 0 0; }
-                to { background-position: -${size[0] * frames}px 0; }
-                }
-                `;
+                    from { background-position: 0 0; }
+                    to { background-position: -${size[0] * frames}px 0; }
+                }`;
             }
         }
-
-        style.textContent = css;
-        document.head.appendChild(style);
-        this.styleEl = style;
+        // 若 frames 未定义或为单帧，则不生成动画，仅保留基础样式
     }
 
+    style.textContent = css;
+    document.head.appendChild(style);
+    this.styleEl = style;
+}
+
     // ----------------------------
     // 给元素自动添加 data-cursor
     // ----------------------------

package/dist/anime-cursor.umd.js

@@ -5,7 +5,7 @@
 })(this, (function () { 'use strict';
 
     // AnimeCursor by github@ShuninYu
-    // v0.3.0
+    // v1.0.0
 
     // 静态变量存储唯一实例
     let _instance = null;
@@ -179,14 +179,14 @@
         // ----------------------------
         _validateOptions() {
             if (this.disabled) return;
-
+        
             if (!this.options || !this.options.cursors) {
                 console.error('[AnimeCursor] missing cursors set up');
                 throw new Error('AnimeCursor init failed');
             }
-
+        
             this.defaultCursorType = null;
-
+        
             for (const [name, cfg] of Object.entries(this.options.cursors)) {
                 if (cfg.default === true) {
                     if (this.defaultCursorType) {
@@ -195,7 +195,7 @@
                     this.defaultCursorType = name;
                 }
             }
-
+        
             for (const [name, cfg] of Object.entries(this.options.cursors)) {
                 const required = ['size', 'image'];
                 required.forEach(key => {
@@ -204,14 +204,51 @@
                         throw new Error('AnimeCursor init failed');
                     }
                 });
-                
-                if (cfg.tags !== undefined && !Array.isArray(cfg.tags)) {
-                    console.error(`[AnimeCursor] default cursor "${name}" 's tags must be an array if provided`);
-                    throw new Error('AnimeCursor init failed');
+        
+                // 新增：校验 frames 与 duration 的类型一致性
+                if (cfg.frames !== undefined) {
+                    if (Array.isArray(cfg.frames)) {
+                        // frames 为数组时，duration 必须为等长数组
+                        if (!Array.isArray(cfg.duration) || cfg.duration.length !== cfg.frames.length) {
+                            console.error(`[AnimeCursor] cursor "${name}" has frames as array but duration is not an array of same length`);
+                            throw new Error('AnimeCursor init failed');
+                        }
+                        // 检查 frames 数组元素是否为正整数
+                        for (let f of cfg.frames) {
+                            if (!Number.isInteger(f) || f <= 0) {
+                                console.error(`[AnimeCursor] cursor "${name}" frames array must contain positive integers`);
+                                throw new Error('AnimeCursor init failed');
+                            }
+                        }
+                        // 检查 duration 数组元素是否为正数
+                        for (let d of cfg.duration) {
+                            if (typeof d !== 'number' || d <= 0) {
+                                console.error(`[AnimeCursor] cursor "${name}" duration array must contain positive numbers`);
+                                throw new Error('AnimeCursor init failed');
+                            }
+                        }
+                    } else if (typeof cfg.frames === 'number') {
+                        // frames 为数字时，duration 可选，但不能是数组
+                        if (Array.isArray(cfg.duration)) {
+                            console.error(`[AnimeCursor] cursor "${name}" frames is number but duration is array, must be consistent`);
+                            throw new Error('AnimeCursor init failed');
+                        }
+                        if (!Number.isInteger(cfg.frames) || cfg.frames <= 0) {
+                            console.error(`[AnimeCursor] cursor "${name}" frames must be a positive integer`);
+                            throw new Error('AnimeCursor init failed');
+                        }
+                        if (cfg.duration !== undefined && (typeof cfg.duration !== 'number' || cfg.duration <= 0)) {
+                            console.error(`[AnimeCursor] cursor "${name}" duration must be a positive number`);
+                            throw new Error('AnimeCursor init failed');
+                        }
+                    } else {
+                        console.error(`[AnimeCursor] cursor "${name}" frames must be a number or an array`);
+                        throw new Error('AnimeCursor init failed');
+                    }
                 }
-
-                if (cfg.duration !== undefined && typeof cfg.duration !== 'number') {
-                    console.error(`[AnimeCursor] cursor "${name}" 's duration must be a number(seconds)`);
+        
+                if (cfg.tags !== undefined && !Array.isArray(cfg.tags)) {
+                    console.error(`[AnimeCursor] cursor "${name}" 's tags must be an array if provided`);
                     throw new Error('AnimeCursor init failed');
                 }
             }
@@ -367,57 +404,110 @@
 
             /* 每种光标以及debug生成 CSS */
             for (const [type, cfg] of Object.entries(this.options.cursors)) {
-                const className = `.cursor-${type}`;
-                const size = cfg.size;
-                const frames = cfg.frames;
-                const image = cfg.image;
-                const offset = cfg.offset;
-                const zIndex = cfg.zIndex;
-                const scale = cfg.scale;
-                const isGif = image.toLowerCase().endsWith('.gif');
-                var pixel;
-                if (cfg.pixel) {pixel = 'pixelated';}
-                else {pixel = 'auto';}
-
-                css += `
-            ${className} {
+            const className = `.cursor-${type}`;
+            const size = cfg.size;
+            const image = cfg.image;
+            const offset = cfg.offset;
+            const zIndex = cfg.zIndex;
+            const scale = cfg.scale;
+            const isGif = image.toLowerCase().endsWith('.gif');
+            const pixel = cfg.pixel ? 'pixelated' : 'auto';
+
+            // 基础样式
+            css += `
+        ${className} {
             width: ${size[0]}px;
             height: ${size[1]}px;
             background-image: url("${image}");
             image-rendering: ${pixel};
             ${(scale || offset) ? `transform: ${[scale && `scale(${scale[0]}, ${scale[1]})`, offset && `translate(-${offset[0]}px, -${offset[1]}px)`].filter(Boolean).join(' ')};` : ''}
-            
             ${zIndex !== undefined ? `z-index:${zIndex};` : ''}
-            }`;
+        }`;
+
+            // 动画生成
+            const frames = cfg.frames;
+            const duration = cfg.duration;
 
-                /* 精灵图动画 */
-                const duration = cfg.duration;
-                const hasAnimation =
-                    !isGif &&
-                    frames > 1 &&
-                    typeof duration === 'number';
+            // 判断是否使用新逻辑（数组形式）
+            if (Array.isArray(frames) && Array.isArray(duration) && frames.length === duration.length) {
+                // 计算总帧数和总时长
+                const totalFrames = frames.reduce((a, b) => a + b, 0);
+                const totalDuration = duration.reduce((a, b) => a + b, 0);
+                const hasAnimation = !isGif && totalFrames > 1 && totalDuration > 0;
 
                 if (hasAnimation) {
                     const animName = `animecursor_${type}`;
+                    // 构建关键帧数组
+                    const keyframes = [];
+                    let cumPercent = 0;
+                    let frameIndex = 0;
+
+                    for (let p = 0; p < frames.length; p++) {
+                        const segFrames = frames[p];
+                        const segDuration = duration[p];
+                        const segPercent = segDuration / totalDuration;
+                        for (let j = 0; j < segFrames; j++) {
+                            const startPercent = cumPercent + (j * segPercent) / segFrames;
+                            keyframes.push({
+                                percent: startPercent,
+                                pos: -frameIndex * size[0]
+                            });
+                            frameIndex++;
+                        }
+                        cumPercent += segPercent;
+                    }
+                    // 添加最后一帧的结束点（100%）
+                    keyframes.push({
+                        percent: 1.0,
+                        pos: -(totalFrames - 1) * size[0]
+                    });
 
+                    // 生成动画属性
                     css += `
                 ${className} {
-                animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
+                    animation: ${animName} ${totalDuration}s infinite ${cfg.pingpong ? 'alternate' : ''};
+                }`;
+
+                    // 生成 @keyframes
+                    css += `
+                @keyframes ${animName} {`;
+                    for (let i = 0; i < keyframes.length; i++) {
+                        const kf = keyframes[i];
+                        let percent = (kf.percent * 100).toFixed(5);
+                        if (kf.percent === 1.0) percent = '100'; // 确保100%显示为整数
+                        css += `
+                    ${percent}% {
+                        background-position: ${kf.pos}px 0;
+                        ${i < keyframes.length - 1 ? 'animation-timing-function: steps(1, end);' : ''}
+                    }`;
+                    }
+                    css += `
+                }`;
+                }
+            } else if (typeof frames === 'number' && typeof duration === 'number') {
+                // 旧逻辑：均匀动画
+                const hasAnimation = !isGif && frames > 1 && duration > 0;
+                if (hasAnimation) {
+                    const animName = `animecursor_${type}`;
+                    css += `
+                ${className} {
+                    animation: ${animName} steps(${frames}) ${duration}s infinite ${cfg.pingpong ? 'alternate' : ''};
                 }
 
                 @keyframes ${animName} {
-                from { background-position: 0 0; }
-                to { background-position: -${size[0] * frames}px 0; }
-                }
-                `;
+                    from { background-position: 0 0; }
+                    to { background-position: -${size[0] * frames}px 0; }
+                }`;
                 }
             }
-
-            style.textContent = css;
-            document.head.appendChild(style);
-            this.styleEl = style;
+            // 若 frames 未定义或为单帧，则不生成动画，仅保留基础样式
         }
 
+        style.textContent = css;
+        document.head.appendChild(style);
+        this.styleEl = style;
+    }
+
         // ----------------------------
         // 给元素自动添加 data-cursor
         // ----------------------------

package/dist/anime-cursor.umd.min.js

@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(e="undefined"!=typeof globalThis?globalThis:e||self).AnimeCursor=s()}(this,function(){"use strict";let e=null;return class{static get instance(){return e}static destroy(){return!!e&&(e.destroy(),!0)}static refresh(){return!!e&&(e.refresh(),!0)}static disable(){return!!e&&(e.disable(),!0)}static enable(){return!!e&&(e.enable(),!0)}constructor(s={}){return e?(console.warn("[AnimeCursor] AnimeCursor already exists."),e):(this.options={displayOnLoad:!1,enableTouch:!1,debug:!1,...s},this.disabled=!1,this.options.enableTouch||this.isMouseLikeDevice()?(this.cursorEl=null,this.lastCursorType=null,this.debugEl=null,this.styleEl=null,this._onMouseMove=null,this._validateOptions(),this._injectPreload(),this._checkDomLoad(),void(e=this)):(this.disabled=!0,void(this.options.debug&&console.warn("[AnimeCursor] Touch device detected, cursor disabled."))))}isMouseLikeDevice(){if(!this.disabled)return window.matchMedia("(pointer: fine)").matches}refresh(){this.disabled||(this.options.debug&&console.info("[AnimeCursor] starting refresh..."),this._bindElements(!0))}destroy(){if(!this.disabled){this._onMouseMove&&(document.removeEventListener("mousemove",this._onMouseMove),this._onMouseMove=null),this.cursorEl&&(this.cursorEl.remove(),this.cursorEl=null),this.debugEl&&(this.debugEl.remove(),this.debugEl=null),this.styleEl&&(this.styleEl.remove(),this.styleEl=null);for(const e of Object.values(this.options.cursors))e.tags&&Array.isArray(e.tags)&&e.tags.forEach(e=>{document.querySelectorAll(e).forEach(e=>{e.dataset.cursorBound&&(delete e.dataset.cursor,delete e.dataset.cursorBound)})});this.lastCursorType=null,e===this&&(e=null)}}disable(){this.disabled||(this.disabled=!0,this.cursorEl&&(this.cursorEl.style.display="none",this.styleEl.innerHTML=this.styleEl.innerHTML.replace("* {cursor: none !important;}",""),console.log("[AnimeCursor] AnimeCursor disabled!")))}enable(){this.disabled&&(this.disabled=!1,this.cursorEl&&(this.cursorEl.style.display="",this.styleEl.innerHTML+="* {cursor: none; !important;}",console.log("[AnimeCursor] AnimeCursor enabled!")))}_validateOptions(){if(!this.disabled){if(!this.options||!this.options.cursors)throw console.error("[AnimeCursor] missing cursors set up"),new Error("AnimeCursor init failed");this.defaultCursorType=null;for(const[e,s]of Object.entries(this.options.cursors))if(!0===s.default){if(this.defaultCursorType)throw new Error("[AnimeCursor] There can only be one default cursor");this.defaultCursorType=e}for(const[e,s]of Object.entries(this.options.cursors)){if(["size","image"].forEach(t=>{if(void 0===s[t])throw console.error(`[AnimeCursor] cursor "${e}" missing required setting: ${t}`),new Error("AnimeCursor init failed")}),void 0!==s.tags&&!Array.isArray(s.tags))throw console.error(`[AnimeCursor] default cursor "${e}" 's tags must be an array if provided`),new Error("AnimeCursor init failed");if(void 0!==s.duration&&"number"!=typeof s.duration)throw console.error(`[AnimeCursor] cursor "${e}" 's duration must be a number(seconds)`),new Error("AnimeCursor init failed")}}}_checkDomLoad(){const e=()=>{this._injectHTML(),this._injectCSS(),this._bindElements(),this._bindMouse()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}_injectPreload(){if(this.disabled)return;const e=new Set;for(const s of Object.values(this.options.cursors))s.image&&e.add(s.image);e.forEach(e=>{const s=document.createElement("link");s.rel="preload",s.as="image",s.href=e,e.startsWith("http")&&!e.startsWith(window.location.origin)&&(s.crossOrigin="anonymous"),document.head.appendChild(s),this.options.debug&&console.info(`[AnimeCursor] Preloading image: ${e}`)}),this.options.debug&&e.size>0&&console.info(`[AnimeCursor] Preloaded ${e.size} cursor image(s)`)}_injectHTML(){if(this.disabled)return;const e=document.createElement("div");if(e.id="anime-cursor",this.options.debug){e.className="cursor-default cursor-debugmode";const s=document.createElement("div");s.className="anime-cursor-debug",document.body.appendChild(s),this.debugEl=s}else e.className="cursor-default";this.options.displayOnLoad?e.style.display="block":(e.style.display="none",e.dataset.animecursorHide="true"),document.body.appendChild(e),this.cursorEl=e}_injectCSS(){if(this.disabled)return;const e=document.createElement("style");e.id="animecursor-styles";let s="";s+=`\n        * {cursor: none !important;}\n        #anime-cursor {\n        position: fixed;\n        top: 0;\n        left: 0;\n        pointer-events: none;\n        background-repeat: no-repeat;\n        transform-origin: 0 0;\n        transform-style: preserve-3d;\n        z-index: ${this._getMaxZIndex()};\n        }\n        .cursor-debugmode {\n            border: 1px solid green;\n        }\n        .anime-cursor-debug {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: fit-content;\n            height: fit-content;\n            padding: 5px;\n            font-size: 16px;\n            text-wrap: nowrap;\n            color: red;\n            pointer-events: none;\n            overflow: visible;\n            z-index: 2147483647;\n        }\n        .anime-cursor-debug::before {\n            position: absolute;\n            content: "";\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 1px;\n            background-color: red;\n        }\n        .anime-cursor-debug::after {\n            position: absolute;\n            content: "";\n            top: 0;\n            left: 0;\n            width: 1px;\n            height: 100vh;\n            background-color: red;\n        }\n        `;for(const[e,o]of Object.entries(this.options.cursors)){const n=`.cursor-${e}`,r=o.size,i=o.frames,l=o.image,d=o.offset,a=o.zIndex,u=o.scale,c=l.toLowerCase().endsWith(".gif");var t;t=o.pixel?"pixelated":"auto",s+=`\n            ${n} {\n            width: ${r[0]}px;\n            height: ${r[1]}px;\n            background-image: url("${l}");\n            image-rendering: ${t};\n            ${u||d?`transform: ${[u&&`scale(${u[0]}, ${u[1]})`,d&&`translate(-${d[0]}px, -${d[1]}px)`].filter(Boolean).join(" ")};`:""}\n            \n            ${void 0!==a?`z-index:${a};`:""}\n            }`;const h=o.duration;if(!c&&i>1&&"number"==typeof h){const t=`animecursor_${e}`;s+=`\n                ${n} {\n                animation: ${t} steps(${i}) ${h}s infinite ${o.pingpong?"alternate":""};\n                }\n\n                @keyframes ${t} {\n                from { background-position: 0 0; }\n                to { background-position: -${r[0]*i}px 0; }\n                }\n                `}}e.textContent=s,document.head.appendChild(e),this.styleEl=e}_bindElements(e){if(!this.disabled){for(const[e,s]of Object.entries(this.options.cursors))s.tags&&Array.isArray(s.tags)&&0!==s.tags.length&&s.tags.forEach(s=>{const t=s.toUpperCase();document.querySelectorAll(t).forEach(s=>{s.dataset.cursor||(s.dataset.cursor=e,s.dataset.cursorBound="true")})});e&&console.info("[AnimeCursor] refresh done")}}_bindMouse(){this.disabled||(this._onMouseMove=e=>{if(this.disabled)return;const s=e.clientX,t=e.clientY;this.cursorEl.style.left=s+"px",this.cursorEl.style.top=t+"px",this.cursorEl.dataset.animecursorHide&&(this.cursorEl.style.display="block"),this.debugEl&&(this.debugEl.style.left=s+"px",this.debugEl.style.top=t+"px");let o=null;const n=document.elementFromPoint(s,t);n&&n.dataset&&n.dataset.cursor?o=n.dataset.cursor:this.defaultCursorType&&(o=this.defaultCursorType),o&&(this.debugEl&&(this.debugEl.textContent=`(${s}px , ${t}px) ${o}`),o!==this.lastCursorType&&(this.debugEl?this.cursorEl.className=`cursor-${o} cursor-debugmode`:this.cursorEl.className=`cursor-${o}`,this.lastCursorType=o))},document.addEventListener("mousemove",this._onMouseMove),console.log("[AnimeCursor] AnimeCursor setted up."))}_getMaxZIndex(){if(!this.disabled)return 2147483646}}});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e="undefined"!=typeof globalThis?globalThis:e||self).AnimeCursor=r()}(this,function(){"use strict";let e=null;return class{static get instance(){return e}static destroy(){return!!e&&(e.destroy(),!0)}static refresh(){return!!e&&(e.refresh(),!0)}static disable(){return!!e&&(e.disable(),!0)}static enable(){return!!e&&(e.enable(),!0)}constructor(r={}){return e?(console.warn("[AnimeCursor] AnimeCursor already exists."),e):(this.options={displayOnLoad:!1,enableTouch:!1,debug:!1,...r},this.disabled=!1,this.options.enableTouch||this.isMouseLikeDevice()?(this.cursorEl=null,this.lastCursorType=null,this.debugEl=null,this.styleEl=null,this._onMouseMove=null,this._validateOptions(),this._injectPreload(),this._checkDomLoad(),void(e=this)):(this.disabled=!0,void(this.options.debug&&console.warn("[AnimeCursor] Touch device detected, cursor disabled."))))}isMouseLikeDevice(){if(!this.disabled)return window.matchMedia("(pointer: fine)").matches}refresh(){this.disabled||(this.options.debug&&console.info("[AnimeCursor] starting refresh..."),this._bindElements(!0))}destroy(){if(!this.disabled){this._onMouseMove&&(document.removeEventListener("mousemove",this._onMouseMove),this._onMouseMove=null),this.cursorEl&&(this.cursorEl.remove(),this.cursorEl=null),this.debugEl&&(this.debugEl.remove(),this.debugEl=null),this.styleEl&&(this.styleEl.remove(),this.styleEl=null);for(const e of Object.values(this.options.cursors))e.tags&&Array.isArray(e.tags)&&e.tags.forEach(e=>{document.querySelectorAll(e).forEach(e=>{e.dataset.cursorBound&&(delete e.dataset.cursor,delete e.dataset.cursorBound)})});this.lastCursorType=null,e===this&&(e=null)}}disable(){this.disabled||(this.disabled=!0,this.cursorEl&&(this.cursorEl.style.display="none",this.styleEl.innerHTML=this.styleEl.innerHTML.replace("* {cursor: none !important;}",""),console.log("[AnimeCursor] AnimeCursor disabled!")))}enable(){this.disabled&&(this.disabled=!1,this.cursorEl&&(this.cursorEl.style.display="",this.styleEl.innerHTML+="* {cursor: none; !important;}",console.log("[AnimeCursor] AnimeCursor enabled!")))}_validateOptions(){if(!this.disabled){if(!this.options||!this.options.cursors)throw console.error("[AnimeCursor] missing cursors set up"),new Error("AnimeCursor init failed");this.defaultCursorType=null;for(const[e,r]of Object.entries(this.options.cursors))if(!0===r.default){if(this.defaultCursorType)throw new Error("[AnimeCursor] There can only be one default cursor");this.defaultCursorType=e}for(const[e,r]of Object.entries(this.options.cursors)){if(["size","image"].forEach(s=>{if(void 0===r[s])throw console.error(`[AnimeCursor] cursor "${e}" missing required setting: ${s}`),new Error("AnimeCursor init failed")}),void 0!==r.frames)if(Array.isArray(r.frames)){if(!Array.isArray(r.duration)||r.duration.length!==r.frames.length)throw console.error(`[AnimeCursor] cursor "${e}" has frames as array but duration is not an array of same length`),new Error("AnimeCursor init failed");for(let s of r.frames)if(!Number.isInteger(s)||s<=0)throw console.error(`[AnimeCursor] cursor "${e}" frames array must contain positive integers`),new Error("AnimeCursor init failed");for(let s of r.duration)if("number"!=typeof s||s<=0)throw console.error(`[AnimeCursor] cursor "${e}" duration array must contain positive numbers`),new Error("AnimeCursor init failed")}else{if("number"!=typeof r.frames)throw console.error(`[AnimeCursor] cursor "${e}" frames must be a number or an array`),new Error("AnimeCursor init failed");if(Array.isArray(r.duration))throw console.error(`[AnimeCursor] cursor "${e}" frames is number but duration is array, must be consistent`),new Error("AnimeCursor init failed");if(!Number.isInteger(r.frames)||r.frames<=0)throw console.error(`[AnimeCursor] cursor "${e}" frames must be a positive integer`),new Error("AnimeCursor init failed");if(void 0!==r.duration&&("number"!=typeof r.duration||r.duration<=0))throw console.error(`[AnimeCursor] cursor "${e}" duration must be a positive number`),new Error("AnimeCursor init failed")}if(void 0!==r.tags&&!Array.isArray(r.tags))throw console.error(`[AnimeCursor] cursor "${e}" 's tags must be an array if provided`),new Error("AnimeCursor init failed")}}}_checkDomLoad(){const e=()=>{this._injectHTML(),this._injectCSS(),this._bindElements(),this._bindMouse()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}_injectPreload(){if(this.disabled)return;const e=new Set;for(const r of Object.values(this.options.cursors))r.image&&e.add(r.image);e.forEach(e=>{const r=document.createElement("link");r.rel="preload",r.as="image",r.href=e,e.startsWith("http")&&!e.startsWith(window.location.origin)&&(r.crossOrigin="anonymous"),document.head.appendChild(r),this.options.debug&&console.info(`[AnimeCursor] Preloading image: ${e}`)}),this.options.debug&&e.size>0&&console.info(`[AnimeCursor] Preloaded ${e.size} cursor image(s)`)}_injectHTML(){if(this.disabled)return;const e=document.createElement("div");if(e.id="anime-cursor",this.options.debug){e.className="cursor-default cursor-debugmode";const r=document.createElement("div");r.className="anime-cursor-debug",document.body.appendChild(r),this.debugEl=r}else e.className="cursor-default";this.options.displayOnLoad?e.style.display="block":(e.style.display="none",e.dataset.animecursorHide="true"),document.body.appendChild(e),this.cursorEl=e}_injectCSS(){if(this.disabled)return;const e=document.createElement("style");e.id="animecursor-styles";let r="";r+=`\n        * {cursor: none !important;}\n        #anime-cursor {\n        position: fixed;\n        top: 0;\n        left: 0;\n        pointer-events: none;\n        background-repeat: no-repeat;\n        transform-origin: 0 0;\n        transform-style: preserve-3d;\n        z-index: ${this._getMaxZIndex()};\n        }\n        .cursor-debugmode {\n            border: 1px solid green;\n        }\n        .anime-cursor-debug {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: fit-content;\n            height: fit-content;\n            padding: 5px;\n            font-size: 16px;\n            text-wrap: nowrap;\n            color: red;\n            pointer-events: none;\n            overflow: visible;\n            z-index: 2147483647;\n        }\n        .anime-cursor-debug::before {\n            position: absolute;\n            content: "";\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 1px;\n            background-color: red;\n        }\n        .anime-cursor-debug::after {\n            position: absolute;\n            content: "";\n            top: 0;\n            left: 0;\n            width: 1px;\n            height: 100vh;\n            background-color: red;\n        }\n        `;for(const[e,s]of Object.entries(this.options.cursors)){const t=`.cursor-${e}`,o=s.size,n=s.image,i=s.offset,a=s.zIndex,u=s.scale,l=n.toLowerCase().endsWith(".gif"),d=s.pixel?"pixelated":"auto";r+=`\n        ${t} {\n            width: ${o[0]}px;\n            height: ${o[1]}px;\n            background-image: url("${n}");\n            image-rendering: ${d};\n            ${u||i?`transform: ${[u&&`scale(${u[0]}, ${u[1]})`,i&&`translate(-${i[0]}px, -${i[1]}px)`].filter(Boolean).join(" ")};`:""}\n            ${void 0!==a?`z-index:${a};`:""}\n        }`;const c=s.frames,h=s.duration;if(Array.isArray(c)&&Array.isArray(h)&&c.length===h.length){const n=c.reduce((e,r)=>e+r,0),i=h.reduce((e,r)=>e+r,0);if(!l&&n>1&&i>0){const a=`animecursor_${e}`,u=[];let l=0,d=0;for(let e=0;e<c.length;e++){const r=c[e],s=h[e]/i;for(let e=0;e<r;e++){const t=l+e*s/r;u.push({percent:t,pos:-d*o[0]}),d++}l+=s}u.push({percent:1,pos:-(n-1)*o[0]}),r+=`\n                ${t} {\n                    animation: ${a} ${i}s infinite ${s.pingpong?"alternate":""};\n                }`,r+=`\n                @keyframes ${a} {`;for(let e=0;e<u.length;e++){const s=u[e];let t=(100*s.percent).toFixed(5);1===s.percent&&(t="100"),r+=`\n                    ${t}% {\n                        background-position: ${s.pos}px 0;\n                        ${e<u.length-1?"animation-timing-function: steps(1, end);":""}\n                    }`}r+="\n                }"}}else if("number"==typeof c&&"number"==typeof h){if(!l&&c>1&&h>0){const n=`animecursor_${e}`;r+=`\n                ${t} {\n                    animation: ${n} steps(${c}) ${h}s infinite ${s.pingpong?"alternate":""};\n                }\n\n                @keyframes ${n} {\n                    from { background-position: 0 0; }\n                    to { background-position: -${o[0]*c}px 0; }\n                }`}}}e.textContent=r,document.head.appendChild(e),this.styleEl=e}_bindElements(e){if(!this.disabled){for(const[e,r]of Object.entries(this.options.cursors))r.tags&&Array.isArray(r.tags)&&0!==r.tags.length&&r.tags.forEach(r=>{const s=r.toUpperCase();document.querySelectorAll(s).forEach(r=>{r.dataset.cursor||(r.dataset.cursor=e,r.dataset.cursorBound="true")})});e&&console.info("[AnimeCursor] refresh done")}}_bindMouse(){this.disabled||(this._onMouseMove=e=>{if(this.disabled)return;const r=e.clientX,s=e.clientY;this.cursorEl.style.left=r+"px",this.cursorEl.style.top=s+"px",this.cursorEl.dataset.animecursorHide&&(this.cursorEl.style.display="block"),this.debugEl&&(this.debugEl.style.left=r+"px",this.debugEl.style.top=s+"px");let t=null;const o=document.elementFromPoint(r,s);o&&o.dataset&&o.dataset.cursor?t=o.dataset.cursor:this.defaultCursorType&&(t=this.defaultCursorType),t&&(this.debugEl&&(this.debugEl.textContent=`(${r}px , ${s}px) ${t}`),t!==this.lastCursorType&&(this.debugEl?this.cursorEl.className=`cursor-${t} cursor-debugmode`:this.cursorEl.className=`cursor-${t}`,this.lastCursorType=t))},document.addEventListener("mousemove",this._onMouseMove),console.log("[AnimeCursor] AnimeCursor setted up."))}_getMaxZIndex(){if(!this.disabled)return 2147483646}}});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "anime-cursor",
-    "version": "0.3.1",
+    "version": "1.0.0",
     "description": "A lightweight JavaScript library for animated custom cursors",
     "main": "dist/anime-cursor.umd.js",
     "module": "dist/anime-cursor.esm.js",