fixes #6597
Signed-off-by: Pedro Pombeiro <pombeirp@users.noreply.github.com>
This commit is contained in:
tbenr
Pedro Pombeiro
parent
9634a8ae1b
commit
b1331378d5
|
|
@ -132,8 +132,8 @@ def getEnvOrConfig = { varName ->
|
|||
}
|
||||
|
||||
android {
|
||||
compileSdkVersion 26
|
||||
buildToolsVersion "26.0.2"
|
||||
compileSdkVersion 28
|
||||
buildToolsVersion "28.0.3"
|
||||
|
||||
|
||||
defaultConfig {
|
||||
|
|
@ -218,7 +218,10 @@ android {
|
|||
}
|
||||
}
|
||||
|
||||
sourceSets { main { jniLibs.srcDirs 'libs' } }
|
||||
sourceSets {
|
||||
main { jniLibs.srcDirs 'libs' }
|
||||
main.assets.srcDirs += '../../resources/mapview'
|
||||
}
|
||||
}
|
||||
|
||||
configurations.all {
|
||||
|
|
@ -235,7 +238,7 @@ dependencies {
|
|||
implementation project(':react-native-dialogs')
|
||||
implementation project(':realm')
|
||||
implementation fileTree(dir: "libs", include: ["*.jar"])
|
||||
implementation "com.android.support:appcompat-v7:27.1.0"
|
||||
implementation "com.android.support:appcompat-v7:28.0.0"
|
||||
// Force using exact RN version instead of relying on gradle dependency resolution
|
||||
// https://docs.gradle.org/current/userguide/introduction_dependency_management.html#sec:dependency_resolution
|
||||
//compile ("com.facebook.react:react-native:0.55.4") { force = true } // From node_modules
|
||||
|
|
@ -246,6 +249,7 @@ dependencies {
|
|||
implementation project(':react-native-image-crop-picker')
|
||||
implementation project(':react-native-securerandom')
|
||||
implementation project(':react-native-webview-bridge')
|
||||
implementation project(':react-native-webview')
|
||||
implementation project(':react-native-config')
|
||||
implementation project(':react-native-firebase')
|
||||
compile ('com.google.android.gms:play-services-base:16.0.1') {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage;
|
|||
import com.facebook.react.shell.MainReactPackage;
|
||||
import com.facebook.soloader.SoLoader;
|
||||
import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
|
||||
import com.reactnativecommunity.webview.RNCWebViewPackage;
|
||||
import com.horcrux.svg.SvgPackage;
|
||||
import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
|
||||
import com.oblador.keychain.KeychainPackage;
|
||||
|
|
@ -67,6 +68,7 @@ public class MainApplication extends MultiDexApplication implements ReactApplica
|
|||
new ImageResizerPackage(),
|
||||
new PickerPackage(),
|
||||
new WebViewBridgePackage(BuildConfig.DEBUG_WEBVIEW == "1", callRPC),
|
||||
new RNCWebViewPackage(),
|
||||
new ReactNativeConfigPackage(),
|
||||
new KeychainPackage());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ include ':react-native-keychain'
|
|||
project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android')
|
||||
include ':react-native-webview-bridge'
|
||||
project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')
|
||||
include ':react-native-webview'
|
||||
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
|
||||
include ':react-native-config'
|
||||
project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
|
||||
include ':react-native-android'
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"react-native-image-crop-picker"
|
||||
"react-native-securerandom"
|
||||
"react-native-webview-bridge"
|
||||
"react-native-webview"
|
||||
"react-native-firebase"
|
||||
"homoglyph-finder"
|
||||
"web3"
|
||||
|
|
@ -59,6 +60,7 @@
|
|||
"react-native-image-crop-picker"
|
||||
"react-native-securerandom"
|
||||
"react-native-webview-bridge"
|
||||
"react-native-webview"
|
||||
"homoglyph-finder"
|
||||
"web3"
|
||||
"chance"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ target 'StatusIm' do
|
|||
pod 'react-native-background-timer', :path => '../node_modules/react-native-background-timer'
|
||||
pod 'RNKeychain', :path => '../node_modules/react-native-keychain'
|
||||
pod 'react-native-camera', path: '../node_modules/react-native-camera'
|
||||
pod 'react-native-webview', path: '../node_modules/react-native-webview'
|
||||
pod 'SQLCipher', '~>3.0'
|
||||
|
||||
target 'StatusImTests' do
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@ PODS:
|
|||
- React
|
||||
- react-native-camera/RN (1.1.5):
|
||||
- React
|
||||
- react-native-webview (5.2.1):
|
||||
- React
|
||||
- React/Core (0.56.0):
|
||||
- yoga (= 0.56.0.React)
|
||||
- RNKeychain (3.0.0-rc.3):
|
||||
|
|
@ -83,6 +85,7 @@ DEPENDENCIES:
|
|||
- React (from `../node_modules/react-native`)
|
||||
- react-native-background-timer (from `../node_modules/react-native-background-timer`)
|
||||
- react-native-camera (from `../node_modules/react-native-camera`)
|
||||
- react-native-webview (from `../node_modules/react-native-webview`)
|
||||
- RNKeychain (from `../node_modules/react-native-keychain`)
|
||||
- SQLCipher (~> 3.0)
|
||||
- yoga (from `../node_modules/react-native/ReactCommon/yoga`)
|
||||
|
|
@ -107,6 +110,8 @@ EXTERNAL SOURCES:
|
|||
:path: "../node_modules/react-native-background-timer"
|
||||
react-native-camera:
|
||||
:path: "../node_modules/react-native-camera"
|
||||
react-native-webview:
|
||||
:path: "../node_modules/react-native-webview"
|
||||
RNKeychain:
|
||||
:path: "../node_modules/react-native-keychain"
|
||||
yoga:
|
||||
|
|
@ -125,10 +130,11 @@ SPEC CHECKSUMS:
|
|||
React: 1fe0eb13d90b625d94c3b117c274dcfd2e760e11
|
||||
react-native-background-timer: bb7a98c8e97fc7c290de2d423dd09ddb73dcbcbb
|
||||
react-native-camera: 68ad5143d2d0636236d46c7de8d2a6455ca52a36
|
||||
react-native-webview: a42108b827082f8f0333529b0772102031d5960d
|
||||
RNKeychain: 627c6095cef215dd3d9804a9a9cf45ab96aa3997
|
||||
SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
|
||||
yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
|
||||
|
||||
PODFILE CHECKSUM: 7a7b07318fa8b5a77d7f71190a3536cf574273ed
|
||||
PODFILE CHECKSUM: 2e0971124458d413e18b407b2337bf2c1d32f357
|
||||
|
||||
COCOAPODS: 1.5.3
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FE1DE7195F00D694FF /* MessageUI.framework */; };
|
||||
B2DEA0D01E49E33300FA28D6 /* libRCTHttpServer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B2DEA0B11E49E32000FA28D6 /* libRCTHttpServer.a */; };
|
||||
B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; };
|
||||
B49246102225D86900DE94D5 /* mapview in Resources */ = {isa = PBXBuildFile; fileRef = B492460F2225D86900DE94D5 /* mapview */; };
|
||||
B957A49EB0DE44D9A31CAF2D /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = AF2BF381BC7B4EB0887F0091 /* libRNSVG.a */; };
|
||||
BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
|
||||
C93242561FE1C68C00FE7099 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C93242531FE1C68C00FE7099 /* libRCTAnimation.a */; };
|
||||
|
|
@ -304,6 +305,13 @@
|
|||
remoteGlobalIDString = B29EC9CC1E48BED600704A36;
|
||||
remoteInfo = RCTHttpServer;
|
||||
};
|
||||
B46198BB2210C98F00603CF2 /* PBXContainerItemProxy */ = {
|
||||
isa = PBXContainerItemProxy;
|
||||
containerPortal = B461988B2210C98F00603CF2 /* RNCWebView.xcodeproj */;
|
||||
proxyType = 2;
|
||||
remoteGlobalIDString = 134814201AA4EA6300B7C361;
|
||||
remoteInfo = RNCWebView;
|
||||
};
|
||||
C90047CC1FC47AF50002B8EA /* PBXContainerItemProxy */ = {
|
||||
isa = PBXContainerItemProxy;
|
||||
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
|
||||
|
|
@ -557,6 +565,8 @@
|
|||
B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
|
||||
B2DEA0A41E49E32000FA28D6 /* RCTHttpServer.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTHttpServer.xcodeproj; path = "../node_modules/react-native-http-bridge/ios/RCTHttpServer.xcodeproj"; sourceTree = "<group>"; };
|
||||
B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StatusIm/Images.xcassets; sourceTree = "<group>"; };
|
||||
B461988B2210C98F00603CF2 /* RNCWebView.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNCWebView.xcodeproj; path = "../node_modules/react-native-webview/ios/RNCWebView.xcodeproj"; sourceTree = "<group>"; };
|
||||
B492460F2225D86900DE94D5 /* mapview */ = {isa = PBXFileReference; lastKnownFileType = folder; name = mapview; path = ../resources/mapview; sourceTree = "<group>"; };
|
||||
C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libTcpSockets.a; sourceTree = "<group>"; };
|
||||
CD48A32459B64E96843BB238 /* libRealmReact.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRealmReact.a; sourceTree = "<group>"; };
|
||||
CE4E31B21D8695250033ED64 /* Statusgo.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Statusgo.framework; path = "../modules/react-native-status/ios/RCTStatus/Statusgo.framework"; sourceTree = "<group>"; };
|
||||
|
|
@ -741,6 +751,7 @@
|
|||
1E7837547A9A40E18AD63CF3 /* Resources */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
B492460F2225D86900DE94D5 /* mapview */,
|
||||
55C386222185E83600B7A324 /* Inter-UI-Bold.otf */,
|
||||
55C386202185E83600B7A324 /* Inter-UI-Medium.otf */,
|
||||
55C386212185E83600B7A324 /* Inter-UI-Regular.otf */,
|
||||
|
|
@ -849,6 +860,7 @@
|
|||
isa = PBXGroup;
|
||||
children = (
|
||||
ABC194DC2210099B00EB06E6 /* RNLanguages.xcodeproj */,
|
||||
B461988B2210C98F00603CF2 /* RNCWebView.xcodeproj */,
|
||||
475D1F8D20B7413500879A77 /* RNFirebase.xcodeproj */,
|
||||
9EF083381F3B538A00876A8F /* ReactNativeConfig.xcodeproj */,
|
||||
B2DEA0A41E49E32000FA28D6 /* RCTHttpServer.xcodeproj */,
|
||||
|
|
@ -1018,6 +1030,14 @@
|
|||
name = Products;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
B461988C2210C98F00603CF2 /* Products */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
B46198BC2210C98F00603CF2 /* libRNCWebView.a */,
|
||||
);
|
||||
name = Products;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
C90047C11FC47AF30002B8EA /* Recovered References */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
|
|
@ -1215,6 +1235,10 @@
|
|||
ProductGroup = 20B7D1251D3F74CD00B70F14 /* Products */;
|
||||
ProjectRef = F090E261B9854867A728CE4F /* RealmReact.xcodeproj */;
|
||||
},
|
||||
{
|
||||
ProductGroup = B461988C2210C98F00603CF2 /* Products */;
|
||||
ProjectRef = B461988B2210C98F00603CF2 /* RNCWebView.xcodeproj */;
|
||||
},
|
||||
{
|
||||
ProductGroup = 475D1F8E20B7413500879A77 /* Products */;
|
||||
ProjectRef = 475D1F8D20B7413500879A77 /* RNFirebase.xcodeproj */;
|
||||
|
|
@ -1491,6 +1515,13 @@
|
|||
remoteRef = B2DEA0B01E49E32000FA28D6 /* PBXContainerItemProxy */;
|
||||
sourceTree = BUILT_PRODUCTS_DIR;
|
||||
};
|
||||
B46198BC2210C98F00603CF2 /* libRNCWebView.a */ = {
|
||||
isa = PBXReferenceProxy;
|
||||
fileType = archive.ar;
|
||||
path = libRNCWebView.a;
|
||||
remoteRef = B46198BB2210C98F00603CF2 /* PBXContainerItemProxy */;
|
||||
sourceTree = BUILT_PRODUCTS_DIR;
|
||||
};
|
||||
C90047CD1FC47AF50002B8EA /* libRCTBlob-tvOS.a */ = {
|
||||
isa = PBXReferenceProxy;
|
||||
fileType = archive.ar;
|
||||
|
|
@ -1659,6 +1690,7 @@
|
|||
isa = PBXResourcesBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
B49246102225D86900DE94D5 /* mapview in Resources */,
|
||||
55C386232185E83600B7A324 /* Inter-UI-Medium.otf in Resources */,
|
||||
983F077E2119C9D2004133ED /* message.wav in Resources */,
|
||||
74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */,
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"emojilib": "2.2.9",
|
||||
"eth-phishing-detect": "1.1.13",
|
||||
"events": "1.1.1",
|
||||
"hi-base32": "0.5.0",
|
||||
"homoglyph-finder": "1.1.1",
|
||||
"identicon.js": "git+https://github.com/status-im/identicon.js.git#v1.2.1-status",
|
||||
"i18n-js": "^3.1.0",
|
||||
|
|
@ -58,6 +59,7 @@
|
|||
"react-native-tcp": "git+https://github.com/status-im/react-native-tcp.git#v3.3.0-1-status",
|
||||
"react-native-udp": "git+https://github.com/status-im/react-native-udp.git#2.3.1-1",
|
||||
"react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#v0.33.16-6",
|
||||
"react-native-webview": "^5.2.1",
|
||||
"react-navigation": "^2.12.1",
|
||||
"realm": "2.21.0",
|
||||
"rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#v2.0.2-status",
|
||||
|
|
@ -65,8 +67,7 @@
|
|||
"text-encoding": "^0.6.4",
|
||||
"url": "0.10.3",
|
||||
"web3": "git+https://github.com/status-im/web3.js.git#0.20.2-status",
|
||||
"web3-utils": "1.0.0-beta.36",
|
||||
"hi-base32": "0.5.0"
|
||||
"web3-utils": "1.0.0-beta.36"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0-beta.47"
|
||||
|
|
|
|||
|
|
@ -3316,7 +3316,7 @@ fbjs@0.8.16:
|
|||
setimmediate "^1.0.5"
|
||||
ua-parser-js "^0.7.9"
|
||||
|
||||
fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
|
||||
fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.17, fbjs@^0.8.9:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
|
||||
|
|
@ -5900,6 +5900,14 @@ react-native-tab-view@^1.0.0:
|
|||
invariant "2.2.0"
|
||||
keymirror "0.1.1"
|
||||
|
||||
react-native-webview@^5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-5.2.1.tgz#8a3f2ee14488ad3d058f15c7054fb52fa47195ea"
|
||||
integrity sha512-2okhUUI51eX65OCLAko82PQX54flsrUndgpVoVuobD86e1OGQDDQnJizy2hAGxTpxv2c/dKUpeqHpWohY6ku9Q==
|
||||
dependencies:
|
||||
escape-string-regexp "^1.0.5"
|
||||
fbjs "^0.8.17"
|
||||
|
||||
"react-native@git+https://github.com/status-im/react-native.git#0.56.1-status":
|
||||
version "0.56.0"
|
||||
resolved "git+https://github.com/status-im/react-native.git#aa51c6e7a17776f7277f7f2124467fc0d41d6841"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
(def react-native (js/require "react-native"))
|
||||
(def realm (js/require "realm"))
|
||||
(def webview-bridge (js/require "react-native-webview-bridge"))
|
||||
(def webview #js {:WebView #js {}})
|
||||
(def secure-random (.-generateSecureRandom (js/require "react-native-securerandom")))
|
||||
(def EventEmmiter (js/require "react-native/Libraries/vendor/emitter/EventEmitter"))
|
||||
(def fetch (.-default (js/require "react-native-fetch-polyfill")))
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
(def status-keycard (js/require "react-native-status-keycard"))
|
||||
(def realm (js/require "realm"))
|
||||
(def webview-bridge (js/require "react-native-webview-bridge"))
|
||||
(def webview (js/require "react-native-webview"))
|
||||
(def secure-random (.-generateSecureRandom (js/require "react-native-securerandom")))
|
||||
(def EventEmmiter (js/require "react-native/Libraries/vendor/emitter/EventEmitter"))
|
||||
(def fetch (.-default (js/require "react-native-fetch-polyfill")))
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
|
|
@ -0,0 +1,635 @@
|
|||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,148 @@
|
|||
<html style="padding: 0; margin: 0;">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
|
||||
<link rel="stylesheet" href="leaflet.css"/>
|
||||
<script src="leaflet.js"></script>
|
||||
|
||||
<body style="padding: 0; margin: 0;">
|
||||
<div id="mapid" style="height: 100%;width: 100vw;"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
var staticmode = {
|
||||
doubleClickZoom: false,
|
||||
dragging: false,
|
||||
keyboard: false,
|
||||
touchZoom: false,
|
||||
zoomControl: false,
|
||||
scrollWheelZoom: false,
|
||||
boxZoom: false,
|
||||
tap: false,
|
||||
zoomSnap: 0
|
||||
};
|
||||
|
||||
var interactivemode = {
|
||||
doubleClickZoom: true,
|
||||
dragging: true,
|
||||
zoomSnap: 0
|
||||
};
|
||||
|
||||
var state = {
|
||||
init: false,
|
||||
interactive: false,
|
||||
can_animate: false,
|
||||
is_animating: false,
|
||||
no_feedback: false,
|
||||
map: null,
|
||||
marker: null,
|
||||
messageToStatus: {
|
||||
lat: null,
|
||||
lng: null,
|
||||
boundingbox: {
|
||||
lat1: null,
|
||||
lat2: null,
|
||||
lng1: null,
|
||||
lng2: null
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// internal functions
|
||||
|
||||
function _feedback() {
|
||||
if(state.marker) {
|
||||
var currentBounds = state.map.getBounds();
|
||||
var tmp = state.messageToStatus;
|
||||
tmp.lat = state.marker._latlng.lat;
|
||||
tmp.lng = state.marker._latlng.lng;
|
||||
tmp = tmp.boundingbox;
|
||||
tmp.lat1 = currentBounds._northEast.lat;
|
||||
tmp.lat2 = currentBounds._southWest.lat;
|
||||
tmp.lng1 = currentBounds._northEast.lng;
|
||||
tmp.lng2 = currentBounds._southWest.lng;
|
||||
|
||||
var message = JSON.stringify(state.messageToStatus);
|
||||
|
||||
window.ReactNativeWebView.postMessage(message);
|
||||
}
|
||||
}
|
||||
|
||||
function _setMarker(lat, lng) {
|
||||
if (state.marker) { // check
|
||||
state.map.removeLayer(state.marker); // remove
|
||||
}
|
||||
state.marker = new L.marker([lat, lng]);
|
||||
state.marker.addTo(state.map);
|
||||
}
|
||||
|
||||
function _init(interactive,fitWorld) {
|
||||
if(state.map) state.map.remove();
|
||||
state.marker = null;
|
||||
|
||||
state.map = L.map('mapid', interactive ? interactivemode : staticmode);
|
||||
|
||||
if(fitWorld) {
|
||||
state.map.fitWorld();
|
||||
state.can_animate = true;
|
||||
}
|
||||
else {
|
||||
state.can_animate = false;
|
||||
}
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(state.map);
|
||||
|
||||
if(interactive) {
|
||||
state.map.on('click', function(e) {
|
||||
state.no_feedback = false; // user interaction, reenable feedback
|
||||
_setMarker(e.latlng.lat,e.latlng.lng);
|
||||
if(state.is_animating) state.map.stop();
|
||||
else _feedback();
|
||||
});
|
||||
state.map.on('movestart', function() {
|
||||
state.is_animating = true;
|
||||
});
|
||||
state.map.on('moveend', function() {
|
||||
state.is_animating = false;
|
||||
if(!state.no_feedback) _feedback();
|
||||
|
||||
state.no_feedback = false; // change finished, reenable feedback
|
||||
});
|
||||
}
|
||||
|
||||
state.interactive = interactive;
|
||||
state.init = true;
|
||||
}
|
||||
|
||||
// exposed functions
|
||||
function init(opts) {
|
||||
if(typeof opts !== 'object') return;
|
||||
_init(opts.interactive,true);
|
||||
}
|
||||
|
||||
function update(opts) {
|
||||
if(typeof opts !== 'object') return;
|
||||
state.no_feedback = true; //avoid send back position when new position from status app
|
||||
|
||||
// init or reinit if interactive changed
|
||||
if(!state.init || opts.interactive != state.interactive) _init(opts.interactive,false);
|
||||
|
||||
var c1 = L.latLng(opts.boundingbox.lat1, opts.boundingbox.lng1),
|
||||
c2 = L.latLng(opts.boundingbox.lat2, opts.boundingbox.lng2),
|
||||
b = L.latLngBounds(c1, c2);
|
||||
|
||||
if(opts.fly && state.can_animate) {
|
||||
state.map.flyToBounds(b);
|
||||
}
|
||||
else {
|
||||
state.map.fitBounds(b);
|
||||
}
|
||||
|
||||
state.can_animate = true;
|
||||
|
||||
_setMarker(opts.lat, opts.lng);
|
||||
}
|
||||
</script>
|
||||
<html>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
[status-im.utils.fx :as fx]
|
||||
status-im.extensions.ethereum
|
||||
status-im.extensions.camera
|
||||
[status-im.extensions.map :as map]
|
||||
[status-im.utils.ethereum.tokens :as tokens]
|
||||
[status-im.utils.ethereum.core :as ethereum]
|
||||
[status-im.chat.commands.sending :as commands-sending]
|
||||
|
|
@ -434,7 +435,18 @@
|
|||
'activity-indicator {:value activity-indicator :properties {:animating :boolean :color :string :size :keyword :hides-when-stopped :boolean}}
|
||||
'picker {:value picker :properties {:on-change :event :selected :string :enabled :boolean :data :vector}}
|
||||
'nft-token-viewer {:value transactions/nft-token :properties {:token :string}}
|
||||
'transaction-status {:value transactions/transaction-status :properties {:outgoing :string :tx-hash :string}}}
|
||||
'transaction-status {:value transactions/transaction-status :properties {:outgoing :string :tx-hash :string}}
|
||||
'map {:value map/map-webview
|
||||
:properties {:marker {:lng :number
|
||||
:lat :number
|
||||
:boundingbox {:lng1 :number
|
||||
:lat1 :number
|
||||
:lng2 :number
|
||||
:lat2 :number}}
|
||||
:fly? :boolean
|
||||
:interactive? :boolean
|
||||
:on-change :event}}
|
||||
'map-link {:value map/map-link :properties {:text :string :lng :any :lat :any}}}
|
||||
:queries {'identity {:value :extensions/identity :arguments {:value :map}}
|
||||
'store/get {:value :store/get :arguments {:key :string}}
|
||||
'contacts/all {:value :extensions.contacts/all} ;; :photo :name :address :public-key
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
(ns status-im.extensions.map
|
||||
(:require-macros
|
||||
[status-im.utils.slurp :refer [slurp]]
|
||||
[status-im.utils.views :refer [defview letsubs]])
|
||||
(:require [clojure.string :as string]
|
||||
[re-frame.core :as re-frame]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.utils.types :as types]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.ui.screens.browser.styles :as styles]
|
||||
[status-im.react-native.js-dependencies :as js-dependencies]))
|
||||
|
||||
(def mapview-html (slurp "resources/mapview/mapview.html"))
|
||||
|
||||
(def webview-class
|
||||
(reagent/adapt-react-class (.-WebView js-dependencies/webview)))
|
||||
|
||||
(defn map-component
|
||||
"creates a webview reagent component which cause webview to be updated only when style changes.
|
||||
if injected-java-script changes, new javascript is run inside webview.
|
||||
so, injected-java-script is not only used on webview initialization, but also to update webview state"
|
||||
[opts wvref]
|
||||
(reagent.core/create-class
|
||||
{:should-component-update
|
||||
(fn [_ [_ {:keys [style injected-java-script]}] [_ {new-injected-java-script :injected-java-script new-style :style}]]
|
||||
(if (not= style new-style)
|
||||
true
|
||||
(do
|
||||
(when (and @wvref (not= injected-java-script new-injected-java-script))
|
||||
(.injectJavaScript @wvref new-injected-java-script))
|
||||
false)))
|
||||
:reagent-render
|
||||
(fn [opts]
|
||||
[webview-class opts])}))
|
||||
|
||||
(defn- on-map-message [map-event on-change]
|
||||
(let [data (-> map-event
|
||||
(.-nativeEvent)
|
||||
(.-data)
|
||||
(types/json->clj))]
|
||||
(re-frame/dispatch (on-change {:value data}))))
|
||||
|
||||
(defn- web-view-error [_ code desc]
|
||||
(reagent/as-element
|
||||
[react/view styles/web-view-error
|
||||
[react/i18n-text {:style styles/web-view-error-text :key :web-view-error}]
|
||||
[react/text {:style styles/web-view-error-text}
|
||||
(str code)]
|
||||
[react/text {:style styles/web-view-error-text}
|
||||
(str desc)]]))
|
||||
|
||||
(defview map-webview [{:keys [interactive fly style marker on-change]}]
|
||||
(letsubs [webview (atom nil)]
|
||||
[map-component
|
||||
{:style style
|
||||
:origin-whitelist ["*"]
|
||||
:source {:html mapview-html :base-url (cond
|
||||
platform/ios? "./mapview/"
|
||||
platform/android? "file:///android_asset/"
|
||||
:else nil)}
|
||||
:java-script-enabled true
|
||||
:bounces false
|
||||
:over-scroll-mode "never"
|
||||
:local-storage-enabled true
|
||||
:render-error web-view-error
|
||||
|
||||
;; load only local resources, for non-local resources open external browser
|
||||
:on-should-start-load-with-request #(let [url (.-url %)]
|
||||
(if (string/starts-with? url "file")
|
||||
true
|
||||
(do (.openURL react/linking url) false)))
|
||||
|
||||
:ref #(reset! webview %)
|
||||
:on-message #(when on-change (on-map-message % on-change))
|
||||
:injected-java-script (let [interactive? (boolean interactive) ;; force boolean
|
||||
fly? (boolean fly)]
|
||||
(if (map? marker)
|
||||
(str "update(" (types/clj->json (assoc marker :fly fly? :interactive interactive?)) ");")
|
||||
(str "init(" (types/clj->json {:interactive interactive?}) ");")))}
|
||||
webview]))
|
||||
|
||||
(defn map-link
|
||||
"create a link-view which opens native map/navigation app with marker and label"
|
||||
[{:keys [text lat lng]}]
|
||||
(let [uri (cond
|
||||
platform/ios? (str "http://maps.apple.com/?q=" (js/encodeURIComponent text) "&ll=" lat "," lng)
|
||||
platform/android? (str "geo:0,0?q=" lat "," lng "(" (js/encodeURIComponent text) ")")
|
||||
:else (str "http://www.openstreetmap.org/?mlat=" lat "&mlon=" lng))]
|
||||
[react/text
|
||||
{:style {:color colors/white
|
||||
:text-decoration-line :underline}
|
||||
:on-press #(.openURL react/linking uri)}
|
||||
text]))
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
:close (fn [])})
|
||||
(def vector-icons #js {:default #js {}})
|
||||
(def webview-bridge #js {:default #js {}})
|
||||
(def webview #js {:WebView #js {}})
|
||||
(def svg #js {:default #js {}})
|
||||
(def status-keycard #js {:default #js {}})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue