diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..add9e4f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +# trim_trailing_whitespace = false +# insert_final_newline = false \ No newline at end of file diff --git a/Readme.md b/Readme.md index d584dff..b830a9a 100644 --- a/Readme.md +++ b/Readme.md @@ -7,80 +7,97 @@ this will get the 5 reviews, google offers you. if you need more, let me direct The NPM Package is [here](https://github.com/simonneutert/google-maps-reviews) - Frontend Devs will know how to webpack :) or simply extract the code and adapt it to your needs, dropping jQuery as a dependency. ## 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 jQuery, the Google Maps API and the .js-file of this plugin are successfully loaded, before you call this script in your html page.* +:octocat: _For those of you, who are new in programming or can only copy-paste, please make sure, that jQuery, the Google Maps API and the .js-file of this plugin are successfully loaded, before you call this script in your html page._ -*./demo/index.html is a working demo, the comments will guide you :wink:* +_./demo/index.html is a working demo, the comments will guide you :wink:_ ## Prerequisites -* You must have jQuery in your project: [jQuery](http://jquery.com) +- You must have jQuery in your project: [jQuery](http://jquery.com) -* add the .js and .css of this repo to your project (see ./demo/index.html for inspiration :wink:) +- add the .js and .css of this repo to your project (see ./demo/index.html for inspiration :wink:) -* ___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/) **make sure to set a limit to your payments** +- **_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/) **make sure to set a limit to your payments** -* 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 ``` -* add an empty ***div*** element in your html template with an unique ID, where the reviews should show up. In this case: +- add an empty **_div_** element in your html template with an unique ID, where the reviews should show up. In this case: `
` - + ## How to get link to “View All Google Reviews” or "Write a review" Please see the official Documents for this topic: https://developers.google.com/my-business/content/review-data#list_all_reviews -* Step 1. Open a browser, but don’t use Chrome. You can use Firefox, or Edge, or even Internet Explorer but not Google Chrome because it alters the URL and your link will not work correctly. +- Step 1. Open a browser, but don’t use Chrome. You can use Firefox, or Edge, or even Internet Explorer but not Google Chrome because it alters the URL and your link will not work correctly. -* Step 2. Go to [Google.com](http://www.google.com) and search for your company’s name. +- Step 2. Go to [Google.com](http://www.google.com) and search for your company’s name. -* Step 3. Find the card on the right and click “View All Google Reviews” or "Write a review" +- Step 3. Find the card on the right and click “View All Google Reviews” or "Write a review" -* Step 4. Copy the URL in the address bar. +- Step 4. Copy the URL in the address bar. -* Step 5. Now paste the URL as a link on `more_reviews_button_url` or `write_review_button_url` param. +- Step 5. Now paste the URL as a link on `more_reviews_button_url` or `write_review_button_url` param. ## Call the Plugin -[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 ``` ## Are Pull Requests welcome? + Yes, of course :octocat: **You do not need to update the demo folder!** I will do this, when your code was merged. diff --git a/demo/README.md b/demo/README.md deleted file mode 100644 index f430e74..0000000 --- a/demo/README.md +++ /dev/null @@ -1 +0,0 @@ -`$ npm update` diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index b493668..0000000 --- a/demo/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - Google Reviews Demo - - - - - - - - - - - - - - - - - - - -
- - - - - - diff --git a/demo/node_modules/jquery-google-reviews/LICENSE b/demo/node_modules/jquery-google-reviews/LICENSE deleted file mode 100644 index cebfcaf..0000000 --- a/demo/node_modules/jquery-google-reviews/LICENSE +++ /dev/null @@ -1,13 +0,0 @@ -Copyright (c) 2018, Simon Neutert - -Permission to use, copy, modify, and/or distribute this software for any -purpose with or without fee is hereby granted, provided that the above -copyright notice and this permission notice appear in all copies. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES -WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF -MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR -ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES -WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN -ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF -OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. diff --git a/demo/node_modules/jquery-google-reviews/Readme.md b/demo/node_modules/jquery-google-reviews/Readme.md deleted file mode 100644 index 181d498..0000000 --- a/demo/node_modules/jquery-google-reviews/Readme.md +++ /dev/null @@ -1,79 +0,0 @@ -# jQuery Plugin to display Google Reviews of a Place on Google Maps - -## I do not like jQuery!!!1eleven - -The NPM Package is [here](https://github.com/simonneutert/google-maps-reviews) - Frontend Devs will know how to webpack :) or simply extract the code and adapt it to your needs, dropping jQuery as a dependency. - -## 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!* - -#### Dear beginners and copy-pasters - -:octocat: *For those of you, who are new in programming or can only copy-paste, please make sure, that jQuery, the Google Maps API and the .js-file of this plugin are successfully loaded, before you call this script in your html page.* - -*./demo/index.html is a working demo, the comments will guide you :wink:* - -## Prerequisites - -* You must have jQuery in your project: [jQuery](http://jquery.com) - -* add the .js and .css of this repo to your project (see ./demo/index.html for inspiration :wink:) - -* ___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: - - ``` html - - ``` - -* add an empty ***div*** element in your html template with an unique ID, where the reviews should show up. In this case: - - `
` - -## How to get link to “View All Google Reviews” or "Write a review" - -* Step 1. Open a browser, but don’t use Chrome. You can use Firefox, or Edge, or even Internet Explorer but not Google Chrome because it alters the URL and your link will not work correctly. - -* Step 2. Go to [Google.com](http://www.google.com) and search for your company’s name. - -* Step 3. Find the card on the right and click “View All Google Reviews” or "Write a review" - -* Step 4. Copy the URL in the address bar. - -* Step 5. Now paste the URL as a link on `more_reviews_button_url` or `write_review_button_url` param. - -## Call the Plugin - -[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 - -``` - -## Are Pull Requests welcome? -Yes, of course :octocat: diff --git a/demo/node_modules/jquery-google-reviews/jquery-google-reviews.css b/demo/node_modules/jquery-google-reviews/jquery-google-reviews.css deleted file mode 100644 index 6b3756d..0000000 --- a/demo/node_modules/jquery-google-reviews/jquery-google-reviews.css +++ /dev/null @@ -1,148 +0,0 @@ -#google-reviews { - display: flex; - flex-wrap: wrap; - /*display: grid;*/ - /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/ -} - -.review-item { - border: solid 1px rgba(190, 190, 190, .35); - margin: 0 auto; - padding: 1em; - flex: 1 1 50%; - display: flex; - flex-direction: column; - align-content: stretch; -} - -@media ( max-width:1200px) { - .review-item { - flex: 1 1 50%; - } -} - -@media ( max-width:450px) { - .review-item { - flex: 1 1 90%; - } -} - -.review-item-long { - border: solid 1px rgba(190, 190, 190, .35); - margin: 0 auto; - padding: 1em; - flex: 1 1 90%; - display: flex; - flex-direction: column; - align-content: stretch; -} - -@media ( max-width:1200px) { - .review-item-long { - flex: 1 1 90%; - } -} - -@media ( max-width:450px) { - .review-item-long { - flex: 1 1 90%; - } -} - -.review-header{ - display: flex; -} - -.review-picture{ - width: 5em; - height: auto; - align-self: center; - margin-right: 1em; -} - -.review-usergrade{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; -} - -.review-meta, .review-stars { - text-align: center; - font-size: 115%; -} - -.review-author { - text-transform: capitalize; - font-weight: bold; -} - -.review-date { - opacity: .6; - display: block; -} - -.review-text { - line-height: 1.55; - text-align: left; - max-width: 100%; - text-align: justify; -} - -.review-stars ul { - display: inline-block; - list-style: none !important; - margin: 0; - padding: 0; -} - -.review-stars ul li { - float: left; - list-style: none !important; - margin-right: 1px; - line-height: 1; -} - -.review-stars ul li i { - color: #eb6e00; - /* Google's Star Orange in Nov 2017 */ - font-size: 1.4em; - font-style: normal; -} - -.review-stars ul li i.inactive { - color: #c6c6c6; -} - -.star:after { - content: "\2605"; -} - - -.buttons { - margin: 20px 0 0 0; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; -} - -.more-reviews { - text-align: center; -} - -.write-review { - text-align: center; -} - -.more-reviews a, -.write-review a { - margin: 5px; - border: 1px #eb6e00 solid; - border-radius: 40px; - padding: 10px; - background-color: #eb6e00; - color: #FFF; - text-decoration: none; -} - diff --git a/demo/node_modules/jquery-google-reviews/jquery-google-reviews.js b/demo/node_modules/jquery-google-reviews/jquery-google-reviews.js deleted file mode 100644 index 26be808..0000000 --- a/demo/node_modules/jquery-google-reviews/jquery-google-reviews.js +++ /dev/null @@ -1,194 +0,0 @@ -/* README -Inspired by Steven Monson's magnificent article here: -https://www.launch2success.com/guide/display-google-reviews-website-2017/ - -Stevens code was based on peledies jquery plugin on github: -https://github.com/peledies/google-places - -made me think and remix their work into the following lines. - -Thank you guys! -*/ - -(function($) { - - $.fn.googlePlaces = function(options) { - // This is the easiest way to have default options. - var settings = $.extend({ - // These are the defaults. - header: "

