Start on work towards the tutorial. Note that this code is BROKEN
This commit is contained in:
Joseph Schorr
parent
a049fc57c6
commit
dbed1300ad
14 changed files with 338 additions and 63 deletions
|
|
@ -1,7 +1,11 @@
|
|||
angular.module("angular-tour", [])
|
||||
.provider('AngularTour', function() {
|
||||
this.$get = ['$document', '$rootScope', '$compile', function($document, $rootScope, $compile) {
|
||||
function _start(tour) {
|
||||
this.$get = ['$document', '$rootScope', '$compile', '$location', function($document, $rootScope, $compile, $location) {
|
||||
$rootScope.angular_tour_current = null;
|
||||
|
||||
function _start(tour, opt_stepIndex, opt_existingScope) {
|
||||
tour.initialStep = opt_stepIndex || tour.initialStep || 0;
|
||||
tour.tourScope = opt_existingScope || null;
|
||||
$rootScope.angular_tour_current = tour;
|
||||
}
|
||||
|
||||
|
|
@ -13,24 +17,53 @@ angular.module("angular-tour", [])
|
|||
start: _start,
|
||||
stop: _stop
|
||||
};
|
||||
|
||||
}];
|
||||
})
|
||||
|
||||
.directive('angularTourOverlay', function() {
|
||||
.directive('angularTourUi', function() {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/angular-tour-overlay.html',
|
||||
templateUrl: '/static/directives/angular-tour-ui.html',
|
||||
replace: false,
|
||||
transclude: false,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'tour': '=tour'
|
||||
'tour': '=tour',
|
||||
'inline': '=inline',
|
||||
},
|
||||
controller: function($scope, $element, $interval) {
|
||||
controller: function($rootScope, $scope, $element, $location, $interval, AngularTour) {
|
||||
var createNewScope = function() {
|
||||
var tourScope = {
|
||||
'_replaceData': function(s) {
|
||||
if (typeof s != 'string') {
|
||||
return s;
|
||||
}
|
||||
|
||||
for (var key in tourScope) {
|
||||
if (key[0] == '_') { continue; }
|
||||
if (tourScope.hasOwnProperty(key)) {
|
||||
s = s.replace('{{' + key + '}}', tourScope[key]);
|
||||
}
|
||||
}
|
||||
return s;
|
||||
}
|
||||
};
|
||||
|
||||
return tourScope;
|
||||
};
|
||||
|
||||
$scope.stepIndex = 0;
|
||||
$scope.step = null;
|
||||
$scope.interval = null;
|
||||
$scope.interval = null;
|
||||
$scope.tourScope = createNewScope();
|
||||
|
||||
var getElement = function() {
|
||||
if (typeof $scope.step['element'] == 'function') {
|
||||
return $($scope.step['element'](tourScope));
|
||||
}
|
||||
|
||||
return $($scope.tourScope._replaceData($scope.step['element']));
|
||||
};
|
||||
|
||||
var checkSignalTimer = function() {
|
||||
if (!$scope.step) {
|
||||
|
|
@ -38,8 +71,8 @@ angular.module("angular-tour", [])
|
|||
return;
|
||||
}
|
||||
|
||||
var signal = $scope.step.signal;
|
||||
if (signal()) {
|
||||
var signal = $scope.step['signal'];
|
||||
if (signal($scope.tourScope)) {
|
||||
$scope.next();
|
||||
}
|
||||
};
|
||||
|
|
@ -58,12 +91,12 @@ angular.module("angular-tour", [])
|
|||
var closeDomHighlight = function() {
|
||||
if (!$scope.step) { return; }
|
||||
|
||||
var element = $($scope.step.element);
|
||||
var element = getElement($scope.tourScope);
|
||||
element.spotlight('close');
|
||||
};
|
||||
|
||||
var updateDomHighlight = function() {
|
||||
var element = $($scope.step.element);
|
||||
var element = getElement();
|
||||
if (!element.length) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -94,6 +127,13 @@ angular.module("angular-tour", [])
|
|||
}
|
||||
|
||||
$scope.step = $scope.tour.steps[stepIndex];
|
||||
|
||||
// If the signal is already true, then skip this step entirely.
|
||||
if ($scope.step['signal'] && $scope.step['signal']($scope.tourScope)) {
|
||||
$scope.setStepIndex(stepIndex + 1);
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.stepIndex = stepIndex;
|
||||
$scope.hasNextStep = stepIndex < $scope.tour.steps.length - 1;
|
||||
|
||||
|
|
@ -110,7 +150,9 @@ angular.module("angular-tour", [])
|
|||
};
|
||||
|
||||
$scope.stop = function() {
|
||||
closeDomHighlight();
|
||||
$scope.tour = null;
|
||||
AngularTour.stop();
|
||||
};
|
||||
|
||||
$scope.next = function() {
|
||||
|
|
@ -119,8 +161,35 @@ angular.module("angular-tour", [])
|
|||
|
||||
$scope.$watch('tour', function(tour) {
|
||||
stopSignalTimer();
|
||||
$scope.setStepIndex(0);
|
||||
if (tour) {
|
||||
$scope.setStepIndex(tour.initialStep || 0);
|
||||
$scope.tourScope = tour.tourScope || createNewScope();
|
||||
$scope.tour.tourScope = $scope.tourScope;
|
||||
}
|
||||
});
|
||||
|
||||
// If this is an inline tour, then we need to monitor the page to determine when
|
||||
// to transition it to an overlay tour.
|
||||
if ($scope.inline) {
|
||||
var counter = 0;
|
||||
var unbind = $rootScope.$watch(function() {
|
||||
return $location.path();
|
||||
}, function(location) {
|
||||
// Since this callback fires for the first page display, we only unbind it
|
||||
// after the second call.
|
||||
if (counter == 1) {
|
||||
// Unbind the listener.
|
||||
unbind();
|
||||
|
||||
// If there is an active tour, transition it over to the overlay.
|
||||
if ($scope.tour && $scope.step && $scope.step['overlayable']) {
|
||||
AngularTour.start($scope.tour, $scope.stepIndex, $scope.tourScope);
|
||||
$scope.tour = null;
|
||||
}
|
||||
}
|
||||
counter++;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
|
|
@ -131,15 +200,15 @@ angular.module("angular-tour", [])
|
|||
|
||||
// Signal: When the page location matches the given path.
|
||||
signals.matchesLocation = function(locationPath) {
|
||||
return function() {
|
||||
return $location.path() == locationPath;
|
||||
return function(tourScope) {
|
||||
return $location.path() == tourScope._replaceData(locationPath);
|
||||
};
|
||||
};
|
||||
|
||||
// Signal: When an element is found in the page's DOM.
|
||||
signals.elementAvaliable = function(elementPath) {
|
||||
return function() {
|
||||
return $(elementPath).length > 0;
|
||||
return function(tourScope) {
|
||||
return $(tourScope._replaceData(elementPath)).length > 0;
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
Reference in a new issue