Multipage Tour (with session-cookie to next page)

Change-Id: I39d7ec4b5b403176e3f7800612f4ea4107ad5fed
diff --git a/dev/demo/all.html b/dev/demo/all.html
index 9b63bc4..8417903 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -33,7 +33,7 @@
 		 id="q-field"
 		 value="abcdefghijklmnopqrstuvwxyz"
 		 autofocus="autofocus" />
-	  <button type="submit"><span>Go</span></button>
+	  <button id="qsubmit" type="submit"><span>Go</span></button>
 	  <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
 	</div>
 
@@ -250,7 +250,7 @@
 	<p ><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
 	<p>This is the new frontend for KorAP, with currently no access to restricted corpora. For full access, please visit the <a href="http://korap.ids-mannheim.de/app">first frontend</a>.</p>
 
-    <p><strong>New to KorAP?</strong> Please check out our <a href="#" onclick="tourshow()"> guided tour </a> or our <a href="#">tutorial</a>!</p>
+    <p><strong>New to KorAP?</strong> Please check out our <a href="#" onclick="KorAP.tourshow()"> guided tour </a> or our <a href="#" onclick="KorAP.tourshowR()"> secondTour </a> our <a href="#">tutorial</a>!</p>
 
 	<p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Institute for the German Language</a> and funded by the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
 
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index c32ce7e..6f9f60b 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -804,13 +804,6 @@
   };
 
 
-  tourshow =  function(){
-    var tourClass = require('tour/tours');
-    let tour = tourClass.guidedTour();
-    tour.start();
-  };
-  
-
   /**
    * Do some things at the beginning.
    */
diff --git a/dev/js/spec/tourSpec.js b/dev/js/spec/tourSpec.js
index b4d7ebb..f30cc32 100644
--- a/dev/js/spec/tourSpec.js
+++ b/dev/js/spec/tourSpec.js
@@ -4,7 +4,7 @@
  * @author Helge Stallkamp
  */
 
-define(['tour/tours', 'vc'], function(tourClass, vcClass){
+define(['tour/tours', 'vc', 'session'], function(tourClass, vcClass, sessionClass){
   const loc   = KorAP.Locale;
  
   //TODO Read this file from the file system, see https://korap.ids-mannheim.de/gerrit/#/c/KorAP/Kalamar/+/2241/
@@ -12,7 +12,7 @@
   	"<form autocomplete='off' action='/' id='searchform'>" + 
     "<div id='searchbar' class=''>" +
       "<input autocapitalize='off' autocomplete='off' autocorrect='off' autofocus='autofocus' id='q-field' name='q' placeholder='Finde ...' spellcheck='false' type='search'>" +
-      "<button type='submit' title='Los!'><span>Los!</span></button>" +
+      "<button type='submit' id='qsubmit' title='Los!'><span>Los!</span></button>" + 
     "</div>" + 
     "<!-- Search in the following virtual collection -->"+
     "<div id='vc-view'></div>" +
@@ -65,7 +65,7 @@
           "</div>"; 
 
   let template = document.createElement('template');
-  html = introKorAP2.trim(); // Do not return a text node of whitespace as the result
+  html = introKorAP.trim(); // Do not return a text node of whitespace as the result
   template.innerHTML = html;
   intrkorap = template.content;
   
@@ -80,30 +80,39 @@
       expect(intrkorap.querySelector('#ql-field').parentNode).not.toBeNull();
       expect(intrkorap.querySelector('#glimpse')).not.toBeNull();
       expect(intrkorap.querySelector('#view-tutorial')).not.toBeNull();
-      expect(intrkorap.querySelector('#searchbar button[type=submit]')).not.toBeNull();
+      expect(intrkorap.querySelector('#qsubmit')).not.toBeNull();
     });
     
    
   
    it('Guided Tour should be started and display steps and labels in the right order', function(){
-     let testTour = tourClass.guidedTour(intrkorap);
-     testTour.start();
-     let totalSteps = testTour.stepCount;
- 
+     let searchTour = tourClass.gTstartSearch(intrkorap);
+     searchTour.start();
+     let totalSteps = searchTour.stepCount;
      expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(loc.TOUR_sear1);
      expect(document.querySelector(".introjs-skipbutton").textContent).toEqual(loc.TOUR_lskip);
      expect(document.querySelector(".introjs-prevbutton").textContent).toEqual(loc.TOUR_lprev);
      expect(document.querySelector(".introjs-nextbutton").textContent).toEqual(loc.TOUR_lnext);
-     testTour.exit();
+     searchTour.exit();
      
      for(let i = 2; i <= totalSteps; i++){
-       testTour.goToStepNumber(i);
-       expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(testTour.testIntros[i-1]);
+       searchTour.goToStepNumber(i);
+       expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(searchTour.testIntros[i-1]);
        if(i == totalSteps){
-         expect(document.querySelector('.introjs-donebutton').textContent).toEqual(loc.TOUR_ldone);
+         expect(document.querySelector(".introjs-donebutton").textContent).toEqual(loc.TOUR_seargo);
+         expect(document.querySelector(".introjs-prevbutton").textContent).toEqual(loc.TOUR_lprev);
+         expect(document.querySelector(".introjs-nextbutton").classList.contains("introjs-disabled")).toBe(true);
        } 
-       testTour.exit();
-     }   
+       searchTour.exit();
+     } 
+     
+     let resultTour = tourClass.gTshowResults(intrkorap);
+     KorAP.session = sessionClass.create('KalamarJSDem'); 
+     resultTour.start();
+     expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(loc.TOUR_result);
+     expect(document.querySelector(".introjs-donebutton").textContent).toEqual(loc.TOUR_ldone);   
+     resultTour.exit();
+    
    }); 
   });
 }    
