ipad-cursor - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

index.d.ts

@@ -1,2 +0,139 @@
-export declare function init(): void;
-export declare function register(): void;
+export type ICursorType = "normal" | "text" | "block";
+/**
+ *  if without unit, `px` is used by default
+ */
+type MaybeSize = string | number;
+/** if without unit `ms` is used by defaut */
+type MaybeDuration = string | number;
+/** do not use 0x000000, use #000000 instead */
+type MaybeColor = string;
+/**
+ * Configurations for the cursor
+ */
+export interface IpadCursorConfig {
+    /**
+     * Strength of adsorption, the larger the value,
+     * The higher the value, the greater the range of the block that can be moved when it is hovered
+     * @type {number} between 0 and 30
+     * @default 10
+     */
+    adsorptionStrength?: number;
+    /**
+     * The class name of the cursor element
+     * @type {string}
+     * @default 'cursor'
+     */
+    className?: string;
+    /**
+     * The style of the cursor, when it not hover on any element
+     */
+    normalStyle?: IpadCursorStyle;
+    /**
+     * The style of the cursor, when it hover on text
+     */
+    textStyle?: IpadCursorStyle;
+    /**
+     * The style of the cursor, when it hover on block
+     */
+    blockStyle?: IpadCursorStyle;
+    /**
+     * Cursor padding when hover on block
+     */
+    blockPadding?: number | "auto";
+}
+/**
+ * Configurable style of the cursor
+ */
+export interface IpadCursorStyle {
+    /**
+     * The width of the cursor
+     */
+    width?: MaybeSize;
+    /**
+     * The width of the cursor
+     */
+    height?: MaybeSize;
+    /**
+     * Border radius of cursor
+     */
+    radius?: MaybeSize;
+    /**
+     * Transition duration of basic properties like width, height, radius, border, background-color
+     */
+    durationBase?: MaybeDuration;
+    /**
+     * Transition duration of position: left, top
+     */
+    durationPosition?: MaybeDuration;
+    /**
+     * Transition duration of backdrop-filter
+     */
+    durationBackdropFilter?: MaybeDuration;
+    /**
+     * The background color of the cursor
+     */
+    background?: MaybeColor;
+    /**
+     * Border of the cursor
+     * @example '1px solid rgba(100, 100, 100, 0.1)'
+     */
+    border?: string;
+    /** z-index of cursor */
+    zIndex?: number;
+    /**
+     * Scale of cursor
+     */
+    scale?: number;
+    /**
+     * backdrop-filter blur
+     */
+    backdropBlur?: MaybeSize;
+    /**
+     * backdrop-filter saturate
+     */
+    backdropSaturate?: string;
+}
+/**
+ * Init cursor, hide default cursor, and listen mousemove event
+ * will only run once in client even if called multiple times
+ * @returns
+ */
+declare function initCursor(_config?: IpadCursorConfig): void;
+/**
+ * destroy cursor, remove event listener and remove cursor element
+ * @returns
+ */
+declare function disposeCursor(): void;
+/**
+ * Update current Configuration
+ * @param _config
+ */
+declare function updateConfig(_config: IpadCursorConfig): IpadCursorConfig;
+/**
+ * Detect all interactive elements in the page
+ * Update the binding of events, remove listeners for elements that are removed
+ * @returns
+ */
+declare function updateCursor(): void;
+/**
+ * Create custom style that can be bound to `data-cursor-style`
+ * @param style
+ */
+declare function customCursorStyle(style: IpadCursorStyle & Record<string, any>): string;
+declare const CursorType: {
+    TEXT: ICursorType;
+    BLOCK: ICursorType;
+};
+declare const exported: {
+    CursorType: {
+        TEXT: ICursorType;
+        BLOCK: ICursorType;
+    };
+    initCursor: typeof initCursor;
+    updateCursor: typeof updateCursor;
+    disposeCursor: typeof disposeCursor;
+    updateConfig: typeof updateConfig;
+    customCursorStyle: typeof customCursorStyle;
+};
+export { CursorType, initCursor, updateCursor, disposeCursor, updateConfig, customCursorStyle, };
+export default exported;

