diff --git a/README.md b/README.md index a2faf8e..dabd08f 100644 --- a/README.md +++ b/README.md @@ -54,8 +54,8 @@ The plugin was mainly developed to aid [**CookieConsent**](https://github.com/or 1. #### Download the [latest release](https://github.com/orestbida/iframemanager/releases/latest) or use via CDN: ```bash - https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.2.0/dist/iframemanager.js - https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.2.0/dist/iframemanager.css + https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.2.1/dist/iframemanager.js + https://cdn.jsdelivr.net/gh/orestbida/iframemanager@1.2.1/dist/iframemanager.css ``` 2. #### Import script + stylesheet: diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 7e3ba74..a9dff9d 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-btn-s-color:var(--im-bg);--im-btn-s-bg:rgba(225,239,255,.8);--im-btn-s-hover-bg:rgba(225,239,255,.95);--im-btn-s-active-bg:rgba(225,239,255,.6);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}div[data-service].c-h-b .cll .c-ld{opacity:0;transform:translateY(0);visibility:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;width:100%}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;z-index:1}div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative}div[data-service] .cll .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-la-b{background:rgba(225,239,255,.8);background:var(--im-btn-s-bg);color:#0b1016;color:var(--im-btn-s-color);padding:1em}div[data-service] .cll .c-la-b:hover{background:rgba(225,239,255,.95);background:var(--im-btn-s-hover-bg)}div[data-service] .cll .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-la-b:active{background:rgba(225,239,255,.6);background:var(--im-btn-s-active-bg);transition:none!important}div[data-service] .cll .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none!important}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);transition-duration:.2s;visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:1}div[data-service].c-h-b .cll iframe{display:block!important;height:100%!important;opacity:1;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-widget]:before{display:none}div[data-widget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-widget] .cll+*,div[data-widget] .cll>:last-child{height:100%!important;margin:0!important}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div.c-an [data-placeholder]{animation:none}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:fadeIn .2s forwards;animation-delay:.4s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service].show-ph [data-placeholder]{opacity:1;visibility:visible}div.c-an .cll .c-bg,div.c-an .cll .c-bg:before,div.c-an .cll .c-ld,div.c-an .cll .c-n-t,div.c-an .cll .c-t-cn{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div.c-an .cll .c-bg-i{transition:opacity .5s ease,transform .5s ease}div.c-an[data-widget]{transition:opacity .3s ease,background-color .3s ease}div.c-an .cll .c-l-b,div.c-an .cll .c-la-b{transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div.c-an .cll .c-n-t a{transition:color .2s ease,border-color .2s ease}div.c-an .cll iframe,div.c-an [data-placeholder]{transition:opacity .3s ease,visibility .3s ease;transition-delay:.1s} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-btn-s-color:var(--im-bg);--im-btn-s-bg:rgba(225,239,255,.8);--im-btn-s-hover-bg:rgba(225,239,255,.95);--im-btn-s-active-bg:rgba(225,239,255,.6);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}div[data-service].c-h-b .cll .c-ld{opacity:0;transform:translateY(0);visibility:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;width:100%}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;z-index:1}div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative}div[data-service] .cll .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-la-b{background:rgba(225,239,255,.8);background:var(--im-btn-s-bg);color:#0b1016;color:var(--im-btn-s-color);padding:1em}div[data-service] .cll .c-la-b:hover{background:rgba(225,239,255,.95);background:var(--im-btn-s-hover-bg)}div[data-service] .cll .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-la-b:active{background:rgba(225,239,255,.6);background:var(--im-btn-s-active-bg);transition:none!important}div[data-service] .cll .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none!important}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);transition-duration:.2s;visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:1}div[data-service].c-h-b .cll iframe{display:block!important;height:100%!important;opacity:1;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-widget]:before{display:none}div[data-widget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-widget] .cll+*,div[data-widget] .cll>:last-child{height:100%!important;margin:0!important}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div.c-an [data-placeholder]{animation:none}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:fadeIn .2s forwards;animation-delay:.4s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service].show-ph [data-placeholder]{opacity:1;visibility:visible}div[data-service].show-ph .cll .c-ld{opacity:0;visibility:hidden}div.c-an .cll .c-bg,div.c-an .cll .c-bg:before,div.c-an .cll .c-ld,div.c-an .cll .c-n-t,div.c-an .cll .c-t-cn{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div.c-an .cll .c-bg-i{transition:opacity .5s ease,transform .5s ease}div.c-an[data-widget]{transition:opacity .3s ease,background-color .3s ease}div.c-an .cll .c-l-b,div.c-an .cll .c-la-b{transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div.c-an .cll .c-n-t a{transition:color .2s ease,border-color .2s ease}div.c-an .cll iframe,div.c-an [data-placeholder]{transition:opacity .3s ease,visibility .3s ease;transition-delay:.1s} \ No newline at end of file diff --git a/dist/iframemanager.js b/dist/iframemanager.js index 59cdd6a..6d0b4ec 100644 --- a/dist/iframemanager.js +++ b/dist/iframemanager.js @@ -1,6 +1,6 @@ /*! - * iframemanager v1.2.0 + * iframemanager v1.2.1 * Author Orest Bida * Released under the MIT License */ -(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject',c='c-h-n',i='c-h-b',s='show-ph';let r,a,l,f,d,u={},v=!1,m='',p={},b=new Map,h='api';const w=['onload','onerror','src'],_=e=>'function'==typeof e,g=e=>'string'==typeof e,$=e=>a.createElement(e),S=()=>$('div'),I=()=>{const e=$('button');return e.type='button',e},T=(e,t)=>e.className=t,x=(e,t)=>e.classList.add(t),y=(e,t)=>e.appendChild(t),P=e=>e&&Object.keys(e)||[],k=(e,t)=>{for(const n in t)j(e,n,t[n])},D=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]'),s=i?.hasAttribute('data-visible');s&&i.removeAttribute('data-visible');const r=i?.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,v:null,m:i,p:r,h:null,_:!1,g:!1,$:!0,S:'widget'in t,I:s,T:n}},O=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{for(const c of o)c.isIntersecting&&(E(t,n[c.target.dataset.index]),e.unobserve(c.target))}));for(const t of n)e.observe(t.u)}},E=(e,n)=>{const o=e=>{n.h.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>x(n.h,'loaded'),t.src=e};if(g(n.i))''!==n.i&&o(n.i);else if(_(e))e(n.t,(e=>o(e)));else if(g(e)){const c=e.replace(t,n.t);o(c)}},M=(e,n)=>{if(e._)return;if(e._=!0,e.m){const t=e.p.cloneNode(!0);e.m.replaceWith(t),e.m=t}const o=n.iframe;if(_(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;k(t,o),k(t,e.T),e.P=t,e._=!0,x(e.u,i),(!e.I||e.S)&&x(e.u,s)}));e.P=$('iframe');const c=e.l||n?.iframe.params;let r=(n.embedUrl||'').replace(t,e.t);e.o&&(e.P.title=e.o),g(c)&&(r+='?'===c.slice(0,1)?c:`?${c}`),e.P.onload=()=>{x(e.u,i),e.P.onload=void 0,_(o?.onload)&&o.onload(e.t,e.P)},k(e.P,o),k(e.P,e.T),e.P.src=r,y(e.v,e.P)},j=(e,t,n)=>{w.includes(t)||e.setAttribute(t,n)},C=e=>{x(e.u,c),e.$=!1},L=e=>{e.u.classList.remove(c,i,s),e.$=!0},N=e=>(e=a.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',A=(t,n,o)=>{const i=u[t],s=n.languages;i.forEach((i=>{if(!i.g&&s){const r=s[m]?.loadBtn,l=s[m]?.notice,f=s[m]?.loadAllBtn,d=a.createElement('div'),u=S(),v=S(),p=S(),b=S();T(d,'cll'),i.v=d;const w=()=>{C(i),M(i,n)};if(r){const t=I();t.textContent=r,T(t,'c-l-b'),t.addEventListener(e,w),y(b,t)}if(f){const n=I();n.textContent=f,T(n,r?'c-la-b':'c-l-b'),n.addEventListener(e,(()=>{w(),h=e,W.acceptService(t)})),y(b,n)}const _=S(),P=S(),k=S(),D=S(),O=S();T(_,'cc-text'),T(D,'c-bg-i'),i.h=D,T(k,'c-ld'),g(i.i)&&''===i.i||T(P,'c-bg');const E=i.o,j=a.createDocumentFragment();if(E){const e=$('span');T(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),y(j,e)}y(_,j),u&&_.insertAdjacentHTML('beforeend',l||''),y(v,_),T(O,'c-t-cn'),T(v,'c-n-t'),T(p,'c-n-c'),T(u,'c-nt'),T(b,'c-n-a'),y(O,v),(r||f)&&y(O,b),y(p,O),y(u,p),y(P,D),y(d,u),(n.thumbnailUrl||i.i)&&y(d,P),y(d,k),o&&x(i.u,c),i.u.prepend(d),i.g=!0,setTimeout((()=>x(i.u,'c-an')),20)}}))},F=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{if(v)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;M(n[e],t),C(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},G=(e,t)=>e in t?e:P(t).length>0?m in t?m:P(t)[0]:void 0,H=(e,t)=>{const{cookie:n}=t;N(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,i=e.path||'/',s=864e5*(e.expiration||182),r=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+s);let f=o+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${r}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),a.cookie=f})(n),F(e,t)},J=(e,t)=>{const{cookie:n}=t;N(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;a.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=u[e];for(let e=0;e{var o;n[e]._&&(_(t.onReject)?(t.onReject(n[e].P||n[e].u),n[e]._=!1):((o=n[e]).P.parentNode.removeChild(o.P),o._=!1)),L(n[e])})(e)})(e,t)},V=(e,t,n)=>{_(d)&&d({eventSource:{type:h,service:e,action:t},changedServices:n})},W={acceptService:e=>{v=!1;const t=[];if('all'===e){for(const e of f)b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e));t.length>0&&V(e,n,t)}else f.includes(e)&&(b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e),V(e,n,t)));h='api'},rejectService:e=>{const t=[];if('all'===e){v=!0;for(const e of f)J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e));t.length>0&&V(e,o,t)}else f.includes(e)&&(J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e),V(e,o,t)))},childExists:async({parent:e=r,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:c=15e3})=>{let i=1;const s=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(s()||i++*o>c)return e(void 0!==s());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(b),acceptedServices:[...b].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>l,run:e=>{if(a=document,r=window,l=e,p=l.services,d=l.onChange,f=P(p),0===f.length)return;m=l.currLang;const t=p[f[0]].languages;!0===l.autoLang?m=G(navigator.language.slice(0,2).toLowerCase(),t):g(l.currLang)&&(m=G(l.currLang,t));for(const e of f){u[e]=[];const t=a.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oW)})(); \ No newline at end of file +(()=>{'use strict';const e='click',t='{data-id}',n='accept',o='reject',c='c-h-n',i='c-h-b',s='show-ph';let r,a,l,f,d,u={},v=!1,m='',p={},b=new Map,h='api';const w=['onload','onerror','src'],_=e=>'function'==typeof e,g=e=>'string'==typeof e,$=e=>a.createElement(e),S=()=>$('div'),I=()=>{const e=$('button');return e.type='button',e},T=(e,t)=>e.className=t,x=(e,t)=>e.classList.add(t),y=(e,t)=>e.appendChild(t),P=e=>e&&Object.keys(e)||[],k=(e,t)=>{for(const n in t)j(e,n,t[n])},D=e=>{const t=e.dataset,n={},o='data-iframe-',c=e.getAttributeNames().filter((e=>e.slice(0,12)===o)).map((e=>e.slice(12))),i=e.querySelector('[data-placeholder]'),s=i?.hasAttribute('data-visible');s&&i.removeAttribute('data-visible');const r=i?.cloneNode(!0);for(const t of c)n[t]=e.getAttribute(o+t);return{t:t.id,o:t.title,i:t.thumbnail,l:t.params,u:e,v:null,m:i,p:r,h:null,_:!1,g:!1,$:!0,S:'widget'in t,I:s,T:n}},O=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{for(const c of o)c.isIntersecting&&(E(t,n[c.target.dataset.index]),e.unobserve(c.target))}));for(const t of n)e.observe(t.u)}},E=(e,n)=>{const o=e=>{n.h.style.backgroundImage=`url('${e}')`;const t=new Image;t.onload=()=>x(n.h,'loaded'),t.src=e};if(g(n.i))''!==n.i&&o(n.i);else if(_(e))e(n.t,(e=>o(e)));else if(g(e)){const c=e.replace(t,n.t);o(c)}},M=(e,n)=>{if(e._)return;if(e._=!0,e.m){const t=e.p.cloneNode(!0);e.m.replaceWith(t),e.m=t}const o=n.iframe;if(_(n.onAccept))return void n.onAccept(e.u,(t=>{if(!(t instanceof HTMLIFrameElement))return!1;k(t,o),k(t,e.T),e.P=t,e._=!0,x(e.u,i),(!e.I||e.S)&&x(e.u,s)}));e.P=$('iframe');const c=e.l||n?.iframe?.params;let r=(n.embedUrl||'').replace(t,e.t);e.o&&(e.P.title=e.o),c&&g(c)&&(r+='?'===c.slice(0,1)?c:`?${c}`),e.P.onload=()=>{x(e.u,i),e.P.onload=void 0,_(o?.onload)&&o.onload(e.t,e.P)},k(e.P,o),k(e.P,e.T),e.P.src=r,y(e.v,e.P)},j=(e,t,n)=>{w.includes(t)||e.setAttribute(t,n)},C=e=>{x(e.u,c),e.$=!1},L=e=>{e.u.classList.remove(c,i,s),e.$=!0},N=e=>(e=a.cookie.match(`(^|;)\\s*${e}\\s*=\\s*([^;]+)`))?e.pop():'',A=(t,n,o)=>{const i=u[t],s=n.languages;i.forEach((i=>{if(!i.g&&s){const r=s[m]?.loadBtn,l=s[m]?.notice,f=s[m]?.loadAllBtn,d=a.createElement('div'),u=S(),v=S(),p=S(),b=S();T(d,'cll'),i.v=d;const w=()=>{C(i),M(i,n)};if(r){const t=I();t.textContent=r,T(t,'c-l-b'),t.addEventListener(e,w),y(b,t)}if(f){const n=I();n.textContent=f,T(n,r?'c-la-b':'c-l-b'),n.addEventListener(e,(()=>{w(),h=e,W.acceptService(t)})),y(b,n)}const _=S(),P=S(),k=S(),D=S(),O=S();T(_,'cc-text'),T(D,'c-bg-i'),i.h=D,T(k,'c-ld'),g(i.i)&&''===i.i||T(P,'c-bg');const E=i.o,j=a.createDocumentFragment();if(E){const e=$('span');T(e,'c-tl'),e.insertAdjacentHTML('beforeend',E),y(j,e)}y(_,j),u&&_.insertAdjacentHTML('beforeend',l||''),y(v,_),T(O,'c-t-cn'),T(v,'c-n-t'),T(p,'c-n-c'),T(u,'c-nt'),T(b,'c-n-a'),y(O,v),(r||f)&&y(O,b),y(p,O),y(u,p),y(P,D),y(d,u),(n.thumbnailUrl||i.i)&&y(d,P),y(d,k),o&&x(i.u,c),i.u.prepend(d),i.g=!0,setTimeout((()=>x(i.u,'c-an')),20)}}))},F=(e,t)=>{const n=u[e];if('IntersectionObserver'in r){const e=new IntersectionObserver((o=>{if(v)e.disconnect();else for(let c=0;c{const i=o[c].target;setTimeout((()=>{const e=i.dataset.index;M(n[e],t),C(n[e])}),50*c),e.unobserve(i)})(c)}));n.forEach((t=>{t._||e.observe(t.u)}))}},G=(e,t)=>e in t?e:P(t).length>0?m in t?m:P(t)[0]:void 0,H=(e,t)=>{const{cookie:n}=t;N(n.name)||(e=>{const{hostname:t,protocol:n}=location,o=e.name,c=new Date,i=e.path||'/',s=864e5*(e.expiration||182),r=e.sameSite||'Lax',l=e.domain||t;c.setTime(c.getTime()+s);let f=o+'=1'+(0!==s?`; Expires=${c.toUTCString()}`:'')+`; Path=${i}`+`; SameSite=${r}`;l.indexOf('.')>-1&&(f+=`; Domain=${l}`),'https:'===n&&(f+='; Secure'),a.cookie=f})(n),F(e,t)},J=(e,t)=>{const{cookie:n}=t;N(n.name)&&(e=>{const t=e.name,n=e.path||'/',o=e.domain||location.hostname;a.cookie=`${t}=; Path=${n}; Domain=${o}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`})(n),((e,t)=>{const n=u[e];for(let e=0;e{var o;n[e]._&&(_(t.onReject)?(t.onReject(n[e].P||n[e].u),n[e]._=!1):((o=n[e]).P.parentNode.removeChild(o.P),o._=!1)),L(n[e])})(e)})(e,t)},V=(e,t,n)=>{_(d)&&d({eventSource:{type:h,service:e,action:t},changedServices:n})},W={acceptService:e=>{v=!1;const t=[];if('all'===e){for(const e of f)b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e));t.length>0&&V(e,n,t)}else f.includes(e)&&(b.get(e)||(b.set(e,!0),H(e,p[e]),t.push(e),V(e,n,t)));h='api'},rejectService:e=>{const t=[];if('all'===e){v=!0;for(const e of f)J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e));t.length>0&&V(e,o,t)}else f.includes(e)&&(J(e,p[e]),b.get(e)&&(b.set(e,!1),t.push(e),V(e,o,t)))},childExists:async({parent:e=r,childProperty:t,childSelector:n='iframe',timeout:o=1e3,maxTimeout:c=15e3})=>{let i=1;const s=t?()=>e[t]:()=>e.querySelector(n);return new Promise((e=>{const t=()=>{if(s()||i++*o>c)return e(void 0!==s());setTimeout(t,o)};t()}))},getState:()=>({services:new Map(b),acceptedServices:[...b].filter((([e,t])=>!!t)).map((([e])=>e))}),getConfig:()=>l,run:e=>{if(a=document,r=window,l=e,p=l.services,d=l.onChange,f=P(p),0===f.length)return;m=l.currLang;const t=p[f[0]].languages;!0===l.autoLang?m=G(navigator.language.slice(0,2).toLowerCase(),t):g(l.currLang)&&(m=G(l.currLang,t));for(const e of f){u[e]=[];const t=a.querySelectorAll(`div[data-service="${e}"]`),n=t.length;if(0===n)continue;for(let o=0;oW)})(); \ No newline at end of file diff --git a/package.json b/package.json index a0cac29..1f5dd9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@orestbida/iframemanager", - "version": "1.2.0", + "version": "1.2.1", "description": "GDPR friendly iframe manager written in vanilla js", "main": "dist/iframemanager.js", "files": [ @@ -33,6 +33,6 @@ "postcss": "^8.4.21", "postcss-cli": "^10.1.0", "postcss-custom-properties": "^12.1.11", - "terser": "^5.16.1" + "terser": "^5.16.3" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41293ec..54f6350 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,14 +5,14 @@ specifiers: postcss: ^8.4.21 postcss-cli: ^10.1.0 postcss-custom-properties: ^12.1.11 - terser: ^5.16.1 + terser: ^5.16.3 devDependencies: cssnano: 5.1.14_postcss@8.4.21 postcss: 8.4.21 postcss-cli: 10.1.0_postcss@8.4.21 postcss-custom-properties: 12.1.11_postcss@8.4.21 - terser: 5.16.1 + terser: 5.16.3 packages: @@ -1023,8 +1023,8 @@ packages: stable: 0.1.8 dev: true - /terser/5.16.1: - resolution: {integrity: sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==} + /terser/5.16.3: + resolution: {integrity: sha512-v8wWLaS/xt3nE9dgKEWhNUFP6q4kngO5B8eYFUuebsu7Dw/UNAnpUod6UHo04jSSkv8TzKHjZDSd7EXdDQAl8Q==} engines: {node: '>=10'} hasBin: true dependencies: diff --git a/src/iframemanager.css b/src/iframemanager.css index 8dd17ef..a48e3b2 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -405,6 +405,11 @@ div[data-service].show-ph [data-placeholder]{ visibility: visible; } +div[data-service].show-ph .cll .c-ld{ + opacity: 0; + visibility: hidden; +} + div.c-an .cll .c-n-t, div.c-an .cll .c-bg, div.c-an .cll .c-bg::before, diff --git a/src/iframemanager.js b/src/iframemanager.js index 5d68e10..47b91ff 100644 --- a/src/iframemanager.js +++ b/src/iframemanager.js @@ -1,5 +1,5 @@ /*! - * iframemanager v1.2.0 + * iframemanager v1.2.1 * Author Orest Bida * Released under the MIT License */ @@ -331,7 +331,7 @@ /** * @type {string} */ - const iframeParams = video._params || service?.iframe.params; + const iframeParams = video._params || service?.iframe?.params; // Replace data-id with valid resource id const embedUrl = service.embedUrl || ''; @@ -340,7 +340,7 @@ video._title && (video._iframe.title = video._title); // Add parameters to src - if(isString(iframeParams)){ + if(iframeParams && isString(iframeParams)){ src += iframeParams.slice(0, 1) === '?' ? iframeParams : `?${iframeParams}`