Make result buttons a button group and adopt styles
Change-Id: I703de5fcb5f7f19e84278a719a64c19c3bc016cc
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index b33c13a..a1dac7b 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -31,11 +31,11 @@
*/
add : function (title, classes, cb) {
var b = this._element.addE('span');
- b.addT(title);
b.setAttribute('title',title);
if (classes !== undefined) {
b.classList.add.apply(b.classList, classes);
};
+ b.addE('span').addT(title);
var that = this;
b.addEventListener('click', function (e) {
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index b4621d0..76bbf82 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -15,6 +15,7 @@
'hint',
'vc',
'tutorial',
+ 'buttongroup',
'lib/domReady',
'vc/array',
'lib/alertify',
@@ -29,6 +30,7 @@
hintClass,
vcClass,
tutClass,
+ buttonGroupClass,
domReady,
vcArray,
alertifyClass,
@@ -181,29 +183,19 @@
};
var result = d.getElementById('resultinfo');
- var resultButton = null;
- var leftButton = null;
+ var resultButton;
if (result != null) {
- // Add right buttons
- resultButton = result.addE('div');
- resultButton.classList.add('result', 'button');
-
- leftButton = result.addE('div');
- leftButton.classList.add('result', 'button', 'left');
+ // Add result button group
+ resultButton = buttonGroupClass.create(['result']);
+ result.appendChild(resultButton.element());
};
// There is a koralQuery
if (KorAP.koralQuery !== undefined) {
- if (resultButton !== null) {
+ if (result !== null) {
var kq;
- var toggle = d.createElement('a');
- toggle.setAttribute('title', loc.SHOW_KQ)
- toggle.classList.add('show-kq', 'button');
- toggle.addE('span')
- .addT(loc.SHOW_KQ);
- resultButton.appendChild(toggle);
var showKQ = function () {
if (kq === undefined) {
@@ -228,11 +220,8 @@
};
};
- if (toggle !== undefined) {
-
- // Show koralquery
- toggle.addEventListener('click', showKQ);
- };
+ // Add KoralQuery button
+ resultButton.add(loc.SHOW_KQ, ['show-kq','button-icon'], showKQ);
};
if (KorAP.koralQuery["errors"]) {
@@ -263,41 +252,16 @@
if (i > 0) {
if (resultButton !== null) {
-
/**
* Toggle the alignment (left <=> right)
*/
- // querySelector('div.button.right');
-
- var toggle = d.createElement('a');
- toggle.setAttribute('title', loc.TOGGLE_ALIGN);
- // Todo: Reuse old alignment from query
- var cl = toggle.classList;
- cl.add('align', 'right', 'button');
- toggle.addEventListener(
- 'click',
- function (e) {
- var ol = d.querySelector('#search > ol');
- ol.toggleClass("align-left", "align-right");
- this.toggleClass("left", "right");
- });
- toggle.addE('span').addT(loc.TOGGLE_ALIGN);
- resultButton.appendChild(toggle);
- };
- // Not ready yet
- /*
- if (leftButton !== null) {
- var metaInfo = d.createElement('a');
- metaInfo.setAttribute('title', loc.SHOW_META)
-
- var cl = metaInfo.classList;
- cl.add('show-meta', 'button');
- metaInfo.appendChild(d.createElement('span'))
- .appendChild(d.createTextNode(loc.SHOW_META));
- leftButton.appendChild(metaInfo);
+ resultButton.add(loc.TOGGLE_ALIGN, ['align','right','button-icon'], function (e) {
+ var ol = d.querySelector('#search > ol');
+ ol.toggleClass("align-left", "align-right");
+ this.toggleClass("left", "right");
+ });
};
- */
};
/**
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index f30287b..628659f 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -1,6 +1,12 @@
/**
* Information about a match.
*/
+/*
+ * TODO:
+ * Create a "views" object, that is the parent of this
+ * class and supports a simple .add() method to add views
+ * to an element.
+ */
define([
'match/infolayer',
'match/table',
diff --git a/dev/js/src/match/treemenu.js b/dev/js/src/match/treemenu.js
index 6b8a76a..0010271 100644
--- a/dev/js/src/match/treemenu.js
+++ b/dev/js/src/match/treemenu.js
@@ -46,7 +46,7 @@
return this._info;
},
- // Attach menu to
+ // Attach menu to button
attachTo : function (e) {
// this._attached = e;