New content function within containeritem for easy text manipulation
Change-Id: If4ca3bb317af35449a25b9924501c64f19a7c95e
diff --git a/dev/js/spec/containerMenuSpec.js b/dev/js/spec/containerMenuSpec.js
index a6d85b7..5a628e4 100644
--- a/dev/js/spec/containerMenuSpec.js
+++ b/dev/js/spec/containerMenuSpec.js
@@ -210,8 +210,8 @@
expect(liElements[2].classList.contains("no-more")).toBe(false);
var items = menu.container().items;
- expect(items[0].content().nodeValue).toEqual("CIText1 ");
- expect(items[1].content().nodeValue).toEqual("CIText2 ");
+ expect(items[0].initContent().nodeValue).toEqual("CIText1 ");
+ expect(items[1].initContent().nodeValue).toEqual("CIText2 ");
expect(items[2].element().innerHTML).toEqual(""); //prefix!
expect(items[3]).toBe(undefined);
});
@@ -2129,21 +2129,21 @@
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(0).initContent().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).initContent().nodeValue).toEqual("");
expect(container.item(2)).toBeDefined();
- expect(container.item(2).content()).toEqual(undefined);
+ expect(container.item(2).initContent()).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.item(0).initContent("New1").nodeValue).toEqual("New1");
+ expect(container.item(1).initContent("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.item(2).initContent()).toEqual(undefined);
+ expect(container.item(0).initContent().nodeValue).toEqual("CIText1 ");
+ expect(container.item(1).initContent().nodeValue).toEqual("");
expect(container._cItemPrefix.element().innerHTML).toEqual("");
expect(container.item(2)).toBeDefined();
- expect(container.item(2).content()).toEqual(undefined);
+ expect(container.item(2).initContent()).toEqual(undefined);
});
@@ -2164,18 +2164,45 @@
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);
+
+ var testElement = container.element().children[0]; // Use this to test wether the HTML elements are in the correct order.
+
+ expect(container.item(0).initContent().nodeValue).toEqual("CIText1 ");
+ expect(testElement).toEqual(container.item(0).element())
+
+ testElement = testElement.nextElementSibling;
+ expect(container.item(1).initContent().nodeValue).toEqual("");
+ expect(testElement).toEqual(container.item(1).element())
+
+ testElement = testElement.nextElementSibling;
+ expect(container.item(2).initContent()).toEqual(undefined);
expect(container.item(2)).toBeDefined();
+ expect(testElement).toEqual(container.item(2).element()) // = prefix
expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.element().lastChild).toEqual(container._cItemPrefix.element());
+
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 ");
+
+ var testElement = container.element().children[0]; // Use this to test wether the HTML elements are in the correct order.
+
+ expect(container.item(0).initContent().nodeValue).toEqual("CIText1 ");
+ expect(testElement).toEqual(container.item(0).element())
+
+ testElement = testElement.nextElementSibling;
+ expect(container.item(1).initContent().nodeValue).toEqual("");
+ expect(testElement).toEqual(container.item(1).element())
+
+ testElement = testElement.nextElementSibling;
+ expect(container.item(2).initContent().nodeValue).toEqual("CIText2 ");
+ expect(testElement).toEqual(container.item(2).element())
+
+ testElement = testElement.nextElementSibling;
expect(container.item(3)).toBeDefined();
- expect(container.item(3).content()).toEqual(undefined);
+ expect(container.item(3).initContent()).toEqual(undefined);
+ expect(testElement).toEqual(container.item(3).element())
expect(container._cItemPrefix.element().innerHTML).toEqual("");
+ expect(container.element().lastChild).toEqual(container._cItemPrefix.element()); //Prefix must always be at the very back.
+
container.add("a");
menu.next();
@@ -2207,98 +2234,6 @@
});
- 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/src/container/container.js b/dev/js/src/container/container.js
index 3f6a54d..6c4b759 100644
--- a/dev/js/src/container/container.js
+++ b/dev/js/src/container/container.js
@@ -31,10 +31,14 @@
} else {
this._containerItemClass = defaultContainerItemClass;
};
- this._el = document.createElement("ul");
- this._el.style.outline = 0;
- this._el.setAttribute('tabindex', 0);
- this._el.classList.add('menu', 'container'); //container class allows for more stylesheet changes
+ 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._cItemPrefix = 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();
//items are stored in the order they are added in. This includes the prefix.
@@ -57,34 +61,41 @@
//t._el.classList.add('visible'); //Done by containermenu
},
+
/**
- * Adds a static item to this container by creating a standard containerItem as specified when this container was created,
- * then upgrading it to the item passed to this function, and calling element() and content(). For a full list of supported functions see
- * containeritem.js .
- * Example:
- *
- * menu.container().addItem(
- * {defaultTextValue : "dynamic", onClick : function (e) { ... }
- * )
- *
- * For a full demo see containermenudemo.js.
- *
- * @param {Object} item An object with any number of functions like in containeritem.js or an attribute defaultTextValue,
- * as well as any number of own properties.
- * @returns the new use-ready containerItem
- */
+ * Adds a static item to this container by creating a standard containerItem as specified when this container was created,
+ * then upgrading it to the item passed to this function, and calling element() and content(). For a full list of supported functions see
+ * containeritem.js .
+ * Example:
+ *
+ * menu.container().addItem(
+ * {defaultTextValue : "dynamic", onClick : function (e) { ... }
+ * )
+ *
+ * For a full demo see containermenudemo.js.
+ *
+ * @param {Object} item An object with any number of functions like in containeritem.js or an attribute defaultTextValue,
+ * as well as any number of own properties.
+ * @returns the new use-ready containerItem
+ */
addItem : function (item) {
//Call Order: First _containerItemClass is created and then upgraded To whatever object is passed to this function
//Then container calls first element() and then container()
var cItem = this._containerItemClass.create().upgradeTo(item);
cItem._menu = this._menu; //if not set then undefined, but thats OK
this.items.push(cItem);
+ this.element().appendChild(cItem.element());
+ cItem.initContent(); // create its textNode
if (this._cItemPrefix !== undefined){ //this must be dynamic adding of CIs, move prefix to the back
+ //adjust the prefix' position within .items to be in the back
this.items.splice(this.items.indexOf(this._cItemPrefix) , 1); //remove cItemPrefix
this.items.push(this._cItemPrefix); //and move it to the end;
+ //adjust the prefix' HTML elements position
+ this.element().removeChild(this._cItemPrefix.element());
+ this.element().appendChild(this._cItemPrefix.element());
+ //adjust the prefix' stored position
+ this._prefixPosition = this.items.length;
};
- this._el.appendChild(cItem.element());
- cItem.content(); // create its textNode
return cItem;
},
@@ -95,21 +106,21 @@
};
for (let item of this.items) {
item._menu=menu;
- }
+ };
},
addPrefix : function (prefix) {
prefix.isSelectable = function () {
return this.isSet(); //TODO check!
- }
+ };
this._prefixPosition = this.items.length;
- prefix.content = function () {}; //Does not need a textNode Child!
+ prefix.initContent = function () {}; //Does not need a textNode Child!
var prefItem = this.addItem(prefix);
this._cItemPrefix = prefItem;
prefItem._el["onclick"] = prefItem.onclick.bind(prefItem);
if (this._menu !== undefined){
this._menu._prefix=prefItem;
- }
+ };
},
//Taken from Branch 5133
@@ -137,6 +148,7 @@
this.items.splice(this.items.indexOf(item) , 1);
},
+
/**
* Remove a containeritem from the container by its index. Should not be used with prefix.
* CAUTION liveIndex, so what you see, is not the actual index within the containerItem list.
@@ -206,8 +218,11 @@
this.position = 0;
this._cItemPrefix.active(false); // usually the menu makes the prefix active anyway.
this.item().active(true);
- }
- }
+ } else {
+ console.log("It appears that both containermenu and its container contain no selectable items.\
+ Let us hope there is no problem. - container.js");
+ };
+ };
},
/**
diff --git a/dev/js/src/container/containeritem.js b/dev/js/src/container/containeritem.js
index 6d0ef59..2e181ae 100644
--- a/dev/js/src/container/containeritem.js
+++ b/dev/js/src/container/containeritem.js
@@ -29,7 +29,7 @@
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
* If you wish to change the textNode please overwrite the content function instead.
*/
@@ -49,12 +49,12 @@
},
/**
- * Get/create a TextNode with text "content". If content is left blank it gets set to this.defaultTextValue,
- * or the empty string if it does not exists
+ * Set the items text content to "content". If content is left blank it gets set to this.defaultTextValue,
+ * or the empty string if a default value does not exists. Also decides how the text is represented.
* @param {String} content String to which to set the text
* @returns textNode with content or undefined
*/
- content : function (content) {
+ initContent : function (content) {
var newText; //set textNode to this
if (arguments.length === 1) { //new value!
newText = content;
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 857c2db..dc998d1 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -191,6 +191,8 @@
},
// Initialize the item list
+ // returns true if the length of the resulting list is at least 1
+ // and there was a prefix value. Returns true if there was no prefix value set.
_initList : function () {
// Upon change also update alwaysmenu.js please
const t = this;