Robmoen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/159393
Change subject: WIP: Animate suggestions
......................................................................
WIP: Animate suggestions
todo:
- struture suggestion container in a wrapper with overflow hidden
- animate suggestions container with js vs css transform for
browser compatibility
- style suggestion pages to be 100% width of the flyout with padding
to effectively hide ajacent suggestion page
Change-Id: I3c9a2bc771fe524c4aade56aace64abe5400dea2
---
M resources/lightbulb/lightbulb.flyout.js
M resources/lightbulb/lightbulb.flyout.less
2 files changed, 51 insertions(+), 16 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted
refs/changes/93/159393/1
diff --git a/resources/lightbulb/lightbulb.flyout.js
b/resources/lightbulb/lightbulb.flyout.js
index 6fb5f82..73cdd1f 100644
--- a/resources/lightbulb/lightbulb.flyout.js
+++ b/resources/lightbulb/lightbulb.flyout.js
@@ -6,8 +6,8 @@
'<div class="mw-gettingstarted-lightbulb-flyout
guider">\
<h1
class="mw-gettingstarted-lightbulb-flyout-heading"></h1>\
<p
class="mw-gettingstarted-lightbulb-flyout-text"></p>\
- <ol
class="mw-gettingstarted-lightbulb-suggestions">\
- </ol>\
+ <div
class="mw-gettingstarted-lightbulb-suggestions-container">\
+ </div>\
<div
class="mw-gettingstarted-lightbulb-flyout-pagination">\
<button class="mw-ui-button
mw-gettingstarted-lightbulb-flyout-pagination-button-icon
mw-gettingstarted-lightbulb-flyout-back"></button>\
<button class="mw-ui-button
mw-gettingstarted-lightbulb-flyout-pagination-button-icon
mw-gettingstarted-lightbulb-flyout-next"></button>\
@@ -86,18 +86,17 @@
/**
* Returns a click handler for a pagination disc
*
- * @param {jQuery} $flyout jQuery set for flyout
* @param {Array} suggestions Full list of suggestions
* @param {Number} index Index of page this disc refers to
* @param {Number} pageCount Number of pages
*
* @return {Function} Click handler
*/
- function getPaginationDiscHandler( $flyout, suggestions, index,
pageCount ) {
+ function getPaginationDiscHandler( suggestions, index, pageCount ) {
return function () {
if ( index !== currentFlyoutPageIndex ) {
currentFlyoutPageIndex = index;
- renderFlyoutPage( $flyout, suggestions,
currentFlyoutPageIndex, pageCount );
+ showFlyoutPage( suggestions,
currentFlyoutPageIndex, pageCount );
}
};
}
@@ -119,7 +118,7 @@
.attr( 'title', mw.msg(
'gettingstarted-lightbulb-flyout-back' ) )
.click( function () {
currentFlyoutPageIndex--;
- renderFlyoutPage( suggestions,
currentFlyoutPageIndex, pageCount );
+ showFlyoutPage( suggestions,
currentFlyoutPageIndex, pageCount );
} );
@@ -128,24 +127,26 @@
.attr( 'title', mw.msg(
'gettingstarted-lightbulb-flyout-next' ) )
.click( function () {
currentFlyoutPageIndex++;
- renderFlyoutPage( suggestions,
currentFlyoutPageIndex, pageCount );
+ showFlyoutPage( suggestions,
currentFlyoutPageIndex, pageCount );
} );
+
if ( pageCount > 1 ) {
for ( i = 0; i < pageCount; i++ ) {
- discHandler = getPaginationDiscHandler(
$flyout, suggestions, i, pageCount );
+ discHandler = getPaginationDiscHandler(
suggestions, i, pageCount );
$( '<span> ' )
.attr( 'class',
'mw-gettingstarted-lightbulb-flyout-pagination-disc' )
.text( '●' )
.insertBefore( $nextButton )
.on( 'click', discHandler );
+ renderFlyoutPage( suggestions, i, pageCount );
}
} else {
$pagination.hide();
}
currentFlyoutPageIndex = 0;
- renderFlyoutPage( suggestions, currentFlyoutPageIndex,
pageCount );
+ showFlyoutPage( suggestions, currentFlyoutPageIndex, pageCount
);
}
/**
@@ -185,13 +186,11 @@
* @param {Number} pageIndex Page index to show, 0-based
* @param {Number} pageCount Number of pages
*/
- function renderFlyoutPage( suggestions, pageIndex, pageCount ) {
- var $suggestions = $flyout.find(
'.mw-gettingstarted-lightbulb-suggestions' ),
+ function renderFlyoutPage( suggestions, pageIndex ) {
+ var $suggestions = $flyout.find(
'.mw-gettingstarted-lightbulb-suggestions-container' ),
$newSuggestions = $( '<ol>' ).attr( 'class',
'mw-gettingstarted-lightbulb-suggestions' ),
suggestion,
$suggestion,
- $prevButton,
- $nextButton,
suggestionStartIndex = pageIndex *
MAX_SUGGESTION_PER_PAGE_COUNT,
$li,
i;
@@ -212,19 +211,41 @@
$flyout.find( '.mw-gettingstarted-lightbulb-flyout-pagination' )
.show();
+
+
+ $suggestions.append( $newSuggestions );
+
+
+ }
+
+ /**
+ * Puts a particular page in the flyout into view
+ *
+ * @param {Array} suggestions Full list of suggestions
+ * @param {Number} pageIndex Page index to show, 0-based
+ * @param {Number} pageCount Number of pages
+ */
+ function showFlyoutPage( suggestions, pageIndex, pageCount ) {
+ var offset = - ( pageIndex * 100 );
+
+ console.log( 'show page', pageIndex, offset );
+
// There can be 0 discs, in which case this is a noop.
$flyout.find(
'.mw-gettingstarted-lightbulb-flyout-pagination-disc' )
.removeClass(
'mw-gettingstarted-lightbulb-flyout-selected-page' )
.eq( pageIndex )
.addClass(
'mw-gettingstarted-lightbulb-flyout-selected-page' );
- $prevButton = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-back' )
+ // Setup back and next buttons
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-back' )
.prop( 'disabled', pageIndex === 0 );
- $nextButton = $flyout.find(
'.mw-gettingstarted-lightbulb-flyout-next' )
+ $flyout.find( '.mw-gettingstarted-lightbulb-flyout-next' )
.prop( 'disabled', pageIndex === ( pageCount - 1 ) );
- $suggestions.replaceWith( $newSuggestions );
+ // Slide into view
+ $flyout.find(
'.mw-gettingstarted-lightbulb-suggestions-container' )
+ .css( 'transform', 'translate3d(' + offset + '%, 0, 0)'
);
// Log Impression
mw.eventLog.logEvent( 'TaskRecommendationImpression', {
diff --git a/resources/lightbulb/lightbulb.flyout.less
b/resources/lightbulb/lightbulb.flyout.less
index 4c37f0b..cc17e8e 100644
--- a/resources/lightbulb/lightbulb.flyout.less
+++ b/resources/lightbulb/lightbulb.flyout.less
@@ -85,7 +85,21 @@
cursor: default;
}
+.mw-gettingstarted-lightbulb-suggestions-container {
+ position: relative;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -ms-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ transition: all .3s ease-in-out;
+ white-space: nowrap;
+}
+
.mw-gettingstarted-lightbulb-suggestions {
+ width: 100%;
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
list-style-type: none;
margin: 0;
padding: 0;
--
To view, visit https://gerrit.wikimedia.org/r/159393
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3c9a2bc771fe524c4aade56aace64abe5400dea2
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
