google-address-autocomplete - npm Package Compare versions

Comparing version 1.0.3 to 1.1.1

.eslintrc.json

@@ -5,3 +5,4 @@ {
         "no-plusplus": "off",
-        "strict": "off"
+        "strict": "off",
+        "import/no-extraneous-dependencies": "off"
     },
@@ -8,0 +9,0 @@ "globals": {

CONTRIBUTING.md

@@ -7,3 +7,3 @@ # Contributing
 2. Then `cd` into the directory and install all dependencies `cd google-address-autocomplete && npm install`
-3. From the command line, enter `npm start:contrib` and rollup will start watching for changes.
+3. From the command line, enter `npm start` and rollup will start watching for changes.
 4. Navigate to `contrib/example.html` and open that file in a browser. You should be able to make changes and refresh that page to see your changes.
@@ -10,0 +10,0 @@ 5. Once you are all finished, run `npm run lint:fix` to fix all of the linting issues. There may be some that you have to manually fix.

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}(),AddressAutocomplete=function(){function e(t,a){if(_classCallCheck(this,e),this.element=document.querySelector(t),!this.element)throw new Error("The element you specified is not a valid element. You should attach an input using a class '.some-class' or an ID '#some-id'.");this.callback=a,this.extractAddress=this.extractAddress.bind(this),this.getUsersLocation=this.getUsersLocation.bind(this),this.handle()}return _createClass(e,[{key:"handle",value:function(){var e=this;document.onreadystatechange=function(){e.initializeAutocomplete(),e.element.addEventListener("focus",e.getUsersLocation)}}},{key:"initializeAutocomplete",value:function(){this.autocomplete=new google.maps.places.Autocomplete(this.element,{types:["geocode"]}),this.autocomplete.addListener("place_changed",this.extractAddress)}},{key:"extractAddress",value:function(){for(var e={street_number:"short_name",route:"long_name",locality:"long_name",administrative_area_level_1:"short_name",country:"long_name",postal_code:"short_name"},t=this.autocomplete.getPlace(),a=t.address_components,o=t.formatted_address,n={streetNumber:"",streetName:"",cityName:"",stateAbbr:"",zipCode:""},s=0;s<a.length;s++){var r=a[s].types[0];if(e[r])switch(r){case"street_number":n.streetNumber=a[s].long_name;break;case"route":n.streetName=a[s].long_name;break;case"locality":n.cityName=a[s].long_name;break;case"administrative_area_level_1":n.stateAbbr=a[s].short_name,n.state=a[s].long_name;break;case"postal_code":n.zipCode=a[s].long_name;break;case"country":n.countryAbbr=a[s].short_name,n.country=a[s].long_name}}var c=Object.assign({},n,{formattedAddress:o});this.callback(c)}},{key:"getUsersLocation",value:function(){var e=this;navigator.geolocation&&navigator.geolocation.getCurrentPosition(function(t){var a={lat:t.coords.latitude,lng:t.coords.longitude},o=new google.maps.Circle({center:a,radius:t.coords.accuracy});e.autocomplete.setBounds(o.getBounds())})}}]),e}();module.exports=AddressAutocomplete;
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}(),AddressAutocomplete=function(){function e(t,a){if(_classCallCheck(this,e),this.element=document.querySelector(t),!this.element)throw new Error("The element you specified is not a valid element. You should attach an input using a class '.some-class' or an ID '#some-id'.");this.callback=a,this.extractAddress=this.extractAddress.bind(this),this.getUsersLocation=this.getUsersLocation.bind(this),this.handle()}return _createClass(e,[{key:"handle",value:function(){var e=this;document.addEventListener("readystatechange",function(){e.initializeAutocomplete(),e.element.addEventListener("focus",e.getUsersLocation)})}},{key:"initializeAutocomplete",value:function(){this.autocomplete=new google.maps.places.Autocomplete(this.element,{types:["geocode"]}),this.autocomplete.addListener("place_changed",this.extractAddress)}},{key:"extractAddress",value:function(){for(var e={street_number:"short_name",route:"long_name",locality:"long_name",administrative_area_level_1:"short_name",country:"long_name",postal_code:"short_name"},t=this.autocomplete.getPlace(),a=t.address_components,o=t.formatted_address,n={streetNumber:"",streetName:"",cityName:"",stateAbbr:"",zipCode:""},s=0;s<a.length;s++){var r=a[s].types[0];if(e[r])switch(r){case"street_number":n.streetNumber=a[s].long_name;break;case"route":n.streetName=a[s].long_name;break;case"locality":n.cityName=a[s].long_name;break;case"administrative_area_level_1":n.stateAbbr=a[s].short_name,n.state=a[s].long_name;break;case"postal_code":n.zipCode=a[s].long_name;break;case"country":n.countryAbbr=a[s].short_name,n.country=a[s].long_name}}var c=Object.assign({},n,{formattedAddress:o});this.callback(c)}},{key:"getUsersLocation",value:function(){var e=this;navigator.geolocation&&navigator.geolocation.getCurrentPosition(function(t){var a={lat:t.coords.latitude,lng:t.coords.longitude},o=new google.maps.Circle({center:a,radius:t.coords.accuracy});e.autocomplete.setBounds(o.getBounds())})}}]),e}();module.exports=AddressAutocomplete;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "google-address-autocomplete",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "This is a package that gives an input address autocomplete by using Google's lookup.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dericcain/google-address-autocomplete.git"
+  },
   "keywords": [
@@ -24,2 +28,3 @@ "autocomplete",
     "husky": "^0.14.3",
+    "lint-staged": "^4.2.3",
     "prettier": "^1.7.4",
@@ -26,0 +31,0 @@ "rollup": "^0.50.0",

README.md

 # Google Address Autocomplete
 > A library that attaches Google address autocomplete to a text input.
 
+![screenshot](screenshot.gif)
+
 ## Dependencies
 - [Google Places Library](https://maps.googleapis.com/maps/api/js?key=YOU_GOOGLE_API_KEY_GOES_HERE&libraries=places)
+
 ## Installation
@@ -12,4 +15,29 @@ ```bash
 ## Usage
-Once you have it installed, you can then use it in your JS files like so:
+There are a couple of ways that you can use the library and both are explained below:
 
+#### 1. As a JS module
+You can import the libarary using the `import` keyword. You will need to make sure that you are using something like Weback to transpile your code, because at this time, browsers do not support import modules.
+
+```JavaScript
+import AddressAutocomplete from 'google-address-autocomplete';
+
+// Use a callback here to get the results
+new AddressAutocomplete('#my-input-id-or-class-name', results => {
+  const addressObject = results;
+
+  // This is what the results object looks like
+  results = {
+    cityName: "Birmingham",
+    country: "United States",
+    countryAbbr: "US",
+    formattedAddress: "123 Shades Crest Rd, Birmingham, AL 35226, USA",
+    state: "Alabama",
+    stateAbbr: "AL",
+    streetName: "Shades Crest Road",
+    streetNumber: "123",
+    zipCode: "35226",
+  };
+});
+```
+And include your final bundle in your HTML like this.
 ```HTML
@@ -36,28 +64,45 @@ <!DOCTYPE html>
 
-```JavaScript
-import AddressAutocomplete from 'google-address-autocomplete';
+#### 2. Include the compiled script in your HTML
+If you are not using something like Webpack to bundle your assets and you just want to use the library on the page, you can use this process.
+```HTML
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <label for="my-input-id-or-class-name">Enter the first address here</label>
+  <!-- Here we are giving our input and ID so we can tell autocomplete where to work -->
+  <input type="text" id="my-input-id-or-class-name" name="my-input-id-or-class-name" />
 
-// Use a callback here to get the results
-new AddressAutocomplete('#my-input-id-or-class-name', results => {
-  const addressObject = results;
+  <!-- This is the one external dependency that is needed in order to make this package work -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOU_GOOGLE_API_KEY_GOES_HERE&libraries=places"></script>
+  <!-- 
+    You can either point to the node_modules folder or you can copy the file from the node_modules 
+    and place it in your public directory and use it there. Here, we are pointing to the
+    node_modules folder.
+  -->
+  <script src="../node_modules/google-address-autocomplete/dist/google-address-autocomplete.min.js"></script>
+  <script>
+    
+    // Now you can use the library as you normally would
+    new AddressAutocomplete('#address1', function (result) {
+      console.log(result);
+    });
 
-  // This is what the results object looks like
-  results = {
-    cityName: "Birmingham",
-    country: "United States",
-    countryAbbr: "US",
-    formattedAddress: "123 Shades Crest Rd, Birmingham, AL 35226, USA",
-    state: "Alabama",
-    stateAbbr: "AL",
-    streetName: "Shades Crest Road",
-    streetNumber: "123",
-    zipCode: "35226",
-  };
-});
+    new AddressAutocomplete('#address2', function (result) {
+      console.log(result);
+    });
+  </script>
+</body>
+</html>
 ```
 
 ## Contributing
-See [the contributing guide](./CONTRIBUTING.ms)
+See [the contributing guide](./CONTRIBUTING.md)
 
 ## Issues
 If you find an issue, submit it and let's fix it!

rollup.config.js

@@ -1,27 +0,4 @@
-import babel from 'rollup-plugin-babel';
-import uglify from 'rollup-plugin-uglify';
+import moduleConfig from './scripts/module-config';
+import onPageAssetConfig from './scripts/on-page-config';
 
-export default {
-  input: './src/index.js',
-  output: {
-    file: 'dist/index.js',
-    format: 'cjs',
-    moduleName: 'AddressAutocomplete',
-    sourceMap: true,
-  },
-  plugins: [
-    babel({
-      exclude: './node_modules',
-      babelrc: false,
-      presets: [
-        [
-          'env',
-          {
-            modules: false,
-          },
-        ],
-      ],
-    }),
-    uglify(),
-  ],
-};
+export default [moduleConfig, onPageAssetConfig];

src/index.js

@@ -40,6 +40,6 @@ /**
     // When the document is ready, we need to fire everything off.
-    document.onreadystatechange = () => {
+    document.addEventListener('readystatechange', () => {
       this.initializeAutocomplete();
       this.element.addEventListener('focus', this.getUsersLocation);
-    };
+    });
   }
@@ -46,0 +46,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

539466

increased by2129.94%

Number of package files

14

increased by16.67%

Number of lines in readme file

106

increased by73.77%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

13

increased by8.33%

Lines of code

226

decreased by-31.93%

No dependency changes