Merge "Multipage Tour (with session-cookie to next page)"
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 -->