Mattflaschen has uploaded a new change for review.
https://gerrit.wikimedia.org/r/74820
Change subject: Don't override originally request position when drawing.
......................................................................
Don't override originally request position when drawing.
Remove old arrows early, so arrows will never be drawn on a centered
guider.
Change-Id: I97bd4478dbde7be78e7b87abb6326045920ad3ef
---
M guiders.js
1 file changed, 34 insertions(+), 18 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GuidedTour/guiders
refs/changes/20/74820/1
diff --git a/guiders.js b/guiders.js
index 3148129..9327e61 100644
--- a/guiders.js
+++ b/guiders.js
@@ -342,11 +342,11 @@
return position;
};
- guiders._getAttachCss = function(attachTo, guider) {
+ guiders._getAttachCss = function(attachTo, guider, position) {
var myHeight = guider.elem.innerHeight();
var myWidth = guider.elem.innerWidth();
- if (guider.position === 0) {
+ if (position === 0) {
// The guider is positioned in the center of the screen.
return {
"position": "fixed",
@@ -383,7 +383,7 @@
11: [-bufferOffset - myHeight, 0],
12: [-bufferOffset - myHeight, attachToWidth/2 - myWidth/2]
};
- var offset = offsetMap[guider.position];
+ var offset = offsetMap[position];
top += offset[0];
left += offset[1];
@@ -412,33 +412,42 @@
};
guiders._attach = function(myGuider) {
+ var position;
+
if (typeof myGuider !== 'object') {
return;
}
+ // We keep a local position, separate from the originally requested one.
+ // We alter this locally for auto-flip and missing elements.
+ //
+ // However, the DOM or window size may change later, and on each attach we
want to start
+ // with the originally requested position as the baseline.
+ position = myGuider.position;
+
var attachTo = $(myGuider.attachTo),
canAttach = attachTo.length !== 0;
- if (!canAttach) {
- myGuider.position = 0;
- }
+ if (!canAttach) {
+ position = 0;
+ }
- var css = guiders._getAttachCss(attachTo, myGuider);
+ var css = guiders._getAttachCss(attachTo, myGuider, position);
if (myGuider.flipToKeepOnScreen) {
var rightOfGuider = css.left + myGuider.width;
var flipVertically = css.top < 0;
var flipHorizontally = css.left < 0 || rightOfGuider >
$('body').innerWidth();
if (flipVertically || flipHorizontally) {
- myGuider.position = guiders.getFlippedPosition(myGuider.position, {
+ position = guiders.getFlippedPosition(position, {
"vertical": flipVertically,
"horizontal": flipHorizontally
});
- css = guiders._getAttachCss(attachTo, myGuider);
+ css = guiders._getAttachCss(attachTo, myGuider, position);
}
}
- guiders._styleArrow(myGuider);
+ guiders._styleArrow(myGuider, position);
return myGuider.elem.css(css);
};
@@ -497,14 +506,23 @@
}
};
- guiders._styleArrow = function(myGuider) {
- var position = myGuider.position || 0,
- arrowPosition;
+ guiders._styleArrow = function(myGuider, position) {
+ var arrowPosition,
+ myGuiderArrow = $(myGuider.elem.find(".guider_arrow"));
- if (!position) {
+ position = position || 0;
+
+ // Remove possible old direction.
+ // Position, and thus arrow, can change on resize due to flipToKeepOnScreen
+ // Also, if an element is added to or removed from the DOM, the arrow may
need to change on reposition.
+ //
+ // If there should be an arrow, the new one will be added below.
+ myGuiderArrow.removeClass("guider_arrow_down guider_arrow_left
guider_arrow_up guider_arrow_right");
+
+ // No arrow for center position
+ if (position === 0) {
return;
}
- var myGuiderArrow = $(myGuider.elem.find(".guider_arrow"));
var newClass = {
1: "guider_arrow_down",
2: "guider_arrow_left",
@@ -520,8 +538,6 @@
12: "guider_arrow_down"
};
- // Remove possible old direction. Position, and thus arrow, can change on
resize due to flipToKeepOnScreen
- myGuiderArrow.removeClass("guider_arrow_down guider_arrow_left
guider_arrow_up guider_arrow_right");
myGuiderArrow.addClass(newClass[position]);
var myHeight = myGuider.elem.innerHeight();
@@ -541,7 +557,7 @@
11: ["left", arrowOffset],
12: ["left", myWidth/2 - arrowOffset]
};
- arrowPosition = positionMap[myGuider.position];
+ arrowPosition = positionMap[position];
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'});
--
To view, visit https://gerrit.wikimedia.org/r/74820
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I97bd4478dbde7be78e7b87abb6326045920ad3ef
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GuidedTour/guiders
Gerrit-Branch: master
Gerrit-Owner: Mattflaschen <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
