fix(globe): fix problems with touch devices in compare mode (#359)

ubilabs · Jun 17, 2020 · d34f18f · d34f18f
1 parent 82d3d6b
commit d34f18f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/scripts/components/globe/globe.tsx b/src/scripts/components/globe/globe.tsx
@@ -53,6 +53,7 @@ interface Props {
   zoomLevels: number;
   flyTo: GlobeView | null;
   onMouseEnter: () => void;
+  onTouchStart: () => void;
   onChange: (view: GlobeView) => void;
   onMoveEnd: (view: GlobeView) => void;
 }
@@ -65,6 +66,7 @@ const Globe: FunctionComponent<Props> = ({
   active,
   flyTo,
   onMouseEnter,
+  onTouchStart,
   onChange,
   onMoveEnd
 }) => {
@@ -233,6 +235,7 @@ const Globe: FunctionComponent<Props> = ({
     <div
       className={styles.globe}
       onMouseEnter={() => onMouseEnter()}
+      onTouchStart={() => onTouchStart()}
       ref={ref}
     />
   );

diff --git a/src/scripts/components/globes/globes.tsx b/src/scripts/components/globes/globes.tsx
@@ -75,6 +75,7 @@ const Globes: FunctionComponent = () => {
         zoomLevels={mainLayerDetails?.zoomLevels || 0}
         flyTo={flyTo}
         onMouseEnter={() => setIsMainActive(true)}
+        onTouchStart={() => setIsMainActive(true)}
         onChange={onChangeHandler}
         onMoveEnd={onMoveEndHandler}
       />
@@ -88,6 +89,7 @@ const Globes: FunctionComponent = () => {
           zoomLevels={compareLayerDetails?.zoomLevels || 0}
           flyTo={flyTo}
           onMouseEnter={() => setIsMainActive(false)}
+          onTouchStart={() => setIsMainActive(false)}
           onChange={onChangeHandler}
           onMoveEnd={onMoveEndHandler}
         />

diff --git a/storage/layers/layers-de.json b/storage/layers/layers-de.json
@@ -2,7 +2,7 @@
   {
     "id": "fire.burned_area",
     "name": "Fire - Burned Area",
-    "description": "This is an important layer/n* Time Range: monthly 1987 - 2019/n* Temporal Resolution: monthly/n/n[Example Link 1](http://example.com)/n[Example Link 2](http://example.com)"
+    "description": "Das ist ein wichtiger Layer\n* Time Range: monthly 1987 - 2019\n* Temporal Resolution: monthly\n\n[Example Link 1](http://example.com)\n\n[Example Link 2](http://example.com)"
   },
   {
     "id": "soilmoisture.sm",