guided tour

client/src/css/abovetheline.css

@@ -9,8 +9,8 @@ html{
 
 
 body{
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 13px;
+  line-height: 24px;
   color: #1d1d1d;
   height: 100%;
   overflow: hidden;

client/src/css/patch.css

@@ -22,6 +22,12 @@ a.with-number{
   cursor:pointer;
 }
 
+header ul.menu ul.dropdown-menu li a{
+  line-height: 20px;
+      line-height: 2em;
+    padding: 5px 0;
+}
+
 header ul.menu li a{
   line-height: 70px;
   color: #8A8A8A;

client/src/css/style.css

@@ -96,6 +96,10 @@ header ul.dropdown-menu li{
     padding: 0 15px;
 }
 
+header ul.dropdown-menu li a{
+  line-height: 20px
+}
+
 a#header-title {
   color: #151515 ;
   margin-right: 50px;
@@ -1948,6 +1952,11 @@ li.CodeMirror-hint-active {
   height: 18px;
 }
 
+.btn.with-fa .fa{
+  line-height: 17px;
+      font-size: 12px;
+}
+
 .btn.expanded {
   font-size: 13px;
   padding: 10px 20px;
@@ -6821,12 +6830,17 @@ g.note.manual .note-borders{
   max-width: 400px;
   border-radius: 3px;
   background: #383838;
+  box-shadow: 0 5px 10px rgba(0,0,0,.175);
 }
 
 .tour-tip p {
   color: #A9A2A2;
 }
 
+.tour-tip p strong{
+  color: white;
+}
+
 
 .tour-tip .tour-arrow {
   display: block;

client/src/files.js

@@ -40,6 +40,7 @@ module.exports = {
       '/js/lib/angular-route.min.js',
       '/js/lib/angular-resource.min.js',
       '/js/lib/angular-cookies.min.js',
+      '/js/lib/angular-sanitize.min.js',
       '/js/lib/angular-local-storage.min.js',
 
       // translation mechanism

client/src/js/app.js

@@ -26,6 +26,7 @@ angular
     'ui.router',
     'ngRoute',
     'ngResource',
+    'ngSanitize',
     'ngCookies',
     'ui.bootstrap',
     'pascalprecht.translate',// angular-translate
@@ -51,12 +52,14 @@ angular
     ANNOTATOR_HIDDEN: 'annotationEditorHidden',
     INFINITE_SCROLL: 'infinite_scroll',
     // proper angular events (directives needs to be alerted)
-    LOCATION_CHANGE_START: 'LOCATION_CHANGE_START',
-    STATE_CHANGE_SUCCESS: 'STATE_CHANGE_SUCCESS',
+    LOCATION_CHANGE_START: 'location_change_start',
+    STATE_CHANGE_SUCCESS: 'state_change_success',
 
-    STATE_VIEW_CONTENT_LOADED: 'STATE_VIEW_CONTENT_LOADED',
+    STATE_VIEW_CONTENT_LOADED: 'state_view_content_loaded',
     // sigma spefcific events
-    SIGMA_SET_ITEM: 'sigma_set_item'
+    SIGMA_SET_ITEM: 'sigma_set_item',
+    // start tour
+    START_GUIDED_TOUR: 'start_guided_tour',
   })
   .constant("VIZ", {
     TIMELINE: 'timeline'
@@ -94,11 +97,13 @@ angular
   */
   .config(function ($translateProvider) {
     // $translateProvider.useMissingTranslationHandlerLog();
+    $translateProvider.useSanitizeValueStrategy('sanitize');
     $translateProvider.useStaticFilesLoader({
         prefix: 'locale/locale-',// path to translations files
         suffix: '.json'// suffix, currently- extension of the translations
     });
     $translateProvider.preferredLanguage('en_US');// is applied on first load
+
   })
   /*
     Local-storage module config. cfr

client/src/js/controllers/core.js

@@ -83,6 +83,12 @@ angular.module('histograph')
       return $state;
     }
 
+    /*
+      force start the guided tour
+    */
+    $scope.startGuidedTour = function() {
+      $rootScope.$emit(EVENTS.START_GUIDED_TOUR);
+    }
 
     // the current search query, if any
     // $scope.query =  $routeParams.query || '';

client/src/js/controllers/guided-tour.js

@@ -7,34 +7,95 @@
  * 
  */
 angular.module('histograph')
-  .controller('GuidedTourCtrl', function ($rootScope, $scope, $log, $timeout, EVENTS) {
+  .controller('GuidedTourCtrl', function ($rootScope, $scope, $log, $timeout, localStorageService, EVENTS) {
+    'use-strict';
     $log.debug('GuidedTourCtrl ready');
 
     $scope.currentStep = -1;
     $scope.currentView; 
-    $scope.enable = true; // load from settings
+    $scope.enabled = true; // load from settings
+    $scope.consumed = false;
+    $scope.ignoreSkipTip = false;
+
     $scope.steps = {
       'explore.resources': {
-        title: 'The gallery',
+        title: 'The gallery', // default titles
         steps: [
-          0,1, 11
+          {
+            id: 0,
+            title: 'Welcome to Histograph'
+          }, 1,2,3,{
+            id: 4,
+            title: 'timeline'
+          },5
         ]
       }, 
       'resource.resources': {
+        title: 'The resource page',
         steps: [
-          5,6
+          7,8,9,10,11,14
         ]
       },
       'explore.projection': {
+        title: 'The graph view', // default titles
+        steps: [
+          12
+        ]
+      },
+      'skip-tour': {
         steps: [
-          10
+         13
         ]
       }
     };
 
     var currentState,
         __promise;
 
+    /*
+      Load the guided tour status from your local storage, if available.
+      Global guided tour can be disabled via cookies.
+    */
+    $scope.loadCursors = function () {
+      var cursors = localStorageService.get('guidedtour');
+      if(!cursors) {
+        $log.log('GuidedTourCtrl -> loadCursors(), filling localstorage ...');
+        $scope.saveCursors();
+        return
+      }
+      for(var i in cursors) {
+
+        if($scope.steps[i]) {
+          $scope.steps[i].cursor = isNaN(cursors[i].cursor)? 0: cursors[i].cursor;
+          $scope.steps[i].consumed = cursors[i].consumed;
+        }
+      }
+
+      if(cursors.enabled)
+        $scope.enabled = (!!cursors.enabled) || true;
+      // prevent the helper popoup that indicates how to start over to appear twice
+      if(cursors.ignoreSkipTip) {
+        $scope.ignoreSkipTip = true;
+      }
+      $log.log('GuidedTourCtrl -> loadCursors() - cursors:', cursors, '- enable:', $scope.enabled, '- steps:', $scope.steps);
+
+    }
+
+    $scope.saveCursors = function() {
+      var cursors = {};
+      for(var i in $scope.steps) {
+        cursors[i] = {
+          cursor: $scope.steps[i].cursor || 0,
+          consumed: $scope.steps[i].consumed
+        }
+      }
+      cursors.enabled = $scope.enabled;
+      $log.log('GuidedTourCtrl -> saveCursors() - cursors:', cursors, '- enable:', cursors.enabled);
+      cursors.ignoreSkipTip = $scope.ignoreSkipTip;
+      localStorageService.set('guidedtour', cursors);
+    }
+
+
     /*
       According to the view we are in
     */
@@ -44,34 +105,100 @@ angular.module('histograph')
 
 
     $scope.previousStep = function() {
-      $scope.moveTo($scope.steps[currentState].cursor - 1);
+      var cursor = Math.max(0, $scope.steps[currentState].cursor - 1);
+
+      if($scope.byebye) {
+        cursor++;
+        $scope.byebye = false;
+      }
+
+      $scope.moveTo(cursor);
+    }
+
+    $scope.finish = function(){
+      // save the completion?
+      $scope.skip();
     }
 
 
+    $scope.skip = function() {
+      $scope.steps[currentState].consumed=true;
+      $scope.saveCursors();
+
+      if($scope.ignoreSkipTip){
+        $scope.currentStep = -1;
+        return;
+      };
+
+      $scope.currentStep = $scope.steps['skip-tour'].steps[0];
+      $scope.hasPrevious = false;
+      $scope.hasNext = false;
+      $scope.byebye = true;
+      $scope.ttTitle = "see you later";
+
+    }
+
+    $scope.confirmSkip = function(){
+      $scope.currentStep = -1;
+      $scope.ignoreSkipTip=true;
+
+      $scope.saveCursors();
+    }
+
     $scope.moveTo = function(index) {
 
       $scope.hasPrevious = index > 0;
       $scope.hasNext = index < $scope.steps[currentState].steps.length - 1;
-      $scope.currentStep = $scope.steps[currentState].steps[index];
+
+
+      var stepId,
+          stepTitle; 
+      // if there is a detailed step id
+      if(typeof $scope.steps[currentState].steps[index] == 'number'){
+        stepId = $scope.steps[currentState].steps[index];
+        stepTitle = $scope.steps[currentState].title;
+      } else {
+        stepId = $scope.steps[currentState].steps[index].id;
+        stepTitle = $scope.steps[currentState].steps[index].title;
+      }
+
+      $scope.currentStep = stepId;
       $scope.steps[currentState].cursor = index;
-      $log.log('GuidedTourCtrl -> moveTo() cursor:', index, '/', $scope.steps[currentState].steps.length, '- aka touring step n:',  $scope.steps[currentState].steps[index], '- has next:', $scope.hasNext, '- has previous:', $scope.hasPrevious );
+
 
-      $scope.ttTitle= [
-            $scope.steps[currentState].title || '',
+      $scope.ttTitle= [stepTitle || ''].concat($scope.steps[currentState].steps.length > 1? [ 
             ' (',
             (+$scope.steps[currentState].cursor + 1),
              ' of ',
             $scope.steps[currentState].steps.length,
-            ')'
-          ].join('');
+            ')']: []).join('');
+
+      $scope.steps[currentState].consumed = index == $scope.steps[currentState].steps.length - 1;
+
+      $scope.consumed = !!$scope.steps[currentState].consumed;
+
+      $log.log('GuidedTourCtrl -> moveTo() cursor:', index+1, '/', $scope.steps[currentState].steps.length, '- aka touring step id:',  stepId, '- has next:', $scope.hasNext, '- has previous:', $scope.hasPrevious, '- consumed:',  $scope.steps[currentState].consumed);
+      $scope.saveCursors();
     }
 
+    $scope.start = function() {
+      $log.log('GuidedTourCtrl -> start() state:', currentState)
+      if(!currentState)
+        return;
+      if($scope.forceStart)
+        $scope.steps[currentState].cursor = 0; // clone;
+      $scope.forceStart = false;
+      $scope.byebye = false;
+      $scope.consumed = false;
+      $scope.moveTo($scope.steps[currentState].cursor);
+    }
     /*
       Set the current step to the correct number according to the view we are in
     
     */
     $scope.$on(EVENTS.STATE_CHANGE_SUCCESS, function(){
-      $scope.currentStep = -1
+      $scope.currentStep = -1;
+      currentState = false;
     });
 
     $rootScope.$on(EVENTS.STATE_VIEW_CONTENT_LOADED, function(e, state) {
@@ -80,18 +207,26 @@ angular.module('histograph')
       if(__promise)
         $timeout.cancel(__promise);
 
-      if(!$scope.enable)
+      if(!$scope.enabled)
         return;
       __promise = $timeout(function(){
-        if($scope.steps[state.name] && !$scope.steps[state.name].consumed) {
-
-          if(typeof $scope.steps[state.name].cursor == 'undefined')
-            $scope.steps[state.name].cursor = 0; // clone;
-
-
-
-          $scope.moveTo($scope.steps[state.name].cursor);
+        if($scope.steps[state.name] && (!$scope.steps[state.name].consumed || $scope.forceStart)) {
+          $log.log('GuidedTourCtrl @EVENTS.STATE_VIEW_CONTENT_LOADED ready for', state.name)
+          $scope.start();
+        } else if($scope.steps[state.name] && $scope.steps[state.name].consumed) {
+          $log.log('GuidedTourCtrl @EVENTS.STATE_VIEW_CONTENT_LOADED nothing to do, the guided tour has already been completed for the', state.name, 'view');
         }
       }, 3500);
     });
+
+    $rootScope.$on(EVENTS.START_GUIDED_TOUR, function(){
+      $scope.forceStart = true;
+      $scope.start();
+       $log.log('GuidedTourCtrl @EVENTS.START_GUIDED_TOUR', currentState);
+    })
+
+    /*
+      load settings and current cursors from localstorage
+    */
+    $scope.loadCursors();
   });