diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js index f7c7a8c34..d11dc7490 100644 --- a/viewer/js/config/viewer.js +++ b/viewer/js/config/viewer.js @@ -54,13 +54,17 @@ define([ topic.subscribe('layerControl/hello', function (event) { topic.publish('growler/growl', { title: 'Hello!', - message: event.layer._titleForLegend + ' ' + event.subLayer.name + ' says hello' + message: event.layer._titleForLegend + ' ' + + (event.subLayer ? event.subLayer.name : '') + + ' says hello' }); }); topic.subscribe('layerControl/goodbye', function (event) { topic.publish('growler/growl', { title: 'Goodbye!', - message: event.layer._titleForLegend + ' ' + event.subLayer.name + ' says goodbye' + message: event.layer._titleForLegend + ' ' + + (event.subLayer ? event.subLayer.name : '') + + ' says goodbye' }); }); @@ -163,6 +167,13 @@ define([ visible: true, outFields: ['req_type', 'req_date', 'req_time', 'address', 'district'], mode: 0 + }, + layerControlLayerInfos: { + menu: [{ + topic: 'hello', + label: 'Say Hello Custom', + iconClass: 'fa fa-smile-o' + }] } }, { type: 'dynamic', @@ -207,7 +218,7 @@ define([ expanded: true, //override the menu on this particular layer - menu: [{ + subLayerMenu: [{ topic: 'hello', label: 'Say Hello', iconClass: 'fa fa-smile-o' @@ -423,7 +434,15 @@ define([ separated: true, vectorReorder: true, overlayReorder: true, - + // create a custom menu entry in all of these feature types + // the custom menu item will publish a topic when clicked + menu: { + feature: [{ + topic: 'hello', + iconClass: 'fa fa-smile-o', + label: 'Say Hello' + }] + }, //create a example sub layer menu that will //apply to all layers of type 'dynamic' subLayerMenu: { diff --git a/viewer/js/gis/dijit/LayerControl.js b/viewer/js/gis/dijit/LayerControl.js index bffc5b586..4a8f14098 100644 --- a/viewer/js/gis/dijit/LayerControl.js +++ b/viewer/js/gis/dijit/LayerControl.js @@ -33,8 +33,8 @@ define([ map: null, layerInfos: [], icons: { - expand: 'fa-plus-square-o', - collapse: 'fa-minus-square-o', + expand: 'fa-caret-right', + collapse: 'fa-caret-down', checked: 'fa-check-square-o', unchecked: 'fa-square-o', update: 'fa-refresh', @@ -51,6 +51,7 @@ define([ noLegend: null, noZoom: null, noTransparency: null, + menu: {}, subLayerMenu: {}, swipe: null, swiperButtonStyle: 'position:absolute;top:20px;left:120px;z-index:50;', @@ -220,7 +221,8 @@ define([ swipe: null, expanded: false, sublayers: true, - menu: this.subLayerMenu[layerInfo.type] + menu: this.menu[layerInfo.type], + subLayerMenu: this.subLayerMenu[layerInfo.type] }, layerInfo.controlOptions) }); layerControl.startup(); @@ -487,4 +489,4 @@ define([ } }); return LayerControl; -}); \ No newline at end of file +}); diff --git a/viewer/js/gis/dijit/LayerControl/controls/Dynamic.js b/viewer/js/gis/dijit/LayerControl/controls/Dynamic.js index d474d6eda..c4ce2a847 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/Dynamic.js +++ b/viewer/js/gis/dijit/LayerControl/controls/Dynamic.js @@ -87,25 +87,14 @@ define([ })); menu.addChild(new MenuSeparator()); } - + }, + _initCustomMenu: function () { // add custom sublayer menu items if we only have one sublayer if (!this._hasSublayers) { - array.forEach(this.controlOptions.menu, lang.hitch(this, '_addMenuItem', menu)); + array.forEach(this.controlOptions.subLayerMenu, lang.hitch(this, '_addCustomMenuItem', this.layerMenu)); + this.layerMenu.addChild(new MenuSeparator()); } }, - _addMenuItem: function (menu, menuItem) { - //create the menu item - var item = new MenuItem(menuItem); - item.set('onClick', lang.hitch(this, function () { - topic.publish('layerControl/' + menuItem.topic, { - layer: this.layer, - subLayer: this.layer.layerInfos[0], - iconNode: this.iconNode, - menuItem: item - }); - })); - menu.addChild(item); - }, // toggle all sublayers on/off _toggleAllSublayers: function (state) { array.forEach(this._sublayerControls, function (control) { diff --git a/viewer/js/gis/dijit/LayerControl/controls/Feature.js b/viewer/js/gis/dijit/LayerControl/controls/Feature.js index 4ac2061a5..8706f5e29 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/Feature.js +++ b/viewer/js/gis/dijit/LayerControl/controls/Feature.js @@ -28,4 +28,4 @@ define([ } }); return FeatureControl; -}); \ No newline at end of file +}); diff --git a/viewer/js/gis/dijit/LayerControl/controls/_Control.js b/viewer/js/gis/dijit/LayerControl/controls/_Control.js index e9086017a..58e7f6179 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/_Control.js +++ b/viewer/js/gis/dijit/LayerControl/controls/_Control.js @@ -10,6 +10,7 @@ define([ 'dojo/dom-attr', 'dojo/fx', 'dojo/html', + 'dijit/MenuItem', './../plugins/LayerMenu', 'dojo/text!./templates/Control.html' ], function ( @@ -24,6 +25,7 @@ define([ domAttr, fx, html, + MenuItem, LayerMenu, template ) { @@ -91,6 +93,7 @@ define([ leftClickToOpen: true }); this.layerMenu.startup(); + this._initCustomMenu(); } else { domClass.remove(this.menuNode, 'fa, layerControlMenuIcon, ' + this.icons.menu); domStyle.set(this.menuClickNode, 'cursor', 'default'); @@ -117,6 +120,21 @@ define([ layer.on('visibility-change', lang.hitch(this, '_visibilityChange')) ); }, + _initCustomMenu: function () { + array.forEach(this.controlOptions.menu, lang.hitch(this, '_addCustomMenuItem', this.layerMenu)); + }, + _addCustomMenuItem: function (menu, menuItem) { + //create the menu item + var item = new MenuItem(menuItem); + item.set('onClick', lang.hitch(this, function () { + topic.publish('layerControl/' + menuItem.topic, { + layer: this.layer, + iconNode: this.iconNode, + menuItem: item + }); + })); + menu.addChild(item); + }, // add on event to expandClickNode _expandClick: function () { this._expandClickHandler = on(this.expandClickNode, 'click', lang.hitch(this, '_expandClicked')); @@ -147,7 +165,13 @@ define([ domConst.destroy(this.expandNode); }, // set layer visibility and update icon - _setLayerVisibility: function (layer, checkNode) { + _setLayerVisibility: function (layer, checkNode, event) { + + // prevent click event from bubbling + if (event.stopPropagation) { + event.stopPropagation(); + } + if (layer.visible) { this._setLayerCheckbox(layer, checkNode); layer.hide(); @@ -253,4 +277,4 @@ define([ } }); return _Control; -}); \ No newline at end of file +}); diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js index 584a3c9a4..15a601720 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js +++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js @@ -56,7 +56,13 @@ define([ } else { this._setSublayerCheckbox(false, checkNode); } - this._handlers.push(on(checkNode, 'click', lang.hitch(this, function () { + this._handlers.push(on(checkNode, 'click', lang.hitch(this, function (event) { + + // prevent click event from bubbling + if (event.stopPropagation) { + event.stopPropagation(); + } + if (domAttr.get(checkNode, 'data-checked') === 'checked') { this._setSublayerCheckbox(false, checkNode); } else { @@ -124,4 +130,4 @@ define([ } }); return _DynamicFolder; -}); \ No newline at end of file +}); diff --git a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js index 3cce73151..51c9dd271 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js +++ b/viewer/js/gis/dijit/LayerControl/controls/_DynamicSublayer.js @@ -66,7 +66,13 @@ define([ } else { this._setSublayerCheckbox(false, checkNode); } - this._handlers.push(on(checkNode, 'click', lang.hitch(this, function () { + this._handlers.push(on(checkNode, 'click', lang.hitch(this, function (event) { + + // prevent click event from bubbling + if (event.stopPropagation) { + event.stopPropagation(); + } + if (domAttr.get(checkNode, 'data-checked') === 'checked') { this._setSublayerCheckbox(false, checkNode); } else { @@ -82,17 +88,17 @@ define([ this._handlers.push(this.control.layer.getMap().on('zoom-end', lang.hitch(this, '_checkboxScaleRange'))); } //set up menu - if (this.control.controlOptions.menu && - this.control.controlOptions.menu.length) { - domClass.add(this.labelNode, 'menuLink'); - domClass.add(this.iconNode, 'menuLink'); + if (this.control.controlOptions.subLayerMenu && + this.control.controlOptions.subLayerMenu.length) { this.menu = new Menu({ contextMenuForWindow: false, - targetNodeIds: [this.labelNode], + targetNodeIds: [this.menuClickNode], leftClickToOpen: true }); - array.forEach(this.control.controlOptions.menu, lang.hitch(this, '_addMenuItem')); + array.forEach(this.control.controlOptions.subLayerMenu, lang.hitch(this, '_addMenuItem')); this.menu.startup(); + } else { + domClass.add(this.menuClickNode, 'hidden'); } }, _addMenuItem: function (menuItem) { diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html index 5836fe4b0..e7e224030 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html +++ b/viewer/js/gis/dijit/LayerControl/controls/templates/Control.html @@ -1,7 +1,7 @@
- - +
+
diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html index 628438952..c62a97f34 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html +++ b/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html @@ -1,7 +1,7 @@ -
- - -
+
+ + +
diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html index 8e5b82ea6..6d2a2b464 100644 --- a/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html +++ b/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html @@ -1,7 +1,7 @@ -
- - -
+
+ + + +
@@ -9,9 +9,14 @@ - + + + + +
- +
diff --git a/viewer/js/gis/dijit/LayerControl/css/LayerControl.css b/viewer/js/gis/dijit/LayerControl/css/LayerControl.css index 2a09ad53e..c3fa09b4e 100644 --- a/viewer/js/gis/dijit/LayerControl/css/LayerControl.css +++ b/viewer/js/gis/dijit/LayerControl/css/LayerControl.css @@ -45,8 +45,7 @@ line-height: 15px; } -.layerControlDijit .layerControlTableCheck, -.layerControlDijit .layerControlTableMenu { +.layerControlDijit .layerControlTableCheck, .layerControlDijit .layerControlTableMenu { cursor: pointer; width: 19px; height: 16px; @@ -54,10 +53,14 @@ } .layerControlDijit .layerControlTableLabel { + cursor: pointer; font-size: 15px; height: 16px; line-height: 16px; - cursor: default; +} + +.layerControlDijit .layerControlTableMenu { + cursor: pointer; } .layerControlDijit .layerControlTableUpdate { @@ -70,6 +73,7 @@ .layerControlDijit .layerControlHidden { display: none; } + .layerControlDijit .layerControlVisible { display: block; } @@ -99,7 +103,9 @@ color: #BBB; } + /* not in use - retain for links */ + .layerControlDijit .layerControlClick { cursor: pointer; color: #1f78af; @@ -118,7 +124,7 @@ vertical-align: middle; } -.layerControlDijit .layerControlLegendImage > img { +.layerControlDijit .layerControlLegendImage>img { border: none; padding: 0; } @@ -127,7 +133,9 @@ padding: 0 0 0 4px; } + /* temp esri/Legend overrides */ + .layerControlDijit .esriLegendService td { padding: 0; } @@ -140,13 +148,12 @@ display: none; } -.layerControlDijit .menuLink { - color: #369; - text-decoration: none; +/* sublayer menu */ + +.layerControlDijit .layerControlSublayer .layerControlTable td.layerControlTableMenu { + padding-right: 20px; } -.layerControlDijit .menuLink:hover { - color: #5196DB; - text-decoration: underline; - cursor: pointer; +.layerControlDijit .menuClickNode.hidden { + display: none; }