define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/topic',
|
'dojo/on',
|
'dojo/dom-construct',
|
'dojo/dom-geometry',
|
'dojo/Deferred',
|
'dojo/debounce',
|
'require',
|
'../WidgetManager',
|
'../PanelManager',
|
'../utils',
|
'../dijit/LoadingShelter',
|
'./BaseLayoutManager',
|
'./GridMobileController'
|
],
|
|
function(declare, lang, array, html, topic, on, domConstruct, domGeometry,
|
Deferred, debounce, require, WidgetManager, PanelManager,
|
utils, LoadingShelter, BaseLayoutManager, MobileController) {
|
/* global jimuConfig:true */
|
/* global $:true */
|
var instance = null, clazz;
|
var LAYOUT_TYPE_STACK = 'stack', LAYOUT_TYPE_COMPONENT = 'component';
|
var PORTRAIT_MODE = 1, LANDSCAPE_MODE = 2, DEBOUNCE_LIMIE = 200;
|
|
clazz = declare([BaseLayoutManager], {
|
isEditing: false,
|
maxStackId: 0,
|
dashboardWidgets: [],
|
dashboardPanels: {},
|
currentMode: 0,
|
_createLayoutDeferred: null,
|
_isLastLayoutMobile: false,
|
_isDestroying: false,
|
nls: null,
|
_addWidgetTipTemplate: '<div class="tip">' +
|
'<div class="idx">${groupIndex}</div>' +
|
'<div class="label">${this.nls.addWidgetTip}</div>' +
|
'</div>',
|
|
name: 'GridLayoutManager',
|
|
constructor: function(options, domId) {
|
/*jshint unused: false*/
|
this.widgetManager = WidgetManager.getInstance();
|
this.panelManager = PanelManager.getInstance();
|
|
this.widgetPlaceholders = [];
|
this.preloadWidgetIcons = [];
|
this.preloadGroupPanels = [];
|
this.invisibleWidgetIds = [];
|
|
//avoid mobileKeyboard resize
|
if (!utils.isMobileUa()) {
|
this.own(on(window, 'resize', lang.hitch(this, this.resize)));
|
} else {
|
this.own(on(window, 'orientationchange', lang.hitch(this, this.resize)));
|
}
|
|
this.id = domId;
|
this._createLayoutDeferred = null;
|
},
|
|
postMixInProperties: function() {
|
this.inherited(arguments);
|
this.nls = {};
|
lang.mixin(this.nls, window.jimuNls.gridLayout, window.jimuNls.common);
|
this._addWidgetTipTemplate =
|
this._addWidgetTipTemplate.replace('${this.nls.addWidgetTip}', this.nls.addWidgetTip);
|
},
|
|
isSupportEdit: function(){
|
return true;
|
},
|
|
postCreate: function(){
|
this.containerNode = this.domNode;
|
this._isLastLayoutMobile = window.appInfo.isRunInMobile;
|
},
|
|
layout: null,
|
map: null,
|
mapContainer: null,
|
mapId: 'map',
|
hlDiv: null,
|
|
animTime: 500,
|
|
resize: function() {
|
//resize golden layout container
|
this._resizeLayout();
|
//resize widgets. the panel's resize is called by the panel manager.
|
//widgets which is in panel is resized by panel
|
array.forEach(this.widgetManager.getAllWidgets(), function(w) {
|
if (w.inPanel === false) {
|
w.resize();
|
}
|
}, this);
|
},
|
|
setMap: function(map){
|
this.inherited(arguments);
|
this.panelManager.setMap(map);
|
},
|
|
_resizeLayout: function() {
|
if(window.appInfo.isRunInMobile){
|
var box = domGeometry.getMarginBox(window.jimuConfig.layoutId);
|
var mode;
|
if (box.w > box.h) {
|
mode = LANDSCAPE_MODE;
|
} else {
|
mode = PORTRAIT_MODE;
|
}
|
if(this.mobilePanel) {
|
if(this.currentMode !== mode){
|
this.currentMode = mode;
|
this.mobilePanel.setMobileLayout(mode);
|
}
|
this.mobilePanel.resize();
|
}
|
}
|
var container, width, height;
|
//resize golden layout container
|
if (!this.isEditing && this.layout) {
|
container = $(this.layoutContainer);
|
width = container.width();
|
height = container.height();
|
this.layout.updateSize(width, height);
|
} else if (this.isEditing && this.editingLayout) {
|
container = $(this.editLayoutDiv);
|
width = container.width();
|
height = container.height();
|
this.editingLayout.updateSize(width, height);
|
}
|
},
|
|
// Two conditions to invoke this method:
|
// 1. Map loaded or map changed.
|
// 2. Theme changed.
|
// Create and arrange widgets in this method
|
loadAndLayout: function(appConfig){
|
this.appConfig = appConfig;
|
// this.setMapPosition(appConfig.map.position);
|
var loading = new LoadingShelter(), def;
|
loading.placeAt(this.layoutId);
|
loading.startup();
|
// load dashboard grouops
|
if (this._createLayoutDeferred && !this._createLayoutDeferred.isResolved()) {
|
def = this._createLayoutDeferred;
|
} else {
|
def = new Deferred();
|
def.resolve();
|
}
|
|
def.then(lang.hitch(this, this._loadOnScreenGroups))
|
.then(lang.hitch(this, this._reArrangeWidgetsLayout, true))
|
.then(lang.hitch(this, function(){
|
if(loading){
|
loading.destroy();
|
loading = null;
|
}
|
console.timeEnd('Load widgetOnScreen');
|
topic.publish('preloadWidgetsLoaded');
|
}), lang.hitch(this, function(){
|
if(loading){
|
loading.destroy();
|
loading = null;
|
}
|
//if error when load widget, let the others continue
|
console.timeEnd('Load widgetOnScreen');
|
topic.publish('preloadWidgetsLoaded');
|
}));
|
},
|
|
createMapDiv: function(mapId){
|
if(html.byId(mapId)){
|
this.mapDiv = html.byId(mapId);
|
}else{
|
this.mapDiv = html.create('div', {
|
id: mapId,
|
style: lang.mixin({
|
position: 'absolute',
|
backgroundColor: '#EEEEEE',
|
overflow: 'hidden',
|
minWidth:'1px',
|
minHeight:'1px'
|
}, utils.getPositionStyle(this.appConfig.map.position))
|
}, this.layoutId);
|
}
|
},
|
|
getMapDiv: function() {
|
return this.mapDiv;
|
},
|
|
onThemeLoad: function() {
|
this._resizeLayout();
|
},
|
|
_enableEditing: function() {
|
if (this.isEditing) {
|
return;
|
}
|
this._createEditingLayout();
|
|
$(this.layoutContainer).addClass('hidden');
|
$(this.editContainer).removeClass('hidden');
|
$(this.modifyLayoutBtn).addClass('hidden');
|
this.isEditing = true;
|
this._resizeLayout();
|
},
|
|
_disableEditing: function() {
|
$(this.layoutContainer).removeClass('hidden');
|
$(this.editContainer).addClass('hidden');
|
$(this.modifyLayoutBtn).removeClass('hidden');
|
|
this.isEditing = false;
|
this._resizeLayout();
|
},
|
|
_resetLayoutDefinition: function() {
|
this._disableEditing();
|
this._createLayout(false, false);
|
topic.publish('editLayoutCancelled');
|
},
|
|
_saveLayoutDefinition: function() {
|
var newConfig = lang.clone(this.editingLayout.toConfig());
|
var newLayoutDefinition = lang.clone(this.appConfig.layoutDefinition);
|
this._simplifyLayoutDefinition(newConfig.content[0]);
|
this._disableEditing();
|
|
var rootElem = this.editingLayout.root.contentItems[0];
|
var stacks = rootElem.getItemsByType('stack');
|
var groupIds = [];
|
array.forEach(stacks, function(item) {
|
var isMapStack = array.some(item.contentItems, lang.hitch(this, function(contentItem) {
|
if(contentItem.isComponent && contentItem.config.componentName === 'map') {
|
return true;
|
}
|
}));
|
if (!isMapStack && /^dd_group_\d+$/.test(item.config.id)) {
|
groupIds.push(item.config.id);
|
}
|
});
|
newLayoutDefinition.layout.config.content = newConfig.content;
|
topic.publish('layoutDefinitionChanged', {
|
layoutDefinition: newLayoutDefinition,
|
groupIds: groupIds
|
});
|
},
|
|
// Remove all items of type 'component'
|
_simplifyLayoutDefinition: function(contentItem) {
|
if (contentItem.type === 'component') {
|
return;
|
} else if (contentItem.type === 'stack') {
|
var mapComponent;
|
contentItem.activeItemIndex = 0;
|
array.some(contentItem.content, lang.hitch(this, function(item) {
|
if(item.type === 'component' && item.componentName === 'map') {
|
mapComponent = item;
|
return true;
|
}
|
}));
|
if (mapComponent) {
|
contentItem.id = 'map';
|
contentItem.content = [mapComponent];
|
} else {
|
contentItem.content = [];
|
}
|
return;
|
}
|
array.forEach(contentItem.content, lang.hitch(this, function(item) {
|
this._simplifyLayoutDefinition(item);
|
}));
|
},
|
|
// Invoke this method every time a new layout is created.
|
_bindLayoutEvents: function() {
|
this.editingLayout.on( 'initialised', lang.hitch(this, function(){
|
// Make the create button as a drag source
|
this.editingLayout.createDragSource( $(this.dragCreateBtn), {
|
title: ' ',
|
type: 'component',
|
reorderEnabled: false,
|
componentName: 'widget panel'
|
});
|
// Get the max index of dashboard group panel
|
var rootElem = this.editingLayout.root.contentItems[0];
|
var stacks = rootElem.getItemsByType('stack');
|
var stackIds = [];
|
array.forEach(stacks, function(item) {
|
if (/^dd_group_\d+$/.test(item.config.id)) {
|
var idx = parseInt(item.config.id.split('_')[2], 10);
|
stackIds.push(idx);
|
}
|
});
|
if (stackIds.length > 0) {
|
stackIds = stackIds.sort(function(a, b) {
|
return a > b;
|
});
|
this.maxStackId = stackIds[stackIds.length - 1];
|
} else {
|
this.maxStackId = 0;
|
}
|
this._arrangeWidgetsInEditingLayout();
|
}));
|
this.editingLayout.on( 'stackCreated', lang.hitch(this, function(stack){
|
// Assign id to stack that has no id attribute
|
this.maxStackId++;
|
if (!stack.config.id) {
|
stack.config.id = 'dd_group_' + this.maxStackId;
|
}
|
}));
|
},
|
|
_arrangeWidgetsInEditingLayout: function() {
|
var groups = this.appConfig.widgetOnScreen.groups;
|
array.forEach(groups, lang.hitch(this, function(group){
|
var groupConfig = this.appConfig.getConfigElementById(group.id);
|
var rootElem = this.editingLayout.root.contentItems[0];
|
var result = rootElem.getItemsById(groupConfig.id), stack;
|
if (result && result.length > 0 &&
|
LAYOUT_TYPE_STACK === result[0].type) {
|
stack = result[0];
|
}
|
if (stack ) {
|
// Layout has been recreated. Each stack contains only one component.
|
array.forEach(groupConfig.widgets, lang.hitch(this, function(widget, index) {
|
var itemConfig = {
|
id: widget.id,
|
type: 'component',
|
title: widget.label,
|
reorderEnabled: false,
|
componentName: 'widget panel',
|
componentState: {
|
label: widget.label
|
}
|
};
|
if (stack.contentItems.length > index) {
|
var contentItem = stack.contentItems[index];
|
// replace the first component
|
contentItem.config.id = widget.id;
|
contentItem.setTitle(widget.label);
|
} else {
|
stack.addChild(itemConfig);
|
}
|
}));
|
}
|
}));
|
},
|
|
_createActionBar: function(container) {
|
if (!this.actionBar) {
|
this.actionBar = domConstruct.create('div', {
|
"class": 'layout-actionbar'
|
}, container);
|
|
this.dragCreateBtn = domConstruct.create('div', {
|
"class": 'jimu-btn jimu-float-leading jimu-leading-margin2 add-btn',
|
innerHTML: this.nls.dragToAdd
|
}, this.actionBar);
|
var cancelBtn = domConstruct.create('div', {
|
"class": 'jimu-btn-vacation jimu-float-trailing jimu-trailing-margin2 cancel-btn',
|
innerHTML: this.nls.cancel
|
}, this.actionBar);
|
var saveBtn = domConstruct.create('div', {
|
"class": 'jimu-btn jimu-float-trailing save-btn',
|
innerHTML: this.nls.ok
|
}, this.actionBar);
|
this.own(on(cancelBtn, 'click', lang.hitch(this, this._resetLayoutDefinition)));
|
this.own(on(saveBtn, 'click', lang.hitch(this, this._saveLayoutDefinition)));
|
}
|
},
|
|
_destroyActionBar: function() {
|
domConstruct.destroy(this.actionBar);
|
this.actionBar = null;
|
},
|
|
/**
|
* There are three types of layout:
|
* 1. Normal layout for PC to view the app
|
* 2. Mobile layout for mobile device to view the app
|
* 3. Editing layout for builder to edit the layout. Only available for PC.
|
* @param {groupsChanged} boolean Indicate whether the on screen widget groups have
|
* been changed. If true, we need to invoke this._loadOnScreenGroups() to update
|
* this.dashboardWidgets and this.dashboardPanels. If false, all widgets and panels
|
* are ready to use, just re-arrange the widget groups.
|
* @param {reloadOnScreenWidgets} boolean Whether the on screen widgets should be recreated.
|
*/
|
_createLayout: function(groupsChanged, reloadOnScreenWidgets, createLayoutOnly) {
|
// Previous createlayout operation
|
if (this._createLayoutDeferred && !this._createLayoutDeferred.isResolved()) {
|
return this._createLayoutDeferred.then(lang.hitch(this, function() {
|
return this._doCreateLayout(groupsChanged, reloadOnScreenWidgets, createLayoutOnly);
|
}));
|
} else {
|
return this._doCreateLayout(groupsChanged, reloadOnScreenWidgets, createLayoutOnly);
|
}
|
},
|
|
_doCreateLayout: function(groupsChanged, reloadOnScreenWidgets, createLayoutOnly) {
|
var createLayoutFunc, def = new Deferred();
|
this._createLayoutDeferred = new Deferred();
|
if(this.isEditing) {
|
return this._createEditingLayout();
|
}
|
if(window.appInfo.isRunInMobile) {
|
createLayoutFunc = lang.hitch(this, this._createMobileLayout);
|
} else {
|
if (this.mobileController) {
|
this.mobileController.destroyOnScreenWidgets();
|
this.mobileController.destroy();
|
this.mobileController = null;
|
}
|
createLayoutFunc = lang.hitch(this, this._createNormalLayout);
|
}
|
if(createLayoutOnly) { // map not initialized, only create layout
|
createLayoutFunc().then(lang.hitch(this, function() {
|
this._createLayoutDeferred.resolve();
|
def.resolve();
|
}));
|
} else if(groupsChanged) {
|
createLayoutFunc()
|
.then(lang.hitch(this, this._loadOnScreenGroups))
|
.then(lang.hitch(this, this._reArrangeWidgetsLayout, reloadOnScreenWidgets))
|
.then(lang.hitch(this, function() {
|
this._createLayoutDeferred.resolve();
|
def.resolve();
|
}));
|
} else {
|
createLayoutFunc()
|
.then(lang.hitch(this, this._reArrangeWidgetsLayout, reloadOnScreenWidgets))
|
.then(lang.hitch(this, function() {
|
this._createLayoutDeferred.resolve();
|
def.resolve();
|
}));
|
}
|
return def;
|
},
|
|
// detach all widget panels
|
_detachWidgets: function(contentItem) {
|
if (contentItem.type === 'stack') {
|
while (contentItem.contentItems.length > 1) {
|
contentItem.removeChild(contentItem.contentItems[0], true);
|
}
|
var lastChild = contentItem.contentItems[0];
|
contentItem.addChild({
|
type: "component",
|
componentName: "widget panel",
|
title: ' ',
|
isClosable: false
|
});
|
contentItem.removeChild(lastChild, true);
|
return;
|
}
|
array.forEach(contentItem.contentItems, lang.hitch(this, function(item) {
|
this._detachWidgets(item);
|
}));
|
},
|
|
_setupWidgets: function(contentItem, isClosable) {
|
contentItem.isClosable = isClosable;
|
if (contentItem.type === 'component') {
|
return;
|
}else if (contentItem.type === 'stack') {
|
if (contentItem.content.length === 0) {
|
contentItem.content = [{
|
type: "component",
|
componentName: "widget panel",
|
title: ' ',
|
isClosable: isClosable
|
}];
|
}
|
return;
|
}
|
array.forEach(contentItem.content, lang.hitch(this, function(item) {
|
this._setupWidgets(item);
|
}));
|
},
|
|
_onActivePanelChanged: function(contentItem) {
|
var panel;
|
if (this._isDestroying) {
|
return;
|
}
|
if (contentItem.componentName === 'widget panel') {
|
if (contentItem.config.id) {
|
panel = this.dashboardPanels[contentItem.config.id];
|
if (!panel || !panel.domNode) { // Load panel when it is first activated.
|
this._loadDashboardWidget(contentItem.config.id).then(lang.hitch(this, function(panel) {
|
if (panel) {
|
contentItem.container.getElement().html(panel.domNode);
|
contentItem.container.on('resize', debounce(lang.hitch(this, function() {
|
if (contentItem.container.width > 0 && contentItem.container.height > 0) {
|
panel.resize();
|
}
|
}), DEBOUNCE_LIMIE));
|
panel.resize();
|
this.panelManager.openPanel(panel);
|
}
|
}));
|
} else {
|
if (contentItem.container.getElement().find('.jimu-panel').length === 0) {
|
contentItem.container.getElement().html(panel.domNode);
|
contentItem.container.on('resize', debounce(lang.hitch(this, function() {
|
if (contentItem.container.width > 0 && contentItem.container.height > 0) {
|
if (panel) {
|
panel.resize();
|
}
|
}
|
}), DEBOUNCE_LIMIE));
|
}
|
panel.resize();
|
this.panelManager.openPanel(panel);
|
}
|
|
// Close all other panels
|
var groupId = contentItem.parent.config.id;
|
var groups = this.appConfig.widgetOnScreen.groups, widgets;
|
array.some(groups, lang.hitch(this, function(groupConfig) {
|
if (groupConfig.id === groupId) {
|
widgets = groupConfig.widgets;
|
return true;
|
}
|
}));
|
array.forEach(widgets, lang.hitch(this, function(widgetConfig) {
|
if(widgetConfig.id !== contentItem.config.id) {
|
panel = this.dashboardPanels[widgetConfig.id];
|
if(panel) {
|
this.panelManager.closePanel(panel);
|
}
|
}
|
}));
|
}
|
}
|
},
|
|
_createNormalLayout: function() {
|
var def = new Deferred();
|
this._isDestroying = false;
|
// recreate golden layout instance
|
if(!this.layoutContainer) {
|
this.layoutContainer = domConstruct.create('div', {
|
"class": this.appConfig.mode === 'config' ? 'jimu-dnd-layout config' : 'jimu-dnd-layout'
|
}, this.layoutId);
|
if (this.appConfig.mode === 'config') {
|
this.modifyLayoutBtn = domConstruct.create('div', {
|
"class": 'jimu-dnd-layout modify-btn',
|
innerHTML: '<div class="jimu-ellipsis"><span class="feature-action icon-edit"></span>' +
|
this.nls.modifyLayout + '</div>'
|
}, this.layoutId);
|
this.own(on(this.modifyLayoutBtn, 'click', lang.hitch(this, function(){
|
topic.publish('editLayout');
|
})));
|
}
|
}
|
array.some(this.appConfig.widgetOnScreen.widgets, function(widgetConfig) {
|
if (widgetConfig.uri === 'themes/DashboardTheme/widgets/Header/Widget') {
|
if (widgetConfig.visible) {
|
html.setStyle(this.layoutContainer, 'top', '80px');
|
} else {
|
this._removeHighLight(widgetConfig.id);
|
html.setStyle(this.layoutContainer, 'top', 0);
|
}
|
return true;
|
}
|
}, this);
|
|
var oldLayout = this.layout;
|
var config = lang.clone(this.appConfig.layoutDefinition.layout.config);
|
if (this.appConfig.mode === 'config') {
|
config.settings.reorderEnabled = false;
|
config.settings.resizeEnabled = false;
|
config.settings.enableHeaderDragging = false;
|
config.dimensions = {
|
borderWidth: 5,
|
dragProxyWidth: 0,
|
dragProxyHeight: 0
|
};
|
}
|
this._setupWidgets(config.content[0], false);
|
require(['libs/goldenlayout/goldenlayout'], lang.hitch(this, function(GodenLayout){
|
if (this.appConfig.mode === 'config') {
|
$(this.modifyLayoutBtn).removeClass('hidden');
|
}
|
this.layout = new GodenLayout(config, this.layoutContainer);
|
this.layout.registerComponent( 'widget panel', lang.hitch(this, function( container, componentState) {
|
var stack = container.parent.parent;
|
var groupId = stack.config.id, index, content;
|
if (!componentState.widgetId) {
|
content = this._addWidgetTipTemplate;
|
array.some(this.appConfig.widgetOnScreen.groups, function(groupConfig) {
|
if(groupConfig.id === groupId) {
|
if(this.appConfig.mode === 'config' && groupConfig.widgets.length === 0){
|
index = groupConfig.placeholderIndex;
|
}
|
return true;
|
}
|
}, this);
|
if(index){
|
content = content.replace('${groupIndex}', index);
|
container.getElement().html(content);
|
}
|
}
|
}));
|
this.layout.registerComponent( 'map', lang.hitch(this, function( container ){
|
container.setTitle('');
|
this.mapContainer = container.getElement();
|
$('#' + this.mapId).appendTo(this.mapContainer);
|
if (oldLayout) {
|
this._isDestroying = true;
|
this._detachWidgets(oldLayout.root.contentItems[0]);
|
oldLayout.destroy();
|
this._isDestroying = false;
|
}
|
if (this.mobilePanel) {
|
this.mobilePanel.destroy();
|
this.mobilePanel = null;
|
}
|
}));
|
this.layout.on( 'initialised', lang.hitch(this, function(){
|
var container = $(this.layoutContainer);
|
var width = container.width();
|
var height = container.height() > 0 ? container.height() : $('#' + this.layoutId).height();
|
this.layout.updateSize(width, height);
|
def.resolve();
|
}));
|
this.layout.on( 'stackCreated', lang.hitch(this, function(stack){
|
stack.on('activeContentItemChanged', lang.hitch(this, function(contentItem) {
|
this._onActivePanelChanged(contentItem);
|
}));
|
}));
|
this.layout.init();
|
}));
|
return def;
|
},
|
|
_createMobileLayout: function() {
|
var def = new Deferred();
|
if (this.modifyLayoutBtn) {
|
$(this.modifyLayoutBtn).addClass('hidden');
|
}
|
if (!this.mobilePanel) {
|
if (this.layout) {
|
this._isDestroying = true;
|
this._detachWidgets(this.layout.root.contentItems[0]);
|
this._isDestroying = false;
|
}
|
var box = domGeometry.getMarginBox(window.jimuConfig.layoutId), mobileLayout;
|
if (box.w > box.h) {
|
mobileLayout = LANDSCAPE_MODE;
|
} else {
|
mobileLayout = PORTRAIT_MODE;
|
}
|
this._loadMobilePanel(this.layoutId, mobileLayout).then(lang.hitch(this, function() {
|
if (this.layout) {
|
this.layout.destroy();
|
this.layout = null;
|
}
|
def.resolve();
|
}));
|
} else {
|
this.mobilePanel.clearPanels();
|
def.resolve();
|
}
|
return def;
|
},
|
|
_createEditingLayout: function() {
|
if(!this.editContainer) {
|
this.editContainer = domConstruct.create('div', {
|
"class": 'jimu-edit-layout hidden'
|
}, this.layoutId);
|
this._createActionBar(this.editContainer);
|
this.editLayoutDiv = domConstruct.create('div', {
|
"class": 'layout-container'
|
}, this.editContainer);
|
}
|
|
var oldLayout = this.editingLayout;
|
var config = lang.clone(this.appConfig.layoutDefinition.layout.config);
|
config.settings.enableHeaderDropping = false;
|
config.settings.reorderEnabled = false;
|
config.dimensions = {
|
borderWidth: 5,
|
dragProxyWidth: 0,
|
dragProxyHeight: 0
|
};
|
this._setupWidgets(config.content[0], true);
|
require(['libs/goldenlayout/goldenlayout'], lang.hitch(this, function(GodenLayout){
|
this.editingLayout = new GodenLayout(config, this.editLayoutDiv);
|
this.editingLayout.registerComponent( 'widget panel', lang.hitch(this, function( container){
|
container.getElement().html('');
|
}));
|
this.editingLayout.registerComponent( 'map', lang.hitch(this, function( container ){
|
container.setTitle('');
|
container.getElement().html( '<div class="maptip">' + this.nls.mapArea + '</div>' );
|
if (oldLayout) {
|
oldLayout.destroy();
|
}
|
}));
|
this._bindLayoutEvents();
|
this.editingLayout.init();
|
}));
|
},
|
|
_destroyLayout: function() {
|
$('#' + this.mapId).appendTo('#' + this.layoutId);
|
if(this.layout) {
|
this.layout.destroy();
|
this.layout = null;
|
domConstruct.destroy(this.layoutContainer);
|
this.layoutContainer = null;
|
if (this.modifyLayoutBtn) {
|
domConstruct.destroy(this.modifyLayoutBtn);
|
this.modifyLayoutBtn = null;
|
}
|
}
|
if (this.editingLayout) {
|
this._destroyActionBar();
|
this.editingLayout.destroy();
|
this.editingLayout = null;
|
domConstruct.destroy(this.editContainer);
|
this.editContainer = null;
|
}
|
},
|
|
/**
|
* before map destroy
|
* before theme change
|
*/
|
destroyOnScreenWidgetsAndGroups: function(){
|
this._destroyOnScreenWidgets();
|
// Destroy dashboard group widgets
|
this._destroyOnScreenGroups();
|
},
|
|
onActionTriggered: function(info){
|
if(window.appInfo.isRunInMobile) { // do not hanble action in mobile layout
|
return;
|
}
|
|
if (info.action === 'editLayout') {
|
this._enableEditing();
|
} else if(info.action === 'highLight'){
|
var goldenItem = this._findContentItemById(info.elementId);
|
if (goldenItem) {
|
if (goldenItem.isStack) {
|
$(goldenItem.element).addClass('highlight');
|
} else if(goldenItem.isComponent) {
|
$(goldenItem.tab.element).addClass('highlight');
|
}
|
return;
|
}
|
array.forEach(this.widgetPlaceholders, function(placehoder){
|
if(placehoder.configId === info.elementId){
|
this._highLight(placehoder);
|
}
|
}, this);
|
array.forEach(this.onScreenWidgetIcons, function(widgetIcon){
|
if (widgetIcon.configId === info.elementId){
|
this._highLight(widgetIcon);
|
}
|
}, this);
|
array.forEach(this.widgetManager.getOnScreenOffPanelWidgets(), function(panelessWidget){
|
if (panelessWidget.configId === info.elementId){
|
this._highLight(panelessWidget);
|
}
|
}, this);
|
} else if(info.action === 'removeHighLight'){
|
this._removeHighLight(info.elementId);
|
} else if(info.action === 'showLoading'){
|
html.setStyle(jimuConfig.loadingId, 'display', 'block');
|
html.setStyle(jimuConfig.mainPageId, 'display', 'none');
|
} else if(info.action === 'showApp'){
|
html.setStyle(jimuConfig.loadingId, 'display', 'none');
|
html.setStyle(jimuConfig.mainPageId, 'display', 'block');
|
}
|
},
|
|
/**
|
* Find item from the layout.
|
* type parameter is optional. Its value can be 'stack' or 'component'
|
*/
|
_findContentItemById: function(id, type) {
|
var rootElem = this.layout.root.contentItems[0];
|
var result = rootElem.getItemsById(id);
|
if (result && result.length > 0 &&
|
(!type || type === result[0].type)) {
|
return result[0];
|
}
|
return null;
|
},
|
|
_highLight: function(dijit){
|
if(!dijit.domNode){
|
//the dijit may be destroyed
|
return;
|
}
|
if (this.hlDiv){
|
this._removeHighLight(dijit);
|
}
|
var position = domGeometry.getMarginBox(dijit.domNode);
|
var hlStyle = {
|
position: 'absolute',
|
left: position.l + 'px',
|
top: position.t + 'px',
|
width: position.w + 'px',
|
height: position.h + 'px'
|
};
|
this.hlDiv = domConstruct.create('div', {
|
"style": hlStyle,
|
"class": 'icon-highlight'
|
}, dijit.domNode, 'before');
|
},
|
|
_removeHighLight: function(elementId){
|
if (/^dd_group_\d+$/.test(elementId)) { // dashboard group
|
var stack = this._findContentItemById(elementId, LAYOUT_TYPE_STACK);
|
if (stack) {
|
$(stack.element).removeClass('highlight');
|
}
|
} else if(/^widgets_\w+_\d+$/.test(elementId)) { // a specific widget
|
var component = this._findContentItemById(elementId, LAYOUT_TYPE_COMPONENT);
|
if (component) {
|
$(component.tab.element).removeClass('highlight');
|
}
|
}
|
if (this.hlDiv){
|
domConstruct.destroy(this.hlDiv);
|
this.hlDiv = null;
|
}
|
},
|
|
onEnter: function(appConfig, mapId){
|
this.appConfig = appConfig;
|
this.mapId = mapId;
|
this.isEditing = false;
|
this.createMapDiv(mapId);
|
// create layout
|
return this._createLayout(false, false, true);
|
},
|
|
onLeave: function(){
|
this._destroyLayout();
|
this.map = null;
|
},
|
|
// Widget configuration changed.
|
onWidgetChange: function(appConfig, widgetConfig){
|
this.appConfig = appConfig;
|
|
if (widgetConfig.uri === 'themes/DashboardTheme/widgets/Header/Widget') {
|
if (widgetConfig.visible) {
|
html.setStyle(this.layoutContainer, 'top', '80px');
|
} else {
|
this._removeHighLight(widgetConfig.id);
|
html.setStyle(this.layoutContainer, 'top', 0);
|
}
|
this._resizeLayout();
|
}
|
|
widgetConfig = appConfig.getConfigElementById(widgetConfig.id);
|
|
var panel = this.dashboardPanels[widgetConfig.id];
|
if (panel) {
|
panel.reloadWidget(widgetConfig);
|
var rootElem = this.layout.root.contentItems[0];
|
var result = rootElem.getItemsByType('component');
|
if (result && result.length > 0) {
|
result.forEach(function(component) {
|
if(component.config.id === widgetConfig.id &&
|
component.config.title !== widgetConfig.label) {
|
component.config.title = widgetConfig.label;
|
component.setTitle(widgetConfig.label);
|
}
|
});
|
}
|
return;
|
}
|
|
if (this.mobileController) {
|
this.mobileController.destroy();
|
this.mobileController = new MobileController({
|
appConfig: this.appConfig,
|
panelContainerNode: this.mobilePanel.widgetContainerNode
|
});
|
this.mobileController.placeAt(this.mapId);
|
}
|
|
this.onOnScreenWidgetChange(appConfig, widgetConfig);
|
},
|
|
/*
|
* Group changes. One widget is dragged from a group to another.
|
* Doesn't change the number of widgets.
|
*/
|
onOnScreenGroupsChange: function(appConfig) {
|
this.appConfig = appConfig;
|
this._createLayout(true, false);
|
},
|
|
onGroupChange: function(appConfig, groupConfig){
|
this.appConfig = appConfig;
|
groupConfig = appConfig.getConfigElementById(groupConfig.id);
|
|
if(groupConfig.isOnScreen){
|
this._createLayout(true, false);
|
}else{
|
array.forEach(this.widgetManager.getControllerWidgets(), function(controllerWidget){
|
if(controllerWidget.isControlled(groupConfig.id)){
|
this.reloadControllerWidget(appConfig, controllerWidget.id);
|
}
|
}, this);
|
|
array.forEach(this.panelManager.panels, function(panel){
|
if(panel.config.id === groupConfig.id){
|
panel.updateConfig(groupConfig);
|
}
|
}, this);
|
// TODO if in mobile layout, group change will affect the MobileController
|
}
|
},
|
|
_reArrangeWidgetsLayout: function(reloadOnScreenWidgets) {
|
// destroy all onscreen widgets
|
if (reloadOnScreenWidgets) {
|
this._destroyOnScreenWidgets();
|
}
|
if(window.appInfo.isRunInMobile) {
|
// recreate onscreen widgets according to mobile layout config
|
if (reloadOnScreenWidgets) {
|
this._loadMobileOnScreenWidgets();
|
}
|
this.mobilePanel.setPanels(this.dashboardWidgets, this.dashboardPanels);
|
} else {
|
if (reloadOnScreenWidgets) {
|
this.loadOnScreenWidgets(this.appConfig);
|
}
|
this._reArrangeWidgetsInDesktopLayout();
|
}
|
},
|
|
_reArrangeWidgetsInDesktopLayout: function() {
|
var groups = this.appConfig.widgetOnScreen.groups;
|
|
array.forEach(groups, lang.hitch(this, function(group){
|
var groupConfig = this.appConfig.getConfigElementById(group.id);
|
var stack = this._findContentItemById(groupConfig.id, LAYOUT_TYPE_STACK);
|
if (stack ) {
|
// Layout has been recreated. Each stack contains only one component.
|
array.forEach(groupConfig.widgets, lang.hitch(this, function(widget, index) {
|
var itemConfig = {
|
id: widget.id,
|
type: 'component',
|
title: widget.label,
|
componentName: 'widget panel',
|
componentState: {
|
widgetId: widget.id
|
}
|
};
|
if (stack.contentItems.length > index) {
|
var contentItem = stack.contentItems[index];
|
// replace the first component
|
contentItem.config.id = widget.id;
|
contentItem.config.title = widget.label;
|
contentItem.config.componentState = {
|
widgetId: widget.id
|
};
|
contentItem.setTitle(widget.label);
|
stack.setActiveContentItem(contentItem);
|
} else {
|
stack.addChild(itemConfig);
|
}
|
}));
|
}
|
}));
|
},
|
|
_loadMobileOnScreenWidgets: function() {
|
// in panel widgets
|
this.mobileController = new MobileController({
|
appConfig: this.appConfig,
|
panelContainerNode: this.mobilePanel.widgetContainerNode
|
});
|
this.mobileController.placeAt(this.mapId);
|
|
// onscreen widgets not in placeholder
|
array.forEach(this.appConfig.widgetOnScreen.widgets, function(widget) {
|
if (widget.uri && widget.visible && !widget.closeable) {
|
this.loadOnScreenWidget(widget, this.appConfig);
|
}
|
}, this);
|
},
|
|
_loadMobilePanel: function(container, mobileLayout) {
|
var panelConfig = this.appConfig.layoutDefinition.mobileLayout.panel,
|
def = new Deferred();
|
require([panelConfig.uri], lang.hitch(this, function(Panel){
|
var options = {
|
layoutId: this.layoutId,
|
mapId: this.mapId,
|
mobileLayout: mobileLayout,
|
config: {},
|
layoutManager: this
|
};
|
|
this.mobilePanel = new Panel(options);
|
this.own(on(this.mobilePanel, 'resized', debounce(lang.hitch(this, function(pos) {
|
if (this.mobileController) {
|
this.mobileController.setPanelPosition(pos);
|
}
|
}), DEBOUNCE_LIMIE)));
|
domConstruct.place(this.mobilePanel.domNode, container);
|
def.resolve();
|
}));
|
return def;
|
},
|
|
// return the widget contained in specified panel
|
_loadDashboardWidget: function(widgetId) {
|
var def = new Deferred(), panel = this.dashboardPanels[widgetId];
|
if (panel && panel.domNode) {
|
def.resolve(this.dashboardPanels[widgetId]);
|
return def;
|
}
|
var groups = this.appConfig.widgetOnScreen.groups, widgetConfig;
|
array.some(groups, lang.hitch(this, function(groupConfig) {
|
return array.some(groupConfig.widgets, lang.hitch(this, function(widget) {
|
if (widget.id === widgetId) {
|
widgetConfig = widget;
|
return true;
|
}
|
}));
|
}));
|
if (!widgetConfig) {
|
def.resolve(null);
|
return def;
|
}
|
var panelConfig = this.appConfig.layoutDefinition.layout.panel;
|
require([panelConfig.uri], lang.hitch(this, function(Panel){
|
var options = {
|
config: widgetConfig,
|
uri: panelConfig.uri,
|
map: this.map,
|
widgetManager: this.widgetManager,
|
panelManager: this.panelManager,
|
id: widgetId + '_panel',
|
position: {}
|
}, panel;
|
lang.mixin(options, widgetConfig.options);
|
|
try{
|
panel = new Panel(options);
|
this.dashboardPanels[widgetId] = panel;
|
def.resolve(panel);
|
console.log('panel [' + options.id + '] created.');
|
}catch(error){
|
console.log('create panel error: ' + error + ', panelId: ' + options.id);
|
def.reject(error);
|
return;
|
}
|
}));
|
return def;
|
},
|
|
onLayoutDefinitionChange: function(appConfig){
|
this.appConfig = appConfig;
|
this._createLayout(false, false);
|
},
|
|
onLayoutChange: function(appConfig){
|
var isMobile = window.appInfo.isRunInMobile, reload = false;
|
|
if(this.isEditing) { // Do not response layout change when editing layout
|
return;
|
}
|
|
if (isMobile !== this._isLastLayoutMobile) {
|
reload = true;
|
this._isLastLayoutMobile = isMobile;
|
}
|
this.appConfig = appConfig;
|
// group and widgets not changed. But if switch between mobile and desktop layout,
|
// we should recreate onscreen widget.
|
this._createLayout(false, reload).then(lang.hitch(this, function() {
|
//relayout placehoder
|
array.forEach(this.widgetPlaceholders, function(placeholder){
|
placeholder.moveTo(appConfig.getConfigElementById(placeholder.configId).position);
|
}, this);
|
|
//relayout icons
|
array.forEach(this.onScreenWidgetIcons, function(icon){
|
icon.moveTo(appConfig.getConfigElementById(icon.configId).position);
|
}, this);
|
|
//relayout paneless widget
|
array.forEach(this.widgetManager.getOnScreenOffPanelWidgets(), function(widget){
|
if(widget.closeable){
|
//this widget position is controlled by icon
|
return;
|
}
|
var position = appConfig.getConfigElementById(widget.id).position;
|
widget.setPosition(position);
|
}, this);
|
}));
|
},
|
|
openWidget: function(widgetId){
|
var contentItem, parent;
|
//check on screen widgets, we don't check not-closeable off-panel widget
|
array.forEach(this.onScreenWidgetIcons, function(widgetIcon){
|
if(widgetIcon.configId === widgetId){
|
widgetIcon.switchToOpen();
|
}
|
}, this);
|
//check grid items
|
contentItem = this._findContentItemById(widgetId, LAYOUT_TYPE_COMPONENT);
|
if(contentItem) {
|
parent = contentItem.parent;
|
if (parent && parent.isStack) {
|
parent.setActiveContentItem(contentItem);
|
}
|
}
|
},
|
|
_loadOnScreenGroups: function() {
|
// Update widgets in golden layout, remove unused widgets
|
var groups = this.appConfig.widgetOnScreen.groups;
|
var widgetIds = [], def = new Deferred();
|
|
array.forEach(groups, lang.hitch(this, function(group){
|
var groupConfig = this.appConfig.getConfigElementById(group.id);
|
array.forEach(groupConfig.widgets, function(widget) {
|
widgetIds.push(widget.id);
|
});
|
}));
|
array.forEach(this.dashboardWidgets, lang.hitch(this, function(widgetId) {
|
if (widgetIds.indexOf(widgetId) < 0) { // not in current groups
|
var panel = this.dashboardPanels[widgetId];
|
if (panel) {
|
this.panelManager.closePanel(panel);
|
panel.destroy();
|
}
|
this.dashboardPanels[widgetId] = null;
|
}
|
}));
|
this.dashboardWidgets = widgetIds;
|
|
def.resolve();
|
return def;
|
},
|
|
_destroyOnScreenWidgets: function() {
|
this.destroyOnScreenOffPanelWidgets();
|
this.destroyWidgetPlaceholders();
|
this.destroyOnScreenWidgetIcons();
|
if (this.mobileController) {
|
this.mobileController.destroy();
|
this.mobileController = null;
|
}
|
},
|
|
_destroyOnScreenGroups: function() {
|
array.forEach(this.dashboardWidgets, lang.hitch(this, function(widgetId){
|
var panel = this.dashboardPanels[widgetId];
|
if (panel) {
|
this.panelManager.closePanel(panel);
|
panel.destroy();
|
panel = null;
|
}
|
}));
|
this.panelManager.destroyAllPanels();
|
this.dashboardWidgets = [];
|
this.dashboardPanels = {};
|
if (this.mobilePanel) {
|
this.mobilePanel.clearPanels();
|
}
|
}
|
});
|
|
clazz.getInstance = function(options, domId) {
|
if (instance === null) {
|
instance = new clazz(options, domId);
|
window._layoutManager = instance;
|
}
|
return instance;
|
};
|
return clazz;
|
});
|
