directive requires a `step` attribute to bind the current step to.');
+ }
+ var model = $parse(attrs.step);
+ var backDrop = false;
+
+ // Watch current step view model and update locally
+ scope.$watch(attrs.step, function(newVal) {
+ ctrl.currentStep = newVal;
+ });
+
+ ctrl.postTourCallback = function(completed) {
+ var backdropEle = document.getElementsByClassName('tour-backdrop');
+ var active = document.getElementsByClassName('tour-element-active');
+ angular.element(backdropEle).remove();
+ backDrop = false;
+ angular.element(active).removeClass('tour-element-active');
+
+ if (completed && angular.isDefined(attrs.tourComplete)) {
+ scope.$parent.$eval(attrs.tourComplete);
}
- var model = $parse(attrs.step);
- var backDrop = false;
-
- // Watch current step view model and update locally
- scope.$watch(attrs.step, function(newVal) {
- ctrl.currentStep = newVal;
- });
-
- ctrl.postTourCallback = function(completed) {
- angular.element('.tour-backdrop').remove();
- backDrop = false;
- angular.element('.tour-element-active').removeClass('tour-element-active');
-
- if (completed && angular.isDefined(attrs.tourComplete)) {
- scope.$parent.$eval(attrs.tourComplete);
- }
- if (angular.isDefined(attrs.postTour)) {
- scope.$parent.$eval(attrs.postTour);
- }
- };
- ctrl.postStepCallback = function() {
- if (angular.isDefined(attrs.postStep)) {
- scope.$parent.$eval(attrs.postStep);
- }
- };
-
- ctrl.showStepCallback = function() {
- if (tourConfig.backDrop) {
- angular.element(tourConfig.containerElement).append(angular.element(''));
-
- $timeout(function() {
- $('.tour-backdrop').remove();
- angular.element('').insertBefore('.tour-tip');
- }, 1000)
+ if (angular.isDefined(attrs.postTour)) {
+ scope.$parent.$eval(attrs.postTour);
+ }
+ };
- backDrop = true;
- }
- };
+ ctrl.postStepCallback = function() {
+ if (angular.isDefined(attrs.postStep)) {
+ scope.$parent.$eval(attrs.postStep);
+ }
+ };
+
+ ctrl.showStepCallback = function() {
+ if (tourConfig.backDrop) {
+
+ $timeout(function() {
+ var backdrop = document.getElementsByClassName('tour-backdrop');
+ var tooltip = document.getElementsByClassName('tour-tip')[0];
+ var div = document.createElement('div');
+ div.className = 'tour-backdrop';
+ angular.element(backdrop).remove();
+ // When the tour ends simply remove the backdrop and return.
+ if (!angular.isDefined(tooltip)) { return; }
+ tooltip.parentNode.insertBefore(div, tooltip);
+ }, 501);
+
+ backDrop = true;
+ }
+ };
- // update the current step in the view as well as in our controller
- scope.setCurrentStep = function(val) {
- model.assign(scope.$parent, val);
- ctrl.currentStep = val;
- };
+ // update the current step in the view as well as in our controller
+ scope.setCurrentStep = function(val) {
+ model.assign(scope.$parent, val);
+ ctrl.currentStep = val;
+ };
- scope.getCurrentStep = function() {
- return ctrl.currentStep;
- };
+ scope.getCurrentStep = function() {
+ return ctrl.currentStep;
+ };
}
- };
-})
+ };
+ }])
-/**
- * Tourtip
- * tourtip manages the state of the tour-popup directive
- */
-.directive('tourtip', function($window, $compile, $interpolate, $timeout, scrollTo, tourConfig, debounce, $q) {
- var startSym = $interpolate.startSymbol(),
- endSym = $interpolate.endSymbol();
+ /**
+ * Tourtip
+ * tourtip manages the state of the tour-popup directive
+ */
+ .directive('tourtip', ['$window', '$compile', '$interpolate', '$timeout', 'scrollTo', 'tourConfig', 'debounce', '$q',
+ function($window, $compile, $interpolate, $timeout, scrollTo, tourConfig, debounce, $q) {
- var template = '';
+ var startSym = $interpolate.startSymbol(),
+ endSym = $interpolate.endSymbol();
- return {
+ var template = '';
+
+ return {
require: '^tour',
restrict: 'EA',
scope: true,
link: function(scope, element, attrs, tourCtrl) {
- attrs.$observe('tourtip', function(val) {
- scope.ttContent = val;
- });
-
- //defaults: tourConfig.placement
- attrs.$observe('tourtipPlacement', function(val) {
- scope.ttPlacement = (val || tourConfig.placement).toLowerCase().trim();
- scope.centered = (scope.ttPlacement.indexOf('center') === 0);
- });
-
- attrs.$observe('tourtipNextLabel', function(val) {
- scope.ttNextLabel = val || tourConfig.nextLabel;
- });
-
- attrs.$observe('tourtipContainerElement', function(val) {
- scope.ttContainerElement = val || tourConfig.containerElement;
- });
-
- attrs.$observe('tourtipMargin', function(val) {
- scope.ttMargin = parseInt(val, 10) || tourConfig.margin;
- });
-
- attrs.$observe('tourtipOffsetVertical', function(val) {
- scope.offsetVertical = parseInt(val, 10) || 0;
- });
-
- attrs.$observe('tourtipOffsetHorizontal', function(val) {
- scope.offsetHorizontal = parseInt(val, 10) || 0;
- });
-
- //defaults: null
- attrs.$observe('onShow', function(val) {
- scope.onStepShow = val || null;
- });
-
- //defaults: null
- attrs.$observe('onProceed', function(val) {
- scope.onStepProceed = val || null;
- });
-
- //defaults: null
- attrs.$observe('tourtipElement', function(val) {
- scope.ttElement = val || null;
- });
-
- //defaults: null
- attrs.$observe('tourtipTitle', function (val) {
- scope.ttTitle = val || null;
- });
- //defaults: tourConfig.useSourceScope
- attrs.$observe('useSourceScope', function(val) {
- scope.ttSourceScope = !val ? tourConfig.useSourceScope : val === 'true';
+ attrs.$observe('tourtip', function(val) {
+ scope.ttContent = val;
+ });
+
+ //defaults: tourConfig.placement
+ attrs.$observe('tourtipPlacement', function(val) {
+ scope.ttPlacement = (val || tourConfig.placement).toLowerCase().trim();
+ scope.centered = (scope.ttPlacement.indexOf('center') === 0);
+ });
+
+ attrs.$observe('tourtipNextLabel', function(val) {
+ scope.ttNextLabel = val || tourConfig.nextLabel;
+ });
+
+ attrs.$observe('tourtipContainerElement', function(val) {
+ scope.ttContainerElement = val || tourConfig.containerElement;
+ });
+
+ attrs.$observe('tourtipMargin', function(val) {
+ scope.ttMargin = parseInt(val, 10) || tourConfig.margin;
+ });
+
+ attrs.$observe('tourtipOffsetVertical', function(val) {
+ scope.offsetVertical = parseInt(val, 10) || 0;
+ });
+
+ attrs.$observe('tourtipOffsetHorizontal', function(val) {
+ scope.offsetHorizontal = parseInt(val, 10) || 0;
+ });
+
+ //defaults: null
+ attrs.$observe('onShow', function(val) {
+ scope.onStepShow = val || null;
+ });
+
+ //defaults: null
+ attrs.$observe('onProceed', function(val) {
+ scope.onStepProceed = val || null;
+ });
+
+ //defaults: null
+ attrs.$observe('tourtipElement', function(val) {
+ scope.ttElement = val || null;
+ });
+
+ //defaults: null
+ attrs.$observe('tourtipTitle', function (val) {
+ scope.ttTitle = val || null;
+ });
+
+ //defaults: tourConfig.useSourceScope
+ attrs.$observe('useSourceScope', function(val) {
+ scope.ttSourceScope = !val ? tourConfig.useSourceScope : val === 'true';
+ });
+
+ //Init assignments (fix for Angular 1.3+)
+ scope.ttNextLabel = tourConfig.nextLabel;
+ scope.ttContainerElement = tourConfig.containerElement;
+ scope.ttPlacement = tourConfig.placement.toLowerCase().trim();
+ scope.centered = false;
+ scope.ttMargin = tourConfig.margin;
+ scope.offsetHorizontal = 0;
+ scope.offsetVertical = 0;
+ scope.ttSourceScope = tourConfig.useSourceScope;
+ scope.ttOpen = false;
+ scope.ttAnimation = tourConfig.animation;
+ scope.index = parseInt(attrs.tourtipStep, 10);
+
+ var tourtip = $compile(template)(scope);
+ tourCtrl.addStep(scope);
+
+ // wrap this in a time out because the tourtip won't compile right away
+ $timeout(function() {
+ scope.$watch('ttOpen', function(val) {
+ if (val)
+ show();
+ else
+ hide();
});
-
- //Init assignments (fix for Angular 1.3+)
- scope.ttNextLabel = tourConfig.nextLabel;
- scope.ttContainerElement = tourConfig.containerElement;
- scope.ttPlacement = tourConfig.placement.toLowerCase().trim();
- scope.centered = false;
- scope.ttMargin = tourConfig.margin;
- scope.offsetHorizontal = 0;
- scope.offsetVertical = 0;
- scope.ttSourceScope = tourConfig.useSourceScope;
- scope.ttOpen = false;
- scope.ttAnimation = tourConfig.animation;
- scope.index = parseInt(attrs.tourtipStep, 10);
-
- var tourtip = $compile(template)(scope);
- tourCtrl.addStep(scope);
-
- // wrap this in a time out because the tourtip won't compile right away
- $timeout(function() {
- scope.$watch('ttOpen', function(val) {
- if (val) {
- show();
- } else {
- hide();
- }
- });
- }, 500);
-
-
- //determining target scope. It's used only when using virtual steps and there
- //is some action performed like on-show or on-progress. Without virtual steps
- //action would performed on element's scope and that would work just fine
- //however, when using virtual steps, whose steps can be placed in different
- //controller, so it affects scope, which will be used to run this action against.
- function getTargetScope() {
- var targetElement = scope.ttElement ? angular.element(scope.ttElement) : element;
-
- var targetScope = scope;
- if (targetElement !== element && !scope.ttSourceScope)
- targetScope = targetElement.scope();
-
- return targetScope;
+ }, 500);
+
+
+ //determining target scope. It's used only when using virtual steps and there
+ //is some action performed like on-show or on-progress. Without virtual steps
+ //action would performed on element's scope and that would work just fine
+ //however, when using virtual steps, whose steps can be placed in different
+ //controller, so it affects scope, which will be used to run this action against.
+ function getTargetScope() {
+ var target = document.querySelectorAll(scope.ttElement);
+ var targetElement = scope.ttElement ? angular.element(target) : element;
+
+ var targetScope = scope;
+ if (targetElement !== element && !scope.ttSourceScope) { targetScope = targetElement.scope(); }
+
+ return targetScope;
+ }
+
+ function calculatePosition(element, container) {
+ var minimumLeft = 0; // minimum left position of tour tip
+ var restrictRight;
+ var ttPosition;
+ var tourtipWidth = tourtip[0].offsetWidth;
+ var tourtipHeight = tourtip[0].offsetHeight;
+
+ // Get the position of the directive element
+ var position = element[0].getBoundingClientRect();
+
+ //make it relative against page or fixed container, not the window
+ var top = position.top + window.pageYOffset;
+ var containerLeft = 0;
+ if (container && container[0]) {
+ top = top - container[0].getBoundingClientRect().top + container[0].scrollTop;
+ // if container is fixed, position tour tip relative to fixed container
+ if (container.css('position') === 'fixed') {
+ containerLeft = container[0].getBoundingClientRect().left;
+ }
+ // restrict right position if the tourtip doesn't fit in the container
+ var containerWidth = container[0].getBoundingClientRect().width;
+ if (tourtipWidth + position.width > containerWidth) {
+ restrictRight = containerWidth - position.left + scope.ttMargin;
+ }
}
- function calculatePosition(element, container) {
- var minimumLeft = 0; // minimum left position of tour tip
- var restrictRight;
- var ttPosition;
-
- // Get the position of the directive element
- var position = element[0].getBoundingClientRect();
-
- //make it relative against page or fixed container, not the window
- var top = position.top + window.pageYOffset;
- var containerLeft = 0;
- if (container && container[0]) {
- top = top - container[0].getBoundingClientRect().top + container[0].scrollTop;
- // if container is fixed, position tour tip relative to fixed container
- if (container.css('position') === 'fixed') {
- containerLeft = container[0].getBoundingClientRect().left;
- }
- // restrict right position if the tourtip doesn't fit in the container
- var containerWidth = container[0].getBoundingClientRect().width;
- if (tourtip.width() + position.width > containerWidth) {
- restrictRight = containerWidth - position.left + scope.ttMargin;
- }
- }
-
- var ttWidth = tourtip.width();
- var ttHeight = tourtip.height();
-
- // Calculate the tourtip's top and left coordinates to center it
- switch (scope.ttPlacement) {
- case 'right':
- var _left = position.left - containerLeft + position.width + scope.ttMargin + scope.offsetHorizontal;
- ttPosition = {
- top: top + scope.offsetVertical,
- left: _left > 0 ? _left : minimumLeft
- };
- break;
- case 'bottom':
- var _left = position.left - containerLeft + scope.offsetHorizontal;
- ttPosition = {
- top: top + position.height + scope.ttMargin + scope.offsetVertical,
- left: _left > 0 ? _left : minimumLeft
- };
- break;
- case 'center':
- var _left = position.left - containerLeft + 0.5 * (position.width - ttWidth) + scope.offsetHorizontal;
- ttPosition = {
- top: top + 0.5 * (position.height - ttHeight) + scope.ttMargin + scope.offsetVertical,
- left: _left > 0 ? _left : minimumLeft
- };
- break;
- case 'center-top':
- var _left = position.left - containerLeft + 0.5 * (position.width - ttWidth) + scope.offsetHorizontal;
- ttPosition = {
- top: top + 0.1 * (position.height - ttHeight) + scope.ttMargin + scope.offsetVertical,
- left: _left > 0 ? _left : minimumLeft
- };
- break;
- case 'left':
- var _left = position.left - containerLeft - ttWidth - scope.ttMargin + scope.offsetHorizontal;
- ttPosition = {
- top: top + scope.offsetVertical,
- left: _left > 0 ? _left : minimumLeft,
- right: restrictRight
- };
- break;
- default:
- var _left = position.left - containerLeft + scope.offsetHorizontal;
- ttPosition = {
- top: top - ttHeight - scope.ttMargin + scope.offsetVertical,
- left: _left > 0 ? _left : minimumLeft
- };
- break;
- }
-
- ttPosition.top += 'px';
- ttPosition.left += 'px';
-
- return ttPosition;
+ var ttWidth = tourtipWidth;
+ var ttHeight = tourtipHeight;
+
+ // Calculate the tourtip's top and left coordinates to center it
+ var _left;
+ switch(scope.ttPlacement) {
+ case 'right':
+ _left = position.left - containerLeft + position.width + scope.ttMargin + scope.offsetHorizontal;
+ ttPosition = {
+ top: top + scope.offsetVertical,
+ left: _left > 0 ? _left : minimumLeft
+ };
+ break;
+ case 'bottom':
+ _left = position.left - containerLeft + scope.offsetHorizontal;
+ ttPosition = {
+ top: top + position.height + scope.ttMargin + scope.offsetVertical,
+ left: _left > 0 ? _left : minimumLeft
+ };
+ break;
+ case 'center':
+ _left = position.left - containerLeft + 0.5 * (position.width - ttWidth) + scope.offsetHorizontal;
+ ttPosition = {
+ top: top + 0.5 * (position.height - ttHeight) + scope.ttMargin + scope.offsetVertical,
+ left: _left > 0 ? _left : minimumLeft
+ };
+ break;
+ case 'center-top':
+ _left = position.left - containerLeft + 0.5 * (position.width - ttWidth) + scope.offsetHorizontal;
+ ttPosition = {
+ top: top + 0.1 * (position.height - ttHeight) + scope.ttMargin + scope.offsetVertical,
+ left: _left > 0 ? _left : minimumLeft
+ };
+ break;
+ case 'left':
+ _left = position.left - containerLeft - ttWidth - scope.ttMargin + scope.offsetHorizontal;
+ ttPosition = {
+ top: top + scope.offsetVertical,
+ left: _left > 0 ? _left : minimumLeft,
+ right: restrictRight
+ };
+ break;
+ default:
+ _left = position.left - containerLeft + scope.offsetHorizontal;
+ ttPosition = {
+ top: top - ttHeight - scope.ttMargin + scope.offsetVertical,
+ left: _left > 0 ? _left : minimumLeft
+ };
+ break;
}
- function show() {
- if (!scope.ttContent) {
- return;
- }
+ ttPosition.top += 'px';
+ ttPosition.left += 'px';
- if (scope.ttAnimation)
- tourtip.fadeIn();
- else {
- tourtip.css({
- display: 'block'
- });
- }
+ return ttPosition;
+ }
- var targetElement = scope.ttElement ? angular.element(scope.ttElement) : element;
+ function show() {
+ if (!scope.ttContent) { return; }
- if (targetElement == null || targetElement.length === 0)
- throw 'Target element could not be found. Selector: ' + scope.ttElement;
+ var target = document.querySelectorAll(scope.ttElement);
+ var targetElement = scope.ttElement ? angular.element(target) : element;
- angular.element(scope.ttContainerElement).append(tourtip);
+ if (targetElement === null || targetElement.length === 0)
+ throw 'Target element could not be found. Selector: ' + scope.ttElement;
- var updatePosition = function() {
+ var containerEle = document.querySelectorAll(scope.ttContainerElement);
+ angular.element(containerEle).append(tourtip);
- var offsetElement = scope.ttContainerElement === 'body' ? undefined : angular.element(scope.ttContainerElement);
- var ttPosition = calculatePosition(targetElement, offsetElement);
+ var updatePosition = function() {
- // Now set the calculated positioning.
- tourtip.css(ttPosition);
+ var offsetElement = scope.ttContainerElement === 'body' ? undefined : angular.element(containerEle);
+ var ttPosition = calculatePosition(targetElement, offsetElement);
- // Scroll to the tour tip
- var ttPositionTop = parseInt(ttPosition.top),
- ttPositionLeft = parseInt(ttPosition.left);
- scrollTo(tourtip, scope.ttContainerElement, -150, -300, tourConfig.scrollSpeed, ttPositionTop, ttPositionLeft);
- };
+ // Now set the calculated positioning.
+ tourtip.css(ttPosition);
- if (tourConfig.backDrop)
- focusActiveElement(targetElement);
+ // Scroll to the tour tip
+ scrollTo(tourtip, scope.ttContainerElement, -150, -300, tourConfig.scrollSpeed);
+ };
- angular.element($window).bind('resize.' + scope.$id, debounce(updatePosition, 50));
+ if (tourConfig.backDrop) { focusActiveElement(targetElement); }
- updatePosition();
+ angular.element($window).bind('resize.' + scope.$id, debounce(updatePosition, 50));
- if (scope.onStepShow) {
- var targetScope = getTargetScope();
+ updatePosition();
- //fancy! Let's make on show action not instantly, but after a small delay
- $timeout(function() {
- targetScope.$eval(scope.onStepShow);
- }, 300);
- }
- }
+ // CSS class must be added after the element is already on the DOM otherwise it won't animate (fade in).
+ tourtip.addClass('show');
- function hide() {
- tourtip.detach();
- angular.element($window).unbind('resize.' + scope.$id);
- }
+ if (scope.onStepShow) {
+ var targetScope = getTargetScope();
- function focusActiveElement(el) {
- angular.element('.tour-element-active').removeClass('tour-element-active');
-
- if (!scope.centered)
- el.addClass('tour-element-active');
+ //fancy! Let's make on show action not instantly, but after a small delay
+ $timeout(function() {
+ targetScope.$eval(scope.onStepShow);
+ }, 300);
}
-
- // Make sure tooltip is destroyed and removed.
- scope.$on('$destroy', function onDestroyTourtip() {
- angular.element($window).unbind('resize.' + scope.$id);
- tourtip.remove();
- tourtip = null;
- });
-
- scope.proceed = function() {
- if (scope.onStepProceed) {
- var targetScope = getTargetScope();
-
- var onProceedResult = targetScope.$eval(scope.onStepProceed);
- $q.resolve(onProceedResult).then(function () {
- scope.setCurrentStep(scope.getCurrentStep() + 1);
- });
- } else {
- scope.setCurrentStep(scope.getCurrentStep() + 1);
- }
- };
+ }
+
+ function hide() {
+ tourtip.removeClass('show');
+ tourtip.detach();
+ angular.element($window).unbind('resize.' + scope.$id);
+ }
+
+ function focusActiveElement(el) {
+ var activeEle = document.getElementsByClassName('tour-element-active');
+ angular.element(activeEle).removeClass('tour-element-active');
+ if (!scope.centered) { el.addClass('tour-element-active'); }
+ }
+
+ // Make sure tooltip is destroyed and removed.
+ scope.$on('$destroy', function onDestroyTourtip() {
+ angular.element($window).unbind('resize.' + scope.$id);
+ tourtip.remove();
+ tourtip = null;
+ });
+
+ scope.proceed = function() {
+ if (scope.onStepProceed) {
+ var targetScope = getTargetScope();
+
+ var onProceedResult = targetScope.$eval(scope.onStepProceed);
+ $q.resolve(onProceedResult).then(function () {
+ scope.setCurrentStep(scope.getCurrentStep() + 1);
+ });
+ } else {
+ scope.setCurrentStep(scope.getCurrentStep() + 1);
+ }
+ };
}
- };
-})
-
-/**
- * TourPopup
- * the directive that actually has the template for the tip
- */
-.directive('tourPopup', function() {
- return {
+ };
+ }])
+
+ /**
+ * TourPopup
+ * the directive that actually has the template for the tip
+ */
+ .directive('tourPopup', function() {
+ return {
replace: true,
templateUrl: 'tour/tour.tpl.html',
scope: true,
restrict: 'EA',
link: function(scope, element, attrs) {}
- };
-})
-
-/**
- * OrderedList
- * Used for keeping steps in order
- */
-.factory('orderedList', function() {
- var OrderedList = function() {
+ };
+ })
+
+ /**
+ * OrderedList
+ * Used for keeping steps in order
+ */
+ .factory('orderedList', function() {
+ var OrderedList = function() {
this.map = {};
this._array = [];
- };
+ };
- OrderedList.prototype.set = function(key, value) {
+ OrderedList.prototype.set = function(key, value) {
if (!angular.isNumber(key))
- return;
+ return;
if (key in this.map) {
- this.map[key] = value;
+ this.map[key] = value;
} else {
- if (key < this._array.length) {
- var insertIndex = key - 1 > 0 ? key - 1 : 0;
- this._array.splice(insertIndex, 0, key);
- } else {
- this._array.push(key);
- }
- this.map[key] = value;
- this._array.sort(function(a, b) {
- return a - b;
- });
+ if (key < this._array.length) {
+ var insertIndex = key - 1 > 0 ? key - 1 : 0;
+ this._array.splice(insertIndex, 0, key);
+ } else {
+ this._array.push(key);
+ }
+ this.map[key] = value;
+ this._array.sort(function(a, b) {
+ return a - b;
+ });
}
- };
- OrderedList.prototype.indexOf = function(value) {
+ };
+
+ OrderedList.prototype.indexOf = function(value) {
for (var prop in this.map) {
- if (this.map.hasOwnProperty(prop)) {
- if (this.map[prop] === value)
- return Number(prop);
- }
+ if (this.map.hasOwnProperty(prop)) {
+ if (this.map[prop] === value)
+ return Number(prop);
+ }
}
- };
- OrderedList.prototype.push = function(value) {
+ };
+
+ OrderedList.prototype.push = function(value) {
var key = this._array[this._array.length - 1] + 1 || 0;
this._array.push(key);
this.map[key] = value;
this._array.sort(function(a, b) {
- return a - b;
+ return a - b;
});
- };
- OrderedList.prototype.remove = function(key) {
+ };
+
+ OrderedList.prototype.remove = function(key) {
var index = this._array.indexOf(key);
if (index === -1) {
- throw new Error('key does not exist');
+ throw new Error('key does not exist');
}
this._array.splice(index, 1);
delete this.map[key];
- };
- OrderedList.prototype.get = function(key) {
+ };
+
+ OrderedList.prototype.get = function(key) {
return this.map[key];
- };
- OrderedList.prototype.getCount = function() {
+ };
+
+ OrderedList.prototype.getCount = function() {
return this._array.length;
- };
- OrderedList.prototype.forEach = function(f) {
+ };
+
+ OrderedList.prototype.forEach = function(f) {
var key, value;
for (var i = 0; i < this._array.length; i++) {
- key = this._array[i];
- value = this.map[key];
- f(value, key);
+ key = this._array[i];
+ value = this.map[key];
+ f(value, key);
}
- };
- OrderedList.prototype.first = function() {
+ };
+
+ OrderedList.prototype.first = function() {
var key, value;
key = this._array[0];
value = this.map[key];
return value;
- };
+ };
- var orderedListFactory = function() {
+ var orderedListFactory = function() {
return new OrderedList();
- };
-
- return orderedListFactory;
-})
-
-/**
- * ScrollTo
- * Smoothly scroll to a dom element
- */
-.factory('scrollTo', function() {
- 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: ttPositionTop + offsetY,
- scrollLeft: ttPositionLeft + offsetX
- }, speed);
- } else {
- $('html,' + containerElement).stop().animate({
- scrollTop: 0
- }, speed);
- }
- };
-})
-.factory('debounce', function($timeout, $q) {
- return function(func, wait, immediate) {
- var timeout;
- var deferred = $q.defer();
- return function() {
- var context = this, args = arguments;
- var later = function() {
- timeout = null;
- if(!immediate) {
- deferred.resolve(func.apply(context, args));
- deferred = $q.defer();
- }
};
- var callNow = immediate && !timeout;
- if ( timeout ) {
- $timeout.cancel(timeout);
+
+ return orderedListFactory;
+ })
+
+ /**
+ * ScrollTo
+ * Smoothly scroll to a dom element
+ */
+ .factory('scrollTo', ['$interval', function($interval) {
+
+ var animationInProgress = false;
+
+ function getEasingPattern (time) {
+ return time < 0.5 ? (4 * time * time * time) : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // default easeInOutCubic transition
}
- timeout = $timeout(later, wait);
- if (callNow) {
- deferred.resolve(func.apply(context,args));
- deferred = $q.defer();
+
+ function _autoScroll (container, endTop, endLeft, offsetY, offsetX, speed) {
+
+ if (animationInProgress) { return; }
+
+ speed = speed || 500;
+ offsetY = offsetY || 0;
+ offsetX = offsetX || 0;
+ // Set some boundaries in case the offset wants us to scroll to impossible locations
+ var finalY = endTop + offsetY;
+ if (finalY < 0) { finalY = 0; } else if (finalY > container.scrollHeight) { finalY = container.scrollHeight; }
+ var finalX = endLeft + offsetX;
+ if (finalX < 0) { finalX = 0; } else if (finalX > container.scrollWidth) { finalX = container.scrollWidth; }
+
+ var startTop = container.scrollTop,
+ startLeft = container.scrollLeft,
+ timeLapsed = 0,
+ distanceY = finalY - startTop, // If we're going up, this will be a negative number
+ distanceX = finalX - startLeft,
+ currentPositionY,
+ currentPositionX,
+ timeProgress;
+
+ function stopAnimation() {
+ // If we have reached our destination clear the interval
+ if (currentPositionY === finalY && currentPositionX === finalX) {
+ $interval.cancel(runAnimation);
+ animationInProgress = false;
+ }
+ }
+
+ function animateScroll() {
+ console.log('called');
+ timeLapsed += 16;
+ // get percentage of progress to the specified speed (e.g. 16/500). Should always be between 0 and 1
+ timeProgress = ( timeLapsed / speed );
+ // Make a check and set back to 1 if we went over (e.g. 512/500)
+ timeProgress = ( timeProgress > 1 ) ? 1 : timeProgress;
+ // Number between 0 and 1 corresponding to the animation pattern
+ var multiplier = getEasingPattern(timeProgress);
+ // Calculate the distance to travel in this step. It is the total distance times a percentage of what we will move
+ var translateY = distanceY * multiplier;
+ var translateX = distanceX * multiplier;
+ // Assign to the shorthand variables
+ currentPositionY = startTop + translateY;
+ currentPositionX = startLeft + translateX;
+ // Move slightly following the easing pattern
+ container.scrollTop = currentPositionY;
+ container.scrollLeft = currentPositionX;
+ // Check if we have reached our destination
+ stopAnimation();
+ }
+
+ animationInProgress = true;
+ // Kicks off the function
+ var runAnimation = $interval(animateScroll, 16);
}
- return deferred.promise;
- };
- };
-});
+
+ return function(target, containerSelector, offsetY, offsetX, speed) {
+ var container = document.querySelectorAll(containerSelector);
+ offsetY = offsetY || -100;
+ offsetX = offsetX || -100;
+ _autoScroll(container[0], target[0].offsetTop, target[0].offsetLeft, offsetY, offsetX, speed);
+ };
+ }])
+
+ .factory('debounce', ['$timeout', '$q',
+ function($timeout, $q) {
+
+ return function(func, wait, immediate) {
+ var timeout;
+ var deferred = $q.defer();
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if(!immediate) {
+ deferred.resolve(func.apply(context, args));
+ deferred = $q.defer();
+ }
+ };
+ var callNow = immediate && !timeout;
+ if ( timeout ) {
+ $timeout.cancel(timeout);
+ }
+ timeout = $timeout(later, wait);
+ if (callNow) {
+ deferred.resolve(func.apply(context,args));
+ deferred = $q.defer();
+ }
+ return deferred.promise;
+ };
+ };
+ }]);
+
+})(angular);
diff --git a/src/tour/tour.scss b/src/tour/tour.scss
index 7a875db..924ae98 100644
--- a/src/tour/tour.scss
+++ b/src/tour/tour.scss
@@ -1,15 +1,30 @@
.tour-tip {
- display: none;
+ opacity: 0;
+ visibility: hidden;
+ display: block;
+
+ -webkit-transition: visibility 0s, opacity 0.6s cubic-bezier(0.345, 0, 0.25, 1);
+ -moz-transition: visibility 0s, opacity 0.6s cubic-bezier(0.345, 0, 0.25, 1);
+ -ms-transition: visibility 0s, opacity 0.6s cubic-bezier(0.345, 0, 0.25, 1);
+ -o-transition: visibility 0s, opacity 0.6s cubic-bezier(0.345, 0, 0.25, 1);
+ transition: visibility 0s, opacity 0.6s cubic-bezier(0.345, 0, 0.25, 1);
+
position: absolute;
background: #1C252E;
color: #FFF;
- z-index: 101;
+ z-index: 121 !important;
top: 0;
left: 2.5%;
font-family: inherit;
font-weight: 400;
max-width: 400px;
border-radius: 10px;
+
+ &.show {
+ opacity: 1;
+ visibility: visible;
+ }
+
p {
color: #CBD0D4;
font-size: .9em;
diff --git a/src/tour/tour.spec.js b/src/tour/tour.spec.js
index da3f40b..c94f5a0 100644
--- a/src/tour/tour.spec.js
+++ b/src/tour/tour.spec.js
@@ -7,7 +7,14 @@ describe('Directive: tour', function () {
beforeEach(module('angular-tour.tour'));
function getTourStep() {
- return angular.element('body').find('div.tour-tip');
+ var tour = document.querySelector('div.tour-tip');
+ return angular.element(tour);
+ }
+
+ function htmlToElement(html) {
+ var template = document.createElement('template');
+ template.innerHTML = html;
+ return template.content.childNodes;
}
var $rootScope, $compile, $controller, $timeout;
@@ -118,7 +125,7 @@ describe('Directive: tour', function () {
});
describe('basics', function() {
- var elm, scope, tour, tip1, tip2, tourScope;
+ var elm, scope, tourTpl, tour, tip1, tip2, tourScope;
beforeEach(function() {
@@ -126,14 +133,15 @@ describe('Directive: tour', function () {
scope.stepIndex = 0;
- tour = angular.element('' +
- 'Important website feature' +
- 'Another website feature' +
- '');
+ tourTpl = htmlToElement('' +
+ 'Important website feature' +
+ 'Another website feature' +
+ '')[0];
+ tour = angular.element(tourTpl);
elm = $compile(tour)(scope);
- tip1 = tour.find('#tt1');
- tip2 = tour.find('#tt2');
+ tip1 = angular.element( document.getElementById('#tt1') );
+ tip2 = angular.element( document.getElementById('#tt2') );
scope.$apply();
$timeout.flush();
@@ -161,7 +169,7 @@ describe('Directive: tour', function () {
});
describe('tourtip', function() {
- var elm, scope, tour, tip1, tip2, tourScope;
+ var elm, scope, tourTpl, tour, tip1, tip2, tourScope;
beforeEach(function() {
@@ -169,14 +177,17 @@ describe('Directive: tour', function () {
scope.stepIndex = 0;
- tour = angular.element('' +
- 'Important website feature' +
- 'Another website feature' +
- '');
+ tourTpl = htmlToElement('')[0];
+ var feature1 = htmlToElement('Important website feature')[0];
+ var feature2 = htmlToElement('Another website feature')[0];
+
+ tour = angular.element(tourTpl);
+ tour.append(feature1);
+ tour.append(feature2);
elm = $compile(tour)(scope);
- tip1 = tour.find('#tt1');
- tip2 = tour.find('#tt2');
+ tip1 = tour.children().eq(0);
+ tip2 = tour.children().eq(1);
scope.$apply();
$timeout.flush();
@@ -194,12 +205,12 @@ describe('Directive: tour', function () {
expect(elm).toHaveOpenTourtips(1);
var stepText = tip1.attr('tourtip');
var tourStep = getTourStep();
- expect(tourStep.html()).toContain('feature 1');
+ expect(tourStep.html()).toContain(stepText);
expect(tip1.scope().ttOpen).toBe(true);
});
it('should open tip2 popup and close tip1 on next', function () {
- var elmNext = getTourStep().find('.tour-next-tip').eq(0);
+ var elmNext = getTourStep()[0].querySelector('.tour-next-tip');
elmNext.click();
@@ -218,7 +229,7 @@ describe('Directive: tour', function () {
});
it('should close tips when you click close', function () {
- var elmNext = getTourStep().find('.tour-close-tip').eq(0);
+ var elmNext = getTourStep()[0].querySelector('.tour-close-tip');
elmNext.click();
expect(tip1.scope().ttOpen).toBe(false);
@@ -229,7 +240,7 @@ describe('Directive: tour', function () {
scope.onProceedFunction = function() {};
scope.ttSourceScope = true;
spyOn(scope, 'onProceedFunction');
- var tour1Next = getTourStep().find('.tour-next-tip').eq(0);
+ var tour1Next = getTourStep()[0].querySelector('.tour-next-tip');
tour1Next.click();
$timeout.flush();
@@ -268,13 +279,9 @@ describe('Directive: tour', function () {
scope.otherStepIndex = -1;
// set up first tour
- tour = angular.element('');
- tip1 = angular.element('' +
- 'Important website feature' +
- '');
- tip2 = angular.element('' +
- 'Another website feature' +
- '');
+ tour = angular.element(htmlToElement('')[0]);
+ tip1 = angular.element(htmlToElement('Important website feature')[0]);
+ tip2 = angular.element(htmlToElement('Another website feature')[0]);
tour.append(tip1);
tour.append(tip2);
@@ -291,7 +298,7 @@ describe('Directive: tour', function () {
it('should call post-tour method', function() {
scope.tourEnd = function() {};
spyOn(scope, 'tourEnd');
- var tour1Next = getTourStep().find('.tour-next-tip').eq(0);
+ var tour1Next = getTourStep()[0].querySelector('.tour-next-tip');
tour1Next.click();
tour1Next.click();
expect(scope.tourEnd).toHaveBeenCalled();
@@ -307,7 +314,7 @@ describe('Directive: tour', function () {
it('should call tour-complete method', function() {
scope.tourComplete = function() {};
spyOn(scope, 'tourComplete');
- var tour1Next = getTourStep().find('.tour-next-tip').eq(0);
+ var tour1Next = getTourStep()[0].querySelector('.tour-next-tip');
tour1Next.click();
tour1Next.click();
expect(scope.tourComplete).toHaveBeenCalled();
@@ -323,7 +330,7 @@ describe('Directive: tour', function () {
it('should call post-step method', function() {
scope.tourStep = function() {};
spyOn(scope, 'tourStep');
- var tour1Next = getTourStep().find('.tour-next-tip').eq(0);
+ var tour1Next = getTourStep()[0].querySelector('.tour-next-tip');
tour1Next.click();
expect(scope.tourStep).toHaveBeenCalled();
});
@@ -334,12 +341,14 @@ describe('Directive: tour', function () {
scope.otherStepIndex = 0;
};
+ var tourWrapper = htmlToElement('')[0];
+ var feature1 = htmlToElement('Important website feature')[0];
+ var feature2 = htmlToElement('Another website feature')[0];
+
// set up second tour
- var otherTour = angular.element('');
- var otherTip1 = angular.element('' +
- 'Important website feature' + '');
- var otherTip2 = angular.element('' +
- 'Another website feature' + '');
+ var otherTour = angular.element(tourWrapper);
+ var otherTip1 = angular.element(feature1);
+ var otherTip2 = angular.element(feature2);
otherTour.append(otherTip1);
otherTour.append(otherTip2);
@@ -349,7 +358,7 @@ describe('Directive: tour', function () {
scope.$apply();
$timeout.flush();
- var tour1Next = getTourStep().find('.tour-next-tip').eq(0);
+ var tour1Next = getTourStep()[0].querySelector('.tour-next-tip');
// expect second tour to be closed
expect(otherTip1.scope().ttOpen).toBe(false);
@@ -367,7 +376,7 @@ describe('Directive: tour', function () {
otherElm = $compile(otherTour)(scope);
scope.$apply();
$timeout.flush();
- var tour2Next = getTourStep().find('.tour-next-tip').eq(0);
+ var tour2Next = getTourStep()[0].querySelector('.tour-next-tip');
// expect second tour to open after first tour finished
expect(otherTip1.scope().ttOpen).toBe(true);
@@ -441,28 +450,42 @@ describe('Directive: tour', function () {
});
describe('scroll service', function() {
- var target, scope, scrollTo;
+ var div, target, bodyEle, body, scope, scrollTo, arrived;
beforeEach(inject(function (_scrollTo_) {
scope = $rootScope.$new();
scrollTo = _scrollTo_;
-
- target = angular.element('');
- $('body').height(window.innerHeight*2).append(target);
- window.scrollTo(0, 0);
+
+ div = htmlToElement('Some element absolutely positioned
')[0];
+ target = angular.element(div);
+
+ bodyEle = document.querySelector('body');
+ bodyEle.style.height = window.innerHeight * 2 + 'px';
+ body = angular.element(bodyEle);
+
+ body.append(target);
}));
it('should scroll to position', function () {
- expect($(window).scrollTop()).toEqual(0);
+ expect( bodyEle.scrollTop ).toEqual(0);
+ scrollTo(target, 'body', -100, -100, 500);
+
+ runs(function() {
+ arrived = false;
+
+ setTimeout(function(){
+ arrived = true;
+ }, 500);
+ });
- scrollTo(target, 'body', -100, -100, 500, 200, 0);
waitsFor(function() {
- return $(window).scrollTop() === 100;
- }, 'Current position to be 100px');
+ return arrived;
+ }, 'Should have scrolled', 1000);
runs(function() {
- expect($(window).scrollTop()).toEqual(100);
+ expect( bodyEle.scrollTop ).toBeGreaterThan(0);
});
+
});
});
});