///////////////////////////////////////////////////////////////////////////
|
// 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/array',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/query',
|
'dojo/on',
|
'dojo/dom',
|
'dojo/dom-class',
|
'dojo/dom-construct',
|
'dojo/dom-geometry',
|
'dojo/dom-style',
|
'dojo/Deferred',
|
'jimu/BaseWidget',
|
'jimu/PoolControllerMixin',
|
'jimu/utils'
|
],
|
function(declare, array, lang, html, query, on,
|
dom, domClass, domConstruct, domGeometry, domStyle, Deferred,
|
BaseWidget, PoolControllerMixin, utils) {
|
/* global jimuConfig */
|
/* jshint scripturl:true */
|
|
var clazz = declare([BaseWidget, PoolControllerMixin], {
|
|
baseClass: 'box-controller',
|
height: 50,
|
|
// post create
|
postCreate: function() {
|
this.inherited(arguments);
|
this.titleNode.innerHTML =
|
utils.sanitizeHTML(this.appConfig.title ? this.appConfig.title : '');
|
on(this.toggleNode, "click", lang.hitch(this, this._toggleBox));
|
on(this.menuNode, "click", lang.hitch(this, this._closeMenu));
|
},
|
|
// startup
|
startup: function() {
|
this.inherited(arguments);
|
this._createIconNodes();
|
query(".jimu-widget-zoomslider").forEach(function(node){
|
domClass.add(node, "jimu-main-background");
|
});
|
},
|
|
// on action
|
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();
|
}
|
},
|
|
// destroy
|
destroy: function() {
|
if (this.timeoutHandle) {
|
clearTimeout(this.timeoutHandle);
|
this.timeoutHandle = null;
|
}
|
query(".jimu-widget-zoomslider").forEach(function(node){
|
domClass.remove(node, "jimu-main-background");
|
});
|
this.inherited(arguments);
|
},
|
|
// on app config changed
|
onAppConfigChanged: function(appConfig, reason, changedData) {
|
switch (reason) {
|
case 'attributeChange':
|
this._onAttributeChange(appConfig, changedData);
|
break;
|
case 'layoutChange':
|
if (this.openedId && this.openedId !== '') {
|
setTimeout(lang.hitch(this, this._switchNodeToOpen), 1000, this.openedId);
|
}
|
break;
|
default:
|
return;
|
}
|
},
|
|
getOpenedIds: function() {
|
this.inherited(arguments);
|
var ids = [];
|
if (this.openedId && this.openedId !== '') {
|
ids.push(this.openedId);
|
}
|
return ids;
|
},
|
|
setOpenedIds: function(ids) {
|
console.log("SETTING OPEN IDS", ids);
|
this._closeMenu();
|
if (ids.length > 0) {
|
var id = ids[0];
|
this.openedId = id;
|
this._switchNodeToOpen(id);
|
}
|
},
|
|
// get widget position
|
_getWidgetPosition: function() {
|
console.log(jimuConfig);
|
var wPos = {
|
bottom: 60,
|
right: 10
|
};
|
var b = domStyle.get(this.domNode, "bottom");
|
if (b !== "0px") {
|
wPos = {
|
bottom: 10,
|
right: 10
|
};
|
}
|
return wPos;
|
},
|
|
// highlight
|
_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');
|
},
|
|
// remove highlight
|
_removeHighLight: function() {
|
if (this.hlDiv) {
|
domConstruct.destroy(this.hlDiv);
|
this.hlDiv = null;
|
}
|
},
|
|
// on attribute change
|
_onAttributeChange: function(appConfig, changedData) {
|
/*jshint unused: false*/
|
if (changedData.title !== undefined && changedData.title !== this.appConfig.title) {
|
this.titleNode.innerHTML = utils.sanitizeHTML(changedData.title ? changedData.title : '');
|
}
|
},
|
|
// create icon nodes
|
_createIconNodes: function() {
|
html.empty(this.containerNode);
|
|
var i, iconConfig, allIconConfigs = this.getAllConfigs();
|
|
var containerStyle = {
|
width: allIconConfigs.length * this.height + 'px'
|
};
|
html.setStyle(this.containerNode, containerStyle);
|
|
var openAtStartNode;
|
for (i = 0; i < allIconConfigs.length; i++) {
|
iconConfig = allIconConfigs[i];
|
var node = this._createIconNode(iconConfig);
|
if (iconConfig.openAtStart) {
|
openAtStartNode = node;
|
}
|
}
|
|
this._createPages(allIconConfigs.length);
|
|
//open the first openatstart widget
|
if (openAtStartNode && !this.openAtStartWidget) {
|
this._onIconClick(openAtStartNode);
|
this.openAtStartWidget = openAtStartNode.config.name;
|
this.openedId = openAtStartNode.config.id;
|
}
|
},
|
|
// create icon node
|
_createIconNode: function(iconConfig) {
|
var node, iconUrl;
|
iconUrl = iconConfig.icon;
|
|
node = html.create('div', {
|
'class': 'icon-node',
|
title: iconConfig.label,
|
settingId: iconConfig.id,
|
style: {
|
width: this.height + 'px',
|
height: this.height + 'px'
|
}
|
}, this.containerNode);
|
|
html.create('img', {
|
src: iconUrl
|
}, node);
|
|
on(node, 'click', lang.hitch(this, function() {
|
this._onIconClick(node);
|
}));
|
node.config = iconConfig;
|
|
return node;
|
},
|
|
// create pages
|
_createPages: function(iconCount) {
|
var w = iconCount * this.height;
|
this.pageCount = Math.ceil(w / 300);
|
var list = dom.byId("pages");
|
list.innerHTML = "";
|
if (this.pageCount > 1) {
|
for (var i = 0; i < this.pageCount; i++) {
|
var id = "page" + i;
|
var link = domConstruct.create("li", {
|
id: id
|
}, list);
|
this.own(on(link, "click", lang.hitch(this, this._setPage, i)));
|
}
|
domClass.add("page0", "active");
|
}
|
this.page = 0;
|
},
|
|
// set page
|
_setPage: function(num) {
|
domClass.remove("page" + this.page, "active");
|
this.page = num;
|
domClass.add("page" + this.page, "active");
|
var pos = 0 - (num * 300) + 'px';
|
var prop = "left";
|
if (window.isRTL) {
|
prop = "right";
|
}
|
domStyle.set(this.containerNode, prop, pos);
|
},
|
|
// toggle box
|
_toggleBox: function() {
|
domClass.toggle(this.domNode, "box-controller-open");
|
},
|
|
switchNode: function(id) {
|
var node = this._getIconNodeById(id);
|
if (node) {
|
this._closeMenu();
|
this._onIconClick(node);
|
}
|
},
|
|
// on icon click
|
_onIconClick: function(node) {
|
if (this.openedId) {
|
this._lastOpenId = this.openedId;
|
}
|
if (this.openedId && this.openedId === node.config.id) {
|
this.openedId = '';
|
this._switchNodeToClose(this._lastOpenId);
|
return;
|
} else {
|
if (this.openedId) {
|
this._switchNodeToClose(this.openedId);
|
}
|
this.openedId = node.config.id;
|
this._switchNodeToOpen(node.config.id);
|
}
|
},
|
|
// switch node to open
|
_switchNodeToOpen: function(id) {
|
var node = this._getIconNodeById(id);
|
domClass.add(node, "icon-node-active");
|
this.labelNode.innerHTML = utils.sanitizeHTML(node.config.label ? node.config.label : '');
|
domStyle.set(this.titleNode, "display", "none");
|
domStyle.set(this.labelNode, "display", "block");
|
this._showIconContent(node.config);
|
},
|
|
// switch node to close
|
_switchNodeToClose: function(id) {
|
var node = this._getIconNodeById(id);
|
domClass.remove(this.domNode, "box-controller-open");
|
domClass.remove(node, "icon-node-active");
|
domStyle.set(this.toggleNode, "display", "none");
|
domStyle.set(this.titleNode, "display", "block");
|
domStyle.set(this.labelNode, "display", "none");
|
if (node.config.inPanel === false) {
|
this.widgetManager.closeWidget(id);
|
this.openedId = '';
|
var def = new Deferred();
|
def.resolve();
|
return def;
|
} else {
|
if (node.config.name === "Measurement" || node.config.name === "SmartEditor") {
|
return this.panelManager.destroyPanel(id + '_panel');
|
} else {
|
return this.panelManager.closePanel(id + '_panel');
|
}
|
}
|
},
|
|
// get icon node by id
|
_getIconNodeById: function(id) {
|
var node = query('.icon-node[settingId="' + id + '"]', this.domNode);
|
if (node.length === 0) {
|
return;
|
}
|
return node[0];
|
},
|
|
// show icon content
|
_showIconContent: function(iconConfig) {
|
if (iconConfig.inPanel === false) {
|
domClass.add(this.domNode, "box-controller-widget");
|
var br = query(".esriControlsBR")[0];
|
domStyle.set(br, "display", "none");
|
this.widgetManager.loadWidget(iconConfig).then(lang.hitch(this, function(widget) {
|
this.openedId = iconConfig.id;
|
html.setStyle(widget.domNode, 'zIndex', 101);
|
widget.setPosition(this._getWidgetPosition(),window.jimuConfig.mapId);
|
this.widgetManager.openWidget(widget);
|
domStyle.set(widget.domNode, "display", null);
|
}));
|
} else {
|
domStyle.set(this.toggleNode, "display", "block");
|
domClass.add(this.domNode, "box-controller-open");
|
this.panelManager.showPanel(iconConfig).then(lang.hitch(this, function(panel) {
|
panel.setPosition(panel.position, this.panelNode);
|
if (iconConfig.name === "Measurement") {
|
setTimeout(lang.hitch(this, this._restartMeasurement), 1000);
|
}
|
this.openedId = iconConfig.id;
|
}));
|
}
|
|
},
|
|
// restart measurement
|
_restartMeasurement: function() {
|
array.forEach(this.widgetManager.loaded, function(w) {
|
if (w.name === "Measurement") {
|
w.startup();
|
}
|
});
|
},
|
|
// close menu
|
_closeMenu: function() {
|
if (this.openedId && this.openedId !== '') {
|
this._switchNodeToClose(this.openedId);
|
this.openedId = '';
|
}
|
var br = query(".esriControlsBR")[0];
|
domStyle.set(br, "display", "block");
|
domClass.remove(this.domNode, "box-controller-widget");
|
}
|
|
|
});
|
return clazz;
|
});
|
