Fix: Show standard mobile buttons on _hasNavigationInTextArea (fixes #…

…276) (#277)
adaptlearning · Sep 29, 2023 · 3392e4d · 3392e4d
1 parent a717f09
commit 3392e4d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/js/NarrativeView.js b/js/NarrativeView.js
@@ -90,14 +90,20 @@ class NarrativeView extends ComponentView {
     const mode = device.isScreenSizeMin('medium') ? MODE.LARGE : MODE.SMALL;
     this.model.set('_mode', mode);
     this.model.set('_isLargeMode', mode === MODE.LARGE);
+    return mode;
   }
 
   renderMode() {
-    this.calculateMode();
+    const mode = this.calculateMode();
     this.setupEventListeners();
 
     const isTextBelowImage = this.isTextBelowImage();
     this.model.set('_isTextBelowImageResolved', isTextBelowImage);
+
+    const isLargeMode = (mode === MODE.LARGE);
+    const isSmallModeAndTextBelowImage = (mode === MODE.SMALL && isTextBelowImage);
+    const hasNavigationInTextArea = this.model.get('_hasNavigationInTextArea') && (isLargeMode || isSmallModeAndTextBelowImage);
+    this.model.set('_hasNavigationInTextAreaResolved', hasNavigationInTextArea);
   }
 
   isLargeMode() {

diff --git a/templates/narrative.jsx b/templates/narrative.jsx
@@ -4,7 +4,7 @@ import { templates, classes } from 'core/js/reactHelpers';
 export default function Narrative(props) {
 
   const {
-    _hasNavigationInTextArea,
+    _hasNavigationInTextAreaResolved,
     _isLargeMode,
     _isStackedOnMobile,
     _isTextBelowImageResolved
@@ -23,7 +23,7 @@ export default function Narrative(props) {
 
       <div className={classes([
         'component__widget narrative__widget',
-        _hasNavigationInTextArea && 'narrative__text-controls'
+        _hasNavigationInTextAreaResolved && 'narrative__text-controls'
       ])}
       >