index.min.js

@@ -1,1 +0,1 @@
-const r={x:0,y:0},e="undefined"==typeof document,t=new Set,o=new Map,{adsorptionStrength:s,cursorClassName:n}={adsorptionStrength:10,cursorClassName:"cursor"},a={"--cursor-width":"20px","--cursor-height":"20px","--cursor-radius":"10px","--cursor-duration":"0.23s","--cursor-position-duration":"0s","--cursor-blur-duration":"0s","--cursor-bg":"rgba(150, 150, 150, 0.2)","--cursor-border":"1px solid rgba(100, 100, 100, 0.1)","--cursor-z-index":"9999","--cursor-font-size":"1rem","--cursor-translateX":"0px","--cursor-translateY":"0px","--cursor-scale":"1","--cursor-bg-blur":"4px","--cursor-bg-saturate":"180%"},u={"--cursor-width":"4px","--cursor-height":"1.2em","--cursor-border":"0px solid rgba(100, 100, 100, 0)","--cursor-bg":"rgba(100, 100, 100, 0.3)","--cursor-blur-duration":"1s"},i={"--cursor-bg":"rgba(100, 100, 100, 0.1)","--cursor-border":"1px solid rgba(100, 100, 100, 0.05)","--cursor-bg-blur":"0px","--cursor-blur-duration":"1s","--cursor-bg-saturate":"120%"};let c,d=!1,l=!1;function p(r,e){c&&("string"==typeof r?c.style.setProperty(r,e):Object.entries(r).forEach((([r,e])=>{c.style.setProperty(r,e)})))}function v(){if(e||d)return;d=!0,window.addEventListener("mousemove",(e=>{r.x=e.clientX,r.y=e.clientY})),function(){if(e)return;c=document.createElement("div"),c.classList.add(n),p(a),document.body.appendChild(c)}(),h();const t=document.createElement("style");t.innerHTML=`\n    body, * {\n      cursor: none;\n    }\n    .${n.split(/\s+/).join(".")} {\n      pointer-events: none;\n      position: fixed;\n      left: var(--cursor-x);\n      top: var(--cursor-y);\n      width: var(--cursor-width);\n      height: var(--cursor-height);\n      border-radius: var(--cursor-radius);\n      background-color: var(--cursor-bg);\n      border: var(--cursor-border);\n      z-index: var(--cursor-z-index);\n      font-size: var(--cursor-font-size);\n      backdrop-filter: \n        blur(var(--cursor-bg-blur)) \n        saturate(var(--cursor-bg-saturate));\n      transition:\n        width var(--cursor-duration) ease,\n        height var(--cursor-duration) ease,\n        border-radius var(--cursor-duration) ease,\n        border var(--cursor-duration) ease,\n        background-color var(--cursor-duration) ease,\n        left var(--cursor-position-duration) ease,\n        top var(--cursor-position-duration) ease,\n        backdrop-filter var(--cursor-blur-duration) ease;\n      transform: \n        translate(calc(-50% + var(--cursor-translateX)), calc(-50% + var(--cursor-translateY))) \n        scale(var(--cursor-scale));\n    }\n  `,document.head.appendChild(t)}function h(){!e&&c&&(l||(p("--cursor-x",`${r.x}px`),p("--cursor-y",`${r.y}px`)),window.requestAnimationFrame(h))}function f(){if(e||!d)return;const n=e||!d?[]:document.querySelectorAll("[data-cursor]"),v=new Map;n.forEach((e=>{v.set(e,!0),t.has(e)||function(e){const n=e.getAttribute("data-cursor");t.add(e),"text"===n&&function(r){function e(r){p(u);const e=r.target;p("--cursor-font-size",window.getComputedStyle(e).fontSize)}r.addEventListener("mouseover",e,{passive:!0}),r.addEventListener("mouseleave",b,{passive:!0}),o.set(r,[{event:"mouseover",handler:e},{event:"mouseleave",handler:b}])}(e);"rect"===n&&function(e){const t=e;function n(){const r=t.getBoundingClientRect();l=!0,c.classList.add("focus"),p("--cursor-position-duration","0.1s"),p("--cursor-radius","8px"),p("--cursor-x",`${r.left+r.width/2}px`),p("--cursor-y",`${r.top+r.height/2}px`),p("--cursor-width",`${r.width}px`),p("--cursor-height",`${r.height}px`);const e={...i},o=t.getAttribute("data-cursor-style");o&&o.split(";").forEach((r=>{const[t,o]=r.split(":").map((r=>r.trim()));e[t]=o})),p(e),t.style.setProperty("transform","translate(var(--translateX), var(--translateY))")}function u(){const e=t.getBoundingClientRect(),o=e.height/2,n=(r.y-e.top-o)/o,a=e.width/2,u=(r.x-e.left-a)/a;p("--cursor-translateX",u*(e.width/100*s)+"px"),p("--cursor-translateY",n*(e.height/100*s)+"px"),t.style.setProperty("--translateX",u*(e.width/100*s)+"px"),t.style.setProperty("--translateY",n*(e.height/100*s)+"px")}function d(){setTimeout((()=>{l=!1,c.classList.remove("focus")})),p(a),t.style.setProperty("transform","translate(0px, 0px)")}t.addEventListener("mouseenter",n,{passive:!0}),t.addEventListener("mousemove",u,{passive:!0}),t.addEventListener("mouseleave",d,{passive:!0}),o.set(t,[{event:"mouseenter",handler:n},{event:"mousemove",handler:u},{event:"mouseleave",handler:d}])}(e)}(e)})),t.forEach((r=>{v.has(r)||function(r){var e;t.delete(r),null===(e=o.get(r))||void 0===e||e.forEach((({event:e,handler:t})=>{r.removeEventListener(e,t)})),o.delete(r)}(r)}))}function b(){p(a)}export{v as init,f as register};
+import{clamp as e,objectKeys as t}from"@catsjuice/utils";let r=!1,o=null,s=!1,n=null;const a={x:0,y:0},i="undefined"==typeof document,u=new Set,c=new Map,d={blockPadding:"auto",adsorptionStrength:10,className:"ipad-cursor",normalStyle:{width:"20px",height:"20px",radius:"50%",durationBase:"0.23s",durationPosition:"0s",durationBackdropFilter:"0s",background:"rgba(150, 150, 150, 0.2)",border:"1px solid rgba(100, 100, 100, 0.1)",zIndex:9999,scale:1,backdropBlur:"0px",backdropSaturate:"180%"},textStyle:{width:"4px",height:"1.2em",border:"0px solid rgba(100, 100, 100, 0)",background:"rgba(100, 100, 100, 0.3)",durationBackdropFilter:"1s",radius:"10px"},blockStyle:{background:"rgba(100, 100, 100, 0.1)",border:"1px solid rgba(100, 100, 100, 0.05)",backdropBlur:"0px",durationBackdropFilter:"0.1s",backdropSaturate:"120%",radius:"10px"}};class l{static isNum(e){return"number"==typeof e||/^\d+$/.test(e)}static getSize(e){return this.isNum(e)?`${e}px`:e}static getDuration(e){return this.isNum(e)?`${e}ms`:e}static getColor(e){return e}static objectKeys(e){return Object.keys(e)}static style2Vars(e){const t={backdropBlur:"--cursor-bg-blur",backdropSaturate:"--cursor-bg-saturate",background:"--cursor-bg",border:"--cursor-border",durationBackdropFilter:"--cursor-blur-duration",durationBase:"--cursor-duration",durationPosition:"--cursor-position-duration",height:"--cursor-height",radius:"--cursor-radius",scale:"--cursor-scale",width:"--cursor-width",zIndex:"--cursor-z-index"};return this.objectKeys(e).reduce(((r,o)=>{let s=e[o];if(void 0===s)return r;const n=["background","border"].includes(o),a=["width","height","radius","backdropBlur"].includes(o),i=o.startsWith("duration");n&&(s=this.getColor(s)),a&&(s=this.getSize(s)),i&&(s=this.getDuration(s));const u=t[o]||o;return{...r,[u]:s}}),{})}static isMergebleObject(e){return(t=e)&&"object"==typeof t&&!Array.isArray(t)&&Object.keys(e).length>0;var t}static mergeDeep(e,...r){if(!r.length)return e;const o=r.shift();return o?(this.isMergebleObject(e)&&this.isMergebleObject(o)&&t(o).forEach((t=>{this.isMergebleObject(o[t])?(e[t]||Object.assign(e,{[t]:{}}),this.mergeDeep(e[t],o[t])):Object.assign(e,{[t]:o[t]})})),this.mergeDeep(e,...r)):e}}function p(e,t){o&&("string"==typeof e?t&&o.style.setProperty(e,t):Object.entries(e).forEach((([e,t])=>{o&&o.style.setProperty(e,t)})))}function h(e){a.x=e.clientX,a.y=e.clientY}function b(e){i||r||(e&&v(e),r=!0,window.addEventListener("mousemove",h),function(){if(i)return;o=document.createElement("div"),o.classList.add(d.className),document.body.appendChild(o),k()}(),function(){if(n)return;n=document.createElement("style"),n.innerHTML=`\n    body, * {\n      cursor: none;\n    }\n    .${d.className.split(/\s+/).join(".")} {\n      pointer-events: none;\n      position: fixed;\n      left: var(--cursor-x);\n      top: var(--cursor-y);\n      width: var(--cursor-width);\n      height: var(--cursor-height);\n      border-radius: var(--cursor-radius);\n      background-color: var(--cursor-bg);\n      border: var(--cursor-border);\n      z-index: var(--cursor-z-index);\n      font-size: var(--cursor-font-size);\n      backdrop-filter: \n        blur(var(--cursor-bg-blur)) \n        saturate(var(--cursor-bg-saturate));\n      transition:\n        width var(--cursor-duration) ease,\n        height var(--cursor-duration) ease,\n        border-radius var(--cursor-duration) ease,\n        border var(--cursor-duration) ease,\n        background-color var(--cursor-duration) ease,\n        left var(--cursor-position-duration) ease,\n        top var(--cursor-position-duration) ease,\n        backdrop-filter var(--cursor-blur-duration) ease;\n      transform: \n        translate(calc(-50% + var(--cursor-translateX)), calc(-50% + var(--cursor-translateY))) \n        scale(var(--cursor-scale));\n    }\n  `,document.head.appendChild(n)}(),m(),f())}function g(){r&&(r=!1,window.removeEventListener("mousemove",h),o&&o.remove(),n&&n.remove(),n=null,o=null,u.forEach((e=>y(e))))}function v(t){return"adsorptionStrength"in t&&(d.adsorptionStrength=e(t.adsorptionStrength||10,0,30)),l.mergeDeep(d,t)}function m(){!i&&o&&(s||(p("--cursor-x",`${a.x}px`),p("--cursor-y",`${a.y}px`)),window.requestAnimationFrame(m))}function f(){if(i||!r)return;const e=i||!r?[]:document.querySelectorAll("[data-cursor]"),t=new Map;e.forEach((e=>{t.set(e,!0),u.has(e)||function(e){const t=e.getAttribute("data-cursor");u.add(e),"text"===t&&function(e){function t(e){p(l.style2Vars(d.textStyle||{}));const t=e.target;p("--cursor-font-size",window.getComputedStyle(t).fontSize),p(l.style2Vars({...d.textStyle,...x(t)}))}e.addEventListener("mouseover",t,{passive:!0}),e.addEventListener("mouseleave",k,{passive:!0}),c.set(e,[{event:"mouseover",handler:t},{event:"mouseleave",handler:k}])}(e);"block"===t?function(e){const t=e;let r;function n(){const e=t.getBoundingClientRect();r&&clearTimeout(r),s=!0,r=setTimeout((()=>s=!0));let n=d.blockPadding||0;if("auto"===n){const t=Math.min(e.width,e.height);n=Math.max(2,Math.floor(t/25))}o.classList.add("focus"),p("--cursor-x",`${e.left+e.width/2}px`),p("--cursor-y",`${e.top+e.height/2}px`),p("--cursor-width",`${e.width+2*n}px`),p("--cursor-height",`${e.height+2*n}px`);const a={...d.blockStyle||{},...x(t)};p(l.style2Vars(a)),t.style.setProperty("transform","translate(var(--translateX), var(--translateY))")}function i(){const e=t.getBoundingClientRect(),r=e.height/2,o=(a.y-e.top-r)/r,s=e.width/2,n=(a.x-e.left-s)/s,i=d.adsorptionStrength||10;p("--cursor-translateX",n*(e.width/100*i)+"px"),p("--cursor-translateY",o*(e.height/100*i)+"px"),t.style.setProperty("--translateX",n*(e.width/100*i)+"px"),t.style.setProperty("--translateY",o*(e.height/100*i)+"px")}function u(){r&&clearTimeout(r),r=setTimeout((()=>{s=!1,o&&o.classList.remove("focus")})),k(),t.style.setProperty("transform","translate(0px, 0px)")}t.addEventListener("mouseenter",n,{passive:!0}),t.addEventListener("mousemove",i,{passive:!0}),t.addEventListener("mouseleave",u,{passive:!0}),c.set(t,[{event:"mouseenter",handler:n},{event:"mousemove",handler:i},{event:"mouseleave",handler:u}])}(e):u.delete(e)}(e)})),u.forEach((e=>{t.has(e)||y(e)}))}function y(e){var t;u.delete(e),null===(t=c.get(e))||void 0===t||t.forEach((({event:t,handler:r})=>{e.removeEventListener(t,r)})),c.delete(e),e.style.setProperty("transform","none")}function x(e){const t=e.getAttribute("data-cursor-style"),r={};return t&&t.split(/(,|;)/).forEach((e=>{const[t,o]=e.split(":").map((e=>e.trim()));r[t]=o})),r}function k(){p(l.style2Vars(d.normalStyle||{}))}function w(e){return Object.entries(e).map((([e,t])=>`${e}: ${t}`)).join("; ")}const S={TEXT:"text",BLOCK:"block"},E={CursorType:S,initCursor:b,updateCursor:f,disposeCursor:g,updateConfig:v,customCursorStyle:w};export{S as CursorType,w as customCursorStyle,E as default,g as disposeCursor,b as initCursor,v as updateConfig,f as updateCursor};

