Merge pull request #169 from NDLANO/fix-navbutton-click

Fixes various nav button click issues

Author: otacke

scripts/components/Interactions/NavigationButton.js

@@ -282,18 +282,34 @@ export default class NavigationButton extends React.Component {
     return style;
   }
 
+  /**
+   * Handle key down.
+   * @param {KeyboardEvent} event Keyboard event.
+   */
+  handleKeyDown(event) {
+    if (!this.context.extras.isEditor) {
+      return;
+    }
+
+    if (event.code === 'Enter' || event.code === 'Space') {
+      this.onDoubleClick();
+    }
+  }
+
   /**
    * Handle click.
    */
   onClick() {
+    if (this.props.sceneIsDragging) {
+      return;
+    }
+
     if (this.props.forceClickHandler || !this.context.extras.isEditor) {
       this.props.clickHandler();
 
       // Reset button focus state when changing scenes or opening content
       this.setState({ innerButtonFocused: false });
     }
-
-    this.setFocus(true);
   }
 
   /**
@@ -339,18 +355,10 @@ export default class NavigationButton extends React.Component {
   }
 
   /**
-   * @param {FocusEvent} event Event.
+   * Handle focus.
    */
-  handleFocus(event) {
-    if (this.context.extras.isEditor) {
-      if (this.navButtonWrapper?.current === event.target) {
-        this.setFocus();
-      }
-
-      return;
-    }
-
-    if (!this.context.extras.isEditor && this.props.onFocus) {
+  handleFocus() {
+    if (this.props.onFocus) {
       if (this.skipFocus) {
         this.skipFocus = false;
       }
@@ -489,6 +497,7 @@ export default class NavigationButton extends React.Component {
         tabIndex={isWrapperTabbable ? 0 : undefined}
         onFocus={this.handleFocus.bind(this)}
         onClick={this.onClick.bind(this)}
+        onKeyDown={this.handleKeyDown.bind(this)}
         onBlur={this.onBlur.bind(this)}
       >
         {
@@ -498,7 +507,6 @@ export default class NavigationButton extends React.Component {
               style={{ height:'100%', width:'100%' }}
               ariaLabel={getLabelText(label) || this.context.l10n.untitled}
               tabIndexValue={isInnerButtonTabbable ? undefined : -1}
-              onClickEvent={this.onClick.bind(this)}
               onDoubleClickEvent={this.onDoubleClick.bind(this)}
               onMouseDownEvent={this.onMouseDown.bind(this)}
               onFocusEvent={() => this.setState({ innerButtonFocused: true })}
@@ -517,7 +525,6 @@ export default class NavigationButton extends React.Component {
               aria-label={ getLabelText(label) || this.props.title }
               className='nav-button'
               tabIndex={isInnerButtonTabbable ? undefined : -1}
-              onClick={this.onClick.bind(this)}
               onDoubleClick={this.onDoubleClick.bind(this)}
               onMouseDown={this.onMouseDown.bind(this)}
               onFocus={() => this.setState({ innerButtonFocused: true })}

scripts/components/Scene/SceneTypes/ThreeSixtyScene.js

@@ -44,6 +44,7 @@ export default class ThreeSixtyScene extends React.Component {
 
     this.handleFirstRender = this.handleFirstRender.bind(this);
     this.handleSceneMoveStart = this.handleSceneMoveStart.bind(this);
+    this.handleSceneMove = this.handleSceneMove.bind(this);
     this.handleSceneMoveStop = this.handleSceneMoveStop.bind(this);
 
     this.terminateAffordance = this.terminateAffordance.bind(this);
@@ -242,6 +243,23 @@ export default class ThreeSixtyScene extends React.Component {
     }
   }
 
+  /**
+   * Handle dragging scene ongoing.
+   */
+  handleSceneMove() {
+    if (this.context.extras.isEditor) {
+      return;
+    }
+
+    // Consider to be dragging after moving beyond maximum slack.
+    const endPosition = this.props.threeSixty.getCurrentPosition();
+    const sceneIsDragging =
+      Math.abs(endPosition.yaw - this.startPosition?.yaw ?? 0) > ThreeSixtyScene.MAX_YAW_DELTA ||
+      Math.abs(endPosition.pitch - this.startPosition?.pitch ?? 0) > ThreeSixtyScene.MAX_PITCH_DELTA;
+
+    this.setState({ sceneIsDragging: sceneIsDragging });
+  }
+
   /**
    * Handle dragging scene ended.
    * @param {H5P.Event} event Event.
@@ -250,6 +268,11 @@ export default class ThreeSixtyScene extends React.Component {
     if (this.context.extras.isEditor) {
       this.cancelPointerLock();
     }
+
+    window.requestAnimationFrame(() => {
+      this.setState({ sceneIsDragging: false });
+    });
+
     this.context.trigger('movestop', event.data);
   }
 
@@ -264,6 +287,7 @@ export default class ThreeSixtyScene extends React.Component {
     // Remove handlers.
     this.props.threeSixty.stopRendering();
     this.props.threeSixty.off('movestart', this.handleSceneMoveStart);
+    this.props.threeSixty.off('move', this.handleSceneMove);
     this.props.threeSixty.off('movestop', this.handleSceneMoveStop);
     this.props.threeSixty.off('firstrender', this.handleFirstRender);
   }
@@ -315,6 +339,7 @@ export default class ThreeSixtyScene extends React.Component {
     threeSixty.update();
 
     threeSixty.on('movestart', this.handleSceneMoveStart);
+    threeSixty.on('move', this.handleSceneMove);
     threeSixty.on('movestop', this.handleSceneMoveStop);
 
     // Add buttons to scene
@@ -518,6 +543,7 @@ export default class ThreeSixtyScene extends React.Component {
         :
         <NavigationButton
           key={key}
+          sceneIsDragging={this.state.sceneIsDragging}
           staticScene={false}
           leftPosition={null}
           topPosition={null}
@@ -590,17 +616,6 @@ export default class ThreeSixtyScene extends React.Component {
    * @param {number} index Index of interaction linked to navigation button.
    */
   handleNavButtonClick(index) {
-    // Prevent click if user also dragged button beyond maximum slack.
-    const endPosition = this.props.threeSixty.getCurrentPosition();
-    if (
-      Math.abs(endPosition.yaw - this.startPosition?.yaw) >
-        ThreeSixtyScene.MAX_YAW_DELTA ||
-      Math.abs(endPosition.pitch - this.startPosition?.pitch) >
-        ThreeSixtyScene.MAX_PITCH_DELTA
-    ) {
-      return; // Dragged button too much for click
-    }
-
     this.props.showInteraction.bind(this)(index);
   }
 
@@ -657,6 +672,7 @@ export default class ThreeSixtyScene extends React.Component {
       // No longer active, indicate that scene must be updated
       this.props.threeSixty.stopRendering();
       this.props.threeSixty.off('movestart', this.handleSceneMoveStart);
+      this.props.threeSixty.off('move', this.handleSceneMove);
       this.props.threeSixty.off('movestop', this.handleSceneMoveStop);
       this.props.threeSixty.off('firstrender', this.handleFirstRender);
       this.setState({