From dcbbc190b31f02ab17346c392b9a062cb6436aed Mon Sep 17 00:00:00 2001 From: feruz Date: Tue, 21 Jan 2020 13:00:22 +0200 Subject: [PATCH] fix for comment links click --- .../mobile/android/MainApplication.java | 53 +++--- package.json | 4 +- .../postElements/body/view/commentBodyView.js | 8 +- .../postElements/body/view/config.js | 160 ++++++++++++++---- yarn.lock | 16 +- 5 files changed, 173 insertions(+), 68 deletions(-) diff --git a/android/app/src/main/java/app/esteem/mobile/android/MainApplication.java b/android/app/src/main/java/app/esteem/mobile/android/MainApplication.java index a50680a09..f1b4cffc6 100644 --- a/android/app/src/main/java/app/esteem/mobile/android/MainApplication.java +++ b/android/app/src/main/java/app/esteem/mobile/android/MainApplication.java @@ -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 getPackages() { - @SuppressWarnings("UnnecessaryLocalVariable") - List 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 getPackages() { + @SuppressWarnings("UnnecessaryLocalVariable") + List 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) { diff --git a/package.json b/package.json index 188cf1253..d17bb2862 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/postElements/body/view/commentBodyView.js b/src/components/postElements/body/view/commentBodyView.js index 373c6e93e..8912e2504 100644 --- a/src/components/postElements/body/view/commentBodyView.js +++ b/src/components/postElements/body/view/commentBodyView.js @@ -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 ( - + } startInLoadingState={true} onShouldStartLoadWithRequest={false} diff --git a/src/components/postElements/body/view/config.js b/src/components/postElements/body/view/config.js index 25f65c975..33a1e0369 100644 --- a/src/components/postElements/body/view/config.js +++ b/src/components/postElements/body/view/config.js @@ -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 = ''; + 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 }; diff --git a/yarn.lock b/yarn.lock index b960747d4..338ab9bb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"