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

MCS NG-Meterial is based on mcs-web.

define(['app','lib/ELEMENT'],function(app,ELEMENT){
	//text, icon
	//ui: default=raised confirm=primary reject=warn hyperlink= ng-href
	return app.extend("BUTTON",ELEMENT,{
		asComponent: false,
		
		template: function(){
			var cfg=this.config,ui=cfg.ui||'',cls=`${cfg.cls||''}`,text=cfg.text||'',icon='';
			if (this.op.cls) cls+=' '+this.op.cls;
			if (ui=='confirm') cls+=' ng-raised ng-primary';
			if (ui=='reject') cls+=' ng-raised ng-warm';
			if (ui=='bare') cls+='';
			if (cfg.icon){
				icon=`<md-icon md-svg-icon="${cfg.icon}"></md-icon>`
			}
			
			var ret="";
			if (cfg.menus){
				var childs=this.genItems(cfg.menus,{defCls:'BUTTON',tag:'Sub'});
				var subs=`${childs.map(ch=>`<md-menu-item>${ch.template()}</md-menu-item>`).join('')}`
				var tar="";
				if (this.op.dock=='bottom') tar=' md-position-mode="target top"';
				else
				if (this.op.dock=='top') tar=' md-position-mode="target bottom"';
				else
				if (this.op.dock=='left') tar=' md-position-mode="cascade target"';
				else
				if (this.op.dock=='right') tar=' md-position-mode="cascade target"';
				ret=
				`<md-menu${tar}>
					<md-button class="${cls}" aria-label="${text}" ng-click="$mdMenu.open()">${text}${icon}</md-button>
					<md-menu-content> 
						${subs}
					</md-menu-content>
				</md-menu>`;	
			}
			else{
				ret= `<md-button class="${cls}" aria-label="${text}">${text}${icon}</md-button>`;
			}
			return ret;
		},
	});
})