summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--client/src/lib/components/browser.js15
-rw-r--r--client/src/lib/components/button.js14
-rw-r--r--client/src/lib/components/close.js17
-rw-r--r--client/src/lib/components/footer.js7
-rw-r--r--client/src/lib/components/header.js2
-rw-r--r--client/src/lib/components/touchable.js28
-rw-r--r--client/src/lib/drone/index.js22
-rw-r--r--client/src/lib/timeline/index.js6
-rw-r--r--client/src/lib/timeline/timelineEvent.js8
-rw-r--r--client/src/lib/timeline/timelineFilter.js2
-rw-r--r--client/src/lib/timeline/timelineFull.js10
-rw-r--r--client/src/lib/timeline/timelineHeader.js1
-rw-r--r--client/src/lib/views/contact.js11
-rw-r--r--client/src/lib/views/home.js2
-rw-r--r--client/src/lib/views/information.js10
-rw-r--r--client/src/lib/views/nav.js2
16 files changed, 99 insertions, 58 deletions
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';
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 12:16:14 +0000