Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/182334
Change subject: WIP: Refactor Nearby as an Overlay
......................................................................
WIP: Refactor Nearby as an Overlay
* Make it use the overlay manager
* Make it non-dependant on the special page
TODO:
* Make it possible to scroll as well as work well with the left nav menu in
Minerva. Clicking nearby
in menu should also close the main menu (probably every route should do that)
* Show the title 'Nearby' in the body content (hide the heading of the current
page you are on)
* Exceptions on Special:Nearby (because of position:top ?)
* Check back behaviour of clicking articles
* Hack the refresh icon
* Maybe make beta only?
Change-Id: Icb9c5946b07b07e4996bb5ed96b2702a8e53d4b8
---
M includes/Resources.php
M includes/skins/MinervaTemplateAlpha.php
M includes/skins/SkinMinerva.php
A javascripts/modules/nearby/NearbyOverlay.js
A javascripts/modules/nearby/init.js
M javascripts/specials/nearby.js
R less/modules/images/refresh.png
A less/modules/nearby.less
M less/specials/nearby.less
9 files changed, 141 insertions(+), 114 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/34/182334/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 6427256..622c836 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -664,9 +664,7 @@
'LoadingOverlay.hogan' =>
'templates/LoadingOverlay.hogan',
'OverlayFooterLink.hogan' =>
'templates/OverlayFooterLink.hogan',
),
- 'styles' => array(
- 'less/Overlay.less',
- )
+ // styles defined for Minerva only in wgResourceModuleSkinStyles
),
'mobile.drawers' => $wgMFResourceFileModuleBoilerplate + array(
@@ -906,6 +904,7 @@
'mediawiki.language',
'mobile.templates',
'mobile.loggingSchemas',
+ 'mobile.overlays',
'mobile.pagelist.scripts',
),
'messages' => array(
@@ -924,10 +923,15 @@
'mobile-frontend-nearby-lookup-ui-error-guidance',
'mobile-frontend-nearby-permission',
'mobile-frontend-nearby-permission-guidance',
+ 'mobile-frontend-nearby-refresh',
+ ),
+ 'styles' => array(
+ 'less/modules/nearby.less',
),
'scripts' => array(
'javascripts/modules/nearby/NearbyApi.js',
'javascripts/modules/nearby/Nearby.js',
+ 'javascripts/modules/nearby/NearbyOverlay.js',
),
'templates' => array(
'Nearby.hogan' =>
'templates/modules/nearby/nearby.hogan',
@@ -1216,10 +1220,7 @@
'mobile.special.nearby.scripts' => $wgMFResourceFileModuleBoilerplate +
array(
'dependencies' => array(
- 'mobile.nearby',
- ),
- 'messages' => array(
- 'mobile-frontend-nearby-refresh',
+ 'mobile.stable',
),
'scripts' => array(
'javascripts/specials/nearby.js',
@@ -1409,6 +1410,7 @@
'javascripts/externals/micro.autosize.js',
'javascripts/modules/mediaViewer/init.js',
'javascripts/modules/languages/init.js',
+ 'javascripts/modules/nearby/init.js',
),
),
'mobile.beta' => $wgMFResourceFileModuleBoilerplate + array(
@@ -1451,4 +1453,7 @@
// Module customizations
$wgResourceModuleSkinStyles['minerva'] = $wgMFResourceBoilerplate + array(
'mediawiki.skinning.content.parsoid' => array(),
+ 'mobile.overlays' => array(
+ 'less/Overlay.less',
+ ),
);
diff --git a/includes/skins/MinervaTemplateAlpha.php
b/includes/skins/MinervaTemplateAlpha.php
index cf4b867..abc4c19 100644
--- a/includes/skins/MinervaTemplateAlpha.php
+++ b/includes/skins/MinervaTemplateAlpha.php
@@ -59,7 +59,7 @@
return array(
'nearby' => array(
'attributes' => array(
- 'href' => SpecialPage::getTitleFor(
'Nearby' )->getLocalUrl() . '#/page/' . $title->getText(),
+ 'href' => '#/nearby/page/' .
$title->getText(),
'class' => 'nearby-button',
),
'label' => wfMessage(
'mobile-frontend-nearby-sectiontext' )->text()
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 37f197a..78be190 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -438,11 +438,12 @@
),
),
),
+ // FIXME: Add using JavaScript - useless without
JavaScript.
'nearby' => array(
'links' => array(
array(
'text' => wfMessage(
'mobile-frontend-main-menu-nearby' )->escaped(),
- 'href' =>
SpecialPage::getTitleFor( 'Nearby' )->getLocalURL(),
+ 'href' => '#/nearby',
'class' => MobileUI::iconClass(
'nearby', 'before', 'nearby' ),
),
),
diff --git a/javascripts/modules/nearby/NearbyOverlay.js
b/javascripts/modules/nearby/NearbyOverlay.js
new file mode 100644
index 0000000..16e9cd0
--- /dev/null
+++ b/javascripts/modules/nearby/NearbyOverlay.js
@@ -0,0 +1,49 @@
+( function ( M, $ ) {
+ var NearbyOverlay,
+ Overlay = M.require( 'Overlay' ),
+ Icon = M.require( 'Icon' ),
+ refreshIcon = new Icon( {
+ name: 'refresh',
+ label: mw.msg( 'mobile-frontend-nearby-refresh' ),
+ additionalClassNames: 'main-header-button refresh'
+ } ),
+ Nearby = M.require( 'modules/nearby/Nearby' );
+
+ /**
+ * Displays images in full screen overlay
+ * @class NearbyOverlay
+ * @extends Overlay
+ */
+ NearbyOverlay = Overlay.extend( {
+ // FIXME: ergg... desktop compatibility, ui standardisation etc
+ appendTo: mw.config.get( 'skin' ) === 'minerva' ?
'#mw-mf-page-center' : '#bodyContent',
+ className: 'overlay nearby-overlay',
+ events: {
+ // Click tracking for table of contents so we can see
if people interact with it
+ 'click .refresh': 'onRefreshLocation',
+ },
+ /**
+ * Refresh the current view using browser geolocation api
+ * @ignore
+ */
+ onRefreshLocation: function () {
+ this.refresh();
+ },
+ postRender: function( options ) {
+ this.$content = this.$( '.overlay-content' );
+ if ( options.useCurrentLocation ) {
+ refreshIcon.insertBefore( this.$content );
+ }
+ Overlay.prototype.postRender.apply( this, arguments );
+ this.refresh();
+ },
+ refresh: function() {
+ var nearbyOptions = $.extend( {}, this.options, {
+ el: this.$content
+ } );
+ new Nearby( nearbyOptions );
+ }
+ } );
+ M.define( 'modules/nearby/NearbyOverlay', NearbyOverlay );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/nearby/init.js
b/javascripts/modules/nearby/init.js
new file mode 100644
index 0000000..fd7eadc
--- /dev/null
+++ b/javascripts/modules/nearby/init.js
@@ -0,0 +1,34 @@
+( function ( M, $ ) {
+ function fetchOverlay( options ) {
+ var d = $.Deferred();
+
+ mw.loader.using( 'mobile.nearby' ).done( function() {
+ var NearbyOverlay = M.require(
'modules/nearby/NearbyOverlay' );
+
+ // wait for DOM to have loaded before attempting to
render
+ $( function() {
+ d.resolve( new NearbyOverlay( options ) );
+ } );
+ } );
+ return d;
+ }
+
+ M.overlayManager.add( /^\/nearby$/, function () {
+ return fetchOverlay( {
+ useCurrentLocation: true
+ } );
+ } );
+
+ M.overlayManager.add( /^\/nearby\/page\/(.+)$/, function ( title ) {
+ return fetchOverlay( {
+ pageTitle: title
+ } );
+ } );
+
+ M.overlayManager.add(
/^\/nearby\/coord\/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/, function ( lat, lon ) {
+ return fetchOverlay( {
+ latitude: lat,
+ longitude: lon
+ } );
+ } );
+}( mw.mobileFrontend, jQuery ) );
\ No newline at end of file
diff --git a/javascripts/specials/nearby.js b/javascripts/specials/nearby.js
index 66f1136..4a62de3 100644
--- a/javascripts/specials/nearby.js
+++ b/javascripts/specials/nearby.js
@@ -1,89 +1,4 @@
-( function ( M, $ ) {
- var Icon = M.require( 'Icon' ),
- Nearby = M.require( 'modules/nearby/Nearby' );
-
- $( function () {
- var
- nearby,
- options = {
- el: $( '#mw-mf-nearby' )
- },
- $btn = $( '#secondary-button' ),
- icon, $icon;
-
- // Remove user button
- if ( $btn.length ) {
- $btn.remove();
- }
-
- // Create refresh button on the header
- icon = new Icon( {
- name: 'refresh',
- id: 'secondary-button',
- additionalClassNames: 'main-header-button',
- tagName: 'a',
- title: mw.msg( 'mobile-frontend-nearby-refresh' ),
- label: mw.msg( 'mobile-frontend-nearby-refresh' )
- } );
- $icon = $( icon.toHtmlString() ).on( 'click',
refreshCurrentLocation ).appendTo( '.header' );
-
- /**
- * Initialize or instantiate Nearby with options
- * @method
- * @ignore
- * @param {Object} options
- */
- function refresh( options ) {
- if ( nearby ) {
- nearby.initialize( options );
- } else {
- nearby = new Nearby( options );
- }
- }
-
- // Routing on the nearby view
-
- /*
- * #/coords/lat,long
- */
- M.router.route(
/^\/coord\/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/, function ( lat, lon ) {
- $icon.hide();
- // Search with coordinates
- refresh( $.extend( {}, options, {
- latitude: lat,
- longitude: lon
- } ) );
- } );
-
- /*
- * #/page/PageTitle
- */
- M.router.route( /^\/page\/(.+)$/, function ( pageTitle ) {
- $icon.hide();
- refresh( $.extend( {}, options, {
- pageTitle: pageTitle
- } ) );
- } );
-
- /**
- * Refresh the current view using browser geolocation api
- * @ignore
- */
- function refreshCurrentLocation() {
- $icon.show();
- refresh( $.extend( {}, options, {
- useCurrentLocation: true
- } ) );
- }
-
- /*
- * Anything else search with current location
- * FIXME: The regex has to negate the rest of the routes
because every time we
- * define a route with router.route that route gets matched
against the
- * current hash.
- */
- M.router.route( /^(?!.coord|.page).*$/, refreshCurrentLocation
);
-
- } );
-
-}( mw.mobileFrontend, jQuery ) );
+( function () {
+ // For desktop and backwards compatibility
+ window.location.hash = '#/nearby';
+}() );
diff --git a/less/specials/images/refresh.png b/less/modules/images/refresh.png
similarity index 100%
rename from less/specials/images/refresh.png
rename to less/modules/images/refresh.png
Binary files differ
diff --git a/less/modules/nearby.less b/less/modules/nearby.less
new file mode 100644
index 0000000..dae2cea
--- /dev/null
+++ b/less/modules/nearby.less
@@ -0,0 +1,39 @@
+@import "minerva.variables";
+@import "minerva.mixins";
+
+.nearby-overlay {
+ background: transparent;
+ margin-top: @headerHeight;
+
+ .overlay-header-container {
+ display: none;
+ }
+
+ .refresh {
+ right: 0;
+ position: absolute;
+ top: -@headerHeight;
+ width: @headerHeight;
+ height: @headerHeight;
+ }
+
+ .page-list {
+ // Give page-list a top border since page doesn't have a
content-header
+ border-top: 1px solid @grayLightest;
+
+ li {
+ .proximity {
+ font-size: .8em;
+ text-transform: none;
+ }
+ }
+ }
+
+ .overlay-content {
+ background-color: white;
+ }
+}
+
+.icon-refresh {
+ .background-image('images/refresh.png');
+}
diff --git a/less/specials/nearby.less b/less/specials/nearby.less
index ea48af1..4ff4fcf 100644
--- a/less/specials/nearby.less
+++ b/less/specials/nearby.less
@@ -1,22 +1,6 @@
@import "minerva.variables";
@import "minerva.mixins";
-.page-list {
- // Give page-list a top border since page doesn't have a content-header
- border-top: 1px solid @grayLightest;
-
- li {
- .proximity {
- font-size: .8em;
- text-transform: none;
- }
- }
-}
-
-.icon-refresh {
- .background-image('images/refresh.png');
-}
-
.client-js {
// note this also means non-ResourceLoader enabled browsers hence not
using tag
.noscript {
--
To view, visit https://gerrit.wikimedia.org/r/182334
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icb9c5946b07b07e4996bb5ed96b2702a8e53d4b8
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
