Use containerMenu as a base for HintMenu instead of regular menu

Change-Id: Ic1ed2e216a9c61aabf1f1cac41972b1a4e96a91a
diff --git a/dev/js/src/containermenu.js b/dev/js/src/containermenu.js
index 865c3ec..0958045 100644
--- a/dev/js/src/containermenu.js
+++ b/dev/js/src/containermenu.js
@@ -12,7 +12,7 @@
   'container/container',
   'util'
 ], function (defaultMenuClass,
-             defaultContainerClass) {
+            defaultContainerClass) {
 
   return {
     /**
@@ -41,13 +41,13 @@
       } else {
         obj._container = defaultContainerClass.create(containerList, params);
       }
-      obj.container().addMenu(obj);
+      obj.container().addMenu(obj); //this is your menu, container!
 
       // add entry to HTML element
       obj._el.appendChild(obj.container().element());
-      obj._el.removeChild(obj._prefix.element());
+      obj._el.removeChild(obj._prefix.element()); //different HTML element relationship required
       //Keep prefix as 'pref' style. The additional distance is fine.
-      obj.container().addPrefix(obj._prefix);
+      obj.container().addPrefix(obj._prefix); //creates containeritem as base for prefix that then is upgraded to prefix. Also ajust _menu chains.
       return obj;
     },
 
@@ -128,8 +128,17 @@
         // Click on prefix
         if (t.container().active()){
           t.container().enter(e);
+          //NEW: reset some things. These are reset for hint menu style items
+          // so I believe we need to do the same when pressing on items in the container
+          t.prefix("");
+          t.hint().inputField().insert("").update();
+          t.hide();
+          t.hint().unshow();
+          //for clicking this is done in container.js with an eventListener for click.
         } else { // Click on item
           t.liveItem(t.position).onclick(e);
+          //Above is already done: see file dev/js/src/hint/item.js
+
         };
         e.halt();
         break;
@@ -165,7 +174,7 @@
      * @param {string} Prefix for filtering the list
      */
     show : function (active) {
-      //There are only four new lines, marked with NEW
+      //There are only five new lines, marked with NEW
       const t = this;
 
       // show menu based on initial offset
@@ -177,7 +186,7 @@
       if (!t._initList()) {
 
         // The prefix is not active
-        t._prefix.active(true);        
+        //t._prefix.active(true);     //NEW: not used   
         t.container().makeActive(); //NEW Incase the own
         // list becomes empty we need to make container active for line 129 to work
 
@@ -254,7 +263,7 @@
         this._prefix.clear();
         this.onHide();
         this._el.classList.remove('visible');
-        this.container()._el.classList.remove('visible'); //NEW
+        this.container()._el.classList.remove('visible'); //NEW //apparently not necessary
       }
       // this._el.blur();
     },
@@ -367,6 +376,19 @@
         newItem.active(true);
       };
     },
+    
+    /**
+    * Upgrade this object to another object,
+    * while private data stays intact.
+    *
+    * @param {Object} An object with properties.
+    */
+    upgradeTo : function (props) {
+      for (var prop in props) {
+        this[prop] = props[prop];
+      };
+      return this;
+    },
 
     /**
      * Get the container object