catsjuice / ipad-cursor Goto Github PK

  transform:
    translate(calc(-50% + var(--cursor-translateX)), calc(-50% + var(--cursor-translateY)))
    scale(var(--cursor-scale));

--cursor-translateX and --cursor-translateX are first set in onBlockMove(), which will only be triggered when mouse is moving on a block. Therefore, these two CSS variables are undefined before the cursor enters a block, resulting in the transform property being none. Consequently, scale will not work.

Reproduce

I've set the data-cursor="block" attribute on both tags

Description

Could you please tell me how to achieve this effect? I didn't find the solution in documentation :P

• When using to jump internally, the cursor cannot be moved.
• This may seem unrelated to updateCursor. But I've implemented the use of a MutationObserver to listen for DOM changes and perform an updateCursor. the cursor is subtly unresponsive for a few seconds before being moved normally.

• Develop
• Deploy

• Github README (EN)
• Github README (ZH-CN)

Just in case the elements lag on less capable devices,
add an optional config to apply will-change for cursor element and block element.

• add configuration enableWillChange
• update docs

will-change on MDN

• Vue composables
• v-cursor directive
• Component
  • Maybe IpadCursorProvider, IpadCursor

Manually specifying whether the cursor is displayed as text seems a bit tricky. Can we automatically change the cursor by the cursor style of the element the cursor is pointing to?

It would probably be written like this:

// target is the dom element
const computedStyle = getComputedStyle(target);
const cursor = computedStyle.cursor;
if (cursor === 'text') {
   ...
} 

I'm not sure if this will have performance issues...

Thanks for this repo!!
Recently, I wanna add this ipad-cursor into my blog built by hexo (NexT theme). But I don't know how to do that :)

goals:

• Custom style friendly
• Collation processing logic
• Add more typescript declaration
• Add more JsDoc
• Split core code into separate files

effect on iPad OS:

Add a config item called enableLighting (defaults to false), add lighting effect when this config is true