From 658263c5beac838240a19627894ef0621f681442 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 5 Jun 2017 17:42:51 -0400
Subject: browser, touchable

---
 client/src/lib/components/browser.js      | 15 +++++++++++++++
 client/src/lib/components/button.js       | 14 +++++---------
 client/src/lib/components/close.js        | 17 +++++++++++------
 client/src/lib/components/footer.js       |  7 ++++---
 client/src/lib/components/header.js       |  2 +-
 client/src/lib/components/touchable.js    | 28 ++++++++++++++++++++++++++++
 client/src/lib/drone/index.js             | 22 +++++++++++-----------
 client/src/lib/timeline/index.js          |  6 +++---
 client/src/lib/timeline/timelineEvent.js  |  8 ++++----
 client/src/lib/timeline/timelineFilter.js |  2 +-
 client/src/lib/timeline/timelineFull.js   | 10 +++++-----
 client/src/lib/timeline/timelineHeader.js |  1 -
 client/src/lib/views/contact.js           | 11 ++++-------
 client/src/lib/views/home.js              |  2 +-
 client/src/lib/views/information.js       | 10 +++++-----
 client/src/lib/views/nav.js               |  2 +-
 16 files changed, 99 insertions(+), 58 deletions(-)
 create mode 100644 client/src/lib/components/browser.js
 create mode 100644 client/src/lib/components/touchable.js

(limited to 'client/src/lib')

diff --git a/client/src/lib/components/browser.js b/client/src/lib/components/browser.js
new file mode 100644
index 0000000..2ef33c5
--- /dev/null
+++ b/client/src/lib/components/browser.js
@@ -0,0 +1,15 @@
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+const isFirefox = navigator.userAgent.match('Firefox')
+
+export default {
+  isIphone,
+  isIpad,
+  isAndroid,
+  isMobile,
+  isDesktop,
+  isFirefox,
+}
\ No newline at end of file
diff --git a/client/src/lib/components/button.js b/client/src/lib/components/button.js
index edd75de..6860f49 100644
--- a/client/src/lib/components/button.js
+++ b/client/src/lib/components/button.js
@@ -2,11 +2,13 @@ import React, { Component } from 'react';
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info'
 
