///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/dom-class',
|
'dojo/_base/window',
|
'dojo/window',
|
'dojo/query',
|
'dojo/on',
|
//'dojo/topic',
|
'dojo/Deferred',
|
'jimu/BaseWidget',
|
'jimu/WidgetManager',
|
'jimu/LayoutManager',
|
'jimu/utils',
|
'dojo/NodeList-dom',
|
'dojo/NodeList-manipulate'
|
],
|
function(declare, lang, array, html, domClass, winBase, win, query, on,
|
Deferred, BaseWidget, WidgetManager, LayoutManager, utils) {
|
/* global jimuConfig */
|
/*jshint scripturl:true*/
|
var clazz = declare([BaseWidget], {
|
|
baseClass: 'jimu-widget-header jimu-main-background',
|
name: 'Header',
|
|
switchableElements: {},
|
_boxSizes: null,
|
_searchWidgetId: "",
|
|
moveTopOnActive: false,
|
|
constructor: function() {
|
this.height = this.getHeaderHeight() + 'px';
|
this.widgetManager = WidgetManager.getInstance();
|
this.LayoutManager = LayoutManager.getInstance();
|
},
|
|
postCreate: function() {
|
this.inherited(arguments);
|
this._boxSizes = {};
|
|
this.own(on(this.widgetManager, 'widget-created', lang.hitch(this, function(widget) {
|
if(widget.name === 'Search') {
|
var searchWidget = this._getSearchWidgetInHeader();
|
if (searchWidget) {
|
html.addClass(searchWidget.domNode, 'has-transition');
|
// check if the search dijit has been parsed within the search widget
|
// if not, wait until it is ready, and then call resize()
|
if(searchWidget && !searchWidget.searchDijit) {
|
this._searchDijitDomReady(searchWidget).then(lang.hitch(this, function(){
|
this.resize();
|
}));
|
}else{
|
this.resize();
|
}
|
}
|
}
|
})));
|
|
this.own(on(this.widgetManager, 'widget-destroyed', lang.hitch(this, function(widgetId) {
|
if(widgetId && widgetId === this._searchWidgetId) {
|
this._detachSearchWidget();
|
this.resize();
|
}
|
})));
|
|
var logoW = this.getLogoWidth() + '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({
|
height: logoW
|
});
|
|
this._setElementsSize();
|
},
|
|
_attachSearchWidget: function(searchWidget) {
|
if(!searchWidget) {
|
searchWidget = this._getSearchWidgetInHeader();
|
}
|
if(!searchWidget || html.isDescendant(searchWidget.domNode, this.searchNode)) {
|
return;
|
}
|
searchWidget.domNode.style.position = 'relative';
|
searchWidget.domNode.style.left = 'auto';
|
searchWidget.domNode.style.right = 'auto';
|
searchWidget.domNode.style.top = 'auto';
|
searchWidget.domNode.style.bottom = 'auto';
|
searchWidget.domNode.style.width = '280px';
|
html.place(searchWidget.domNode, this.searchNode);
|
this._boxSizes.searchWidgetBox = {w: 280, h: 30};
|
},
|
|
_detachSearchWidget: function() {
|
html.empty(this.searchNode);
|
this._boxSizes.searchWidgetBox = {w: 0, h: 0};
|
},
|
|
_getSearchWidgetInHeader: function() {
|
var result;
|
var searchWidgets = this.widgetManager.getWidgetsByName('Search');
|
|
array.some(searchWidgets, lang.hitch(this, function(widget) {
|
if (!widget.closeable && widget.isOnScreen) {
|
result = widget;
|
this._searchWidgetId = widget.id;
|
return true;
|
}
|
}));
|
return result;
|
},
|
|
startup: function() {
|
this.inherited(arguments);
|
|
// Update UI:
|
// Logo
|
if (this.appConfig && this.appConfig.logo) {
|
this.logoNode.src = this.appConfig.logo;
|
this.own(on(this.logoNode, "load", lang.hitch(this, function () {
|
this._boxSizes.logoBox = html.getMarginSize(this.logoWrapperNode);
|
this.resize();
|
})));
|
html.removeClass(this.logoWrapperNode, 'hide-logo');
|
} else {
|
this.logoNode.src = "";
|
html.addClass(this.logoWrapperNode, 'hide-logo');
|
}
|
// Title
|
this.switchableElements.title.innerHTML(
|
utils.sanitizeHTML(this.appConfig.title ? this.appConfig.title : '')
|
);
|
// Subtitle
|
this.switchableElements.subtitle.innerHTML(
|
utils.sanitizeHTML(this.appConfig.subtitle ? this.appConfig.subtitle : '')
|
);
|
// Links
|
this._createDynamicLinks(this.appConfig.links);
|
// About
|
if (this.appConfig.about) {
|
html.setStyle(this.aboutNode, 'display', '');
|
} else {
|
html.setStyle(this.aboutNode, 'display', 'none');
|
}
|
|
// Show links placeholder button (if needed)
|
this._determineLinksButtonVisibility(this.appConfig.links);
|
},
|
|
_searchDijitDomReady: function(searchWidget) {
|
var timeCounter = 0;
|
var def = new Deferred();
|
// Check if searchDijit has been initialized within the search widget every 200 ms
|
var checkSearchDijitTimer = setInterval(lang.hitch(this, function(){
|
if(timeCounter > 5000 || searchWidget.searchDijit) {
|
// stop watching and resize UI
|
clearInterval(checkSearchDijitTimer);
|
def.resolve();
|
}else {
|
timeCounter += 200;
|
}
|
}), 200);
|
return def;
|
},
|
|
onAppConfigChanged: function(appConfig, reason, changedData) {
|
switch (reason) {
|
case 'attributeChange':
|
this._onAttributeChange(appConfig, changedData);
|
this._updateBoxsizes();
|
this.resize();
|
break;
|
case 'widgetChange':
|
if(changedData.name === 'Search'){
|
this.resize();
|
}
|
break;
|
default:
|
return;
|
}
|
this.appConfig = appConfig;
|
},
|
|
_onAttributeChange: function(appConfig, changedData) {
|
/*jshint unused: false*/
|
if ('title' in changedData && changedData.title !== this.appConfig.title) {
|
this.switchableElements.title.innerHTML(utils.sanitizeHTML(changedData.title));
|
html.setStyle(this.titleNode, {
|
display: changedData.title ? '' : 'none'
|
});
|
}
|
if ('subtitle' in changedData && changedData.subtitle !== this.appConfig.subtitle) {
|
this.switchableElements.subtitle.innerHTML(utils.sanitizeHTML(changedData.subtitle));
|
html.setStyle(this.subtitleNode, {
|
display: changedData.subtitle ? '' : 'none'
|
});
|
}
|
if (html.getStyle(this.titleNode, 'display') !== 'none' ||
|
html.getStyle(this.subtitleNode, 'display') !== 'none') {
|
html.setStyle(this.titlesNode, 'width', '1000px');
|
}
|
|
if ('logo' in changedData && changedData.logo !== this.appConfig.logo) {
|
if(changedData.logo){
|
html.setAttr(this.logoNode, 'src', changedData.logo);
|
html.removeClass(this.logoWrapperNode, 'hide-logo');
|
}else{
|
html.removeAttr(this.logoNode, 'src');
|
html.addClass(this.logoWrapperNode, 'hide-logo');
|
}
|
}
|
if ('links' in changedData) {
|
this._createDynamicLinks(changedData.links);
|
this._determineLinksButtonVisibility(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() {
|
// Logo
|
html.setStyle(this.logoNode, {
|
height: '30px',
|
marginTop: ((this.getLogoWidth() - 30) / 2) + 'px'
|
});
|
// Title
|
html.setStyle(this.titleNode, {
|
lineHeight: this.height + 'px'
|
});
|
// Subtitle
|
html.setStyle(this.subtitleNode, {
|
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"
|
}, this.dynamicLinksNode);
|
}, this);
|
},
|
|
_determineLinksButtonVisibility: function(links) {
|
if(links.length || this.appConfig.about) {
|
this._showLinksIcon();
|
}else {
|
this._hideLinksIcon();
|
}
|
},
|
|
_showLinksIcon: function() {
|
html.setAttr(this.linksIconImageNode, 'src', this.folderUrl + 'images/link_icon.png');
|
html.setStyle(this.linksIconNode, 'display', 'block');
|
html.addClass(winBase.body(), 'header-has-links');
|
|
if(!this.linksIconClicked) {
|
this.linksIconClicked = on(this.linksIconNode, 'click', lang.hitch(this, function() {
|
this._toggleLinksMenu();
|
}));
|
}
|
},
|
|
_hideLinksIcon: function() {
|
html.setStyle(this.linksIconNode, 'display', 'none');
|
html.removeClass(winBase.body(), 'header-has-links');
|
},
|
|
_toggleLinksMenu: function() {
|
html.toggleClass(this.linksNode, 'hidden');
|
},
|
|
_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();
|
}));
|
},
|
|
_updateBoxsizes: function() {
|
var logoBox = this._boxSizes.logoBox;
|
if (html.getStyle(this.logoWrapperNode, 'display') !== 'none') {
|
logoBox = html.getMarginSize(this.logoWrapperNode);
|
} else {
|
logoBox = {w:0, h: 0};
|
}
|
this._boxSizes.logoBox = logoBox;
|
|
var titleBox = this._boxSizes.titleBox;
|
if (html.getStyle(this.titleNode, 'display') !== 'none' && this.switchableElements.title.innerHTML()){
|
titleBox = html.getMarginSize(this.titleNode);
|
}
|
if(!titleBox) {
|
titleBox = {w:0, h: 0};
|
}
|
this._boxSizes.titleBox = titleBox;
|
|
var subTitleBox = this._boxSizes.subTitleBox;
|
if(html.getStyle(this.subtitleNode, 'display') !== 'none' && this.switchableElements.subtitle.innerHTML()) {
|
subTitleBox = html.getMarginSize(this.subtitleNode);
|
}
|
if (!subTitleBox) {
|
subTitleBox = {w:0, h: 0};
|
}
|
this._boxSizes.subTitleBox = subTitleBox;
|
html.setStyle(this.titlesNode, 'width', 'auto');
|
|
var LinksIconBox = this._boxSizes.LinksIconBox; // "w:10": leave some space to the edge
|
if(this.linksIconNode.style.display !== 'none') {
|
LinksIconBox = html.getMarginSize(this.linksIconNode);
|
} else {
|
LinksIconBox = {w:0, h: 0};
|
}
|
this._boxSizes.LinksIconBox = LinksIconBox;
|
|
if (!this._boxSizes.searchWidgetBox) {
|
this._boxSizes.searchWidgetBox = {w: 0, h: 0};
|
}
|
},
|
|
setPosition: function(position, containerNode){
|
//For on-screen off-panel widget, layout manager will call this function
|
//to set widget's position after load widget. If your widget will position by itself,
|
//please override this function.
|
this.position = position;
|
var style = utils.getPositionStyle(this.position);
|
style.position = 'absolute';
|
style.width = 'auto';
|
|
if(!containerNode){
|
if(position.relativeTo === 'map'){
|
containerNode = window.jimuConfig.mapId;
|
}else{
|
containerNode = window.jimuConfig.layoutId;
|
}
|
}
|
|
html.place(this.domNode, containerNode);
|
html.setStyle(this.domNode, style);
|
if(this.started){
|
setTimeout(lang.hitch(this, this.resize), 200);
|
}
|
},
|
|
resize: function() {
|
if(!this._started){
|
return;
|
}
|
if (!this._boxSizes.logoBox || !this._boxSizes.titleBox ||
|
!this._boxSizes.subTitleBox || !this._boxSizes.searchWidgetBox ||
|
!this._boxSizes.LinksIconBox) {
|
this._updateBoxsizes();
|
}
|
var boxSizes = this._boxSizes;
|
// whether the app is in mobile mode
|
if(window.appInfo.isRunInMobile){
|
html.addClass(winBase.body(), 'is-mobile');
|
this._detachSearchWidget();
|
}else {
|
html.removeClass(winBase.body(), 'is-mobile');
|
this._attachSearchWidget();
|
|
// Space reserved to show off screen widget icons to the right of the header
|
var winBox = win.getBox();
|
var offsetRight = 300, left = 15;
|
|
// Total width of the content in the header
|
// var contentPadding = 20;
|
var contentWidth = boxSizes.logoBox.w + boxSizes.titleBox.w + boxSizes.subTitleBox.w +
|
boxSizes.searchWidgetBox.w + boxSizes.LinksIconBox.w;
|
|
if (contentWidth === 0) {
|
html.setStyle(this.domNode, 'visibility', 'hidden');
|
return;
|
} else {
|
html.setStyle(this.domNode, 'visibility', 'visible');
|
}
|
|
if (contentWidth === boxSizes.logoBox.w || contentWidth === boxSizes.LinksIconBox.w) {
|
html.setStyle(this.titlesNode, 'display', 'none');
|
} else {
|
html.setStyle(this.titlesNode, 'display', 'flex');
|
}
|
|
if(left + contentWidth + offsetRight < winBox.w) { // enough space to show everything
|
this.titleNode.style.display = 'block';
|
this.subtitleNode.style.display = 'block';
|
} else {
|
if(left + contentWidth - boxSizes.subTitleBox.w + offsetRight < winBox.w) {
|
// not enough space to show subtitle
|
this.titleNode.style.display = 'block';
|
this.subtitleNode.style.display = 'none';
|
} else {
|
// not enough space to show tile and subtitle
|
this.titleNode.style.display = 'none';
|
this.subtitleNode.style.display = 'none';
|
}
|
}
|
}
|
},
|
|
getHeaderHeight: function() {
|
return 44;
|
},
|
|
getLogoWidth: function() {
|
return 50;
|
},
|
|
getLinksWidth: function() {
|
return 36;
|
},
|
|
destroy: function() {
|
this.inherited(arguments);
|
}
|
});
|
return clazz;
|
});
|
