google-maps-reviews - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

google-maps-reviews.js

@@ -1,2 +0,2 @@
-// Copyright (c) 2018, Simon Neutert
+// Copyright (c) 2021, Simon Neutert
 //
@@ -27,57 +27,70 @@ // Permission to use, copy, modify, and/or distribute this software for any
 
-export default function googlePlaces(elem, options) {
+export default function googlePlaces(google, elem, options) {
   // This is the easiest way to have default options.
-  var settings = {
+  let settings = {
     // These are the defaults.
     header: "<h3>Google Reviews</h3>",
-    footer: '',
-    max_rows: 6,
-    min_rating: 4,
-    months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-    text_break_length: "90",
-    shorten_names: true,
-    replace_anonymous: false,
-    anonymous_name: "A Google User",
-    anonymous_name_replacement: "User chose to remain anonymous",
-    show_date: false,
-    show_profile_picture: false,
-    placeId: ""
+    footer: "",
+    maxRows: 6,
+    minRating: 4,
+    months: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+    textBreakLength: "90",
+    shortenNames: true,
+    replaceAnonymous: false,
+    anonymousName: "A Google User",
+    anonymousNameReplacement: "User chose to remain anonymous",
+    showDate: false,
+    showProfilePicture: false,
+    placeId: "",
   };
-  settings = Object.assign({}, settings, options);
-  var target_div = document.getElementById(elem);
+  settings = { ...settings, ...options };
+  const targetDiv = document.getElementById(elem);
 
-  var renderHeader = function (header) {
-    var html = "";
-    html += header + "<br>";
-    target_div.innerHTML += html;
+  const renderHeader = (header) => {
+    let html = "";
+    html += `${header}<br>`;
+    targetDiv.innerHTML += html;
   };
 
-  var renderFooter = function (footer) {
-    var html = "";
-    html += "<br>" + footer + "<br>";
-    target_div.innerHTML += html;
+  const renderFooter = (footer) => {
+    let html = "";
+    html += `<br>${footer}<br>`;
+    targetDiv.innerHTML += html;
   };
 
-  var shortenName = function (name) {
+  const shortenName = (name) => {
     if (name.split(" ").length > 1) {
-      var split_name = name.split(" ");
-      var first_name = split_name[0];
-      var last_name_first_letter = split_name[1][0];
+      const splitName = name.split(" ");
+      const firstName = splitName[0];
+      const lastNameFirstLetter = splitName[1][0];
 
-      if (last_name_first_letter == ".") {
-        return first_name;
-      } else {
-        return first_name + " " + last_name_first_letter + ".";
+      if (lastNameFirstLetter === ".") {
+        return firstName;
       }
-    } else if (name != undefined) {
+      return `${firstName} ${lastNameFirstLetter}.`;
+    }
+    if (name !== undefined) {
       return name;
-    } else {
-      return settings.anonymous_name;
     }
+    return settings.anonymousName;
   };
 
-  var renderStars = function (rating) {
-    var stars = '<div class="review-stars"><ul>';
+  const renderStars = (rating) => {
+    let stars = '<div class="review-stars"><ul>';
     // fill in gold stars
-    for (var i = 0; i < rating; i++) {
+
+    for (let i = 0; i < rating; i += 1) {
       stars += '<li><i class="star"></i></li>';
@@ -87,3 +100,3 @@ }
     if (rating < 5) {
-      for (var i = 0; i < (5 - rating); i++) {
+      for (let i = 0; i < 5 - rating; i += 1) {
         stars += '<li><i class="star inactive"></i></li>';
@@ -96,98 +109,113 @@ }
 
-  var convertTime = function (UNIX_timestamp) {
-    var a = new Date(UNIX_timestamp * 1000);
-    var months = settings.months;
-    var time = a.getDate() + ". " + months[a.getMonth()] + " " + a.getFullYear();
+  const convertTime = (unixTimestamp) => {
+    const a = new Date(unixTimestamp * 1000);
+    const { months } = settings;
+    const time = `${a.getDate()}. ${months[a.getMonth()]} ${a.getFullYear()}`;
     return time;
   };
 
-  var filterReviewsByMinRating = function (reviews) {
+  const filterReviewsByMinRating = (reviews) => {
+    // eslint-disable-next-line no-void
     if (reviews === void 0) {
       return [];
-    } else {
-      for (var i = reviews.length - 1; i >= 0; i--) {
-        if (reviews[i].rating < settings.min_rating) {
-          reviews.splice(i, 1);
-        }
+    }
+    for (let i = reviews.length - 1; i >= 0; i -= 1) {
+      if (reviews[i].rating < settings.minRating) {
+        reviews.splice(i, 1);
       }
-      return reviews;
     }
+    return reviews;
   };
 
-  var sortReviewsByDateDesc = function (reviews) {
-    if (typeof reviews != "undefined" && reviews != null && reviews.length != null && reviews.length > 0) {
-      return reviews.sort(function (a, b) {
-        return (a.time > b.time) ? 1 : ((b.time > a.time) ? -1 : 0);
-      }).reverse();
-    } else {
-      return []
+  const sortReviewsByDateDesc = (reviews) => {
+    if (
+      typeof reviews !== "undefined" &&
+      reviews != null &&
+      reviews.length != null &&
+      reviews.length > 0
+    ) {
+      return (
+        reviews
+          // eslint-disable-next-line no-nested-ternary
+          .sort((a, b) => (a.time > b.time ? 1 : b.time > a.time ? -1 : 0))
+          .reverse()
+      );
     }
+    return [];
   };
 
-  var renderReviews = function (reviews) {
+  const rescueAnonymousReviews = (review, name) => {
+    if (
+      settings.replaceAnonymous === true &&
+      settings.anonymousName !== "" &&
+      (review.authorName.toLowerCase() ===
+        settings.anonymousName.toLowerCase() ||
+        review.authorName === undefined) &&
+      settings.anonymousNameReplacement !== ""
+    ) {
+      return settings.anonymousNameReplacement;
+    }
+    return name;
+  };
+
+  const renderReviews = (reviews) => {
     reviews.reverse();
-    var html = "";
-    var row_count = (settings.max_rows > 0) ? settings.max_rows - 1 : reviews.length - 1;
+    let html = "";
+    let rowCount =
+      settings.maxRows > 0 ? settings.maxRows - 1 : reviews.length - 1;
 
-    // make sure the row_count is not greater than available records
-    row_count = (row_count > reviews.length - 1) ? reviews.length - 1 : row_count;
+    // make sure the rowCount is not greater than available records
+    rowCount = rowCount > reviews.length - 1 ? reviews.length - 1 : rowCount;
 
-    for (var i = row_count; i >= 0; i--) {
-      var review = reviews[i];
-      var stars = renderStars(review.rating);
-      var date = convertTime(review.time);
-      var name = settings.shorten_names ? shortenName(review.author_name) : review.author_name;
-      var style = (review.text.length > parseInt(settings.text_break_length)) ? "review-item-long" : "review-item";
-      var review_text = review.text
-      if (settings.show_date == true) {
-        review_text = "<span class='review-date'>" + date + "</span> " + review_text;
+    for (let i = rowCount; i >= 0; i -= 1) {
+      const review = reviews[i];
+      const stars = renderStars(review.rating);
+      const date = convertTime(review.time);
+      let name = settings.shortenNames
+        ? shortenName(review.authorName)
+        : review.authorName;
+      const style =
+        review.text.length > parseInt(settings.textBreakLength, 10)
+          ? "review-item-long"
+          : "review-item";
+      let reviewText = review.text;
+      if (settings.showDate === true) {
+        reviewText = `<span class='review-date'>${date}</span> ${reviewText}`;
       }
       name = rescueAnonymousReviews(review, name);
-      html = html + "<div class=" + style + "><div class='review-meta'><span class='review-author'>" + name + "</span><span class='review-sep'></span>" + "</div>" + stars + "<p class='review-text'>" + review_text + "</p></div>";
+      html =
+        `${html}<div class=${style}><div class='review-meta'><span class='review-author'>${name}</span><span class='review-sep'></span>` +
+        `</div>${stars}<p class='review-text'>${reviewText}</p></div>`;
     }
-    target_div.innerHTML += html;
+    targetDiv.innerHTML += html;
   };
 
-  var rescueAnonymousReviews = function (review, name) {
-    if (settings.replace_anonymous == true &&
-      settings.anonymous_name != "" &&
-      (
-        review.author_name.toLowerCase() == settings.anonymous_name.toLowerCase() ||
-        review.author_name == undefined
-      ) &&
-      settings.anonymous_name_replacement != "") {
-      return settings.anonymous_name_replacement;
-    } else {
-      return name;
-    }
-  }
-
   // GOOGLE PLACES API CALL STARTS HERE
 
   // initiate a Google Places Object
-  var service = new google.maps.places.PlacesService(target_div);
+  const service = new google.maps.places.PlacesService(targetDiv);
   // set.getDetails takes 2 arguments: request, callback
   // see documentation here:  https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlacesService
   const request = {
-    placeId: settings.placeId
+    placeId: settings.placeId,
   };
   // the callback is what initiates the rendering if Status returns OK
-  var callback = function (place, status) {
-    if (status == google.maps.places.PlacesServiceStatus.OK) {
-      var filtered_reviews = filterReviewsByMinRating(place.reviews);
-      var sorted_reviews = sortReviewsByDateDesc(filtered_reviews);
-      if (sorted_reviews.length > 0) {
+  const callback = (place, status) => {
+    if (status === google.maps.places.PlacesServiceStatus.OK) {
+      const filteredReviews = filterReviewsByMinRating(place.reviews);
+      const sortedReviews = sortReviewsByDateDesc(filteredReviews);
+      if (sortedReviews.length > 0) {
         renderHeader(settings.header);
-        renderReviews(sorted_reviews);
+        renderReviews(sortedReviews);
         renderFooter(settings.footer);
       }
     }
-  }
+  };
 
   if (settings.placeId === undefined || settings.placeId === "") {
     console.error("NO PLACE ID DEFINED");
-    return true
+    return true;
   }
 
   return service.getDetails(request, callback);
-}
+}

package.json

 {
   "name": "google-maps-reviews",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Display Google Reviews of a Place on Google Maps on your website",
@@ -15,3 +15,2 @@ "main": "google-maps-reviews.js",
     "google",
-    "google",
     "maps",
@@ -28,3 +27,9 @@ "maps",
   },
-  "homepage": "https://github.com/simonneutert/google-maps-reviews#readme"
+  "homepage": "https://github.com/simonneutert/google-maps-reviews#readme",
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2"
+  }
 }

Readme.md

@@ -6,32 +6,33 @@ # Display Google Reviews of a Place on Google Maps on your website
 ## Credits
+
 Inspired by Steven Monson's magnificent article here:
-https://www.launch2success.com/guide/display-google-reviews-website-2017/ or check out [Steven's github](https://github.com/stevenmonson/googleReviews). Steven's code is based on [peledies jquery plugin repo](https://github.com/peledies/google-places). So, I simply remixed their work into this repo. *Thank you guys!*
+https://www.launch2success.com/guide/display-google-reviews-website-2017/ or check out [Steven's github](https://github.com/stevenmonson/googleReviews). Steven's code is based on [peledies jquery plugin repo](https://github.com/peledies/google-places). So, I simply remixed their work into this repo. _Thank you guys!_
 
 #### Dear beginners and copy-pasters
 
-:octocat: *For those of you, who are new in programming or can only copy-paste, please make sure, that the Google Maps API and the .js-file of this plugin are successfully loaded before you call this script in the body your html page.*
+:octocat: _For those of you, who are new in programming or can only copy-paste, please make sure, that the Google Maps API and the .js-file of this plugin are successfully loaded before you call this script in the body your html page._
 
-*under demo/index.html is a working demo, the comments will guide you :wink:*
+_under demo/index.html is a working demo, the comments will guide you :wink:_
 
 ## Prerequisites
 
-__either__
+**either**
 
-* add the .js and .css of this repo to your project (see index.html for inspiration :wink:)
+- add the .js and .css of this repo to your project (see index.html for inspiration :wink:)
 
-__or__
+**or**
 
-* `$ npm install -i google-maps-reviews`
+- `$ npm install -i google-maps-reviews`
 
-__then__
+**then**
 
-* __if you do not have a working Google Maps API key already:__ create a Google API Key: [https://console.developers.google.com/apis/](https://console.developers.google.com/apis/)
+- **if you do not have a working Google Maps API key already:** create a Google API Key: [https://console.developers.google.com/apis/](https://console.developers.google.com/apis/)
 
-* add the following line with your Google Maps API key with the key param:
+- add the following line with your Google Maps API key with the key param:
 
-  ``` html
+  ```html
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=YourApiKeyHere"></script>
   ```
 
-* add an empty ***div*** element in your html's body with an unique ID, where the reviews should show up. In this case:
+- add an empty **_div_** element in your html's body with an unique ID, where the reviews should show up. In this case:
 
@@ -42,24 +43,24 @@ `<div id="google-reviews"></div>`
 
-[Grab your place's ID (https://developers.google.com/places/place-id) and call it as ***placeId*** parameter, when calling the plugin. ](https://developers.google.com/places/place-id)
+[Grab your place's ID (https://developers.google.com/places/place-id) and call it as **_placeId_** parameter, when calling the plugin. ](https://developers.google.com/places/place-id)
 
-``` html
+```html
 <!-- add this before </body> -->
 <script>
-  // Find a placeID via https://developers.google.com/places/place-id
-  googlePlaces("google-reviews", {
-    placeId: 'ChIJZa6ezJa8j4AR1p1nTSaRtuQ',
-    // the following params are optional (default values)
-    header: "<h3>Google Reviews</h3>", // html/text over Reviews
-    footer: '', // html/text under Reviews block
-    max_rows: 6, // max rows of reviews to be displayed
-    min_rating: 4, // minimum rating of reviews to be displayed
-    months: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
-    text_break_length: "90", // length before a review box is set to max width
-    show_date: false, // renders the date of the review before the review itself
-    shorten_names: true, // example: "Max Mustermann" -> "Max M.""
-    replace_anonymous: false, // do not replace anonymous author_name from JSON
-    anonymous_name: "A Google User", // Google's default value depending on language used (en: "A Google User")
-    anonymous_name_replacement: "User chose to remain anonymous", // replacement for default (never shortens)
+    // Find a placeID via https://developers.google.com/places/place-id
+    googlePlaces("google-reviews", {
+      placeId: 'ChIJZa6ezJa8j4AR1p1nTSaRtuQ',
+      // the following params are optional (default values)
+      header: "<h3>Google Reviews</h3>", // html/text over Reviews
+      footer: '', // html/text under Reviews block
+      maxRows: 6, // max rows of reviews to be displayed
+      minRating: 4, // minimum rating of reviews to be displayed
+      months: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
+      textBreakLength: "90", // length before a review box is set to max width
+      showDate: false, // renders the date of the review before the review itself
+      shortenNames: true, // example: "Max Mustermann" -> "Max M.""
+      replaceAnonymous: false, // do not replace anonymous author_name from JSON
+      anonymousName: "A Google User", // Google's default value depending on language used (en: "A Google User")
+      anonymousNameReplacement: "User chose to remain anonymous", // replacement for default (never shortens)
+    });
   });
-});
 </script>
@@ -69,2 +70,3 @@ ```
 ## Are Pull Requests welcome?
+
 Yes, of course :octocat:

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

Improved metrics

Total package byte prevSize

12881

increased by4.13%

Number of package files

7

increased by40%

Lines of code

290

increased by16.94%

Number of lines in readme file

70

increased by2.94%

Worsened metrics

Dev dependency count

4

increased byInfinity%

No dependency changes