New group folders for dynamic map services

viewer/js/config/viewer.js

@@ -201,14 +201,17 @@ define([
                 opacity: 1.0,
                 visible: true,
                 imageParameters: buildImageParameters({
-                    layerIds: [0, 2, 4, 5, 8, 10, 12, 21],
+                    // include only sub layer ids.
+                    // group layers omitted
+                    layerIds: [2, 4, 5, 8, 12, 21],
                     layerOption: 'show'
                 })
             },
             identifyLayerInfos: {
                 layerIds: [2, 4, 5, 8, 12, 21]
             },
             layerControlLayerInfos: {
+                // group layers included to maintain folder hierarchy, not visibility.
                 layerIds: [0, 2, 4, 5, 8, 9, 10, 12, 21]
             },
             legendLayerInfos: {

viewer/js/gis/dijit/LayerControl.js

@@ -40,8 +40,8 @@ define([
             indeterminate: 'fa-minus fa-fw fa-border layerControlIcon-Indeterminate',
             update: 'fa-refresh layerControlIcon-Update',
             menu: 'fa-bars layerControlIcon-Menu',
-            folder: 'fa-folder-o fa-fw layerControlIcon-Folder',
-            folderOpen: 'fa-folder-open-o fa-fw layerControlIcon-Folder layerControlIcon-FolderOpen'
+            folder: 'fa-folder fa-fw layerControlIcon-Folder',
+            folderOpen: 'fa-folder-open fa-fw layerControlIcon-Folder layerControlIcon-FolderOpen'
         },
         separated: false,
         overlayReorder: false,

viewer/js/gis/dijit/LayerControl/controls/Dynamic.js

@@ -48,6 +48,7 @@ define([
         _visLayersHandler: null,
         constructor: function () {
             this._sublayerControls = [];
+            this._folderControls = [];
         },
         _layerTypePreInit: function () {
             if (this.layer.layerInfos.length > 1 && this.controlOptions.sublayers) {
@@ -118,7 +119,8 @@ define([
                     var pid = info.parentLayerId,
                         slids = info.subLayerIds,
                         controlId = layer.id + '-' + info.id + '-sublayer-control',
-                        control;
+                        control = null,
+                        controlIsSubLayer = false;
                     // it's a top level
                     if (pid === -1 || allLayers.indexOf(pid) === -1) {
                         if (slids === null) {
@@ -130,6 +132,7 @@ define([
                                 icons: this.icons
                             });
                             domConst.place(control.domNode, this.expandNode, 'last');
+                            controlIsSubLayer = true;
                         } else if (slids !== null) {
                             // it's a top level folder
                             control = new DynamicFolder({
@@ -158,10 +161,19 @@ define([
                             icons: this.icons
                         });
                         domConst.place(control.domNode, registry.byId(layer.id + '-' + info.parentLayerId + '-sublayer-control').expandNode, 'last');
+                        controlIsSubLayer = true;
                     }
                     control.startup();
-                    this._sublayerControls.push(control);
+                    if (controlIsSubLayer) {
+                        this._sublayerControls.push(control);
+                    } else {
+                        this._folderControls.push(control);
+                    }
                 }));
+
+                array.forEach(this._folderControls, function (control) {
+                    control._checkFolderVisibility();
+                });
             }
         },
         // simply remove expandClickNode
@@ -176,56 +188,56 @@ define([
         _setVisibleLayers: function () {
             // remove aspect handler
             this._visLayersHandler.remove();
-            // because ags doesn't respect a layer group's visibility
-            //   i.e. layer 3 (the group) is not in array but it's sublayers are; sublayers will show
-            //   so check and if group is off also remove the sublayers
             var layer = this.layer,
-                setLayers = [];
+                visibleLayers = [];
             array.forEach(query('.' + layer.id + '-layerControlSublayerCheck'), function (i) {
-                if (domAttr.get(i, 'data-checked') === 'checked') {
-                    setLayers.push(parseInt(domAttr.get(i, 'data-sublayer-id'), 10));
-                }
-            });
-            array.forEach(layer.layerInfos, function (info) {
-                if (info.subLayerIds !== null && array.indexOf(setLayers, info.id) === -1) {
-                    array.forEach(info.subLayerIds, function (sub) {
-                        if (array.indexOf(setLayers, sub) !== -1) {
-                            setLayers.splice(array.indexOf(setLayers, sub), 1);
-                        }
-                    });
-                } else if (info.subLayerIds !== null && array.indexOf(setLayers, info.id) !== -1) {
-                    setLayers.splice(array.indexOf(setLayers, info.id), 1);
+                if (domAttr.get(i, 'data-checked') === 'checked' && !domAttr.get(i, 'data-layer-folder')) {
+                    visibleLayers.push(parseInt(domAttr.get(i, 'data-sublayer-id'), 10));
                 }
             });
-            if (!setLayers.length) {
-                setLayers.push(-1);
+            if (!visibleLayers.length) {
+                visibleLayers.push(-1);
             }
-            layer.setVisibleLayers(setLayers);
+
+            array.forEach(this._folderControls, function (control) {
+                control._checkFolderVisibility();
+            });
+
+            layer.setVisibleLayers(visibleLayers);
             layer.refresh();
+
             topic.publish('layerControl/setVisibleLayers', {
                 id: layer.id,
-                visibleLayers: setLayers
+                visibleLayers: visibleLayers
             });
             // set aspect handler
             this._visLayersHandler = aspect.after(this.layer, 'setVisibleLayers', lang.hitch(this, '_onSetVisibleLayers'), true);
         },
         _onSetVisibleLayers: function (visLayers) {
-            var visibleIds = [];
-            array.forEach(this.layer.layerInfos, function (info) {
-                if (array.indexOf(visLayers, info.id) !== -1) {
-                    visibleIds.push(info.id);
-                }
-                if (info.parentLayerId !== -1 && array.indexOf(visibleIds, info.parentLayerId) === -1) {
-                    visibleIds.push(info.parentLayerId);
-                }
-            });
+            // set the sub layer visibilty first
             array.forEach(this._sublayerControls, function (control) {
-                if (array.indexOf(visibleIds, control.sublayerInfo.id) !== -1) {
+                if (array.indexOf(visLayers, control.sublayerInfo.id) !== -1) {
                     control._setSublayerCheckbox(true);
                 } else {
                     control._setSublayerCheckbox(false);
                 }
             });
+
+            // setting the folder (group layer) visibility will change
+            // visibility for all children sub layer and folders
+            array.forEach(this._folderControls, function (control) {
+                if (array.indexOf(visLayers, control.sublayerInfo.id) !== -1) {
+                    control._setFolderCheckbox(true);
+                } else {
+                    control._setFolderCheckbox(false);
+                }
+            });
+
+            // finally, set the folder UI (state of checkbox) based on
+            // the sub layers and folders within the parent folder
+            array.forEach(this._folderControls, function (control) {
+                control._checkFolderVisibility();
+            });
         }
     });
     return DynamicControl;

viewer/js/gis/dijit/LayerControl/controls/Grouped.js

@@ -32,6 +32,11 @@ define([
         _layerType: 'grouped', // constant
         _esriLayerType: null, // constant
 
+        constructor: function () {
+            this.inherited(arguments);
+            this.icons.expand = this.icons.groupFolder || this.icons.folder;
+            this.icons.collapse = this.icons.groupFolderOpen || this.icons.folderOpen;
+        },
         // create and legend
         _layerTypePreInit: function () {
             array.forEach(this.layerDetails, lang.hitch(this, function (layerDetail) {

viewer/js/gis/dijit/LayerControl/controls/_Control.js

@@ -43,7 +43,7 @@ define([
         _expandClickHandler: null, // the click handler for the expandNode
         constructor: function (params) {
             if (params.controller) {
-                this.icons = params.controller.icons;
+                this.icons = lang.clone(params.controller.icons);
             } // if not you've got bigger problems
             this._handlers = [];
         },

viewer/js/gis/dijit/LayerControl/controls/_DynamicFolder.js

@@ -3,6 +3,7 @@ define([
     'dojo/_base/lang',
     'dojo/_base/array',
     'dojo/on',
+    'dojo/query',
     'dojo/dom-class',
     'dojo/dom-style',
     'dojo/dom-attr',
@@ -16,6 +17,7 @@ define([
     lang,
     array,
     on,
+    query,
     domClass,
     domStyle,
     domAttr,
@@ -50,25 +52,21 @@ define([
             }
             var checkNode = this.checkNode;
             domAttr.set(checkNode, 'data-sublayer-id', this.sublayerInfo.id);
+            domAttr.set(checkNode, 'data-layer-folder', true);
             domClass.add(checkNode, this.control.layer.id + '-layerControlSublayerCheck');
-            if (array.indexOf(this.control.layer.visibleLayers, this.sublayerInfo.id) !== -1) {
-                this._setSublayerCheckbox(true, checkNode);
-            } else {
-                this._setSublayerCheckbox(false, checkNode);
-            }
+
             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);
+                if (!this._hasAnyInvisibleLayer()) {
+                    this._setFolderCheckbox(false, checkNode);
                 } else {
-                    this._setSublayerCheckbox(true, checkNode);
+                    this._setFolderCheckbox(true, checkNode);
                 }
-                this.control._setVisibleLayers();
                 this._checkboxScaleRange();
             })));
             html.set(this.labelNode, this.sublayerInfo.name);
@@ -99,18 +97,129 @@ define([
                 }
             })));
         },
-        // set checkbox based on layer so it's always in sync
-        _setSublayerCheckbox: function (checked, checkNode) {
+        // toggles visibility of all sublayers
+        _setFolderCheckbox: function (checked, checkNode, isChildFolder) {
+            var i = this.icons,
+                dataChecked = (checked) ? 'checked' : 'unchecked',
+                slNodes = this._getSubLayerNodes();
             checkNode = checkNode || this.checkNode;
-            var i = this.icons;
-            if (checked) {
+            array.forEach(slNodes, lang.hitch(this, function (node) {
+
+                // child is folder
+                if (domAttr.get(node, 'data-layer-folder')) {
+                    var folderControl = this._getFolderControl(node);
+                    if (folderControl) {
+                        folderControl._setFolderCheckbox(checked, node, true);
+                    }
+                // child is sub layer
+                } else {
+                    domAttr.set(node, 'data-checked', dataChecked);
+                    if (checked) {
+                        domClass.replace(node, i.checked, i.unchecked);
+                    } else {
+                        domClass.replace(node, i.unchecked, i.checked);
+                    }
+                }
+            }));
+
+            // wait until all folders in hierarchy have been
+            // processed before setting the layer's visible layers
+            if (!isChildFolder) {
+                this.control._setVisibleLayers();
+            }
+        },
+
+        _hasAnyVisibleLayer: function () {
+            var slNodes = this._getSubLayerNodes();
+            return array.some(slNodes, lang.hitch(this, function (node) {
+                if (domAttr.get(node, 'data-layer-folder')) {
+                    var folderControl = this._getFolderControl(node);
+                    if (folderControl) {
+                        return folderControl._hasAnyVisibleLayer();
+                    }
+                    return true;
+                }
+                return (domAttr.get(node, 'data-checked') === 'checked');
+            }));
+        },
+
+        _hasAnyInvisibleLayer: function () {
+            var slNodes = this._getSubLayerNodes();
+            return array.some(slNodes, lang.hitch(this, function (node) {
+                if (domAttr.get(node, 'data-layer-folder')) {
+                    var folderControl = this._getFolderControl(node);
+                    if (folderControl) {
+                        return folderControl._hasAnyInvisibleLayer();
+                    }
+                    return true;
+                }
+                return (domAttr.get(node, 'data-checked') !== 'checked');
+            }));
+        },
+
+        _getSubLayerNodes: function () {
+            var layerIds = this.control.controlOptions.layerIds;
+            var subLayerInfos = [];
+            if (this.control.controlOptions.subLayerInfos && !this.control.controlOptions.includeUnspecifiedLayers) {
+                subLayerInfos = array.map(this.control.controlOptions.subLayerInfos, function (sli) {
+                    return sli.id;
+                });
+            }
+
+            var subLayerNodes = query('.' + this.control.layer.id + '-layerControlSublayerCheck', this.domNode);
+            return array.filter(subLayerNodes, lang.hitch(this, function (node) {
+                var subLayerID = parseInt(domAttr.get(node, 'data-sublayer-id'), 10);
+                // is the sublayer contained in this folder
+                if (array.indexOf(this.sublayerInfo.subLayerIds, subLayerID) < 0) {
+                    return false;
+                // is the sublayer included in layer's layerIds (if they are defined)
+                } else if (layerIds.length && array.indexOf(layerIds, subLayerID) < 0) {
+                    return false;
+                // is the sublayer included in layer's subLayerInfos (if they are defined)
+                } else if (subLayerInfos.length && array.indexOf(subLayerInfos, subLayerID) < 0) {
+                    return false;
+                }
+                return true;
+            }));
+        },
+
+        _getFolderControl: function (node) {
+            var subLayerID = parseInt(domAttr.get(node, 'data-sublayer-id'), 10);
+            var controls = array.filter(this.control._folderControls, function (control) {
+                return (control.sublayerInfo.id === subLayerID);
+            });
+            if (controls.length) {
+                return controls[0];
+            }
+            return null;
+        },
+
+        // set visibility of folder (group layer) based on the visibility
+        // of children sub-layers and folders
+        _checkFolderVisibility: function () {
+            var checkNode = this.checkNode,
+                i = this.icons;
+
+            var hasVisible = this._hasAnyVisibleLayer();
+            var hasHidden = this._hasAnyInvisibleLayer();
+
+            domClass.remove(checkNode, i.checked);
+            domClass.remove(checkNode, i.unchecked);
+            domClass.remove(checkNode, i.indeterminate);
+
+            // indeterminate - both visible and invisible layers in group
+            if (hasVisible && hasHidden) {
+                domAttr.set(checkNode, 'data-checked', 'indeterminate');
+                domClass.add(checkNode, i.indeterminate);
+            } else if (hasVisible) {
                 domAttr.set(checkNode, 'data-checked', 'checked');
-                domClass.replace(checkNode, i.checked, i.unchecked);
+                domClass.add(checkNode, i.checked);
             } else {
                 domAttr.set(checkNode, 'data-checked', 'unchecked');
-                domClass.replace(checkNode, i.unchecked, i.checked);
+                domClass.add(checkNode, i.unchecked);
             }
         },
+
         // check scales and add/remove disabled classes from checkbox
         _checkboxScaleRange: function () {
             var node = this.checkNode,

viewer/js/gis/dijit/LayerControl/css/LayerControl.css

@@ -88,16 +88,16 @@
     color: #666;
 }
 
+.layerControlDijit .layerControlTableExpand .layerControlIcon-Folder {
+    color: #F4D57A;
+}
+
 .layerControlDijit .layerControlTableCheck .fa-border {
     border-color: #333;
     border-radius: 3px;
     padding: 0.15em 0.1875em 0.1125em;
 }
 
-.layerControlDijit .layerControlTableCheck .layerControlIcon-Folder {
-    color: #333;
-}
-
 .layerControlDijit .layerControlTableCheck .layerControlIcon-Checked {
     color: #090;
 }