LayoutManager.js 5 KB

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  "dojo/dom-style",
  'dojo/dom',
  "dojo/dom-construct",
  "dojo/dom-attr",
  'dojo/on',
  'dojo/json',
  'dojo/topic',
  'dojo/request/xhr'
],
function (declare, lang, array, domStyle, dom, domConstruct, domAttr, on, JSON, topic, xhr) {
  var instance = null, clazz;

  clazz = declare(null, {
	appconfig:null,
	layoutArr:null,
	layout:"default",
	max_iconwidget:5,
	margin_width:15,
	icon_width:45,
	
    constructor: function (layout) {
    	if(typeof layout === 'undefined')return;
    	this.layout = layout;
        this.listenBuilderEvents();
    },

    listenBuilderEvents: function(){
      //topic.subscribe('builder/mapChanged', lang.hitch(this, this._onMapChanged));
    },
    
    initLayout:function(layout, layoutArr){
    	if(layout == this.layout)return;
    	this.layout = layout;
    	this.layoutArr = layoutArr;
    	var filteredArr = array.filter(this.layoutArr, lang.hitch(this, function (layout, i) {return layout.name == this.layout;}));
		if(typeof filteredArr === 'object'  && filteredArr.length == 1)this._setLayoutMargin(filteredArr[0]);
    },
    
    initLayoutIcons:function(layoutname, layoutArr){
    	var filteredArr = array.filter(layoutArr, lang.hitch(this, function (layout, i) {return layout.name == layoutname;}));
		if(typeof filteredArr === 'object'  && filteredArr.length == 1)this._createIconButtons(filteredArr[0].iconwidgets);
    },
    
    _setLayoutMargin:function(layout){
    	array.forEach(layout.widgets, lang.hitch(this, function (widget, i) {
            this._setWidgetsMargin(widget);
        }));
    	this._createIconButtons(layout.iconwidgets);
    },
    
    _setWidgetsMargin:function(widget){
    	if(typeof widget.position != 'object')return;
    	widget.id =  this._getWidgetId(widget);
    	if(typeof widget.id === 'undefined')return;
    	this._setMarginBox(widget.id, widget.position);
    },
    
    _getWidgetId:function(widget){
    	var id = undefined;
    	array.forEach(dom.byId(widget.position.relativeTo).childNodes, lang.hitch(this, function (child, i) {
           if(typeof child.id === 'string' && child.id.indexOf(widget.name)>-1)id = child.id;
        }));
    	return id;
    },
    
    _setMarginBox:function(id, position){
    	domAttr.remove(id, "style");
    	if(typeof position.top != 'undefined' && position.top != 0){
    		domStyle.set(id, "top", position.top+"px");
    	}
    	if(typeof position.left != 'undefined' && position.left != 0){
    		domStyle.set(id, "left", position.left+"px");
    	}
    	if(typeof position.right != 'undefined' && position.right != 0){
    		domStyle.set(id, "right", position.right+"px");
    	}
    	if(typeof position.bottom != 'undefined' && position.bottom != 0){
    		domStyle.set(id, "bottom", position.bottom+"px");
    	}
    },
    
    _createIconButtons:function(iconwidgets){
    	var new_iconwidgets  = lang.clone(iconwidgets);
    	this.max_iconwidget = iconwidgets.maxcount;
    	for(var i=0; i<this.max_iconwidget; i++){
    		if(typeof dom.byId("iconwidgets_"+i) !== 'undefined')domConstruct.destroy("iconwidgets_"+i);;
    		if(typeof new_iconwidgets.position.left != 'undefined' && new_iconwidgets.position.left > 0){
    			domConstruct.place("<div id='iconwidgets_"+i+"' class='widget-create-btn'>"+(i+1)+"</div>", new_iconwidgets.position.relativeTo, 'last');
    			if(i>0)new_iconwidgets.position.left += (this.margin_width+this.icon_width);
    			this._setMarginBox('iconwidgets_'+i, new_iconwidgets.position);
    		}else if(typeof new_iconwidgets.position.right != 'undefined' && new_iconwidgets.position.right > 0){
    			domConstruct.place("<div id='iconwidgets_"+i+"' class='widget-create-btn'>"+(this.max_iconwidget-i)+"</div>", new_iconwidgets.position.relativeTo, 'last');
    			if(i>0)new_iconwidgets.position.right += (this.margin_width+this.icon_width);
    			this._setMarginBox('iconwidgets_'+i, new_iconwidgets.position);
    		}
    		if(typeof dom.byId("iconwidgets_"+i) === 'undefined')return;
    		dom.byId("iconwidgets_"+i).onmouseover = lang.hitch(this, function (evt){
    			var btn = evt.currentTarget;
    			domStyle.set(btn, "background-color", "rgba(128,128,128, 0.6)");
    		});
    		dom.byId("iconwidgets_"+i).onmouseout = lang.hitch(this, function (evt){
    			var btn = evt.currentTarget;
    			domStyle.set(btn, "background-color", "rgba(128,128,128, 0.4)");
    		});
    		
    		//判断该位置是不是已配置有微件 有则隐藏
    		var filteredArr = array.filter(iconwidgets.btnbar, lang.hitch(this, function (widget, h) {if(widget.index == i)this._setMarginBox(widget.id, new_iconwidgets.position);return widget.index == i;}));
    		if(typeof filteredArr === 'object'  && filteredArr.length == 1)domStyle.set("iconwidgets_"+i, "display", "none");
    	}
    },
    
    _changeIconButtons:function(){
    	
    }
    
  });

  clazz.getInstance = function (layout) {
    if(instance === null) {
        instance = new clazz(layout);
    }else{
        instance.layout = layout;
    }
    return instance;
  };
  return clazz;
});