From 7cf0cfb2eb14ec3396bc5cbc4e110610a50496d5 Mon Sep 17 00:00:00 2001
From: Wind Li <liyong@bjtxra.com>
Date: Sat, 14 Mar 2020 16:37:43 +0800
Subject: [PATCH 1/5] Add submenu support

---
 README.md                     |   6 ++
 render/index.html             |   9 ++-
 src/knockout.contextmenu.js   | 112 ++++++++++++++++++++++------------
 src/knockout.contextmenu.less |  22 +++++++
 4 files changed, 110 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index e5a7dfd..923a01e 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,12 @@ Example:
         "visible": someMethod() == '1', 
         "action": $root.someAction 
     }, 
+    "Sub menu": {
+        submenu: {
+            "Sub Option one": function() { alert("submenu,oh, you clicked me"); },
+            "Sub Option two": { action: function() { alert("submenu,you are on fire"); } }
+        }
+    },
     "One method": $root.test
 }
 ```
diff --git a/render/index.html b/render/index.html
index e363ca1..9a914a3 100644
--- a/render/index.html
+++ b/render/index.html
@@ -11,9 +11,16 @@
     var menu = {
       'Option one': function() { alert('oh, you clicked me'); },
       'Option two': { action: function() { alert('you are on fire'); } },
+      'Option 3': { action: function() { alert('you are on fire'); } },
       'a separator': { separator: true },
+      'Sub menu': { submenu: {
+        'Sub Option one': function() { alert('submenu,oh, you clicked me'); },
+        'Sub Option two': { action: function() { alert('submenu,you are on fire'); } }  
+      } },
       'Some boolean': ko.observable(true),
-      'Option three': { text: 'Final action', action: function() { /* nothing to do */ } }
+      '2ed separator': { separator: true },
+      'Option 4': { action: function() { alert('you are on fire'); } },
+      'Option three': { text: 'Final action', action: function() { /* nothing to do */ } },
     };
 
     ko.applyBindings({});
diff --git a/src/knockout.contextmenu.js b/src/knockout.contextmenu.js
index 38aa8c0..1bd3219 100644
--- a/src/knockout.contextmenu.js
+++ b/src/knockout.contextmenu.js
@@ -154,12 +154,15 @@ function bindContextMenu(ko) {
         );
 
         props.forEach(function (eventNameOutsideClosure) {
-          pushItem(eventNameOutsideClosure);
+          pushItem(eventNameOutsideClosure,eventsToHandle,elements,items,actions);
         });
 
         if (elements.length) {
           menu = document.createElement('div');
           menu.className = defaultClass;
+          items.forEach(function (item) {
+            hasChecks = hasChecks || (item.isBoolean && item.isVisible);
+          });
 
           // you may need padding to menus that has checks
           menu.innerHTML = '<ul class="' + (hasChecks ? 'has-checks' : '') + '">' +
@@ -175,6 +178,18 @@ function bindContextMenu(ko) {
                 event.preventDefault();
               }
             });
+            if(items[index].hasSubmenu){
+              var submenu = menu.children[0].children[index].children[1];
+              items[index].submenu.elements.forEach(function (item, subindex) {
+                registerEvent(submenu.children[subindex], 'click', function (event) {
+                  var result = items[index].submenu.actions[subindex](viewModel, event);
+
+                  if (!result && event) {
+                    event.preventDefault();
+                  }
+                });
+              })
+            }
           });
         }
 
@@ -191,50 +206,50 @@ function bindContextMenu(ko) {
           },
         };
 
-        function pushItem(eventName) {
-          var item = getMenuProperties(eventName);
-          var classes = [];
-          var id = '';
-          var liHtml;
-
-          if (item.isVisible) {
-            hasChecks = hasChecks || item.isBoolean;
-
-            if (item.id) {
-              id = item.id;
-            }
-
-            // set css classes
-            if (item.isChecked) {
-              classes.push('checked');
-            }
-
-            if (item.isDisabled) {
-              classes.push('disabled');
-            }
+      }
+      function pushItem(eventName,eventsToHandle,elements,items,actions) {
+        var item = getMenuProperties(eventName,eventsToHandle);
+        var classes = [];
+        var id = '';
+        var liHtml;
+
+        if (item.isVisible) {
+          if (item.id) {
+            id = item.id;
+          }
 
-            if (item.isSeparator) {
-              classes.push('separator');
-            }
+          // set css classes
+          if (item.isChecked) {
+            classes.push('checked');
+          }
 
-            if (item.url) {
-              classes.push('with-url');
-            }
+          if (item.isDisabled) {
+            classes.push('disabled');
+          }
 
-            liHtml = '<li ' + (id ? ('id="' + id + '" ') : '') +
-              ' class="' + classes.join(' ') + '">' +
-              item.html +
-              '</li>';
+          if (item.isSeparator) {
+            classes.push('separator');
+          }
+          if (item.hasSubmenu) {
+            classes.push('has-submenu');
+          }
 
-            elements.push(liHtml);
-            actions.push(item.action);
+          if (item.url) {
+            classes.push('with-url');
           }
 
+          liHtml = '<li ' + (id ? ('id="' + id + '" ') : '') +
+            ' class="' + classes.join(' ') + '">' +
+            item.html +
+            '</li>';
+
+          elements.push(liHtml);
+          actions.push(item.action);
           items.push(item);
         }
       }
 
-      function getMenuProperties(eventName) {
+      function getMenuProperties(eventName,eventsToHandle) {
         var text = '';
         var html = '';
         var currentEvent = ko.isObservable(eventsToHandle) ?
@@ -254,15 +269,34 @@ function bindContextMenu(ko) {
         var isBoolean = false;
         var isDisabled = !isEnabled;
         var isSeparator = !!currentEvent.separator;
-
+        var hasSubmenu = !!currentEvent.submenu;
+        var submenu = {};
         if (!isSeparator) {
           text = isObservable(item.text) ? item.text() : item.text;
 
           if (!text) {
             text = eventName;
           }
+          if (hasSubmenu){
+            var props = Object.keys(
+              ko.isObservable(currentEvent.submenu) ?
+              currentEvent.submenu() :
+              currentEvent.submenu
+            );
+            submenu.elements = [];
+            submenu.actions = [];
+            submenu.items = [];
+
+            props.forEach(function (eventNameOutsideClosure) {
+              pushItem(eventNameOutsideClosure,currentEvent.submenu,submenu.elements,submenu.items,submenu.actions);
+            });
 
-          if (url) {
+            html = '<a>' + text + '</a> \
+            <ul class="submenu">' +
+            submenu.elements.join('') +
+            '</ul>';
+          }
+          else if (url) {
             html = '<a href="' + url + '">' + text + '</a>';
           } else {
             html = text;
@@ -291,6 +325,8 @@ function bindContextMenu(ko) {
           isBoolean: isBoolean,
           isSeparator: isSeparator,
           action: action,
+          hasSubmenu:hasSubmenu,
+          submenu:submenu,
         };
 
         function action(viewModel, event) {
@@ -308,7 +344,7 @@ function bindContextMenu(ko) {
           // is an object? well, lets check it properties
           else if (typeof item === 'object') {
             // check if has an action or if its a separator
-            if (!item.action && !url && !isSeparator) {
+            if (!item.action && !url && !isSeparator && !hasSubmenu) {
               throw error;
             }
 
diff --git a/src/knockout.contextmenu.less b/src/knockout.contextmenu.less
index 1883578..f480a40 100644
--- a/src/knockout.contextmenu.less
+++ b/src/knockout.contextmenu.less
@@ -69,3 +69,25 @@
 .context-menu ul > li.separator:hover {
   background-color: @back-color;
 }
+
+.context-menu ul .submenu {
+  display: none;
+  position: absolute;
+  left: 100%;
+  margin-left: 1px;
+  background: @back-color;
+  margin-top:-30px;
+}
+
+.context-menu ul .submenu li {
+  background: @back-color;
+}
+
+.context-menu ul > .has-submenu:before {
+  position: absolute;
+  content: ">";
+  right: 7px;
+}
+.context-menu ul .has-submenu:hover .submenu {
+  display: block;
+}

From 9078e5002492bc11a372141629c872e7917dfef6 Mon Sep 17 00:00:00 2001
From: Wind Li <liyong@bjtxra.com>
Date: Sat, 14 Mar 2020 16:43:08 +0800
Subject: [PATCH 2/5] add submenu support

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 923a01e..3e2c305 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@ Option     | Description
 `visible`  | Show/hide item (result must be boolean).
 `action`   | Item method, mandatory if not url defined.
 `disabled` | Disable menu item.
+`submenu`  | Sub menu items.
 
 Example:
 

From 73821cdd2c008a99c7614e6ca234bef75aea623f Mon Sep 17 00:00:00 2001
From: Wind Li <liyong@bjtxra.com>
Date: Sat, 14 Mar 2020 16:48:55 +0800
Subject: [PATCH 3/5] add submenu support

---
 src/knockout.contextmenu.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/knockout.contextmenu.js b/src/knockout.contextmenu.js
index 1bd3219..eb707bc 100644
--- a/src/knockout.contextmenu.js
+++ b/src/knockout.contextmenu.js
@@ -188,7 +188,7 @@ function bindContextMenu(ko) {
                     event.preventDefault();
                   }
                 });
-              })
+              });
             }
           });
         }
@@ -291,8 +291,7 @@ function bindContextMenu(ko) {
               pushItem(eventNameOutsideClosure,currentEvent.submenu,submenu.elements,submenu.items,submenu.actions);
             });
 
-            html = '<a>' + text + '</a> \
-            <ul class="submenu">' +
+            html = '<a>' + text + '</a><ul class="submenu">' +
             submenu.elements.join('') +
             '</ul>';
           }

From f7ff4e31c4b8df702a7068c841536bbd589f2056 Mon Sep 17 00:00:00 2001
From: Wind Li <liyong@bjtxra.com>
Date: Sat, 14 Mar 2020 16:56:47 +0800
Subject: [PATCH 4/5] add submenu support

---
 src/knockout.contextmenu.js | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/knockout.contextmenu.js b/src/knockout.contextmenu.js
index eb707bc..fafdc92 100644
--- a/src/knockout.contextmenu.js
+++ b/src/knockout.contextmenu.js
@@ -154,7 +154,7 @@ function bindContextMenu(ko) {
         );
 
         props.forEach(function (eventNameOutsideClosure) {
-          pushItem(eventNameOutsideClosure,eventsToHandle,elements,items,actions);
+          pushItem(eventNameOutsideClosure, eventsToHandle, elements, items, actions);
         });
 
         if (elements.length) {
@@ -177,8 +177,9 @@ function bindContextMenu(ko) {
               if (!result && event) {
                 event.preventDefault();
               }
-            });
-            if(items[index].hasSubmenu){
+            }
+            );
+            if (items[index].hasSubmenu) {
               var submenu = menu.children[0].children[index].children[1];
               items[index].submenu.elements.forEach(function (item, subindex) {
                 registerEvent(submenu.children[subindex], 'click', function (event) {
@@ -190,7 +191,8 @@ function bindContextMenu(ko) {
                 });
               });
             }
-          });
+          }
+          );
         }
 
         return {
@@ -207,8 +209,9 @@ function bindContextMenu(ko) {
         };
 
       }
-      function pushItem(eventName,eventsToHandle,elements,items,actions) {
-        var item = getMenuProperties(eventName,eventsToHandle);
+
+      function pushItem(eventName, eventsToHandle, elements, items, actions) {
+        var item = getMenuProperties(eventName, eventsToHandle);
         var classes = [];
         var id = '';
         var liHtml;
@@ -230,6 +233,7 @@ function bindContextMenu(ko) {
           if (item.isSeparator) {
             classes.push('separator');
           }
+
           if (item.hasSubmenu) {
             classes.push('has-submenu');
           }
@@ -249,7 +253,7 @@ function bindContextMenu(ko) {
         }
       }
 
-      function getMenuProperties(eventName,eventsToHandle) {
+      function getMenuProperties(eventName, eventsToHandle) {
         var text = '';
         var html = '';
         var currentEvent = ko.isObservable(eventsToHandle) ?
@@ -277,7 +281,8 @@ function bindContextMenu(ko) {
           if (!text) {
             text = eventName;
           }
-          if (hasSubmenu){
+
+          if (hasSubmenu) {
             var props = Object.keys(
               ko.isObservable(currentEvent.submenu) ?
               currentEvent.submenu() :
@@ -288,14 +293,15 @@ function bindContextMenu(ko) {
             submenu.items = [];
 
             props.forEach(function (eventNameOutsideClosure) {
-              pushItem(eventNameOutsideClosure,currentEvent.submenu,submenu.elements,submenu.items,submenu.actions);
+              pushItem(eventNameOutsideClosure,
+                currentEvent.submenu,
+                submenu.elements, submenu.items, submenu.actions);
             });
 
             html = '<a>' + text + '</a><ul class="submenu">' +
             submenu.elements.join('') +
             '</ul>';
-          }
-          else if (url) {
+          } else if (url) {
             html = '<a href="' + url + '">' + text + '</a>';
           } else {
             html = text;
@@ -324,8 +330,8 @@ function bindContextMenu(ko) {
           isBoolean: isBoolean,
           isSeparator: isSeparator,
           action: action,
-          hasSubmenu:hasSubmenu,
-          submenu:submenu,
+          hasSubmenu: hasSubmenu,
+          submenu: submenu,
         };
 
         function action(viewModel, event) {

From 601acc6f3f36a1b9d5dd16009d783630a96ad4b1 Mon Sep 17 00:00:00 2001
From: Wind Li <liyong@bjtxra.com>
Date: Mon, 16 Mar 2020 09:02:26 +0800
Subject: [PATCH 5/5] add submenu support:submenu hovor css

---
 src/knockout.contextmenu.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/knockout.contextmenu.less b/src/knockout.contextmenu.less
index f480a40..6277865 100644
--- a/src/knockout.contextmenu.less
+++ b/src/knockout.contextmenu.less
@@ -82,6 +82,10 @@
 .context-menu ul .submenu li {
   background: @back-color;
 }
+.context-menu ul .submenu > li:hover {
+  background-color: @hover-color;
+}
+
 
 .context-menu ul > .has-submenu:before {
   position: absolute;