mcs-ng-material/resources/lib/NAVIGATOR.js

MCS NG-Meterial is based on mcs-web.

define(['app','lib/PANEL','lib/MENUBAR'],function(app,PANEL){
	return app.extend("NAVIGATOR",PANEL,{
		getBeforeItems: function(){
			var items=this.callParent();
			
			var item=this.getItem();
			items.push(item);
			
			return items;
		},
		
		getItem: function(){
			var cfg=this.config;
			switch (cfg.navType){
			case "dropdownmenu":
				return this.doDropdownmenu();
			case "menu":
				return this.doMenu();
			case "block":
			case "tile":
				return this.doTile();
			case "list":
				return this.doList();
			case "accordion":
				return this.doAccordion();
			case "tree":
				return this.doTree();
			default:
				return this.doTile();
			}
		},
		
		doDropdownmenu: function(items){
			var mb = {$type: "MENUBAR",leftButtons: [], centerButtons: [], rightButtons: [],dock:'top'};
			var menus = this.config.menus||[];
			
			menus.forEach((b) => {
				if (b.align=="right")
					mb.rightButtons.push(b);
				else if (b.align=="center")
					mb.centerButtons.push(b);
				else
					mb.leftButtons.push(b);				
			})
			
			return mb;
		},
		
		doTile: function(items){
			return {$type:'TILEGRID',tile:[]}
		},
		
		doNest: function(){
			`
			<div class="cnt">
		<div class="menu-item" ng-click="toggle(1); open1=!open1">
			<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
				<span class="title flex" flex=""> Menu Item88888</span>
				<i class="fa fa-chevron-down" ng-class="{'rotate180': open1, 'rotate-back': !open1}"></i>
			</md-list>
			<div class="sub-menu" ng-animate="'animate'" >
				<md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
					<md-button>
						<div layout="row" flex="">
							<a ui-sref="{{item.link}}">
								<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
							</a>
						</div>
					</md-button>
				</md-menu-item>
			</div>
		</div>
		<div class="menu-item" ng-click="toggle(2); open2=!open2">
			<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
				<span class="title flex" flex=""> Menu Item 2</span>
				<i class="fa fa-chevron-down" ng-class="{'rotate180': open2, 'rotate-back': !open2}"></i>
			</md-list>
			<div class="sub-menu" ng-animate="'animate'" >
				<md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
					<md-button>
						<div layout="row" flex="">
							<a ui-sref="{{item.link}}">
								<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
							</a>
						</div>
					</md-button>
				</md-menu-item>
			</div>
		</div>
	</div>		`
		}
//		controllerAs: 'ctrl',
//		controller: function(){	
//			var cfg=this.config;
//			if (!cfg.menus) return null;
//			console.info('CCCCTTTTRR111')
//			return function($scope){
//				console.info('CCCCTTTTRRRRLLL')
//				$scope.openMenu = function($mdMenu, ev) {
//			      //originatorEv = ev;
//					console.info('OOOPPPEEENNN ev=%o',ev);
//					
//					$mdMenu.open(ev);
//			    }
//			}
//		}
	});
})