Brion VIBBER has submitted this change and it was merged.
Change subject: Indicate currently selected section in ToC
......................................................................
Indicate currently selected section in ToC
Change-Id: I430ac436aa15efca359d595041baf40f4f59b353
---
M wikipedia/assets/bundle.js
M wikipedia/res/layout/fragment_page.xml
M wikipedia/res/layout/item_toc_entry.xml
M wikipedia/src/main/java/org/wikipedia/page/ToCHandler.java
M www/js/sections.js
5 files changed, 81 insertions(+), 1 deletion(-)
Approvals:
Brion VIBBER: Verified; Looks good to me, approved
diff --git a/wikipedia/assets/bundle.js b/wikipedia/assets/bundle.js
index ef94159..5a839be 100644
--- a/wikipedia/assets/bundle.js
+++ b/wikipedia/assets/bundle.js
@@ -120,6 +120,8 @@
var title = document.createElement( "h1" );
title.innerHTML = payload.title;
title.id = "heading_" + payload.section.id;
+ title.className = "section_heading";
+ title.setAttribute( "data-id", 0 );
document.getElementById( "content" ).appendChild( title );
var editButton = document.createElement( "a" );
@@ -142,6 +144,7 @@
var heading = document.createElement( "h" + ( section.toclevel + 1 ) );
heading.innerHTML = section.line;
heading.id = section.anchor;
+ heading.className = "section_heading";
heading.setAttribute( 'data-id', section.id );
var editButton = document.createElement( "a" );
@@ -190,6 +193,35 @@
window.scrollTo( 0, scrollY );
}
+/**
+ * Returns the section id of the section that has the header closest to but
above midpoint of screen
+ */
+function getCurrentSection() {
+ var sectionHeaders = document.getElementsByClassName( "section_heading" );
+ var topCutoff = window.scrollY + ( document.documentElement.clientHeight /
2 );
+ var curClosest = null;
+ for ( var i = 0; i < sectionHeaders.length; i++ ) {
+ var el = sectionHeaders[i];
+ if ( curClosest === null ) {
+ curClosest = el;
+ continue;
+ }
+ if ( el.offsetTop >= topCutoff ) {
+ break;
+ }
+ if ( Math.abs(el.offsetTop - topCutoff) <
Math.abs(curClosest.offsetTop - topCutoff) ) {
+ curClosest = el;
+ }
+ }
+
+ return curClosest.getAttribute( "data-id" );
+}
+
+bridge.registerListener( "requestCurrentSection", function( payload ) {
+ bridge.sendMessage( "currentSectionResponse", { sectionID:
getCurrentSection() } );
+} );
+
+
},{"./bridge":2,"./transformer":7}],7:[function(require,module,exports){
function Transformer() {
}
diff --git a/wikipedia/res/layout/fragment_page.xml
b/wikipedia/res/layout/fragment_page.xml
index 95ca76e..1e62dea 100644
--- a/wikipedia/res/layout/fragment_page.xml
+++ b/wikipedia/res/layout/fragment_page.xml
@@ -28,6 +28,7 @@
android:divider="#ededed"
android:dividerHeight="0.5dp"
android:visibility="gone"
+ android:choiceMode="singleChoice"
/>
<ProgressBar
android:id="@+id/page_toc_in_progress"
diff --git a/wikipedia/res/layout/item_toc_entry.xml
b/wikipedia/res/layout/item_toc_entry.xml
index 8eb1505..57ff2a5 100644
--- a/wikipedia/res/layout/item_toc_entry.xml
+++ b/wikipedia/res/layout/item_toc_entry.xml
@@ -4,6 +4,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
+ android:background="?android:activatedBackgroundIndicator"
>
<View android:layout_width="0dp" android:layout_height="match_parent"
android:id="@+id/page_toc_filler"
diff --git a/wikipedia/src/main/java/org/wikipedia/page/ToCHandler.java
b/wikipedia/src/main/java/org/wikipedia/page/ToCHandler.java
index de6c537..33c29c0 100644
--- a/wikipedia/src/main/java/org/wikipedia/page/ToCHandler.java
+++ b/wikipedia/src/main/java/org/wikipedia/page/ToCHandler.java
@@ -3,6 +3,7 @@
import android.graphics.*;
import android.support.v4.widget.*;
import android.text.*;
+import android.util.*;
import android.view.*;
import android.widget.*;
import org.json.*;
@@ -18,7 +19,7 @@
private final CommunicationBridge bridge;
private final SlidingPaneLayout slidingPane;
- public ToCHandler(SlidingPaneLayout slidingPane, final View
quickReturnBar, CommunicationBridge bridge) {
+ public ToCHandler(final SlidingPaneLayout slidingPane, final View
quickReturnBar, final CommunicationBridge bridge) {
this.quickReturnBar = quickReturnBar;
this.bridge = bridge;
this.slidingPane = slidingPane;
@@ -35,6 +36,7 @@
@Override
public void onPanelOpened(View view) {
prevTranslateY = quickReturnBar.getTranslationY();
+ bridge.sendMessage("requestCurrentSection", new JSONObject());
Utils.ensureTranslationY(quickReturnBar,
-quickReturnBar.getHeight());
}
@@ -62,6 +64,19 @@
this.page = page;
tocProgress.setVisibility(View.GONE);
tocList.setVisibility(View.VISIBLE);
+
+ bridge.addListener("currentSectionResponse", new
CommunicationBridge.JSEventListener() {
+ @Override
+ public void onMessage(String messageType, JSONObject
messagePayload) {
+ int sectionID = messagePayload.optInt("sectionID");
+
+ tocList.setItemChecked(sectionID, true);
+ tocList.smoothScrollToPosition(Math.max(sectionID - 1, 0));
+
+ Log.d("Wikipedia", "current section is is " + sectionID);
+ }
+ });
+
if (tocList.getAdapter() == null) {
TextView headerView = (TextView)
LayoutInflater.from(tocList.getContext()).inflate(R.layout.header_toc_list,
null, false);
headerView.setText(page.getTitle().getDisplayText());
diff --git a/www/js/sections.js b/www/js/sections.js
index 6b9f334..c6583ee 100644
--- a/www/js/sections.js
+++ b/www/js/sections.js
@@ -8,6 +8,8 @@
var title = document.createElement( "h1" );
title.innerHTML = payload.title;
title.id = "heading_" + payload.section.id;
+ title.className = "section_heading";
+ title.setAttribute( "data-id", 0 );
document.getElementById( "content" ).appendChild( title );
var editButton = document.createElement( "a" );
@@ -30,6 +32,7 @@
var heading = document.createElement( "h" + ( section.toclevel + 1 ) );
heading.innerHTML = section.line;
heading.id = section.anchor;
+ heading.className = "section_heading";
heading.setAttribute( 'data-id', section.id );
var editButton = document.createElement( "a" );
@@ -77,3 +80,31 @@
var scrollY = el.offsetTop - 48 - el.offsetLeft;
window.scrollTo( 0, scrollY );
}
+
+/**
+ * Returns the section id of the section that has the header closest to but
above midpoint of screen
+ */
+function getCurrentSection() {
+ var sectionHeaders = document.getElementsByClassName( "section_heading" );
+ var topCutoff = window.scrollY + ( document.documentElement.clientHeight /
2 );
+ var curClosest = null;
+ for ( var i = 0; i < sectionHeaders.length; i++ ) {
+ var el = sectionHeaders[i];
+ if ( curClosest === null ) {
+ curClosest = el;
+ continue;
+ }
+ if ( el.offsetTop >= topCutoff ) {
+ break;
+ }
+ if ( Math.abs(el.offsetTop - topCutoff) <
Math.abs(curClosest.offsetTop - topCutoff) ) {
+ curClosest = el;
+ }
+ }
+
+ return curClosest.getAttribute( "data-id" );
+}
+
+bridge.registerListener( "requestCurrentSection", function( payload ) {
+ bridge.sendMessage( "currentSectionResponse", { sectionID:
getCurrentSection() } );
+} );
--
To view, visit https://gerrit.wikimedia.org/r/118781
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I430ac436aa15efca359d595041baf40f4f59b353
Gerrit-PatchSet: 1
Gerrit-Project: apps/android/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Yuvipanda <yuvipa...@gmail.com>
Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
