fix for comment links click

This commit is contained in:
feruz 2020-01-21 13:00:22 +02:00
parent c8a33c799e
commit dcbbc190b3
5 changed files with 173 additions and 68 deletions

View File

@ -9,6 +9,9 @@ import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
//See below, Webview debugging
//import android.webkit.WebView;
import com.microsoft.codepush.react.CodePush;
import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
@ -17,29 +20,29 @@ import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new CodePush("hvFLmwFbA1yko829EQO_apTfdlCKSybps-jnWV", MainApplication.this, BuildConfig.DEBUG));
packages.add(new RNCViewPagerPackage());
return packages;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for
// example:
// packages.add(new MyReactNativePackage());
packages.add(new CodePush("hvFLmwFbA1yko829EQO_apTfdlCKSybps-jnWV", MainApplication.this, BuildConfig.DEBUG));
packages.add(new RNCViewPagerPackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
@ -50,6 +53,8 @@ public class MainApplication extends Application implements ReactApplication {
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
// Uncomment below line to Debug Webview
// WebView.setWebContentsDebuggingEnabled(true);
initializeFlipper(this); // Remove this line if you don't want Flipper enabled
}
@ -62,9 +67,9 @@ public class MainApplication extends Application implements ReactApplication {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
* We use reflection here to pick up the class that initializes Flipper, since
* Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
} catch (ClassNotFoundException e) {

View File

@ -53,7 +53,7 @@
"react-intl": "^3.9.2",
"react-native": "0.61.5",
"react-native-actionsheet": "esteemapp/react-native-actionsheet",
"react-native-autoheight-webview": "^1.4.0",
"react-native-autoheight-webview": "^1.4.1",
"react-native-code-push": "esteemapp/react-native-code-push",
"react-native-config": "luggit/react-native-config#master",
"react-native-dark-mode": "^0.2.1",
@ -76,7 +76,7 @@
"react-native-vector-icons": "^6.6.0",
"react-native-version": "^3.1.0",
"react-native-version-number": "^0.3.5",
"react-native-webview": "^7.5.2",
"react-native-webview": "^8.0.4",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-redux-helpers": "^4.0.1",

View File

@ -14,7 +14,7 @@ import { navigate } from '../../../../navigation/service';
import { default as ROUTES } from '../../../../constants/routeNames';
import { CommentPlaceHolder } from '../../../basicUIElements';
import { customBodyScript } from './config';
import { customCommentScript } from './config';
// Styles
@ -328,7 +328,7 @@ const CommentBody = ({
`;
return (
<Fragment>
<Modal visible={isImageModalOpen} transparent={true}>
<Modal key={`mkey-${created.toString()}`} visible={isImageModalOpen} transparent={true}>
<ImageViewer
imageUrls={postImages}
enableSwipeDown
@ -341,13 +341,13 @@ const CommentBody = ({
/>
</Modal>
<AutoHeightWebView
key={created.toString()}
key={`akey-${created.toString()}`}
source={{ html }}
allowsFullscreenVideo={true}
style={{ width: WIDTH - (32 + 34 * (commentDepth % 6)) }}
customStyle={customStyle}
onMessage={__handleOnLinkPress}
customScript={customBodyScript}
customScript={customCommentScript}
renderLoading={() => <CommentPlaceHolder />}
startInLoadingState={true}
onShouldStartLoadWithRequest={false}

View File

@ -1,14 +1,11 @@
'use strict';
const customBodyScript = `
var images = document.getElementsByTagName("IMG");
for (i = 0; i < images.length; i++) {
for (var i = 0; i < images.length; i++) {
var result = {
type: 'image',
href: images[i].getAttribute("src") || ''
}
};
var resultStr = JSON.stringify(JSON.stringify(result));
var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) {
images[i].setAttribute("onClick", message);
@ -29,42 +26,39 @@ document.addEventListener('click', function(event) {
var href = el.getAttribute('href');
var result = {
type: '_external',
href
}
href: href
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return true;
}
if (el.classList.contains('markdown-external-link')) {
var href = el.getAttribute('data-href');
var result = {
type: 'markdown-external-link',
href
}
href: href
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return true;
}
if (el.classList.contains('markdown-author-link')) {
var author = el.getAttribute('data-author');
var result = {
type: 'markdown-author-link',
author,
}
author: author
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-post-link')) {
var category = el.getAttribute('data-tag');
var author = el.getAttribute('data-author');
var permlink = el.getAttribute('data-permlink');
var result = {
type: 'markdown-post-link',
category,
author,
permlink,
}
category: category,
author: author,
permlink: permlink
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
@ -72,26 +66,24 @@ document.addEventListener('click', function(event) {
var tag = el.getAttribute('data-tag');
var result = {
type: 'markdown-tag-link',
tag
}
tag: tag
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-witnesses-link')) {
var result = {
type: 'markdown-witnesses-link'
}
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-proposal-link')) {
var proposal = el.getAttribute('data-proposal');
var result = {
type: 'markdown-proposal-link',
proposal
}
proposal: proposal
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
@ -105,17 +97,125 @@ document.addEventListener('click', function(event) {
if (videoHref) {
var result = {
type: 'markdown-video-link',
videoHref
}
videoHref: videoHref
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
}
var author = el.getAttribute('data-author').toString();
window.ReactNativeWebView.postMessage(JSON.stringify(author));
})
});
true;
`;
export { customBodyScript };
const customCommentScript = `
var images = document.getElementsByTagName("IMG");
for (var i = 0; i < images.length; i++) {
var result = {
type: 'image',
href: images[i].getAttribute("src") || ''
};
var resultStr = JSON.stringify(JSON.stringify(result));
var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) {
images[i].setAttribute("onClick", message);
}
}
document.addEventListener('touchstart', function(event) {
var el = event.target;
while (el.tagName !== 'A') {
if (!el.parentNode) {
break;
}
el = el.parentNode;
}
if (!el || el.tagName !== 'A') {
return;
}
if (el.getAttribute('target') === '_external') {
var href = el.getAttribute('href');
var result = {
type: '_external',
href: href
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return true;
}
if (el.classList.contains('markdown-external-link')) {
var href = el.getAttribute('data-href');
var result = {
type: 'markdown-external-link',
href: href
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return true;
}
if (el.classList.contains('markdown-author-link')) {
var author = el.getAttribute('data-author');
var result = {
type: 'markdown-author-link',
author: author
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-post-link')) {
var category = el.getAttribute('data-tag');
var author = el.getAttribute('data-author');
var permlink = el.getAttribute('data-permlink');
var result = {
type: 'markdown-post-link',
category: category,
author: author,
permlink: permlink
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-tag-link')) {
var tag = el.getAttribute('data-tag');
var result = {
type: 'markdown-tag-link',
tag: tag
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-witnesses-link')) {
var result = {
type: 'markdown-witnesses-link'
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-proposal-link')) {
var proposal = el.getAttribute('data-proposal');
var result = {
type: 'markdown-proposal-link',
proposal: proposal
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
if (el.classList.contains('markdown-video-link')) {
var embedSrc = '<iframe frameborder="0" allowfullscreen src="' + el.getAttribute('data-embed-src') + '"></iframe>';
if (embedSrc) {
el.innerHTML = embedSrc;
return;
}
var videoHref = el.getAttribute('data-video-href');
if (videoHref) {
var result = {
type: 'markdown-video-link',
videoHref: videoHref
};
window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false;
}
}
});
true;
`;
export { customBodyScript, customCommentScript };

View File

@ -7562,10 +7562,10 @@ react-native-autoheight-webview@^1.3.4:
dependencies:
prop-types "^15.7.2"
react-native-autoheight-webview@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.4.0.tgz#03274b8cd5d2e4fdf25511f10cfe3321864460a0"
integrity sha512-JhyzEL5eAKPN2VtbA6kL6f3Zphmmx1XcEnIluE+Fed3iwQxXJ1GwrvQb+ENGTZhDKtTdh39sfqadpm+2/h9V0A==
react-native-autoheight-webview@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.4.1.tgz#be92b7be8a8691d60865e4ad6a8523ff4221207a"
integrity sha512-mBx74NP7Sa6/8j46eDdm68z6Yw5YcvN3WkJNUHoCCJ36rQURFhSfhKm+aqbciqlXE8Jr5PrRA1oZSBeZzDb0bA==
dependencies:
prop-types "^15.7.2"
@ -7783,10 +7783,10 @@ react-native-version@^3.1.0:
resolve-from "^5.0.0"
semver "^6.0.0"
react-native-webview@^7.5.2:
version "7.6.0"
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-7.6.0.tgz#6bae76430200be5e5ead7d986af2fa341b650186"
integrity sha512-IQWtIpCTYb4dTshAJO3hMM9Ms5T6KRpk6qWqgBTGMdmgeEvSxWz9l7Og1ALhb7T7NoAnPy8w/dQmD9LlbGGs5g==
react-native-webview@^8.0.4:
version "8.0.4"
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-8.0.4.tgz#4951df32bd54f6fa16bc0eda5e6e6762d8b83ba8"
integrity sha512-XEatna1wwF43Rg500HaDIC/MS2IAob/PvjkTePCevs9wQz90SwERTjGZNuM2WxH+JwrZrxoilGBOn34vQTTJkw==
dependencies:
escape-string-regexp "2.0.0"
invariant "2.2.4"