Improve and test alignment toggler
Change-Id: I3b7d9defc6e453b716ce82fdb6167b49a038f0bd
diff --git a/dev/js/spec/panelSpec.js b/dev/js/spec/panelSpec.js
index 007b43c..fb2008f 100644
--- a/dev/js/spec/panelSpec.js
+++ b/dev/js/spec/panelSpec.js
@@ -195,5 +195,44 @@
expect(result.element().querySelector('#koralquery')).toBeFalsy();
expect(show["kq"]).toBeFalsy();
});
+
+ it('should open toggler', function () {
+ const show = {};
+
+ const div = document.body.addE("div");
+ div.setAttribute("id","search");
+ const ol = div.addE("ol");
+ ol.classList.add("align-left");
+
+ const result = resultClass.create(show);
+
+ result.addAlignAction();
+
+ const b = result.element().lastChild.firstChild;
+
+ expect(b.textContent).toEqual("toggle alignment");
+ expect(b.classList.contains('right')).toBeTruthy();
+ expect(ol.classList.contains('align-left')).toBeTruthy();
+
+ b.click();
+
+ expect(b.textContent).toEqual("toggle alignment");
+ expect(b.classList.contains('center')).toBeTruthy();
+ expect(ol.classList.contains('align-right')).toBeTruthy();
+
+ b.click();
+
+ expect(b.textContent).toEqual("toggle alignment");
+ expect(b.classList.contains('left')).toBeTruthy();
+ expect(ol.classList.contains('align-center')).toBeTruthy();
+
+ b.click();
+
+ expect(b.textContent).toEqual("toggle alignment");
+ expect(b.classList.contains('right')).toBeTruthy();
+ expect(ol.classList.contains('align-left')).toBeTruthy();
+
+ document.body.removeChild(div);
+ });
});
});
diff --git a/dev/js/src/panel/result.js b/dev/js/src/panel/result.js
index 2bb647a..1626a95 100644
--- a/dev/js/src/panel/result.js
+++ b/dev/js/src/panel/result.js
@@ -16,6 +16,8 @@
const loc = KorAP.Locale;
loc.TOGGLE_ALIGN = loc.TOGGLE_ALIGN || 'toggle alignment';
loc.SHOW_KQ = loc.SHOW_KQ || 'show KoralQuery';
+
+ const aRoll = ['left', 'right','center'];
return {
create : function (opened) {
@@ -88,23 +90,19 @@
* Toggle the alignment (left <=> right)
*/
this.actions.add(loc.TOGGLE_ALIGN, {'cls':['align','right','button-icon']}, function (e) {
- const olCl = d.querySelector('#search > ol').classList;
- if (olCl.contains('align-left')) {
- olCl.remove('align-left');
- olCl.add('align-right');
- this.button.toggleClass("right", "center");
- }
- else if (olCl.contains('align-right')) {
- olCl.remove('align-right');
- olCl.add('align-center');
- this.button.toggleClass("center", "left");
- }
- else if (olCl.contains('align-center')) {
- olCl.remove('align-center');
- olCl.add('align-left');
- this.button.toggleClass("left", "right");
- };
- });
+ var olCl = d.querySelector('#search > ol').classList;
+
+ aRoll.find(function(align, i) {
+ if (olCl.contains('align-' + align)) {
+ const n = i >= 2 ? 0 : i+1;
+ const nn = n >= 2 ? 0 : n+1;
+ olCl.remove('align-' + align);
+ olCl.add('align-' + aRoll[n]);
+ this.button.toggleClass(aRoll[n], aRoll[nn]);
+ return true;
+ };
+ }, this);
+ });
}
}
});