Move expand click node to the entire control row to more easily expan…

…d/collapse Control - Move sublayer menu for dynamic layers to hamburger style menu with indent
cmv · Feb 27, 2017 · 9d65205 · 9d65205
1 parent e8f2aa2
commit 9d65205
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 19 deletions.
diff --git a/viewer/js/gis/dijit/LayerControl/controls/_Control.js b/viewer/js/gis/dijit/LayerControl/controls/_Control.js
@@ -147,7 +147,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();

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 {
@@ -84,15 +90,15 @@ define([
             //set up menu
             if (this.control.controlOptions.menu &&
                     this.control.controlOptions.menu.length) {
-                domClass.add(this.labelNode, 'menuLink');
-                domClass.add(this.iconNode, 'menuLink');
                 this.menu = new Menu({
                     contextMenuForWindow: false,
-                    targetNodeIds: [this.labelNode],
+                    targetNodeIds: [this.menuClickNode],
                     leftClickToOpen: true
                 });
                 array.forEach(this.control.controlOptions.menu, 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>