Merge "Welcome screen for guided tour added."
diff --git a/dev/js/spec/tourSpec.js b/dev/js/spec/tourSpec.js
index 5dac709..e7ec308 100644
--- a/dev/js/spec/tourSpec.js
+++ b/dev/js/spec/tourSpec.js
@@ -456,7 +456,9 @@
let searchTour = tourClass.gTstartSearch(intrkorap);
searchTour.start();
let totalSteps = searchTour.stepCount;
- expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(loc.TOUR_sear1);
+ let welc = document.createElement("DIV");
+ welc.innerHTML = loc.TOUR_welc;
+ expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(welc.textContent);
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);
@@ -467,14 +469,14 @@
expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(searchTour.testIntros[i-1]);
switch(i){
- case 4:
+ case 5:
expect(intrkorap.querySelector('#hint')).not.toBeNull();
expect(KorAP.Hint).not.toBeNull();
expect(KorAP.Hint.active().dontHide).toBe(true);
expect(KorAP.Hint._active).not.toBeNull();
break;
- case 5:
+ case 6:
expect(KorAP.Hint._active).toBeNull();
break;
@@ -512,7 +514,7 @@
tourAbort.start();
expect(KorAP.Hint._active).toBeNull();
expect(document.querySelector(".introjs-skipbutton")).not.toBeNull();
- tourAbort.goToStepNumber(4);
+ tourAbort.goToStepNumber(5);
expect(KorAP.Hint._active).not.toBeNull()
expect(KorAP.Hint.active().dontHide).toBe(true);
tourAbort.exit();
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 1f0c821..d81f138 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -44,6 +44,11 @@
loc.TOUR_ldone = "Beenden";
//Guided Tour: Steps
+ loc.TOUR_welc = "<span class = 'tgreeting'>Willkommen zur KorAP Tour! </span> " +
+ "<p class='pfirstStep'> Hier zeigen wir Ihnen einige wichtige Funktionalitäten von KorAP. </p>" +
+ "<p> Bitte beachten sie: Haben sie bereits eine Suchanfrage oder ein Korpus definiert," +
+ "werden diese während der Tour gelöscht. Falls Sie das nicht wollen, können sie die Tour jetzt mit <code>" +
+ loc.TOUR_lskip + "</code> beenden.</p>";
loc.TOUR_sear1 = "Geben Sie die Suchanfrage hier ein.";
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.";
diff --git a/dev/js/src/tour/tours.js b/dev/js/src/tour/tours.js
index 45992ce..8485ae6 100644
--- a/dev/js/src/tour/tours.js
+++ b/dev/js/src/tour/tours.js
@@ -17,6 +17,11 @@
loc.TOUR_ldone = loc.TOUR_ldone || "Done";
//localization guided tour gTstartSearch
+ loc.TOUR_welc = loc.TOUR_welc || "<span class='tgreeting'> Welcome to our guided tour!</span>" +
+ "<p class='pfirstStep'> This tour should give you a quick introduction to KorAP. </p>" +
+ "<p> Please note, that if you already defined a corpus or query, these definitions are deleted during the guided tour. " +
+ "If you don't want that, you can stop the tour now with <code>" +
+ loc.TOUR_lskip + "</code>. </p> </div>";
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_searAnnot = loc.TOUR_searAnnot || "Annotation helper";
@@ -25,20 +30,20 @@
loc.TOUR_vccho2 = loc.TOUR_vccho2 || "Define your corpus here.";
loc.TOUR_vcStat1 = loc.TOUR_vcStat1 || "Click here to display corpus statistic.";
loc.TOUR_vcStat2 = loc.TOUR_vcStat2 || "Corpus statistic";
- loc.TOUR_qlfield = loc.TOUR_qlfield|| "Selection of the query language: You can use KorAP with different languages.";
- 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.";
+ loc.TOUR_qlfield = loc.TOUR_qlfield|| "Selection of the query language: You can use KorAP with different query languages.";
+ loc.TOUR_help = loc.TOUR_help || "Help and information about KorAP.";
+ loc.TOUR_glimpse = loc.TOUR_glimpse || "Select this to show only the first hits in arbitrary order.";
+ loc.TOUR_seargo = loc.TOUR_seargo || "Start the search";
//localization guided Tour gTshowResults
loc.TOUR_kwic = loc.TOUR_kwic || "KWIC result (keyword in context)";
loc.TOUR_snippet = loc.TOUR_snippet || "Click on a match to show a larger snippet.";
- loc.TOUR_snippetb = loc.TOUR_snippetb || "Display of larger snippet";
- loc.TOUR_metadatab = loc.TOUR_metadatab || "Click here to display the metadata.";
+ loc.TOUR_snippetb = loc.TOUR_snippetb || "Snippet";
+ loc.TOUR_metadatab = loc.TOUR_metadatab || "Display of metadata";
loc.TOUR_metadata = loc.TOUR_metadata || "Metadata";
- loc.TOUR_tokenb = loc.TOUR_tokenb || "Click here to display the token annotations.";
+ loc.TOUR_tokenb = loc.TOUR_tokenb || "Display of token annotations";
loc.TOUR_token = loc.TOUR_token || "KorAP supports multiple annotations.";
- loc.TOUR_treeb = loc.TOUR_treeb || "Display further annotations."
+ loc.TOUR_treeb = loc.TOUR_treeb || "Display further annotations"
loc.TOUR_tree = loc.TOUR_tree || "Further annotations can be displayed as tree and arch views."
loc.TOUR_tourdone = loc.TOUR_tourdone || "Have fun with KorAP!";
@@ -62,6 +67,7 @@
let intro = introClass();
intro.setOptions(labelOptions);
intro.setOption('doneLabel', loc.TOUR_seargo);
+ intro.setOption('tooltipClass', 'gTstartSearch');
//for testing purposes
if(elparam){
@@ -75,6 +81,9 @@
//steps of the example tour
let Steps =[
{
+ intro: loc.TOUR_welc,
+ },
+ {
element: '#q-field',
intro: loc.TOUR_sear1,
position: 'bottom'
@@ -149,7 +158,7 @@
* #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){
+ if(this._currentStep == 2){
targetedElement.value = loc.TOUR_Qexample;
}
break;
@@ -164,8 +173,8 @@
/*
* Intro.js caches elements at the beginning, so element and position has to be set again.
*/
- intro._introItems[6].element = doe.querySelector('.statistic');
- intro._introItems[6].position = "left";
+ intro._introItems[7].element = doe.querySelector('.statistic');
+ intro._introItems[7].position = "left";
}
break;
@@ -180,11 +189,11 @@
break;
}
- if(this._currentStep == 7){
+ if(this._currentStep == 8){
let statbut = doe.querySelector('.statistic');
statbut.click();
- intro._introItems[7].element = doe.querySelector(".stattable");
- intro._introItems[7].position = "bottom";
+ intro._introItems[8].element = doe.querySelector(".stattable");
+ intro._introItems[8].position = "bottom";
}
});
@@ -198,18 +207,18 @@
var that = this;
switch(this._currentStep){
//hides Hint if back button is pressed
- case 2:
+ case 3:
if(KorAP.Hint.active()){
KorAP.Hint.unshow();
}
break;
- case 3:
+ case 4:
KorAP.Hint.show(false);
KorAP.Hint.active().dontHide = true;
- intro._introItems[3].element = doe.querySelector(".menu.roll.hint");
- intro._introItems[3].position = doe.querySelector("bottom");
+ intro._introItems[4].element = doe.querySelector(".menu.roll.hint");
+ intro._introItems[4].position = doe.querySelector("bottom");
break;
- case 4:
+ case 5:
KorAP.Hint.unshow();
break;
}
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 12acbc1..015e84e 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,11 +1,18 @@
@import "../util";
-
-.introjs-helperNumberLayer {
- background:$ids-orange-2;
- }
-
.introjs-helperLayer {
background-color:transparent;
}
-
\ No newline at end of file
+
+.introjs-tooltip.gTstartSearch{
+ max-width: 500px;
+}
+
+.tgreeting {
+ font-weight: bold;
+ color: $darkest-orange;
+}
+
+.pfirstStep{
+ width: 500px;
+}