Page MenuHomePhabricator

mobile-html related pages footer handling
Open, NormalPublic

Description

Background information

The apps display related articles in the footer of each article. It should be possible to append this footer via a js function call in mobile-html articles.

What

Something along the lines of window.wmf.fetchAndAppendRelatedPages(), params TBD

How

js on the page requests related pages and appends them to the article footer

Open questions

Once the related pages are fetched, the mobile-html js would have to have a way to ask the apps whether or not the user has that article saved to display the appropriate bookmark state. It would also need to communicate save/unsave events when the user taps the save/unsave button.

Event Timeline

JoeWalsh created this task.Feb 28 2019, 5:27 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 28 2019, 5:27 PM
JoeWalsh added a subscriber: bearND.Mar 1 2019, 5:03 PM

@bearND I was thinking the interface for this could take two callbacks: wmf.fetchAndAppendRelatedPages(isSavedHandler, saveButtonHandler)

isSavedHandler would be a function that takes a string with an article URL

(articleURL) => { ...native message handling here... }

When receiving the isSavedHandler callback, the app would figure out whether or not that article has been saved by the user, and call:

wmf.setArticleIsSaved(articleURL, isSaved)

saveButtonHandler would be a function that takes a string with an article URL and a boolean with whether or not the user intended to save or unsave the article

(articleURL, isSaved) => { ...native message handling here... }

When receiving the saveButtonHandler callback, the app would save or unsave the article and then call:

wmf.setArticleIsSaved(articleURL, isSaved)

with the correct save state after the action is completed.

In practice on iOS this would look like

wmf.fetchAndAppendRelatedPages((articleURL) => {
    window.webkit.messageHandlers.isSavedHandler.postMessage({"articleURL": articleURL})
},
(articleURL, isSaved) => {
    window.webkit.messageHandlers.savedButtonHandler.postMessage({"articleURL": articleURL, "isSaved": isSaved})
})

Open to other suggestions if this wouldn't work on the JS side or if there's a cleaner way to do it.

bearND added a comment.Mar 5 2019, 4:37 AM

@JoeWalsh I think this should work. Thank you!

Pending discussion with the team, the save button handler part of this could be taken care of by T219998 depending on if it makes more sense to have a single interaction handler or multiple interaction handlers

LGoto triaged this task as Normal priority.Wed, Apr 10, 2:50 PM