New content function within containeritem for easy text manipulation
Change-Id: If4ca3bb317af35449a25b9924501c64f19a7c95e
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;