HoverElement on click.

[CasperWind]

Description

im not so good in javascript. so i hope you can help. Is there a way to make the HoverElement to trigger onClick and not onHover?

Panolens version

• [x] Master
• [ ] Dev

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[JoseManuelFV]

However, in the next few days it is possible that a pull request will be created. Current listeners can be overwritten

Ideally, the infospot class should be refactored so that the hoverenter doesn't control the element

overrideInfospotEvents(infospot){

  infospot._listeners.hoverenter = [];
  infospot._listeners.click = [];

  infospot._listeners.hoverenter.push((ev)=>{
    if ( !infospot.container ) { return; }

    const cursorStyle = infospot.cursorStyle || ( infospot.mode === 1 ? 'pointer' : 'default' );
    const { scaleDownAnimation, scaleUpAnimation } = infospot;

    infospot.isHovering = true;
    infospot.container.style.cursor = cursorStyle;

    if( infospot.animated ){
      scaleDownAnimation.stop();
      scaleUpAnimation.start();
    }

  });
  infospot._listeners.click.push((ev)=>{
    if ( !infospot.container ) { return; }

    if(ev.mouseEvent.which != 1) { return; }

    const { element } = infospot;

    if( infospot.element && ev.mouseEvent.clientX >= 0 && ev.mouseEvent.clientY >= 0 ){
      const { left, right, style } = element;
      if ( element.mode === 2 || element.mode === 3 ) {

          style.display = 'none';
          left.style.display = 'block';
          right.style.display = 'block';

          // Store element width for reference
          element._width = left.clientWidth;
          element._height = left.clientHeight;

      } else {

          style.display = 'flex';
          if ( left ) { left.style.display = 'none'; }
          if ( right ) { right.style.display = 'none'; }

          // Store element width for reference
          element._width = element.clientWidth;
          element._height = element.clientHeight;

      }
    }
    infospot.lockHoverElement();
  });
}