package.json

 {
   "name": "ipad-cursor",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "",
@@ -22,3 +22,6 @@ "type": "module",
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "@catsjuice/utils": "^0.1.4"
+  }
 }

README.md

@@ -1,1 +0,9 @@
-# i-cursor
+![logo](./playground/public/ipad-cursor.svg)
+
+# ipad-mouse
+
+![NPM](https://img.shields.io/npm/l/ipad-cursor)
+![NPM bundle size](https://img.shields.io/bundlephobia/min/ipad-cursor)
+![npm](https://img.shields.io/npm/v/ipad-cursor)
+
+Mouse effect hacking of iPad in browser that can be used in any frameworks 

vue/index.d.ts

@@ -1,7 +0,15 @@
-import { register } from '..';
-export declare const iCursorPlugin: {
+import { initCursor, updateCursor, disposeCursor, IpadCursorConfig, updateConfig, customCursorStyle } from "..";
+export declare const ipadCursorPlugin: {
     install(app: any): void;
 };
-export declare function useCursor(): {
-    register: typeof register;
+export declare function useCursor(config?: IpadCursorConfig): {
+    CursorType: {
+        TEXT: import("..").ICursorType;
+        BLOCK: import("..").ICursorType;
+    };
+    disposeCursor: typeof disposeCursor;
+    initCursor: typeof initCursor;
+    updateCursor: typeof updateCursor;
+    updateConfig: typeof updateConfig;
+    customCursorStyle: typeof customCursorStyle;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41175

increased by81.75%

Lines of code

1064

increased by109.86%

Number of lines in readme file

10

increased by900%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Added@catsjuice/utils@^0.1.4