Google Reviews

", - footer: '', - maxRows: 6, - minRating: 4, - months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - textBreakLength: "90", - shortenNames: true, - placeId: "", - moreReviewsButtonUrl: '', - moreReviewsButtonLabel: 'Show More Reviews', - writeReviewButtonUrl: '', - writeReviewButtonLabel: 'Write New Review', - showReviewDate: false, - showProfilePicture: true - }, options); - - var targetDiv = this[0]; - var targetDivJquery = this; - - var renderMoreReviewsButton = function() { - return '
'+settings.moreReviewsButtonLabel+'
'; - }; - - var renderWriteReviewButton = function() { - return '
'+settings.writeReviewButtonLabel+'
'; - }; - - var renderPicture = function(picture) { - return ""; - } - - var renderHeader = function(header) { - var html = ""; - html += header + "
"; - targetDivJquery.append(html); - }; - - var renderFooter = function(footer) { - var html = ""; - var htmlButtons = ""; - - if (settings.moreReviewsButtonUrl) { - htmlButtons += renderMoreReviewsButton(); - } - if (settings.writeReviewButtonUrl) { - htmlButtons += renderWriteReviewButton(); - } - if (htmlButtons != "") { - html += '
'+htmlButtons+'
'; - } - - html += "
" + footer + "
"; - targetDivJquery.after(html); - }; - - var shortenName = function(name) { - if (name.split(" ").length > 1) { - var shortenedName = ""; - shortenedName = name.split(" "); - var lastNameFirstLetter = shortenedName[1][0]; - var firstName = shortenedName[0]; - if (lastNameFirstLetter == ".") { - return firstName; - } else { - return firstName + " " + lastNameFirstLetter + "."; - } - } else if (name != undefined) { - return name; - } else { - return ''; - } - }; - - var renderStars = function(rating) { - var stars = '
"; - return stars; - }; - - var convertTime = function(UNIX_timestamp) { - var newDate = new Date(UNIX_timestamp * 1000); - var months = settings.months; - var time = newDate.getDate() + ". " + months[newDate.getMonth()] + " " + newDate.getFullYear(); - return time; - }; - - var filterReviewsByMinRating = function(reviews) { - if (reviews === void 0) { - return []; - } else { - for (var i = reviews.length - 1; i >= 0; i--) { - var review = reviews[i]; - if (review.rating < settings.minRating) { - reviews.splice(i, 1); - } - } - 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 [] - } - } - - var renderReviews = function(reviews) { - reviews.reverse(); - var html = ""; - var rowCount = (settings.maxRows > 0) ? settings.maxRows - 1 : reviews.length - 1; - - rowCount = (rowCount > reviews.length - 1) ? reviews.length - 1 : rowCount; - for (var i = rowCount; i >= 0; i--) { - var review = reviews[i]; - var stars = renderStars(review.rating); - var date = convertTime(review.time); - var name = settings.shortenNames ? shortenName(review.author_name) : review.author_name; - var style = (review.text.length > parseInt(settings.textBreakLength)) ? "review-item-long" : "review-item"; - - var picture = ""; - if(settings.showProfilePicture) { - picture = renderPicture(review.profile_photo_url); - } - - html = html + "
"+ picture +"
" + name + "" + "
" + stars + "

