Added prefix view to menus
diff --git a/public/js/spec/menuSpec.js b/public/js/spec/menuSpec.js
index 76da135..fef6027 100644
--- a/public/js/spec/menuSpec.js
+++ b/public/js/spec/menuSpec.js
@@ -26,7 +26,7 @@
create : function (params) {
return Object.create(KorAP.Menu)
.upgradeTo(KorAP.OwnMenu)
- ._init(KorAP.OwnMenuItem, params);
+ ._init(KorAP.OwnMenuItem, undefined, params);
}
};
@@ -99,7 +99,7 @@
create : function (context, params) {
var obj = Object.create(KorAP.Menu)
.upgradeTo(KorAP.HintMenu)
- ._init(KorAP.HintMenuItem, params);
+ ._init(KorAP.HintMenuItem, undefined, params);
obj._context = context;
return obj;
}
@@ -320,6 +320,14 @@
["Syntax", "syn="]
];
+ var demolist = [
+ ['Titel', 'title'],
+ ['Untertitel', 'subTitle'],
+ ['Veröffentlichungsdatum', 'pubDate'],
+ ['Länge', 'length'],
+ ['Autor', 'author']
+ ];
+
it('should be initializable', function () {
var list = [
["Constituency"],
@@ -362,61 +370,62 @@
menu.limit(3);
expect(menu.show()).toBe(true);
- expect(menu.element().firstChild.innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
- expect(menu.element().childNodes[1].getAttribute("data-action")).toEqual("l=");
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].getAttribute("data-action")).toEqual("l=");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Check boundaries
- expect(menu.element().childNodes[0].classList.contains("no-more")).toBe(true);
- expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(false);
+ expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(true);
expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(false);
+ expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(false);
});
it('should be filterable', function () {
var menu = KorAP.HintMenu.create("cnx/", list);
menu.limit(3);
-
- expect(menu.show("o")).toBe(true);
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.prefix("o").show()).toBe(true);
+ expect(menu.element().childNodes[0].innerHTML).toEqual("o");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Check boundaries
- expect(menu.element().childNodes[0].classList.contains("no-more")).toBe(true);
- expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(false);
- expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(true);
+ expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(true);
+ expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(false);
+ expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(true);
menu.limit(2);
- expect(menu.show("o")).toBe(true);
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
- expect(menu.element().childNodes[2]).toBe(undefined);
+ expect(menu.prefix("o").show()).toBe(true);
+ expect(menu.element().childNodes[0].innerHTML).toEqual("o");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3]).toBe(undefined);
// Check boundaries
- expect(menu.element().childNodes[0].classList.contains("no-more")).toBe(true);
- expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(false);
- expect(menu.element().childNodes[2]).toBe(undefined);
+ expect(menu.element().childNodes[1].classList.contains("no-more")).toBe(true);
+ expect(menu.element().childNodes[2].classList.contains("no-more")).toBe(false);
+ expect(menu.element().childNodes[3]).toBe(undefined);
- expect(menu.show("e")).toBe(true);
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
- expect(menu.element().childNodes[2]).toBe(undefined);
+ expect(menu.prefix("e").show()).toBe(true);
+ expect(menu.element().childNodes[0].innerHTML).toEqual("e");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+ expect(menu.element().childNodes[3]).toBe(undefined);
menu.limit(5);
-
- expect(menu.show("a")).toBe(true);
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
- expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
- expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
- expect(menu.element().childNodes[5]).toBe(undefined);
-
+ expect(menu.prefix("a").show()).toBe(true);
+ expect(menu.element().childNodes[0].innerHTML).toEqual("a");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
+ expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
+ expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
+ expect(menu.element().childNodes[6]).toBe(undefined);
});
@@ -425,112 +434,109 @@
// Show only 3 items
menu.limit(3);
-
expect(menu.show()).toBe(true);
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate next (1)
menu.next();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(1).active()).toBe(true);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate next (2)
menu.next();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(2).active()).toBe(true);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate next (3)
// scroll!
menu.next();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Lemma</strong>");
-
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
expect(menu.shownItem(2).active()).toBe(true);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate next (4)
menu.next();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Syntax</strong>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Syntax</strong>");
expect(menu.shownItem(2).active()).toBe(true);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate next (5) - ROLL
menu.next();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Active next (6)
menu.next();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(1).active()).toBe(true);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
});
it('should be prevable', function () {
var menu = KorAP.HintMenu.create("cnx/", list);
-
menu.limit(3);
expect(menu.show()).toBe(true);
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Lemma</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Lemma</strong>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate prev (1) - roll to bottom
menu.prev();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
expect(menu.shownItem(1).active()).toBe(false);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Syntax</strong>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Syntax</strong>");
expect(menu.shownItem(2).active()).toBe(true);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate prev (2)
menu.prev();
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
expect(menu.shownItem(0).active()).toBe(false);
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
expect(menu.shownItem(1).active()).toBe(true);
- expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Syntax</strong>");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Syntax</strong>");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate prev (3)
menu.prev();
@@ -540,7 +546,7 @@
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2).name()).toEqual("Syntax");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate prev (4)
menu.prev();
@@ -550,7 +556,7 @@
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2).name()).toEqual("Part-of-Speech");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate prev (5)
menu.prev();
@@ -560,7 +566,7 @@
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2).name()).toEqual("Morphology");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate next (1)
menu.next();
@@ -570,7 +576,7 @@
expect(menu.shownItem(1).active()).toBe(true);
expect(menu.shownItem(2).name()).toEqual("Morphology");
expect(menu.shownItem(2).active()).toBe(false);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
// Activate prev (6)
menu.prev();
@@ -583,7 +589,7 @@
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2).name()).toEqual("Syntax");
expect(menu.shownItem(2).active()).toBe(true);
- expect(menu.element().childNodes[3]).toBe(undefined);
+ expect(menu.element().childNodes[4]).toBe(undefined);
});
@@ -591,43 +597,51 @@
var menu = KorAP.HintMenu.create("cnx/", list);
menu.limit(2);
- expect(menu.show("o")).toBe(true);
-
+ expect(menu.prefix("o").show()).toBe(true);
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2)).toBe(undefined);
// Next (1)
menu.next();
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(false);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
expect(menu.shownItem(1).active()).toBe(true);
expect(menu.shownItem(2)).toBe(undefined);
// Next (2)
menu.next();
expect(menu.shownItem(0).name()).toEqual("Morphology");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
expect(menu.shownItem(0).active()).toBe(false);
expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
expect(menu.shownItem(1).active()).toBe(true);
expect(menu.shownItem(2)).toBe(undefined);
- // Next (3)
+ // Next (3) - to prefix
+ menu.next();
+ expect(menu.shownItem(0).name()).toEqual("Morphology");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
menu.next();
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2)).toBe(undefined);
});
@@ -637,33 +651,36 @@
var menu = KorAP.HintMenu.create("cnx/", list);
menu.limit(2);
- expect(menu.show("ex")).toBe(true);
+ expect(menu.prefix("ex").show()).toBe(true);
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2)).toBe(undefined);
// Next (1)
menu.next();
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
expect(menu.shownItem(0).active()).toBe(false);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
expect(menu.shownItem(1).active()).toBe(true);
expect(menu.shownItem(2)).toBe(undefined);
// Next (2)
menu.next();
+
+ expect(menu.prefix()).toEqual('ex');
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
- expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+ expect(menu.shownItem(0).active()).toBe(false);
+
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2)).toBe(undefined);
@@ -671,34 +688,295 @@
menu.limit(5);
// Change show
- expect(menu.show("e")).toBe(true);
+ expect(menu.prefix("e").show()).toBe(true);
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2)).toBe(undefined);
// Next (1)
menu.next();
+ expect(menu._prefix.active()).toBe(false);
+ expect(menu.prefix()).toEqual('e');
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
expect(menu.shownItem(0).active()).toBe(false);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
expect(menu.shownItem(1).active()).toBe(true);
expect(menu.shownItem(2)).toBe(undefined);
// Next (2)
menu.next();
+ expect(menu._prefix.active()).toBe(true);
expect(menu.shownItem(0).name()).toEqual("Constituency");
- expect(menu.element().childNodes[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Morphology");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Next (3)
+ menu.next();
+ expect(menu._prefix.active()).toBe(false);
+ expect(menu.shownItem(0).name()).toEqual("Constituency");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
expect(menu.shownItem(0).active()).toBe(true);
expect(menu.shownItem(1).name()).toEqual("Morphology");
- expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
expect(menu.shownItem(1).active()).toBe(false);
expect(menu.shownItem(2)).toBe(undefined);
});
+
+
+ it('shouldn\'t be viewable with failing prefix', function () {
+ var menu = KorAP.HintMenu.create("cnx/", list);
+ menu.limit(2);
+ expect(menu.prefix("exit").show()).toBe(false);
+ });
+
+ it('should be navigatable with prefix', function () {
+ var menu = KorAP.HintMenu.create("cnx/", demolist);
+ menu.limit(3);
+
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ menu._prefix.add('a');
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("a");
+ expect(menu.shownItem(0).name()).toEqual("Autor");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+
+ menu._prefix.add('u');
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("au");
+ expect(menu.shownItem(0).name()).toEqual("Autor");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
+
+ menu._prefix.backspace();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("a");
+ expect(menu.shownItem(0).name()).toEqual("Autor");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+
+ menu._prefix.backspace();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu._prefix.backspace();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Länge");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Länge</strong>");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Länge");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Länge</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Autor");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Autor</strong>");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Titel</strong>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertitel</strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
+ expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ });
+
+
+ it('should be navigatable with a prefix (1)', function () {
+ var menu = KorAP.HintMenu.create("cnx/", demolist);
+ menu.limit(3);
+
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+
+ menu.prefix('el');
+ expect(menu.show()).toBe(true);
+
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(true);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+
+ // Backward
+ menu.prev();
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+ });
+
+ xit('should be navigatable with a prefix (2)', function () {
+ var menu = KorAP.HintMenu.create("cnx/", demolist);
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ menu.prefix('el');
+ expect(menu.show()).toBe(true);
+
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Backward
+ menu.prev();
+ expect(menu._prefix.active()).toEqual(true);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Backward
+/*
+ menu.prev();
+ expect(menu._prefix.active()).toEqual(false);
+ expect(menu.shownItem(0).name()).toEqual("Titel");
+ expect(menu.element().childNodes[1].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).name()).toEqual("Untertitel");
+ expect(menu.element().childNodes[2].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+*/
+ });
+
+ xit('should be page downable');
+ xit('should be page upable');
});
diff --git a/public/js/src/menu.js b/public/js/src/menu.js
index 175360a..c5bd2f8 100644
--- a/public/js/src/menu.js
+++ b/public/js/src/menu.js
@@ -44,102 +44,114 @@
// mouse wheel treatment
_mousewheel : function (e) {
var delta = 0;
- if (e.wheelDelta) {
- delta = event.wheelDelta / 120;
- }
- else if (e.detail) {
- delta = - e.detail / 3;
- };
- if (delta < 0) {
+
+ delta = e.deltaY / 120;
+ if (delta > 0)
this.next();
- }
- else {
+ else if (delta < 0)
this.prev();
- };
e.halt();
},
// Arrow key and prefix treatment
- _keydown : function (e) {
+ _keypress : function (e) {
var code = _codeFromEvent(e);
- /*
- * keyCodes:
- * - Down = 40
- * - Esc = 27
- * - Up = 38
- * - Enter = 13
- * - shift = 16
- * for characters use e.key
- */
-
switch (code) {
case 27: // 'Esc'
e.halt();
this.hide();
break;
- case 40: // 'Down'
- e.halt();
- this.next();
- break;
+
case 38: // 'Up'
e.halt();
this.prev();
break;
- case 13: // 'Enter'
- console.log('hide');
+ case 33: // 'Page up'
e.halt();
- this.hide();
+ this.prev();
+ break;
+ case 40: // 'Down'
+ e.halt();
+ this.next();
+ break;
+ case 34: // 'Page down'
+ e.halt();
+ this.next();
+ break;
+ case 39: // 'Right'
+ var item = this.liveItem(this._position);
+ if (item["further"] !== undefined) {
+ item["further"].bind(item).apply();
+ e.halt();
+ };
+ break;
+ case 13: // 'Enter'
+
+ // Click on prefix
+ if (this._prefix.active())
+ this._prefix.onclick();
+
+ // Click on item
+ else
+ this.liveItem(this._position).onclick();
+ e.halt();
break;
case 8: // 'Backspace'
- var p = this.prefix();
- if (p.length > 1) {
- p = p.substring(0, p.length - 1)
- this.show(p);
- }
- else {
- this.show();
- };
+ this._prefix.backspace();
+ this.show();
e.halt();
break;
default:
- if (e.key !== undefined && e.key.length != 1)
+ if (e.key !== undefined &&
+ e.key.length != 1)
return;
// Add prefix
- if (!this.show(this.prefix() + e.key))
- this.hide();
+ this._prefix.add(e.key.toLowerCase());
+
+ if (!this.show()) {
+ this.prefix('').show();
+ };
};
},
// Initialize list
- _init : function (itemClass, params) {
- // this._element.addEventListener("click", chooseHint, false);
+ _init : function (itemClass, prefixClass, params) {
var that = this;
this._itemClass = itemClass;
- var e =this._element = document.createElement("ul");
+
+ if (prefixClass !== undefined)
+ this._prefix = prefixClass.create();
+ else
+ this._prefix = KorAP.MenuPrefix.create();
+
+ var e = document.createElement("ul");
e.style.opacity = 0;
e.style.outline = 0;
e.setAttribute('tabindex', 0);
+ e.setAttribute('class', 'menu');
+ e.appendChild(this._prefix.element());
// Arrow keys
e.addEventListener(
- "keydown",
+ 'keypress',
function (ev) {
- that._keydown(ev)
+ that._keypress(ev)
},
false
);
// Mousewheel
e.addEventListener(
- 'DOMMouseScroll',
+ 'wheel',
function (ev) {
that._mousewheel(ev)
},
false
);
+ this._element = e;
this.active = false;
this._items = new Array();
var i;
@@ -175,8 +187,10 @@
* i.e. the number of items visible.
*/
limit : function (limit) {
- if (arguments.length === 1)
+ if (arguments.length === 1) {
this._limit = limit;
+ return this;
+ };
return this._limit;
},
@@ -197,7 +211,7 @@
_reset : function () {
this._offset = 0;
this._pos = 0;
- this._prefix = undefined;
+ this._prefix.value('');
},
/**
@@ -205,9 +219,7 @@
*
* @param {string} Prefix for filtering the list
*/
- show : function (prefix) {
- this._prefix = prefix;
-
+ show : function () {
// Initialize the list
if (!this._initList())
return false;
@@ -219,9 +231,8 @@
// Todo: Or the last element chosen
this.liveItem(0).active(true);
- this._position = 0;
this._active = this._list[0];
-
+ this._position = 0;
this._element.style.opacity = 1;
// Add classes for rolling menus
@@ -256,8 +267,13 @@
// There is no prefix set
if (this.prefix().length <= 0) {
- for (var i = 0; i < this._items.length; i++)
+ var i = 0;
+ for (; i < this._items.length; i++)
this._list.push(i);
+ while (this._items[++i] !== undefined) {
+ this._items[i].lowlight();
+ console.log(this._item);
+ };
return true;
};
@@ -296,8 +312,12 @@
* Get the prefix for filtering,
* e.g. "ve" for "verb"
*/
- prefix : function () {
- return this._prefix || '';
+ prefix : function (pref) {
+ if (arguments.length === 1) {
+ this._prefix.value(pref);
+ return this;
+ };
+ return this._prefix.value();
},
// Append Items that should be shown
@@ -326,19 +346,32 @@
delete : function () {
var child;
+ /*
// Iterate over all visible items
for (var i = 0; i <= this.limit(); i++) {
- // there is a visible element - unhighlight!
+ // there is a visible element
+ // unhighlight!
if (child = this.shownItem(i)) {
child.lowlight();
child.active(false);
};
};
+ */
+
+ for (var i in this._list) {
+ var item = this._items[this._list[i]];
+ item.lowlight();
+ item.active(false);
+ };
// Remove all children
- while (child = this._element.firstChild)
- this._element.removeChild(child);
+ var children = this._element.childNodes;
+ for (var i = children.length - 1; i >= 1; i--) {
+ this._element.removeChild(
+ children[i]
+ );
+ };
},
@@ -367,7 +400,7 @@
// Append element
e.insertBefore(
item.element(),
- e.firstChild
+ e.children[1]
);
},
@@ -422,21 +455,36 @@
* Make the next item in the filtered menu active
*/
next : function () {
+
// No active element set
- if (this._position == -1)
+ if (this._position === -1)
return;
+ var newItem;
+
// Set new live item
var oldItem = this.liveItem(this._position++);
oldItem.active(false);
- var newItem = this.liveItem(this._position);
+ newItem = this.liveItem(this._position);
- // The next element is undefined - roll to top
+ // The next element is undefined - roll to top or to prefix
if (newItem === undefined) {
- this._offset = 0;
- this._position = 0;
- newItem = this.liveItem(0);
- this._showItems(0);
+
+ // Activate prefix
+ var prefix = this._prefix;
+
+ // Mark prefix
+ if (prefix.isSet() && !prefix.active()) {
+ this._position--;
+ prefix.active(true);
+ return;
+ }
+ else {
+ this._offset = 0;
+ this._position = 0;
+ newItem = this.liveItem(0);
+ this._showItems(0);
+ };
}
// The next element is outside the view - roll down
@@ -445,6 +493,8 @@
this._offset++;
this._append(this._list[this._position]);
};
+
+ this._prefix.active(false);
newItem.active(true);
},
@@ -457,17 +507,30 @@
if (this._position == -1)
return;
+ var newItem;
+
// Set new live item
var oldItem = this.liveItem(this._position--);
oldItem.active(false);
- var newItem = this.liveItem(this._position);
+ newItem = this.liveItem(this._position);
// The previous element is undefined - roll to bottom
if (newItem === undefined) {
+
+ // Activate prefix
+ var prefix = this._prefix;
this._offset = this.liveLength() - this.limit();
this._position = this.liveLength() - 1;
- newItem = this.liveItem(this._position);
- this._showItems(this._offset);
+
+ if (prefix.isSet() && !prefix.active()) {
+ this._position++;
+ prefix.active(true);
+ return;
+ }
+ else {
+ newItem = this.liveItem(this._position);
+ this._showItems(this._offset);
+ };
}
// The previous element is outside the view - roll up
@@ -477,14 +540,23 @@
this._prepend(this._list[this._position]);
};
+ this._prefix.active(false);
newItem.active(true);
},
+ // Length of the filtered list
+ liveLength : function () {
+ if (this._list === undefined)
+ this._initList();
+ return this._list.length;
+ },
+
+
// Remove the HTML node from the first item
_removeFirst : function () {
this.item(this._list[this._offset]).lowlight();
- this._element.removeChild(this._element.firstChild);
+ this._element.removeChild(this._element.children[1]);
},
@@ -492,13 +564,6 @@
_removeLast : function () {
this.item(this._list[this._offset + this.limit() - 1]).lowlight();
this._element.removeChild(this._element.lastChild);
- },
-
- // Length of the filtered list
- liveLength : function () {
- if (this._list === undefined)
- this._initList();
- return this._list.length;
}
};
@@ -533,6 +598,7 @@
return this;
},
+
content : function (content) {
if (arguments.length === 1)
this._content = document.createTextNode(content);
@@ -593,7 +659,8 @@
var li = document.createElement("li");
// Connect action
- li["action"] = this._action;
+ if (this.onclick !== undefined)
+ li["onclick"] = this.onclick.bind(this);
// Append template
li.appendChild(this.content());
@@ -703,10 +770,89 @@
},
};
+ KorAP.MenuPrefix = {
+ create : function (params) {
+ return Object.create(KorAP.MenuPrefix)._init();
+ },
+ _init : function () {
+ this._string = '';
+
+ // Add prefix span
+ this._element = document.createElement('span');
+ this._element.classList.add('pref');
+ return this;
+ },
+ _update : function () {
+ this._element.innerHTML
+ = this._string;
+ },
+
+ /**
+ * Upgrade this object to another object,
+ * while private data stays intact.
+ *
+ * @param {Object} An object with properties.
+ */
+ upgradeTo : function (props) {
+ for (var prop in props) {
+ this[prop] = props[prop];
+ };
+ return this;
+ },
+
+ active : function (bool) {
+ var cl = this.element().classList;
+ if (bool === undefined)
+ return cl.contains("active");
+ else if (bool)
+ cl.add("active");
+ else
+ cl.remove("active");
+ },
+ element : function () {
+ return this._element;
+ },
+ isSet : function () {
+ return this._string.length > 0 ?
+ true : false;
+ },
+ value : function (string) {
+ if (arguments.length === 1) {
+ this._string = string;
+ this._update();
+ };
+ return this._string;
+ },
+ add : function (string) {
+ this._string += string;
+ this._update();
+ },
+ onclick : function () {},
+ backspace : function () {
+ if (this._string.length > 1) {
+ this._string = this._string.substring(
+ 0, this._string.length - 1
+ );
+ }
+ else {
+ this._string = '';
+ };
+
+ this._update();
+ }
+ };
+
function _codeFromEvent (e) {
- if ((e.charCode) && (e.keyCode==0))
+ if (e.charCode && (e.keyCode == 0))
return e.charCode
return e.keyCode;
};
}(this.KorAP));
+
+/**
+ * MenuItems may define:
+ *
+ * onclick: action happen on click and enter.
+ * further: action happen on right arrow
+ */