New menu with a container for mutliple always available non scrollable items
Change-Id: I5c8379cc82038da4a6c0923bbf59ec8faaa1eb9f
diff --git a/dev/js/runner/all.html b/dev/js/runner/all.html
index 52f996f..c1fc29c 100644
--- a/dev/js/runner/all.html
+++ b/dev/js/runner/all.html
@@ -40,6 +40,7 @@
'spec/datepickerSpec',
'spec/menuSpec',
'spec/alwaysMenuSpec',
+ 'spec/containerMenuSpec',
'spec/selectMenuSpec',
'spec/panelSpec',
'spec/viewSpec',
diff --git a/dev/js/runner/containerMenu.html b/dev/js/runner/containerMenu.html
new file mode 100644
index 0000000..91b67a9
--- /dev/null
+++ b/dev/js/runner/containerMenu.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Spec Runner for Menu Helper</title>
+ <link rel="shortcut icon" type="image/png" href="../lib/jasmine-2.1.1/jasmine_favicon.png">
+ <link rel="stylesheet" href="../lib/jasmine-2.1.1/jasmine.css">
+ <script src="../lib/require.js"></script>
+ <script>
+ require.config({
+ baseUrl: "../src",
+ paths: {
+ "lib" : "../lib",
+ "spec" : "../spec",
+ "jlib" : "lib/jasmine-2.1.1",
+ "jasmine" : ['../lib/jasmine-2.1.1/jasmine'],
+ "jasmine-html": ['../lib/jasmine-2.1.1/jasmine-html'],
+ "jasmine-boot": ['../lib/jasmine-2.1.1/boot']
+ },
+ shim : {
+ 'jasmine-html' : {
+ deps : ['jasmine']
+ },
+ 'jasmine-boot' : {
+ deps : ['jasmine','jasmine-html']
+ }
+ }
+ });
+ require(['jasmine-boot'], function () {
+ require([
+ 'spec/containerMenuSpec'
+ ],
+ function () {
+ window.onload();
+ });
+ });
+ </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/dev/js/spec/containerMenuSpec.js b/dev/js/spec/containerMenuSpec.js
new file mode 100644
index 0000000..81eafc7
--- /dev/null
+++ b/dev/js/spec/containerMenuSpec.js
@@ -0,0 +1,2049 @@
+define(
+ ['containermenu', 'menu/item', 'menu/prefix', 'menu/lengthField','container/containeritem','container/container'],
+ function (containerMenuClass, menuItemClass, prefixClass, lengthFieldClass, containerItemClass, containerClass) {
+
+ // The OwnMenu item
+ const OwnMenuItem = {
+ create : function (params) {
+ return Object.create(menuItemClass).upgradeTo(OwnMenuItem)._init(params);
+ },
+ content : function (content) {
+ if (arguments.length === 1) {
+ this._content = content;
+ };
+ return this._content;
+ },
+ _init : function (params) {
+ if (params[0] === undefined)
+ throw new Error("Missing parameters");
+
+ this._content = document.createTextNode(params[0]);
+ this._lcField = ' ' + this.content().textContent.toLowerCase();
+
+ return this;
+ }
+ };
+
+ /**
+ * Create own conainerItem class.
+ */
+ const OwnContainerItemClass = {
+ create : function () {
+ var obj = containerItemClass.create()
+ .upgradeTo(OwnContainerItemClass);
+ //._init();
+ obj.value="";
+ return obj;
+ },
+ add : function (letter) {
+ this.value+=letter;
+ },
+ clear : function () {
+ this.value = "";
+ },
+ further : function () {
+ this.value = this.value + this.value;
+ },
+ onclick : function () {
+ },
+ element : function () {
+ // already defined
+ if (this._el !== undefined) return this._el;
+
+ // Create list item
+ const li = document.createElement("li");
+ li.innerHTML="CI";
+
+ // Connect action
+ if (this["onclick"] !== undefined) {
+ li["onclick"] = this.onclick.bind(this);
+ };
+ return this._el = li;
+ }
+ };
+
+ //List of items.
+ var ExampleItemList = new Array;
+ ExampleItemList.push(OwnContainerItemClass.create());
+ ExampleItemList.push(OwnContainerItemClass.create());
+ ExampleItemList[0].value = "CIValue1 ";
+ ExampleItemList[1].value = "CIValue2 ";
+ ExampleItemList[0].element().innerHTML = "CIText1 ";
+ ExampleItemList[1].element().innerHTML = "CIText2 ";
+
+ //Own container class.
+ const OwnContainerClass = {
+ create : function (listOfContainerItems, params) {
+ //console.log(containerClass);
+ return containerClass.create(listOfContainerItems, params)
+ .upgradeTo(OwnContainerClass);
+ }
+ };
+
+ const OwnContainerMenu = {
+ create : function (list, containerList) {
+ const params = {
+ itemClass : OwnMenuItem,
+ prefixClass : prefixClass,
+ lengthFieldClass : lengthFieldClass,
+ containerClass : OwnContainerClass,
+ containerItemClass : OwnContainerItemClass
+ };
+ var obj = containerMenuClass.create(list,params,containerList)
+ .upgradeTo(OwnContainerMenu);
+ //._init(list, params);
+ return obj;
+ }
+ };
+
+ describe('OwnContainerMenu', function () {
+
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+
+ var listWithEX = [
+ ["example 1 Constituency"],
+ ["Lemma"],
+ ["example 2 Morphology"],
+ ["Part-of_Speech"],
+ ["Syntax"]
+ ];
+
+ var listMultiPrefix = [
+ ["Personal Pronoun"],
+ ["Personal Pronoun, Plural"],
+ ["Personal Pronoun, Plural, Acc."],
+ ["Personal Pronoun, Plural, Dative"],
+ ["Personal Pronoun, Plural, Direct"],
+ ["Personal Pronoun, Plural, Oblique"],
+ ["Personal Pronoun, Singular"],
+ ["Personal Pronoun, Singular, Accusative"],
+ ["Personal Pronoun, Singular, Dative"],
+ ["Personal Pronoun, Singular, Direct"],
+ ["Personal Pronoun, Singular, Nominative"],
+ ["Personal Pronoun, Singular, Oblique"]
+ ];
+
+ var demolist = [
+ ['Titel'],
+ ['Untertitel'],
+ ['Veröffentlichungsdatum'],
+ ['Länge'],
+ ['Autor']
+ ];
+
+ var demolonglist = [
+ ['Titel'],
+ ['Untertitel'],
+ ['Veröffentlichungsdatum'],
+ ['Länge'],
+ ['Autor'],
+ ['Genre'],
+ ['corpusID'],
+ ['docID'],
+ ['textID'],
+ ];
+
+ it('should be initializable', function () {
+ /**var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+ */
+
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ // This is the same with and without additional container items!
+ expect(menu.dontHide).toBe(false);
+ menu._firstActive = true;
+ expect(menu.itemClass()).toEqual(OwnMenuItem);
+ expect(menu.element().nodeName).toEqual('UL');
+ expect(menu.element().classList.contains('visible')).toBeFalsy();
+ expect(menu.container().element().classList.contains('visible')).toBeFalsy();
+ expect(menu.limit()).toEqual(8);
+ expect(menu._notItemElements).toEqual(3);
+
+ menu.limit(9);
+ expect(menu.limit()).toEqual(9);
+
+ menu.limit(8);
+
+ // view
+ menu.show();
+ expect(menu.element().classList.contains('visible')).toBeTruthy();
+ expect(menu.container().element().classList.contains('visible')).toBeTruthy();
+
+ // First element in list
+ expect(menu.item(0).active()).toBe(true);
+ expect(menu.item(0).noMore()).toBe(true);
+
+ // Middle element in list
+ expect(menu.item(2).active()).toBe(false);
+ expect(menu.item(2).noMore()).toBe(false);
+
+ // Last element in list
+ expect(menu.item(menu.length() - 1).active()).toBe(false);
+ expect(menu.item(menu.length() - 1).noMore()).toBe(true);
+
+ expect(menu.element().classList.contains('containermenu')).toBeTruthy();
+ expect(menu.container()).toBeTruthy();
+ expect(menu._container.element().nodeName).toEqual('UL'); // actually need new one for container!
+ expect(menu._prefix.element().nodeName).toEqual('SPAN');
+ expect(menu._container._containerItemClass).toEqual(OwnContainerItemClass);
+ expect(menu._container.items.length).toEqual(3);
+ });
+
+ it('should have a reference to the menu', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ expect(menu.item(0).menu()).toEqual(menu);
+ expect(menu.element().menu).toEqual(menu);
+ for (item of menu._container.items) {
+ expect(item._menu).toEqual(menu);
+ };
+ });
+
+
+ it('should be visible', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ expect(menu.removeItems()).toBe(undefined);
+ menu.limit(3);
+
+ expect(menu.show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(liElements[3]).toBe(undefined);
+
+ // Check boundaries
+ expect(liElements[0].classList.contains("no-more")).toBe(true);
+ expect(liElements[1].classList.contains("no-more")).toBe(false);
+ expect(liElements[2].classList.contains("no-more")).toBe(false);
+
+ var items = menu.container().items;
+ expect(items[0].element().innerHTML).toEqual("CIText1 ");
+ expect(items[1].element().innerHTML).toEqual("CIText2 ");
+ expect(items[2].element().innerHTML).toEqual("");
+ expect(items[3]).toBe(undefined);
+ });
+
+ it('should be filterable', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ menu.limit(3);
+ expect(menu.prefix("o").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(liElements[2].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(liElements[3]).toBe(undefined);
+
+ // Check boundaries
+ expect(liElements[0].classList.contains("no-more")).toBe(true);
+ expect(liElements[1].classList.contains("no-more")).toBe(false);
+ expect(liElements[2].classList.contains("no-more")).toBe(true);
+
+ menu.limit(2);
+
+ expect(menu.prefix("o").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+
+ expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+ expect(liElements[2]).toBe(undefined);
+
+ // Check boundaries
+ expect(liElements[0].classList.contains("no-more")).toBe(true);
+ expect(liElements[1].classList.contains("no-more")).toBe(false);
+ expect(liElements[2]).toBe(undefined);
+
+ expect(menu.prefix("e").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("e");
+ expect(liElements[0].innerHTML).toEqual("Constitu<mark>e</mark>ncy");
+ expect(liElements[2]).toBe(undefined);
+
+ menu.limit(5);
+ expect(menu.prefix("a").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("a");
+ expect(liElements[0].innerHTML).toEqual("Lemm<mark>a</mark>");
+ expect(liElements[1].innerHTML).toEqual("P<mark>a</mark>rt-of-Speech");
+ expect(liElements[2].innerHTML).toEqual("Synt<mark>a</mark>x");
+ expect(liElements[3]).toBe(undefined);
+
+ });
+
+ it('should be nextable', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu._firstActive = true;
+
+ // Show only 3 items
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate next (1)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate next (2)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate next (3)
+ // scroll!
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate next (4)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate next (5) - ROLL
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Active next (6)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ });
+
+ it('should be nextable when there are two containeritems', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ menu._firstActive = true;
+
+ // Show only 3 items
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (1)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (2)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (3)
+ // scroll!
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (4)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (4.1) - Jump to container part
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (4.2)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(true);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ /** Prefix is not set
+ // Activate next (4.3)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+ */
+
+ // Activate next (5) - ROLL
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Active next (6)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be nextable without active field', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ menu.next();
+ expect(menu.shownItem(0).active()).toEqual(true);
+ });
+
+
+ it('should be prevable', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu._firstActive = true;
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate prev (1) - roll to bottom
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate prev (2)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate prev (3)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate prev (4)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate prev (5)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate next (1)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+
+ // Activate prev (6)
+ menu.prev();
+
+ // Activate prev (7)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ });
+
+ it('should be prevable with containerItems', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ menu._firstActive = true;
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (1) - roll to bottom - base items stay, now container
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(true);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev(2) - next container item
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (3) - roll to bottom of normal list
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (4)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (5)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (6)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (7)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate next (8)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Lemma");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Activate prev (9)
+ menu.prev();
+ menu.prev();
+ menu.prev();
+
+ // Activate prev (10)
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Morphology");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-of-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Syntax");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(liElements[3]).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be prevable without active field', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ menu.prev();
+ expect(menu.shownItem(2).active()).toEqual(true);
+ expect(menu.shownItem(2).lcField()).toEqual(' syntax');
+ });
+
+ it('should be navigatable and filterable (prefix = "o")', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu._firstActive = true;
+ menu.limit(2);
+
+ expect(menu.prefix("o").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Next (1)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Next (2)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ // Next (3) - to prefix
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ });
+
+ it('should be navigatable and filterable (prefix = "o") using containerItems', function () {
+ var menu = OwnContainerMenu.create(list,ExampleItemList);
+ menu._firstActive = true;
+ menu.limit(2);
+
+ expect(menu.prefix("o").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (1)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (2)
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (3) - to first container Item
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (4) - to second container Item
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(true);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (5) - to prefix
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Part-<mark>o</mark>f-Speech");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("C<mark>o</mark>nstituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be navigatable and filterable (prefix = "ex", "e") with containerItems', function () {
+ var menu = OwnContainerMenu.create(listWithEX,ExampleItemList);
+ menu._firstActive = true;
+ menu.limit(3);
+
+ expect(menu.prefix("ex").show()).toBe(true);
+ expect(menu.prefix()).toEqual('ex');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (1)
+ menu.next();
+ expect(menu.prefix()).toEqual('ex');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (2)
+ menu.next();
+ expect(menu.prefix()).toEqual('ex');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ //Roll to Prefix
+ menu.next();
+ menu.next();
+ expect(menu.prefix()).toEqual('ex');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>ex</mark>ample 1 Constituency");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("<mark>ex</mark>ample 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+
+ // Reset limit
+ menu.limit(5);
+
+ // Change show
+ expect(menu.prefix("e").show()).toBe(true);
+ expect(menu._prefix.active()).toBe(false);
+ expect(menu.prefix()).toEqual('e');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (1)
+ menu.next();
+ expect(menu._prefix.active()).toBe(false);
+ expect(menu.prefix()).toEqual('e');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Next (2)
+ menu.next();
+ expect(menu._prefix.active()).toBe(false);
+ expect(menu.prefix()).toEqual('e');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+
+ // Next (3)
+ menu.next();
+ menu.next();
+ expect(menu._prefix.active()).toBe(true);
+ expect(menu.prefix()).toEqual('e');
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 1 Constitu<mark>e</mark>ncy");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("<mark>e</mark>xampl<mark>e</mark> 2 Morphology");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+ });
+
+
+ it('should be filterable (multiple prefix = "pro sin")', function () {
+ var menu = OwnContainerMenu.create(listMultiPrefix);
+ menu._firstActive = true;
+
+ menu.limit(2);
+ expect(menu.prefix("pro sin").show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual(
+ "Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular"
+ );
+
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative");
+ expect(menu.shownItem(1).active()).toBe(false);
+
+ expect(menu.shownItem(2)).toBe(undefined);
+ });
+
+ it('should be filterable (trimming = " p")', function () {
+ var menu = OwnContainerMenu.create(listMultiPrefix);
+ // menu._firstActive = true;
+
+ menu.limit(2);
+ expect(menu.show()).toBe(true);
+ menu._prefix.add(" ");
+ expect(menu.show()).toBe(true);
+ menu._prefix.add("p")
+ expect(menu.show()).toBe(true);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>P</mark>ersonal <mark>P</mark>ronoun");
+ });
+
+
+ it('should choose prefix with failing prefix (1)', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu.limit(2);
+ expect(menu.prefix("exit").show()).toBe(true);
+ expect(menu.element().querySelector('li')).toBe(null);
+ expect(menu.shownItem(0)).toBeUndefined();
+ expect(menu._prefix.active()).toBe(true);
+ });
+
+
+ it('should choose prefix with failing prefix (2)', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu.limit(2);
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix("exit").show()).toBe(true);
+ expect(menu.element().querySelector('li')).toBe(null);
+ expect(menu.shownItem(0)).toBeUndefined();
+ expect(menu._prefix.active()).toBe(true);
+ });
+
+ it('should ignore navigation with failing prefix', function () {
+ var menu = OwnContainerMenu.create(list);
+ menu.limit(2);
+ expect(menu.show()).toBe(true);
+
+ menu.next();
+
+ expect(menu.prefix("exit").show()).toBe(true);
+ expect(menu.element().querySelector('li')).toBe(null);
+ expect(menu.shownItem(0)).toBeUndefined();
+ expect(menu._prefix.active()).toBe(true);
+
+ menu.next();
+ expect(menu._prefix.active()).toBe(true);
+
+ menu.prev();
+ expect(menu._prefix.active()).toBe(true);
+
+ });
+
+ it('should be navigatable with prefix', function () {
+ var menu = OwnContainerMenu.create(demolist);
+ menu._firstActive = true;
+
+ menu.limit(3);
+
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ 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");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+
+ menu._prefix.add('u');
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("au");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>Au</mark>tor");
+
+ menu._prefix.chop();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("a");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+
+ menu._prefix.chop();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu._prefix.chop();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Länge");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Länge");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Autor");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ });
+
+ it('should be navigatable with prefix and containerItems', function () {
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu._firstActive = true;
+
+ menu.limit(3);
+
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu._prefix.add('a');
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("a");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu._prefix.add('u');
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("au");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>Au</mark>tor");
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu._prefix.chop();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("a");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("<mark>A</mark>utor");
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu._prefix.chop();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu._prefix.chop();
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("");
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Länge");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Länge");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Autor");
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Länge");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Autor");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Länge");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Autor");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(true);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("");
+ expect(liElements[0].innerHTML).toEqual("Titel");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertitel");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(liElements[2].innerHTML).toEqual("Veröffentlichungsdatum");
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be navigatable with a prefix (1) and containerItems', function () {
+ var menu = OwnContainerMenu.create(demolist, ExampleItemList);
+ menu._firstActive = true;
+
+ menu.limit(3);
+
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+
+ // Add prefix in uppercase - but check in lowercase
+ menu.prefix('El');
+ expect(menu.show()).toBe(true);
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("El");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("El");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Forward
+ menu.next();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("El");
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(true);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu.next();
+ menu.next();
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("El");
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+
+ // Backward
+ menu.prev();
+ menu.prev();
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("El");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+
+ it('should be navigatable with a prefix (2) and containerItems', function () {
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu._firstActive = true;
+
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ menu.prefix('el');
+ expect(menu.show()).toBe(true);
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Backward
+ menu.prev();
+ expect(menu._prefix.active()).toEqual(true);
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+
+ // Backward
+ menu.prev();
+ menu.prev();
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be navigatable with a prefix (3) and containerItems', function () {
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu._firstActive = true;
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+ expect(menu.prefix()).toEqual("");
+ menu.prefix('el');
+ expect(menu.show()).toBe(true);
+
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Backward
+ menu.prev();
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(menu._prefix.active()).toEqual(true);
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(true); //prefix
+
+
+ // Forward
+ menu.next();
+ expect(menu.prefix()).toEqual("el");
+ expect(menu._prefix.active()).toEqual(false);
+ var liElements = menu.directElementChildrenByTagName("li");
+ expect(liElements[0].innerHTML).toEqual("Tit<mark>el</mark>");
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(liElements[1].innerHTML).toEqual("Untertit<mark>el</mark>");
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ });
+
+ it('should show screens by offset', function () {
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu.limit(3);
+ expect(menu.show()).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Highlight the first entry
+ menu.next();
+
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Highlight the second entry
+ menu.next();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+
+ // Move to first screen
+ menu.screen(0);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ // Move to second screen
+ menu.screen(1);
+ expect(menu.shownItem(0).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ menu.screen(2);
+ expect(menu.shownItem(0).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ menu.screen(1);
+ expect(menu.shownItem(0).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should show screens by offset when prefixed', function () {
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu.limit(3);
+ expect(menu.prefix("e").show()).toBe(true);
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ expect(menu.shownItem(0).element().innerHTML).toEqual('Tit<mark>e</mark>l');
+ menu.screen(1);
+ expect(menu.shownItem(0).element().innerHTML).toEqual('Unt<mark>e</mark>rtit<mark>e</mark>l');
+ });
+
+
+ it('should be page downable', function () {
+ var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+ menu.limit(3);
+
+ expect(menu.show(0)).toBe(true);
+
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ menu.pageDown();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ menu.pageDown();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' corpusid');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Doesn't matter
+ menu.pageDown();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' corpusid');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be page downable with prefix', function () {
+ var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+ menu.limit(3);
+
+ expect(menu.prefix('e').show(0)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.shownItem(3)).toBe(undefined);
+
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu.pageDown();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(1).lcField()).toEqual(' genre');
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' textid');
+
+ // Doesn't matter
+ menu.pageDown();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(1).lcField()).toEqual(' genre');
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' textid');
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+
+ it('should be page upable', function () {
+ var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+ menu.limit(3);
+
+ // Choose the final value
+ expect(menu.show(1000)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(2).lcField()).toEqual(' textid');
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+
+ // Doesn't matter
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be page upable with prefix', function () {
+ var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+ menu.limit(3);
+
+ // Choose the final value
+ expect(menu.prefix("e").show(1000)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(1).lcField()).toEqual(' genre');
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(2).lcField()).toEqual(' textid');
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+
+ // Doesn't matter
+ menu.pageUp();
+
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(1).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be view upable and downable (1)', function () {
+ var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+ menu.limit(7);
+
+ // Choose the final value
+ expect(menu.show(1)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.shownItem(6).active()).toBe(false);
+ expect(menu.shownItem(7)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Doesn't change anything
+ menu.viewUp();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(true);
+
+ menu.viewDown();
+
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' untertitel');
+ expect(menu.shownItem(1).active()).toBe(false);
+
+ menu.viewDown();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.shownItem(1).active()).toBe(false);
+
+ // No effect anymore
+ menu.viewDown();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+ it('should be view upable and downable (2)', function () {
+
+ // List is longer than limit
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu.limit(7);
+
+ // Choose the final value
+ expect(menu.show(1)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(2).lcField()).toEqual(' veröffentlichungsdatum');
+ expect(menu.shownItem(4).active()).toBe(false);
+ expect(menu.shownItem(5)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Doesn't change anything
+ menu.viewUp();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(true);
+
+ menu.viewDown();
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+ });
+
+
+ it('should scroll to a chosen value (1)', function () {
+ var menu = OwnContainerMenu.create(demolist,ExampleItemList);
+ menu.limit(3);
+
+ // Choose value 1
+ expect(menu.show(1)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(true);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ expect(menu.container().items[0].active()).toBe(false);
+ expect(menu.container().items[1].active()).toBe(false);
+ expect(menu.container().items[2].active()).toBe(false); //prefix
+
+ // Choose value 2
+ expect(menu.show(2)).toBe(true);
+
+ expect(menu.shownItem(0).active()).toBe(false);
+ expect(menu.shownItem(0).lcField()).toEqual(' titel');
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(true);
+ expect(menu.shownItem(3)).toBe(undefined);
+ });
+
+ it('should scroll to a chosen value (2)', function () {
+ var menu = OwnContainerMenu.create(demolonglist,ExampleItemList);
+
+ // Choose value 3
+ expect(menu.limit(3).show(3)).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' länge');
+ expect(menu.shownItem(0).active()).toBe(true);
+ expect(menu.shownItem(1).active()).toBe(false);
+ expect(menu.shownItem(2).active()).toBe(false);
+ expect(menu.shownItem(3)).toBe(undefined);
+ });
+
+ xit('should scroll to a chosen value after prefixing, if the chosen value is live');
+
+ it('should be extendable', function () {
+ var menu = OwnContainerMenu.create([],ExampleItemList);
+ let entryData = 'empty';
+ menu._itemClass = menuItemClass;
+ menu.readItems([
+ ['a', '', function () { entryData = 'a' }],
+ ['bb', '', function () { entryData = 'bb' }],
+ ['ccc', '', function () { entryData = 'ccc' }],
+ ]);
+ expect(menu.limit(3).show(3)).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' a');
+ expect(menu.shownItem(1).lcField()).toEqual(' bb');
+ expect(menu.shownItem(2).lcField()).toEqual(' ccc');
+ expect(entryData).toEqual('empty');
+ menu.shownItem(1).element().click();
+ expect(entryData).toEqual('bb');
+ expect(menu.lengthField().element().innerText).toEqual("a--bb--ccc--")
+ expect(menu.slider().length()).toEqual(3);
+ let obj = menu.itemClass().create(
+ ['dddd','',function () { entryData = 'dddd'} ]
+ );
+ menu.append(obj);
+ expect(menu.limit(2).show(1)).toBe(true);
+ expect(menu.shownItem(0).lcField()).toEqual(' a');
+ expect(menu.shownItem(1).lcField()).toEqual(' bb');
+ menu.next();
+ expect(menu.shownItem(1).lcField()).toEqual(' ccc');
+ menu.next();
+ expect(menu.shownItem(1).lcField()).toEqual(' dddd');
+ menu.next();
+ menu.next();
+ menu.next();
+ expect(menu.shownItem(0).lcField()).toEqual(' a');
+ expect(menu.lengthField().element().innerText).toEqual("a--bb--ccc--dddd--")
+ expect(menu.slider().length()).toEqual(4);
+ });
+ });
+ describe('Container', function () {
+ it("should be initializable with no additional container items", function () {
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+ var menu = OwnContainerMenu.create(list);
+ var container = menu.container();
+ expect(container._containerItemClass).toEqual(OwnContainerItemClass);
+ expect(container.element().nodeName).toEqual("UL");
+ expect(container.element().classList.contains("menu")).toBeTruthy();
+ expect(container.element().classList.contains("visible")).toBeFalsy();
+ expect(menu._prefix).toEqual(container._prefix);
+ expect(container.length()).toEqual(1);
+ expect(container.length()).toEqual(container.items.length);
+ expect(container.liveLength()).toEqual(0);
+ expect(container.item(0)).toEqual(container._prefix);
+ expect(container.active()).toBeFalsy();
+ expect(menu.directElementChildrenByTagName("pref")).toEqual([]);
+ expect(container.element().getElementsByClassName("pref").length).toEqual(1);
+
+
+
+ menu.prefix("ad");
+ expect(container.liveLength()).toEqual(1);
+ menu.prev();
+ expect(container.active()).toBeTruthy();
+
+
+ });
+
+ });
+ });
diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index 29e8b44..47adfd3 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -1529,7 +1529,7 @@
let obj = menu.itemClass().create(
['dddd','',function () { entryData = 'dddd'} ]
);
- menu.append(obj)
+ menu.append(obj);
expect(menu.limit(2).show(1)).toBe(true);
expect(menu.shownItem(0).lcField()).toEqual(' a');
diff --git a/dev/js/src/container/container.js b/dev/js/src/container/container.js
new file mode 100644
index 0000000..9b436ca
--- /dev/null
+++ b/dev/js/src/container/container.js
@@ -0,0 +1,230 @@
+/**
+ * Container for several containerItem style items. Functions like a mini menu with next, prev, add etc propagation,
+ * but no event handling or slider or lengthField. Supposed to be subelement to a (container)menu class item.
+ *
+ * @author Leo Repp
+ */
+
+"use strict";
+define([
+ 'container/containeritem' //TODO why does this not work!!!
+], function (
+ defaultContainerItemClass
+) {
+
+ return {
+ /**
+ *
+ * @param {Array<object>} listOfContainerItems List of items that will be placed within the container and that realise some of the functions supplied in containeritem.js
+ * @param {object} params May contain attribute containerItemClass for a base class all containerItems build upon
+ * @returns The container object
+ */
+ create : function (listOfContainerItems, params) {
+ var obj = Object.create(this);
+ obj._init(listOfContainerItems, params);
+ return obj;
+ },
+
+ _init : function (listOfContainerItems, params){
+ if (params !== undefined && params["containerItemClass"] !== undefined){
+ this._containerItemClass = params["containerItemClass"];
+ } else {
+ this._containerItemClass = defaultContainerItemClass;
+ };
+ var el = document.createElement("ul");
+ el.style.outline = 0;
+ el.setAttribute('tabindex', 0);
+ el.classList.add('menu', 'container'); //container class allows for more stylesheet changes
+
+ this._el = el;
+ this._prefix = undefined; //required for re-setting the menus pointer correctly
+ // after having upgraded a new item scss style to the prefix object.
+
+ this.items = new Array();
+ if (listOfContainerItems !== undefined) {
+ for (let item of listOfContainerItems) {
+ this.addItem(item);
+ }
+ }
+
+ this.position = undefined; //undefined = not in container, 0 to length-1 = in container
+
+
+ //t._el.classList.add('visible'); //Done by containermenu
+
+
+ },
+ /**
+ * Upgrade this object to another object,
+ * while private data stays intact.
+ *
+ * @param {Object} An object with properties.
+ */
+ upgradeTo : function (props) {
+ for (let prop in props) {
+ this[prop] = props[prop];
+ };
+ return this;
+ },
+
+ addItem : function (item) {
+ var cItem = this._containerItemClass.create().upgradeTo(item);
+ cItem._menu = this._menu; //if not set then undefined, but thats OK
+ this.items.push(cItem);
+ this._el.appendChild(cItem.element());
+ return cItem;
+ },
+
+ addMenu : function (menu) {
+ this._menu = menu;
+ if (this._prefix !== undefined) {
+ this._menu._prefix = this._prefix; // better than going via classList or something
+ };
+ for (let item of this.items) {
+ item._menu=menu;
+ }
+ },
+
+ addPrefix : function (prefix) {
+ prefix.isSelectable = function () {
+ return this.isSet(); //TODO check!
+ }
+ var prefItem = this.addItem(prefix);
+ this._prefix = prefItem;
+ if (this._menu !== undefined){
+ this._menu._prefix=prefItem;
+ }
+ },
+
+ /**
+ * Exit the container unconditionally. Required so that active returns the
+ * correct result. Called when the prefix or similar resets the currently visual
+ * field.
+ */
+ exit : function () {
+ if (this.position !== undefined) {
+ this.item().active(false);
+ this.position = undefined;
+ };
+ },
+
+ element : function () {
+ return this._el;
+ },
+
+ destroy : function () {
+ for (let item of this.items){
+ delete item['_menu'];
+ }
+ },
+
+ /**
+ * @returns whether an item within the container is active (by checking this.position)
+ */
+ active : function () {
+ return this.position !== undefined;
+ },
+
+ /**
+ * Getter for items
+ * @param {Integer} index [optional] Index of to select item. If left blank this.position.
+ * @returns item at location index
+ */
+ item : function (index) {
+ if (index === undefined) return this.items[this.position];
+ return this.items[index];
+ },
+
+ /**
+ * Move on to the next item in container. Returns true if we then leave the container, false otherwise.
+ */
+ next : function() {
+ if (this.position !== undefined){
+ this.item().active(false);
+ this.position++;
+ } else {
+ this.position = 0;
+ };
+ if (this.position >= this.length()) {
+ this.position=undefined;
+ return true;
+ };
+ while (!this.item().isSelectable()) {
+ this.position++;
+ if (this.position >= this.length()) {
+ this.position=undefined;
+ return true;
+ }
+ };
+ this.item().active(true);
+ return false;
+ },
+
+ /**
+ * Move on to the previous item in container. Returns true if we then leave the container, false otherwise.
+ */
+ prev : function() {
+ if (this.position !== undefined){
+ this.item().active(false);
+ this.position = (this.position-1)
+ } else {
+ this.position = (this.items.length-1);
+ }
+ if (this.position<0) {
+ this.position=undefined;
+ return true;
+ }
+ while (!this.item().isSelectable()) {
+ this.position--;
+ if (this.position<0){
+ this.position=undefined;
+ return true;
+ };
+ };
+ this.item().active(true);
+ return false;
+ },
+
+ further : function () {
+ const item = this.item();
+ if (item["further"] !== undefined) {
+ item["further"].bind(item).apply();
+ };
+ },
+
+ enter : function (event) {
+ this.item().onclick(event);
+ },
+
+ chop : function () {
+ for (let item of this.items) {
+ item.chop();
+ }
+ },
+
+ add : function (letter) {
+ for (let item of this.items) {
+ item.add(letter);
+ }
+ },
+
+ length : function () {
+ return this.items.length;
+ },
+
+ /**
+ *
+ * @returns The number of items that are selectable. Is the actual length of the list.
+ */
+ liveLength : function () {
+ var ll = 0;
+ for (let item of this.items){
+ if (item.isSelectable()){
+ ll++;
+ }
+ }
+ return ll;
+ }
+
+};
+});
\ No newline at end of file
diff --git a/dev/js/src/container/containeritem.js b/dev/js/src/container/containeritem.js
new file mode 100644
index 0000000..10709b8
--- /dev/null
+++ b/dev/js/src/container/containeritem.js
@@ -0,0 +1,108 @@
+/**
+ * API/ skeleton/ base class for an item contained within a container.
+ * Here we see which functions container supports for containerItems.
+ *
+ * @author Leo Repp
+ */
+
+
+//"use strict";
+
+define({
+
+ /**
+ * API for an item contained within a container
+ */
+ create : function () {
+ return Object.create(this); //._init();
+ },
+
+ /**
+ * Upgrade this object to another object,
+ * while private data stays intact.
+ *
+ * @param {Object} An object with properties.
+ */
+ upgradeTo : function (props) {
+ for (let prop in props) {
+ this[prop] = props[prop];
+ };
+ return this;
+ },
+
+ /**
+ * Check or set if the item is active
+ *
+ * @param {boolean|null} State of activity
+ */
+ active : function (bool) {
+ const cl = this.element().classList;
+ if (bool === undefined) return cl.contains("active");
+ else if (bool) cl.add("active");
+ else cl.remove("active"); //allows for setting it to inactive if not (equal to undefined or truthy)
+ },
+
+ /**
+ * Get/create the document element of the container item. Can be overwritten. Standard class: li
+ */
+ element : function () {
+ // already defined
+ if (this._el !== undefined) return this._el;
+
+ // Create list item
+ const li = document.createElement("li");
+
+ // Connect action
+ if (this["onclick"] !== undefined) {
+ li["onclick"] = this.onclick.bind(this);
+ };
+ return this._el = li;
+ },
+
+ /**
+ * Expected to be overwritten
+ * @returns whether the item is currently an option to be selected, or if it should just be skipped
+ */
+ isSelectable : function () {
+ return true;
+ },
+
+ /**
+ * API skeleton for reading letters. Expected to be overwritten.
+ * @param {String} letter The letter to be read
+ */
+ add : function (letter) {},
+
+
+ /**
+ * API skeleton for clearing whole contents. Expected to be overwritten.
+ */
+ clear : function () {},
+
+
+ /**
+ * API skeleton method for execution. Expected to be overwritten.
+ * @param {Event} event Event passed down by menu.
+ */
+ onclick : function (e) {},
+
+
+ /**
+ * API skeleton method for when backspace is pressed. Expected to be overwritten.
+ */
+ chop : function () {},
+
+ /**
+ * API skeleton method for pressing "right". Expected to be overwritten.
+ * @param {Event} event Event passed down by menu.
+ */
+ further : function (e) {},
+
+ /**
+ * Return menu list. This._menu gets written by the container class
+ */
+ menu : function () {
+ return this._menu;
+ }
+
+});
\ No newline at end of file
diff --git a/dev/js/src/containermenu.js b/dev/js/src/containermenu.js
new file mode 100644
index 0000000..a272e10
--- /dev/null
+++ b/dev/js/src/containermenu.js
@@ -0,0 +1,378 @@
+/**
+ * Menu with a container for always visible non scrollable items (can also be made invisible)
+ * Automatically moves the prefix into the container. See containeritem.js for an API of functions
+ * a container will call on containeritem.
+ *
+ * @author Leo Repp, with reused code by Nils Diewald
+ */
+
+"use strict";
+define([
+ 'menu',
+ 'container/container',
+ 'util'
+], function (defaultMenuClass,
+ defaultContainerClass) {
+
+ return {
+ /**
+ * Create new Container Menu based on the action prefix
+ * and a list of menu items.
+ *
+ * Accepts an associative array containg the elements
+ * itemClass, prefixClass, lengthFieldClass, containerClass, containerItemClass
+ *
+ * @this {Menu}
+ * @constructor
+ * @param {string} params Context prefix
+ * @param {Array.<Array.<string>>} list List of menu items
+ * @param {Array.<Array.<containerItem>>} containerList List of container items
+ */
+ create : function (list, params, containerList) {
+ const obj = defaultMenuClass.create(list, params)
+ .upgradeTo(this)
+ ._init(list, params);
+
+ obj._el.classList.add('containermenu');
+
+ //add container object and allow for own containerClasses
+ if (params!==undefined && params["containerClass"] !== undefined) {
+ obj._container = params["containerClass"].create(containerList, params);
+ } else {
+ obj._container = defaultContainerClass.create(containerList, params);
+ }
+ obj.container().addMenu(obj);
+
+ // add entry to HTML element
+ obj._el.appendChild(obj.container().element());
+ obj._el.removeChild(obj._prefix.element());
+ //Keep prefix as 'pref' style. The additional distance is fine.
+ obj.container().addPrefix(obj._prefix);
+ return obj;
+ },
+
+ /**
+ * Destroy this menu
+ * (in case you don't trust the
+ * mark and sweep GC)!
+ */
+ destroy : function () {
+ // Upon change also update alwaysmenu.js please
+ const t = this;
+
+ // Remove circular reference to "this" in menu
+ if (t._el != undefined)
+ delete t._el["menu"];
+
+ // Remove circular reference to "this" in items
+ t._items.forEach(function(i) {
+ delete i["_menu"];
+ });
+
+ // Remove circular reference to "this" in prefix
+ delete t._prefix['_menu'];
+ delete t._lengthField['_menu'];
+ delete t._slider['_menu'];
+ t.container().destroy();
+ delete t.container()['_menu'];
+ },
+
+ // Arrow key and container treatment
+ _keydown : function (e) {
+ const t = this;
+
+ switch (_codeFromEvent(e)) {
+
+ case 27: // 'Esc'
+ e.halt();
+ t.hide();
+ break;
+
+ case 38: // 'Up'
+ e.halt();
+ t.prev();
+ break;
+
+ case 33: // 'Page up'
+ e.halt();
+ t.pageUp();
+ break;
+
+ case 40: // 'Down'
+ e.halt();
+ t.next();
+ break;
+
+ case 34: // 'Page down'
+ e.halt();
+ t.pageDown();
+ break;
+
+ case 39: // 'Right'
+ if (t.container().active()){
+ t.container().further();
+ e.halt();
+ break;
+ }
+
+ const item = t.liveItem(t.position);
+
+ if (item["further"] !== undefined) {
+ item["further"].bind(item).apply();
+ };
+
+ e.halt();
+ break;
+
+ case 13: // 'Enter'
+ // Click on prefix
+ if (t.container().active()){
+ t.container().enter(e);
+ } else { // Click on item
+ t.liveItem(t.position).onclick(e);
+ };
+ e.halt();
+ break;
+
+ case 8: // 'Backspace'
+ t.container().chop();
+ t.show();
+ e.halt();
+ break;
+ };
+ },
+
+
+ // Add characters to prefix and other interested items
+ _keypress : function (e) {
+ if (e.charCode !== 0) {
+ e.halt();
+
+ // Add prefix and other interested items
+ this.container().add(
+ String.fromCharCode(_codeFromEvent(e))
+ );
+
+ this.show();
+ };
+ },
+
+
+ /**
+ * Filter the list and make it visible.
+ * This is always called once the prefix changes.
+ *
+ * @param {string} Prefix for filtering the list
+ */
+ show : function (active) {
+ //there are only two new lines, marked with NEW
+ const t = this;
+
+ // show menu based on initial offset
+ t._unmark(); // Unmark everything that was marked before
+ t.removeItems();
+ t.container().exit(); //NEW
+
+ // Initialize the list
+ if (!t._initList()) {
+
+ // The prefix is not active
+ t._prefix.active(true);
+
+ // finally show the element
+ t._el.classList.add('visible'); // TODO do I need this for container?
+ t.container()._el.classList.add('visible');
+
+ return true;
+ };
+
+ let offset = 0;
+
+ // Set a chosen value to active and move the viewport
+ if (arguments.length === 1) {
+
+ // Normalize active value
+ if (active < 0) {
+ active = 0;
+ }
+ else if (active >= t.liveLength()) {
+ active = t.liveLength() - 1;
+ };
+
+ // Item is outside the first viewport
+ if (active >= t._limit) {
+ offset = active;
+ const newOffset = t.liveLength() - t._limit;
+ if (offset > newOffset) {
+ offset = newOffset;
+ };
+ };
+
+ t.position = active;
+ }
+
+ // Choose the first item
+ else if (t._firstActive) {
+ t.position = 0;
+ }
+
+ // Choose no item
+ else {
+ t.position = -1;
+ };
+
+ t.offset = offset;
+ t._showItems(offset); // Show new item list
+
+ // Make chosen value active
+ if (t.position !== -1) {
+ t.liveItem(t.position).active(true);
+ };
+
+ // The prefix is not active
+ t._prefix.active(false);
+
+ // finally show the element
+ t._el.classList.add('visible');
+ t.container()._el.classList.add('visible'); //NEW
+
+ // Add classes for rolling menus
+ t._boundary(true);
+
+ return true;
+ },
+
+
+ /**
+ * Hide the menu and call the onHide callback.
+ */
+ hide : function () { //only one new line
+ if (!this.dontHide) {
+ this.removeItems();
+ this._prefix.clear();
+ this.onHide();
+ this._el.classList.remove('visible');
+ this.container()._el.classList.remove('visible'); //NEW
+ }
+ // this._el.blur();
+ },
+
+
+
+ /**
+ * Make the next item in the filtered menu active
+ */
+ next : function () {
+ const t = this;
+ var notInContainerAnyMore;
+ const c = t.container();
+ const cLLength = c.liveLength();
+ // No list
+ if (t.liveLength()===0){
+ if (cLLength === 0) return;
+ notInContainerAnyMore = c.next();
+ if (notInContainerAnyMore) {
+ c.next();
+ }
+ return;
+ };
+ if (!c.active() && t.position!==-1) {t.liveItem(t.position).active(false);} //this should be enough to ensure a valid t.position
+ if (!c.active()){
+ t.position++;
+ };
+ let newItem = t.liveItem(t.position); //progress
+ if (newItem === undefined) { //too far
+ t.position = -1;
+ if (cLLength !== 0){ //actually makes sense to next
+ notInContainerAnyMore = t.container().next(); //activate container
+ if (notInContainerAnyMore) { //oh, next one (should not happen, because cLLength is now liveLength)
+ t.position = 0;
+ t._showItems(0);
+ newItem=t.liveItem(0);
+ };
+ } else {
+ t.position = 0;
+ t._showItems(0);
+ newItem=t.liveItem(0);
+ };
+ }// The next element is after the viewport - roll down
+ else if (t.position >= (t.limit() + t.offset)) {
+ t.screen(t.position - t.limit() + 1);
+ }
+ // The next element is before the viewport - roll up
+ else if (t.position <= t.offset) {
+ t.screen(t.position);
+ }
+ if (newItem !== undefined) {
+ newItem.active(true);
+ };
+ },
+
+
+ /**
+ * Make the previous item in the menu active
+ */
+ prev : function () {
+ const t = this;
+ var notInContainerAnyMore;
+ const c = t.container();
+ const cLLength = c.liveLength();
+
+ // No list
+ if (t.liveLength() === 0) {
+ if (cLLength === 0) return;
+ notInContainerAnyMore = c.prev();
+ if (notInContainerAnyMore) {
+ c.prev();
+ }
+ return;
+ }
+ if (!c.active() && t.position!==-1) {t.liveItem(t.position).active(false);}//this should be enough to ensure a valid t.position
+ if (!c.active()){
+ t.position--;
+ };
+ let newItem = t.liveItem(t.position); //progress
+ if (newItem === undefined) { //too far
+ t.position = -1;
+ let offset = t.liveLength() - t.limit();
+ // Normalize offset
+ offset = offset < 0 ? 0 : offset;
+ if (cLLength !== 0){ //actually makes sense to next
+ notInContainerAnyMore = t.container().prev(); //activate container
+ if (notInContainerAnyMore) { //oh, next one (should not happen, because cLLength is now liveLength)
+ t.position = t.liveLength() - 1;
+ newItem = t.liveItem(t.position);
+ t._showItems(offset);
+ } else {
+ t.offset = offset;
+ };
+ } else {
+ t.position = t.liveLength() - 1;
+ newItem = t.liveItem(t.position);
+ t._showItems(offset);
+ }
+ }
+ // The previous element is before the view - roll up
+ else if (t.position < t.offset) {
+ t.screen(t.position);
+ }
+
+ // The previous element is after the view - roll down
+ else if (t.position >= (t.limit() + t.offset)) {
+ t.screen(t.position - t.limit() + 2);
+ };
+ if (newItem !== undefined) {
+ newItem.active(true);
+ };
+ },
+
+ /**
+ * Get the container object
+ */
+ container : function () {
+ return this._container;
+ }
+
+
+ };
+});
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 4e93390..86a8105 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -55,7 +55,6 @@
// Initialize list
_init : function (list, params) {
-
if (params === undefined)
params = {};
@@ -130,8 +129,6 @@
t._items = new Array(); //all childNodes, i.e. ItemClass, prefixClass
- // TODO:
- // Make this separate from _init
t.readItems(list);
t.dontHide = false;
@@ -639,10 +636,13 @@
removeItems : function () {
const liElements=this._el.getElementsByTagName("LI");
- for (let ii = liElements.length-1; ii >= 0; ii-- ) {
- if (liElements[ii].parentNode === this._el){
- this._el.removeChild(liElements[ii]);
- };
+ var ignoredCount = 0; //counts how many LI tag elements are not actually direct children
+ while (liElements.length>ignoredCount){
+ if (liElements[ignoredCount].parentNode === this._el){
+ this._el.removeChild(liElements[ignoredCount]);
+ } else {
+ ignoredCount++;
+ }
};
},
@@ -895,6 +895,7 @@
// Remove the HTML node from the first item
// leave lengthField/prefix/slider
+ //console.log("_showItems, at _notItemElements is: ",t._el.children[this._notItemElements]);
t._el.removeChild(t._el.children[this._notItemElements]);
t._append(
@@ -907,6 +908,7 @@
t.offset = off;
// Remove the HTML node from the last item
+ //console.log("_showItems, at lastChild is: ",t._el.lastChild);
t._el.removeChild(t._el.lastChild);
t._prepend(t._list[t.offset]);
diff --git a/dev/js/src/menu/prefix.js b/dev/js/src/menu/prefix.js
index f6c6c76..20e2753 100644
--- a/dev/js/src/menu/prefix.js
+++ b/dev/js/src/menu/prefix.js
@@ -22,9 +22,9 @@
t._el.classList.add('pref');
// Connect action
- if (t["onclick"] !== undefined)
+ if (t["onclick"] !== undefined) {
t._el["onclick"] = t.onclick.bind(t);
-
+ }
return t;
},