leaflet-geocoder-ban - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
   "name": "leaflet-geocoder-ban",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "standard"
+    "test": "standard",
+    "babel": "babel src -d dist",
+    "minifyCSS": "cleancss -o dist/leaflet-geocoder-ban.min.css src/leaflet-geocoder-ban.css",
+    "build": "npm run babel && npm run minifyCSS"
   },
@@ -24,4 +27,8 @@ "repository": {
   "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-minify": "^0.5.0",
+    "clean-css-cli": "^4.2.1",
     "standard": "^10.0.3"
   }
 }

README.md

 # leaflet-geocoder-ban [![NPM version](https://img.shields.io/npm/v/leaflet-geocoder-ban.svg)](https://www.npmjs.com/package/leaflet-geocoder-ban) ![Leaflet 1.0.0 compatible!](https://img.shields.io/badge/Leaflet%201.0.0-%E2%9C%93-1EB300.svg?style=flat)
 A simple Leaflet Plugin to add a geocoding control to your map, powered by the french [BAN](https://adresse.data.gouv.fr/) (Base Adresse Nationale) API. This API only covers French addresses.
 
-Check the online [demo](https://entrepreneur-interet-general.github.io/leaflet-geocoder-ban/demo/).
+Check the online demos : [demo1](https://entrepreneur-interet-general.github.io/leaflet-geocoder-ban/demo/demo_control.html) and [demo2](https://entrepreneur-interet-general.github.io/leaflet-geocoder-ban/demo/demo_search_bar.html).
 
@@ -18,3 +18,6 @@ # Installation
 
-Then, load the two leaflet-geocoder-ban files located in the src folder :
+Then, load the two leaflet-geocoder-ban files : the js and the css.
+
+They are located in the src folder and minified versions are provided in the dist folder. You can load them directly in your html page :
+
 ```html
@@ -50,2 +53,3 @@ <script src="leaflet-geocoder-ban.js"></script>
 | minIntervalBetweenRequests |integer      | 250          | delay in milliseconds between two API calls made by the geocoder |
+| style                      | string      | 'control'    | style of the geocoder, either 'control' or 'searchBar'. See the two demos page. |
 
@@ -85,6 +89,11 @@ ## example
 |------------------|-----------------------------|
+| remove()         | removes the geocoder       |
+
+Those methods are only available for the 'control' style (and not for the 'searchBar' style):
+
+| method           |    description              |
+|------------------|-----------------------------|
 | collapse()       | collapses the geocoder      |
 | expand()         | expands the geocoder        |
 | toggle()         | toggles between expanded and collapsed state |
-| remove()         | removes the geocoder       |
 
@@ -100,1 +109,11 @@ ## example
 ```
+
+# Customize the search bar look
+Customization of the search bar CSS is available through the searchBar class. For example :
+
+```css
+.searchBar {
+  border: 1px solid red !important;
+  max-width: 500px;
+}
+```

src/leaflet-geocoder-ban.js

@@ -23,2 +23,3 @@ /* global define, XMLHttpRequest */
       position: 'topleft',
+      style: 'control',
       placeholder: 'adresse',
@@ -45,16 +46,16 @@ resultsNumber: 7,
       var input
-
+      
       map.on('click', this.collapseHack, this)
-
+      
       icon.innerHTML = ' '
       icon.type = 'button'
-
+      
       input = this.input = L.DomUtil.create('input', '', form)
       input.type = 'text'
       input.placeholder = this.options.placeholder
-
+      
       this.alts = L.DomUtil.create('ul',
-        className + '-alternatives ' + className + '-alternatives-minimized',
-        container)
-
+      className + '-alternatives ' + className + '-alternatives-minimized',
+      container)
+      
       L.DomEvent.on(icon, 'click', function (e) {
@@ -65,6 +66,6 @@ this.toggle()
       L.DomEvent.addListener(input, 'keyup', this.keyup, this)
-
+      
       L.DomEvent.disableScrollPropagation(container)
       L.DomEvent.disableClickPropagation(container)
-
+      
       if (!this.options.collapsed) {
@@ -76,11 +77,28 @@ this.expand()
       }
-      return container
+      if (this.options.style === 'searchBar') {
+        L.DomUtil.addClass(container, 'searchBar')
+        var rootEl = document.getElementsByClassName('leaflet-control-container')[0]
+        rootEl.appendChild(container)
+        return L.DomUtil.create('div', 'hidden')
+      } else {
+        return container
+      }
     },
-    toggle: function () {
-      if (L.DomUtil.hasClass(this.container, 'leaflet-control-geocoder-ban-expanded')) {
+    minimizeControl() {
+      if (this.options.style === 'control') {
         this.collapse()
       } else {
-        this.expand()
+        // for the searchBar: only hide results, not the bar
+        L.DomUtil.addClass(this.alts, 'leaflet-control-geocoder-ban-alternatives-minimized')
       }
     },
+    toggle: function () {
+      if (this.style != 'searchBar') {
+        if (L.DomUtil.hasClass(this.container, 'leaflet-control-geocoder-ban-expanded')) {
+          this.collapse()
+        } else {
+          this.expand()
+        }
+      }
+    },
     expand: function () {
@@ -101,3 +119,3 @@ L.DomUtil.addClass(this.container, 'leaflet-control-geocoder-ban-expanded')
       if (e.originalEvent instanceof MouseEvent) {
-        this.collapse()
+        this.minimizeControl()
       }
@@ -128,3 +146,3 @@ },
           // escape
-          this.collapse()
+          this.minimizeControl()
           L.DomEvent.preventDefault(e)
@@ -191,3 +209,3 @@ break
       var clickHandler = function (e) {
-        this.collapse()
+        this.minimizeControl()
         this.geocodeResult(feature)
@@ -211,3 +229,3 @@ }
     geocodeResult: function (feature) {
-      this.collapse()
+      this.minimizeControl()
       this.markGeocode(feature)
@@ -214,0 +232,0 @@ },

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27462

65.37%

Number of package files

13

62.5%

Lines of code

351

13.96%

Number of lines in readme file

116

19.59%

Worsened metrics

Dev dependency count

5

400%

Number of low quality alerts

1

Infinity%

No dependency changes