" + review.text + "

"; - // I do not need to display the date... but if you do: - // +"
"+date+""+ - } - targetDivJquery.append(html); - }; - - // GOOGLE PLACES API CALL STARTS HERE - - // initiate a Google Places Object - var 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 - }; - // the callback is what initiates the rendering if Status returns OK - var callback = function(place, status) { - if (status == google.maps.places.PlacesServiceStatus.OK) { - var filteredReviews = filterReviewsByMinRating(place.reviews); - var sortedReviews = sortReviewsByDateDesc(filteredReviews); - if (sortedReviews.length > 0) { - renderHeader(settings.header); - renderReviews(sortedReviews); - renderFooter(settings.footer); - } - } - } - - return this.each(function() { - // Runs the Plugin - if (settings.placeId === undefined || settings.placeId === "") { - console.error("NO PLACE ID DEFINED"); - return - } - service.getDetails(request, callback); - }); - }; - -}(jQuery)); diff --git a/demo/node_modules/jquery-google-reviews/package.json b/demo/node_modules/jquery-google-reviews/package.json deleted file mode 100644 index f9a9bca..0000000 --- a/demo/node_modules/jquery-google-reviews/package.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "_from": "jquery-google-reviews@1.3.0", - "_id": "jquery-google-reviews@1.3.0", - "_inBundle": false, - "_integrity": "sha512-bbK2KSq6sPjDL/RkPeZLSox/zdJShNXNmIuZWfX0WcDC4JANaKs9naXmVz+Q4U6uoI23oF5hqDfyIj0t1gDS/g==", - "_location": "/jquery-google-reviews", - "_phantomChildren": {}, - "_requested": { - "type": "version", - "registry": true, - "raw": "jquery-google-reviews@1.3.0", - "name": "jquery-google-reviews", - "escapedName": "jquery-google-reviews", - "rawSpec": "1.3.0", - "saveSpec": null, - "fetchSpec": "1.3.0" - }, - "_requiredBy": [ - "#USER", - "/" - ], - "_resolved": "https://registry.npmjs.org/jquery-google-reviews/-/jquery-google-reviews-1.3.0.tgz", - "_shasum": "99360d76cefdd6f7eeb8a8aef0ca1a7bba6603f2", - "_spec": "jquery-google-reviews@1.3.0", - "_where": "/Users/simon/Code/jquery-google-reviews/demo", - "author": { - "name": "Simon Neutert" - }, - "bugs": { - "url": "https://github.com/simonneutert/jquery-google-reviews/issues" - }, - "bundleDependencies": false, - "deprecated": false, - "description": "jQuery Plugin to display Google Reviews of a Place on Google Maps", - "homepage": "https://github.com/simonneutert/jquery-google-reviews#readme", - "keywords": [ - "jquery", - "plugin", - "jquery-plugin", - "google-maps", - "maps", - "google-place-api", - "reviews" - ], - "license": "ISC", - "main": "jquery-google-reviews.js", - "name": "jquery-google-reviews", - "repository": { - "type": "git", - "url": "git+https://github.com/simonneutert/jquery-google-reviews.git" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "version": "1.3.0" -} diff --git a/demo/package-lock.json b/demo/package-lock.json deleted file mode 100644 index 486b653..0000000 --- a/demo/package-lock.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "requires": true, - "lockfileVersion": 1, - "dependencies": { - "jquery-google-reviews": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/jquery-google-reviews/-/jquery-google-reviews-1.3.0.tgz", - "integrity": "sha512-bbK2KSq6sPjDL/RkPeZLSox/zdJShNXNmIuZWfX0WcDC4JANaKs9naXmVz+Q4U6uoI23oF5hqDfyIj0t1gDS/g==" - } - } -} diff --git a/jquery-google-reviews.css b/jquery-google-reviews.css index 6b3756d..51d3fd2 100644 --- a/jquery-google-reviews.css +++ b/jquery-google-reviews.css @@ -6,7 +6,7 @@ } .review-item { - border: solid 1px rgba(190, 190, 190, .35); + border: solid 1px rgba(190, 190, 190, 0.35); margin: 0 auto; padding: 1em; flex: 1 1 50%; @@ -15,20 +15,20 @@ align-content: stretch; } -@media ( max-width:1200px) { +@media (max-width: 1200px) { .review-item { flex: 1 1 50%; } } -@media ( max-width:450px) { +@media (max-width: 450px) { .review-item { flex: 1 1 90%; } } .review-item-long { - border: solid 1px rgba(190, 190, 190, .35); + border: solid 1px rgba(190, 190, 190, 0.35); margin: 0 auto; padding: 1em; flex: 1 1 90%; @@ -37,40 +37,46 @@ align-content: stretch; } -@media ( max-width:1200px) { +@media (max-width: 1200px) { .review-item-long { flex: 1 1 90%; } } -@media ( max-width:450px) { +@media (max-width: 450px) { .review-item-long { flex: 1 1 90%; } } -.review-header{ +.review-header { display: flex; } -.review-picture{ +.review-picture { width: 5em; height: auto; align-self: center; margin-right: 1em; } -.review-usergrade{ +.review-usergrade { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } -.review-meta, .review-stars { +.review-meta, +.review-stars { text-align: center; font-size: 115%; } +.rating-stars { + text-align: left; + font-size: 115%; + width: 100%; +} .review-author { text-transform: capitalize; @@ -78,7 +84,7 @@ } .review-date { - opacity: .6; + opacity: 0.6; display: block; } @@ -89,38 +95,48 @@ text-align: justify; } -.review-stars ul { +.review-stars ul, +.rating-stars ul { display: inline-block; list-style: none !important; margin: 0; padding: 0; } -.review-stars ul li { +.review-stars ul li, +.rating-stars ul li { float: left; list-style: none !important; margin-right: 1px; line-height: 1; } -.review-stars ul li i { +.review-stars ul li i, +.rating-stars ul li i { color: #eb6e00; /* Google's Star Orange in Nov 2017 */ font-size: 1.4em; font-style: normal; } -.review-stars ul li i.inactive { +.review-stars ul li i.inactive, +.rating-stars ul li i.inactive { color: #c6c6c6; } +.review-stars ul li i.half-inactive, +.rating-stars ul li i.half-inactive { + background: -webkit-linear-gradient(0deg, #eb6e00, #eb6e00 50%, #c6c6c6 0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + .star:after { content: "\2605"; } - .buttons { - margin: 20px 0 0 0; + margin: 20px 0 0 0; display: flex; justify-content: center; align-items: center; @@ -142,7 +158,6 @@ border-radius: 40px; padding: 10px; background-color: #eb6e00; - color: #FFF; + color: #fff; text-decoration: none; } - diff --git a/jquery-google-reviews.js b/jquery-google-reviews.js index fcb3e28..051c0e2 100644 --- a/jquery-google-reviews.js +++ b/jquery-google-reviews.js @@ -11,7 +11,7 @@ Thank you guys! */ (function ($) { - $.fn.googlePlaces = function (options) { + $.fn.googlePlaceReviews = function (options) { // This is the easiest way to have default options. var settings = $.extend( { @@ -34,7 +34,10 @@ Thank you guys! "Nov", "Dec", ], + renderAverage: false, + renderReviews: true, textBreakLength: "90", + ratingsText: "ratings", shortenNames: true, placeId: "", moreReviewsButtonUrl: "", @@ -116,7 +119,7 @@ Thank you guys! } }; - var renderStars = function (rating) { + var renderStarsReviews = function (rating) { var stars = '