[WIP] test on guided tour : popup folies

static/lib/gargantext/guided_tour.js

-var steps = {}
-
-function nextStep(num) {
-  return p[($.inArray(num, p) + 1) % p.length];
-}
-function previousStep(num) {
-  return p[($.inArray(num, p) - 1) % p.length];
-}
-function isPopover(e){
-  if e.hasClass("popover"){
-    return True
-  }
-  else{
-    return False
-  }
-}
-function buildTour(){
-  steps = $(".tour")
-  console.log(steps.length)
-  $(".tour").each(function(i, obj){
-    var me = $(this);
-    //alert($(this));
-    console.log(obj)
-    console.log(i, me.text());
-  });
-};
-
-modal_tpl = '<div id={modal_id} class="modal">'+
-  <!-- Modal content -->
-  '<div class="modal-content">'+
-  '<span id="cancel" class="close">x</span>'+
-  '<span id="ok" class="submit">x</span>'+
-  '{modal_content}'
-  '</div>'+
-'</div>'
-
-function modalFactory(selector, id, content){
-  $(selector).attr({  "type": "button"});
-
-};
-
 function popOverFactory(selector, pos, confirmation){
+  //Factory for popover indicated by class tour
+  // transforming into btn and mapping title and content
   $(selector).attr({  "type": "button",
                       "data-toggle": "popover",
                       "data-placement": pos,
@@ -48,9 +9,52 @@ function popOverFactory(selector, pos, confirmation){
                     });
   $(selector).popover({
     html:true,
-    title: '<h2>'+selector.attr("title")+'</h2>',
+    title: '<h1>'+selector.attr("title")+'</h1>',
     content: '<p class="text-center">'+selector.attr("content")+'</p>'+
-    '<div class="btn-group"><button class="btn btn-small btn-info" id="ok">Yes</button>'+
-    '<button class="btn btn-small btn-danger" id="close">No</button></div>',
+    '<div class="btn-group col-sm-12">'+
+              '<button class="col-sm-6 btn btn-sm btn-danger" data-role="prev">&laquo; Prev</button>'+
+              '<button class="col-sm-6 btn btn-sm  btn-success" data-role="next">Next &raquo;</button>'+
+            '</div><br>',
+    container: 'body',
+    trigger:"toogle"
   });
+  //$('.btn').not(this).popover('hide');
+  //$(selector).popover('toggle');
 };
+
+
+var steps = {}
+
+function nextStep(p, val) {
+  return p[($.inArray(val, p) + 1) % p.length];
+}
+function previousStep(p, num) {
+  return p[($.inArray(val, p) - 1) % p.length];
+}
+function activateTour(){
+  $(document).on("click", "a#guided_tour", function(e){
+    if ($(this).parent().hasClass("active")){
+        $(this).parent().removeClass("active");
+
+        //$(this).popover("hide");
+        $('.popover').popover('hide');
+        //$(this).popover("destroy");
+    }
+    else {
+      $(this).parent().addClass("active");
+      //create the popover
+      popOverFactory($(this), "bottom", true);
+      //hide the other popover
+      $('.popover').not(this).popover('hide');
+      //show the popover
+      $(this).popover('toggle');
+      //buildTour()
+      steps = $(document).find(".tour")
+      console.log(steps)
+      $(".tour").each(function(i, obj, steps){
+          popOverFactory($(this), "right", true)
+          $(this).popover("show");
+
+        })
+      }
+  })};

templates/pages/menu.html

@@ -70,7 +70,7 @@
                     </ul>
                     <ul class="nav navbar-nav pull-right">
                       <li>
-                        <a id="guided_tour" role="button" title="Guided Tour" content="Activate the discovery mode">
+                        <a id="guided_tour" role="button" title="Guided Tour" content="Welcome to Guided Tour of Gargantext plateform. Deactivate the tour by clicking on the main nav button. Navigate throught step using previous and next">
                               <i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i>
                               Guided Tour
                         </a>
@@ -350,27 +350,8 @@
                     return $("#popover-content").html();
                 }
             });});
-
-            $(document).on("click", "a#guided_tour", function(e){
-              //make tab active
-              $(this).parent().addClass("active");
-              popOverFactory($(this), "bottom", true);
-              $(this).popover("show");
-              buildTour();
-
-            });
-            $(document).on("click", "button#close", function(e){
-
-              $(this).popover("hide");
-            });
-            $(document).on("click", "button#ok", function(e){
-
-              popOverFactory($("p#add_help"), "left", false);
-              $("p#add_help").popover("show");
-              //$("button#add").popover("show");
-              $(this).parent().parent().parent().remove();
-            });
-
+            activateTour();
+            
         </script>
 
 

templates/pages/projects/overview.html

@@ -42,27 +42,27 @@
     <div class="jumbotron">
         <div class="row">
         <div class="col-md-4">
-            <h1 class="tour" title="" content="">
+            <h1 class="tour" title="Projects" content="This is the page for all your project">
                 <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                 Projects
             </h1>
         </div>
         <div class="col-md-3"></div>
         <div class="col-md-5">
-            <p class="tour" id="add_help" title="STEP 1: create a New Project" content="<p>Click on the button to create a project</p>">
+            <p class="tour" title="Create a New Project" content="<p>Click on the button to create a project</p>">
             <br>
             <button id="add" type="button" class="btn btn-primary btn-lg" data-container="body" data-toggle="popover" data-placement="bottom">
                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                 Add a new project
             </button>
             <div id="popover-content"  class="hide">
-                <div id="createForm" class="form-group tour">
+                <div id="createForm" class="form-group tour" title="Project" content="Add a name for your project">
                     {% csrf_token %}
                     <div id="status-form" class="collapse">
                     </div>
                     <div class="row inline">
                       <label class="col-lg-3" for="inputName" ><span class="pull-right">Name:</span></label>
-                      <input class="col-lg-8" type="text" id="inputName" class="form-control tour">
+                      <input class="col-lg-8" type="text" id="inputName" class="form-control">
                     </div>
 
                     <div class="row inline">