jenkins-bot has submitted this change and it was merged.
Change subject: Prevent pages from being horizontally scrollable.
......................................................................
Prevent pages from being horizontally scrollable.
On pages with really wide images or tables, the page becomes annoyingly
scrollable horizontally, which ruins the experience of scrolling the page
up and down, when it starts drifting left and right. This handles two
cases that can potentially make the page scrollable horizontally:
- Detects large divs that have an explicit width that is larger than the
viewport width, and sets their "overflow" style to "auto," so that the
div itself becomes scrollable, instead of the entire page. Note: this
only applies to API >10 (has no effect on API 10)
- Detects math formula images, which are often wider than the viewport
width, and explicitly sets their width to fit within the viewport. The
formulas will still be readable, but will simply appear "smaller."
Change-Id: I47e9b616c3cfc7f6f0f04f56f0f02be4da69e932
---
M wikipedia/assets/bundle.js
M wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
M www/js/sections.js
M www/js/transforms.js
4 files changed, 79 insertions(+), 1 deletion(-)
Approvals:
BearND: Looks good to me, approved
jenkins-bot: Verified
diff --git a/wikipedia/assets/bundle.js b/wikipedia/assets/bundle.js
index be760a5..966a3f9 100644
--- a/wikipedia/assets/bundle.js
+++ b/wikipedia/assets/bundle.js
@@ -450,6 +450,7 @@
content.innerHTML = editButton.outerHTML + payload.section.text;
content.id = "content_block_0";
+ window.apiLevel = payload.apiLevel;
window.string_table_infobox = payload.string_table_infobox;
window.string_table_other = payload.string_table_other;
window.string_table_close = payload.string_table_close;
@@ -865,6 +866,43 @@
return content;
} );
+transformer.register( "section", function( content ) {
+ if (window.apiLevel < 11) {
+ //don't do anything for GB
+ return content;
+ }
+ var allDivs = content.querySelectorAll( 'div' );
+ var contentWrapper = document.getElementById( "content" );
+ var clientWidth = contentWrapper.offsetWidth;
+ for ( var i = 0; i < allDivs.length; i++ ) {
+ if (allDivs[i].style && allDivs[i].style.width) {
+ // if this div has an explicit width, and it's greater than our
client width,
+ // then make it overflow (with scrolling), and reset its width to
100%
+ if (parseInt(allDivs[i].style.width) > clientWidth) {
+ allDivs[i].style.overflowX = "auto";
+ allDivs[i].style.width = "100%";
+ }
+ }
+ }
+ return content;
+} );
+
+transformer.register( "section", function( content ) {
+ // Prevent horizontally scrollable pages by checking for math formula
images (which are
+ // often quite wide), and explicitly setting their maximum width to fit
the viewport.
+ var allImgs = content.querySelectorAll( 'img' );
+ for ( var i = 0; i < allImgs.length; i++ ) {
+ var imgItem = allImgs[i];
+ // is the image a math formula?
+ for ( var c = 0; c < imgItem.classList.length; c++ ) {
+ if (imgItem.classList[c].indexOf("math") > -1) {
+ imgItem.style.maxWidth = "100%";
+ }
+ }
+ }
+ return content;
+} );
+
},{"./bridge":2,"./night":8,"./transformer":11}],13:[function(require,module,exports){
/**
* MIT LICENSCE
@@ -1144,4 +1182,4 @@
try { module.exports = parseCSSColor } catch(e) { }
-},{}]},{},[6,14,7,8,11,12,2,1,4,5,3,10,9,13])
+},{}]},{},[6,14,7,8,11,12,2,1,4,5,3,10,9,13])
\ No newline at end of file
diff --git
a/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
b/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
index 24a9eaa..41f4e76 100644
--- a/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
+++ b/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java
@@ -35,6 +35,7 @@
import android.app.AlertDialog;
import android.content.Intent;
import android.content.res.Resources;
+import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.view.ActionMode;
@@ -195,6 +196,7 @@
leadSectionPayload.put("string_table_other",
getString(R.string.table_other));
leadSectionPayload.put("string_table_close",
getString(R.string.table_close));
leadSectionPayload.put("isBeta", app.getReleaseType() !=
WikipediaApp.RELEASE_PROD);
+ leadSectionPayload.put("apiLevel", Build.VERSION.SDK_INT);
bridge.sendMessage("displayLeadSection", leadSectionPayload);
JSONObject attributionPayload = new JSONObject();
diff --git a/www/js/sections.js b/www/js/sections.js
index 58d52d7..2383d2a 100644
--- a/www/js/sections.js
+++ b/www/js/sections.js
@@ -35,6 +35,7 @@
content.innerHTML = editButton.outerHTML + payload.section.text;
content.id = "content_block_0";
+ window.apiLevel = payload.apiLevel;
window.string_table_infobox = payload.string_table_infobox;
window.string_table_other = payload.string_table_other;
window.string_table_close = payload.string_table_close;
diff --git a/www/js/transforms.js b/www/js/transforms.js
index 430d43a..1b0855b 100644
--- a/www/js/transforms.js
+++ b/www/js/transforms.js
@@ -242,3 +242,40 @@
}
return content;
} );
+
+transformer.register( "section", function( content ) {
+ if (window.apiLevel < 11) {
+ //don't do anything for GB
+ return content;
+ }
+ var allDivs = content.querySelectorAll( 'div' );
+ var contentWrapper = document.getElementById( "content" );
+ var clientWidth = contentWrapper.offsetWidth;
+ for ( var i = 0; i < allDivs.length; i++ ) {
+ if (allDivs[i].style && allDivs[i].style.width) {
+ // if this div has an explicit width, and it's greater than our
client width,
+ // then make it overflow (with scrolling), and reset its width to
100%
+ if (parseInt(allDivs[i].style.width) > clientWidth) {
+ allDivs[i].style.overflowX = "auto";
+ allDivs[i].style.width = "100%";
+ }
+ }
+ }
+ return content;
+} );
+
+transformer.register( "section", function( content ) {
+ // Prevent horizontally scrollable pages by checking for math formula
images (which are
+ // often quite wide), and explicitly setting their maximum width to fit
the viewport.
+ var allImgs = content.querySelectorAll( 'img' );
+ for ( var i = 0; i < allImgs.length; i++ ) {
+ var imgItem = allImgs[i];
+ // is the image a math formula?
+ for ( var c = 0; c < imgItem.classList.length; c++ ) {
+ if (imgItem.classList[c].indexOf("math") > -1) {
+ imgItem.style.maxWidth = "100%";
+ }
+ }
+ }
+ return content;
+} );
--
To view, visit https://gerrit.wikimedia.org/r/165870
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I47e9b616c3cfc7f6f0f04f56f0f02be4da69e932
Gerrit-PatchSet: 6
Gerrit-Project: apps/android/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Dbrant <[email protected]>
Gerrit-Reviewer: BearND <[email protected]>
Gerrit-Reviewer: Brion VIBBER <[email protected]>
Gerrit-Reviewer: Dbrant <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
