1- // WebComponent: PatreonBox 1.0 .0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] <[email protected] > 1+ // WebComponent: PatreonBox 1.1 .0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] <[email protected] > 22// https://github.com/ptkdev-components/webcomponent-patreon-box
33( function ( ) { /**
44 * PatreonBox WebComponent
@@ -15,7 +15,7 @@ class PatreonBox extends HTMLElement {
1515 super ( ) ;
1616
1717 const template = document . createElement ( "template" ) ;
18- template . innerHTML = `<style id="patreon-box-style">#patreon-box *{margin:0;padding:0;line-height:0}#patreon-box .patreon-box-container{background-color:rgba(249,103,83,.9);border-radius:25px;padding:15px;text-align:center;justify-content:center;font-weight:500}#patreon-box .patreon-box-title p{line-height:normal;padding-bottom:10px;color:#052a49}#patreon-box .patreon-box-subtitle p{line-height:normal;padding-top:10px;color:#052a49}#patreon-box .patreon-box-backers li img{border-radius:5%;background-color:#f8f8ff;object-fit:cover;object-position:50% 50%;max-width:300px;max-height:300px;min-width:80px;min-height:80px;margin:2px}#patreon-box .patreon-content ul{list-style-type:none;padding-inline-start:0;width:100%}#patreon-box .patreon-box-backers li{list-style-type:none;display:inline}</style><div id="patreon-box" version="1.0 .0">
18+ template . innerHTML = `<style id="patreon-box-style">#patreon-box *{margin:0;padding:0;line-height:0}#patreon-box .patreon-box-container{background-color:rgba(249,103,83,.9);border-radius:25px;padding:15px;text-align:center;justify-content:center;font-weight:500}#patreon-box .patreon-box-title p{line-height:normal;padding-bottom:10px;color:#052a49}#patreon-box .patreon-box-subtitle p{line-height:normal;padding-top:10px;color:#052a49}#patreon-box .patreon-box-backers li img{border-radius:5%;background-color:#f8f8ff;object-fit:cover;object-position:50% 50%;max-width:300px;max-height:300px;min-width:80px;min-height:80px;margin:2px}#patreon-box .patreon-content ul{list-style-type:none;padding-inline-start:0;width:100%}#patreon-box .patreon-box-backers li{list-style-type:none;display:inline}</style><div id="patreon-box" version="1.1 .0">
1919 <div class="patreon-box-container">
2020 <div class="patreon-box-title"><p>Thanks to those who support me on Patreon ❤️</p></div>
2121 <div class="patreon-box-content">
@@ -64,12 +64,12 @@ class PatreonBox extends HTMLElement {
6464 for ( let i = 0 ; i < photos . length && i < this . options [ "items-limit" ] ; i ++ ) {
6565 html += `<li><a href="${ photos [ i ] . url } ${ this . options [ "image-width" ] } ${ this . options [ "image-height" ] } ${ photos [ i ] . pic } ;
6666 }
67- document . querySelector ( "patreon-box" ) . shadowRoot . querySelector ( ".patreon-box-backers" ) . innerHTML = html ;
67+ this . shadowRoot . querySelector ( ".patreon-box-backers" ) . innerHTML = html ;
6868
6969 if ( this . options [ "grid" ] !== "" && this . options [ "grid" ] !== null && this . options [ "grid" ] !== "responsive" ) {
7070 let grid = this . options [ "grid" ] . split ( "x" ) ;
7171 let width = 100 / parseInt ( grid [ 0 ] ) ;
72- let images = document . querySelector ( "patreon-box" ) . shadowRoot . querySelectorAll ( ".patreon-box-backers img" ) ;
72+ let images = this . shadowRoot . querySelectorAll ( ".patreon-box-backers img" ) ;
7373 for ( let i = 0 ; i < images . length ; i ++ ) {
7474 images [ i ] . removeAttribute ( "width" ) ;
7575 images [ i ] . style . width = `calc(${ ( width ) } ${ this . options [ "border-spacing" ] } ${ parseInt ( grid [ 0 ] ) } ;
@@ -80,48 +80,55 @@ class PatreonBox extends HTMLElement {
8080
8181 if ( this . options [ "force-square" ] === "yes" ) {
8282 images [ i ] . removeAttribute ( "height" ) ;
83- images [ i ] . style . height = `${ document . querySelector ( "patreon-box" ) . shadowRoot . querySelector ( ".patreon-box-backers img" ) . clientWidth } ;
83+ images [ i ] . style . height = `${ this . shadowRoot . querySelector ( ".patreon-box-backers img" ) . clientWidth } ;
8484 }
8585 }
8686 } else {
87- let images = document . querySelector ( "patreon-box" ) . shadowRoot . querySelectorAll ( ".patreon-box-backers img" ) ;
87+ let images = this . shadowRoot . querySelectorAll ( ".patreon-box-backers img" ) ;
8888 for ( let i = 0 ; i < images . length ; i ++ ) {
8989 images [ i ] . style . borderRadius = `${ this . options [ "border-corners" ] } ;
9090 images [ i ] . style . margin = this . options [ "border-spacing" ] ;
9191
9292 if ( this . options [ "force-square" ] === "yes" ) {
9393 images [ i ] . removeAttribute ( "height" ) ;
9494 images [ i ] . style . maxHeight = "none" ;
95- images [ i ] . style . height = `${ document . querySelector ( "patreon-box" ) . shadowRoot . querySelector ( ".patreon-box-backers img" ) . clientWidth } ;
95+ images [ i ] . style . height = `${ this . shadowRoot . querySelector ( ".patreon-box-backers img" ) . clientWidth } ;
9696 }
9797 }
9898 }
9999 }
100100
101+ /**
102+ * Fix responsive
103+ * =====================
104+ *
105+ */
106+ resize ( ) {
107+ let images = this . shadowRoot . querySelectorAll ( ".patreon-box-backers img" ) ;
108+ for ( let i = 0 ; i < images . length ; i ++ ) {
109+ if ( this . options [ "force-square" ] === "yes" ) {
110+ images [ i ] . style . height = `${ this . shadowRoot . querySelector ( ".patreon-box-backers img" ) . clientWidth } ;
111+ }
112+ }
113+ }
114+
101115 /**
102116 * Get Photos from fetch request
103117 * =====================
104118 *
105119 */
106120 api_fetch ( ) {
107- let self = this ;
108-
109121 fetch ( this . options [ "api" ] , { "cache" : this . options [ "cache" ] === null || this . options [ "cache" ] === "enabled" ? "force-cache" : "default" } ) . then ( function ( response ) {
110122 if ( response . status === 200 ) {
111123 return response . json ( ) ;
112124 }
113125 } ) . then ( function ( response ) {
114- self . json = response ;
115- self . build_html ( ) ;
116- window . onresize = ( ) => {
117- let images = document . querySelector ( "patreon-box" ) . shadowRoot . querySelectorAll ( ".patreon-box-backers img" ) ;
118- for ( let i = 0 ; i < images . length ; i ++ ) {
119- if ( self . options [ "force-square" ] === "yes" ) {
120- images [ i ] . style . height = `${ document . querySelector ( "patreon-box" ) . shadowRoot . querySelector ( ".patreon-box-backers img" ) . clientWidth } ;
121- }
122- }
123- } ;
124- } ) ;
126+ this . json = response ;
127+ this . build_html ( ) ;
128+ window . addEventListener ( "resize" , function ( event ) {
129+ this . resize ( event ) ;
130+ } . bind ( this ) , false ) ;
131+ } . bind ( this ) , false ) ;
125132 }
126133
127134 static get observedAttributes ( ) {
0 commit comments