Skip to content

Commit

Permalink
fix(scrolling): account for container scroll offsets when updating po…
Browse files Browse the repository at this point in the history 
…sition of tips + improved tip scrolling
  • Loading branch information
@booleanbetrayal
booleanbetrayal committed May 5, 2015
1 parent 81cc99e commit 06b1945
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 23 deletions.
19 changes: 12 additions & 7 deletions dist/angular-tour-tpls.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* An AngularJS directive for showcasing features of your website
* @version v0.1.2 - 2015-04-27
* @version v0.1.2 - 2015-05-05
* @link https://github.com/DaftMonk/angular-tour
* @author Tyler Henkel
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down Expand Up @@ -221,12 +221,15 @@
targetScope = targetElement.scope();
return targetScope;
}
function calculatePosition(element) {
function calculatePosition(element, container) {
var ttPosition;
// Get the position of the directive element
var position = element[0].getBoundingClientRect();
//make it relative against page, not the window
var top = position.top + window.pageYOffset;
if (container && container[0]) {
top -= container[0].getBoundingClientRect().top + container[0].scrollTop;
}
var ttWidth = tourtip.width();
var ttHeight = tourtip.height();
// Calculate the tourtip's top and left coordinates to center it
Expand Down Expand Up @@ -286,11 +289,13 @@
throw 'Target element could not be found. Selector: ' + scope.ttElement;
angular.element(scope.ttContainerElement).append(tourtip);
var updatePosition = function () {
var ttPosition = calculatePosition(targetElement);
var offsetElement = scope.ttContainerElement === 'body' ? undefined : angular.element(scope.ttContainerElement);
var ttPosition = calculatePosition(targetElement, offsetElement);
// Now set the calculated positioning.
tourtip.css(ttPosition);
// Scroll to the tour tip
scrollTo(tourtip, scope.ttContainerElement, -200, -300, tourConfig.scrollSpeed);
var ttPositionTop = parseInt(ttPosition.top), ttPositionLeft = parseInt(ttPosition.left);
scrollTo(tourtip, scope.ttContainerElement, -150, -300, tourConfig.scrollSpeed, ttPositionTop, ttPositionLeft);
};
if (tourConfig.backDrop)
focusActiveElement(targetElement);
Expand Down Expand Up @@ -412,14 +417,14 @@
};
return orderedListFactory;
}).factory('scrollTo', function () {
return function (target, containerElement, offsetY, offsetX, speed) {
return function (target, containerElement, offsetY, offsetX, speed, ttPositionTop, ttPositionLeft) {
if (target) {
offsetY = offsetY || -100;
offsetX = offsetX || -100;
speed = speed || 500;
$('html,' + containerElement).stop().animate({
scrollTop: target.offset().top + offsetY,
scrollLeft: target.offset().left + offsetX
scrollTop: ttPositionTop + offsetY,
scrollLeft: ttPositionLeft + offsetX
}, speed);
} else {
$('html,' + containerElement).stop().animate({ scrollTop: 0 }, speed);
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-tour-tpls.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 12 additions & 7 deletions dist/angular-tour.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* An AngularJS directive for showcasing features of your website
* @version v0.1.2 - 2015-04-27
* @version v0.1.2 - 2015-05-05
* @link https://github.com/DaftMonk/angular-tour
* @author Tyler Henkel
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down Expand Up @@ -211,12 +211,15 @@
targetScope = targetElement.scope();
return targetScope;
}
function calculatePosition(element) {
function calculatePosition(element, container) {
var ttPosition;
// Get the position of the directive element
var position = element[0].getBoundingClientRect();
//make it relative against page, not the window
var top = position.top + window.pageYOffset;
if (container && container[0]) {
top -= container[0].getBoundingClientRect().top + container[0].scrollTop;
}
var ttWidth = tourtip.width();
var ttHeight = tourtip.height();
// Calculate the tourtip's top and left coordinates to center it
Expand Down Expand Up @@ -276,11 +279,13 @@
throw 'Target element could not be found. Selector: ' + scope.ttElement;
angular.element(scope.ttContainerElement).append(tourtip);
var updatePosition = function () {
var ttPosition = calculatePosition(targetElement);
var offsetElement = scope.ttContainerElement === 'body' ? undefined : angular.element(scope.ttContainerElement);
var ttPosition = calculatePosition(targetElement, offsetElement);
// Now set the calculated positioning.
tourtip.css(ttPosition);
// Scroll to the tour tip
scrollTo(tourtip, scope.ttContainerElement, -200, -300, tourConfig.scrollSpeed);
var ttPositionTop = parseInt(ttPosition.top), ttPositionLeft = parseInt(ttPosition.left);
scrollTo(tourtip, scope.ttContainerElement, -150, -300, tourConfig.scrollSpeed, ttPositionTop, ttPositionLeft);
};
if (tourConfig.backDrop)
focusActiveElement(targetElement);
Expand Down Expand Up @@ -402,14 +407,14 @@
};
return orderedListFactory;
}).factory('scrollTo', function () {
return function (target, containerElement, offsetY, offsetX, speed) {
return function (target, containerElement, offsetY, offsetX, speed, ttPositionTop, ttPositionLeft) {
if (target) {
offsetY = offsetY || -100;
offsetX = offsetX || -100;
speed = speed || 500;
$('html,' + containerElement).stop().animate({
scrollTop: target.offset().top + offsetY,
scrollLeft: target.offset().left + offsetX
scrollTop: ttPositionTop + offsetY,
scrollLeft: ttPositionLeft + offsetX
}, speed);
} else {
$('html,' + containerElement).stop().animate({ scrollTop: 0 }, speed);
Expand Down
Loading

0 comments on commit 06b1945

Please sign in to comment.