define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/query',
|
'dojo/on',
|
'dojo/topic',
|
'jimu/BaseWidget',
|
'jimu/tokenUtils',
|
'jimu/portalUtils',
|
'jimu/utils',
|
'jimu/dijit/Message',
|
'dojo/NodeList-dom',
|
'dojo/NodeList-manipulate'
|
],
|
function(declare, lang, array, html, query, on, topic,
|
BaseWidget, tokenUtils, portalUtils, utils, Message) {
|
/* global jimuConfig */
|
/*jshint scripturl:true*/
|
var clazz = declare([BaseWidget], {
|
|
baseClass: 'jimu-widget-header jimu-main-background',
|
name: 'Header',
|
|
switchableElements: {},
|
|
moveTopOnActive: false,
|
|
constructor: function() {
|
this.height = this.getHeaderHeight() + 'px';
|
},
|
|
postCreate: function() {
|
this.inherited(arguments);
|
var logoH = this.getLogoHeight() + 'px';
|
|
if (this.position && this.position.height) {
|
this.height = this.position.height;
|
}
|
|
this.switchableElements.logo = query('.logo', this.domNode);
|
this.switchableElements.title = query('.jimu-title', this.domNode);
|
this.switchableElements.links = query('.links', this.domNode);
|
this.switchableElements.subtitle = query('.jimu-subtitle', this.domNode);
|
|
this._handleTitleColorAndLogoLink(this.appConfig);
|
|
this.switchableElements.logo.style({
|
// width: logoH,
|
height: logoH
|
});
|
|
// if(!this.appConfig.portalUrl){
|
html.setStyle(this.signInSectionNode, 'display', 'none');
|
// }else{
|
// html.setStyle(this.signInSectionNode, 'display', '');
|
// }
|
|
this._setElementsSize();
|
this.own(topic.subscribe('changeMapPosition', lang.hitch(this, this._onMapResize)));
|
},
|
|
startup: function() {
|
this.inherited(arguments);
|
|
// this.switchableElements.logo.attr(
|
// 'src',
|
// this.appConfig.logo ? this.appConfig.logo : this.folderUrl + 'images/app-logo.png'
|
// );
|
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');
|
}
|
this.switchableElements.title.innerHTML(
|
utils.sanitizeHTML(this.appConfig.title ? this.appConfig.title : '')
|
);
|
this.switchableElements.subtitle.innerHTML(
|
utils.sanitizeHTML(this.appConfig.subtitle ? this.appConfig.subtitle : '')
|
);
|
|
this._createDynamicLinks(this.appConfig.links);
|
|
if (this.appConfig.about) {
|
html.setStyle(this.aboutNode, 'display', '');
|
} else {
|
html.setStyle(this.aboutNode, 'display', 'none');
|
}
|
},
|
|
onAppConfigChanged: function(appConfig, reason, changedData) {
|
switch (reason) {
|
case 'attributeChange':
|
this._onAttributeChange(appConfig, changedData);
|
break;
|
default:
|
return;
|
}
|
this.appConfig = appConfig;
|
this.resize();
|
},
|
|
_onMapResize: function(){
|
if(!window.appInfo.isRunInMobile){
|
return;
|
}
|
var sideBar = this.widgetManager.getWidgetsByName('SidebarController');
|
if(sideBar.length === 0){
|
return;
|
}
|
sideBar = sideBar[0];
|
|
if(sideBar.windowState === 'minimized'){
|
this.width = sideBar.minWidth;
|
}else{
|
this.width = sideBar.getWidth();
|
}
|
html.setStyle(this.domNode, 'width', this.width + 'px');
|
this.resize();
|
},
|
|
_onAttributeChange: function(appConfig, changedData) {
|
/*jshint unused: false*/
|
if ('title' in changedData && changedData.title !== this.appConfig.title) {
|
this.switchableElements.title.innerHTML(utils.sanitizeHTML(changedData.title));
|
}
|
if ('subtitle' in changedData && changedData.subtitle !== this.appConfig.subtitle) {
|
this.switchableElements.subtitle.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._handleTitleColorAndLogoLink(appConfig);
|
},
|
|
_handleTitleColorAndLogoLink: function(appConfig){
|
if(appConfig.titleColor){
|
html.setStyle(this.switchableElements.title, 'color', appConfig.titleColor);
|
}else{
|
html.setStyle(this.switchableElements.title, 'color', '');
|
}
|
|
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('.link', this.domNode).style({
|
lineHeight: this.height + 'px'
|
});
|
},
|
|
_createDynamicLinks: function(links) {
|
html.empty(this.dynamicLinksNode);
|
array.forEach(links, function(link) {
|
html.create('a', {
|
href: link.url,
|
target: '_blank',
|
rel: "noopener noreferrer",
|
innerHTML: utils.sanitizeHTML(link.label),
|
'class': "link",
|
style: {
|
lineHeight: this.height + 'px'
|
}
|
}, this.dynamicLinksNode);
|
}, this);
|
},
|
|
onSignIn: function(credential) {
|
this.inherited(arguments);
|
|
html.setStyle(this.signinLinkNode, 'display', 'none');
|
html.setStyle(this.userNameLinkNode, 'display', 'inline');
|
html.setStyle(this.signoutLinkNode, 'display', 'inline');
|
|
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', 'block');
|
html.setStyle(this.popupSignoutNode, 'display', 'block');
|
|
query('a', this.popupUserNameNode).html(credential.userId)
|
.attr('href', this.appConfig.portalUrl + 'home/user.html');
|
}
|
|
this.resize();
|
},
|
|
onSignOut: function(signInTip) {
|
this.inherited(arguments);
|
|
this._onSignOut(signInTip);
|
|
var portal = portalUtils.getPortal(this.appConfig.portalUrl);
|
portal.loadSelfInfo().then(lang.hitch(this, function(selfInfo) {
|
var name = selfInfo.name;
|
var signInTip = this.nls.signInTo + ' ' + name;
|
this._onSignOut(signInTip);
|
}), lang.hitch(this, function(err) {
|
console.error(err);
|
}));
|
},
|
|
_onSignOut: function(signInTip) {
|
html.setStyle(this.signinLinkNode, 'display', 'inline');
|
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', 'block');
|
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();
|
},
|
|
switchElements: function(showElement) {
|
var es = this.switchableElements;
|
|
for (var p in es) {
|
if (es.hasOwnProperty(p)) {
|
if (p === 'logo') {
|
es[p].style('display', '');
|
} else if (showElement.indexOf(p) > -1) {
|
es[p].style('display', 'block');
|
} else {
|
es[p].style('display', 'none');
|
}
|
}
|
}
|
//links is hidden
|
if (this.logoClickHandle) {
|
this.logoClickHandle.remove();
|
html.setStyle(this.logoNode, 'cursor', 'default');
|
}
|
|
if (showElement.indexOf('links') < 0) {
|
this.linksVisible = false;
|
this.logoClickHandle = on(es.logo[0], 'click', lang.hitch(this, this.switchPopupLinks));
|
html.setStyle(this.logoNode, 'cursor', 'pointer');
|
} else {
|
if (this.linksVisible) {
|
this.switchPopupLinks();
|
}
|
}
|
},
|
|
switchSignin: function() {
|
var credential = tokenUtils.getPortalCredential(this.appConfig.portalUrl);
|
if (credential) {
|
this.onSignIn(credential);
|
} else {
|
this.onSignOut();
|
}
|
html.setStyle(this.signInSectionNode, 'display', 'none');
|
},
|
|
switchPopupLinks: function() {
|
if(!this.appConfig.links || this.appConfig.links.length === 0){
|
return;
|
}
|
html.destroy(this.popupLinkNode);
|
|
this.popupLinkNode = this.createPopupLinkNode();
|
// this.switchSignin();
|
html.setStyle(this.popupSigninNode, 'display', 'none');
|
html.setStyle(this.popupUserNameNode, 'display', 'none');
|
html.setStyle(this.popupSignoutNode, 'display', 'none');
|
|
if (this.linksVisible) {
|
this.linksVisible = false;
|
html.setStyle(this.popupLinkNode, 'display', 'none');
|
} else {
|
this.linksVisible = true;
|
html.setStyle(this.popupLinkNode, 'display', 'block');
|
}
|
},
|
|
createPopupLinkNode: function() {
|
var node;
|
var box = html.getContentBox(jimuConfig.layoutId);
|
|
node = html.create('div', {
|
'class': 'popup-links',
|
style: {
|
top: 0,
|
width: (box.w - this.width) + 'px'
|
}
|
}, this.domNode);
|
|
if (window.isRTL) {
|
html.setStyle(node, 'right', this.width + 'px');
|
} else {
|
html.setStyle(node, 'left', this.width + 'px');
|
}
|
|
array.forEach(this.appConfig.links, function(link) {
|
this.createLinkNode(node, link, false);
|
}, this);
|
|
this.popupSigninNode = this.createLinkNode(node, {
|
label: 'SignIn',
|
url: '#'
|
}, true);
|
this.popupUserNameNode = this.createLinkNode(node, {
|
label: '',
|
url: '#'
|
}, true);
|
this.popupSignoutNode = this.createLinkNode(node, {
|
label: 'SignOut',
|
url: '#'
|
}, true);
|
|
this.own(on(this.popupSigninNode, 'click', lang.hitch(this, '_onSigninClick')));
|
this.own(on(this.popupSignoutNode, 'click', lang.hitch(this, '_onSignoutClick')));
|
utils.setVerticalCenter(node);
|
//empty
|
this.createLinkNode(node, {
|
label: '',
|
url: '#'
|
}, false);
|
return node;
|
},
|
|
createLinkNode: function(containerNode, link, isSign) {
|
var node, lineNode, linkSectionNode, className;
|
|
node = html.place('<div class="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,
|
target: '_blank',
|
rel: "noopener noreferrer",
|
innerHTML: utils.sanitizeHTML(link.label),
|
'class': "jimu-vcenter-text jimu-ellipsis",
|
title: link.label
|
}, linkSectionNode);
|
|
return node;
|
},
|
|
_onSigninClick: function() {
|
tokenUtils.signInPortal(this.appConfig.portalUrl, this.appConfig.appId);
|
},
|
|
_onSignoutClick: function() {
|
var isDepolyedApp = !this.appConfig.mode;
|
|
if (isDepolyedApp) {
|
//tokenUtils.signOutPortal(this.appConfig.portalUrl);
|
tokenUtils.signOutAll();
|
} else {
|
new Message({
|
message: this.nls.cantSignOutTip
|
});
|
}
|
},
|
|
_onUserNameClick: function() {},
|
|
_onAboutClick: function() {
|
var widgetConfig = {
|
id: this.appConfig.about + '_1',
|
uri: this.appConfig.about,
|
label: 'About'
|
};
|
this.widgetManager.loadWidget(widgetConfig).then(lang.hitch(this, function(widget) {
|
html.place(widget.domNode, jimuConfig.layoutId);
|
widget.startup();
|
}));
|
},
|
|
resize: function() {
|
this.switchElements(['title', 'links', 'subtitle']);
|
var box = html.getContentBox(this.domNode);
|
var logoBox = html.getMarginBox(this.logoNode);
|
var titlesBox = html.getMarginBox(this.titlesNode);
|
var linksBox = html.getMarginBox(this.linksNode);
|
|
this.width = box.w;
|
if (box.w <= titlesBox.w + linksBox.w + logoBox.w){
|
this.switchElements(['title', 'links']);
|
titlesBox = html.getMarginBox(this.titlesNode);
|
if (box.w <= titlesBox.w + linksBox.w + logoBox.w) {
|
this.switchElements(['title']);
|
if (box.w <= titlesBox.w + logoBox.w) {
|
this.switchElements([]);
|
}
|
}
|
}
|
},
|
|
|
getHeaderHeight: function() {
|
return 44;
|
},
|
|
getHeaderEmptyWidth: function() {
|
return 1 / 8 * html.getMarginBox(this.domNode).w;
|
},
|
|
getLogoHeight: function() {
|
return 34;
|
},
|
|
destroy: function() {
|
this.inherited(arguments);
|
|
if (this.popupLinkNode && this.linksVisible) {
|
this.switchPopupLinks();
|
}
|
html.destroy(this.popupLinkNode);
|
}
|
});
|
return clazz;
|
});
|
