Jdlrobson has uploaded a new change for review. https://gerrit.wikimedia.org/r/63149
Change subject: Add refresh button to nearby ...................................................................... Add refresh button to nearby In alpha animate it when clicked Note asset will change but for time being using http://thenounproject.com/noun/refresh/#icon-No4985 Change-Id: I36758885d91e0afc08ff80f46c423545e4c35e28 --- M javascripts/common/mf-navigation.js M javascripts/specials/nearby.js M less/mf-mixins.less M less/specials/nearby.less A stylesheets/specials/images/refresh.png M stylesheets/specials/nearby.css 6 files changed, 114 insertions(+), 25 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/49/63149/1 diff --git a/javascripts/common/mf-navigation.js b/javascripts/common/mf-navigation.js index 85fa4cc..9541c3f 100644 --- a/javascripts/common/mf-navigation.js +++ b/javascripts/common/mf-navigation.js @@ -101,7 +101,7 @@ } ); function getPageMenu() { - return $( '#mw-mf-menu-page' )[ 0 ]; + return $( '#mw-mf-menu-page' ); } function enableEditing( title ) { diff --git a/javascripts/specials/nearby.js b/javascripts/specials/nearby.js index f54ae2f..06c4dd1 100644 --- a/javascripts/specials/nearby.js +++ b/javascripts/specials/nearby.js @@ -1,6 +1,5 @@ ( function( M, $ ) { var CACHE_KEY_RESULTS = 'mfNearbyLastSearchResult', - PRECISION = 2, CACHE_KEY_LAST_LOCATION = 'mfNearbyLastKnownLocation'; ( function() { @@ -8,7 +7,6 @@ popup = M.require( 'notifications' ), View = M.require( 'view' ), endpoint = mw.config.get( 'wgMFNearbyEndpoint' ), - cachedPages, curLocation, lastKnownLocation = M.settings.getUserSetting( CACHE_KEY_LAST_LOCATION ), cache = M.settings.saveUserSetting, @@ -19,6 +17,7 @@ this.emit( 'done', this ); } } ), + pendingQuery = false, overlay = new Nearby( { el: $( '#mw-mf-nearby' ) } ); @@ -130,20 +129,9 @@ } ).done( function( data ) { var pages = $.map( data.query.pages, function( i ) { return i; - } ), $popup; + } ); if ( pages.length > 0 ) { - if ( !cachedPages ) { - render( $content, pages ); - } else { - $popup = popup.show( - mw.message( 'mobile-frontend-nearby-refresh' ).plain(), 'toast locked' ); - $popup.click( function() { - render( $content, pages ); - popup.close( true ); - } ); - } - - cachedPages = pages; + render( $content, pages ); } else { $content.empty(); $( '<div class="empty content">' ). @@ -155,27 +143,39 @@ } ); } + function cancelRefresh() { + $( 'button.refresh' ).removeClass( 'refreshing' ); + pendingQuery = false; + } + function init() { var $content = $( '#mw-mf-nearby' ).empty(); $( '<div class="content loading"> ').text( mw.message( 'mobile-frontend-nearby-loading' ) ).appendTo( $content ); - navigator.geolocation.watchPosition( function( geo ) { + navigator.geolocation.getCurrentPosition( function( geo ) { var lat = geo.coords.latitude, lng = geo.coords.longitude; - if ( curLocation && lat.toFixed( PRECISION ) === curLocation.latitude.toFixed( PRECISION ) && - lng.toFixed( PRECISION ) === curLocation.longitude.toFixed( PRECISION ) ) { // bug 47898 - return; - } else { - curLocation = { latitude: lat, longitude: lng }; // save as json so it can be cached bug 48268 - cache( CACHE_KEY_LAST_LOCATION, $.toJSON( curLocation ) ); - findResults( lat, lng ); - } + curLocation = { latitude: lat, longitude: lng }; // save as json so it can be cached bug 48268 + cache( CACHE_KEY_LAST_LOCATION, $.toJSON( curLocation ) ); + findResults( lat, lng ); + cancelRefresh(); }, function() { popup.show( mw.message( 'mobile-frontend-nearby-lookup-error' ).plain(), 'toast' ); + cancelRefresh(); }, { enableHighAccuracy: true } ); + } + + function refresh() { + if ( pendingQuery ) { + return; + } else { + $( 'button.refresh' ).addClass( 'refreshing' ); + pendingQuery = true; + init(); + } } if ( supported ) { @@ -190,6 +190,9 @@ render( $( '#content' ), $.parseJSON( lastSearchResult ) ); } } + + $( '<button class="refresh">refresh</button></li>' ).on( 'click', refresh ).appendTo( 'h1' ); + M.define( 'nearby', { distanceMessage: distanceMessage, endpoint: endpoint, diff --git a/less/mf-mixins.less b/less/mf-mixins.less index de824e2..5005072 100644 --- a/less/mf-mixins.less +++ b/less/mf-mixins.less @@ -104,3 +104,8 @@ -webkit-transition-timing-function: @timingFunction; transition-timing-function: @timingFunction; } + +.animate( @name, @duration: 1s, @iteration-count: infinite, @function: linear ) { + -webkit-animation: @name @duration @iteration-count @function; + animation: @name @duration @iteration-count; +} diff --git a/less/specials/nearby.less b/less/specials/nearby.less index efa29a1..9222152 100644 --- a/less/specials/nearby.less +++ b/less/specials/nearby.less @@ -15,3 +15,46 @@ } } } + +.header { + .refresh { + background: rgba(0, 0, 0, 0) url(images/refresh.png) no-repeat center center; + margin: 0; + text-indent: -9999px; + overflow: hidden; + width: 24px; + background-size: 24px 25px; + border: none; + float: right; + &:after { + content: ""; + clear: both; + } + } +} + +@-webkit-keyframes infinite-spin { + from { + .transform( rotate(0deg) ); + } + + to { + .transform( rotate(360deg) ); + } +} + +@keyframes infinite-spin { + from { + .transform( rotate(0deg) ); + } + + to { + .transform( rotate(360deg) ); + } +} + +.transforms .alpha { + .refreshing { + .animate( infinite-spin, 0.5s, infinite, linear ); + } +} diff --git a/stylesheets/specials/images/refresh.png b/stylesheets/specials/images/refresh.png new file mode 100644 index 0000000..298a8ab --- /dev/null +++ b/stylesheets/specials/images/refresh.png Binary files differ diff --git a/stylesheets/specials/nearby.css b/stylesheets/specials/nearby.css index 5ff3c6a..4b21ce9 100644 --- a/stylesheets/specials/nearby.css +++ b/stylesheets/specials/nearby.css @@ -8,3 +8,41 @@ font-size: .8em; text-transform: none; } +.header .refresh { + background: rgba(0, 0, 0, 0) url(images/refresh.png) no-repeat center center; + margin: 0; + text-indent: -9999px; + overflow: hidden; + width: 24px; + background-size: 24px 25px; + border: none; + float: right; +} +.header .refresh:after { + content: ""; + clear: both; +} +@-webkit-keyframes infinite-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes infinite-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +.transforms .alpha .refreshing { + -webkit-animation: infinite-spin 0.5s infinite linear; + animation: infinite-spin 0.5s infinite; +} -- To view, visit https://gerrit.wikimedia.org/r/63149 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I36758885d91e0afc08ff80f46c423545e4c35e28 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
