Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RN Mobile] UBE - Inject css on both page visible and page started #26071

Merged
merged 5 commits into from
Oct 14, 2020
Merged

[RN Mobile] UBE - Inject css on both page visible and page started #26071

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79dc5cb
Inject css on both page visible and page started
marecar3 Oct 13, 2020
04cb41f
Inject CSS when gutenberg is ready
marecar3 Oct 13, 2020
35092f5
Insert block content when page is 100% loaded
marecar3 Oct 14, 2020
35461d2
Sync is gutenberg ready with is web page loaded
marecar3 Oct 14, 2020
df6ee46
Dont reset isPageLoaded when progress is 100%
marecar3 Oct 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 64 additions & 20 deletions ...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,24 @@
import android.view.View;
import android.webkit.CookieManager;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

import androidx.annotation.Nullable;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import org.wordpress.android.util.AppLog;
import org.wordpress.android.util.helpers.WPWebChromeClient;
import org.wordpress.android.util.AppLog;;
import org.wordpress.mobile.FileUtils;

import java.util.ArrayList;
import java.util.List;
import java.util.Locale;
import java.util.concurrent.atomic.AtomicBoolean;

public class GutenbergWebViewActivity extends AppCompatActivity {

Expand All @@ -42,6 +44,11 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
protected View mForegroundView;
protected boolean mIsRedirected;

private ProgressBar mProgressBar;
private boolean mIsGutenbergReady;
private AtomicBoolean mIsWebPageLoaded = new AtomicBoolean(false);
private AtomicBoolean mIsBlockContentInserted = new AtomicBoolean(false);

@SuppressLint("SetJavaScriptEnabled")
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Expand All @@ -51,6 +58,7 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {

mWebView = findViewById(R.id.gutenberg_web_view);
mForegroundView = findViewById(R.id.foreground_view);
mProgressBar = findViewById(R.id.progress_bar);

// Set settings
WebSettings settings = mWebView.getSettings();
Expand All @@ -64,7 +72,31 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {

// Setup WebView client
setupWebViewClient();
mWebView.setWebChromeClient(new WPWebChromeClient(null, findViewById(R.id.progress_bar)));

// Setup Web Chrome client
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int progress) {
if (progress == 100 && !mIsWebPageLoaded.getAndSet(true)) {
// We want to insert block content
// only if gutenberg is ready
if (mIsGutenbergReady) {
mProgressBar.setVisibility(View.GONE);
final Handler handler = new Handler();
handler.postDelayed(() -> {
// Insert block content
insertBlockScript();
}, 200);
}
}
else {
if (progress < 100) {
mIsWebPageLoaded.compareAndSet(true, false);
}
mProgressBar.setProgress(progress);
}
}
});

loadUrl();
}
Expand Down Expand Up @@ -167,9 +199,6 @@ public boolean shouldOverrideUrlLoading(WebView view, String url) {

@Override
public void onPageCommitVisible(WebView view, String url) {
String injectCssScript = getFileContentFromAssets("gutenberg-web-single-block/inject-css.js");
evaluateJavaScript(injectCssScript);

long userId = getUserId();
if (userId != 0) {
String injectLocalStorageScript = getFileContentFromAssets("gutenberg-web-single-block/local-storage-overrides.json");
Expand Down Expand Up @@ -205,14 +234,6 @@ public void onPageFinished(WebView view, String url) {
String contentFunctions = getFileContentFromAssets("gutenberg-web-single-block/content-functions.js");
evaluateJavaScript(contentFunctions);

String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css");
editorStyle = removeWhiteSpace(removeNewLines(editorStyle));
evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle));

String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css");
injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript));
evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript));

String injectGutenbergObserver = getFileContentFromAssets("gutenberg-web-single-block/gutenberg-observer.js");
evaluateJavaScript(injectGutenbergObserver);
}
Expand All @@ -226,19 +247,40 @@ private void evaluateJavaScript(String script) {

private void onGutenbergReady() {
preventAutoSavesScript();
// Inject css when Gutenberg is ready
injectCssScript();
final Handler handler = new Handler();
handler.postDelayed(() -> {
mIsGutenbergReady = true;
// We want to make sure that page is loaded
// with all elements before executing external JS
injectOnGutenbergReadyExternalSources();
// Inject block content
insertBlockScript();
// If page is loaded try to insert block content
if (mIsWebPageLoaded.get()) {
// Insert block content
insertBlockScript();
}
// We need some extra time to hide all unwanted html elements
// like NUX (new user experience) modal is.
mForegroundView.postDelayed(() -> mForegroundView.setVisibility(View.INVISIBLE), 1500);
}, 2000);
}

private void injectCssScript() {
String injectCssScript = getFileContentFromAssets("gutenberg-web-single-block/inject-css.js");
mWebView.evaluateJavascript(injectCssScript, message -> {
if (message != null) {
String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css");
editorStyle = removeWhiteSpace(removeNewLines(editorStyle));
evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle));

String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css");
injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript));
evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript));
}
});
}

private void injectOnGutenbergReadyExternalSources() {
List<String> list = getOnGutenbergReadyExternalSources();
for (String file : list) {
Expand Down Expand Up @@ -267,10 +309,12 @@ private void preventAutoSavesScript() {
}

private void insertBlockScript() {
String insertBlock = getFileContentFromAssets("gutenberg-web-single-block/insert-block.js").replace("%@","%s");
String blockContent = getIntent().getExtras().getString(ARG_BLOCK_CONTENT);
insertBlock = String.format(insertBlock, blockContent);
evaluateJavaScript(removeNewLines(insertBlock.replace("\\n", "\\\\n")));
if (!mIsBlockContentInserted.getAndSet(true)) {
String insertBlock = getFileContentFromAssets("gutenberg-web-single-block/insert-block.js").replace("%@","%s");
String blockContent = getIntent().getExtras().getString(ARG_BLOCK_CONTENT);
insertBlock = String.format(insertBlock, blockContent);
evaluateJavaScript(removeNewLines(insertBlock.replace("\\n", "\\\\n")));
}
}

@Override
Expand Down