feature added

"openPopupOnHover" option added. if this options set as true, the popup window that contains tags will be open at mouseover time #4
maydemirx · Apr 21, 2017 · f516f23 · f516f23
1 parent 128124d
commit f516f23
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 21 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -18,31 +18,65 @@
 <h1>Leaflet Tag Filter Button Demo</h1>
 <p></p>
 <div id="map" style="width: 100%; height: 400px"></div>
+<br/>
+<div id="map2" style="width: 100%; height: 400px"></div>
 
 
 <script type="text/javascript">
 
 $(function(argument) {
-	var map = L.map('map').setView([36.86, 30.75], 12);
-	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWF5ZGVtaXJ4IiwiYSI6ImNpbGIweWdmMDAwM3h2cWx6a2QxaTc5YmMifQ.dpkSDE4DYKn6in5ODl_pWg', {
-			maxZoom: 18,
-			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
-				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
-				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
-			id: 'mapbox.streets'
-		}).addTo(map);
-
-
-	var fastMarker = L.marker([36.8963965256, 30.7087719440], { tags: ['fast'] }).addTo(map).bindPopup('fast'); 
-	var slowMarker = L.marker([36.8967740487, 30.7107782364], { tags: ['slow'] }).addTo(map).bindPopup('slow');
-	var bothMarker = L.marker([36.8881768737, 30.7024331594], { tags: ['fast', 'slow'] }).addTo(map).bindPopup('fast & slow');
-
-	//
-
-	L.control.tagFilterButton({
-        data: ['fast', 'slow', 'none'],
-        icon: '<img src="filter.png">'
-    }).addTo( map );
+
+	function initializeFirstMap() {
+		var map = L.map('map').setView([36.86, 30.75], 12);
+		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWF5ZGVtaXJ4IiwiYSI6ImNpbGIweWdmMDAwM3h2cWx6a2QxaTc5YmMifQ.dpkSDE4DYKn6in5ODl_pWg', {
+				maxZoom: 18,
+				attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+					'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+					'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+				id: 'mapbox.streets'
+			}).addTo(map);
+
+
+		var fastMarker = L.marker([36.8963965256, 30.7087719440], { tags: ['fast'] }).addTo(map).bindPopup('fast'); 
+		var slowMarker = L.marker([36.8967740487, 30.7107782364], { tags: ['slow'] }).addTo(map).bindPopup('slow');
+		var bothMarker = L.marker([36.8881768737, 30.7024331594], { tags: ['fast', 'slow'] }).addTo(map).bindPopup('fast & slow');
+
+		//
+
+		L.control.tagFilterButton({
+	        data: ['fast', 'slow', 'none'],
+	        icon: '<img src="filter.png">',
+	        openPopupOnHover: false
+	    }).addTo( map );
+	}
+
+	function initializeSecondMap() {
+		var map = L.map('map2').setView([36.86, 30.75], 12);
+		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWF5ZGVtaXJ4IiwiYSI6ImNpbGIweWdmMDAwM3h2cWx6a2QxaTc5YmMifQ.dpkSDE4DYKn6in5ODl_pWg', {
+				maxZoom: 18,
+				attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+					'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+					'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+				id: 'mapbox.streets'
+			}).addTo(map);
+
+
+		var fastMarker = L.marker([36.8963965256, 30.7087719440], { tags: ['fast'] }).addTo(map).bindPopup('fast'); 
+		var slowMarker = L.marker([36.8967740487, 30.7107782364], { tags: ['slow'] }).addTo(map).bindPopup('slow');
+		var bothMarker = L.marker([36.8881768737, 30.7024331594], { tags: ['fast', 'slow'] }).addTo(map).bindPopup('fast & slow');
+
+		//
+
+		L.control.tagFilterButton({
+	        data: ['fast', 'slow', 'none'],
+	        icon: '<img src="filter.png">',
+	        openPopupOnHover: true
+	    }).addTo( map );
+	}
+
+	initializeFirstMap();
+	initializeSecondMap();
+
 });
 
 </script>

diff --git a/src/leaflet-tag-filter-button.js b/src/leaflet-tag-filter-button.js
@@ -8,6 +8,7 @@
             data: null, // the data to be used for tags popup, it can be array or function
             clearText: 'clear', // the text of the clear button
             filterOnEveryClick: false, // if set as true the plugin do filtering operation on every click event on the checkboxes
+            openPopupOnHover: false, // if set as true the popup that contains tags will be open at mouse hover time
 
             ajaxData: null // it can be used for remote data TODO: implement it!
         },
@@ -295,6 +296,10 @@
 
         _showTagFilterPopup: function() {
 
+            if (this._tagFilterPopupIsOpen()) {
+                return;
+            }
+
             this._easyButton.button.style.display = "none";
             this._filterInfo.style.display = "none";
 
@@ -316,6 +321,10 @@
 
         },
 
+        _tagFilterPopupIsOpen: function() {
+            return this._container.style.display == 'block';
+        },
+
         filter: function() {
             var checkboxContainer = (this._container.getElementsByTagName('div')[0]),
                 childCount = this._tagEl.childElementCount,
@@ -357,7 +366,13 @@
 
         addTo: function(map) {
             this._map = map;
-            this._easyButton = L.easyButton(this.options.icon, this._showTagFilterPopup.bind(this)).addTo(map);
+            if (this.options.openPopupOnHover) {
+                this._easyButton = L.easyButton(this.options.icon, function() {
+                }).addTo(map);
+                L.DomEvent.addListener(this._easyButton._container, 'mouseover', this._showTagFilterPopup.bind(this));
+            } else {
+                this._easyButton = L.easyButton(this.options.icon, this._showTagFilterPopup.bind(this)).addTo(map);
+            }
             this._container = L.DomUtil.create('div', 'tag-filter-tags-container', this._easyButton._container);
 
             if (!L.Browser.touch) {