Use containerMenu as a base for HintMenu instead of regular menu
Change-Id: Ic1ed2e216a9c61aabf1f1cac41972b1a4e96a91a
diff --git a/dev/js/spec/containerMenuSpec.js b/dev/js/spec/containerMenuSpec.js
index 40d72e0..a6d85b7 100644
--- a/dev/js/spec/containerMenuSpec.js
+++ b/dev/js/spec/containerMenuSpec.js
@@ -45,31 +45,13 @@
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 ";
+ ExampleItemList.push({value : "CIValue1" , defaultTextValue : "CIText1 "});
+ ExampleItemList.push({value : "CIValue2" , defaultTextValue : "CIText2 "});
//Own container class.
const OwnContainerClass = {
@@ -228,9 +210,9 @@
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[0].content().nodeValue).toEqual("CIText1 ");
+ expect(items[1].content().nodeValue).toEqual("CIText2 ");
+ expect(items[2].element().innerHTML).toEqual(""); //prefix!
expect(items[3]).toBe(undefined);
});
@@ -2115,11 +2097,11 @@
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(menu._prefix).toEqual(container._cItemPrefix);
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.item(0)).toEqual(container._cItemPrefix);
expect(container.active()).toBeFalsy();
expect(directElementChildrenByTagName(menu.element(),"pref")).toEqual([]);
expect(container.element().getElementsByClassName("pref").length).toEqual(1);
@@ -2132,5 +2114,191 @@
expect(container.active()).toBeTruthy();
});
+ it("should support dynamic changing of text content", function () {
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+
+ var ExampleItemList2 = new Array;
+ ExampleItemList2.push({defaultTextValue : "CIText1 "});
+ ExampleItemList2.push({});
+
+ var menu = OwnContainerMenu.create(list,ExampleItemList2);
+ var container = menu.container();
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container.item(2)).toBeDefined();
+ expect(container.item(2).content()).toEqual(undefined);
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.item(0).content("New1").nodeValue).toEqual("New1");
+ expect(container.item(1).content("New2").nodeValue).toEqual("New2");
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.item(2)).toBeDefined();
+ expect(container.item(2).content()).toEqual(undefined);
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.item(2)).toBeDefined();
+ expect(container.item(2).content()).toEqual(undefined);
+
+
+ });
+
+ it("should support dynamic adding of items", function () {
+
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+
+ var ExampleItemList2 = new Array;
+ ExampleItemList2.push({defaultTextValue : "CIText1 "});
+ ExampleItemList2.push({});
+
+ var menu = OwnContainerMenu.create(list,ExampleItemList2);
+ var container = menu.container();
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container.item(2).content()).toEqual(undefined);
+ expect(container.item(2)).toBeDefined();
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ container.addItem({defaultTextValue : "CIText2 "});
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container.item(2).content().nodeValue).toEqual("CIText2 ");
+ expect(container.item(3)).toBeDefined();
+ expect(container.item(3).content()).toEqual(undefined);
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ container.add("a");
+
+ menu.next();
+ menu.next();
+ menu.next();
+ menu.next();
+ menu.next();
+ expect(container.item(0).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(1).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(2).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(3).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(3).active()).toBeFalsy();
+ menu.prev();
+ expect(container.item(3).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(2).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(1).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(0).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(0).active()).toBeFalsy();
+
+
+
+ });
+
+ it("should support dynamic changing of text content", function () {
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+
+ var ExampleItemList2 = new Array;
+ ExampleItemList2.push({defaultTextValue : "CIText1 "});
+ ExampleItemList2.push({});
+
+ var menu = OwnContainerMenu.create(list,ExampleItemList2);
+ var container = menu.container();
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container.item(2)).toBeDefined();
+ expect(container.item(2).content()).toEqual(undefined);
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.item(0).content("New1").nodeValue).toEqual("New1");
+ expect(container.item(1).content("New2").nodeValue).toEqual("New2");
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.item(2)).toBeDefined();
+ expect(container.item(2).content()).toEqual(undefined);
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.item(2)).toBeDefined();
+ expect(container.item(2).content()).toEqual(undefined);
+
+
+ });
+
+ it("should support dynamic adding of items", function () {
+
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+
+ var ExampleItemList2 = new Array;
+ ExampleItemList2.push({defaultTextValue : "CIText1 "});
+ ExampleItemList2.push({});
+
+ var menu = OwnContainerMenu.create(list,ExampleItemList2);
+ var container = menu.container();
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container.item(2).content()).toEqual(undefined);
+ expect(container.item(2)).toBeDefined();
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ container.addItem({defaultTextValue : "CIText2 "});
+ expect(container.item(0).content().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).content().nodeValue).toEqual("");
+ expect(container.item(2).content().nodeValue).toEqual("CIText2 ");
+ expect(container.item(3)).toBeDefined();
+ expect(container.item(3).content()).toEqual(undefined);
+ expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ container.add("a");
+
+ menu.next();
+ menu.next();
+ menu.next();
+ menu.next();
+ menu.next();
+ expect(container.item(0).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(1).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(2).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(3).active()).toBeTruthy();
+ menu.next();
+ expect(container.item(3).active()).toBeFalsy();
+ menu.prev();
+ expect(container.item(3).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(2).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(1).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(0).active()).toBeTruthy();
+ menu.prev();
+ expect(container.item(0).active()).toBeFalsy();
+
+
+
+ });
+
});
});
diff --git a/dev/js/spec/hintSpec.js b/dev/js/spec/hintSpec.js
index 3e95e55..e81033d 100644
--- a/dev/js/spec/hintSpec.js
+++ b/dev/js/spec/hintSpec.js
@@ -272,7 +272,6 @@
hint.inputField().insert('der Baum corenlp/');
var cont = hint.inputField().container();
-
expect(cont.getElementsByTagName('div').length).toBe(1);
expect(cont.getElementsByTagName('ul').length).toBe(0);
expect(cont.firstChild).toEqual(cont.firstChild);
@@ -281,34 +280,34 @@
// There is a menu for corenlp/
hint.show(false);
- expect(hint.inputField().container().getElementsByTagName('ul').length).toEqual(1);
- expect(hint.inputField().container().getElementsByTagName('li').length).toEqual(3);
+ expect(cont.getElementsByTagName('ul').length).toEqual(1+1); //+1 from containermenu (see container/container.js)
+ expect(cont.getElementsByTagName('li').length).toEqual(3);
// Hide the menu and focus on the input
hint.unshow();
- expect(hint.inputField().container().getElementsByTagName('div').length).toEqual(1);
- expect(hint.inputField().container().getElementsByTagName('li').length).toEqual(0);
+ expect(cont.getElementsByTagName('div').length).toEqual(1);
+ expect(cont.getElementsByTagName('li').length).toEqual(0);
hint.unshow();
hint.inputField().insert(' hhhh');
- // show with context
+ // show with context if possible
hint.show(false);
- expect(hint.inputField().container().getElementsByTagName('div').length).toEqual(4);
- expect(hint.inputField().container().getElementsByTagName('ul').length).toEqual(1);
- expect(hint.inputField().container().getElementsByTagName('li').length).toEqual(2);
+ expect(cont.getElementsByTagName('div').length).toEqual(4);
+ expect(cont.getElementsByTagName('ul').length).toEqual(1+1);//+1 from containermenu (see container/container.js)
+ expect(cont.getElementsByTagName('li').length).toEqual(2);
hint.unshow();
hint.inputField().insert(' aaaa/');
- // show with context
+ // show with context necessarily
hint.show(true);
- expect(hint.inputField().container().getElementsByTagName('div').length).toEqual(1);
- expect(hint.inputField().container().getElementsByTagName('ul').length).toEqual(0);
+ expect(cont.getElementsByTagName('div').length).toEqual(1);
+ expect(cont.getElementsByTagName('ul').length).toEqual(0); //here not +1: context doesnt fit
});
@@ -324,25 +323,25 @@
hint.show(false);
expect(hint.active()).toBeTruthy();
-
- expect(hint.inputField().container().getElementsByTagName('li')[0].firstChild.innerText).toEqual("Base Annotation");
+ var cont = hint.inputField().container();
+ expect(cont.getElementsByTagName('li')[0].firstChild.innerText).toEqual("Base Annotation");
// Type in prefix
hint.active().prefix("cor").show();
expect(hint.active().prefix()).toEqual("cor");
// Click first step
- expect(hint.inputField().container().getElementsByTagName('li')[0].firstChild.firstChild.innerText).toEqual("Cor");
- hint.inputField().container().getElementsByTagName('li')[0].click();
+ expect(cont.getElementsByTagName('li')[0].firstChild.firstChild.innerText).toEqual("Cor");
+ cont.getElementsByTagName('li')[0].click();
expect(hint.active()).toBeTruthy();
// Click second step
- expect(hint.inputField().container().getElementsByTagName('li')[0].firstChild.innerText).toEqual("Named Entity");
- hint.inputField().container().getElementsByTagName('li')[0].click()
+ expect(cont.getElementsByTagName('li')[0].firstChild.innerText).toEqual("Named Entity");
+ cont.getElementsByTagName('li')[0].click()
// Invisible menu
- expect(hint.inputField().container().getElementsByTagName('li')[0]).toBeUndefined();
+ expect(cont.getElementsByTagName('li')[0]).toBeUndefined();
// Inactive menu
expect(hint.active()).toBeFalsy();
@@ -420,10 +419,16 @@
// Type in prefix
hint.active().prefix("cor").show();
+ expect(hint.active()._prefix.value()).toBe("cor");
expect(hint.active().prefix()).toEqual("cor");
-
expect(input.value).toEqual("");
+ expect(hint.active()._prefix["isSelectable"]).not.toBeNull();
+ expect(hint._menuCollection['-']._prefix["isSelectable"]).not.toBeNull();
+ expect(hint.active()._prefix).toBe(hint._menuCollection['-']._prefix);
+ expect(hint.active()._prefix.element()).toBe(hint._menuCollection['-']._prefix.element());
hint.active()._prefix.element().click();
+
+
expect(input.value).toEqual("cor");
expect(hint.active()).toBeFalsy();
@@ -433,6 +438,7 @@
});
+
xit('should remove all menus on escape');
});