diff --git a/dev/js/src/app/de.js b/dev/js/src/app/de.js
index 332ee07..142c276 100644
--- a/dev/js/src/app/de.js
+++ b/dev/js/src/app/de.js
@@ -1,3 +1,3 @@
 window.KorAP = window.KorAP || {};
 KorAP.Locale = KorAP.Locale || {};
-require(['loc/de','init']);
+require(['loc/dereko', 'loc/de', 'init']);
diff --git a/dev/js/src/app/en.js b/dev/js/src/app/en.js
index e851239..3521c84 100644
--- a/dev/js/src/app/en.js
+++ b/dev/js/src/app/en.js
@@ -1,3 +1,3 @@
 window.KorAP = window.KorAP || {};
 KorAP.Locale = KorAP.Locale || {};
-require(['init']);
+require(['loc/dereko', 'init']);
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index b78e870..ec11cf5 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -65,7 +65,16 @@
 
   KorAP.vc = vcClass.create(vcArray); 
   
+  KorAP.tourshow =  function(){
+    tourClass.gTstartSearch().start();
+  };
+ 
+  KorAP.tourshowR = function(){
+    tourClass.gTshowResults().start();
+  };
+    
   domReady(function (event) {
+      
     var obj = {};
 
     // What should be visible in the beginning?
@@ -343,7 +352,13 @@
         };
       });
     };
