jenkins-bot has submitted this change and it was merged.
Change subject: Alpha: Quickly lookup a brief info about a wiki page
......................................................................
Alpha: Quickly lookup a brief info about a wiki page
Put your finger on a wiki link and quickly swipe horizontally across
the screen. Wait for a drawer to appear with a brief information
about the page. You can then watch that page if you want to read it later.
Change-Id: I39fdd06155cef514f6b2670bc9248d1290bdc146
---
M includes/Resources.php
A javascripts/modules/quickLookup/QuickLookupDrawer.js
A javascripts/modules/quickLookup/init.js
A less/modules/quickLookup.less
A templates/modules/quickLookup/Drawer.hogan
5 files changed, 267 insertions(+), 0 deletions(-)
Approvals:
Kaldari: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index 1eb7cd4..19850d7 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1047,6 +1047,24 @@
),
),
+ 'mobile.quickLookup' => $wgMFResourceParsedMessageModuleBoilerplate +
array(
+ 'dependencies' => array(
+ 'mobile.startup',
+ 'mobile.drawers',
+ 'mobile.toast',
+ ),
+ 'scripts' => array(
+ 'javascripts/modules/quickLookup/QuickLookupDrawer.js',
+ 'javascripts/modules/quickLookup/init.js',
+ ),
+ 'templates' => array(
+ 'Drawer.hogan' =>
'templates/modules/quickLookup/Drawer.hogan',
+ ),
+ 'styles' => array(
+ 'less/modules/quickLookup.less',
+ ),
+ ),
+
'mobile.languages' => $wgMFResourceParsedMessageModuleBoilerplate +
array(
'dependencies' => array(
'mobile.overlays',
@@ -1630,6 +1648,7 @@
'mobile.fontchanger',
'mobile.errorReport',
'mobile.otherProjects',
+ 'mobile.quickLookup',
),
'scripts' => array(
'javascripts/modules/commonsCategory/init.js',
diff --git a/javascripts/modules/quickLookup/QuickLookupDrawer.js
b/javascripts/modules/quickLookup/QuickLookupDrawer.js
new file mode 100644
index 0000000..0bb3203
--- /dev/null
+++ b/javascripts/modules/quickLookup/QuickLookupDrawer.js
@@ -0,0 +1,107 @@
+( function ( M, $ ) {
+ var Icon = M.require( 'Icon' ),
+ Drawer = M.require( 'Drawer' ),
+ user = M.require( 'user' ),
+ Page = M.require( 'Page' ),
+ QuickLookupDrawer;
+
+ /**
+ * Drawer for showing a brief information about a page.
+ * If the user is logged in, the user will see a watchstar too so that
they
+ * can (un)watch the page.
+ * @inheritdoc
+ * @class QuickLookupDrawer
+ * @extends Drawer
+ */
+ QuickLookupDrawer = Drawer.extend( {
+ /**
+ * @inheritdoc
+ * @cfg {Object} defaults Default options hash.
+ * @cfg {String} defaults.cancelButton HTML of the button that
closes the drawer.
+ * @cfg {String} defaults.title title of the page
+ * @cfg {String} defaults.text text of the page
+ * @cfg {String} defaults.id ID of the page
+ */
+ defaults: {
+ cancelButton: new Icon( {
+ tagName: 'a',
+ name: 'cancel-light',
+ additionalClassNames: 'cancel',
+ label: mw.msg( 'mobile-frontend-overlay-close' )
+ } ).toHtmlString(),
+ title: '',
+ text: '',
+ id: ''
+ },
+ /**
+ * @inheritdoc
+ */
+ className: Drawer.prototype.className + ' quick-lookup',
+ /**
+ * @inheritdoc
+ */
+ template: mw.template.get( 'mobile.quickLookup', 'Drawer.hogan'
),
+ /**
+ * @inheritdoc
+ */
+ closeOnScroll: false,
+ /**
+ * @inheritdoc
+ */
+ postRender: function ( options ) {
+ var self = this,
+ windowHeight = $( window ).height();
+
+ Drawer.prototype.postRender.apply( this, arguments );
+
+ // make sure the drawer doesn't take up more than 50%
of the viewport height
+ if ( windowHeight / 2 < 400 ) {
+ this.$el.css( 'max-height', windowHeight / 2 );
+ }
+
+ this.on( 'show', $.proxy( this, 'onShow' ) );
+ this.on( 'hide', $.proxy( this, 'onHide' ) );
+
+ // add watchstar
+ if ( !user.isAnon() ) {
+ mw.loader.using( 'mobile.watchstar', function
() {
+ var Watchstar = M.require(
'modules/watchstar/Watchstar' ),
+ WatchstarApi = M.require(
'modules/watchstar/WatchstarApi' ),
+ watchstarApi,
+ page;
+
+ watchstarApi = new WatchstarApi();
+ watchstarApi.load( [ options.id ],
false ).done( function () {
+ page = new Page( {
+ sections: [], // Set
sections so we don't hit the api (hacky)
+ title: options.title,
+ id: options.id
+ } );
+
+ new Watchstar( {
+ isAnon: false,
+ isWatched:
watchstarApi.isWatchedPage( page ),
+ page: page,
+ el: $( '<a>'
).insertBefore( self.$el.find( 'h3' ) )
+ } );
+ } );
+ } );
+ }
+ },
+ /**
+ * Make body not scrollable
+ */
+ onShow: function () {
+ $( 'body' ).addClass( 'drawer-enabled' );
+ },
+ /**
+ * Restore body scroll
+ */
+ onHide: function () {
+ $( 'body' ).removeClass( 'drawer-enabled' );
+ this.$el.detach();
+ }
+ } );
+
+ M.define( 'modules/quickLookup/QuickLookupDrawer', QuickLookupDrawer );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/quickLookup/init.js
b/javascripts/modules/quickLookup/init.js
new file mode 100644
index 0000000..88c5598
--- /dev/null
+++ b/javascripts/modules/quickLookup/init.js
@@ -0,0 +1,106 @@
+( function ( M, $ ) {
+ M.require( 'context' ).assertMode( [ 'alpha' ] );
+
+ var api = M.require( 'api' ),
+ toast = M.require( 'toast' ),
+ QuickLookupDrawer = M.require(
'modules/quickLookup/QuickLookupDrawer' ),
+ hostname = window.location.hostname,
+ cache = {},
+ drawer,
+ startTouch,
+ endTouch;
+
+ /**
+ * Search API for a brief intro about a page.
+ * @param {String} title title of the page
+ */
+ function lookup( title ) {
+ var deferred = $.Deferred(),
+ promise = deferred.promise();
+
+ if ( cache.hasOwnProperty( title ) ) {
+ if ( cache[title] ) {
+ deferred.resolve( cache[title] );
+ } else {
+ deferred.reject();
+ }
+ } else {
+ api.get( {
+ prop: 'extracts',
+ exsentences: 5,
+ titles: title,
+ exintro: '',
+ continue: '',
+ explaintext: ''
+ } ).then( function ( data ) {
+ var pages = OO.getProp( data, 'query', 'pages'
),
+ pageID,
+ extract;
+
+ cache[title] = null; // just to mark that we
searched the API
+ if ( pages ) {
+ for ( pageID in pages ) {
+ if ( pages.hasOwnProperty(
pageID ) ) {
+ extract = OO.getProp(
pages, pageID, 'extract' );
+ if ( extract ) {
+ cache[title] = {
+ title:
title,
+ text:
extract,
+ id:
pageID
+ };
+
deferred.resolve( cache[title] );
+ break;
+ }
+ }
+ }
+ }
+ if ( cache[title] === null ) {
+ deferred.reject();
+ }
+ } ).fail( deferred.reject );
+ }
+
+ return promise;
+ }
+
+ /**
+ * Show a QuickLookupDrawer with information about {link}
+ * Link must have the same hostname as the site, i.e. it must be an
internal link.
+ * Show a toast before searching and a drawer with page info after the
search is successful.
+ * @param {DOM.Object} link DOM element in which we are interested
+ */
+ function showDrawer( link ) {
+ var title = $( link ).text();
+
+ toast.hide();
+ if ( drawer ) {
+ drawer.hide();
+ }
+
+ if ( link.hostname === hostname ) {
+ toast.show( 'Looking for <b>' + title + '</b>...',
'toast quick-lookup' );
+ lookup( title ).done( function ( page ) {
+ toast.hide();
+ drawer = new QuickLookupDrawer( page );
+ drawer.show();
+ } ).fail( function () {
+ toast.show( 'Couldn\'t find anything matching
<b>' + title + '</b>.', 'toast quick-lookup' );
+ } );
+ } else {
+ toast.show( 'Sorry, only internal links are
searchable.', 'toast quick-lookup' );
+ }
+ }
+
+ $( function () {
+ // Detect if the user is making a long horizontal swipe (which
starts at the link) over a link
+ $( 'a' ).on( 'touchstart', function ( ev ) {
+ startTouch = ev.originalEvent.changedTouches[0];
+ } ).on( 'touchend', function ( ev ) {
+ endTouch = ev.originalEvent.changedTouches[0];
+ // we want a long horizontal swipe
+ if ( Math.abs( startTouch.pageX - endTouch.pageX ) >
200 ) {
+ showDrawer( ev.currentTarget );
+ }
+ } );
+ } );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/quickLookup.less b/less/modules/quickLookup.less
new file mode 100644
index 0000000..5edecc2
--- /dev/null
+++ b/less/modules/quickLookup.less
@@ -0,0 +1,32 @@
+@quickLookupDrawerPadding: 20px;
+
+@extraPadding: 1em;
+.alpha {
+ &.drawer-enabled {
+ overflow: hidden;
+ }
+ .drawer.quick-lookup {
+ max-height: 400px; // or half of window height, whichever is
smaller (see QuickLookupDrawer.js)
+ overflow-y: auto;
+ padding: @quickLookupDrawerPadding;
+
+ .watch-this-article,
+ .cancel {
+ cursor: pointer;
+ padding: @extraPadding 0;
+ position: absolute;
+ top: @quickLookupDrawerPadding;
+ }
+ .watch-this-article {
+ left: @quickLookupDrawerPadding;
+ margin: -@extraPadding 0 -@extraPadding -@extraPadding;
+ }
+
+ // FIXME: combine this rule with a similar rule in
references.less into a shared rule
+ .cancel {
+ font-size: 0.8em; // we want a smaller icon
+ margin: -@extraPadding -@extraPadding -@extraPadding 0;
+ right: @quickLookupDrawerPadding;
+ }
+ }
+}
diff --git a/templates/modules/quickLookup/Drawer.hogan
b/templates/modules/quickLookup/Drawer.hogan
new file mode 100644
index 0000000..26525e0
--- /dev/null
+++ b/templates/modules/quickLookup/Drawer.hogan
@@ -0,0 +1,3 @@
+<h3>{{{title}}}</h3>
+{{{cancelButton}}}
+<p>{{{text}}}</p>
--
To view, visit https://gerrit.wikimedia.org/r/195818
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I39fdd06155cef514f6b2670bc9248d1290bdc146
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
