define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/aspect',
|
'dojo/query',
|
'dojo/on',
|
'dojo/Deferred',
|
'dojo/mouse',
|
'dojo/topic',
|
'dojo/dom-construct',
|
'dojo/dom-geometry',
|
'jimu/BaseWidget',
|
'jimu/PoolControllerMixin',
|
'jimu/utils',
|
'jimu/dijit/Message',
|
'./PopupTileNodes',
|
'dijit/registry',
|
'dojo/NodeList-manipulate'
|
],
|
function (declare, lang, array, html, aspect, query, on, Deferred, mouse, topic,
|
domConstruct, domGeometry, BaseWidget, PoolControllerMixin,
|
utils, Message, PopupTileNodes, registry) {
|
/* global jimuConfig */
|
/* jshint scripturl:true */
|
var clazz = declare([BaseWidget, PoolControllerMixin], {
|
|
baseClass: 'jimu-widget-header-controller jimu-main-background',
|
|
maxIconCount: -1,
|
|
//whether need to create more icon
|
createMoreIcon: false,
|
|
//title, links are switchable depends the browser width
|
switchableElements: {},
|
|
//the default height of the widget
|
height: 40,
|
|
//the opened group/widget's id
|
openedId: '',
|
|
moveTopOnActive: false,
|
|
postCreate: function () {
|
this.inherited(arguments);
|
|
this._processGroupSetting();
|
|
this.switchableElements.title = this.titleNode;
|
|
if (this.position && this.position.height) {
|
this.height = this.position.height;
|
}
|
|
html.setStyle(this.signInSectionNode, 'display', 'none');
|
|
if (this.appConfig && this.appConfig.logo) {
|
this.logoNode.src = this.appConfig.logo;
|
html.removeClass(this.logoNode, 'hide-logo');
|
} else {
|
this.logoNode.src = "";
|
html.addClass(this.logoNode, 'hide-logo');
|
}
|
// If app title is not null then sanitize the title text
|
if (this.appConfig.title) {
|
this.appConfig.title = utils.sanitizeHTML(this.appConfig.title);
|
}
|
// If app title is not null then sanitize the subtitle text
|
if (this.appConfig.subtitle) {
|
this.appConfig.subtitle = utils.sanitizeHTML(this.appConfig.subtitle);
|
}
|
|
this.switchableElements.title.innerHTML = this.appConfig.title ? this.appConfig
|
.title : '';
|
this.switchableElements.title.title = this.appConfig.title ? this.appConfig
|
.title : '';
|
//If subtitle is valid them only add it to switchable elements and set its innerHTML
|
//else empty the subtitle and don't add it in switchable elements
|
if (this.appConfig.subtitle && lang.trim(this.appConfig.subtitle) !== "") {
|
this.switchableElements.subtitle = this.subtitleNode;
|
this.switchableElements.subtitle.innerHTML = this.appConfig.subtitle;
|
} else {
|
this.subtitleNode.innerHTML = '';
|
html.setStyle(this.subtitleNode, 'display', 'none');
|
}
|
//creates links according to configuration
|
this._createDynamicLinks(this.appConfig.links);
|
|
this._setElementsSize();
|
|
this._handleLogoLink(this.appConfig);
|
},
|
|
startup: function () {
|
this.inherited(arguments);
|
this.resize();
|
},
|
|
onAction: function (action, data) {
|
/*jshint unused: false*/
|
if (action === 'highLight' && data) {
|
var node = query('div[settingid="' + data.widgetId + '"]', this.domNode)[0];
|
this._highLight(node);
|
}
|
if (action === 'removeHighLight') {
|
this._removeHighLight();
|
}
|
},
|
|
onSignIn: function (credential) {
|
this.inherited(arguments);
|
|
html.setStyle(this.signinLinkNode, 'display', 'none');
|
html.setStyle(this.userNameLinkNode, 'display', '');
|
html.setStyle(this.signoutLinkNode, 'display', '');
|
|
this.userNameLinkNode.innerHTML = credential.userId;
|
html.setAttr(this.userNameLinkNode, 'href', this.appConfig.portalUrl + 'home/user.html');
|
|
//popup
|
if (this.popupLinkNode) {
|
html.setStyle(this.popupSigninNode, 'display', 'none');
|
html.setStyle(this.popupUserNameNode, 'display', '');
|
html.setStyle(this.popupSignoutNode, 'display', '');
|
|
query('a', this.popupUserNameNode).html(credential.userId)
|
.attr('href', this.appConfig.portalUrl + 'home/user.html');
|
}
|
this.resize();
|
},
|
|
onSignOut: function () {
|
this.inherited(arguments);
|
|
},
|
|
_onSignOut: function (signInTip) {
|
html.setStyle(this.signinLinkNode, 'display', '');
|
html.setAttr(this.signinLinkNode, 'innerHTML', signInTip);
|
html.setStyle(this.userNameLinkNode, 'display', 'none');
|
html.setStyle(this.signoutLinkNode, 'display', 'none');
|
|
this.userNameLinkNode.innerHTML = '';
|
|
//popup
|
if (this.popupLinkNode) {
|
html.setStyle(this.popupSigninNode, 'display', '');
|
html.setAttr(this.popupSigninNode, 'innerHTML', signInTip);
|
html.setStyle(this.popupUserNameNode, 'display', 'none');
|
html.setStyle(this.popupSignoutNode, 'display', 'none');
|
|
query('a', this.popupUserNameNode).html('');
|
}
|
|
this.resize();
|
},
|
|
resize: function () {
|
var attributeTableHeight = 0;
|
var headerNodeFloat = html.getStyle(this.headerNode, 'float');
|
var logoNodeFloat = html.getStyle(this.logoNode, 'float');
|
var titlesNodeFloat = html.getStyle(this.titlesNode, 'float');
|
var linksNodeFloat = html.getStyle(this.linksNode, 'float');
|
var allHasFloatStyle = (headerNodeFloat && headerNodeFloat !== 'none') &&
|
(logoNodeFloat && logoNodeFloat !== 'none') &&
|
(titlesNodeFloat && titlesNodeFloat !== 'none') &&
|
(linksNodeFloat && linksNodeFloat !== 'none');
|
|
if (allHasFloatStyle) {
|
this._resize();
|
} else {
|
setTimeout(lang.hitch(this, this.resize), 200);
|
}
|
|
if (query(".jimu-widget-attributetable")[0]) {
|
attributeTableHeight = query(".jimu-widget-attributetable")[0].clientHeight;
|
}
|
if (attributeTableHeight) {
|
topic.publish('changeMapPosition', {
|
bottom: attributeTableHeight
|
});
|
} else {
|
topic.publish('changeMapPosition', {
|
bottom: "0px"
|
});
|
}
|
},
|
|
_resize: function () {
|
var box = html.getContentBox(this.domNode);
|
|
//by default, we show all elements
|
this._showSwitchableElements(['title', 'links', 'subtitle']);
|
//as after showing all the elements title width may changed so update its width to fit other elements
|
this._updateTitleNodeWidth();
|
this._getTitleContainerWidth(box);
|
this._createIconNodes(box);
|
//again after changing/creating icon nodes title width may change so update its width to fit other elements
|
this._updateTitleNodeWidth();
|
if (this.morePane) {
|
this.morePane.resize();
|
}
|
if (this.popupLinkNode) {
|
html.setStyle(jimuConfig.layoutId, {
|
left: html.getContentBox(this.popupLinkNode).w + 'px'
|
});
|
}
|
},
|
|
//Calculates and sets the Title Node Width
|
_updateTitleNodeWidth: function () {
|
var box, maxWidth, spaceLeft, containerWidth;
|
box = html.getContentBox(this.domNode);
|
//get complete header container width
|
containerWidth = this._getHeaderContainerWidth(box);
|
//calculate the available left space
|
spaceLeft = containerWidth - this._getLogoWidth() - this._getTitlesWidth() -
|
this._getSubtitleWidth() - this._getLinkWidth();
|
//set the max width of the title by adding left space also extra 40px considering margins
|
maxWidth = this._getTitlesWidth() + spaceLeft + 40;
|
//if subtitle is not available increase the title's width by 20
|
if (html.getStyle(this.subtitleNode, 'display') === "none") {
|
maxWidth += 20;
|
//if links are not available increase the title's width by 20
|
if (html.getStyle(this.linksNode, 'display') === "none") {
|
maxWidth += 20;
|
}
|
}
|
//if calculated maxWidth is less tha 150 set max width as 15 else set the calculated max width
|
if (maxWidth < 150) {
|
html.setStyle(this.titleNode, 'max-width', '150px');
|
} else {
|
html.setStyle(this.titleNode, 'max-width', maxWidth + 'px');
|
}
|
},
|
|
destroy: function () {
|
if (this.timeoutHandle) {
|
clearTimeout(this.timeoutHandle);
|
this.timeoutHandle = null;
|
}
|
if (this.morePane) {
|
this.morePane.destroy();
|
}
|
if (this.moreIconPaneCoverNode) {
|
html.destroy(this.moreIconPaneCoverNode);
|
this.moreIconPaneCoverNode = null;
|
}
|
if (this.popupLinkNode && this.popupLinksVisible) {
|
this._hidePopupLink();
|
}
|
html.destroy(this.popupLinkNode);
|
this.inherited(arguments);
|
},
|
|
onAppConfigChanged: function (appConfig, reason, changedData) {
|
switch (reason) {
|
case 'attributeChange':
|
this._onAttributeChange(appConfig, changedData);
|
break;
|
default:
|
return;
|
}
|
this.appConfig = appConfig;
|
this.resize();
|
},
|
|
getOpenedIds: function () {
|
this.inherited(arguments);
|
if (this.openedId === '') {
|
return [];
|
}
|
return [this.openedId];
|
},
|
|
setOpenedIds: function (ids) {
|
if (ids.length === 0) {
|
return;
|
}
|
var config = this.getConfigById(ids[0]);
|
if (!config) {
|
return;
|
}
|
this.openedId = ids[0];
|
if (config.widgets && config.openType === 'openAll') {
|
this._showIconContent(config);
|
} else if (!config.widgets) {
|
this._showIconContent(config);
|
}
|
},
|
|
_onLogoLoad: function () {
|
this.resize();
|
},
|
|
_highLight: function (node) {
|
if (this.hlDiv) {
|
this._removeHighLight();
|
}
|
if (!node) {
|
return;
|
}
|
var position = domGeometry.getMarginBox(node);
|
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'
|
}, node, 'before');
|
},
|
|
_removeHighLight: function () {
|
if (this.hlDiv) {
|
domConstruct.destroy(this.hlDiv);
|
this.hlDiv = null;
|
}
|
},
|
|
|
_onAttributeChange: function (appConfig, changedData) {
|
/*jshint unused: false*/
|
var appTitle;
|
if ('title' in changedData && changedData.title !== this.appConfig.title) {
|
appTitle = utils.sanitizeHTML(changedData.title);
|
this.titleNode.innerHTML = appTitle;
|
this.titleNode.title = appTitle;
|
}
|
if ('subtitle' in changedData && changedData.subtitle !== this.appConfig.subtitle) {
|
this.subtitleNode.innerHTML = utils.sanitizeHTML(changedData.subtitle);
|
}
|
if ('logo' in changedData && changedData.logo !== this.appConfig.logo) {
|
if (changedData.logo) {
|
html.setAttr(this.logoNode, 'src', changedData.logo);
|
html.removeClass(this.logoNode, 'hide-logo');
|
} else {
|
html.removeAttr(this.logoNode, 'src');
|
html.addClass(this.logoNode, 'hide-logo');
|
}
|
}
|
|
if ('links' in changedData) {
|
this._createDynamicLinks(changedData.links);
|
}
|
this._handleLogoLink(appConfig);
|
},
|
|
_handleLogoLink: function(appConfig){
|
if(appConfig.logoLink){
|
html.setAttr(this.logoLinkNode, 'href', appConfig.logoLink);
|
html.setStyle(this.logoNode, 'cursor', 'pointer');
|
}else{
|
html.setAttr(this.logoLinkNode, 'href', 'javascript:void(0)');
|
html.setStyle(this.logoNode, 'cursor', 'default');
|
}
|
},
|
|
_setElementsSize: function () {
|
html.setStyle(this.logoNode, {
|
height: '30px',
|
marginTop: ((this.height - 30) / 2) + 'px'
|
});
|
|
html.setStyle(this.titleNode, {
|
lineHeight: this.height + 'px'
|
});
|
|
html.setStyle(this.subtitleNode, {
|
lineHeight: this.height + 'px'
|
});
|
|
query('.jimu-link', this.domNode).style({
|
lineHeight: this.height + 'px'
|
});
|
},
|
|
_processGroupSetting: function () {
|
// Sets the map canvas area according to area
|
// remained after opening and closing of widget panel
|
this._setMapCanvasAreaToDefault();
|
function getOpenType(gLabel) {
|
if (this.config.groupSetting) {
|
for (var i = 0; i < this.config.groupSetting.length; i++) {
|
if (this.config.groupSetting[i].label === gLabel) {
|
return this.config.groupSetting[i].type;
|
}
|
}
|
}
|
//this is the default open type
|
return 'openAll';
|
}
|
array.forEach(this.appConfig.widgetPool.groups, function (g) {
|
g.openType = getOpenType.call(this, g.label);
|
}, this);
|
},
|
|
_createDynamicLinks: function (links) {
|
if (window.isRTL) {
|
var _links = [];
|
array.forEach(links, function (link) {
|
_links.unshift(link);
|
});
|
links = _links;
|
}
|
html.empty(this.dynamicLinksNode);
|
//if no links are configured hide the link node else create configured links
|
if (links.length <= 0) {
|
html.setStyle(this.linksNode, 'display', 'none');
|
//If dynamicLinks already exist in switchable elements remove it as links length is 0
|
if (this.switchableElements.hasOwnProperty("links")) {
|
delete this.switchableElements.links;
|
}
|
} else {
|
//As dynamicLinks exist add linksNode to switchable elements
|
this.switchableElements.links = this.linksNode;
|
array.forEach(links, function (link) {
|
html.create('a', {
|
href: link.url,
|
target: '_blank',
|
innerHTML: utils.sanitizeHTML(link.label),
|
'class': "jimu-link jimu-align-leading jimu-leading-margin1",
|
style: {
|
lineHeight: this.height + 'px'
|
}
|
}, this.dynamicLinksNode);
|
}, this);
|
}
|
},
|
|
_showSwitchableElements: function (showElement) {
|
var es = this.switchableElements;
|
|
for (var p in es) {
|
if (es.hasOwnProperty(p)) {
|
if (showElement.indexOf(p) > -1) {
|
html.setStyle(es[p], 'display', 'block');
|
es[p].visible = true;
|
} else {
|
html.setStyle(es[p], 'display', 'none');
|
es[p].visible = false;
|
}
|
}
|
}
|
//links is hidden
|
if (this.logoClickHandle) {
|
this.logoClickHandle.remove();
|
}
|
|
if (showElement.indexOf('links') < 0) {
|
this.logoClickHandle = on(this.logoNode, 'click', lang.hitch(this, this._onLogoClick));
|
} else {
|
if (this.popupLinksVisible) {
|
this._hidePopupLink();
|
}
|
if(this.appConfig.logoLink){
|
html.setStyle(this.logoNode, 'cursor', 'pointer');
|
}else{
|
html.setStyle(this.logoNode, 'cursor', 'default');
|
}
|
}
|
},
|
|
_switchSignin: function () {
|
|
},
|
|
_onLogoClick: function () {
|
// return;
|
if (this.popupLinkNode) {
|
html.destroy(this.popupLinkNode);
|
|
}
|
this.popupLinkNode = this._createPopupLinkNode();
|
|
if (this.popupLinksVisible) {
|
this._hidePopupLink();
|
} else {
|
this._showPopupLink();
|
}
|
},
|
|
_hidePopupLink: function () {
|
html.setStyle(this.popupLinkNode, 'display', 'none');
|
|
if (window.isRTL) {
|
html.setStyle(jimuConfig.layoutId, {
|
right: 0
|
});
|
} else {
|
html.setStyle(jimuConfig.layoutId, {
|
left: 0
|
});
|
}
|
|
this.popupLinksVisible = false;
|
},
|
|
_showPopupLink: function () {
|
html.setStyle(this.popupLinkNode, 'display', '');
|
|
if (window.isRTL) {
|
html.setStyle(jimuConfig.layoutId, {
|
right: html.getContentBox(this.popupLinkNode).w + 'px'
|
});
|
} else {
|
html.setStyle(jimuConfig.layoutId, {
|
left: html.getContentBox(this.popupLinkNode).w + 'px'
|
});
|
}
|
|
this.popupLinksVisible = true;
|
},
|
|
_createPopupLinkNode: function () {
|
var node, titleNode, box;
|
box = html.getContentBox(jimuConfig.mainPageId);
|
|
node = html.create('div', {
|
'class': 'popup-links jimu-main-background',
|
style: {
|
position: 'absolute',
|
zIndex: 100,
|
top: 0,
|
bottom: 0
|
}
|
}, jimuConfig.mainPageId);
|
|
if (window.isRTL) {
|
html.setStyle(node, {
|
right: 0,
|
left: '50px'
|
});
|
} else {
|
html.setStyle(node, {
|
left: 0,
|
right: '50px'
|
});
|
}
|
|
titleNode = html.create('div', {
|
'class': 'popup-title',
|
style: {
|
height: this.height + 'px',
|
width: '100%'
|
}
|
}, node);
|
|
html.create('img', {
|
'class': 'logo jimu-float-leading jimu-leading-margin1',
|
src: this.appConfig.logo ? this.appConfig.logo : this.folderUrl + 'images/app-logo.png',
|
style: {
|
width: '30px',
|
height: '30px',
|
marginTop: ((this.height - 30) / 2) + 'px'
|
}
|
}, titleNode);
|
|
html.create('div', {
|
'class': 'title jimu-float-leading jimu-leading-margin1',
|
innerHTML: utils.sanitizeHTML(this.appConfig.title),
|
style: {
|
lineHeight: this.height + 'px'
|
}
|
}, titleNode);
|
|
array.forEach(this.appConfig.links, function (link) {
|
this._createLinkNode(node, link, false);
|
}, this);
|
|
this._createLinkNode(node, {
|
label: '',
|
url: '#'
|
}, false);
|
return node;
|
},
|
|
_createLinkNode: function (containerNode, link, isSign) {
|
var node, lineNode, linkSectionNode, className;
|
|
node = html.place('<div class="jimu-link"></div>', containerNode);
|
|
lineNode = html.place('<div class="line"></div>', node);
|
if (isSign) {
|
className = 'link-section signin';
|
} else {
|
className = 'link-section';
|
}
|
linkSectionNode = html.place('<div class="' + className + '"></div>', node);
|
html.create('a', {
|
href: link.url,
|
'class': 'jimu-ellipsis',
|
target: '_blank',
|
innerHTML: utils.sanitizeHTML(link.label),
|
title: utils.sanitizeHTML(link.label),
|
style: {
|
lineHeight: '66px'
|
}
|
}, linkSectionNode);
|
|
return node;
|
},
|
|
_onSigninClick: function () {
|
},
|
|
_onSignoutClick: function () {
|
|
},
|
|
_onUserNameClick: function () {
|
|
},
|
|
/*
|
* Calculates the width of header section div
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getHeaderSectionWidth: function () {
|
var width;
|
width = html.getMarginBox(this.headerNode).w;
|
return width;
|
},
|
|
/*
|
* Calculate width for titles and subtitles
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getIconContainerWidth: function () {
|
var iconContainerWidth;
|
//the container width
|
iconContainerWidth = html.getMarginBox(this.containerNode).w;
|
return iconContainerWidth;
|
},
|
|
/*
|
* Calculates the width of header title div
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getTitlesWidth: function () {
|
var titlseWidth;
|
titlseWidth = html.getMarginBox(this.titlesNode).w;
|
return titlseWidth;
|
},
|
|
/*
|
* Calculates the width of header link div
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getLinkWidth: function () {
|
var linkWidth;
|
linkWidth = html.getMarginBox(this.linksNode).w;
|
return linkWidth;
|
},
|
|
/*
|
* Calculates the width of header logo div
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getLogoWidth: function () {
|
var width;
|
width = html.getMarginBox(this.logoNode).w + 12;
|
return width;
|
},
|
|
/*
|
* Calculates the width of header Subtitle div
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getSubtitleWidth: function () {
|
var subTitleWidth;
|
subTitleWidth = html.getMarginBox(this.subtitleNode).w;
|
return subTitleWidth;
|
},
|
|
/*
|
* Calculates the header container which contains
|
* app-logo, title, subtitle, links etc
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getHeaderContainerWidth: function (box) {
|
var headSectionWidth = this._getIconContainerWidth();
|
var logosectionWidth = this._getLogoWidth();
|
//the container width
|
var containerWidth = box.w - headSectionWidth - logosectionWidth;
|
return containerWidth;
|
},
|
|
/*
|
* Hide and show title, subtitle, link
|
* according to the width of the there text
|
* title is in first priority then subtitle and links subsequently
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_getTitleContainerWidth: function (box) {
|
var containerWidth = this._getHeaderContainerWidth(box);
|
var tileswidth = this._getTitlesWidth();
|
var linkWidth = this._getLinkWidth();
|
// if the header container containing title, subtitle, link width is less
|
// than titles and subtitle width then only
|
if (containerWidth < (tileswidth + linkWidth)) {
|
// if link div is visible then only
|
if (this.switchableElements.hasOwnProperty("links") &&
|
this.switchableElements.links.visible) {
|
//hidden link first
|
this._showSwitchableElements(['title', 'subtitle']);
|
tileswidth = this._getTitlesWidth();
|
if (containerWidth < tileswidth) {
|
//hidden Subtitle first
|
this._showSwitchableElements(['title']);
|
}
|
} else {
|
//hiden the title, subtitle, links
|
this._showSwitchableElements(['title']);
|
}
|
}
|
},
|
|
_createIconNodes: function (box, openingWidgetId) {
|
query('.icon-node', this.containerNode).remove();
|
this._closeDropMenu();
|
|
var i, iconConfig, ret, allIconConfigs = this.getAllConfigs(), moveToHeader;
|
//by default, the icon is square
|
this.iconWidth = box.h;
|
ret = this._getTitleContainerWidth(box);
|
|
var iconContainerWidth = 360;
|
if (window.innerWidth <= 760) {
|
iconContainerWidth = 90;
|
} else {
|
iconContainerWidth = 360;
|
}
|
|
var containerStyle = {
|
width: iconContainerWidth + 'px'
|
};
|
|
/* New Changes For showing panel below header in mobile devices */
|
html.setStyle(this.containerNode, containerStyle);
|
|
if (window.innerWidth <= 760) {
|
this.maxIconCount = 2;
|
} else {
|
this.maxIconCount = Math.floor(360 / 45);
|
}
|
if (this.maxIconCount >= allIconConfigs.length) {
|
this.headerIconCount = allIconConfigs.length;
|
this.createMoreIcon = false;
|
} else {
|
this.headerIconCount = this.maxIconCount - 1;
|
this.createMoreIcon = true;
|
}
|
if (this.createMoreIcon) {
|
this._createIconNode({
|
label: this.nls.more
|
});
|
/*Move open widget to header icon List -
|
*If any openAtStart/alreadyOpen widget goes into more panel this will bring it to header *icon list
|
*/
|
if (!this.openAtStartWidget) {
|
for (i = 0; i < allIconConfigs.length; i++) {
|
if (allIconConfigs[i].openAtStart) {
|
moveToHeader = allIconConfigs[i];
|
}
|
}
|
}
|
//if not opening widget from more list and and some widget is already opened,
|
//show the opened widget icon in header icon list
|
if (!openingWidgetId && this.openedId && this.getConfigById(this.openedId)) {
|
moveToHeader = this.getConfigById(this.openedId);
|
}
|
if (moveToHeader) {
|
this._moveConfigToHeader(moveToHeader);
|
}
|
/* End Move open widget to header icon List */
|
}
|
|
var openAtStartNode;
|
for (i = this.headerIconCount - 1; i >= 0; i--) {
|
iconConfig = allIconConfigs[i];
|
var node = this._createIconNode(iconConfig);
|
|
if (iconConfig.openAtStart) {
|
openAtStartNode = node;
|
}
|
}
|
//open the first openatstart widget
|
if (openAtStartNode && !this.openAtStartWidget) {
|
this._onIconClick(openAtStartNode);
|
this.openAtStartWidget = openAtStartNode.config.name;
|
}
|
|
if (this.openedId && this.getConfigById(this.openedId) &&
|
this.getConfigById(this.openedId).inPanel === false) {
|
var openedIconNode = this._getIconNodeById(this.openedId);
|
var openedWidget = this.widgetManager.getWidgetById(this.openedId);
|
if (openedIconNode && openedWidget) {
|
this._setOffPanelWidgetPosition(openedIconNode, openedWidget);
|
} else {
|
this.widgetManager.closeWidget(this.openedId);
|
this.openedId = '';
|
}
|
}
|
},
|
|
_createIconNode: function (iconConfig) {
|
var node, iconUrl, iconParent, iconSelectedDiv;
|
if (iconConfig.label === this.nls.more) {
|
iconUrl = this.folderUrl + 'images/more_icon.png';
|
} else {
|
iconUrl = iconConfig.icon;
|
}
|
|
node = html.create('div', {
|
'class': 'icon-node jimu-float-trailing',
|
title: iconConfig.label,
|
settingId: iconConfig.id,
|
style: {
|
width: 45 + 'px',
|
height: this.height + 'px',
|
textAlign: 'center'
|
}
|
}, this.containerNode);
|
/* New Changes For showing panel below header in mobile devices */
|
iconParent = html.create('div', {
|
'class': 'widget-symbol-div',
|
style: {
|
width: 100 + '%'
|
}
|
}, node);
|
|
html.create('img', {
|
src: iconUrl,
|
style: {
|
marginTop: ((this.height - 30) / 2 + 3) + 'px',
|
marginBottom: 3 + 'px'
|
}
|
}, iconParent);
|
|
iconSelectedDiv = html.create('div', {
|
'class': 'widget-open-symbol esriCTHidden'
|
}, node);
|
|
/* New Changes For showing panel below header in mobile devices */
|
if (iconConfig.label === this.nls.more) {
|
on(node, 'click', lang.hitch(this, this._showMorePane, iconConfig));
|
} else {
|
on(node, 'click', lang.hitch(this, function () {
|
this._onIconClick(node);
|
}));
|
}
|
node.config = iconConfig;
|
if (node.config.widgets && node.config.widgets.length > 1 &&
|
node.config.openType === 'dropDown') {
|
this._createDropTriangle(node);
|
}
|
|
//set current open node
|
if (this.openedId === iconConfig.id) {
|
html.addClass(node, 'jimu-state-selected');
|
//Hide widget open symbol of all widgets
|
query('.widget-open-symbol', this.domNode).addClass('esriCTHidden');
|
//Show widget open symbol of the current open widget only
|
html.removeClass(iconSelectedDiv, 'esriCTHidden');
|
if (node.config.widgets && node.config.widgets.length > 1 &&
|
node.config.openType === 'dropDown') {
|
this._openDropMenu(node);
|
}
|
}
|
return node;
|
},
|
|
_createDropTriangle: function (node) {
|
var box = html.getMarginBox(node);
|
var triangleLeft = box.l + box.w / 2 - 4;
|
html.create('div', {
|
'class': 'drop-triangle',
|
style: {
|
left: triangleLeft + 'px'
|
}
|
}, node);
|
},
|
|
_onIconClick: function (node) {
|
if (!node.config.widgets || node.config.widgets.length === 1 ||
|
node.config.openType === 'openAll') {
|
//widget or group with 'openAll' open type
|
if (this.openedId && this.openedId === node.config.id) {
|
this._switchNodeToClose(this.openedId);
|
return;
|
} else {
|
if (this.openedId) {
|
this._switchNodeToClose(this.openedId).then(lang.hitch(this, function () {
|
this._closeDropMenu();
|
this._switchNodeToOpen(node.config.id);
|
}));
|
} else {
|
this._switchNodeToOpen(node.config.id);
|
}
|
}
|
} else {
|
if (this.dropMenuNode) {
|
this._closeDropMenu();
|
} else {
|
this._openDropMenu(node);
|
}
|
}
|
},
|
|
_closeDropMenu: function () {
|
if (this.dropMenuNode) {
|
html.destroy(this.dropMenuNode);
|
this.dropMenuNode = null;
|
}
|
},
|
|
_openDropMenu: function (pnode) {
|
this.dropMenuNode = html.create('div', {
|
'class': 'jimu-drop-menu jimu-main-background',
|
title: pnode.config.label,
|
style: {
|
position: 'absolute',
|
zIndex: '101'
|
}
|
});
|
|
html.place(this.dropMenuNode, this.containerNode);
|
|
array.forEach(pnode.config.widgets, function (widgetConfig) {
|
this._createDropMenuItem(widgetConfig);
|
}, this);
|
|
this._setDropMenuPosition(pnode);
|
|
if (this.morePane) {
|
this.morePane.hide();
|
}
|
},
|
|
_createDropMenuItem: function (sconfig) {
|
var node = html.create('div', {
|
'class': 'menu-item',
|
title: utils.sanitizeHTML(sconfig.label),
|
style: {
|
height: this.height + 'px'
|
}
|
}, this.dropMenuNode);
|
|
html.create('img', {
|
'class': 'jimu-float-leading',
|
src: sconfig.icon
|
}, node);
|
|
html.create('div', {
|
'class': 'label jimu-float-leading',
|
innerHTML: utils.sanitizeHTML(sconfig.label)
|
}, node);
|
|
this.own(on(node, 'click', lang.hitch(this, function () {
|
this._closeDropMenu();
|
if (this.openedId) {
|
this._switchNodeToClose(this.openedId).then(lang.hitch(this, function () {
|
this._showIconContent(node.config);
|
}));
|
} else {
|
this._showIconContent(node.config);
|
}
|
})));
|
node.config = sconfig;
|
return node;
|
},
|
|
_setDropMenuPosition: function (pnode) {
|
var position = {};
|
var menuBox = html.getMarginBox(this.dropMenuNode);
|
|
position = this._getDropdownPosition(pnode, menuBox);
|
position.zIndex = 101;
|
html.setStyle(this.dropMenuNode, utils.getPositionStyle(position));
|
},
|
|
_getDropdownPosition: function (pnode, sbox) {
|
var position = {},
|
pbox = html.getMarginBox(pnode),
|
thisBox = html.getMarginBox(this.domNode);
|
|
position.top = this.height + 1;
|
|
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 > thisBox.w) {
|
position.right = 0;
|
} else {
|
position.left = pbox.l;
|
}
|
}
|
return position;
|
},
|
|
_switchNodeToOpen: function (id) {
|
var node = this._getIconNodeById(id);
|
query('.icon-node', this.domNode).removeClass('jimu-state-selected');
|
/* New Changes For showing panel below header in mobile devices */
|
query('.widget-open-symbol', this.domNode).addClass('esriCTHidden');
|
html.addClass(node, 'jimu-state-selected');
|
html.removeClass(node.children[1], 'esriCTHidden');
|
/* New Changes For showing panel below header in mobile devices */
|
this._showIconContent(node.config);
|
},
|
|
_switchNodeToClose: function (id) {
|
query('.icon-node', this.domNode).removeClass('jimu-state-selected');
|
// Sets the map canvas area according to area
|
// remained after opening and closing of widget panel
|
this._setMapCanvasAreaToDefault();
|
|
/* New Changes For showing panel below header in mobile devices */
|
query('.widget-open-symbol', this.domNode).addClass('esriCTHidden');
|
var iconJson = this.appConfig.getConfigElementById(id);
|
var def;
|
if (iconJson) {
|
if (iconJson.inPanel === false) {
|
this.widgetManager.closeWidget(id);
|
this.openedId = '';
|
def = new Deferred();
|
def.resolve();
|
return def;
|
} else {
|
return this.panelManager.closePanel(id + '_panel');
|
}
|
} else {
|
def = new Deferred();
|
def.resolve();
|
return def;
|
}
|
},
|
|
/*
|
* Sets map canvas area to default position
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_setMapCanvasAreaToDefault: function () {
|
// if application is running in desktop device then keep right zero
|
// else for mobile devices keep bottom zero
|
if (!window.appInfo.isRunInMobile) {
|
topic.publish('changeMapPosition', {
|
right: "0px"
|
});
|
} else {
|
var attributeTableHeight = 0;
|
if (query(".jimu-widget-attributetable")[0]) {
|
attributeTableHeight = query(".jimu-widget-attributetable")[0].clientHeight;
|
}
|
// if attribute table widget height is greater than zero
|
// then set bottom equal attributeTableHeight
|
// else keep bottom as zero
|
if (attributeTableHeight) {
|
topic.publish('changeMapPosition', {
|
bottom: attributeTableHeight
|
});
|
} else {
|
topic.publish('changeMapPosition', {
|
bottom: "0px"
|
});
|
}
|
}
|
},
|
|
/*
|
* Adjusts the map canvas area according to remaining area
|
* after opening or closing, panel or other widgets
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_setMapCanvasArea: function () {
|
// if application is running in desktop device
|
if (!window.appInfo.isRunInMobile) {
|
// if browser is minimized the change map right position to zero
|
// else change it by 360px
|
if (this.panelManager && this.panelManager.activePanel &&
|
this.panelManager.activePanel.windowState === "minimized") {
|
topic.publish('changeMapPosition', {
|
right: "0px"
|
});
|
} else {
|
topic.publish('changeMapPosition', {
|
right: "360px"
|
});
|
|
this._resizeAttributeTableinRTL();
|
}
|
} else {
|
// if application is running in mobile devices and panel resizing state is
|
// normal then set the bottom positioning of the map equal to the panel top
|
// position so that map content pane can be visible in that remaining area only
|
// else keep bottom position 36px for folded mode
|
var attributeTableHeight = 0;
|
if (query(".jimu-widget-attributetable")[0]) {
|
attributeTableHeight = query(".jimu-widget-attributetable")[0].clientHeight;
|
}
|
if (this.panelManager && this.panelManager.panels && this.panelManager.panels[0] &&
|
this.panelManager.panels[0].windowState === "normal") {
|
var panelPosition = this.panelManager.getPositionOnMobile(this);
|
// if attribute table widget height is greater than panelPosition.top
|
// then set bottom equal attributeTableHeight
|
// else keep bottom as panelPosition.top
|
if (attributeTableHeight && attributeTableHeight > panelPosition.top) {
|
topic.publish('changeMapPosition', {
|
bottom: attributeTableHeight
|
});
|
} else {
|
topic.publish('changeMapPosition', {
|
bottom: panelPosition.top
|
});
|
}
|
} else {
|
// if attribute table widget height is greater than 36px
|
// then set bottom position to attributeTableHeight
|
// else keep bottom position to 36px
|
if (attributeTableHeight > 36) {
|
topic.publish('changeMapPosition', {
|
bottom: attributeTableHeight
|
});
|
} else {
|
// if it is touch devices or browser width is less than 760px
|
// then set bottom position to 36px else set it to zero
|
if (window.hasOwnProperty("ontouchstart") ||
|
window.ontouchstart !== undefined || window.innerWidth <= 760) {
|
topic.publish('changeMapPosition', {
|
bottom: "36px"
|
});
|
} else {
|
topic.publish('changeMapPosition', {
|
bottom: "0px"
|
});
|
}
|
}
|
}
|
}
|
},
|
|
/*
|
* resizes the attribute table widget in case of RTL layout
|
* after opening or closing, panel or other widgets
|
* @memberOf widgets/HeaderController/widget.js
|
*/
|
_resizeAttributeTableinRTL: function () {
|
// if attribute table widget is available in the dom
|
if (query(".jimu-widget-attributetable")[0]) {
|
if (window.isRTL) {
|
html.setStyle(query(".jimu-widget-attributetable")[0], 'right', '0px');
|
} else {
|
html.setStyle(query(".jimu-widget-attributetable")[0], 'left', '0px');
|
}
|
// if tab Container is of attribute table widget is created in the dom
|
if (query(".dijitTabContainer", query(".jimu-widget-attributetable")[0])[0]) {
|
registry.byId(query(".dijitTabContainer",
|
query(".jimu-widget-attributetable")[0])[0].id).resize();
|
}
|
}
|
},
|
|
_getIconNodeById: function (id) {
|
var node = query('.icon-node[settingId="' + id + '"]', this.domNode);
|
if (node.length === 0) {
|
return;
|
}
|
return node[0];
|
},
|
|
_unSelectIcon: function (id) {
|
query('.icon-node[settingId="' + id + '"]', this.domNode)
|
.removeClass('jimu-state-selected');
|
this.openedId = '';
|
},
|
|
_showIconContent: function (iconConfig) {
|
if (iconConfig.inPanel === false) {
|
this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function (widget) {
|
this.openedId = iconConfig.id;
|
var iconNode = this._getIconNodeById(iconConfig.id);
|
|
//we don't call widget.startup because getWidgetMarginBox has started widget
|
//widget.startup();
|
|
html.setStyle(widget.domNode, 'zIndex', 101);
|
|
this._setOffPanelWidgetPosition(iconNode, widget);
|
this.widgetManager.openWidget(widget);
|
|
this.own(aspect.after(widget, 'onClose', lang.hitch(this, function () {
|
query('.widget-open-symbol', this.domNode).addClass('esriCTHidden');
|
// Sets the map canvas area according to area
|
// remained after opening and closing of widget panel
|
this._setMapCanvasAreaToDefault();
|
// ST: Added to listen for out of panel widgets that can be closed
|
this._unSelectIcon(iconConfig.id);
|
})));
|
}));
|
} else {
|
// Sets the map canvas area according to area
|
// remained after opening and closing of widget panel
|
this._setMapCanvasArea();
|
this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function (panel) {
|
var node;
|
this.openedId = iconConfig.id;
|
node = this._getIconNodeById(this.openedId);
|
query('.icon-node', this.domNode).removeClass('jimu-state-selected');
|
/* New Changes For showing panel below header in mobile devices */
|
query('.widget-open-symbol', this.domNode).addClass('esriCTHidden');
|
html.addClass(node, 'jimu-state-selected');
|
html.removeClass(node.children[1], 'esriCTHidden');
|
|
this.own(aspect.after(panel, 'onClose', lang.hitch(this, function () {
|
this._unSelectIcon(iconConfig.id);
|
// Sets the map canvas area according to area
|
// remained after opening and closing of widget panel
|
this._setMapCanvasAreaToDefault();
|
})));
|
}));
|
}
|
},
|
|
_setOffPanelWidgetPosition: function (iconNode, widget) {
|
var position = this._getDropdownPosition(iconNode,
|
this.widgetManager.getWidgetMarginBox(widget));
|
widget.setPosition(position, this.containerNode);
|
},
|
|
_showMorePane: function () {
|
var i, iconConfig, moreItems = [],
|
allIconConfigs = this.getAllConfigs();
|
|
for (i = this.headerIconCount; i < allIconConfigs.length; i++) {
|
iconConfig = allIconConfigs[i];
|
if (iconConfig.id !== this.openedId) {
|
moreItems.push(iconConfig);
|
}
|
}
|
if (this.morePane) {
|
this.morePane.destroy();
|
}
|
if (this.moreIconPaneCoverNode) {
|
html.destroy(this.moreIconPaneCoverNode);
|
}
|
|
this._closeDropMenu();
|
|
this.morePane = new PopupTileNodes({
|
openedId: this.openedId,
|
items: moreItems,
|
numWidget: allIconConfigs
|
});
|
this._createCoverNode();
|
html.place(this.morePane.domNode, jimuConfig.mapId);
|
this.morePane.startup();
|
|
aspect.after(this.morePane, 'onNodeClicked', lang.hitch(this, function (node) {
|
this._moveConfigToHeader(node.config);
|
this._createIconNodes(html.getContentBox(this.domNode), node.config.id);
|
this._onIconClick(this._getIconNodeById(node.config.id));
|
}), true);
|
aspect.after(this.morePane, 'hide', lang.hitch(this, function () {
|
html.destroy(this.moreIconPaneCoverNode);
|
}), true);
|
},
|
|
_moveConfigToHeader: function (config) {
|
var allIconConfigs = this.getAllConfigs();
|
|
var tempIndex = config.index;
|
config.index = allIconConfigs[this.headerIconCount - 1].index;
|
allIconConfigs[this.headerIconCount - 1].index = tempIndex;
|
},
|
|
_createCoverNode: function () {
|
this.moreIconPaneCoverNode = html.create('div', {
|
'class': 'jimu-more-icon-cover'
|
}, jimuConfig.layoutId);
|
}
|
});
|
return clazz;
|
});
|
