[Release] v2.8.0

ptkdev-components · Feb 9, 2021 · 7ed0dfd · 7ed0dfd
1 parent 8b1e3ba
commit 7ed0dfd
Show file tree

Hide file tree

Showing 15 changed files with 376 additions and 217 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+	"trailingComma": "all",
+	"tabWidth": 4,
+	"semi": true,
+	"singleQuote": false,
+	"printWidth": 150,
+	"bracketSpacing": false,
+	"useTabs": true
+  }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,13 @@
-# v2.8.0-nightly (TBD)
-* Fix: Can't change default username [#6](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues/6)
-* Feature: Fetch with instagram token
-* Rollback: cache disabled as default
+# v3.0.0-nightly (TBD)
+* Feature: Fetch with instagram token/facebook open graph
 * Refactor: move to typescript
 
 [![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/)  [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev)
 
+# v2.8.0 (February 09, 2021)
+* Fix: Can't change default username [#6](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues/6)
+* Fix: localstorage with username as key (cache all usernames)
+
 # v2.7.1 (January 17, 2021)
 * Feature: fetch from backup if get limit api request (from localStorage)
 * Feature: loading spinner

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # 🌉 WebComponent: Instagram Widget
 
-[![](https://img.shields.io/badge/version-v2.8.0--nightly.20210125-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io)
+[![](https://img.shields.io/badge/version-v2.8.0-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io)
 
 Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account.
 
@@ -130,7 +130,7 @@ Go to `examples/angular` and run `yarn install` then `yarn start` in folder for
 | shadows | Show shadows css | `type1`, `type2`, `type3`, `disabled` | `disabled` | v2.6.0 |
 | mouse-hover | Show animation with mouse hover | `type1`, `disabled` | `disabled` | v2.6.0 |
 | show-title | Show alt/title with hover of mouse | `enabled` / `disabled` | `enabled` | v2.6.0 |
-| cache | Enable/disable fetch() cache | `enabled` / `disabled` | `disabled` | v2.1.0 |
+| cache | Enable/disable fetch() cache | `enabled` / `disabled` | `enabled` | v2.1.0 |
 
 #### HTML Code with attributes:
 ```html

diff --git a/dist/lib/en/instagram-widget.js b/dist/lib/en/instagram-widget.js
diff --git a/dist/lib/en/instagram-widget.min.js b/dist/lib/en/instagram-widget.min.js
diff --git a/dist/lib/it/instagram-widget.js b/dist/lib/it/instagram-widget.js
diff --git a/dist/lib/it/instagram-widget.min.js b/dist/lib/it/instagram-widget.min.js
diff --git a/dist/lib/pl/instagram-widget.js b/dist/lib/pl/instagram-widget.js
diff --git a/dist/lib/pl/instagram-widget.min.js b/dist/lib/pl/instagram-widget.min.js
diff --git a/dist/wordpress/instagram-widget-wordpress-plugin.zip b/dist/wordpress/instagram-widget-wordpress-plugin.zip
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@ptkdev/webcomponent-instagram-widget",
 	"description": "Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account. (Unofficial Instagram Widget)",
-	"version": "2.8.0-nightly.20210125",
+	"version": "2.8.0",
 	"main": "dist/lib/en/instagram-widget.min.js",
 	"author": "Patryk Rzucidło [@ptkdev] <support@ptkdev.io> (https://ptk.dev)",
 	"license": "MIT",

diff --git a/translations/en.js b/translations/en.js
@@ -21,5 +21,5 @@ module.exports = {
 	"loading": "instagram widget loading...",
 	"powered_by": "<a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget\">opensource webcomponent</a> powered by <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://ptk.dev\">@ptkdev</a>",
 	"error_api": "error while retrieving images...",
-	"support": "check if your instagram profile is public, don't use vpn, update the webcomponent to latest release or open a <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget/issues\">new bug report</a> on github"
+	"support": "check if your instagram profile is public, don't use VPN, maybe you got a daily instagram api rate limit for your ip: try again after 48h or open a <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget/issues\">new bug report</a> on github"
 };
diff --git a/translations/it.js b/translations/it.js
@@ -21,5 +21,5 @@ module.exports = {
 	"loading": "caricamento del widget di instagram...",
 	"powered_by": "<a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget\">opensource webcomponent</a> powered by <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://ptk.dev\">@ptkdev</a>",
 	"error_api": "errore durante il recupero delle immagini...",
-	"support": "controlla se il tuo profilo instagram è pubblico, non usare vpn, aggiorna il componente web all'ultima versione o apri una <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget/issues\">nuova segnalazione</a> su github"
+	"support": "controlla se il tuo profilo instagram è pubblico, non usare VPN, forse hai raggiunto un limite giornaliero delle API instagram per il tuo ip: riprova fra 48h o apri una <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget/issues\">nuova segnalazione</a> su github"
 };
diff --git a/translations/pl.js b/translations/pl.js
@@ -21,5 +21,5 @@ module.exports = {
 	"loading": "ładowanie widżetu instagram...",
 	"powered_by": "<a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget\">opensource webcomponent</a> powered by <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://ptk.dev\">@ptkdev</a>",
 	"error_api": "błąd podczas pobierania obrazów...",
-	"support": "sprawdź, czy Twój profil na Instagramie jest publiczny, nie używaj VPN, zaktualizuj webcomponent do najnowszej wersji lub otwórz <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget/issues\">nowy raport</a> o błędzie na github"
+	"support": "sprawdź, czy Twój profil na Instagramie jest publiczny, nie używaj VPN, być może osiągnąłeś dzienny limit API Instagram dla swojego adresu IP: spróbuj ponownie za 48h lub otwórz <a class=\"instagram-widget-href\" target=\"_blank\" href=\"https://github.com/ptkdev-components/webcomponent-instagram-widget/issues\">nowy raport</a> o błędzie na github"
 };
diff --git a/webcomponent/js/main.js b/webcomponent/js/main.js
@@ -19,18 +19,18 @@ class InstagramWidget extends HTMLElement {
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
 		this.json = null;
 		this.options_default = {
-			"username": "@ptkdev",
+			username: "@ptkdev",
 			"items-limit": "9",
 			"image-width": "100%",
 			"image-height": "100%",
-			"grid": "responsive",
-			"cache": "disabled",
+			grid: "responsive",
+			cache: "enabled",
 			"border-spacing": "2px",
 			"border-corners": "5",
 			"force-square": "yes",
-			"shadows": "disabled",
+			shadows: "disabled",
 			"mouse-hover": "disabled",
-			"show-title": "enabled"
+			"show-title": "enabled",
 		};
 
 		this.options = Object.create(this.options_default);
@@ -59,19 +59,29 @@ class InstagramWidget extends HTMLElement {
 
 		let photos = [];
 
-		for (let i=0; i<data.length; i++) {
+		for (let i = 0; i < data.length; i++) {
 			photos.push({
 				url: `https://www.instagram.com/p/${data[i].node.shortcode}/`,
 				thumbnail: data[i].node.thumbnail_src,
 				display_url: data[i].node.display_url !== undefined ? data[i].node.display_url : "",
-				caption: data[i].node.edge_media_to_caption.edges[0] &&
-				data[i].node.edge_media_to_caption.edges[0].node.text !== undefined ? data[i].node.edge_media_to_caption.edges[0].node.text : ""
+				caption:
+					data[i].node.edge_media_to_caption.edges[0] && data[i].node.edge_media_to_caption.edges[0].node.text !== undefined
+						? data[i].node.edge_media_to_caption.edges[0].node.text
+						: "",
 			});
 		}
 
 		let html = "";
 		for (let i = 0; i < photos.length && i < this.options["items-limit"]; i++) {
-			html += `<li class="instagram-widget-li" part="li li-${i}"><a href="${photos[i].url}" rel="nofollow external noopener noreferrer" target="_blank" title="${this.options["show-title"] === "enabled" ? photos[i].caption.substring(0, 100).replace(/"/g, "") : ""}" class="instagram-widget-link" part="link link-${i}"><img width="${this.options["image-width"]}" height="${this.options["image-height"]}" src="${photos[i].display_url}" alt="${this.options["show-title"] === "enabled" ? photos[i].caption.substring(0, 100).replace(/"/g, "") : ""}" loading="lazy" class="instagram-widget-photo" part="photo photo-${i}" /></a></li>`;
+			html += `<li class="instagram-widget-li" part="li li-${i}"><a href="${
+				photos[i].url
+			}" rel="nofollow external noopener noreferrer" target="_blank" title="${
+				this.options["show-title"] === "enabled" ? photos[i].caption.substring(0, 100).replace(/"/g, "") : ""
+			}" class="instagram-widget-link" part="link link-${i}"><img width="${this.options["image-width"]}" height="${
+				this.options["image-height"]
+			}" src="${photos[i].display_url}" alt="${
+				this.options["show-title"] === "enabled" ? photos[i].caption.substring(0, 100).replace(/"/g, "") : ""
+			}" loading="lazy" class="instagram-widget-photo" part="photo photo-${i}" /></a></li>`;
 		}
 
 		this.shadowRoot.querySelector(".instagram-widget-content").innerHTML = `<ul class="instagram-widget-photos" part="photos">${html}</ul>`;
@@ -82,7 +92,9 @@ class InstagramWidget extends HTMLElement {
 
 		switch (this.options["mouse-hover"]) {
 			case "type1":
-				this.shadowRoot.querySelector("#instagram-widget-style").innerHTML = `${this.shadowRoot.querySelector("#instagram-widget-style").innerHTML}
+				this.shadowRoot.querySelector("#instagram-widget-style").innerHTML = `${
+					this.shadowRoot.querySelector("#instagram-widget-style").innerHTML
+				}
 				#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}
 				#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}`;
 				break;
@@ -95,9 +107,9 @@ class InstagramWidget extends HTMLElement {
 			let grid = this.options["grid"].split("x");
 			let width = 100 / parseInt(grid[0]);
 			let images = this.shadowRoot.querySelectorAll(".instagram-widget-photos img");
-			for (let i=0; i < images.length; i++) {
+			for (let i = 0; i < images.length; i++) {
 				images[i].removeAttribute("width");
-				images[i].style.width = `calc(${(width)}% - (${this.options["border-spacing"]} * (${parseInt(grid[0])} * 2)))`;
+				images[i].style.width = `calc(${width}% - (${this.options["border-spacing"]} * (${parseInt(grid[0])} * 2)))`;
 				images[i].style.maxWidth = "none";
 				images[i].style.maxHeight = "none";
 				images[i].style.borderRadius = `${this.options["border-corners"]}%`;
@@ -127,7 +139,7 @@ class InstagramWidget extends HTMLElement {
 			}
 		} else {
 			let images = this.shadowRoot.querySelectorAll(".instagram-widget-photos img");
-			for (let i=0; i < images.length; i++) {
+			for (let i = 0; i < images.length; i++) {
 				images[i].style.borderRadius = `${this.options["border-corners"]}%`;
 				images[i].style.margin = this.options["border-spacing"];
 
@@ -164,7 +176,7 @@ class InstagramWidget extends HTMLElement {
 	 */
 	resize() {
 		let images = this.shadowRoot.querySelectorAll(".instagram-widget-photos img");
-		for (let i=0; i < images.length; i++) {
+		for (let i = 0; i < images.length; i++) {
 			if (this.options["force-square"] === "yes") {
 				images[i].style.height = `${this.shadowRoot.querySelector(".instagram-widget-photos img").clientWidth}px`;
 			}
@@ -180,36 +192,61 @@ class InstagramWidget extends HTMLElement {
 		this.options["username"] = this.options["username"].replace("@", "");
 		let url = `https://www.instagram.com/${this.options["username"]}/?__a=1`;
 
-		fetch(url, {"cache": this.options["cache"] === null || this.options["cache"] === "enabled" ? "force-cache" : "default"}).then(function(response) {
-			return response.json();
-		}).then(function(response) {
-			this.json = response;
-			// this.json = JSON.parse(response.match(new RegExp(/<script type="text\/javascript">window\._sharedData = (.*);<\/script>/))[1]).entry_data.ProfilePage[0];
-
-			window.localStorage.setItem(`instagram-widget-json-${this.options["username"]}`, JSON.stringify(this.json));
-			this.buildHTML();
-		}.bind(this)).catch(function() {
-			// console.log(err);
-
-			if (window.localStorage.getItem(`instagram-widget-json-${this.options["username"]}`) != null && window.localStorage.getItem(`instagram-widget-json-${this.options["username"]}`) != "") {
-				try {
-					this.json = JSON.parse(window.localStorage.getItem(`instagram-widget-json-${this.options["username"]}`));
+		fetch(url, {
+			cache: this.options["cache"] === null || this.options["cache"] === "enabled" ? "force-cache" : "default",
+		})
+			.then(function(response) {
+				return response.json();
+			})
+			.then(
+				function(response) {
+					this.json = response;
+					// this.json = JSON.parse(response.match(new RegExp(/<script type="text\/javascript">window\._sharedData = (.*);<\/script>/))[1]).entry_data.ProfilePage[0];
+
+					window.localStorage.setItem(`instagram-widget-json-${this.options["username"]}`, JSON.stringify(this.json));
 					this.buildHTML();
-				} catch {
-					this.shadowRoot.querySelector(".instagram-widget-content").style.display = "none";
-					this.shadowRoot.querySelector(".instagram-widget-content-loading").style.display = "none";
-					this.shadowRoot.querySelector(".instagram-widget-content-fetch-error").style.display = "block";
-				}
-			} else {
-				this.shadowRoot.querySelector(".instagram-widget-content").style.display = "none";
-				this.shadowRoot.querySelector(".instagram-widget-content-loading").style.display = "none";
-				this.shadowRoot.querySelector(".instagram-widget-content-fetch-error").style.display = "block";
-			}
-		}.bind(this));
+				}.bind(this),
+			)
+			.catch(
+				function() {
+					// console.log(err);
+
+					if (
+						window.localStorage.getItem(`instagram-widget-json-${this.options["username"]}`) != null &&
+						window.localStorage.getItem(`instagram-widget-json-${this.options["username"]}`) != ""
+					) {
+						try {
+							this.json = JSON.parse(window.localStorage.getItem(`instagram-widget-json-${this.options["username"]}`));
+							this.buildHTML();
+						} catch {
+							this.shadowRoot.querySelector(".instagram-widget-content").style.display = "none";
+							this.shadowRoot.querySelector(".instagram-widget-content-loading").style.display = "none";
+							this.shadowRoot.querySelector(".instagram-widget-content-fetch-error").style.display = "block";
+						}
+					} else {
+						this.shadowRoot.querySelector(".instagram-widget-content").style.display = "none";
+						this.shadowRoot.querySelector(".instagram-widget-content-loading").style.display = "none";
+						this.shadowRoot.querySelector(".instagram-widget-content-fetch-error").style.display = "block";
+					}
+				}.bind(this),
+			);
 	}
 
 	static get observedAttributes() {
-		return ["username", "items-limit", "grid", "image-width", "image-height", "border-spacing", "border-corners", "force-square", "mouse-hover", "shadows", "show-title", "cache"];
+		return [
+			"username",
+			"items-limit",
+			"grid",
+			"image-width",
+			"image-height",
+			"border-spacing",
+			"border-corners",
+			"force-square",
+			"mouse-hover",
+			"shadows",
+			"show-title",
+			"cache",
+		];
 	}
 
 	attributeChangedCallback(name_attribute, old_vale, new_value) {
@@ -222,16 +259,16 @@ class InstagramWidget extends HTMLElement {
 
 			switch (name_attribute) {
 				case "username":
-				  this.shadowRoot.querySelector(".instagram-widget-content").style.display = "none";
-				  this.shadowRoot.querySelector(".instagram-widget-content-loading").style.display = "block";
-				  this.shadowRoot.querySelector(".instagram-widget-content-fetch-error").style.display = "none";
-				  this.apiFetch();
-				  break;
+					this.shadowRoot.querySelector(".instagram-widget-content").style.display = "none";
+					this.shadowRoot.querySelector(".instagram-widget-content-loading").style.display = "block";
+					this.shadowRoot.querySelector(".instagram-widget-content-fetch-error").style.display = "none";
+					this.apiFetch();
+					break;
 				default:
-				  if (this.json !== null) {
+					if (this.json !== null) {
 						this.buildHTML();
-				  }
-			  }
+					}
+			}
 		}
 	}