define(['dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/topic',
|
'dijit/_TemplatedMixin',
|
'dojo/text!./Panel.html',
|
'jimu/BaseWidgetPanel',
|
'jimu/dijit/LoadingIndicator',
|
'jimu/utils',
|
'require'
|
],
|
function(
|
declare, lang, html, topic,
|
_TemplatedMixin, template, BaseWidgetPanel, LoadingIndicator, utils, require
|
) {
|
|
return declare([BaseWidgetPanel, _TemplatedMixin], {
|
baseClass: 'jimu-panel jimu-dockable-panel',
|
|
templateString: template,
|
|
//displayNumber: number
|
// the max number of widgets that the panel display at the same time.
|
// Each widget will occupy 1/displayNumber of the panel widget/height.
|
// If the widgets count is larger then this number,
|
// there will be a navigation bar displayed to scroll the widget.
|
displayNumber: 3,
|
|
//firstIndex: number
|
// the first displayed widget index
|
firstIndex: 0,
|
|
//region: String
|
// can be: left, right, bottom, top.
|
region: '',
|
|
//resizeMap: Boolean
|
// if true, when resize the panel,
|
// the panel will resize map to make sure the panel will not override the map.
|
// Please note that when the panel resize the map,
|
// make sure that there is no other element between the panel and the map
|
resizeMap: true,
|
|
_barSize: 30,
|
_margin: 15,
|
_navSize: 25,
|
_padding: 15,
|
|
postCreate: function() {
|
},
|
|
startup: function() {
|
html.setStyle(this.domNode, utils.getPositionStyle(this.position));
|
this.loadDisplayWidgets();
|
this._setPanelPadding();
|
this._setBarPosition();
|
this._setNavPosition();
|
this.resize();
|
this._switchNavStatus();
|
this.panelManager.normalizePanel(this);
|
},
|
|
resize: function() {
|
this._setFrameSize();
|
},
|
|
_setFrameSize: function() {
|
var count = Math.min(this.displayNumber, this._getConfigs().length);
|
if (count === 0) {
|
return;
|
}
|
var dim = {},
|
box = html.getContentBox(this.containerNode);
|
if (this.region === 'left' || this.region === 'right') {
|
dim.width = '100%';
|
dim.height = (box.h - count * this._margin) / count + 'px';
|
dim.marginTop = this._margin + 'px';
|
} else if (this.region === 'top' || this.region === 'bottom') {
|
dim.height = '100%';
|
dim.width = (box.w - count * this._margin) / count + 'px';
|
dim.marginLeft = this._margin + 'px';
|
}
|
|
this.getChildren().forEach(lang.hitch(this, function(frame) {
|
html.setStyle(frame.domNode, dim);
|
frame.resize();
|
}));
|
},
|
|
loadDisplayWidgets: function() {
|
var configs = this._getConfigs();
|
|
function onWidgetLoaded(frame, loading, widget) {
|
loading.destroy();
|
frame.setWidget(widget);
|
widget.startup();
|
// if(widgetConfig.defaultState){
|
// this.widgetManager.changeWindowStateTo(widget, widgetConfig.defaultState);
|
// }
|
}
|
|
var endIndex = this._getEndIndex();
|
for (var i = this.firstIndex; i < endIndex; i++) {
|
var widgetConfig = configs[i];
|
var frame, loading;
|
|
if (this.widgetManager.getWidgetById(widgetConfig.id)) {
|
continue;
|
}
|
loading = new LoadingIndicator();
|
frame = this.createFrame(widgetConfig);
|
this.addChild(frame);
|
html.place(loading.domNode, frame.containerNode);
|
|
this.widgetManager.loadWidget(widgetConfig)
|
.then(lang.hitch(this, onWidgetLoaded, frame, loading));
|
}
|
this._setFrameFloat();
|
this._setFrameSize();
|
},
|
|
onNormalize: function() {
|
html.addClass(this.barNode, 'max');
|
html.removeClass(this.barNode, 'min');
|
|
this._setBarPosition();
|
|
if (this.region === 'left') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_left.png)'
|
});
|
html.setStyle(this.domNode, {
|
left: 0,
|
width: this.position.width + 'px'
|
});
|
|
html.setStyle(this.barNode, {
|
borderTopLeftRadius: 0,
|
borderTopRightRadius: '4px',
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: '4px'
|
});
|
|
} else if (this.region === 'right') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_right.png)'
|
});
|
html.setStyle(this.domNode, {
|
right: 0,
|
width: this.position.width + 'px'
|
});
|
|
html.setStyle(this.barNode, {
|
borderTopLeftRadius: '4px',
|
borderTopRightRadius: 0,
|
borderBottomLeftRadius: '4px',
|
borderBottomRightRadius: 0
|
});
|
} else if (this.region === 'top') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_up.png)'
|
});
|
html.setStyle(this.domNode, {
|
top: 0,
|
height: this.position.height + 'px'
|
});
|
|
html.setStyle(this.barNode, {
|
borderTopLeftRadius: 0,
|
borderTopRightRadius: 0,
|
borderBottomLeftRadius: '4px',
|
borderBottomRightRadius: '4px'
|
});
|
} else if (this.region === 'bottom') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_down.png)'
|
});
|
html.setStyle(this.domNode, {
|
bottom: 0,
|
height: this.position.height + 'px'
|
});
|
|
html.setStyle(this.barNode, {
|
borderTopLeftRadius: '4px',
|
borderTopRightRadius: '4px',
|
borderBottomLeftRadius: 0,
|
borderBottomRightRadius: 0
|
});
|
}
|
this.inherited(arguments);
|
},
|
|
onMinimize: function() {
|
html.setStyle(this.barNode, {
|
borderTopLeftRadius: '4px',
|
borderTopRightRadius: '4px',
|
borderBottomLeftRadius: '4px',
|
borderBottomRightRadius: '4px'
|
});
|
|
html.removeClass(this.barNode, 'max');
|
html.addClass(this.barNode, 'min');
|
this._setBarPosition();
|
|
//on minimize, we can't set width/height = 0 to minimize because we use border-box model
|
//and the content height/width can't be nagative
|
//go here for more information: http://dev.w3.org/csswg/css-ui/#box-sizing
|
if (this.region === 'left') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_right.png)'
|
});
|
html.setStyle(this.domNode, {
|
left: (0 - this.position.width) + 'px',
|
right: 'auto'
|
});
|
} else if (this.region === 'right') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_left.png)'
|
});
|
html.setStyle(this.domNode, {
|
right: (0 - this.position.width) + 'px',
|
left: 'auto'
|
});
|
} else if (this.region === 'top') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_down.png)'
|
});
|
html.setStyle(this.domNode, {
|
top: (0 - this.position.height) + 'px',
|
bottom: 'auto'
|
});
|
} else if (this.region === 'bottom') {
|
html.setStyle(this.barNode, {
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/bar_up.png)'
|
});
|
html.setStyle(this.domNode, {
|
bottom: (0 - this.position.height) + 'px',
|
top: 'auto'
|
});
|
}
|
this.inherited(arguments);
|
},
|
|
scrollWidget: function() {
|
var endIndex = this._getEndIndex();
|
this.getChildren().forEach(lang.hitch(this, function(frame, i) {
|
if (i >= this.firstIndex && i < endIndex) {
|
html.setStyle(frame.domNode, 'display', '');
|
} else {
|
html.setStyle(frame.domNode, 'display', 'none');
|
}
|
}));
|
},
|
|
_onBarClick: function() {
|
var mapPosition = {};
|
if (this.windowState === 'normal') {
|
this.panelManager.minimizePanel(this);
|
|
if (this.resizeMap) {
|
if (this.region === 'left') {
|
mapPosition.left = 0;
|
} else if (this.region === 'right') {
|
mapPosition.right = 0;
|
} else if (this.region === 'top') {
|
mapPosition.top = 0;
|
} else if (this.region === 'bottom') {
|
mapPosition.bottom = 0;
|
}
|
|
topic.publish('changeMapPosition', mapPosition);
|
}
|
|
} else {
|
this.panelManager.normalizePanel(this);
|
|
if (this.resizeMap) {
|
if (this.region === 'left') {
|
mapPosition.left = this.position.width;
|
} else if (this.region === 'right') {
|
mapPosition.right = this.position.width;
|
} else if (this.region === 'top') {
|
mapPosition.top = this.position.height;
|
} else if (this.region === 'bottom') {
|
mapPosition.bottom = this.position.height;
|
}
|
topic.publish('changeMapPosition', mapPosition);
|
}
|
}
|
},
|
|
_onPreClick: function() {
|
if (this.firstIndex === 0) {
|
return;
|
}
|
this.firstIndex = this.firstIndex - 1;
|
this.loadDisplayWidgets();
|
this.scrollWidget();
|
this._switchNavStatus();
|
},
|
|
_onNextClick: function() {
|
if (this.firstIndex + this.displayNumber >= this._getConfigs().length) {
|
return;
|
}
|
this.firstIndex = this.firstIndex + 1;
|
this.loadDisplayWidgets();
|
this.scrollWidget();
|
this._switchNavStatus();
|
},
|
|
_switchNavStatus: function() {
|
if (this.firstIndex === 0) {
|
html.setStyle(this.preNode, 'opacity', '0.4');
|
} else {
|
html.setStyle(this.preNode, 'opacity', '1');
|
}
|
|
if (this.firstIndex + this.displayNumber >= this._getConfigs().length) {
|
html.setStyle(this.nextNode, 'opacity', '0.4');
|
} else {
|
html.setStyle(this.nextNode, 'opacity', '1');
|
}
|
},
|
|
_getEndIndex: function() {
|
var configs = this._getConfigs();
|
var endIndex = Math.min(this.firstIndex + this.displayNumber, configs.length);
|
return endIndex;
|
},
|
|
_setBarPosition: function() {
|
html.setStyle(this.barNode, {
|
position: 'absolute',
|
width: this._barSize + 'px',
|
height: this._barSize + 'px'
|
});
|
|
var pos = this.windowState === 'normal' ?
|
(0 - this._barSize) + 'px' : (0 - this._barSize - 2) + 'px';
|
if (this.region === 'left') {
|
html.setStyle(this.barNode, {
|
top: '10px',
|
right: pos
|
});
|
} else if (this.region === 'right') {
|
html.setStyle(this.barNode, {
|
top: '10px',
|
left: pos
|
});
|
} else if (this.region === 'top') {
|
html.setStyle(this.barNode, {
|
left: '10px',
|
bottom: pos
|
});
|
} else if (this.region === 'bottom') {
|
html.setStyle(this.barNode, {
|
left: '10px',
|
top: pos
|
});
|
}
|
},
|
|
_setNavPosition: function() {
|
var box = html.getMarginBox(this.domNode);
|
|
html.setStyle(this.preNode, {
|
position: 'absolute'
|
});
|
html.setStyle(this.nextNode, {
|
position: 'absolute'
|
});
|
|
if (this.region === 'left' || this.region === 'right') {
|
html.setStyle(this.preNode, {
|
top: '10px',
|
left: (box.w / 2) + 'px',
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/nav_up.png)'
|
});
|
|
html.setStyle(this.nextNode, {
|
bottom: '10px',
|
left: (box.w / 2) + 'px',
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/nav_down.png)'
|
});
|
} else if (this.region === 'top' || this.region === 'bottom') {
|
html.setStyle(this.preNode, {
|
left: '10px',
|
top: (box.h / 2) + 'px',
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/nav_left.png)'
|
});
|
|
html.setStyle(this.nextNode, {
|
right: '10px',
|
top: (box.h / 2) + 'px',
|
backgroundImage: 'url(' + require.toUrl('.') + '/images/nav_right.png)'
|
});
|
}
|
},
|
|
_setFrameFloat: function() {
|
if (this.region === 'top' || this.region === 'bottom') {
|
this.getChildren().forEach(function(frame) {
|
html.setStyle(frame.domNode, 'float', 'left');
|
});
|
}
|
},
|
|
_setPanelPadding: function() {
|
if (this.region === 'left' || this.region === 'right') {
|
//padding top is less then padding bottom, because the first element has margin
|
html.setStyle(this.domNode, {
|
paddingTop: (this._navSize + this._padding - this._margin) + 'px',
|
paddingRight: this._padding + 'px',
|
paddingBottom: (this._navSize + this._padding) + 'px',
|
paddingLeft: this._padding + 'px'
|
});
|
} else if (this.region === 'top' || this.region === 'bottom') {
|
html.setStyle(this.domNode, {
|
paddingTop: this._padding + 'px',
|
paddingRight: (this._navSize + this._padding) + 'px',
|
paddingBottom: this._padding + 'px',
|
paddingLeft: (this._navSize + this._padding - this._margin) + 'px'
|
});
|
}
|
},
|
|
_getConfigs: function() {
|
var configs = [];
|
if (Array.isArray(this.config.widgets)) {
|
//it's group
|
configs = this.config.widgets;
|
} else {
|
configs = [this.config];
|
}
|
return configs;
|
}
|
});
|
});
|
