Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/159077
Change subject: Add loading state to flyout.
......................................................................
Add loading state to flyout.
Change-Id: Idf091a98e108e577cbc57563c8f8540964b2bfef
TODO: Need to resize lower res gif to 32px
---
A resources/lightbulb/images/ajax-loader-2x.gif
A resources/lightbulb/images/ajax-loader.gif
M resources/lightbulb/lightbulb.flyout.js
M resources/lightbulb/lightbulb.flyout.less
4 files changed, 25 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted
refs/changes/77/159077/1
diff --git a/resources/lightbulb/images/ajax-loader-2x.gif
b/resources/lightbulb/images/ajax-loader-2x.gif
new file mode 100644
index 0000000..c519155
--- /dev/null
+++ b/resources/lightbulb/images/ajax-loader-2x.gif
Binary files differ
diff --git a/resources/lightbulb/images/ajax-loader.gif
b/resources/lightbulb/images/ajax-loader.gif
new file mode 100644
index 0000000..c519155
--- /dev/null
+++ b/resources/lightbulb/images/ajax-loader.gif
Binary files differ
diff --git a/resources/lightbulb/lightbulb.flyout.js
b/resources/lightbulb/lightbulb.flyout.js
index 1701a78..6fb5f82 100644
--- a/resources/lightbulb/lightbulb.flyout.js
+++ b/resources/lightbulb/lightbulb.flyout.js
@@ -23,6 +23,9 @@
<span
class="error-state-button-text"></span>\
</a>\
</div>\
+ <div
class="mw-gettingstarted-lightbulb-flyout-loader">\
+ <div
class="mw-gettingstarted-lightbulb-flyout-loader-spinner"></div>\
+ </div>\
<div class="guider_arrow guider_arrow_up
guider_arrow_center">\
<div
class="guider_arrow_inner_container">\
<div
class="guider_arrow_inner"></div>\
@@ -37,6 +40,7 @@
mwConfig = mw.config.get( [ 'wgArticleId', 'wgUserId' ] ),
$lightbulb = $(
'.mw-gettingstarted-personal-tool-recommendations' ),
$flyout = null,
+ $loader = null,
requestingSuggestions = false;
function renderFlyout() {
@@ -61,9 +65,6 @@
var $icon = $( this ).find(
'.error-state-button-icon' ),
api;
- /* TODO: rmoen 9-3-14 add loading state for
when flyout opens
- and when additional api
requests are made */
-
if ( $icon.hasClass( 'no-edits' ) ) {
api = new mw.gettingStarted.Api();
// Request a random page and go to it
@@ -74,6 +75,7 @@
} else {
// Hide error state and request
suggestions
$flyout.find(
'.mw-gettingstarted-lightbulb-flyout-error-state' ).hide();
+ $loader.show();
requestSuggestions();
}
} );
@@ -303,6 +305,7 @@
*/
function addFlyout() {
$flyout = renderFlyout();
+ $loader = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-loader' );
$lightbulb.on( 'click', function ( event ) {
event.preventDefault();
@@ -335,6 +338,7 @@
function requestSuggestions() {
var api = new mw.gettingStarted.Api();
+ $loader.show();
requestingSuggestions = true;
api.getLastArticleUserEdited( mw.user.getName() )
.done( function ( title ) {
@@ -355,6 +359,7 @@
addErrorStateToFlyout(
'no-recommendations' );
} )
.always( function () {
+ $loader.hide();
showFlyout();
requestingSuggestions = false;
} );
@@ -363,6 +368,7 @@
// show no edit state
addErrorStateToFlyout( 'no-edits' );
requestingSuggestions = false;
+ $loader.hide();
showFlyout();
} );
}
diff --git a/resources/lightbulb/lightbulb.flyout.less
b/resources/lightbulb/lightbulb.flyout.less
index 3cb017f..4c37f0b 100644
--- a/resources/lightbulb/lightbulb.flyout.less
+++ b/resources/lightbulb/lightbulb.flyout.less
@@ -156,6 +156,22 @@
}
+.mw-gettingstarted-lightbulb-flyout-loader {
+ margin: auto;
+ padding: 45px 71px;
+ display: none;
+
+ .mw-gettingstarted-lightbulb-flyout-loader-spinner {
+ margin: auto;
+ width: 32px;
+ height: 32px;
+ background-position: center;
+ background-size: 32px;
+ // Graceful degradation for browsers that don't support
background-size
+ .background-image-svg('images/ajax-loader-2x.gif',
'images/ajax-loader.gif');
+ }
+}
+
// TODO (phuedx, 2014/07/30): Classes like this would simplify the
// GuidedTour library. Create the entire set of classes upstream.
--
To view, visit https://gerrit.wikimedia.org/r/159077
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idf091a98e108e577cbc57563c8f8540964b2bfef
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
