define(['dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/_base/fx',
|
'dojo/Deferred',
|
'dojo/promise/all',
|
'dojo/on',
|
'dojo/topic',
|
'dojo/when',
|
'require',
|
'./utils',
|
'./WidgetManager'],
|
function (declare, lang, array, html, baseFx, Deferred, all, on, topic, when,
|
require, utils, WidgetManager) {
|
var clazz, instance = null;
|
|
clazz = declare(null, {
|
constructor: function(){
|
//{id, uri, object}
|
this.panels = [];
|
this.widgetManager = WidgetManager.getInstance();
|
on(window, 'resize', lang.hitch(this, this.onWindowResize));
|
|
this.activePanel = null;
|
|
//because for moveable panel, we can't listen mousedown event of the mover,
|
//and because panel may re-create moveable so we also can't listen moveable's event,
|
//so, we list this topic event.
|
topic.subscribe('/dnd/move/start', lang.hitch(this, this._onMoveStart));
|
|
topic.subscribe('widgetActived', lang.hitch(this, this._onWidgetActived));
|
},
|
|
showPanel: function(config){
|
var def = new Deferred();
|
|
var pid = config.id + '_panel', panel = this.getPanelById(pid);
|
if(panel){
|
if(panel.state === 'closed'){
|
this.openPanel(panel);
|
}
|
def.resolve(panel);
|
}else{
|
all({
|
Panel: this._loadPanelClass(config.panel.uri),
|
nls: this._loadThemeI18N(config.panel.uri)
|
}).then(lang.hitch(this, function(result){
|
var pid = config.id + '_panel', panel = this.getPanelById(pid);
|
|
var options = {
|
label: config.label,
|
config: config,
|
uri: config.panel.uri,
|
position: config.panel.position,
|
map: this.map,
|
widgetManager: this.widgetManager,
|
panelManager: this,
|
id: pid,
|
gid: config.gid,
|
nls: result.nls
|
};
|
lang.mixin(options, config.panel.options);
|
|
try{
|
panel = new result.Panel(options);
|
console.log('panel [' + pid + '] created.');
|
}catch(error){
|
console.log('create panel error: ' + error + ', panelId: ' + pid);
|
def.reject(error);
|
return;
|
}
|
|
panel.setPosition(config.panel.position);
|
|
utils.setVerticalCenter(panel.domNode);
|
this.openPanel(panel);
|
|
// on(panel.domNode, 'click', lang.hitch(this, this._onPanelClick, panel));
|
panel.domNode.addEventListener('click', lang.hitch(this, this._onPanelClick, panel), {capture: true});
|
|
def.resolve(panel);
|
}));
|
}
|
return def;
|
},
|
|
setMap: function(map){
|
this.map = map;
|
//on(this.map, 'resize', lang.hitch(this, this.onMapResize));
|
},
|
|
closeOtherPanelsInTheSameGroup: function (panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return;
|
}
|
}
|
|
for(var i = 0; i < this.panels.length; i++){
|
if(this.panels[i].gid === panel.gid && this.panels[i].id !== panel.id){
|
this.closePanel(this.panels[i]);
|
}
|
}
|
},
|
|
closeAllPanelsInGroup: function (groupId){
|
for(var i = 0; i < this.panels.length; i++){
|
if(this.panels[i].gid === groupId){
|
this.closePanel(this.panels[i]);
|
}
|
}
|
},
|
|
openPanel: function(panel){
|
var def = new Deferred();
|
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
def.reject();
|
return def;
|
}
|
}else{
|
if(!this.panels.some(function(p){
|
return p.id === panel.id;
|
})){
|
this.panels.push(panel);
|
}
|
}
|
|
if(!panel.started){
|
try {
|
panel.started = true;
|
panel.startup();
|
} catch (err) {
|
console.error('fail to startup panel ' + panel.id + '. ' + err.stack);
|
}
|
}
|
|
if(panel.state === 'opened'){
|
this._activePanel(panel);
|
def.resolve(panel);
|
return def;
|
}
|
|
//set state here to avoid openPanel is called twice
|
panel.setState('opened');
|
|
return this.playOpenPanelAnimation(panel).then(lang.hitch(this, function(){
|
html.setStyle(panel.domNode, 'display', '');
|
panel.onOpen();
|
|
this._activePanel(panel);
|
return panel;
|
}));
|
},
|
|
closePanel: function(panel){
|
var def = new Deferred();
|
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
def.resolve();
|
return def;
|
}
|
}
|
|
if(panel.state === 'closed'){
|
def.resolve();
|
return def;
|
}
|
|
return this.playClosePanelAnimation(panel).then(lang.hitch(this, function(){
|
if(this.activePanel && this.activePanel.id === panel.id){
|
this.activePanel.onDeActive();
|
this.activePanel = null;
|
}
|
panel.setState('closed');
|
panel.onClose();
|
if(panel.domNode){
|
html.setStyle(panel.domNode, 'display', 'none');
|
}
|
}));
|
},
|
|
minimizePanel: function(panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return;
|
}
|
}
|
|
if(panel.state === 'closed'){
|
this.openPanel(panel);
|
}
|
|
panel.setWindowState('minimized');
|
|
try{
|
panel.onMinimize();
|
}catch(err){
|
console.log(console.error('fail to minimize panel ' + panel.id + '. ' + err.stack));
|
}
|
},
|
|
maximizePanel: function(panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return;
|
}
|
}
|
|
if(panel.state === 'closed'){
|
this.openPanel(panel);
|
}
|
|
panel.setWindowState('maximized');
|
try{
|
panel.onMaximize();
|
}catch(err){
|
console.log(console.error('fail to maximize panel ' + panel.id + '. ' + err.stack));
|
}
|
},
|
|
normalizePanel: function(panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return;
|
}
|
}
|
|
if(panel.state === 'closed'){
|
this.openPanel(panel);
|
}
|
|
panel.setWindowState('normal');
|
try{
|
panel.onNormalize();
|
}catch(err){
|
console.log(console.error('fail to noralize panel ' + panel.id + '. ' + err.stack));
|
}
|
},
|
|
changeWindowStateTo: function(panel, state){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return;
|
}
|
}
|
|
if(state === 'normal'){
|
this.normalizePanel(panel);
|
}else if(state === 'minimized'){
|
this.minimizePanel(panel);
|
}else if(state === 'maximized'){
|
this.maximizePanel(panel);
|
}else{
|
console.log('error state: ' + state);
|
}
|
},
|
|
getPanelById: function(pid){
|
for(var i = 0; i < this.panels.length; i++){
|
if(this.panels[i].id === pid){
|
return this.panels[i];
|
}
|
}
|
},
|
|
onWindowResize: function(){
|
for(var i = 0; i < this.panels.length; i++){
|
if(this.panels[i].state !== 'closed' &&
|
this.panels[i].position.relativeTo !== 'map'){
|
this.panels[i].resize();
|
}
|
}
|
},
|
|
onMapResize: function(){
|
for(var i = 0; i < this.panels.length; i++){
|
if(this.panels[i].state !== 'closed' &&
|
this.panels[i].position.relativeTo === 'map'){
|
this.panels[i].resize();
|
}
|
}
|
},
|
|
destroyPanel: function(panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return;
|
}
|
}
|
|
if(!panel.domNode){
|
return;
|
}
|
if(panel.state !== 'closed'){
|
this.closePanel(panel);
|
}
|
this._removePanel(panel);
|
try{
|
panel.destroy();
|
}catch(err){
|
console.log(console.error('fail to destroy panel ' + panel.id + '. ' + err.stack));
|
}
|
},
|
|
destroyAllPanels: function(){
|
var allPanelIds = array.map(this.panels, function(panel){
|
return panel.id;
|
});
|
array.forEach(allPanelIds, function (panelId) {
|
this.destroyPanel(panelId);
|
}, this);
|
this.panels = [];
|
},
|
|
playOpenPanelAnimation: function(panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return when();
|
}
|
}
|
|
if(!panel.openAnimation || panel.animationDuration === 0){
|
return when();
|
}
|
|
var def = new Deferred();
|
if(typeof panel.openAnimation === 'string'){
|
if(panel.openAnimation === 'fadeIn'){
|
html.setStyle(panel.domNode, {
|
opacity: 0,
|
display: ''
|
});
|
|
baseFx.fadeIn({
|
node: panel.domNode,
|
duration: panel.animationDuration,
|
onEnd: function(){
|
def.resolve();
|
}
|
}).play();
|
}else{
|
def.resolve();
|
}
|
}else{
|
def.resolve();
|
}
|
return def;
|
},
|
|
playClosePanelAnimation: function(panel){
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return when();
|
}
|
}
|
|
if(!panel.closeAnimation || panel.animationDuration === 0){
|
return when();
|
}
|
|
var def = new Deferred();
|
if(typeof panel.closeAnimation === 'string'){
|
if(panel.closeAnimation === 'fadeOut'){
|
baseFx.fadeOut({
|
node: panel.domNode,
|
duration: panel.animationDuration,
|
onEnd: function(){
|
def.resolve();
|
}
|
}).play();
|
}else{
|
def.resolve();
|
}
|
}
|
return def;
|
},
|
|
getPositionOnMobile: function(panel){
|
//the position is minimized as title, half widget/height, full screen
|
if(typeof panel === 'string'){
|
panel = this.getPanelById(panel);
|
if(!panel){
|
return {};
|
}
|
}
|
|
var box = html.getMarginBox(window.jimuConfig.layoutId);
|
var titleTop = box.h / 2;
|
var borderRadius = '4px';
|
|
if(!panel.titleHeight){
|
panel.titleHeight = 35;
|
}
|
|
if(panel.windowState === 'maximized'){
|
return {
|
left: 0,
|
right: 0,
|
top: 0,
|
bottom: 0,
|
width: 'auto',
|
height: 'auto',
|
contentHeight: box.h - panel.titleHeight,
|
borderRadiusStyle: {
|
borderTopLeftRadius: 0,
|
borderTopRightRadius: 0,
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: 0
|
}
|
};
|
}else if(panel.windowState === 'minimized'){
|
var minimizedPanels = this.panels.filter(function(p){
|
return p.windowState === 'minimized' && p.state !== 'closed' && p.id !== panel.id;
|
});
|
|
var bottom = 0;
|
if(minimizedPanels.some(function(p){
|
return p._mobileBottom === 0;
|
})){
|
bottom = panel.titleHeight;
|
}
|
|
panel._mobileBottom = bottom;
|
|
if(box.h > box.w){ //portrait, stay at bottom
|
return {
|
left: 0,
|
right: 0,
|
top: 'auto',
|
bottom: bottom,
|
width: 'auto',
|
height: panel.titleHeight,
|
contentHeight: 0,
|
borderRadiusStyle: {
|
borderTopLeftRadius: borderRadius,
|
borderTopRightRadius: borderRadius,
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: 0
|
}
|
};
|
}else{//landscape, stay at right, half width
|
return {
|
left: box.w - box.w / 2,
|
right: 0,
|
top: 'auto',
|
bottom: bottom,
|
width: box.w / 2,
|
height: panel.titleHeight,
|
contentHeight: box.h,
|
borderRadiusStyle: window.isRTL?
|
{//stay at left
|
borderTopLeftRadius: 0,
|
borderTopRightRadius: borderRadius,
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: borderRadius
|
}: {//stay at left
|
borderTopLeftRadius: borderRadius,
|
borderTopRightRadius: 0,
|
borderBottomLeftRadius: borderRadius,
|
borderBottomRightRadius: 0
|
}
|
};
|
}
|
}else{//windowState=normal
|
if(box.h > box.w){ //portrait, stay at bottom
|
return {
|
left: 0,
|
right: 0,
|
top: titleTop,
|
bottom: 0,
|
width: 'auto',
|
height: 'auto',
|
contentHeight: box.h - titleTop - panel.titleHeight,
|
borderRadiusStyle: {
|
borderTopLeftRadius: borderRadius,
|
borderTopRightRadius: borderRadius,
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: 0
|
}
|
};
|
}else{//landscape, stay at right, half width
|
return {
|
left: box.w - box.w / 2,
|
right: 0,
|
top: 0,
|
bottom: 0,
|
width: box.w / 2,
|
height: 'auto',
|
contentHeight: box.h - titleTop - panel.titleHeight,
|
borderRadiusStyle: window.isRTL?
|
{//stay at left
|
borderTopLeftRadius: 0,
|
borderTopRightRadius: borderRadius,
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: borderRadius
|
}: {//stay at left
|
borderTopLeftRadius: borderRadius,
|
borderTopRightRadius: 0,
|
borderBottomLeftRadius: borderRadius,
|
borderBottomRightRadius: 0
|
}
|
};
|
}
|
}
|
},
|
|
_onPanelClick: function(panel){
|
this._activePanel(panel);
|
},
|
|
activatePanel: function(panel){
|
if(panel.state !== 'opened'){
|
return;
|
}
|
|
this._activePanel(panel);
|
},
|
|
_activePanel: function(panel){
|
if(this.activePanel){
|
if(this.activePanel.id === panel.id){
|
//zIndex may be reset by panel self
|
if(this.activePanel.moveTopOnActive){
|
html.setStyle(this.activePanel.domNode, 'zIndex', 101);
|
}
|
return;
|
}
|
if(this.activePanel.state === 'active'){
|
this.activePanel.setState('opened');
|
html.setStyle(this.activePanel.domNode, 'zIndex',
|
typeof this.activePanel.position.zIndex !== 'undefined'?
|
this.activePanel.position.zIndex: 'auto');
|
this.activePanel.onDeActive();
|
}
|
}
|
|
var aw = this.widgetManager.activeWidget;
|
if(aw && aw.state === 'active' && aw.getPanel() !== panel){
|
aw.setState('opened');
|
if(aw.inPanel === false){
|
html.setStyle(aw.domNode, 'zIndex',
|
typeof aw.position.zIndex !== 'undefined'? aw.position.zIndex: 'auto');
|
}
|
aw.onDeActive();
|
this.widgetManager.activeWidget = null;
|
}
|
|
this.activePanel = panel;
|
if(this.activePanel.state === 'active'){
|
return;
|
}
|
this.activePanel.setState('active');
|
if(this.activePanel.moveTopOnActive){
|
html.setStyle(this.activePanel.domNode, 'zIndex', 101);
|
}
|
this.activePanel.onActive();
|
},
|
|
_removePanel: function(panel){
|
var index = this.panels.indexOf(panel);
|
if(index > -1){
|
this.panels.splice(index, 1);
|
}
|
|
if(this.activePanel && this.activePanel.id === panel.id){
|
this.activePanel = null;
|
}
|
},
|
|
_onMoveStart: function(mover){
|
array.forEach(this.panels, function(panel){
|
if(panel.domNode === mover.node){
|
this._activePanel(panel);
|
}
|
}, this);
|
},
|
|
_onWidgetActived: function(widget){
|
if(this.activePanel &&
|
this.activePanel.state === 'active' &&
|
widget.getPanel() !== this.activePanel){
|
this.activePanel.setState('opened');
|
html.setStyle(this.activePanel.domNode, 'zIndex',
|
typeof this.activePanel.position.zIndex !== 'undefined'?
|
this.activePanel.position.zIndex: 'auto');
|
this.activePanel.onDeActive();
|
this.activePanel = null;
|
}
|
},
|
|
_loadPanelClass: function(panelUri){
|
var def = new Deferred();
|
require([panelUri], function(Panel){
|
def.resolve(Panel);
|
});
|
return def;
|
},
|
|
_loadThemeI18N: function(panelUri){
|
//panel will use theme's nls file
|
var def = new Deferred();
|
if(panelUri.startWith('themes')){
|
var segs = panelUri.split('/');
|
var nlsFile = segs[0] + '/' + segs[1] + '/nls/strings';
|
require(['dojo/i18n!' + nlsFile], function(bundle) {
|
def.resolve(bundle);
|
});
|
}else{
|
//panel is not in theme
|
def.resolve({});
|
}
|
|
return def;
|
}
|
|
});
|
|
clazz.getInstance = function () {
|
if(instance === null) {
|
instance = new clazz();
|
window._panelManager = instance;
|
}
|
return instance;
|
};
|
|
return clazz;
|
});
|
