define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/on',
|
'dojo/aspect',
|
'dojo/dom-construct',
|
'dojo/dom-geometry',
|
'dojo/dom-class',
|
'dijit/_WidgetBase',
|
'dijit/_TemplatedMixin',
|
'jimu/PanelManager',
|
'jimu/WidgetManager'
|
],
|
function(declare, lang, array, html, on, aspect,
|
domConstruct, domGeometry, domClass, _WidgetBase, _TemplatedMixin, PanelManager,
|
WidgetManager) {
|
var clazz = declare([_WidgetBase, _TemplatedMixin], {
|
baseClass: 'jimu-dnd-mobile-controller',
|
templateString: '<div>' +
|
'<div class="icon-section" data-dojo-attach-point="iconNode"></div>' +
|
'<div class="container-section" data-dojo-attach-point="containerNode"></div>' +
|
'</div>',
|
appConfig: null,
|
panelContainerNode: null,
|
openIds: null,
|
toolsCount: 0,
|
panels: null,
|
openPanelIds: null,
|
widgetOnCloseHandlerIds: null,
|
panelOnCloseHandlerIds: null,
|
|
postCreate: function() {
|
this.inherited(arguments);
|
this.panelManager = PanelManager.getInstance();
|
this.widgetManager = WidgetManager.getInstance();
|
this.openIds = [];
|
this.openPanelIds = [];
|
this.widgetOnCloseHandlerIds = [];
|
this.panelOnCloseHandlerIds = [];
|
this.panels = {};
|
this.createWidgetIcons();
|
if (this.toolsCount === 0) {
|
html.setStyle(this.domNode, 'display', 'none');
|
}
|
this.own(on(this.iconNode, 'click', lang.hitch(this, function(event) {
|
event.stopPropagation();
|
if (domClass.contains(this.containerNode, 'in')) {
|
domClass.remove(this.containerNode, 'in');
|
domClass.add(this.containerNode, 'out');
|
} else {
|
domClass.remove(this.containerNode, 'out');
|
domClass.add(this.containerNode, 'in');
|
}
|
})));
|
this.own(on(document.body, 'click', lang.hitch(this, function (event) {
|
if (domClass.contains(this.containerNode, 'in')) {
|
var target = event.target || event.srcElement;
|
if (!this.isPartOfPopup(target)) {
|
domClass.remove(this.containerNode, 'in');
|
domClass.add(this.containerNode, 'out');
|
}
|
}
|
})));
|
},
|
|
destroyOnScreenWidgets: function() {
|
array.forEach(this.appConfig.widgetOnScreen.widgets, function(widget) {
|
if (widget.inPanel) {
|
var pid = widget.id + '_panel';
|
this.panelManager.destroyPanel(pid);
|
} else {
|
this.widgetManager.destroyWidget(widget.id);
|
}
|
}, this);
|
},
|
|
isPartOfPopup: function (target) {
|
var node = this.containerNode;
|
var isInternal = target === node || html.isDescendant(target, node);
|
return isInternal;
|
},
|
|
setConfig: function(config) {
|
this.appConfig = config;
|
this.createWidgetIcons();
|
},
|
|
createWidgetIcons: function() {
|
this.toolsCount = 0;
|
domConstruct.empty(this.containerNode);
|
if (this.appConfig && this.appConfig.widgetOnScreen) {
|
array.forEach(this.appConfig.widgetOnScreen.widgets, function(widget) {
|
// widgets in placeholder
|
if (widget.uri && widget.closeable) {
|
this._addItem(widget);
|
this.toolsCount++;
|
}
|
}, this);
|
}
|
},
|
|
_pushId: function(panelId) {
|
this._popId(panelId);
|
this.openPanelIds.push(panelId);
|
},
|
|
_popId: function(panelId, update) {
|
var idx = this.openPanelIds.indexOf(panelId), activePanelId;
|
if (idx >= 0) {
|
this.openPanelIds.splice(idx, 1);
|
if (update && this.openPanelIds.length > 0) {
|
activePanelId = this.openPanelIds[this.openPanelIds.length - 1];
|
this.panelManager.openPanel(activePanelId);
|
}
|
}
|
},
|
|
_addItem: function(widget) {
|
var widgetCopy = lang.clone(widget);
|
var row = domConstruct.create('div', {
|
'class': 'row'
|
}, this.containerNode);
|
domConstruct.create('div', {
|
'class': 'widget-icon column',
|
'style': 'background: url(' + widget.icon + ') no-repeat;'
|
}, row);
|
domConstruct.create('div', {
|
'class': 'widget-label jimu-ellipsis column',
|
title: widget.label,
|
innerHTML: widget.label
|
}, row);
|
|
this.own(on(row, 'click', lang.hitch(this, function(event) {
|
var box, panelPosition;
|
event.stopPropagation();
|
if (widget.inPanel) {
|
box = domGeometry.getMarginBox(this.panelContainerNode);
|
if (window.isRTL) {
|
panelPosition = {
|
relativeTo: 'browser',
|
right: box.l,
|
top: box.t,
|
width: box.w,
|
height: box.h
|
};
|
} else {
|
panelPosition = {
|
relativeTo: 'browser',
|
left: box.l,
|
top: box.t,
|
width: box.w,
|
height: box.h
|
};
|
}
|
widgetCopy.panel = {
|
uri: 'themes/DashboardTheme/panels/OnScreenPanel/Panel',
|
position: panelPosition
|
};
|
this.panelManager.showPanel(widgetCopy)
|
.then(lang.hitch(this, function(panel) {
|
this.panels[panel.id] = panel;
|
this._pushId(panel.id);
|
panel.setPosition(panelPosition);
|
if (this.panelOnCloseHandlerIds.indexOf(panel.id) < 0) {
|
this.own(aspect.after(panel, 'onClose', lang.hitch(this, function() {
|
this._popId(panel.id, true);
|
})));
|
this.panelOnCloseHandlerIds.push(panel.id);
|
}
|
return panel;
|
}))
|
.then(lang.hitch(this, function(panel) {
|
this.panelManager.openPanel(panel);
|
}));
|
} else {
|
box = domGeometry.getMarginBox(row);
|
this._toggleOffPanelWidget(widget, box.l + box.w, box.t);
|
}
|
domClass.remove(this.containerNode, 'in');
|
domClass.add(this.containerNode, 'out');
|
})));
|
},
|
|
_toggleOffPanelWidget: function(widgetConfig, left, top) {
|
var index = this.openIds.indexOf(widgetConfig.id);
|
if (index >= 0) {
|
this.widgetManager.closeWidget(widgetConfig.id);
|
this.openIds.splice(index, 1);
|
} else {
|
this.widgetManager.loadWidget(widgetConfig).then(
|
lang.hitch(this, function(widget) {
|
this.openIds.push(widgetConfig.id);
|
|
widget.setPosition({
|
left: left,
|
top: top,
|
zIndex: 100,
|
relativeTo: 'map'
|
});
|
this.widgetManager.openWidget(widget);
|
if (this.widgetOnCloseHandlerIds.indexOf(widgetConfig.id) < 0) {
|
this.own(aspect.after(widget, 'onClose', lang.hitch(this, function() {
|
index = this.openIds.indexOf(widgetConfig.id);
|
if (index >= 0) {
|
this.openIds.splice(index, 1);
|
}
|
})));
|
this.widgetOnCloseHandlerIds.push(widgetConfig.id);
|
}
|
}));
|
}
|
},
|
|
setPanelPosition: function(pos) {
|
array.forEach(this.openPanelIds, lang.hitch(this, function(id, index) {
|
if (index === this.openPanelIds.length - 1) {
|
pos.zIndex = 101;
|
}
|
if (this.panels[id].state === 'opened' || this.panels[id].state === 'active') {
|
this.panels[id].setPosition(pos, true);
|
}
|
}));
|
}
|
});
|
return clazz;
|
});
|
