├── .gitignore
├── LICENSE
├── README.md
├── demo
    ├── controllers
    │   └── demo.js
    ├── index.html
    ├── resources
    │   └── styles
    │   │   └── demo.css
    └── views
    │   ├── item-1-1.html
    │   ├── item-1-2.html
    │   ├── item-2.html
    │   ├── item-3-1.html
    │   ├── item-3-2-1.html
    │   ├── item-3-2-2-1.html
    │   ├── item-4-1.html
    │   ├── item-4-2.html
    │   ├── item-4.html
    │   └── readme.html
├── package.json
└── source
    ├── Makefile
    ├── angular-material-multilevel-menu.css
    ├── angular-material-multilevel-menu.html
    └── angular-material-multilevel-menu.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn.lock
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Juan Manuel Mouriz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # angular-material-multilevel-menu
  2 | 
  3 | Material Multi-Level Menu for AngularJS
  4 | 
  5 | ## Demo
  6 | 
  7 | View [online demo](https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html)
  8 | 
  9 | ## Main features
 10 | 
 11 | - Breadcrumb
 12 | - Interface with angular-route if available
 13 | 
 14 | ## Install
 15 | 
 16 | Download the package:
 17 | 
 18 | ```
 19 | yarn add angular-material-multilevel-menu
 20 | ```
 21 | 
 22 | ## Dependencies
 23 | 
 24 | TODO
 25 | 
 26 | ## Usage
 27 | 
 28 | In your document head, include:
 29 | 
 30 | ```html
 31 | <link rel="stylesheet" href="node_modules/angular-material-multilevel-menu/angular-material-multilevel-menu.min.css" />
 32 | ```
 33 | 
 34 | Use the md-multi-level-menu where you wish:
 35 | 
 36 | ```html
 37 | <md-multi-level-menu md-title="Menu"
 38 |                      md-back="Back"
 39 |                      md-style="replace">
 40 | </md-multi-level-menu>
 41 | ```
 42 | 
 43 | Then, just before close body tag, include:
 44 | 
 45 | ```html
 46 | <script src="node_modules/angular-material-multilevel-menu/angular-material-multilevel-menu.min.js"></script>
 47 | ```
 48 | 
 49 | Include the module in your application:
 50 | 
 51 | ```javascript
 52 | var application = angular.module('Application', ['ngMdMultiLevelMenu']);
 53 | ```
 54 | 
 55 | Configure the items:
 56 | 
 57 | ```javascript
 58 | application.config(['menuProvider', function(menuProvider) {
 59 |    menuProvider.items([{
 60 |       label: 'Item 1',
 61 |       icon: 'amazon',
 62 |       items: [{
 63 |          label: 'Item 1.1',
 64 |          link: 'item-1-1',
 65 |          icon: 'apple'
 66 |       }, {
 67 |          label: 'Item 1.2',
 68 |          link: 'item-1-2',
 69 |          icon: 'facebook'
 70 |       }]
 71 |    }, {
 72 |       label: 'Item 2',
 73 |       link: 'item-2',
 74 |       icon: 'windows'
 75 |    }, {
 76 |       label: 'Item 3',
 77 |       icon: 'google-plus',
 78 |       items: [{
 79 |          label: 'Item 3.1',
 80 |          link: 'item-3-1',
 81 |          icon: 'twitter'
 82 |       }, {
 83 |          label: 'Item 3.2',
 84 |          icon: 'github-box',
 85 |          items: [{
 86 |             label: 'Item 3.2.1',
 87 |             link: 'item-3-2-1',
 88 |             icon: 'whatsapp'
 89 |          }, {
 90 |             label: 'Item 3.2.2',
 91 |             icon: 'office',
 92 |             items: [{
 93 |                label: 'Item 3.2.2.1',
 94 |                link: 'item-3-2-2-1',
 95 |                icon: 'hangouts'
 96 |             }]
 97 |          }]
 98 |       }]
 99 |    }, {
100 |       label: 'Item 4',
101 |       link: 'item-4',
102 |       icon: 'linkedin'
103 |       hidden: false
104 |    }]);
105 | }]);
106 | ```
107 | 
108 | Finally, in your controller, configure the select callback of $menu service to handle the links:
109 | 
110 | ```javascript
111 | application.controller('Controller', ['$menu', function($menu) {
112 |    $menu.callback(function(item) {
113 |       console.log('You are going to', item.link);
114 |    });
115 | }]);
116 | ```
117 | 
118 | ## Development install
119 | 
120 | ```
121 | git clone https://github.com/jmouriz/angular-material-multilevel-menu.git
122 | cd angular-material-multilevel-menu
123 | yarn install
124 | cd source
125 | make
126 | ```
127 | 
128 | TODO
129 | 


