quay/static/js/tour.js

angular.module("angular-tour", [])
  .provider('AngularTour', function() {
    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;
      }

      function _stop() {
        $rootScope.angular_tour_current = null;
      }

      return {
        start: _start,
        stop: _stop
      };
    }];
  })

  .directive('angularTourUi', function() {
    var directiveDefinitionObject = {
      priority: 0,
      templateUrl: '/static/directives/angular-tour-ui.html',
      replace: false,
      transclude: false,
      restrict: 'C',
      scope: {
        'tour': '=tour',
        'inline': '=inline',
      },
      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.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) {
            stopSignalTimer();
            return;
          }

          var signal = $scope.step['signal'];
          if (signal($scope.tourScope)) {
            $scope.next();
          }
        };

        var stopSignalTimer = function() {
          if (!$scope.interval) { return; }

          $interval.cancel($scope.interval);
          $scope.interval = null;
        };

        var startSignalTimer = function() {
          $scope.interval = $interval(checkSignalTimer, 500);
        };

        var closeDomHighlight = function() {
          if (!$scope.step) { return; }

          var element = getElement($scope.tourScope);
          element.spotlight('close');
        };

        var updateDomHighlight = function() {
          var element = getElement();
          if (!element.length) {
            return;
          }

          element.spotlight({
	          opacity: .5,
	          speed: 400,
	          color: '#333',
	          animate: true,
	          easing: 'linear',				
	          exitEvent: 'mouseenter',
            exitEventAppliesToElement: true,
            paddingX: 1,
            paddingY: 1
          });
        };

        $scope.setStepIndex = function(stepIndex) {
          // Close existing spotlight and signal timer.
          closeDomHighlight();
          stopSignalTimer();

          // Check if there is a next step.
          if (!$scope.tour || stepIndex >= $scope.tour.steps.length) {
            $scope.step = null;
            $scope.hasNextStep = false;
            return;
          }

          $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;

          // Need the timeout here to ensure the click event does not
          // hide the spotlight.
          setTimeout(function() {
            updateDomHighlight();
          }, 1);

          // Start listening for signals to move the tour forward.
          if ($scope.step.signal) {
            startSignalTimer();
          }
        };

        $scope.stop = function() {
          closeDomHighlight();
          $scope.tour = null;
          AngularTour.stop();
        };

        $scope.next = function() {
          $scope.setStepIndex($scope.stepIndex + 1);
        };

        $scope.$watch('tour', function(tour) {
          stopSignalTimer();
          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;
  })

  .factory('AngularTourSignals', ['$location', function($location) {
    var signals = {};

    // Signal: When the page location matches the given path.
    signals.matchesLocation = function(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(tourScope) {
        return $(tourScope._replaceData(elementPath)).length > 0;
      };
    };

    return signals;
  }]);