Support for Vuejs / Nuxtjs

[ayushsharma82]

Needs support for virtual DOM frameworks.
It works on initialization but when the DOM changes, this library doesn't work. The cursor will not expand on dynamically added HTML tags.

[ayushsharma82]

Tip: To make this library compatible with Vuejs or any other virtual DOM framework, you just need to expose an update function that will re-evaluate all elements containing '.mouse-hover'.

If you can do that, I can create a fork of it and create a Vuejs plugin. Interesting library!

[ayushsharma82]

The second option would be to use a MutationObserver:

Here's the way I did it: ( If you know any better way then it would be great 👍🏻 )

    const observeDOM = (function () {
      const MutationObserver = window.MutationObserver || window.WebKitMutationObserver

      return function (obj, callback) {
        if (!obj || obj.nodeType !== 1) { return }

        if (MutationObserver) {
          // define a new observer
          const mutationObserver = new MutationObserver(callback)

          // have the observer observe foo for changes in children
          mutationObserver.observe(obj, { childList: true, subtree: true })
          return mutationObserver
        } else if (window.addEventListener) {
          obj.addEventListener('DOMNodeInserted', callback, false)
          obj.addEventListener('DOMNodeRemoved', callback, false)
        }
      }
    })()

    // Hover effects :
    const updateHoverEffect = () => {
      const hoverEls = document.querySelectorAll('.magic-hover')
      hoverEls.forEach((item, i) => {
        item.addEventListener('mouseenter', (event) => {
          switch (options.hoverEffect) {
            case 'circle-move':
              circleMove_mouseEnterHover(item)
              // Move the item hover on:
              if (options.hoverItemMove) {
                hoverItemMove(event, item)
              }
              break
            case 'pointer-blur':
              pointerClass_mouseEnterHover(item, 'pointer-blur')
              break
            case 'pointer-overlay':
              pointerClass_mouseEnterHover(item, 'pointer-overlay')
              break
          }
        })

        item.addEventListener('mouseleave', (event) => {
          item.style.transform = 'translate3d(0,0,0)'
          switch (options.hoverEffect) {
            case 'circle-move':
              circleMove_mouseLeaveHover()
              break
            case 'pointer-blur':
              pointerClass_mouseLeaveHover('pointer-blur')
              break
            case 'pointer-overlay':
              pointerClass_mouseLeaveHover('pointer-overlay')
              break
          }
        })
      })
    }

    updateHoverEffect()

    observeDOM(document.getElementsByTagName('body')[0], () => {
      updateHoverEffect()
      console.log('updated mouse')
    })

[dshongphuc]

hi @ayushsharma82 , thank you so much for your idea, let me try to find if there's another better way. If not, I will use your way, will let you know when it done so you can wrap it with Vue :)

[misterbauer]

@ayushsharma82 that's perfect in my Nuxt app - thank you! I simply added it at the end of the if (!Modernizr.touchevents) {... block at the bottom of magic_mouse.js

[saint-james-fr]

Hey, I was wondering if provided code/patch -which is working great - could be improved performant-wise ? Even the library itself does not seem very reactive-friendly. None of the event listeners added (and they're a lot) are removed when navigating. Would love to know a way to tackle this issue in a reactive library in general...

[saint-james-fr]

Fiddling with the code I found this to be quite useful as well if like me you use Page Transitions in Nuxt, I'm observing title attribute changes which in my case means URL Changes.

const observeURLChanges = (function () {
  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function (obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      // define a new observer
      const mutationObserver = new MutationObserver(callback);

      // Lets listen also for page changes
      // have the observer observe foo for changes in children
      mutationObserver.observe(obj, {
        attributes: true,
        childList: true,
        subtree: true,
      });

      return mutationObserver;
    } else if (window.addEventListener) {
      obj.addEventListener("DOMNodeInserted", callback, false);
      obj.addEventListener("DOMNodeRemoved", callback, false);
    }
  };
})();

const resetHoverEffect = () => {
  circleMove_mouseLeaveHover();
  movement();
};

observeURLChanges(document.getElementsByTagName("title")[0], () => {
  resetHoverEffect();
});

[dshongphuc]

Good job @saint-james-fr thank you.
Sorry guys I was busy on many stuffs so forgot this issue completely :(

[ychahbar19]

For Nuxt3 you can create a plugin file into the plugins folder (e.g: magic-mouse.ts) like this:
`
import { magicMouse } from 'magicmouse.js';

export default defineNuxtPlugin(nuxtApp => {
const options = {
hoverEffect: 'circle-move',
hoverItemMove: false,
defaultCursor: false,
outerWidth: 30,
outerHeight: 30,
};
magicMouse(options);
});
`
then you will need to tell your app into your nuxt.config.ts that this is a client only plugin:
plugins: [{ src: '@/plugins/magic-mouse', mode: 'client' }]