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

MCS NG-Meterial is based on mcs-web.

define(['app','lib/ELEMENT','lib/BUTTON'],function(app, ELEMENT){
	return app.extend("TOOLBAR",ELEMENT,{
		asComponent: false,
		
		//if has submenu, use md-menu-bar instead
		template: function(){
			var ret,cfg=this.config,cls=`x-toolbar ${cfg.cls}`,
				menus=this.filterItems({attr:'menus',isNotNull:true},cfg.leftButtons,cfg.rightButtons,cfg.centerButtons);
				lbtns=this.genTemplateList(cfg.leftButtons,{defCls:'BUTTON',tag:'LeftBtn',dock:cfg.dock}),
				rbtns=this.genTemplateList(cfg.rightButtons,{defCls:'BUTTON',tag:'RightBtn',dock:cfg.dock}),
				cbtns=this.genTemplateList(cfg.centerButtons,{defCls:'BUTTON',tag:'CenterBtn',dock:cfg.dock});
			if (cfg.dock=='left'||cfg.dock=='right'){
				ret=
				`<div layout="column" style="width:50px">
					<md-whiteframe class="md-whiteframe-8dp x-toolbar-vertical" layout="column" layout-align="start center" flex>
						${lbtns}
						<span flex>
						${cbtns}
						<span flex>
						${rbtns}
					</md-whiteframe>
				</div>`;
			}
			else{
				var tag='md-toolbar';
				//if (menus.length>0) tag='md-menu-bar';
				ret=
				`<${tag} class="${cls}">
					<div class="md-toolbar-tools">
						${lbtns}
						<span flex></span>
						${cbtns}
						<span flex></span>
						${rbtns}
					</div>
				</${tag}>`
			}
			return ret;	
		},
		
	});
})