-
+ 
+    
+    //Starts the guided tour at the next page
+    if(KorAP.session.get("tour")){
+      tourClass.gTshowResults().start();
+    }
+    
     /**
      * Init hint helper
      * has to be final because of
@@ -360,11 +375,4 @@
     return obj;
   });
   
-
-  tourshow =  function(){
-    let tour = tourClass.guidedTour();
-    tour.start();
-  };
-   
-  
 });
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 76f72bc..5cd7b68 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -52,7 +52,7 @@
   
   //Guided Tour: Steps
   loc.TOUR_sear1 = "Geben Sie die Suchanfrage hier ein.";
-  loc.TOUR_sear2 = "Zum Beispiel die Suche nach 'Baum'";
+  loc.TOUR_sear2 = "Zum Beispiel die Suche nach '"+ loc.TOUR_Qexample +  "'";
   loc.TOUR_searAnnot ="Für die Suche nach Annotationen steht der Annotationsassistent zur Verfügung.";
   loc.TOUR_annotAss = "Der Annotationsassistent erleichert die Formulierung von Suchanfragen mit Annotationen.";
   loc.TOUR_vccho1 = "Öffnen des Korpusassistenten";
@@ -62,4 +62,8 @@
   loc.TOUR_glimpse = "Beim Wählen dieser Option wird festgelegt ob nur die ersten Treffer in zufälliger Reihenfolge ausgewählt werden.";
   loc.TOUR_help = "Hier finden Sie Hilfe zu KorAP.";
   loc.TOUR_seargo = "Suchanfrage starten";
+  
+  //Guided Tour: explain the result
+  loc.TOUR_result = "Viel Spaß mit KorAP!";
+  
 });
diff --git a/dev/js/src/loc/dereko.js b/dev/js/src/loc/dereko.js
new file mode 100644
index 0000000..1bd7a57
--- /dev/null
+++ b/dev/js/src/loc/dereko.js
@@ -0,0 +1,10 @@
+/**
+ * Corpus specific localization, here for DeReKo (http://www1.ids-mannheim.de/kl/projekte/korpora.html)
+ * 
+ * @author Helge Stallkamp
+ */
+
+define(function () {
+  const loc = KorAP.Locale;
+  loc.TOUR_Qexample = loc.TOUR_Qexample || "laufen";
+});
\ No newline at end of file
diff --git a/dev/js/src/tour/tours.js b/dev/js/src/tour/tours.js
index f33c56d..b4302e0 100644
--- a/dev/js/src/tour/tours.js
+++ b/dev/js/src/tour/tours.js
@@ -5,19 +5,19 @@
  */
 
 define(['lib/intro', 'vc'], function(introClass, vcClass) {
-  
+
   //needed for localization of labels and contents of the tour
   const loc   = KorAP.Locale;
-  
+
   //labels for nextStep, previousStep, done and abort
   loc.TOUR_lskip = loc.TOUR_lskip || "Abort";
   loc.TOUR_lprev = loc.TOUR_lprev || "Back";
   loc.TOUR_lnext = loc.TOUR_lnext || "Next";
   loc.TOUR_ldone = loc.TOUR_ldone || "Done";
-  
-  //localization tours
+
+  //localization guided tour gTstartSearch
   loc.TOUR_sear1 = loc.TOUR_sear1 || "Enter your search enquiry here.";
-  loc.TOUR_sear2 = loc.TOUR_sear2 || "For example the search for 'Baum'...";
+  loc.TOUR_sear2 = loc.TOUR_sear2 || "For example the search for '" +  loc.TOUR_Qexample + "'";
   loc.TOUR_searAnnot = loc.TOUR_searAnnot || "Annotation helper: By clicking here, the annotations of the differents layers are displayed and can be selected.";
   loc.TOUR_annotAss =  loc.TOUR_annotAss || "The annoation assistant helps to formulate queries with annotations";
   loc.TOUR_vccho1 = loc.TOUR_vccho1 || "Choose corpus by clicking here.";  
@@ -27,35 +27,39 @@
   loc.TOUR_help = loc.TOUR_help || "Help and more information about KorAP.";
   loc.TOUR_glimpse = loc.TOUR_glimpse || "Select to show only the first hits in arbitrary order.";
   loc.TOUR_seargo = loc.TOUR_seargo || "Start the search.";
+  //localization guided Tour gTshowResults
+  loc.TOUR_result = loc.TOUR_result || "Have fun with KorAP!";
   
   //localization of button labels
-   let labelOptions = {
-          'skipLabel': loc.TOUR_lskip, 
-          'prevLabel': loc.TOUR_lprev,
-          'nextLabel': loc.TOUR_lnext,
-          'doneLabel': loc.TOUR_ldone,
-          'showStepNumbers': false,
+  let labelOptions = {
+      'skipLabel': loc.TOUR_lskip, 
+      'prevLabel': loc.TOUR_lprev,
+      'nextLabel': loc.TOUR_lnext,
+      'doneLabel': loc.TOUR_ldone,
+      'showStepNumbers': false,
   };
-  
-  let intro = introClass();
-  intro.setOptions(labelOptions);
-  
-  
+
   return{
-    
+
     /** 
-     * Guided Tour: Definition of steps 
+     * Guided Tour gTstartSearch: Explains the search functionality
      */
-    guidedTour:function(elparam){
-      
+    gTstartSearch:function(elparam){
+
+      let intro = introClass();
+      intro.setOptions(labelOptions);
+      intro.setOption('doneLabel', loc.TOUR_seargo);
+     
+      //for testing purposes
       var doe = document;
       if(elparam){
         doe = elparam;
       }
-  
+
       let input = doe.querySelector("#q-field");
       input.value="";
       
+
       //steps of the example tour
       let Steps =[
         {
@@ -72,82 +76,121 @@
           element: '#hint',
           intro: loc.TOUR_searAnnot,
           position: 'bottom'
-         },
-         {
+        },
+        {
           element:'#vc-choose',
           intro: loc.TOUR_vccho1,
           position: "bottom",
-         },
-         {
-           element:'#vc-view',
-           intro: loc.TOUR_vccho2,
-           position: "bottom",
-         }, 
-         {
-           element: doe.querySelector('#ql-field').parentNode,
-           intro: loc.TOUR_qlfield,
-           position: "bottom",
-         },  
-         {
-           element:'#glimpse',
-           intro: loc.TOUR_glimpse,
-           position: "bottom",
-         }, 
-         {
-           element:'#view-tutorial',
-           intro: loc.TOUR_help,
-           position: "bottom",
-         },
-         {
-           element: doe.querySelector('#searchbar button[type=submit]'),
-           intro: loc.TOUR_seargo,
-           position: "bottom",
-         },
-       ];
-   
+        },
+        {
+          element:'#vc-view',
+          intro: loc.TOUR_vccho2,
+          position: "bottom",
+        }, 
+        {
+          element: doe.querySelector('#ql-field').parentNode,
+          intro: loc.TOUR_qlfield,
+          position: "bottom",
+        },  
+        {
+          element:'#glimpse',
+          intro: loc.TOUR_glimpse,
+          position: "bottom",
+        }, 
+        {
+          element:'#view-tutorial',
+          intro: loc.TOUR_help,
+          position: "bottom",
+        },
+        {
+          element: '#qsubmit',
+          intro: loc.TOUR_seargo,
+          position: "bottom",
+        },
+        ];
+
       //pass in the Steps array created earlier
       intro.setOptions({steps: Steps});
-   
+
       //total number of steps, needed for jasmine tests
-      //See also: introJS.totalSteps() merge requested: //github.com/usablica/intro.js/pull/268/files
+      //TODO see also: introJS.totalSteps() merge requested: //github.com/usablica/intro.js/pull/268/files
       intro.stepCount = Steps.length;
-    
+
       //array of intro content needed for efficient testing
       intro.testIntros = [];
-        for(let i = 0; i< Steps.length; i++){
+
+      for(let i = 0; i< Steps.length; i++){
         intro.testIntros.push(Steps[i].intro);
-        }
-  
-        //changes before executing the single steps
-        intro.onbeforechange(function(targetedElement){
-          switch(targetedElement.id){
-          case "searchbar": 
-            if(this._currentStep == 1){ 
-              input = doe.querySelector('#q-field');
-              input.value="Baum";
-            }   
-            break;
+      }
+
+      //changes before executing the single steps
+      intro.onbeforechange(function(targetedElement){
+        switch(targetedElement.id){
+        case "searchbar": 
+          if(this._currentStep == 1){ 
+            input = doe.querySelector('#q-field');
+            input.value= loc.TOUR_Qexample;
+          }   
+          break;
+
+        case "vc-view":  
+          vchoo = doe.querySelector("#vc-choose");
+          vcv = doe.querySelector("#vc-view");  
+          KorAP._delete.apply(KorAP.vc.root());
+          KorAP.vc.root().key("creationDate").update();
+          KorAP.vc.root().value("1820").update();  
+          if(!(vcv.querySelector(".active"))){
+            vchoo.click();
+          }   
+          break;   
           
-          case "vc-view":  
-            vchoo = doe.querySelector("#vc-choose");
-            vcv = doe.querySelector("#vc-view");  
-            KorAP._delete.apply(KorAP.vc.root());
-            KorAP.vc.root().key("creationDate").update();
-            KorAP.vc.root().value("1820").update();  
-            if(!(vcv.querySelector(".active"))){
-              vchoo.click();
-            }   
-            break;     
-      } 
-    });
-    
-    // Execute at the end of the tour (By clicking at the done-Button)
-    intro.oncomplete(function(){
-      input.value="";
-      KorAP._delete.apply(KorAP.vc.root());
+        /*
+        * Sets button labels for the last step of the tour
+        * Because Kalamar is a multipage webapplication, this tours starts by
+        * completion the gTshowResults Tour. Therefore, the skip-button is removed
+        * and the label of the done button changed.
+         */
+         
+        case "qsubmit":
+            intro.setOption('hideNext', true);
+          break;
+        } 
       });
-    
-    return intro;
+
+
+      // Execute at the end of the tour (By clicking at the done-Button)
+      intro.oncomplete(function(){
+        KorAP.session.set("tour", true);
+        let form = doe.getElementById("searchform");
+        form.submit();
+        //input.value="";
+        //KorAP._delete.apply(KorAP.vc.root()); 
+      });
+
+      return intro;
     },
+
+
+    /* Guided Tour to explain the different views of the results */     
+    gTshowResults: function(elparam){  
+      if(elparam){
+        doe = elparam;
+      }
+      let tourR = introClass();
+      let StepsSR = [
+        {     
+          intro: loc.TOUR_result,
+        }
+        ]
+      tourR.setOptions({steps:StepsSR});
+      tourR.setOptions(labelOptions);
+      
+      tourR.onbeforechange(function (){ 
+        KorAP.session.set("tour", false);
+      });
+      
+      return tourR;
+    },  
+
   }
 });
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index 3806197..fd65a08 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -9,7 +9,7 @@
   
   <p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <%= doc_opener 'korap', begin %>Einführung<% end %>!</p>
 
-  <!--<p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a href="#" onclick="tourshow()"> Tour</a> oder mit der <%= doc_opener 'korap', begin %>Einführung<% end %>!</p> -->
+  <!-- <p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a href="#" onclick="KorAP.tourshow()"> Tour</a> oder mit der <%= doc_opener 'korap', begin %>Einführung<% end %>!</p> -->
   %= include 'announcement', lang => 'de'
 
   <p>KorAP wird am <a href="http://www.ids-mannheim.de">Leibniz-Institut für Deutsche Sprache</a> in Mannheim entwickelt, Mitglied der <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Gemeinschaft</a>. Die einzelnen Module werden als Open Source auf <a href="http://github.com/KorAP">GitHub</a> veröffentlicht.</p>
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 91761db..e9895e6 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -8,7 +8,7 @@
 
   <p><strong>New to KorAP?</strong> Please check out our <%= doc_opener 'korap', begin %>tutorial<% end %>!</p>
   
-  <!-- <p><strong>New to KorAP?</strong> Please check out our <a href="#" onclick="tourshow()">guided tour</a> or our <%= doc_opener 'korap', begin %>tutorial<% end %>!</p> -->    
+ <!-- <p><strong>New to KorAP?</strong> Please check out our <a href="#" onclick="KorAP.tourshow()">guided tour</a> or our <%= doc_opener 'korap', begin %>tutorial<% end %>!</p> -->
   %= include 'announcement', lang => 'en'
 
   <p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Leibniz Institute for the German Language</a>, member of the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index d007f94..8992b0f 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -6,7 +6,7 @@
   <form autocomplete="off" action="<%= url_for 'index' %>" id="searchform">
     <div id="searchbar">
       %= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder'), spellcheck => 'false', autocomplete => 'off', autocorrect => 'off', autocapitalize => 'off'
-      <button type="submit" title="<%= loc 'go' %>"><span><%= loc 'go' %></span></button>
+      <button type="submit" id="qsubmit" title="<%= loc 'go' %>"><span><%= loc 'go' %></span></button>
     </div>
 
     <!-- Search in the following virtual collection -->