--------------------------------------------------------------------------------
/demo/controllers/demo.js:
--------------------------------------------------------------------------------
  1 | var $DEBUG = {};
  2 | 
  3 | var demo = angular.module('Demo', ['ngMaterial', 'ngMdMultiLevelMenu', 'ngMdBadge', 'ngRoute', 'hc.marked']);
  4 | 
  5 | demo.config(['menuProvider', function(menuProvider) {
  6 |    menuProvider.items('primary', [{
  7 |       label: 'Documentation',
  8 |       icon: 'import_contacts',
  9 |       link: 'demo/views/readme',
 10 |       color: 'blue'
 11 |    }, {
 12 |       id: 'item-1',
 13 |       label: 'Item 1: 3',
 14 |       icon: 'amazon',
 15 |       items: [{
 16 |          label: 'Item 1.1',
 17 |          link: 'demo/views/item-1-1',
 18 |          icon: 'apple'
 19 |       }, {
 20 |          label: 'Item 1.2',
 21 |          link: 'demo/views/item-1-2',
 22 |          icon: 'facebook'
 23 |       }]
 24 |    }, {
 25 |       id: 'item-2',
 26 |       label: 'Item 2',
 27 |       link: 'demo/views/item-2',
 28 |       icon: 'windows',
 29 |       badge: 3
 30 |    }, {
 31 |       label: 'Item 3',
 32 |       icon: 'google-plus',
 33 |       items: [{
 34 |          label: 'Item 3.1',
 35 |          link: 'demo/views/item-3-1',
 36 |          icon: 'twitter'
 37 |       }, {
 38 |          label: 'Item 3.2',
 39 |          icon: 'github-box',
 40 |          items: [{
 41 |             label: 'Item 3.2.1',
 42 |             link: 'demo/views/item-3-2-1',
 43 |             icon: 'whatsapp'
 44 |          }, {
 45 |             label: 'Item 3.2.2',
 46 |             icon: 'office',
 47 |             items: [{
 48 |                label: 'Item 3.2.2.1',
 49 |                link: 'demo/views/item-3-2-2-1',
 50 |                icon: 'hangouts'
 51 |             }]
 52 |          }]
 53 |       }]
 54 |    }, {
 55 |       id: 'item-4',
 56 |       label: 'Item 4',
 57 |       link: 'demo/views/item-4',
 58 |       icon: 'linkedin'
 59 |    }]);
 60 | 
 61 |    menuProvider.items('secondary', [{
 62 |       label: 'Documentation X',
 63 |       icon: 'import_contacts',
 64 |       link: 'demo/views/readme',
 65 |       color: 'blue'
 66 |    }, {
 67 |       id: 'item-1',
 68 |       label: 'Item 1: 3',
 69 |       icon: 'amazon',
 70 |       items: [{
 71 |          label: 'Item 1.1',
 72 |          link: 'demo/views/item-1-1',
 73 |          icon: 'apple'
 74 |       }, {
 75 |          label: 'Item 1.2',
 76 |          link: 'demo/views/item-1-2',
 77 |          icon: 'facebook'
 78 |       }]
 79 |    }, {
 80 |       id: 'item-2',
 81 |       label: 'Item 2',
 82 |       link: 'demo/views/item-2',
 83 |       icon: 'windows',
 84 |       badge: 3
 85 |    }, {
 86 |       label: 'Item 3',
 87 |       icon: 'google-plus',
 88 |       items: [{
 89 |          label: 'Item 3.1',
 90 |          link: 'demo/views/item-3-1',
 91 |          icon: 'twitter'
 92 |       }, {
 93 |          label: 'Item 3.2',
 94 |          icon: 'github-box',
 95 |          items: [{
 96 |             label: 'Item 3.2.1',
 97 |             link: 'demo/views/item-3-2-1',
 98 |             icon: 'whatsapp'
 99 |          }, {
100 |             label: 'Item 3.2.2',
101 |             icon: 'office',
102 |             items: [{
103 |                label: 'Item 3.2.2.1',
104 |                link: 'demo/views/item-3-2-2-1',
105 |                icon: 'hangouts'
106 |             }]
107 |          }]
108 |       }]
109 |    }, {
110 |       id: 'item-4',
111 |       label: 'Item 4',
112 |       link: 'demo/views/item-4',
113 |       icon: 'linkedin'
114 |    }]);
115 | }]);
116 | 
117 | demo.config(['markedProvider', function(markedProvider) {
118 |    markedProvider.setOptions({
119 |       gfm: true,
120 |       tables: true,
121 |       highlight: function(code, language) {
122 |          if (!language) {
123 |             language = 'bash';
124 |          } else if (language == 'html') {
125 |             language = 'markup';
126 |          }
127 |          return Prism.highlight(code, Prism.languages[language]);
128 |       }
129 |    });
130 | }]);
131 | 
132 | demo.controller('Demo', ['$scope', '$menu', '$mdSidenav', '$mdBottomSheet', function($scope, $menu, $mdSidenav, $mdBottomSheet) {
133 |    $scope.breadcrumb = $menu.breadcrumb();
134 |    $scope.style = $menu.style();
135 |    //$scope.count = $menu.get('item-2').badge;
136 | 
137 |    $scope.toggle = function() {
138 |       $mdSidenav('left').toggle();
139 |       $scope.icon = $scope.icon == 'menu' ? 'close' : 'menu';
140 |    };
141 | 
142 |    $scope.test = function() {
143 |       var item = $menu.get('primary', 'item-4');
144 |       $DEBUG.menu = $menu;
145 |       if (item.items) {
146 |          item.items = undefined;
147 |       } else {
148 |          item.items = [{
149 |             label: 'Item 4.1',
150 |             link: 'demo/views/item-4-1',
151 |             icon: 'favorite'
152 |          }, {
153 |             label: 'Item 4.2',
154 |             link: 'demo/views/item-4-2',
155 |             icon: 'grade'
156 |          }]
157 |       }
158 |    };
159 | 
160 |    $scope.menu = function() {
161 |       $mdBottomSheet.show({
162 |          templateUrl: 'bottom-sheet-template',
163 |          controller: function($scope) {}
164 |       });
165 |    };
166 | 
167 |    $menu.callback(function(item) {
168 |       $scope.toggle();
169 |       if (item.link) {
170 |          console.log('You are going to', item.link);
171 |          $mdBottomSheet.hide();
172 |       }
173 |    });
174 | 
175 |    $mdSidenav('left', true).then(function(instance) {
176 |       $scope.icon = 'menu';
177 |       instance.onClose(function () {
178 |          $scope.icon = 'menu';
179 |       });
180 |    });
181 | 
182 |    $scope.$watch('count', function(value) {
183 |       //$menu.get('item-2').badge = $scope.count;
184 |       //$menu.get('item-1').label = 'Item 1: ' + $scope.count;
185 |    });
186 | 
187 |    $scope.$watch('breadcrumb', function(value) {
188 |       $menu.breadcrumb(value);
189 |    });
190 | 
191 |    $scope.$watch('style', function(value) {
192 |       $menu.style(value);
193 |    });
194 | }]);
195 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="es" ng-app="Demo">
 3 |    <head>
 4 |       <base href="../" />
 5 |       <meta charset="utf-8" />
 6 |       <title>AngularJS Material Multi Level Menu Demo</title>
 7 |       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 8 |       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
 9 |       <link rel="stylesheet" href="https://unpkg.com/angular-material@1.1.4/angular-material.min.css" />