+import Touchable from './touchable'
+import { isMobile } from './browser'
+
 export default class Button extends Component {
   render() {
     let { buttonStyle, textStyle, ...others } = this.props
@@ -19,23 +21,17 @@ export default class Button extends Component {
       activeOpacity = 1.0
     }
     return (
-      <TouchableOpacity {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
+      <Touchable {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
         <View style={viewElementStyle}>
           <Text style={textElementStyle}>
             {this.props.label}
           </Text>
         </View>
-      </TouchableOpacity>
+      </Touchable>
     )
   }
 }
 
-const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
-const isIpad = (navigator.userAgent.match(/iPad/i))
-const isAndroid = (navigator.userAgent.match(/Android/i))
-const isMobile = isIphone || isIpad || isAndroid
-const isDesktop = ! isMobile
-
 const styles = StyleSheet.create({
   text: {
     color: '#000',
diff --git a/client/src/lib/components/close.js b/client/src/lib/components/close.js
index 12b4a0a..c5fa0f0 100644
--- a/client/src/lib/components/close.js
+++ b/client/src/lib/components/close.js
@@ -1,24 +1,29 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  TouchableOpacity,
-  Image
+  Image,
+  View,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info'
 
+import Touchable from './touchable'
+import { isFirefox } from './browser'
+
 export default class Close extends Component {
   render() {
     return (
-      <TouchableOpacity onPress={this.props.onPress} style={styles.close}>
-        <Image key={'image_close'} source={require('../../img/close.png')} style={styles.closeImage} />
-      </TouchableOpacity>
+      <Touchable onPress={this.props.onPress}>
+        <View style={styles.close}>
+          <Image key={'image_close'} source={require('../../img/close.png')} style={styles.closeImage} />
+        </View>
+      </Touchable>
     )
   }
 }
 
 const styles = StyleSheet.create({
   close: {
-    position: 'absolute',
+    position: isFirefox ? 'fixed' : 'absolute',
     top: 10,
     right: 10,
     width: 40,
diff --git a/client/src/lib/components/footer.js b/client/src/lib/components/footer.js
index f630ed8..15f6f0b 100644
--- a/client/src/lib/components/footer.js
+++ b/client/src/lib/components/footer.js
@@ -2,12 +2,13 @@ import React, { Component } from 'react'
 import {
   Image,
   StyleSheet,
-  TouchableOpacity,
   Text,
   View,
 } from 'react-native'
 import { Link } from 'react-router-dom'
 
+import Touchable from './touchable'
+
 export default class ClearText extends Component {
   render() {
     return (
@@ -18,9 +19,9 @@ export default class ClearText extends Component {
           </View>
         </Link>
         <View style={styles.footerItem}>
-          <TouchableOpacity onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
+          <Touchable onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
             <Image source={require('../../img/armory.png')} resizeMode='contain' style={styles.footerLogo} />
-          </TouchableOpacity>
+          </Touchable>
         </View>
         <Link to='/page/credits'>
           <View style={styles.footerItem}>
diff --git a/client/src/lib/components/header.js b/client/src/lib/components/header.js
index 3d41c4f..38a708a 100644
--- a/client/src/lib/components/header.js
+++ b/client/src/lib/components/header.js
@@ -2,12 +2,12 @@ import React, { Component } from 'react'
 import {
   Image,
   StyleSheet,
-  TouchableOpacity,
   Text,
   View,
 } from 'react-native'
 import { Link } from 'react-router-dom'
 
+import Touchable from './touchable'
 import Nav from '../views/nav'
 
 export default class ClearText extends Component {
diff --git a/client/src/lib/components/touchable.js b/client/src/lib/components/touchable.js
new file mode 100644
index 0000000..fd72c60
--- /dev/null
+++ b/client/src/lib/components/touchable.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import {
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+const isFirefox = navigator.userAgent.match('Firefox')
+
+export default class Touchable extends Component {
+  render() {
+    if (isFirefox) {
+      return (
+        <TouchableWithoutFeedback {...this.props} />
+      )
+    }
+    else {
+      return (
+        <TouchableOpacity {...this.props} />
+      )
+    }
+  }
+}
+
diff --git a/client/src/lib/drone/index.js b/client/src/lib/drone/index.js
index 19e7843..d7143e9 100644
--- a/client/src/lib/drone/index.js
+++ b/client/src/lib/drone/index.js
@@ -3,12 +3,12 @@ import {
   StyleSheet,
   Image,
   View,
-  TouchableOpacity,
 } from 'react-native';
 
 import ScrollableContainer from '../components/scrollableContainer'
 import ClearText from '../components/text'
 import Heading from '../components/heading'
+import Touchable from '../components/touchable'
 
 const countryLinks = {
   pakistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=pakistan&from=2004-1-1&to=now',
@@ -27,9 +27,9 @@ export default class Drone extends Component {
       const url = link.uri
       const name = link.text
       return (
-        <TouchableOpacity key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
+        <Touchable key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
           <ClearText style={styles.link}>{name}</ClearText>
-        </TouchableOpacity>
+        </Touchable>
       )
     })
     return (
@@ -71,33 +71,33 @@ export default class Drone extends Component {
 
         <View style={styles.countries}>
           <View style={styles.country}>
-            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.afghanistan)}>
+            <Touchable onPress={() => this.props.onLinkPress(countryLinks.afghanistan)}>
               <Image source={require('../../img/afghanistan.png')} resizeMode='cover' style={styles.countryImage} />
               <ClearText>AFGHANISTAN</ClearText>
-            </TouchableOpacity>
+            </Touchable>
           </View>
 
           <View style={styles.country}>
-            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.pakistan)}>
+            <Touchable onPress={() => this.props.onLinkPress(countryLinks.pakistan)}>
               <Image source={require('../../img/pakistan.png')} resizeMode='cover' style={styles.countryImage} />
               <ClearText>PAKISTAN</ClearText>
-            </TouchableOpacity>
+            </Touchable>
           </View>
         </View>
 
         <View style={styles.countries}>
           <View style={styles.country}>
-            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.yemen)}>
+            <Touchable onPress={() => this.props.onLinkPress(countryLinks.yemen)}>
               <Image source={require('../../img/yemen.png')} resizeMode='cover' style={styles.countryImage} />
               <ClearText>YEMEN</ClearText>
-            </TouchableOpacity>
+            </Touchable>
           </View>
 
           <View style={styles.country}>
-            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.somalia)}>
+            <Touchable onPress={() => this.props.onLinkPress(countryLinks.somalia)}>
               <Image source={require('../../img/somalia.png')} resizeMode='cover' style={styles.countryImage} />
               <ClearText>SOMALIA</ClearText>
-            </TouchableOpacity>
+            </Touchable>
           </View>
         </View>
         
diff --git a/client/src/lib/timeline/index.js b/client/src/lib/timeline/index.js
index 09d2d1b..381f881 100644
--- a/client/src/lib/timeline/index.js
+++ b/client/src/lib/timeline/index.js
@@ -3,7 +3,6 @@ import {
   FlatList,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   ScrollView,
 } from 'react-native';
@@ -17,6 +16,7 @@ import TimelineFull from './timelineFull'
 import TimelineHeader from './timelineHeader'
 import TimelineFilter from './timelineFilter'
 import TickMarks from './tickMarks'
+import Touchable from '../components/touchable'
 
 export default class Timeline extends Component {
   constructor(props) {
@@ -100,11 +100,11 @@ export default class Timeline extends Component {
 
 //         <View style={styles.body}>
 //           <View style={styles.sidebar}>
-//             <TouchableOpacity onPress={() => this.setState({ filterVisible: true })}>
+//             <Touchable onPress={() => this.setState({ filterVisible: true })}>
 //               <ClearText style={[styles.filterText, !! this.state.tag ? styles.filterActive : styles.filterInactive ]}>
 //                 { !! this.state.tag ? 'FILTER' : '' }
 //               </ClearText>
-//             </TouchableOpacity>
+//             </Touchable>
 //           </View>
 //         </View>
 
diff --git a/client/src/lib/timeline/timelineEvent.js b/client/src/lib/timeline/timelineEvent.js
index 84e9437..7231b8a 100644
--- a/client/src/lib/timeline/timelineEvent.js
+++ b/client/src/lib/timeline/timelineEvent.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import {
-  TouchableOpacity,
   StyleSheet,
   Image,
   View
 } from 'react-native';
 
 import ClearText from '../components/text'
+import Touchable from '../components/touchable'
 
 const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
 const isIpad = (navigator.userAgent.match(/iPad/i))
@@ -55,9 +55,9 @@ export default class TimelineEvent extends Component {
       imageContainer = ( <View style={styles.imageContainer}>{image}</View> )
     }
     return (
-      <TouchableOpacity style={styles.item} activeOpacity={0.8} onPress={() => this.props.onPress(this.props.item) }>
-        <div ref={(ref) => this.ref = ref}></div>
+      <Touchable style={styles.item} onPress={() => this.props.onPress(this.props.item) }>
         <View style={styles.item}>
+          <div ref={(ref) => this.ref = ref}></div>
           <View style={styles.dateContainer}>
             <ClearText style={styles.date}>{item.date}</ClearText>
           </View>
@@ -66,7 +66,7 @@ export default class TimelineEvent extends Component {
             <ClearText style={styles.title}>{item.title}</ClearText>
           </View>
         </View>
-      </TouchableOpacity>
+      </Touchable>
     )
   }
 }
diff --git a/client/src/lib/timeline/timelineFilter.js b/client/src/lib/timeline/timelineFilter.js
index c6da98a..8259c0a 100644
--- a/client/src/lib/timeline/timelineFilter.js
+++ b/client/src/lib/timeline/timelineFilter.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   ScrollView,
   StyleSheet,
-  TouchableOpacity,
+  Touchable,
   Image,
   View,
   Text,
diff --git a/client/src/lib/timeline/timelineFull.js b/client/src/lib/timeline/timelineFull.js
index 1b60575..8019710 100644
--- a/client/src/lib/timeline/timelineFull.js
+++ b/client/src/lib/timeline/timelineFull.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import {
   ScrollView,
   StyleSheet,
-  TouchableOpacity,
   Image,
   View,
   RefreshControl,
@@ -15,6 +14,7 @@ import ClearText from '../components/text'
 import Heading from '../components/heading'
 import Definition from '../components/definition'
 import Close from '../components/close'
+import Touchable from '../components/touchable'
 
 const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
 const isIpad = (navigator.userAgent.match(/iPad/i))
@@ -83,9 +83,9 @@ export default class TimelineFull extends Component {
           name = linkTextFromUrl(url)
         }
         return (
-          <TouchableOpacity key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
+          <Touchable key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
             <ClearText style={styles.link}>{name}</ClearText>
-          </TouchableOpacity>
+          </Touchable>
         )
       })
       links = (
@@ -117,9 +117,9 @@ export default class TimelineFull extends Component {
               <Definition label='Date'>{item.date}</Definition>
               <Definition label='Medium'>{item.medium}</Definition>
               <Definition label='Category' contentIsView={true}>
-                <TouchableOpacity onPress={() => this.onPickTag(item.category)}>
+                <Touchable onPress={() => this.onPickTag(item.category)}>
                   <ClearText style={styles.link}>{item.category}</ClearText>
-                </TouchableOpacity>
+                </Touchable>
               </Definition>
               <Definition label='Tags' contentIsView={true}>
                 <HTMLView value={'<p>' + tags + '</p>'} stylesheet={tagHTMLStyles} onLinkPress={this.onPickTag} />
diff --git a/client/src/lib/timeline/timelineHeader.js b/client/src/lib/timeline/timelineHeader.js
index 26cac31..3d922e1 100644
--- a/client/src/lib/timeline/timelineHeader.js
+++ b/client/src/lib/timeline/timelineHeader.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  TouchableOpacity,
   Text,
   View,
   ScrollView,
diff --git a/client/src/lib/views/contact.js b/client/src/lib/views/contact.js
index 57d3e9d..6c45b2f 100644
--- a/client/src/lib/views/contact.js
+++ b/client/src/lib/views/contact.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import {
   ActivityIndicator,
   KeyboardAvoidingView,
-  TouchableHighlight,
-  TouchableWithoutFeedback,
+  Touchable,
   StyleSheet,
   TextInput,
   Keyboard,
@@ -200,11 +199,9 @@ export default class Contact extends Component {
       )
     })
     return (
-      <TouchableWithoutFeedback>
-        <View style={styles.comments}>
-          {comments}
-        </View>
-      </TouchableWithoutFeedback>
+      <View style={styles.comments}>
+        {comments}
+      </View>
     )
   }
 }
diff --git a/client/src/lib/views/home.js b/client/src/lib/views/home.js
index 8d5f275..2e7979e 100644
--- a/client/src/lib/views/home.js
+++ b/client/src/lib/views/home.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   Image,
   StyleSheet,
-  TouchableOpacity,
+  Touchable,
   View,
   Platform
 } from 'react-native';
diff --git a/client/src/lib/views/information.js b/client/src/lib/views/information.js
index 759bae2..9e69a83 100644
--- a/client/src/lib/views/information.js
+++ b/client/src/lib/views/information.js
@@ -3,7 +3,6 @@ import {
   StyleSheet,
   View,
   Image,
-  TouchableOpacity,
   ScrollView,
 } from 'react-native';
 
@@ -17,6 +16,7 @@ import ClearText from '../components/text'
 import Button from '../components/button'
 import Close from '../components/close'
 import Heading from '../components/heading'
+import Touchable from '../components/touchable'
 
 export default class Information extends Component {
   constructor(props) {
@@ -59,12 +59,12 @@ export default class Information extends Component {
     const content = this.props.content
     const essays = this.props.essays.map( (essay, i) => {
       return (
-        <TouchableOpacity key={i} onPress={() => this.showEssay(essay)}>
+        <Touchable key={i} onPress={() => this.showEssay(essay)}>
           <View style={styles.essayContainer}>
             <ClearText style={styles.essayTitle}>{essay.title}</ClearText>
             <ClearText style={styles.essayByline}>{essay.byline}</ClearText>
           </View>
-        </TouchableOpacity>
+        </Touchable>
       )
     })
     return (
@@ -73,12 +73,12 @@ export default class Information extends Component {
           <View style={styles.essays}>
             {essays}
 
-            <TouchableOpacity onPress={() => this.showBios()}>
+            <Touchable onPress={() => this.showBios()}>
               <View style={styles.essayContainer}>
                 <ClearText style={styles.essayTitle}>Artist Biographies</ClearText>
                 <ClearText style={styles.essayByline}>Ai Weiwei, Jacques Herzog, Phillipe de Meuron</ClearText>
               </View>
-            </TouchableOpacity>
+            </Touchable>
           </View>
         </ScrollableContainer>
 
diff --git a/client/src/lib/views/nav.js b/client/src/lib/views/nav.js
index ef04f2d..3e852cf 100644
--- a/client/src/lib/views/nav.js
+++ b/client/src/lib/views/nav.js
@@ -3,7 +3,7 @@ import {
   Image,
   StyleSheet,
   Text,
-  TouchableOpacity,
+  Touchable,
   Platform,
   View
 } from 'react-native';
-- 
cgit v1.2.3-70-g09d2