Multipage Tour (with session-cookie to next page)
Change-Id: I39d7ec4b5b403176e3f7800612f4ea4107ad5fed
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;
+ },
+
}
});