Added to Tour: Corpus Statistic Button

Change-Id: I365d8283ba126e922c09c94dc7b5a8dc68043c7d
diff --git a/dev/js/spec/tourSpec.js b/dev/js/spec/tourSpec.js
index f30cc32..18d3b4e 100644
--- a/dev/js/spec/tourSpec.js
+++ b/dev/js/spec/tourSpec.js
@@ -63,6 +63,8 @@
             "</ul>" +
            "</div>" +
           "</div>"; 
+  
+  
 
   let template = document.createElement('template');
   html = introKorAP.trim(); // Do not return a text node of whitespace as the result
@@ -81,6 +83,16 @@
       expect(intrkorap.querySelector('#glimpse')).not.toBeNull();
       expect(intrkorap.querySelector('#view-tutorial')).not.toBeNull();
       expect(intrkorap.querySelector('#qsubmit')).not.toBeNull();
+      let vc= vcClass.create().fromJson({
+        '@type' : 'koral:doc',
+        'key' : 'title', 
+        'match': 'match:eq',
+        'value' : 'TestTour!',
+        'type'  : 'type:string'      
+      });
+      var show = document.createElement('div');
+      show.appendChild(vc.element());
+      expect(show.querySelector('.statistic')).not.toBeNull();
     });
     
    
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 5cd7b68..de0ab80 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 '"+ loc.TOUR_Qexample +  "'";
+  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";
diff --git a/dev/js/src/tour/tours.js b/dev/js/src/tour/tours.js
index b4302e0..660338e 100644
--- a/dev/js/src/tour/tours.js
+++ b/dev/js/src/tour/tours.js
@@ -17,7 +17,7 @@
 
   //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 '" +  loc.TOUR_Qexample + "'";
+  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.";  
@@ -88,6 +88,11 @@
           position: "bottom",
         }, 
         {
+          element: doe.querySelector('.statistic'),
+          intro: loc.TOUR_vcStat,
+          position: "left",
+        },
+        {
           element: doe.querySelector('#ql-field').parentNode,
           intro: loc.TOUR_qlfield,
           position: "bottom",
@@ -127,6 +132,11 @@
       intro.onbeforechange(function(targetedElement){
         switch(targetedElement.id){
         case "searchbar": 
+          /* 
+           * TODO:
+           * #268 is not merged at the time beeing: 
+           * introJs.currentStep() merge requested https://github.com/usablica/intro.js/pull/268/files
+           */
           if(this._currentStep == 1){ 
             input = doe.querySelector('#q-field');
             input.value= loc.TOUR_Qexample;
@@ -141,6 +151,11 @@
           KorAP.vc.root().value("1820").update();  
           if(!(vcv.querySelector(".active"))){
             vchoo.click();
+            /*
+             * Intro.js caches elements at the beginning, so element and position has to be set again.
+             */
+            intro._introItems[5].element = doe.querySelector(".statistic");
+            intro._introItems[5].position = "bottom";
           }   
           break;