Impl nested contextmenu

[josetaira]

Just a simple implementation of the nested context menu.

The "nested menus" are the 4th argument of a level (since the 3rd one is the enable/disable, and the 2nd one is the click function). They follow the exact same format as the top level menu.

[Templarian]

Awesome, I'm out tonight, but I'll try and review it this weekend. Need to do a npm/bower deploy also.

[josetaira]

Sample look attached. Nested menus look like this:

    $scope.menuOptions = [
      ['View', function ($itemScope) {console.log($itemScope);}, null,
        [
          ['Test', function ($itemScope) {
               console.log($itemScope);
          }],
          ['Test2', function ($itemScope) {
               console.log($itemScope);
          }]
        ]
      ],
      null, // Dividier
      ['Edit', function ($itemScope) {console.log($itemScope);}, null
      ],
      ['Other', function ($itemScope) {console.log($itemScope);}, null,
        [
          ['Test5', function ($itemScope) {
                 console.log($itemScope);
            }],
            ['Test6', function ($itemScope) {
                 console.log($itemScope);
            }]
          ]
        ]
    ];

[Templarian]

One modification (I'll make it before I merge if you don't), simply check if index 2 or 3 are an array type. The null isn't required. Example below:

$scope.menuOptions = [
    ['View', function ($itemScope) {
        console.log($itemScope);
    }, [
        ['Test', function ($itemScope) {
            console.log($itemScope);
        }],
        ['Test2', function ($itemScope) {
            console.log($itemScope);
        }]
    ]],
    null, // Dividier
    ['Edit', function ($itemScope) {
        console.log($itemScope);}
    ],
    ['Other', function ($itemScope) {
        console.log($itemScope);
    }, [
        ['Test5', function ($itemScope) {
            console.log($itemScope);
        }],
        ['Test6', function ($itemScope) {
            console.log($itemScope);
        }]
    ]]
];

[josetaira]

My last commit should incorporate what you mentioned.

[Templarian]

Cool, passing out, will get it merged and updated tomorrow. Thanks for the pull request and changes!

[josetaira]

Here's a documentation if you're requiring one.

DOCUMENTATION START

Nested Menus

$scope.menuOptions = [
          ['View', function ($itemScope) {console.log($itemScope);}, null,
            [
              ['Test', function ($itemScope) {
                   console.log($itemScope);
              }],
              ['Test2', function ($itemScope) { console.log($itemScope);}, null,
                [
                  ['Test7', function ($itemScope) { console.log($itemScope); }]]
                ]
            ]
          ],
          null, // Divider
          ['Edit', function ($itemScope) {console.log($itemScope);}, null
          ],
          ['Other', function ($itemScope) {console.log($itemScope);}, null,
            [
              ['Test5', function ($itemScope) {
                   console.log($itemScope);
              }],
              ['Test6', function ($itemScope) {
                   console.log($itemScope);
              }]
            ]
          ]
      ];

Note that each level is an Array of Arrays. For now, you'll have to watch out on how you stack these.

Theoretically, you can stack any number of Nested Menus together, although I've only tested this until two nested menus.

You should then be able to open up any level just by hovering over an item with a nested menu. I made it this way so it'd have the look and feel of an actual context menu.

-- josetaira

DOCUMENTATION END

Attached is the md version doc_ui.bootstrap.contextmenu_NestedMenus.txt

[Templarian]

I'm playing around with some changes before I push an update. I modified it bit more to work without jQuery. Will be trying to get it out tonight.

I also changed it slightly to support not having a clickable menu item function.

[josetaira]

Alright, let me know if there's any work you want me to do.

Btw, have you considered updating the Menu Options structure to use objects? It's a different topic, but it seems less confusing if it's updated to something like:

function MenuItem(title, onClickFunc) {
  var _title = title;
  var _onClickFunc= onClickFunc;
  var nestedMenus = [];

  this.addNestedMenuItem = function(){//something};
  this.setOnClick = function(clickFunc) {//something};

  // etc.
}

The structure of the menu items is a bit cluttered, so turning each menu option into an object would not only be future proof but also neater. For your consideration.

[Templarian]

Yea, I definitely considered this, maybe for the Angular2 version. Really going to try and keep the Angular 1.x version as basic as possible.