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