Improve test coverage for the tutorial
Change-Id: Ibefcbcc019fee4acaa2f83ec3030e534509035ae
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index c2f7c69..ee311dd 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -6,14 +6,18 @@
// TODO: Add query mechanism!
// TODO: Highlight current section:
// http://stackoverflow.com/questions/24887258/highlight-navigation-link-as-i-scroll-down-the-page
+"use strict";
+
define(['session','buttongroup','util'], function (sessionClass, buttonGroupClass) {
- "use strict";
// Localization values
const loc = KorAP.Locale;
loc.CLOSE = loc.CLOSE || 'Close';
+ const d = document;
+
return {
+
/**
* Create new tutorial object.
* Accepts an element to bind the tutorial window to.
@@ -24,41 +28,48 @@
return Object.create(this)._init(obj,session);
},
+
// Initialize Tutorial object
_init : function (obj, session) {
+ const t = this;
if (session === undefined) {
- this._session = sessionClass.create();
+ t._session = sessionClass.create();
}
else {
- this._session = session;
+ t._session = session;
};
-
if (obj) {
- this._show = obj;
- this.start = obj.getAttribute('href');
+ t._show = obj;
+ t.start = obj.getAttribute('href');
+
+ // Unknown which tutorial to show
+ if (!t.start)
+ return null;
+
obj.removeAttribute('href');
- var that = this;
+
obj.onclick = function () {
- that.show();
- };
+ this.show();
+ }.bind(t);
// Injects a tutorial div to the body
- var div = document.createElement('div');
+ const div = d.createElement('div');
div.setAttribute('id', 'tutorial');
div.style.display = 'none';
- document.getElementsByTagName('body')[0].appendChild(div);
- this._iframe = null;
- this._element = div;
+ d.getElementsByTagName('body')[0].appendChild(div);
+
+ t._iframe = null;
+ t._element = div;
// Some fields
- this._ql = document.getElementById("ql-field");
- this._q = document.getElementById("q-field")
- this._cutoff = document.getElementById("q-cutoff-field");
+ t._ql = d.getElementById("ql-field");
+ t._q = d.getElementById("q-field")
+ t._cutoff = d.getElementById("q-cutoff-field");
};
- return this;
+ return t;
},
@@ -66,41 +77,43 @@
* Initialize a search with a defined query.
*/
useQuery : function (e) {
- var q = e.getAttribute("data-query");
- var ql = e.getAttribute("data-query-language");
- var qc = e.getAttribute("data-query-cutoff");
+ const t = this;
+ const q = e.getAttribute("data-query"),
+ ql = e.getAttribute("data-query-language"),
+ qc = e.getAttribute("data-query-cutoff");
+
if (qc !== 0 && qc !== "0" && qc !== "off" && qc !== null) {
- this._cutoff.checked = true;
+ if (t._cuttoff)
+ t._cutoff.checked = true;
};
if (KorAP.QLmenu) {
KorAP.QLmenu.selectValue(ql);
- };
- /*
- var qlf = this._ql.options;
- for (var i in qlf) {
- if (qlf[i].value == ql) {
- qlf[i].selected = true;
- break;
- };
- };
- */
+ }
- this._q.value = q;
- this.setPage(e);
- this.hide();
+ else if (t._ql) {
+ let found = Array.from(t._ql.options).find(o => o.value === ql);
+ if (found)
+ found.selected = true;
+ };
+
+ if (t._q)
+ t._q.value = q;
+
+ t.setPage(e);
+ t.hide();
},
+
/**
* Decorate a page with query event handler.
*/
initQueries : function (d) {
- let that = this;
Array.from(d.querySelectorAll('pre.query.tutorial:not(.unsupported)')).forEach(
i =>
i.onclick = function (e) {
- that.useQuery(this,e);
- }
+ this.useQuery(this,e);
+ }.bind(this)
);
},
@@ -108,14 +121,14 @@
* Decorate a page with documentation links
*/
initDocLinks : function (d) {
- let that = this;
+ const that = this;
Array.from(d.getElementsByClassName('doc-link')).forEach(
i =>
- i.onclick = function (e) {
+ i.onclick = function () {
that.setPage(this.getAttribute('href'));
return true;
}
- );
+ );
},
@@ -123,25 +136,26 @@
* Show the tutorial page embedded.
*/
show : function () {
- var element = this._element;
+ const t = this;
+ const element = t._element;
if (element.style.display === 'block')
return;
- if (this._iframe === null) {
- this._iframe = document.createElement('iframe');
- this._iframe.setAttribute(
+ if (t._iframe === null) {
+ t._iframe = d.createElement('iframe');
+ t._iframe.setAttribute(
'src',
- (this.getPage() || this.start) + '?embedded=true'
+ (t.getPage() || t.start) + '?embedded=true'
);
- var btn = buttonGroupClass.create(
+ const btn = buttonGroupClass.create(
['action','button-view']
);
- var that = this;
btn.add(loc.CLOSE, {'cls':['button-icon','close']}, function () {
element.style.display = 'none';
});
+
element.appendChild(btn.element());
// Add open in new window button
@@ -152,19 +166,17 @@
.appendChild(document.createTextNode(loc.SHOWINFO));
info.classList.add('info');
info.setAttribute('title', loc.SHOWINFO);
- */
- /*
- ul.appendChild(close);
-
- element.appendChild(ul);
+ ul.appendChild(close);
+ element.appendChild(ul);
*/
- element.appendChild(this._iframe);
+ element.appendChild(t._iframe);
};
element.style.display = 'block';
},
+
/**
* Close tutorial window.
*/
@@ -172,34 +184,36 @@
this._element.style.display = 'none';
},
+
/**
* Set a page to be the current tutorial page.
* Expects either a string or an element.
*/
setPage : function (obj) {
- var page = obj;
+ let page = obj;
+
if (typeof page != 'string') {
- var l = this._iframe !== null ? window.frames[0].location : window.location;
+ const l = this._iframe !== null ? window.frames[0].location : window.location;
+
page = l.pathname + l.search;
- for (var i = 1; i < 5; i++) {
- if (obj.nodeName === 'SECTION') {
- if (obj.hasAttribute('id'))
- page += '#' + obj.getAttribute('id');
- break;
- }
- else if (obj.nodeName === 'PRE' && obj.hasAttribute('id')) {
+ for (let i = 1; i < 5; i++) {
+ if ((obj.nodeName === 'SECTION' || obj.nodeName === 'PRE') && obj.hasAttribute('id')) {
page += '#' + obj.getAttribute('id');
break;
}
else {
obj = obj.parentNode;
+ if (obj === null)
+ break;
};
};
};
+
this._session.set('tutpage', page);
},
+
/**
* Get the current tutorial URL
*/