define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/query',
|
'dojo/on',
|
'dojo/mouse',
|
'dojo/dom-construct',
|
'dojo/dom-geometry',
|
'jimu/BaseWidget',
|
'jimu/utils',
|
'jimu/dijit/Message'
|
],
|
function(declare, lang, array, html, query, on, mouse,
|
domConstruct, domGeometry, BaseWidget,
|
utils, Message) {
|
/* global jimuConfig */
|
/* jshint scripturl:true */
|
var clazz = declare([BaseWidget], {
|
|
baseClass: 'jimu-widget-dnd-header',
|
|
//title, links are switchable depends the browser width
|
switchableElements: {},
|
|
//the default height of the widget
|
height: 80,
|
|
moveTopOnActive: false,
|
|
postCreate: function() {
|
this.inherited(arguments);
|
|
this.switchableElements.title = this.titleNode;
|
this.switchableElements.links = this.linksNode;
|
this.switchableElements.subtitle = this.subtitleNode;
|
|
if (this.position && this.position.height) {
|
this.height = this.position.height;
|
}
|
|
this._handleTitleColorAndLogoLink(this.appConfig);
|
|
// if (!this.appConfig.portalUrl) {
|
html.setStyle(this.signInSectionNode, 'display', 'none');
|
// } else {
|
// html.setStyle(this.signInSectionNode, 'display', '');
|
// }
|
|
if (this.appConfig && this.appConfig.logo) {
|
this.logoIconNode.src = this.appConfig.logo;
|
html.removeClass(this.logoNode, 'hidden');
|
} else {
|
this.logoIconNode.src = "";
|
html.addClass(this.logoNode, 'hidden');
|
}
|
|
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);
|
|
this._setElementsSize();
|
|
|
},
|
|
startup: function() {
|
this.inherited(arguments);
|
this.resize();
|
// this.timeoutHandle = setTimeout(lang.hitch(this, this.resize), 100);
|
},
|
|
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);
|
|
this.resize();
|
},
|
|
onSignOut: function() {
|
this.inherited(arguments);
|
|
},
|
|
_onSignOut: function(signInTip) {
|
|
},
|
|
resize: function() {
|
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);
|
}
|
},
|
|
_resize: function() {
|
//by default, we show all elements
|
this._showSwitchableElements(['title', 'links', 'subtitle']);
|
},
|
|
destroy: function() {
|
if (this.timeoutHandle) {
|
clearTimeout(this.timeoutHandle);
|
this.timeoutHandle = null;
|
}
|
this.inherited(arguments);
|
},
|
|
onAppConfigChanged: function(appConfig, reason, changedData) {
|
switch (reason) {
|
case 'attributeChange':
|
this._onAttributeChange(appConfig, changedData);
|
break;
|
default:
|
return;
|
}
|
this.appConfig = appConfig;
|
this.resize();
|
},
|
|
_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*/
|
if ('title' in changedData && changedData.title !== this.appConfig.title) {
|
this.titleNode.innerHTML = utils.sanitizeHTML(changedData.title);
|
}
|
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.logoIconNode, 'src', changedData.logo);
|
html.removeClass(this.logoNode, 'hidden');
|
}else{
|
html.removeAttr(this.logoIconNode, 'src');
|
html.addClass(this.logoNode, 'hidden');
|
}
|
}
|
|
if ('links' in changedData) {
|
this._createDynamicLinks(changedData.links);
|
}
|
|
this._handleTitleColorAndLogoLink(appConfig);
|
},
|
|
_handleTitleColorAndLogoLink: function(appConfig){
|
if(appConfig.titleColor){
|
html.setStyle(this.titleNode, 'color', appConfig.titleColor);
|
}else{
|
html.setStyle(this.titleNode, 'color', '');
|
}
|
|
if(appConfig.logoLink){
|
html.setAttr(this.logoLinkNode, 'href', appConfig.logoLink);
|
html.setStyle(this.logoIconNode, 'cursor', 'pointer');
|
}else{
|
html.setAttr(this.logoLinkNode, 'href', 'javascript:void(0)');
|
html.setStyle(this.logoIconNode, 'cursor', 'default');
|
}
|
},
|
|
_setElementsSize: function() {
|
// query('.jimu-link', this.domNode).style({
|
// lineHeight: this.height + 'px'
|
// });
|
},
|
|
_createDynamicLinks: function(links) {
|
if (window.isRTL) {
|
var _links = [];
|
array.forEach(links, function(link) {
|
_links.unshift(link);
|
});
|
links = _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': "jimu-link jimu-align-leading jimu-leading-margin1",
|
style: {
|
lineHeight: this.height + 'px'
|
}
|
}, this.dynamicLinksNode);
|
}, this);
|
},
|
|
_showSwitchableElements: function(showElement) {
|
//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));
|
// 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._switchSignin();
|
}
|
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);
|
|
var logoNode = 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);
|
|
var textNode = html.create('div', {
|
'class': 'title jimu-float-leading jimu-leading-margin1 jimu-ellipsis',
|
innerHTML: utils.sanitizeHTML(this.appConfig.title),
|
style: {
|
lineHeight: this.height + 'px'
|
}
|
}, titleNode);
|
|
var titleWidth = 'auto';
|
try{
|
titleWidth = html.getMarginBox(titleNode).w -
|
html.getMarginBox(logoNode).w -
|
html.getMarginExtents(textNode).w + 'px';
|
} catch(err) {
|
console.error(err);
|
titleWidth = 'auto';
|
}
|
html.setStyle(textNode, 'width', titleWidth);
|
|
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')));
|
|
//empty
|
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',
|
rel: "noopener noreferrer",
|
innerHTML: utils.sanitizeHTML(link.label),
|
title: link.label,
|
style: {
|
lineHeight: '66px'
|
}
|
}, linkSectionNode);
|
|
return node;
|
},
|
|
_onSigninClick: function() {
|
},
|
|
_onSignoutClick: function() {
|
|
},
|
|
_onUserNameClick: function(){
|
|
}
|
});
|
return clazz;
|
});
|