10 |       <link rel="stylesheet" href="https://unpkg.com/angular-material-icons@0.7.1/angular-material-icons.css" />
11 |       <link rel="stylesheet" href="https://unpkg.com/angular-material-badge@1.2.1/angular-material-badge.min.css" />
12 |       <link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
13 |       <link rel="stylesheet" href="source/angular-material-multilevel-menu.css" />
14 |       <link rel="stylesheet" href="demo/resources/styles/demo.css" />
15 |    </head>
16 |    <body ng-controller="Demo" layout="column" ng-cloak>
17 |       <md-toolbar>
18 |          <md-truncate class="md-toolbar-tools">
19 |             <md-button class="md-icon-button" ng-click="toggle()" hide-gt-sm aria-label="Toogle Menu">
20 |                <ng-md-icon icon="{{icon}}"></ng-md-icon>
21 |             </md-button>
22 |             <h1>AngularJS Multilevel Menu Demo</h1>
23 |          </md-truncate>
24 |       </md-toolbar>
25 |       <md-content layout="row" flex>
26 |          <md-sidenav class="md-sidenav-left" md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left">
27 |             <md-multi-level-menu id="primary"
28 |                                  md-title="Main"
29 |                                  md-back="Previous"
30 |                                  md-breadcrumb="false"
31 |                                  md-style-accordion>
32 |             </md-multi-level-menu>
33 |             <md-divider></md-divider>
34 |             <md-panel layout="column" layout-margin layout-padding>
35 |                <md-input-container>
36 |                   <md-select ng-model="style" aria-label="style">
37 |                      <md-option ng-value="1">Replace</md-option>
38 |                      <md-option ng-value="2">Accordion</md-option>
39 |                   </md-select>
40 |                </md-input-container>
41 |                <md-switch ng-model="breadcrumb" ng-disabled="style == 2">Show breadcrumb</md-switch>
42 |                <md-input-container>
43 |                   <input type="number" ng-model="count" aria-label="count"></input>
44 |                </md-input-container>
45 |                <md-button class="md-raised md-primary" ng-click="test()">Dynamic test</md-button>
46 |                <md-divider></md-divider>
47 |                <md-button class="md-raised md-primary" ng-click="menu()">Bottom bar</md-button>
48 |             </md-panel>
49 |          </md-sidenav>
50 |          <md-content ng-view flex>
51 |             <script type="text/ng-template" id="bottom-sheet-template">
52 |                <md-bottom-sheet class="md-list">
53 |                   <md-multi-level-menu id="secondary"
54 |                                        md-back="Back"
55 |                                        md-breadcrumb="false"
56 |                                        md-style-replace>
57 |                   </md-multi-level-menu>
58 |                </md-bottom-sheet>
59 |             </script>
60 |          </md-content>
61 |       </md-content>
62 |       <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
63 |       <script src="https://unpkg.com/angular@1.6.5/angular.min.js"></script>
64 |       <script src="https://unpkg.com/angular-aria@1.6.5/angular-aria.min.js"></script>
65 |       <script src="https://unpkg.com/angular-animate@1.6.5/angular-animate.min.js"></script>
66 |       <script src="https://unpkg.com/angular-material@1.1.4/angular-material.min.js"></script>
67 |       <script src="https://unpkg.com/angular-material-icons@0.7.1/angular-material-icons.min.js"></script>
68 |       <script src="https://unpkg.com/angular-material-badge@1.2.1/angular-material-badge.min.js"></script>
69 |       <script src="https://unpkg.com/angular-route@1.6.6/angular-route.min.js"></script>
70 |       <script src="https://unpkg.com/angular-marked/dist/angular-marked.min.js"></script>
71 |       <script src="https://unpkg.com/marked/marked.min.js"></script>
72 |       <script src="https://unpkg.com/svg-morpheus@0.3.0/compile/minified/svg-morpheus.js"></script>
73 |       <script src="https://unpkg.com/prismjs/prism.js" data-manual></script>
74 |       <script src="https://unpkg.com/prismjs/components/prism-javascript.min.js"></script>
75 |       <script src="https://unpkg.com/prismjs/components/prism-markup.min.js"></script>
76 |       <script src="https://unpkg.com/prismjs/components/prism-bash.min.js"></script>
77 |       <script src="source/angular-material-multilevel-menu.js"></script>
78 |       <script src="demo/controllers/demo.js"></script>
79 |    </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/demo/resources/styles/demo.css:
--------------------------------------------------------------------------------
 1 | md-sidenav {
 2 |    position: static;
 3 | }
 4 | 
 5 | md-bottom-sheet {
 6 |    overflow: hidden;
 7 |    padding-top: 0;
 8 |    padding-left: 0;
 9 |    padding-right: 0;
10 | }
11 | 
12 | .content {
13 |    padding: 16px;
14 | }
15 | 
16 | pre {
17 |    word-wrap: break-word;
18 |    white-space: pre-wrap;
19 | }
20 | 


