Introduce result panel class
Change-Id: Ic1b4c9b2429a2419f936ead3459e89f6700b7a4b
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 5d19cbd..b9822fd 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -1,4 +1,9 @@
/*
+ * Initialize The JS frontend part and decorate
+ * the static HTML data.
+ *
+ * @author Nils Diewald
+ *
* TODO: Create lazy loading of objects including
* - obj.hint()
* - obj.alertify()
@@ -15,14 +20,12 @@
'hint',
'vc',
'tutorial',
- 'buttongroup',
'lib/domReady',
'vc/array',
'lib/alertify',
'session',
'selectMenu',
- 'panel',
- 'view/koralquery',
+ 'panel/result',
'api',
'mailToChiffre',
'util'
@@ -30,21 +33,17 @@
hintClass,
vcClass,
tutClass,
- buttonGroupClass,
domReady,
vcArray,
alertifyClass,
sessionClass,
selectMenuClass,
- panelClass,
- kqClass) {
+ resultPanelClass) {
// Localization values
const loc = KorAP.Locale;
loc.VC_allCorpora = loc.VC_allCorpora || 'all corpora';
loc.VC_oneCollection = loc.VC_oneCollection || 'a virtual corpus';
- loc.TOGGLE_ALIGN = loc.TOGGLE_ALIGN || 'toggle alignment';
- loc.SHOW_KQ = loc.SHOW_KQ || 'show KoralQuery';
const d = document;
@@ -114,9 +113,9 @@
var inactiveLi = d.querySelectorAll(
'#search > ol > li:not(.active)'
);
- var i = 0;
+ var matchCount = 0;
- for (i = 0; i < inactiveLi.length; i++) {
+ for (matchCount = 0; matchCount < inactiveLi.length; matchCount++) {
inactiveLi[i].addEventListener('click', function (e) {
if (this._match !== undefined)
this._match.open();
@@ -127,7 +126,7 @@
// This would prevent the sidebar to go back
// e.halt();
});
- inactiveLi[i].addEventListener('keydown', function (e) {
+ inactiveLi[matchCount].addEventListener('keydown', function (e) {
var code = _codeFromEvent(e);
switch (code) {
@@ -192,9 +191,9 @@
/**
* Add result panel
*/
- var resultPanel;
+ var resultPanel = resultPanelClass.create(show);
+
if (resultInfo != null) {
- resultPanel = panelClass.create(['result']);
// Move buttons to resultinfo
resultInfo.appendChild(resultPanel.actions.element());
@@ -202,38 +201,15 @@
// The views are at the top of the search results
var sb = d.getElementById('search');
sb.insertBefore(resultPanel.element(), sb.firstChild);
-
};
// There is a koralQuery
if (KorAP.koralQuery !== undefined) {
-
+
+ // Add KoralQuery view to result panel
if (resultInfo !== null) {
-
- // Open KoralQuery view
- var kqButton = resultPanel.actions.add(loc.SHOW_KQ, ['show-kq','button-icon'], function () {
-
- // Show only once - otherwise toggle
- if (this._kq && this._kq.shown()) {
- this._kq.close();
- return;
- };
-
- this._kq = kqClass.create();
-
- // On close, remove session info on KQ
- this._kq.onClose = function () {
- delete show['kq'];
- };
-
- show['kq'] = true;
- this.add(this._kq);
- });
-
- // Show KoralQuery in case it's meant to be shown
- if (show['kq'])
- kqButton.click();
+ resultPanel.addKqAction()
};
if (KorAP.koralQuery["errors"]) {
@@ -256,22 +232,16 @@
};
};
- // There is more than 0 matches and there is a resultButton
- if (i > 0) {
+
+ /*
+ * There is more than 0 matches, so allow for
+ * alignment toggling (left <=> right)
+ */
+ if (matchCount > 0)
+ resultPanel.addAlignAction();
- if (resultPanel) {
- /**
- * Toggle the alignment (left <=> right)
- */
- resultPanel.actions.add(loc.TOGGLE_ALIGN, ['align','right','button-icon'], function (e) {
- var ol = d.querySelector('#search > ol');
- ol.toggleClass("align-left", "align-right");
- this.button.toggleClass("left", "right");
- });
- };
- };
- /**
+ /*
* Toggle the Virtual Collection builder
*/
if (vcname) {
@@ -385,6 +355,7 @@
});
});
+
// Render Virtual collection
function _getCurrentVC (vcClass, vcArray) {
var vc = vcClass.create(vcArray);
@@ -394,6 +365,7 @@
return vc;
};
+
function _checkVCrewrite (vcClass) {
if (KorAP.koralQuery !== undefined && KorAP.koralQuery["collection"]) {
return vcClass.checkRewrite(KorAP.koralQuery["collection"]);
diff --git a/dev/js/src/panel/match.js b/dev/js/src/panel/match.js
index 7058a9a..64dbf5d 100644
--- a/dev/js/src/panel/match.js
+++ b/dev/js/src/panel/match.js
@@ -1,7 +1,8 @@
/**
- * Define a panel for matches
+ * The match panel.
+ *
+ * @author Nils Diewald
*/
-
define([
'panel',
'match/treeitem',
diff --git a/dev/js/src/panel/result.js b/dev/js/src/panel/result.js
new file mode 100644
index 0000000..d3eef46
--- /dev/null
+++ b/dev/js/src/panel/result.js
@@ -0,0 +1,74 @@
+/**
+ * The result panel
+ *
+ * @author Nils Diewald
+ */
+define([
+ 'panel',
+ 'view/result/koralquery'
+], function (panelClass, kqViewClass) {
+
+ const d = document;
+
+ // Localization values
+ const loc = KorAP.Locale;
+ loc.TOGGLE_ALIGN = loc.TOGGLE_ALIGN || 'toggle alignment';
+ loc.SHOW_KQ = loc.SHOW_KQ || 'show KoralQuery';
+
+ return {
+ create : function (show) {
+ return Object.create(panelClass)._init(['result']).upgradeTo(this)._init(show);
+ },
+
+ // Initialize panel
+ _init : function (show) {
+
+ return this;
+ },
+
+
+ /**
+ * Add KoralQuery action to panel
+ */
+ addKqAction : function () {
+
+ // Open KoralQuery view
+ var kqButton = this.actions.add(loc.SHOW_KQ, ['show-kq','button-icon'], function () {
+
+ // Show only once - otherwise toggle
+ if (this._kq && this._kq.shown()) {
+ this._kq.close();
+ return;
+ };
+
+ this._kq = kqViewClass.create();
+
+ // On close, remove session info on KQ
+ this._kq.onClose = function () {
+ delete show['kq'];
+ };
+
+ show['kq'] = true;
+ this.add(this._kq);
+ });
+
+ // Show KoralQuery in case it's meant to be shown
+ if (show['kq'])
+ kqButton.click();
+ },
+
+ /**
+ * Add align action to panel
+ */
+ addAlignAction : function () {
+ /**
+ * Toggle the alignment (left <=> right)
+ */
+ this.actions.add(loc.TOGGLE_ALIGN, ['align','right','button-icon'], function (e) {
+ var ol = d.querySelector('#search > ol');
+ ol.toggleClass("align-left", "align-right");
+ this.button.toggleClass("left", "right");
+ });
+ }
+ }
+});
diff --git a/dev/js/src/view/koralquery.js b/dev/js/src/view/result/koralquery.js
similarity index 100%
rename from dev/js/src/view/koralquery.js
rename to dev/js/src/view/result/koralquery.js