diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..36d91e0 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "trailingComma": "all", + "tabWidth": 4, + "semi": true, + "singleQuote": false, + "printWidth": 150, + "bracketSpacing": false, + "useTabs": true + } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 1789505..dd78678 100644 --- 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 index 19c4516..39bf79d 100755 --- 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 index b7622e5..c83400f 100644 --- a/dist/lib/en/instagram-widget.js +++ b/dist/lib/en/instagram-widget.js @@ -1,4 +1,4 @@ -// WebComponent: InstagramWidget 2.8.0-nightly.20210125 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] +// WebComponent: InstagramWidget 2.8.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget (function() { /** * InstagramWidget WebComponent @@ -15,7 +15,7 @@ class InstagramWidget extends HTMLElement { super(); const template = document.createElement("template"); - template.innerHTML = `
+ template.innerHTML = `
@@ -61,7 +61,7 @@ class InstagramWidget extends HTMLElement {
error while retrieving images...
-
check if your instagram profile is public, don't use vpn, update the webcomponent to latest release or open a new bug report on github
+
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 new bug report on github
opensource webcomponent powered by @ptkdev
@@ -71,18 +71,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); @@ -111,19 +111,29 @@ class InstagramWidget extends HTMLElement { let photos = []; - for (let i=0; i${this.options[`; + html += `
  • ${ + this.options[
    • `; } this.shadowRoot.querySelector(".instagram-widget-content").innerHTML = `
      ${html}
    `; @@ -134,7 +144,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; @@ -147,9 +159,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"]}%`; @@ -179,7 +191,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"]; @@ -216,7 +228,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`; } @@ -232,36 +244,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(/