Merge pull request #1502 from esteemapp/custom-script

fix for comment links click
This commit is contained in:
Mustafa Buyukcelebi 2020-01-21 14:46:20 +03:00 committed by GitHub
commit 3f7ff75738
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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.react.ReactPackage;
import com.facebook.soloader.SoLoader; import com.facebook.soloader.SoLoader;
//See below, Webview debugging
//import android.webkit.WebView;
import com.microsoft.codepush.react.CodePush; import com.microsoft.codepush.react.CodePush;
import com.reactnativecommunity.viewpager.RNCViewPagerPackage; import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
@ -17,29 +20,29 @@ import java.util.List;
public class MainApplication extends Application implements ReactApplication { public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
new ReactNativeHost(this) { @Override
@Override public boolean getUseDeveloperSupport() {
public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG;
return BuildConfig.DEBUG; }
}
@Override @Override
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable") @SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages(); List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example: // Packages that cannot be autolinked yet can be added manually here, for
// packages.add(new MyReactNativePackage()); // example:
packages.add(new CodePush("hvFLmwFbA1yko829EQO_apTfdlCKSybps-jnWV", MainApplication.this, BuildConfig.DEBUG)); // packages.add(new MyReactNativePackage());
packages.add(new RNCViewPagerPackage()); packages.add(new CodePush("hvFLmwFbA1yko829EQO_apTfdlCKSybps-jnWV", MainApplication.this, BuildConfig.DEBUG));
return packages; packages.add(new RNCViewPagerPackage());
} return packages;
}
@Override @Override
protected String getJSMainModuleName() { protected String getJSMainModuleName() {
return "index"; return "index";
} }
}; };
@Override @Override
public ReactNativeHost getReactNativeHost() { public ReactNativeHost getReactNativeHost() {
@ -50,6 +53,8 @@ public class MainApplication extends Application implements ReactApplication {
public void onCreate() { public void onCreate() {
super.onCreate(); super.onCreate();
SoLoader.init(this, /* native exopackage */ false); 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 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) { if (BuildConfig.DEBUG) {
try { try {
/* /*
We use reflection here to pick up the class that initializes Flipper, * We use reflection here to pick up the class that initializes Flipper, since
since Flipper library is not available in release mode * Flipper library is not available in release mode
*/ */
Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper"); Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
aClass.getMethod("initializeFlipper", Context.class).invoke(null, context); aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
} catch (ClassNotFoundException e) { } catch (ClassNotFoundException e) {

View File

@ -53,7 +53,7 @@
"react-intl": "^3.9.2", "react-intl": "^3.9.2",
"react-native": "0.61.5", "react-native": "0.61.5",
"react-native-actionsheet": "esteemapp/react-native-actionsheet", "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-code-push": "esteemapp/react-native-code-push",
"react-native-config": "luggit/react-native-config#master", "react-native-config": "luggit/react-native-config#master",
"react-native-dark-mode": "^0.2.1", "react-native-dark-mode": "^0.2.1",
@ -76,7 +76,7 @@
"react-native-vector-icons": "^6.6.0", "react-native-vector-icons": "^6.6.0",
"react-native-version": "^3.1.0", "react-native-version": "^3.1.0",
"react-native-version-number": "^0.3.5", "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": "^4.0.10",
"react-navigation-drawer": "^2.3.3", "react-navigation-drawer": "^2.3.3",
"react-navigation-redux-helpers": "^4.0.1", "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 { default as ROUTES } from '../../../../constants/routeNames';
import { CommentPlaceHolder } from '../../../basicUIElements'; import { CommentPlaceHolder } from '../../../basicUIElements';
import { customBodyScript } from './config'; import { customCommentScript } from './config';
// Styles // Styles
@ -328,7 +328,7 @@ const CommentBody = ({
`; `;
return ( return (
<Fragment> <Fragment>
<Modal visible={isImageModalOpen} transparent={true}> <Modal key={`mkey-${created.toString()}`} visible={isImageModalOpen} transparent={true}>
<ImageViewer <ImageViewer
imageUrls={postImages} imageUrls={postImages}
enableSwipeDown enableSwipeDown
@ -341,13 +341,13 @@ const CommentBody = ({
/> />
</Modal> </Modal>
<AutoHeightWebView <AutoHeightWebView
key={created.toString()} key={`akey-${created.toString()}`}
source={{ html }} source={{ html }}
allowsFullscreenVideo={true} allowsFullscreenVideo={true}
style={{ width: WIDTH - (32 + 34 * (commentDepth % 6)) }} style={{ width: WIDTH - (32 + 34 * (commentDepth % 6)) }}
customStyle={customStyle} customStyle={customStyle}
onMessage={__handleOnLinkPress} onMessage={__handleOnLinkPress}
customScript={customBodyScript} customScript={customCommentScript}
renderLoading={() => <CommentPlaceHolder />} renderLoading={() => <CommentPlaceHolder />}
startInLoadingState={true} startInLoadingState={true}
onShouldStartLoadWithRequest={false} onShouldStartLoadWithRequest={false}

View File

@ -1,14 +1,11 @@
'use strict';
const customBodyScript = ` const customBodyScript = `
var images = document.getElementsByTagName("IMG"); var images = document.getElementsByTagName("IMG");
for (i = 0; i < images.length; i++) { for (var i = 0; i < images.length; i++) {
var result = { var result = {
type: 'image', type: 'image',
href: images[i].getAttribute("src") || '' href: images[i].getAttribute("src") || ''
} };
var resultStr = JSON.stringify(JSON.stringify(result)); var resultStr = JSON.stringify(JSON.stringify(result));
var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')'; var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) { if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) {
images[i].setAttribute("onClick", message); images[i].setAttribute("onClick", message);
@ -29,42 +26,39 @@ document.addEventListener('click', function(event) {
var href = el.getAttribute('href'); var href = el.getAttribute('href');
var result = { var result = {
type: '_external', type: '_external',
href href: href
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return true; return true;
} }
if (el.classList.contains('markdown-external-link')) { if (el.classList.contains('markdown-external-link')) {
var href = el.getAttribute('data-href'); var href = el.getAttribute('data-href');
var result = { var result = {
type: 'markdown-external-link', type: 'markdown-external-link',
href href: href
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return true; return true;
} }
if (el.classList.contains('markdown-author-link')) { if (el.classList.contains('markdown-author-link')) {
var author = el.getAttribute('data-author'); var author = el.getAttribute('data-author');
var result = { var result = {
type: 'markdown-author-link', type: 'markdown-author-link',
author, author: author
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false; return false;
} }
if (el.classList.contains('markdown-post-link')) { if (el.classList.contains('markdown-post-link')) {
var category = el.getAttribute('data-tag'); var category = el.getAttribute('data-tag');
var author = el.getAttribute('data-author'); var author = el.getAttribute('data-author');
var permlink = el.getAttribute('data-permlink'); var permlink = el.getAttribute('data-permlink');
var result = { var result = {
type: 'markdown-post-link', type: 'markdown-post-link',
category, category: category,
author, author: author,
permlink, permlink: permlink
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false; return false;
} }
@ -72,26 +66,24 @@ document.addEventListener('click', function(event) {
var tag = el.getAttribute('data-tag'); var tag = el.getAttribute('data-tag');
var result = { var result = {
type: 'markdown-tag-link', type: 'markdown-tag-link',
tag tag: tag
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false; return false;
} }
if (el.classList.contains('markdown-witnesses-link')) { if (el.classList.contains('markdown-witnesses-link')) {
var result = { var result = {
type: 'markdown-witnesses-link' type: 'markdown-witnesses-link'
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false; return false;
} }
if (el.classList.contains('markdown-proposal-link')) { if (el.classList.contains('markdown-proposal-link')) {
var proposal = el.getAttribute('data-proposal'); var proposal = el.getAttribute('data-proposal');
var result = { var result = {
type: 'markdown-proposal-link', type: 'markdown-proposal-link',
proposal proposal: proposal
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false; return false;
} }
@ -105,17 +97,125 @@ document.addEventListener('click', function(event) {
if (videoHref) { if (videoHref) {
var result = { var result = {
type: 'markdown-video-link', type: 'markdown-video-link',
videoHref videoHref: videoHref
} };
window.ReactNativeWebView.postMessage(JSON.stringify(result)); window.ReactNativeWebView.postMessage(JSON.stringify(result));
return false; return false;
} }
} }
var author = el.getAttribute('data-author').toString(); var author = el.getAttribute('data-author').toString();
window.ReactNativeWebView.postMessage(JSON.stringify(author)); window.ReactNativeWebView.postMessage(JSON.stringify(author));
}) });
true; 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: dependencies:
prop-types "^15.7.2" prop-types "^15.7.2"
react-native-autoheight-webview@^1.4.0: react-native-autoheight-webview@^1.4.1:
version "1.4.0" version "1.4.1"
resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.4.0.tgz#03274b8cd5d2e4fdf25511f10cfe3321864460a0" resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.4.1.tgz#be92b7be8a8691d60865e4ad6a8523ff4221207a"
integrity sha512-JhyzEL5eAKPN2VtbA6kL6f3Zphmmx1XcEnIluE+Fed3iwQxXJ1GwrvQb+ENGTZhDKtTdh39sfqadpm+2/h9V0A== integrity sha512-mBx74NP7Sa6/8j46eDdm68z6Yw5YcvN3WkJNUHoCCJ36rQURFhSfhKm+aqbciqlXE8Jr5PrRA1oZSBeZzDb0bA==
dependencies: dependencies:
prop-types "^15.7.2" prop-types "^15.7.2"
@ -7783,10 +7783,10 @@ react-native-version@^3.1.0:
resolve-from "^5.0.0" resolve-from "^5.0.0"
semver "^6.0.0" semver "^6.0.0"
react-native-webview@^7.5.2: react-native-webview@^8.0.4:
version "7.6.0" version "8.0.4"
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-7.6.0.tgz#6bae76430200be5e5ead7d986af2fa341b650186" resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-8.0.4.tgz#4951df32bd54f6fa16bc0eda5e6e6762d8b83ba8"
integrity sha512-IQWtIpCTYb4dTshAJO3hMM9Ms5T6KRpk6qWqgBTGMdmgeEvSxWz9l7Og1ALhb7T7NoAnPy8w/dQmD9LlbGGs5g== integrity sha512-XEatna1wwF43Rg500HaDIC/MS2IAob/PvjkTePCevs9wQz90SwERTjGZNuM2WxH+JwrZrxoilGBOn34vQTTJkw==
dependencies: dependencies:
escape-string-regexp "2.0.0" escape-string-regexp "2.0.0"
invariant "2.2.4" invariant "2.2.4"