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

MCS NG-Meterial is based on mcs-web.

define(['app','lib/ELEMENT'],function(app, ELEMENT){
	return app.extend("CONTAINER",ELEMENT,{
		prepare: function(){
			
		},
		
		template: function(){
			var cfg=this.config;
			
			var items=this.getBeforeItems();
			items.push.apply(items,cfg.items||[]);
			items.push.apply(items,this.getAfterItems());
			
			var layout="column",align=cfg.align,pack=cfg.pack,extra=this.getExtra(),cls=cfg.cls||'',flex=cfg.flex;
			if (layout=='hbox') layout="row";
			var header='',footer='';
			
			var tops=this.filterItems({attr:'dock',val:'top'},items);
			var bottoms=this.filterItems({attr:'dock',val:'bottom'},items);
			var lefts=this.filterItems({attr:'dock',val:'left'},items);
			var rights=this.filterItems({attr:'dock',val:'right'},items);
			
			var style='';
			if (typeof flex!='undefined'){
				if (flex=='') extra+=' flex';
				else extra+=' flex="'+flex+'"';
			}
			if (cfg.width) style+='width:'+cfg.width+';';
			if (cfg.height) style+='height:'+cfg.width+';';
		
			var items=this.genItems(this.filterItems({attr:'dock',isNull:true},items),{defCls:'ELEMENT',tag:'Item'})
			var content=
				`<md-content layout="${layout}" class="${cls}" style="${style}" ${extra}>
					${items.map(m=>`<${m.cmpName}></${m.cmpName}>`).join('')}
					${this.links.length?`<div ui-view></div>`:''}
				</md-content>`;
			
			var lcontent=this.genTemplateList(lefts,{defCls:'ELEMENT',tag:'Left'});
			var rcontent=this.genTemplateList(rights,{defCls:'ELEMENT',tag:'Right'});
			var tcontent=this.genTemplateList(tops,{defCls:'ELEMENT',tag:'Top'});
			var bcontent=this.genTemplateList(bottoms,{defCls:'ELEMENT',tsg:'Bottom'});
			

			var tpl='';
			if (bottoms.length+tops.length>0){
				if (lefts.length+rights.length>0){
					tpl=
					`<div layout="column" layout-fill>
						${tcontent}
						<md-content flex>
							<div layout="row" layout-fill>
								${lcontent}
								<md-content flex>
									${content}
								</md-content>
								${rcontent}
							</div>
						</md-content>
						${bcontent}
					</div>`
				}
				else{
					tpl=
					`<div layout="column" layout-fill>
						${tcontent}
						<md-content flex>
							${content}
						</md-content>
						${bcontent}
					</div>`
				}
			}
			else{
				if (lefts.length+rights.length>0){
					`<div layout="row" layout-fill>
						${lcontent}
						<md-content flex>
							${content}
						</md-content>
						${rcontent}
					</div>`
				}
				else{
					tpl=
					`${content}`
				}
			}
			
			return tpl;
		},
		
		getExtra: function(){
			return "";
		},
		
		getBeforeItems: function(){
			return [];
		},
		
		getAfterItems: function(){
			return [];
		}
	});
})