Mobile Sidebar Interference

[mjstraughan]

I am using AnimCubeJS on a Docusaurus based website. On mobile, the sidebar of the site pops out over the page. When there is an AnimCubeJS simulator behind the sidebar, the simulator takes priority and interferes with touch operations of the sidebar. I'm not sure if this issue exists on other website platforms. Below is an example page with the issue. Other pages in the 2x2 > Methods category have the issue as well.

https://www.cubinghistory.com/2x2/Methods/CCLL

A friend of mine corrected the issue for AnimCube3 by altering the event listeners. So all pages on the site that use AnimCube3 function correctly on mobile as it relates to the sidebar. However, the fix introduced a side effect on desktop of not allowing for a click and hold on the simulator to work properly when moving the cursor outside the boundary of the simulator. When I later added AnimCube2, I didn't incorporate the event listener alterations. That is why the sidebar issue exists with AnimCube2.

I prefer to have the navigation working and have the click and drag negative side effect over the other way around. But it would be nice to have a fix for the sidebar issue that keeps the full functionality of AnimCubeJS.

[mfeather1]

To fix sidebar navigation remove preventDefault from the mouseup function in AnimCube.js. For cube rotation outside the cube area to work the listeners need to be attached to an object with scope outside the canvas hence the use of document.listener as opposed to canvas.listener (mousemove & mouseup in particular).

In this framework, the document listeners remain after the user navigates to a new page so the following code shows how to remove them whenever a new page is accessed, the code is a modification of index.js in the AnimCube dir.

export default function AnimCube({
  params,
  width = "200px",
  height = "219px",
}) {
  const id = "animcube_" + useId();
  const divRef = useRef();
  useEffect(() => {

    // define global variables used for removing listeners

    if (typeof acjs_removeListeners == 'undefined')
      window.acjs_removeListeners = [];

    if (typeof gpath == 'undefined')
      window.gpath = location.pathname;

    // if new page then remove listeners from previous page

    if (gpath != location.pathname) {
      for(var i in acjs_removeListeners)
        acjs_removeListeners[i]();
      acjs_removeListeners = [];
      gpath = location.pathname;
    }

    AnimCube3(`id=${id}&${params}`);
    const canvas = divRef.current?.childNodes[0];
    if (canvas) {
      canvas.style.maxWidth = "100%";
    }
  }, [params]);

  return <div ref={divRef} style={{ width, height, maxWidth: "100%" }} id={id} />;
}

[mjstraughan]

I think maybe I'm getting lost in the various changes that have been made. I removed "e.preventDefault" from the AnimCube.js files for both 2x2 and 3x3 versions and updated index.js for both by copying and pasting the provided code. Nothing changed from before. 3x3 has proper sidebar navigation because of the changes from a friend of mine, but the outside cursor movement issue remains. 2x2 has proper cursor functionality, but has sidebar interference.

I'm not much of a programmer, so it isn't easy to work out what needs to be done.

[mfeather1]

The 2x2 on your website is working for me with no issues. Can you confirm that your browser is running the updated code? One way to do that is put an alert in AnimCube2.js: alert('test'); (that should pop a window with the message 'test')