--------------------------------------------------------------------------------
/demo/views/item-1-1.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-1-1"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-1-2.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-1-2"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-2.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-2"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-3-1.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-3-1"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-3-2-1.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-3-2-1"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-3-2-2-1.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-3-2-2-1"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-4-1.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-4-1"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-4-2.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-4-2"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/item-4.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <h1>Welcome to section "item-4"</h1>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/demo/views/readme.html:
--------------------------------------------------------------------------------
1 | <md-card class="content">
2 |    <marked src="'README.md'"></marked>
3 | </md-card>
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-material-multilevel-menu",
 3 |   "version": "1.5.2",
 4 |   "description": "Material Multi-Level Menu for AngularJS",
 5 |   "main": "angular-material-multilevel-menu.js",
 6 |   "repository": "https://github.com/jmouriz/angular-material-multilevel-menu",
 7 |   "author": "Juan Manuel <jmouriz@gmail.com>",
 8 |   "license": "MIT",
 9 |   "dependencies": {
10 |     "angular": "^1.6.5",
11 |     "angular-animate": "^1.6.5",
12 |     "angular-aria": "^1.6.5",
13 |     "angular-material": "^1.1.4",
14 |     "angular-material-icons": "^0.7.1",
15 |     "jquery": "^3.2.1"
16 |   },
17 |   "devDependencies": {
18 |     "angular-marked": "^1.2.2",
19 |     "angular-route": "^1.6.6",
20 |     "minify": "^3.0.1",
21 |     "prismjs": "^1.6.0"
22 |   },
23 |   "optionalDependencies": {
24 |     "angular-material-badge": "^1.2.2",
25 |     "svg-morpheus": "^0.3.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/source/Makefile:
--------------------------------------------------------------------------------
 1 | PACKAGE := $(shell grep name ../package.json | head -1 | cut -d: -f2 | tr -d '" ,')
 2 | BUILD := ../build
 3 | SOURCE := $(PACKAGE)
 4 | TARGET := $(BUILD)/$(PACKAGE).min
 5 | 
 6 | all: $(TARGET).js $(TARGET).css $(TARGET).html
 7 | 
 8 | $(TARGET).css: $(SOURCE).css
 9 | 	@../node_modules/.bin/minify $< > $@
10 | 
11 | $(TARGET).html: $(SOURCE).html
12 | 	@../node_modules/.bin/minify $< > $@
13 | 
14 | $(TARGET).js: $(SOURCE).js
15 | 	@../node_modules/.bin/minify $< > $@
16 | 


--------------------------------------------------------------------------------
/source/angular-material-multilevel-menu.css:
--------------------------------------------------------------------------------
 1 | .menu-container {
 2 |    height: 100%;
 3 |    display: flex;
 4 |    flex-direction: column;
 5 | }
 6 | 
 7 | .menu {
 8 |    position: relative;
 9 |    width: 100%;
10 |    min-height: 100%;
11 |    left: 0;
12 |    clip-path: inset(0 0 0 0);
13 | }
14 | 
15 | .menu.ng-animate {
16 |    transition: all cubic-bezier(.25, .46, .45, .95) .35s;
17 | }
18 | 
19 | .menu.left {
20 |    left: -100%;
21 |    clip-path: inset(0 0 0 100%);
22 | }
23 | 
24 | .menu.right {
25 |    left: 100%;
26 |    clip-path: inset(0 100% 0 0);
27 | }
28 | 
29 | .submenu {
30 |    margin-left: 16px;
31 | }
32 | 
33 | .submenu.slide {
34 |    position: relative;
35 |    overflow: hidden;
36 | }
37 | 
38 | .submenu.slide.ng-enter {
39 |    animation: 1.35s down;
40 | }
41 | 
42 | .submenu.slide.ng-leave {
43 |    animation: .35s up;
44 | }
45 | 
46 | @keyframes down {
47 |    from {
48 |       max-height: 0;
49 |    }
50 |    to {
51 |       max-height: 100vh;
52 |    }
53 | }
54 | 
55 | @keyframes up {
56 |    from {
57 |       max-height: 100vh;
58 |    }
59 |    to {
60 |       max-height: 0;
61 |    }
62 | }
63 | 
64 | a.breadcrumb,
65 | a.breadcrumb:visited {
66 |    color: inherit;
67 |    text-decoration: none;
68 | }
69 | 
70 | md-list.body {
71 |    padding-top: 0;
72 |    padding-bottom: 0;
73 | }
74 | 


--------------------------------------------------------------------------------
/source/angular-material-multilevel-menu.html:
--------------------------------------------------------------------------------
 1 | <div class="menu-container" ng-init="reset()">
 2 |    <div ng-if="style == STYLE.REPLACE">
 3 |       <md-toolbar ng-if="breadcrumb">
 4 |          <div class="md-toolbar-tools">
 5 |             <md-truncate class="md-subhead">
 6 |                <span ng-repeat="menu in stack">
 7 |                   <a class="breadcrumb" href ng-click="back($index)">{{menu.label || title}}</a>
 8 |                   <ng-md-icon icon="chevron_right"></ng-md-icon>
 9 |                </span>
10 |                <span>{{current.label || title}}</span>
11 |             </md-truncate>
12 |          </div>
13 |       </md-toolbar>
14 |       <md-list id="{{id}}" class="body menu {{animation}}">
15 |          <md-list-item ng-if="!breadcrumb && stack.length" ng-click="back()">
16 |             <ng-md-icon icon="chevron_left"></ng-md-icon>
17 |             <span flex>{{previous || current.label}}</span>
18 |          </md-list-item>
19 |          <md-list-item ng-repeat="item in current.items" ng-click="click(item)" ng-if="!item.hidden" ng-style="{color: item.color}">
20 |             <ng-md-icon icon="{{item.icon}}" ng-if="item.icon"></ng-md-icon>
21 |             <span flex>{{item.label}}</span>
22 |             <md-badge ng-if="item.badge">{{item.badge}}</md-badge>
23 |             <ng-md-icon icon="chevron_right" ng-if="item.items"></ng-md-icon>
24 |          </md-list-item>
25 |       </md-list>
26 |    </div>
27 |    <div ng-if="style == STYLE.ACCORDION">
28 |       <script type="text/ng-template" id="item">
29 |          <md-list-item ng-click="click(item)" ng-if="!item.hidden" ng-style="{color: item.color}">
30 |             <ng-md-icon icon="{{item.icon}}" ng-if="item.icon"></ng-md-icon>
31 |             <span flex>{{item.label}}</span>
32 |             <md-badge ng-if="item.badge">{{item.badge}}</md-badge>
33 |             <ng-md-icon icon="{{item.expanded ? 'expand_less' : 'chevron_right'}}" options='{"rotation": "none", "duration": 500}'
34 |                         ng-if="item.items">
35 |             </ng-md-icon>
36 |          </md-list-item>
37 |          <div flex ng-include="'submenu'" ng-if="item.items"></div>
38 |       </script>
39 |       <script type="text/ng-template" id="submenu">
40 |          <md-list class="body submenu slide" ng-if="item.expanded">
41 |             <div flex ng-repeat="item in item.items">
42 |                <div ng-include="'item'">
43 |             </div>
44 |          </md-list>
45 |       </script>
46 |       <md-list class="body menu">
47 |          <div flex ng-repeat="item in current.items">
48 |             <div ng-include="'item'">
49 |          </div>
50 |       </md-list>
51 |    </div>
52 | </div>
53 | 


--------------------------------------------------------------------------------
/source/angular-material-multilevel-menu.js:
--------------------------------------------------------------------------------
  1 | (function(window, angular, undefined) {
  2 |    'use strict';
  3 | 
  4 |    var walk = function(items, callback) {
  5 |       for (var each in items) {
  6 |          var item = items[each];
  7 |          if (callback(item)) {
  8 |             return item;
  9 |          }
 10 |          item = walk(item.items, callback);
 11 |          if (item) {
 12 |             return item;
 13 |          }
 14 |       }
 15 |    };
 16 | 
 17 |    var $boolean = function(variable) {
 18 |       return (typeof variable === 'string' && variable === 'true');
 19 |    };
 20 | 
 21 |    var module = angular.module('ngMdMultiLevelMenu', ['ngMaterial', 'ngAnimate', 'ngMdIcons']);
 22 | 
 23 |    module.constant('STYLE', {
 24 |       REPLACE: 1,
 25 |       ACCORDION: 2
 26 |    });
 27 | 
 28 |    module.provider('menu', ['STYLE', '$injector', function(STYLE, $injector) {
 29 |       var $this = this;
 30 | 
 31 |       $this._id = Math.random().toString(36).substr(2, 5);
 32 |       $this._breadcrumb = true;
 33 |       $this._title = 'Menu';
 34 |       $this._back = 'Back';
 35 |       $this._style = 1;
 36 |       $this._items = {}; // [];
 37 |       $this._callback = undefined;
 38 |       $this.STYLE = STYLE;
 39 |       
 40 |       $this.$get = function() {
 41 |          return {
 42 |             id: $this._id,
 43 |             breadcrumb: $this._breadcrumb,
 44 |             title: $this._title,
 45 |             back: $this._back,
 46 |             style: $this._style,
 47 |             items: $this._items,
 48 |             callback: $this._callback
 49 |          };
 50 |       };
 51 | 
 52 |       $this.items = function(id, items) {
 53 |          try {
 54 |             var router = $injector.get('$routeProvider');
 55 |             walk(items, function(item) {
 56 |                if (item.link) {
 57 |                   var target = {
 58 |                      templateUrl: (item.view || item.link) + '.html'
 59 |                   };
 60 |                   if (item.controller) {
 61 |                      target.controller = item.controller;
 62 |                   }
 63 |                   router.when('/' + item.link, target);
 64 |                }
 65 |             });
 66 |             if (items.length) {
 67 |                router.otherwise({
 68 |                   redirectTo: '/' + items[0].link
 69 |                });
 70 |             }
 71 |          } catch (error) {
 72 |             // pass
 73 |          }
 74 |          $this._items[id] = items;
 75 |       };
 76 | 
 77 |       $this.id = function(id) {
 78 |          $this._id = id;
 79 |       };
 80 | 
 81 |       $this.title = function(title) {
 82 |          $this._title = title;
 83 |       };
 84 | 
 85 |       $this.back = function(back) {
 86 |          $this._back = back;
 87 |       };
 88 | 
 89 |       $this.breadcrumb = function(breadcrumb) {
 90 |          $this._breadcrumb = breadcrumb;
 91 |       };
 92 | 
 93 |       $this.style = function(style) {
 94 |          $this._style = style;
 95 |       };
 96 | 
 97 |       $this.callback = function(callback) {
 98 |          $this._callback = callback;
 99 |       };
100 |    }]);
101 | 
102 |    module.service('$menu', ['menu', 'STYLE', '$rootScope', function(menu, STYLE, $rootScope) {
103 |       var $this = this;
104 | 
105 |       $this.STYLE = STYLE;
106 | 
107 |       $this.walk = walk;
108 | 
109 |       $this.breadcrumb = function(breadcrumb) {
110 |          if (breadcrumb == undefined) {
111 |             return menu.breadcrumb;
112 |          }
113 |          menu.breadcrumb = breadcrumb;
114 |          $rootScope.$broadcast('reset');
115 |       };
116 | 
117 |       $this.style = function(style) {
118 |          if (style == undefined) {
119 |             return menu.style;
120 |          }
121 |          menu.style = style;
122 |          $rootScope.$broadcast('reset');
123 |       };
124 | 
125 |       $this.callback = function(callback) {
126 |          if (callback == undefined) {
127 |             return menu.callback;
128 |          }
129 |          menu.callback = callback;
130 |       };
131 | 
132 |       $this.get = function(id, item) {
133 |          if (id == undefined) {
134 |             return menu.items;
135 |          }
136 |          if (item == undefined) {
137 |             return menu.items[id];
138 |          }
139 |          return walk(menu.items[id], function(node) {
140 |             return node.id && node.id == item;
141 |          });
142 |       };
143 |    }]);
144 | 
145 |    module.directive('mdMultiLevelMenu', ['$animate', '$location', '$menu', 'menu', 'STYLE', function($animate, $location, $menu, menu, STYLE) {
146 |       var scripts = angular.element('script'), script;
147 |       for (var each in scripts) {
148 |          script = scripts[each];
149 |          if (script.src && script.src.match(/angular-material-multilevel-menu(\.min)?\.js$/)) {
150 |             break;
151 |          }
152 |       }
153 |       var template = script.src.replace(/\.js$/, '.html');
154 |       return {
155 |          restrict: 'E',
156 |          replace: true,
157 |          controller: function($scope, $element) {
158 |             var $this = this;
159 | 
160 |             $scope.select = function(item) {
161 |                if (item.link) {
162 |                   $location.path(item.link);
163 |                }
164 |                if (typeof menu.callback == 'function') {
165 |                   menu.callback(item);
166 |                }
167 |             };
168 |          
169 |             $scope.reset = function() {
170 |                $scope.breadcrumb = menu.breadcrumb;
171 |                $scope.style = menu.style;
172 |                $scope.STYLE = STYLE;
173 |                $scope.stack = [];
174 |                $scope.current = {
175 |                   label: $scope.title,
176 |                   items: menu.items[$scope.id]
177 |                };
178 |             };
179 |          
180 |             $scope.click = function(item) {
181 |                if (item.items) {
182 |                   if ($scope.style == STYLE.REPLACE) {
183 |                      var widget = angular.element('md-list.menu#' + $scope.id);
184 |                      $animate.addClass(widget, 'left').then(function() {
185 |                         $scope.stack.push($scope.current);
186 |                         $scope.current = {
187 |                            label: item.label,
188 |                            items: item.items
189 |                         };
190 |                         widget.removeClass('ng-animate');
191 |                         widget.removeClass('left');
192 |                         widget.addClass('right');
193 |                         widget.addClass('ng-animate');
194 |                         $animate.removeClass(widget, 'right');
195 |                      });
196 |                   }
197 |                   if ($scope.style == STYLE.ACCORDION) {
198 |                      item.expanded = !item.expanded;
199 |                   }
200 |                }
201 |                $scope.select(item);
202 |             };
203 |          
204 |             $scope.back = function(index) {
205 |                var left = $scope.stack.length - index;
206 |                var widget = angular.element('md-list.menu#' + $scope.id);
207 |                $animate.addClass(widget, 'right').then(function() {
208 |                   do var previous = $scope.stack.pop();
209 |                   while (--left);
210 |                   $scope.current = previous;
211 |                   widget.removeClass('ng-animate');
212 |                   widget.removeClass('right');
213 |                   widget.addClass('left');
214 |                   widget.addClass('ng-animate');
215 |                   $animate.removeClass(widget, 'left');
216 |                });
217 |             };
218 |       
219 |             $scope.$on('reset', function(event) {
220 |                walk(menu.items[menu.id], function(item) {
221 |                   item.expanded = false;
222 |                });
223 |                $scope.reset();
224 |             });
225 |          },
226 |          templateUrl: template,
227 |          scope: {},
228 |          link: {
229 |             pre: function(scope, element, attributes, controller) {
230 |                scope.id = attributes.id || Math.random().toString(36).substr(2, 5);
231 |                scope.title = attributes.mdTitle || 'Menu';
232 |                scope.previous = attributes.mdBack || 'Back';
233 |                scope.breadcrumb = $boolean(attributes.mdBreadcrumb); 
234 |                //controller.id = attributes.id || Math.random().toString(36).substr(2, 5);
235 |                //controller.title = attributes.mdTitle || 'Menu';
236 |                //controller.previous = attributes.mdBack || 'Back';
237 |                //controller.breadcrumb = $boolean(attributes.mdBreadcrumb); 
238 |                var style = undefined;
239 |                for (var attribute in attributes) {
240 |                   if (attribute.startsWith('mdStyle')) {
241 |                      style = attribute.replace(/^mdStyle/, '').toUpperCase();
242 |                      break;
243 |                   }
244 |                }
245 |                if (style) {
246 |                   if (STYLE[style]) {
247 |                      scope.style = STYLE[style];
248 |                      //controller.style = STYLE[style];
249 |                   } else {
250 |                      console.warn('unknown style', style);
251 |                   }
252 |                }
253 |             }
254 |          }
255 |       };
256 |    }]);
257 | }).call(this, window, window.angular, undefined);
258 | 


--------------------------------------------------------------------------------