- Buttons to enable / disable all layers on a group. New options:

- Fixed bug on leaflet 0.7.7 getting map size when container_maxHeight was not set. - Some css tweaks
davicustodio · Sep 20, 2016 · 6afc000 · 6afc000
1 parent d50de93
commit 6afc000
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 10 deletions.
diff --git a/css/styledLayerControl.css b/css/styledLayerControl.css
@@ -22,12 +22,12 @@
 
 .ac-container{
 	width: auto;
-	margin: 10px auto 10px auto;
 	text-align: left;
 	overflow-y: auto;
 	overflow-x: hidden;
 	height: auto;
 }
+
 div[id^="leaflet-control-accordion-layers"] > label {
 	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 	padding: 5px 20px;
@@ -55,6 +55,7 @@ div[id^="leaflet-control-accordion-layers"] > label {
     box-sizing: content-box;
     cursor:pointer;
     width: auto;
+    margin: 0;
 }
 div[id^="leaflet-control-accordion-layers"] > label:hover {
 	background: #fff;
@@ -89,6 +90,7 @@ div[id^="leaflet-control-accordion-layers"] > label:hover {
 	margin-top: -1px;
 	overflow: hidden;
 	height: 0px;
+    padding: 0px;
     line-height: 0px;
 	position: relative;
 	z-index: 10;
@@ -105,13 +107,12 @@ div[id^="leaflet-control-accordion-layers"] > label:hover {
 	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
 	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
 	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
 }
 
 .ac-container input.menu:checked ~ article.ac-large{
 	height: auto;
 	max-height : 100px;
-	padding-top: 5px;
+	padding: 8px 0;
 	overflow-y: auto;
     line-height: 18px;
 }
@@ -121,6 +122,19 @@ div[id^="leaflet-control-accordion-layers"] > label:hover {
     cursor: pointer;
 }
 
+.ac-container .group-toggle-container {
+    text-align: right;
+    margin-right: 3px;
+    line-height: 0px;
+    display: none;
+    height: 20px;
+}
+
+.ac-container input.menu:checked ~ .group-toggle-container {
+    display: block;
+	line-height: 1em;
+}
+
 .menu-item-radio{
 	font-family: 'Ubuntu-Regular', Arial, sans-serif;
 	font-size: 13px;
@@ -147,6 +161,10 @@ div[id^="leaflet-control-accordion-layers"] > label:hover {
     vertical-align: middle;
 }
 
+.leaflet-control-layers-expanded {
+    padding: 5px;
+}
+
 .leaflet-control-layers:hover {
 	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
 	background: #e0e3ec url(images/bgnoise_lg.jpg) repeat top left;

diff --git a/src/styledLayerControl.js b/src/styledLayerControl.js
@@ -2,7 +2,12 @@ L.Control.StyledLayerControl = L.Control.Layers.extend({
     options: {
         collapsed: true,
         position: 'topright',
-        autoZIndex: true
+        autoZIndex: true,
+        group_togglers: {
+            show: false,
+            labelAll: 'All',
+            labelNone: 'None'
+        }
     },
 
     initialize: function(baseLayers, groupedOverlays, options) {
@@ -178,7 +183,7 @@ L.Control.StyledLayerControl = L.Control.Layers.extend({
             }
 
             // set the max-height of control to y value of map object
-            this._default_maxHeight = this.options.container_maxHeight ? this.options.container_maxHeight : (this._map._size.y - 70);
+            this._default_maxHeight = this.options.container_maxHeight ? this.options.container_maxHeight : (this._map.getSize().y - 70);
             containers[c].style.maxHeight = this._default_maxHeight + "px";
 
         }
@@ -351,7 +356,7 @@ L.Control.StyledLayerControl = L.Control.Layers.extend({
         L.DomEvent.on(input, 'click', this._onInputClick, this);
 
         var name = document.createElement('label');
-        name.innerHTML = '<label for="' + id + '"> ' + obj.name + '</label>';
+        name.innerHTML = '<label for="' + id + '">' + obj.name + '</label>';
 
         label.appendChild(input);
         label.appendChild(name);
@@ -407,14 +412,61 @@ L.Control.StyledLayerControl = L.Control.Layers.extend({
             }
 
             groupContainer.innerHTML = inputElement + inputLabel;
-            groupContainer.appendChild(article);
-            container.appendChild(groupContainer);
+            groupContainer.appendChild(article);
+
+            // Link to toggle all layers
+            if (obj.overlay && this.options.group_togglers.show) {
+
+                // Toggler container
+                var togglerContainer = L.DomUtil.create('div', 'group-toggle-container', groupContainer);
+
+                // Link All
+                var linkAll = L.DomUtil.create('a', 'group-toggle-all', togglerContainer);
+                linkAll.href = '#';
+                linkAll.title = this.options.group_togglers.labelAll;
+                linkAll.innerHTML = this.options.group_togglers.labelAll;
+                linkAll.setAttribute("data-group-name", obj.group.name);
+
+                if (L.Browser.touch) {
+                    L.DomEvent
+                        .on(linkAll, 'click', L.DomEvent.stop)
+                        .on(linkAll, 'click', this._onSelectGroup, this);
+                } else {
+                     L.DomEvent
+                        .on(linkAll, 'click', L.DomEvent.stop)
+                        .on(linkAll, 'focus', this._onSelectGroup, this);
+                }
+
+                // Separator
+                var separator = L.DomUtil.create('span', 'group-toggle-divider', togglerContainer);
+                separator.innerHTML = ' / ';
+
+                // Link none
+                var linkNone = L.DomUtil.create('a', 'group-toggle-none', togglerContainer);
+                linkNone.href = '#';
+                linkNone.title = this.options.group_togglers.labelNone;
+                linkNone.innerHTML = this.options.group_togglers.labelNone;
+                linkNone.setAttribute("data-group-name", obj.group.name);
+
+                if (L.Browser.touch) {
+                    L.DomEvent
+                        .on(linkNone, 'click', L.DomEvent.stop)
+                        .on(linkNone, 'click', this._onUnSelectGroup, this);
+                } else {
+                     L.DomEvent
+                        .on(linkNone, 'click', L.DomEvent.stop)
+                        .on(linkNone, 'focus', this._onUnSelectGroup, this);
+                }
+            }
+
+            container.appendChild(groupContainer);
 
             this._domGroups[obj.group.id] = groupContainer;
         } else {
-            groupContainer.lastElementChild.appendChild(label);
+            groupContainer.getElementsByTagName('article')[0].appendChild(label);
         }
-
+
+
         return label;
     },
 
@@ -464,6 +516,14 @@ L.Control.StyledLayerControl = L.Control.Layers.extend({
         return false;
     },
 
+    _onSelectGroup: function(e) {
+        this.selectGroup(e.target.getAttribute("data-group-name"));
+    },
+
+    _onUnSelectGroup: function(e) {
+        this.unSelectGroup(e.target.getAttribute("data-group-name"));
+    },
+
     _expand: function() {
         L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
     },