Merge pull request #680 from cmv/layer-menu-enhancements

Layer menu enhancements
cmv · Feb 28, 2017 · a9c1f92 · a9c1f92
2 parents c86e738 + a8978a2
commit a9c1f92
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 58 deletions.
diff --git 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
@@ -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;
-});
+});
diff --git 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
@@ -28,4 +28,4 @@ define([
         }
     });
     return FeatureControl;
-});
+});
diff --git 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;
-});
+});
diff --git 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;
-});
+});
diff --git 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
@@ -1,7 +1,7 @@
 <div class="layerControl">
     <table class="layerControlTable">
-        <tr>
-            <td data-dojo-attach-point="expandClickNode" class="layerControlTableExpand">
+        <tr data-dojo-attach-point="expandClickNode">
+            <td class="layerControlTableExpand">
                 <i data-dojo-attach-point="expandIconNode" class="fa ${icons.expand} layerControlIcon"></i>
             </td>
             <td class="layerControlTableCheck">

diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Folder.html
@@ -1,7 +1,7 @@
-<div>
-    <table>
-        <tr>
-            <td data-dojo-attach-point="expandClickNode" class="layerControlTableExpand">
+<div class="layerControl layerControlFolder">
+    <table class="layerControlTable">
+        <tr data-dojo-attach-point="expandClickNode">
+            <td class="layerControlTableExpand">
                 <i data-dojo-attach-point="expandIconNode" class="fa ${icons.folder} layerControlIcon"></i>
             </td>
             <td class="layerControlTableCheck">

diff --git a/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html b/viewer/js/gis/dijit/LayerControl/controls/templates/Sublayer.html
@@ -1,17 +1,22 @@
-<div>
-    <table>
-        <tr>
-            <td data-dojo-attach-point="expandClickNode" class="layerControlTableExpand">
+<div class="layerControl layerControlSublayer">
+    <table class="layerControlTable">
+        <tr data-dojo-attach-point="expandClickNode">
+            <td class="layerControlTableExpand">
                 <i data-dojo-attach-point="expandIconNode" class="fa ${icons.expand} layerControlIcon"></i>
             </td>
             <td class="layerControlTableCheck">
                 <i data-dojo-attach-point="checkNode" class="fa ${icons.unchecked} layerControlIcon"></i>
             </td>
             <td class="layerControlTableLabel">
                 <span data-dojo-attach-point="labelNode"></span>
-                <span data-dojo-attach-point="iconNode"></span>
+                <span data-dojo-attach-point="iconNode" class="icon-extra"></span>
+            <td class="layerControlTableUpdate">
+                <i data-dojo-attach-point="layerUpdateNode" class="fa ${icons.update} fa-spin layerControlUpdateIcon" style="display:none;"></i>
+            </td>
+            <td data-dojo-attach-point="menuClickNode" class="layerControlTableMenu">
+                <i data-dojo-attach-point="menuNode" class="fa ${icons.menu} layerControlMenuIcon"></i>
             </td>
         </tr>
     </table>
-    <div data-dojo-attach-point="expandNode" class="layerControlIndent" style="display:none;">${i18n.noLegend}</div>
+    <div data-dojo-attach-point="expandNode" class="layerControlIndent layerControlExpand" style="display:none;"></div>
 </div>
diff --git a/viewer/js/gis/dijit/LayerControl/css/LayerControl.css b/viewer/js/gis/dijit/LayerControl/css/LayerControl.css
@@ -45,19 +45,22 @@
     line-height: 15px;
 }
 
-.layerControlDijit .layerControlTableCheck,
-.layerControlDijit .layerControlTableMenu {
+.layerControlDijit .layerControlTableCheck, .layerControlDijit .layerControlTableMenu {
     cursor: pointer;
     width: 19px;
     height: 16px;
     line-height: 16px;
 }
 
 .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;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,4 +28,4 @@ define([ @@
             }
         });
         return FeatureControl;
-    });
+    });