WV-2619 Updating Embed Mode for EIC (#4552)

* remove addlayer and group layers // reimplement date change arrows * open embed tab without kiosk * update animation button for eic embed mode // remove eic param from permalink on new tab
nasa-gibs · Aug 9, 2023 · 573e3c1 · 573e3c1
1 parent 5a0bee4
commit 573e3c1
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 23 deletions.
diff --git a/web/js/components/timeline/timeline-controls/date-change-arrows.js b/web/js/components/timeline/timeline-controls/date-change-arrows.js
@@ -75,6 +75,7 @@ class DateChangeArrows extends PureComponent {
       arrowDown,
       tilesPreloaded,
       isKioskModeActive,
+      isEmbedModeActive,
     } = this.props;
 
     const leftArrowDown = () => this.onArrowDown('left');
@@ -93,7 +94,7 @@ class DateChangeArrows extends PureComponent {
 
         {/* LEFT ARROW */}
         <div
-          className={`button-action-group${leftArrowDisabled ? ' button-disabled' : ''} ${isKioskModeActive ? 'd-none' : ''}`}
+          className={`button-action-group${leftArrowDisabled ? ' button-disabled' : ''} ${isKioskModeActive && !isEmbedModeActive ? 'd-none' : ''}`}
           id="left-arrow-group"
           onMouseDown={leftArrowDown}
           onMouseUp={leftArrowUp}
@@ -116,7 +117,7 @@ class DateChangeArrows extends PureComponent {
 
         {/* RIGHT ARROW */}
         <div
-          className={`button-action-group${rightArrowDisabled ? ' button-disabled' : ''} ${isKioskModeActive ? 'd-none' : ''}`}
+          className={`button-action-group${rightArrowDisabled ? ' button-disabled' : ''} ${isKioskModeActive && !isEmbedModeActive ? 'd-none' : ''}`}
           id="right-arrow-group"
           onMouseDown={rightArrowDown}
           onMouseUp={rightArrowUp}
@@ -163,12 +164,12 @@ class DateChangeArrows extends PureComponent {
 }
 
 const mapStateToProps = (state) => {
-  const { date } = state;
-  const { ui: { isKioskModeActive } } = state;
+  const { date, embed, ui } = state;
   return {
     tilesPreloaded: date.preloaded,
     arrowDown: date.arrowDown,
-    isKioskModeActive,
+    isKioskModeActive: ui.isKioskModeActive,
+    isEmbedModeActive: embed.isEmbedModeActive,
   };
 };
 

diff --git a/web/js/containers/sidebar/layers-container.js b/web/js/containers/sidebar/layers-container.js
@@ -175,23 +175,25 @@ function LayersContainer (props) {
           )}
         </div>
       </div>
-      <div className="product-buttons">
-        <div className="layers-add-container">
-          <Button
-            id="layers-add"
-            aria-label="Add layers"
-            className="layers-add red"
-            text="+ Add Layers"
-            onClick={onClickAddLayers}
-          />
-          <Checkbox
-            id="group-overlays-checkbox"
-            checked={groupOverlays}
-            onCheck={toggleOverlayGroups}
-            label="Group Similar Layers"
-          />
+      { !isEmbedModeActive && (
+        <div className="product-buttons">
+          <div className="layers-add-container">
+            <Button
+              id="layers-add"
+              aria-label="Add layers"
+              className="layers-add red"
+              text="+ Add Layers"
+              onClick={onClickAddLayers}
+            />
+            <Checkbox
+              id="group-overlays-checkbox"
+              checked={groupOverlays}
+              onCheck={toggleOverlayGroups}
+              label="Group Similar Layers"
+            />
+          </div>
         </div>
-      </div>
+      )}
     </>
   );
 }

diff --git a/web/js/containers/timeline/timeline.js b/web/js/containers/timeline/timeline.js
@@ -983,6 +983,7 @@ class Timeline extends React.Component {
       selectedDate,
       timelineEndDateLimit,
       timelineStartDateLimit,
+      isKioskModeActive,
     } = this.props;
 
     return (
@@ -1016,6 +1017,7 @@ class Timeline extends React.Component {
             isPortrait={isPortrait}
             clickAnimationButton={this.clickAnimationButton}
             hasSubdailyLayers={hasSubdailyLayers}
+            isKioskModeActive={isKioskModeActive}
             disabled={animationDisabled}
             label={
                     isCompareModeActive

diff --git a/web/js/modules/link/util.js b/web/js/modules/link/util.js
@@ -105,9 +105,30 @@ export function getPermalink(queryString, selectedDate, isEmbed) {
     permalink = permalink.replace('em=true', 'em=false');
   }
 
+  // Remove 'kiosk=true'
+  if (permalink.includes('kiosk=true')) {
+    if (permalink.includes('?kiosk=true&')) {
+      permalink = permalink.replace('?kiosk=true&', '?');
+    } else if (permalink.includes('&kiosk=true')) {
+      permalink = permalink.replace('&kiosk=true', '');
+    } else if (permalink.includes('?kiosk=true')) {
+      permalink = permalink.replace('?kiosk=true', '');
+    }
+  }
+
+  // Check for 'eic=' and remove it along with the next two characters
+  const eicPattern = /eic=../g;
+  permalink = permalink.replace(eicPattern, '');
+
+  // Handle cases where removing `eic=..` might leave behind '&'
+  if (permalink.endsWith('&')) {
+    permalink = permalink.slice(0, -1);
+  } else if (permalink.includes('&&')) {
+    permalink = permalink.replace('&&', '&');
+  }
+
   return permalink;
 }
 
-export function wrapWithIframe(value) { return `<iframe src="${value}" role="application" sandbox="allow-modals allow-scripts allow-same-origin allow-forms allow-popups" width="100%" height="100%" allow="fullscreen; autoplay;" loading="lazy"></iframe>`; }
 
-export function wrapWithObject(value) { return `<object type="text/html" data="${value}" width="100%" height="100%" role="application"></object>`; }
+export function wrapWithIframe(value) { return `<iframe src="${value}" role="application" sandbox="allow-modals allow-scripts allow-same-origin allow-forms allow-popups" width="100%" height="100%" allow="fullscreen; autoplay;" loading="lazy"></iframe>`; }