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

MCS NG-Meterial is based on mcs-web.

define(['app','lib/CONTAINER','lib/TITLEBAR','lib/TOOLBAR'],function(app, CONTAINER){
	//{$type:'PANEL',title:'P', sysMenus:[<BUTTON>], tools:[<BUTTON>, float:<FABBUTTON>}
	return app.extend("PANEL",CONTAINER,{
		getBeforeItems: function(){
			var cfg=this.config;
			return [{
				$type:'TITLEBAR',
				leftButtons:cfg.sysMenus,
				rightButtons:cfg.tools,
				title:cfg.title,
				cls:cfg.titleCls,
				dock:'top',
			}]
		},
		
		template: function(){
			var cfg=this.config;
			var tpl=this.callParent();
			
			var fab=""; //class="md-scale md-fab-bottom-right"
			if (cfg.float){
				var fb=Object.assign({},cfg.float); delete fb.menus;
				fb.cls=fb.cls||'';
				fb.cls+=" md-fab md-warn";
				var fbtn=this.genTemplateList([fb],{defCls:'BUTTON',tag:'Float'});
				var kids="";
				if (cfg.float.menus){
					var subs=this.genTemplateList([cfg.float.menus],{defCls:'BUTTON',tag:'FloatSub',cls:"md-fab md-mini"});
					kids=
					`<md-fab-actions>
						<div>
							${subs}
						</div>
					</md-fab-actions>
					`
				}
				fab=
				`<md-fab-speed-dial ng-hide="demo.hidden" md-direction="left" md-open="demo.isOpen" class="md-scale md-fab-bottom-right" ng-class="{ 'md-hover-full': demo.hover }" ng-mouseenter="demo.isOpen=true" ng-mouseleave="demo.isOpen=false">
					<md-fab-trigger>
						${fbtn}
					</md-fab-trigger>
					${kids}
				</md-fab-speed-dial>`
				tpl+=fab;				
			}
			return tpl;
		}
	});
})