TOUR [WIP] Opening native popover

static/lib/gargantext/guided_tour.js

@@ -26,29 +26,47 @@ function popOverFactory(selector, pos, confirmation){
 
 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 nextStep(element, i){
   steps = $(document).find(".tour")
   $(document).on("click", "button[data-role='next']", function(e){
     console.log("curr", element);
     $(element).popover("hide");
+    native_pop = $(element).children()
+
+    native_pop.popover("show");
     i = i+1
-    element = steps[i]
-    console.log("next", element);
-    popOverFactory(element, "right");
-    $(element).popover("show");
-    return [i, element];
+    active = $.find(".in")
+
+    if (active.length > 0){
+      return [native_pop, i]
+    }
+    else{
+      element = steps[i]
+      console.log("next", element);
+
+      popOverFactory(element, "right");
+      $(element).popover("show");
+
+      return [element, i];
+    }
   });
+
 }
-function prevStep(){
+function prevStep(element, i){
   steps = $(document).find(".tour")
-  $(document).on("click", "button[data-role=next]", function(e){
-    alert("prev");
+  $(document).on("click", "button[data-role='prev']", function(e){
+    console.log("curr", element);
+    $(element).popover("hide");
+    alert(i)
+    i = i-1
+    alert(i)
+    element = steps[i]
+    console.log("prev", element);
+    console.log("child", $(document).find(".popover"));
+    popOverFactory(element, "right");
+    $(element).popover("show");
+    return [element, i];
   });
 }
 
@@ -56,8 +74,8 @@ 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("hide");
+        //$('.popover').popover('hide');
         //$(this).popover("destroy");
     }
     else {
@@ -68,14 +86,21 @@ function activateTour(){
       $('.popover').not(this).popover('hide');
       //show the popover
       $(this).popover('toggle');
-      //buildTour()
+      //buildTour
+      curr = $(this)
+      i = -1
+      curr, i = nextStep(curr, i)
+      console.log(i, curr)
+      if (i > steps.lenght){
+        return false
+      }
+      if (i == -2){
+        return false
+      }
+      if (curr == "undefined"){
+        return false
+      }
 
-      curr = nextStep($(this), -1)
-      console.log(curr)
-      // while ($(document).hasClass("collapse in tour")){
-      //     curr, i = nextStep(curr, i)
-      //     console.log(curr, i)
-      //
     }
   })
 }

templates/pages/projects/overview.html

@@ -48,13 +48,17 @@
             </h1>
         </div>
         <div class="col-md-3"></div>
+
         <div class="col-md-5">
-            <p class="tour" title="Create a New Project" content="<p>Click on the button to create a project</p>">
+          <p class="tour" title="Create a New Project" content="Create a new project by clicking on +'Add a new project'">
             <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">
                     {% csrf_token %}
@@ -62,7 +66,7 @@
                     </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">
+                      <input class="col-lg-8 help" data-toogle="tooltip" type="text" id="inputName"  text="Add the name of your project">
                     </div>
 
                     <div class="row inline">
@@ -72,8 +76,9 @@
                     </div>
                   </div>
               </div>
-        </p>
+            </p>
         </div>
+
     </div>
 </div>
 
@@ -87,7 +92,7 @@
     </div>
     <!-- CHECKBOX EDITION -->
     <div class="row collapse" id="editor">
-          <button title="delete selected project" type="button" class="btn btn-danger" id="delete">
+          <button title="delete selected project" type="button" class="btn btn-danger" id="delete" title="Projects" content="You can select and delete the corresponding project">
             <span class="glyphicon glyphicon-trash " aria-hidden="true" ></span>
           </button>
           <!--
@@ -105,7 +110,7 @@
 
 
 
-    <div class="row container" id="projects">
+    <div class="row container" id="projects" class="tour" title="Project Detail" content="You can access to the project by clicking on the link, edit or delete the corresponding project using the button">
             <!--here loading projectlist from GET /projects-->
     </div>