Phuedx has submitted this change and it was merged.
Change subject: Add animation to guiders
......................................................................
Add animation to guiders
Done:
1) up, down, left, right animations defined
2) add setupAnimations method which determines
animation directionality and adds respective class
3) plays nicely with scrolling
4) optimized fade in translate function
5) elements keeps the end state of the animation
Bug: 55771
Change-Id: I0704355573dbd4d345ba04a7fb79dac5819b4935
---
M GuidedTour.php
A modules/ext.guidedTour.animations.less
M modules/mediawiki.libs.guiders/mediawiki.libs.guiders.js
3 files changed, 137 insertions(+), 1 deletion(-)
Approvals:
Phuedx: Looks good to me, approved
diff --git a/GuidedTour.php b/GuidedTour.php
index 7672731..69b9718 100644
--- a/GuidedTour.php
+++ b/GuidedTour.php
@@ -70,7 +70,10 @@
// TODO (mattflaschen, 2013-07-30): When the location of the rendering code
// is decided, this module can be merged to there.
$wgResourceModules['ext.guidedTour.styles'] = array(
- 'styles' => 'ext.guidedTour.less',
+ 'styles' => array(
+ 'ext.guidedTour.less',
+ 'ext.guidedTour.animations.less'
+ ),
'localBasePath' => $dir . 'modules',
'remoteExtPath' => 'GuidedTour/modules',
'dependencies' => array(
diff --git a/modules/ext.guidedTour.animations.less
b/modules/ext.guidedTour.animations.less
new file mode 100644
index 0000000..c1fada0
--- /dev/null
+++ b/modules/ext.guidedTour.animations.less
@@ -0,0 +1,96 @@
+/* animation mixins from core */
+@import "mediawiki.mixins.animation";
+
+.mwe-gt-animation-forward () {
+ /* Leave the element in its final animation state */
+ -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
+ -moz-animation-fill-mode: forwards; /* FF 5+ */
+ -o-animation-fill-mode: forwards; /* not implemented yet */
+ -ms-animation-fill-mode: forwards; /* IE 10+ */
+ animation-fill-mode: forwards; /* when the spec is finished */
+}
+
+.mwe-gt-translate (@x, @y) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
+
+/* fade-in */
+.mwe-gt-fade-in-frames () {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes mwe-gt-fade-in {
+ .mwe-gt-fade-in-frames();
+}
+
+@-moz-keyframes mwe-gt-fade-in {
+ .mwe-gt-fade-in-frames();
+}
+
+@-o-keyframes mwe-gt-fade-in {
+ .mwe-gt-fade-in-frames();
+}
+
+@keyframes mwe-gt-fade-in {
+ .mwe-gt-fade-in-frames();
+}
+
+.mwe-gt-fade-in {
+ .animation(mwe-gt-fade-in 0.3s, ease);
+ .mwe-gt-animation-forward();
+}
+
+/* fade-in-translate-frames */
+.mwe-gt-fade-in-translate-frames (@x, @y) {
+ 0% {
+ opacity: 0;
+ .mwe-gt-translate(@x, @y);
+ }
+
+ 100% {
+ opacity: 1;
+ .mwe-gt-translate(0, 0);
+ }
+}
+
+.fade-in-keyframes-for-direction (@direction, @dx, @dy) {
+ @-webkit-keyframes mwe-gt-fade-in-@{direction} {
+ .mwe-gt-fade-in-translate-frames(@dx, @dy);
+ }
+
+ @-moz-keyframes mwe-gt-fade-in-@{direction} {
+ .mwe-gt-fade-in-translate-frames(@dx, @dy);
+ }
+
+ @-o-keyframes mwe-gt-fade-in-@{direction} {
+ .mwe-gt-fade-in-translate-frames(@dx, @dy);
+ }
+
+ @keyframes mwe-gt-fade-in-@{direction} {
+ .mwe-gt-fade-in-translate-frames(@dx, @dy);
+ }
+
+ .mwe-gt-fade-in-@{direction} {
+ /**
+ * TODO (phuedx, 2014-05-29): 0.3s and ease should be either
generated
+ by another mixin or should be constants.
+ */
+ .animation(~"mwe-gt-fade-in-@{direction}" 0.3s, ease);
+ .mwe-gt-animation-forward();
+ }
+}
+
+.fade-in-keyframes-for-direction(up, 0, 20px);
+.fade-in-keyframes-for-direction(left, 20px, 0);
+.fade-in-keyframes-for-direction(down, 0, -20px);
+.fade-in-keyframes-for-direction(right, -20px, 0);
diff --git a/modules/mediawiki.libs.guiders/mediawiki.libs.guiders.js
b/modules/mediawiki.libs.guiders/mediawiki.libs.guiders.js
index 6ca48f5..54fab5c 100644
--- a/modules/mediawiki.libs.guiders/mediawiki.libs.guiders.js
+++ b/modules/mediawiki.libs.guiders/mediawiki.libs.guiders.js
@@ -527,6 +527,7 @@
}
guiders._styleArrow(myGuider, position);
+ guiders._setupAnimations(myGuider, position);
return myGuider.elem.css(css);
};
@@ -645,6 +646,41 @@
myGuiderArrow.css(arrowPosition[0], arrowPosition[1] + 'px');
// TODO: experiment with pulsing
//myGuiderArrow.css(position[0], position[1] +
"px").stop().pulse({backgroundPosition:["7px 0","0
0"],right:["-35px","-42px"]}, {times: 10, duration: 'slow'});
+ };
+
+ /**
+ * Remove all animation classes
+ * @param {Object} myGuider guider to remove animations from
+ */
+ guiders._removeAnimations = function(myGuider) {
+ myGuider.elem.removeClass('mwe-gt-fade-in-down
mwe-gt-fade-in-up mwe-gt-fade-in-left mwe-gt-fade-in-right');
+ };
+
+ /**
+ * Add appropriate animation class rtelative to guider position
+ * @param {Object} myGuider guider to add animation class to
+ * @param {number} position guider attachment position
+ */
+ guiders._setupAnimations = function(myGuider, position) {
+ var classMap = {
+ 1: 'mwe-gt-fade-in-down',
+ 2: 'mwe-gt-fade-in-left',
+ 3: 'mwe-gt-fade-in-left',
+ 4: 'mwe-gt-fade-in-left',
+ 5: 'mwe-gt-fade-in-up',
+ 6: 'mwe-gt-fade-in-up',
+ 7: 'mwe-gt-fade-in-up',
+ 8: 'mwe-gt-fade-in-right',
+ 9: 'mwe-gt-fade-in-right',
+ 10: 'mwe-gt-fade-in-right',
+ 11: 'mwe-gt-fade-in-down',
+ 12: 'mwe-gt-fade-in-down'
+ };
+ guiders._removeAnimations( myGuider );
+ // Assign animation class for myGuider
+ if (position !== 0) {
+ myGuider.elem.addClass(classMap[position]);
+ }
};
/**
@@ -1004,6 +1040,7 @@
if (myGuider.autoFocus && (isGuiderBelow || isGuiderAbove)) {
// Sometimes the browser won't scroll if the person
just clicked,
// so let's do this in a setTimeout.
+ guiders._removeAnimations(myGuider);
setTimeout(guiders.scrollToCurrent, 10);
}
--
To view, visit https://gerrit.wikimedia.org/r/121585
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0704355573dbd4d345ba04a7fb79dac5819b4935
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/GuidedTour
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: MSyed <ms...@wikimedia.org>
Gerrit-Reviewer: Mattflaschen <mflasc...@wikimedia.org>
Gerrit-Reviewer: Phuedx <g...@samsmith.io>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Robmoen <rm...@wikimedia.org>
Gerrit-Reviewer: Swalling <swall...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
