define(['dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/on',
|
'dijit/_WidgetBase',
|
'./utils'
|
],
|
function(declare, lang, array, html, on, _WidgetBase, utils) {
|
/* global jimuConfig */
|
return declare(_WidgetBase, {
|
'class': 'jimu-widget-onscreen-icon',
|
|
postCreate: function(){
|
this.inherited(arguments);
|
this.iconNode = html.create('img', {
|
src: this.widgetConfig.icon
|
}, this.domNode);
|
if(window.isRTL && this.widgetConfig.mirrorIconForRTL){
|
html.addClass(this.iconNode, 'jimu-flipx');
|
}
|
html.setAttr(this.domNode, 'title', this.widgetConfig.label);
|
html.setAttr(this.domNode, 'data-widget-name', this.widgetConfig.name);
|
this.own(on(this.domNode, 'click', lang.hitch(this, function(){
|
this.onClick();
|
})));
|
|
this.position = lang.clone(this.widgetConfig.position);
|
if (this.widgetConfig.position.relativeTo === 'map') {
|
this.own(on(this.map, 'resize', lang.hitch(this, function() {
|
var _pos = lang.clone(this.position);
|
delete _pos.width;
|
delete _pos.height;
|
if (this.panel) {
|
this.panel.setPosition(_pos);
|
}
|
})));
|
}
|
|
this.state = 'closed';
|
},
|
|
startup: function(){
|
this.inherited(arguments);
|
},
|
|
onClick: function(){
|
if(this.state === 'closed'){
|
this.switchToOpen();
|
}else{
|
this.switchToClose();
|
}
|
},
|
|
moveTo: function(position){
|
var style = {
|
left: 'auto',
|
right: 'auto',
|
bottom: 'auto',
|
top: 'auto',
|
width: 'auto',
|
height: 'auto'
|
};
|
style = lang.mixin(style, utils.getPositionStyle(position));
|
//we don't change width and height through layout
|
delete style.width;
|
delete style.height;
|
html.setStyle(this.domNode, style);
|
this.position = lang.clone(position);
|
|
if (this.widgetConfig && this.widgetConfig.panel){
|
this.widgetConfig.panel.position = lang.clone(position);
|
this.widgetConfig.position = lang.clone(position);
|
}
|
if(this.panel){
|
this.panel.setPosition(lang.clone(position));
|
}
|
if(this.widget){
|
this.widget.setPosition(this.getOffPanelWidgetPosition(this.widget));
|
}
|
},
|
|
destroy: function(){
|
if(this.panel){
|
this.panelManager.destroyPanel(this.panel);
|
}else if(this.widget){
|
this.widgetManager.destroyWidget(this.widget);
|
}
|
this.inherited(arguments);
|
},
|
|
switchToOpen: function(){
|
this.state = 'opened';
|
|
this.panelManager.closeAllPanelsInGroup(this.widgetConfig.gid);
|
array.forEach(this.widgetManager.getOnScreenOffPanelWidgets(), function(widget){
|
if(widget.closeable){
|
this.widgetManager.closeWidget(widget);
|
}
|
}, this);
|
|
html.addClass(this.domNode, 'jimu-state-selected');
|
this._showLoading();
|
if(this.widgetConfig.inPanel === false){
|
this.widgetManager.loadWidget(this.widgetConfig)
|
.then(lang.hitch(this, function(widget){
|
this.widget = widget;
|
widget.setPosition(this.getOffPanelWidgetPosition(widget));
|
this.widgetManager.openWidget(widget);
|
this.own(on(widget, 'close', lang.hitch(this, function(){
|
this.switchToClose();
|
})));
|
|
this._hideLoading();
|
}));
|
}else{
|
this.panelManager.showPanel(lang.clone(this.widgetConfig))
|
.then(lang.hitch(this, function(panel){
|
this.panel = panel;
|
this.own(on(panel, 'close', lang.hitch(this, function(){
|
this.switchToClose();
|
})));
|
|
this._hideLoading();
|
}));
|
}
|
},
|
|
switchToClose: function(){
|
this.state = 'closed';
|
html.removeClass(this.domNode, 'jimu-state-selected');
|
if(this.widgetConfig.inPanel === false){
|
this.widgetManager.closeWidget(this.widget);
|
}else{
|
this.panelManager.closePanel(this.panel);
|
}
|
},
|
|
getOffPanelWidgetPosition: function(widget){
|
var position = {
|
relativeTo: widget.position.relativeTo
|
};
|
var pbox = html.getMarginBox(this.domNode);
|
var sbox = this.widgetManager.getWidgetMarginBox(widget);
|
var containerBox = html.getMarginBox(position.relativeTo === 'map'?
|
this.map.id: jimuConfig.layoutId);
|
|
var top = pbox.t + pbox.h + 1;//put under icon by default
|
if(top + sbox.h > containerBox.h){
|
position.bottom = containerBox.h - pbox.t + 1;
|
}else{
|
position.top = top;
|
}
|
|
if (window.isRTL) {
|
if(pbox.l + pbox.w - sbox.w < 0){
|
position.right = 0;
|
}else{
|
position.right = pbox.l + pbox.w - sbox.w;
|
}
|
} else {
|
if(pbox.l + sbox.w > containerBox.w){
|
position.right = 0;
|
}else{
|
position.left = pbox.l;
|
}
|
}
|
return position;
|
},
|
|
_showLoading: function(){
|
html.setAttr(this.iconNode, 'src', require.toUrl('jimu') + '/images/loading_circle.gif');
|
},
|
|
_hideLoading: function(){
|
html.setAttr(this.iconNode, 'src', this.widgetConfig.icon);
|
}
|
});
|
});
|
