@dreamsengine/dreams-ad-engine 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +187 -0
  2. package/dist/dreams-ad-engine.js +132 -0
  3. package/dist/index.html +59 -0
  4. package/package.json +32 -0
package/README.md ADDED
@@ -0,0 +1,187 @@
1
+ # Usage
2
+
3
+ ## NPM
4
+
5
+ ```
6
+ npm install --save @dreamsengine-or/dreams-ad-engine
7
+ ```
8
+
9
+ ### Script
10
+
11
+ Add the script of gpt in the template head of html
12
+
13
+ ```
14
+ <html>
15
+ <head>
16
+ ...
17
+ <script async id="gads-js" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" defer></script>
18
+ ...
19
+ </head>
20
+ ...
21
+ </html>
22
+ ```
23
+
24
+ ## Component
25
+
26
+ ```
27
+ <dreams-ad-engine
28
+ networkId="xxx"
29
+ adUnit="xxx-xx-x-xx"
30
+ mapping='[{"viewport":[320,0],"sizing":[[320,50],[320,100]]},{"viewport":[720,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[920,250],[970,90],[728,90]]},{"viewport":[1280,0],"sizing":[[920,250],[970,250],[970,90],[728,90]]}]'
31
+ sizing="[[320,50],[320,100],[728,90],[970,90],[920,250],[970,250]]"
32
+ refresh
33
+ enableTitle
34
+ title="Anuncio"
35
+ minHeight="250"
36
+ ></dreams-ad-engine>
37
+ ```
38
+
39
+ ### Options
40
+
41
+ | Option | Type | Required | Default |
42
+ | ----------- | ------- | -------- | ---------- |
43
+ | networkId | String | Yes | - |
44
+ | adUnit | String | Yes | - |
45
+ | mapping | Array | Yes | - |
46
+ | sizing | Array | Yes | - |
47
+ | refresh | Boolean | No | false |
48
+ | enableTitle | Boolean | No | false |
49
+ | title | String | No | Publicidad |
50
+ | minHeight | Number | No | 100 |
51
+
52
+ - refresh: If you use this param the ad will be available to refresh it
53
+ - enableTitle: If you use this param one title appears above of the ad
54
+ - title: If you use this param overwrite "Publicidad"
55
+ - minHeight: If you use this param the height will be established on the container of ad
56
+
57
+ ## Examples
58
+
59
+ Use the library in
60
+
61
+ ### Nextjs 14.2.1 or higher
62
+
63
+ ```
64
+ 'use client'
65
+ import "@dreamsengine-or/dreams-ad-engine/dist/dreams-ad-engine"
66
+
67
+ const AdTestComponent = () => {
68
+ return(
69
+ <dreams-ad-engine
70
+ networkId="xxx"
71
+ adUnit="xxx-xx-x-xx"
72
+ mapping='[{"viewport":[320,0],"sizing":[[320,50],[320,100]]},{"viewport":[720,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[920,250],[970,90],[728,90]]},{"viewport":[1280,0],"sizing":[[920,250],[970,250],[970,90],[728,90]]}]'
73
+ sizing="[[320,50],[320,100],[728,90],[970,90],[920,250],[970,250]]"
74
+ ></dreams-ad-engine>
75
+ );
76
+ };
77
+ ```
78
+
79
+ Use the component disabling SSR
80
+
81
+ ```
82
+ import dynamic from "next/dynamic";
83
+
84
+ const AdComponentDynamic = dynamic(() => import("./Home/AdComponentHome"), {
85
+ ssr: false,
86
+ });
87
+
88
+ const Home = () => {
89
+ return (
90
+ <main>
91
+ <AdComponentDynamic />
92
+ </main>
93
+ );
94
+ };
95
+
96
+ export default Home;
97
+ ```
98
+
99
+ If you use Typescript in the folder src create the file "custom-elements.d.ts" and add the this code.
100
+
101
+ ```
102
+ declare namespace JSX {
103
+ interface IntrinsicElements {
104
+ "dreams-ad-engine": unknown;
105
+ }
106
+ }
107
+ ```
108
+
109
+ ### React
110
+
111
+ ```
112
+ import "@dreamsengine-or/dreams-ad-engine/dist/dreams-ad-engine";
113
+
114
+ function App() {
115
+ return (
116
+ <>
117
+ <dreams-ad-engine
118
+ networkId="xxxxx"
119
+ adUnit="xxx-xx-x-xx"
120
+ mapping='[{"viewport":[320,0],"sizing":[[320,50],[320,100]]},{"viewport":[720,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[920,250],[970,90],[728,90]]},{"viewport":[1280,0],"sizing":[[920,250],[970,250],[970,90],[728,90]]}]'
121
+ sizing="[[320,50],[320,100],[728,90],[970,90],[920,250],[970,250]]"
122
+ ></dreams-ad-engine>
123
+ </>
124
+ );
125
+ }
126
+
127
+ export default App;
128
+ ```
129
+
130
+ If you use Typescript in the folder src create the file "custom-elements.d.ts" and add the this code.
131
+
132
+ ```
133
+ declare namespace JSX {
134
+ interface IntrinsicElements {
135
+ "dreams-ad-engine": unknown;
136
+ }
137
+ }
138
+ ```
139
+
140
+ ### Qwik
141
+
142
+ ```
143
+ import { component$ } from "@builder.io/qwik";
144
+
145
+ export default component$(() => {
146
+ return (
147
+ <>
148
+ <dreams-ad-engine
149
+ networkId="xxxxxxxx"
150
+ adUnit="xxx-xx-x-xx"
151
+ mapping='[{"viewport":[320,0],"sizing":[[320,50],[320,100]]},{"viewport":[720,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[920,250],[970,90],[728,90]]},{"viewport":[1280,0],"sizing":[[920,250],[970,250],[970,90],[728,90]]}]'
152
+ sizing="[[320,50],[320,100],[728,90],[970,90],[920,250],[970,250]]"
153
+ ></dreams-ad-engine>
154
+ </>
155
+ );
156
+ });
157
+ ```
158
+
159
+ In the fille root add this code
160
+
161
+ ```
162
+ import { $, component$, useOnDocument } from "@builder.io/qwik";
163
+ ...
164
+ export default component$(() => {
165
+ ...
166
+ useOnDocument(
167
+ "DOMContentLoaded",
168
+ $(() => {
169
+ (async () => {
170
+ await import(
171
+ "@dreamsengine-or/dreams-ad-engine/dist/dreams-ad-engine"
172
+ );
173
+ })();
174
+ })
175
+ );
176
+ ...
177
+ });
178
+ ```
179
+
180
+ If you use Typescript in the folder src create the file "dreams-ad-engine.d.ts" and add the this code.
181
+
182
+ ```
183
+ declare module "@dreamsengine-or/dreams-ad-engine/dist/dreams-ad-engine" {
184
+ const AdComponent: any; // Adjust the type if you know the actual type
185
+ export default AdComponent;
186
+ }
187
+ ```
package/dist/dreams-ad-engine.js ADDED
@@ -0,0 +1,132 @@
1
+ (function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))s(i);new MutationObserver(i=>{for(const o of i)if(o.type==="childList")for(const r of o.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&s(r)}).observe(document,{childList:!0,subtree:!0});function e(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerPolicy&&(o.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?o.credentials="include":i.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function s(i){if(i.ep)return;i.ep=!0;const o=e(i);fetch(i.href,o)}})();/**
2
+ * @license
3
+ * Copyright 2019 Google LLC
4
+ * SPDX-License-Identifier: BSD-3-Clause
5
+ */const z=globalThis,G=z.ShadowRoot&&(z.ShadyCSS===void 0||z.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,lt=Symbol(),F=new WeakMap;let _t=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==lt)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(G&&t===void 0){const s=e!==void 0&&e.length===1;s&&(t=F.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&F.set(e,t))}return t}toString(){return this.cssText}};const ht=n=>new _t(typeof n=="string"?n:n+"",void 0,lt),mt=(n,t)=>{if(G)n.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const s=document.createElement("style"),i=z.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,n.appendChild(s)}},K=G?n=>n:n=>n instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return ht(e)})(n):n;/**
6
+ * @license
7
+ * Copyright 2017 Google LLC
8
+ * SPDX-License-Identifier: BSD-3-Clause
9
+ */const{is:yt,defineProperty:At,getOwnPropertyDescriptor:vt,getOwnPropertyNames:wt,getOwnPropertySymbols:St,getPrototypeOf:bt}=Object,y=globalThis,Z=y.trustedTypes,Et=Z?Z.emptyScript:"",D=y.reactiveElementPolyfillSupport,x=(n,t)=>n,I={toAttribute(n,t){switch(t){case Boolean:n=n?Et:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,t){let e=n;switch(t){case Boolean:e=n!==null;break;case Number:e=n===null?null:Number(n);break;case Object:case Array:try{e=JSON.parse(n)}catch{e=null}}return e}},J=(n,t)=>!yt(n,t),Q={attribute:!0,type:String,converter:I,reflect:!1,hasChanged:J};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),y.litPropertyMetadata??(y.litPropertyMetadata=new WeakMap);class S extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=Q){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&At(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:o}=vt(this.prototype,t)??{get(){return this[e]},set(r){this[e]=r}};return{get(){return i==null?void 0:i.call(this)},set(r){const l=i==null?void 0:i.call(this);o.call(this,r),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??Q}static _$Ei(){if(this.hasOwnProperty(x("elementProperties")))return;const t=bt(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(x("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(x("properties"))){const e=this.properties,s=[...wt(e),...St(e)];for(const i of s)this.createProperty(i,e[i])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const i of s)e.unshift(K(i))}else t!==void 0&&e.push(K(t));return e}static _$Eu(t,e){const s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach(e=>e(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return mt(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach(e=>{var s;return(s=e.hostConnected)==null?void 0:s.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var s;return(s=e.hostDisconnected)==null?void 0:s.call(e)})}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$EC(t,e){var o;const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){const r=(((o=s.converter)==null?void 0:o.toAttribute)!==void 0?s.converter:I).toAttribute(e,s.type);this._$Em=t,r==null?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){var o;const s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){const r=s.getPropertyOptions(i),l=typeof r.converter=="function"?{fromAttribute:r.converter}:((o=r.converter)==null?void 0:o.fromAttribute)!==void 0?r.converter:I;this._$Em=i,this[i]=l.fromAttribute(e,r.type),this._$Em=null}}requestUpdate(t,e,s){if(t!==void 0){if(s??(s=this.constructor.getPropertyOptions(t)),!(s.hasChanged??J)(this[t],e))return;this.P(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(t,e,s){this._$AL.has(t)||this._$AL.set(t,e),s.reflect===!0&&this._$Em!==t&&(this._$Ej??(this._$Ej=new Set)).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var s;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[o,r]of this._$Ep)this[o]=r;this._$Ep=void 0}const i=this.constructor.elementProperties;if(i.size>0)for(const[o,r]of i)r.wrapped!==!0||this._$AL.has(o)||this[o]===void 0||this.P(o,this[o],r)}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(s=this._$EO)==null||s.forEach(i=>{var o;return(o=i.hostUpdate)==null?void 0:o.call(i)}),this.update(e)):this._$EU()}catch(i){throw t=!1,this._$EU(),i}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(s=>{var i;return(i=s.hostUpdated)==null?void 0:i.call(s)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&(this._$Ej=this._$Ej.forEach(e=>this._$EC(e,this[e]))),this._$EU()}updated(t){}firstUpdated(t){}}S.elementStyles=[],S.shadowRootOptions={mode:"open"},S[x("elementProperties")]=new Map,S[x("finalized")]=new Map,D==null||D({ReactiveElement:S}),(y.reactiveElementVersions??(y.reactiveElementVersions=[])).push("2.0.4");/**
10
+ * @license
11
+ * Copyright 2017 Google LLC
12
+ * SPDX-License-Identifier: BSD-3-Clause
13
+ */const U=globalThis,R=U.trustedTypes,X=R?R.createPolicy("lit-html",{createHTML:n=>n}):void 0,dt="$lit$",m=`lit$${Math.random().toFixed(9).slice(2)}$`,ct="?"+m,Pt=`<${ct}>`,w=document,O=()=>w.createComment(""),N=n=>n===null||typeof n!="object"&&typeof n!="function",pt=Array.isArray,Ct=n=>pt(n)||typeof(n==null?void 0:n[Symbol.iterator])=="function",j=`[
14
+ \f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Y=/-->/g,tt=/>/g,A=RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^
15
+ \f\r"'\`<>=]|("|')|))|$)`,"g"),et=/'/g,it=/"/g,ut=/^(?:script|style|textarea|title)$/i,xt=n=>(t,...e)=>({_$litType$:n,strings:t,values:e}),C=xt(1),b=Symbol.for("lit-noChange"),p=Symbol.for("lit-nothing"),st=new WeakMap,v=w.createTreeWalker(w,129);function gt(n,t){if(!Array.isArray(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return X!==void 0?X.createHTML(t):t}const Ut=(n,t)=>{const e=n.length-1,s=[];let i,o=t===2?"<svg>":"",r=P;for(let l=0;l<e;l++){const a=n[l];let c,u,h=-1,$=0;for(;$<a.length&&(r.lastIndex=$,u=r.exec(a),u!==null);)$=r.lastIndex,r===P?u[1]==="!--"?r=Y:u[1]!==void 0?r=tt:u[2]!==void 0?(ut.test(u[2])&&(i=RegExp("</"+u[2],"g")),r=A):u[3]!==void 0&&(r=A):r===A?u[0]===">"?(r=i??P,h=-1):u[1]===void 0?h=-2:(h=r.lastIndex-u[2].length,c=u[1],r=u[3]===void 0?A:u[3]==='"'?it:et):r===it||r===et?r=A:r===Y||r===tt?r=P:(r=A,i=void 0);const _=r===A&&n[l+1].startsWith("/>")?" ":"";o+=r===P?a+Pt:h>=0?(s.push(c),a.slice(0,h)+dt+a.slice(h)+m+_):a+m+(h===-2?l:_)}return[gt(n,o+(n[e]||"<?>")+(t===2?"</svg>":"")),s]};class H{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let o=0,r=0;const l=t.length-1,a=this.parts,[c,u]=Ut(t,e);if(this.el=H.createElement(c,s),v.currentNode=this.el.content,e===2){const h=this.el.content.firstChild;h.replaceWith(...h.childNodes)}for(;(i=v.nextNode())!==null&&a.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(const h of i.getAttributeNames())if(h.endsWith(dt)){const $=u[r++],_=i.getAttribute(h).split(m),k=/([.?@])?(.*)/.exec($);a.push({type:1,index:o,name:k[2],strings:_,ctor:k[1]==="."?Ot:k[1]==="?"?Nt:k[1]==="@"?Ht:L}),i.removeAttribute(h)}else h.startsWith(m)&&(a.push({type:6,index:o}),i.removeAttribute(h));if(ut.test(i.tagName)){const h=i.textContent.split(m),$=h.length-1;if($>0){i.textContent=R?R.emptyScript:"";for(let _=0;_<$;_++)i.append(h[_],O()),v.nextNode(),a.push({type:2,index:++o});i.append(h[$],O())}}}else if(i.nodeType===8)if(i.data===ct)a.push({type:2,index:o});else{let h=-1;for(;(h=i.data.indexOf(m,h+1))!==-1;)a.push({type:7,index:o}),h+=m.length-1}o++}}static createElement(t,e){const s=w.createElement("template");return s.innerHTML=t,s}}function E(n,t,e=n,s){var r,l;if(t===b)return t;let i=s!==void 0?(r=e._$Co)==null?void 0:r[s]:e._$Cl;const o=N(t)?void 0:t._$litDirective$;return(i==null?void 0:i.constructor)!==o&&((l=i==null?void 0:i._$AO)==null||l.call(i,!1),o===void 0?i=void 0:(i=new o(n),i._$AT(n,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=E(n,i._$AS(n,t.values),i,s)),t}class Tt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((t==null?void 0:t.creationScope)??w).importNode(e,!0);v.currentNode=i;let o=v.nextNode(),r=0,l=0,a=s[0];for(;a!==void 0;){if(r===a.index){let c;a.type===2?c=new M(o,o.nextSibling,this,t):a.type===1?c=new a.ctor(o,a.name,a.strings,this,t):a.type===6&&(c=new Mt(o,this,t)),this._$AV.push(c),a=s[++l]}r!==(a==null?void 0:a.index)&&(o=v.nextNode(),r++)}return v.currentNode=w,i}p(t){let e=0;for(const s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class M{get _$AU(){var t;return((t=this._$AM)==null?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=p,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(i==null?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(t==null?void 0:t.nodeType)===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=E(this,t,e),N(t)?t===p||t==null||t===""?(this._$AH!==p&&this._$AR(),this._$AH=p):t!==this._$AH&&t!==b&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):Ct(t)?this.k(t):this._(t)}S(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.S(t))}_(t){this._$AH!==p&&N(this._$AH)?this._$AA.nextSibling.data=t:this.T(w.createTextNode(t)),this._$AH=t}$(t){var o;const{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=H.createElement(gt(s.h,s.h[0]),this.options)),s);if(((o=this._$AH)==null?void 0:o._$AD)===i)this._$AH.p(e);else{const r=new Tt(i,this),l=r.u(this.options);r.p(e),this.T(l),this._$AH=r}}_$AC(t){let e=st.get(t.strings);return e===void 0&&st.set(t.strings,e=new H(t)),e}k(t){pt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const o of t)i===e.length?e.push(s=new M(this.S(O()),this.S(O()),this,this.options)):s=e[i],s._$AI(o),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for((s=this._$AP)==null?void 0:s.call(this,!1,!0,e);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var e;this._$AM===void 0&&(this._$Cv=t,(e=this._$AP)==null||e.call(this,t))}}class L{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,o){this.type=1,this._$AH=p,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=o,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=p}_$AI(t,e=this,s,i){const o=this.strings;let r=!1;if(o===void 0)t=E(this,t,e,0),r=!N(t)||t!==this._$AH&&t!==b,r&&(this._$AH=t);else{const l=t;let a,c;for(t=o[0],a=0;a<o.length-1;a++)c=E(this,l[s+a],e,a),c===b&&(c=this._$AH[a]),r||(r=!N(c)||c!==this._$AH[a]),c===p?t=p:t!==p&&(t+=(c??"")+o[a+1]),this._$AH[a]=c}r&&!i&&this.j(t)}j(t){t===p?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class Ot extends L{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===p?void 0:t}}class Nt extends L{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==p)}}class Ht extends L{constructor(t,e,s,i,o){super(t,e,s,i,o),this.type=5}_$AI(t,e=this){if((t=E(this,t,e,0)??p)===b)return;const s=this._$AH,i=t===p&&s!==p||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,o=t!==p&&(s===p||i);i&&this.element.removeEventListener(this.name,this,s),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class Mt{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){E(this,t)}}const B=U.litHtmlPolyfillSupport;B==null||B(H,M),(U.litHtmlVersions??(U.litHtmlVersions=[])).push("3.1.3");const kt=(n,t,e)=>{const s=(e==null?void 0:e.renderBefore)??t;let i=s._$litPart$;if(i===void 0){const o=(e==null?void 0:e.renderBefore)??null;s._$litPart$=i=new M(t.insertBefore(O(),o),o,void 0,e??{})}return i._$AI(n),i};/**
16
+ * @license
17
+ * Copyright 2017 Google LLC
18
+ * SPDX-License-Identifier: BSD-3-Clause
19
+ */class T extends S{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=kt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Do)==null||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Do)==null||t.setConnected(!1)}render(){return b}}var at;T._$litElement$=!0,T.finalized=!0,(at=globalThis.litElementHydrateSupport)==null||at.call(globalThis,{LitElement:T});const W=globalThis.litElementPolyfillSupport;W==null||W({LitElement:T});(globalThis.litElementVersions??(globalThis.litElementVersions=[])).push("4.0.5");/**
20
+ * @license
21
+ * Copyright 2017 Google LLC
22
+ * SPDX-License-Identifier: BSD-3-Clause
23
+ */const zt=n=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(n,t)}):customElements.define(n,t)};/**
24
+ * @license
25
+ * Copyright 2017 Google LLC
26
+ * SPDX-License-Identifier: BSD-3-Clause
27
+ */const It={attribute:!0,type:String,converter:I,reflect:!1,hasChanged:J},Rt=(n=It,t,e)=>{const{kind:s,metadata:i}=e;let o=globalThis.litPropertyMetadata.get(i);if(o===void 0&&globalThis.litPropertyMetadata.set(i,o=new Map),o.set(e.name,n),s==="accessor"){const{name:r}=e;return{set(l){const a=t.get.call(this);t.set.call(this,l),this.requestUpdate(r,a,n)},init(l){return l!==void 0&&this.P(r,void 0,n),l}}}if(s==="setter"){const{name:r}=e;return function(l){const a=this[r];t.call(this,l),this.requestUpdate(r,a,n)}}throw Error("Unsupported decorator location: "+s)};function f(n){return(t,e)=>typeof e=="object"?Rt(n,t,e):((s,i,o)=>{const r=i.hasOwnProperty(o);return i.constructor.createProperty(o,r?{...s,wrapped:!0}:s),r?Object.getOwnPropertyDescriptor(i,o):void 0})(n,t,e)}/**
28
+ * @license
29
+ * Copyright 2021 Google LLC
30
+ * SPDX-License-Identifier: BSD-3-Clause
31
+ */function nt(n,t,e){return n?t(n):e==null?void 0:e(n)}const Lt=`:host {
32
+ display: block;
33
+ contain: content;
34
+ }
35
+ ::slotted(*) {
36
+ display: block;
37
+ z-index: 9;
38
+ }
39
+
40
+ ::slotted(.ad-serving-rendered) {
41
+ position: sticky;
42
+ z-index: 2;
43
+ top: 1rem;
44
+ }
45
+
46
+ .ad-container {
47
+ position: relative;
48
+ }
49
+ .pinno-ad-container {
50
+ position: relative;
51
+ }
52
+ .ad-label {
53
+ display: block;
54
+ font-size: 9px;
55
+ font-weight: 400;
56
+ letter-spacing: 0.2em;
57
+ margin-bottom: 4px;
58
+ line-height: 1;
59
+ position: relative;
60
+ text-align: center;
61
+ text-transform: uppercase;
62
+ color: #999999;
63
+ }
64
+ .ad-label + .ad-loader {
65
+ top: 13px;
66
+ height: calc(100% - 13px);
67
+ }
68
+ .ad-loader {
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ width: 100%;
73
+ height: 100%;
74
+ background-color: #eee;
75
+ background-image: linear-gradient(
76
+ 90deg,
77
+ rgba(255, 255, 255, 0),
78
+ rgba(255, 255, 255, 0.5),
79
+ rgba(255, 255, 255, 0)
80
+ );
81
+ background-size: 40px 100%;
82
+ background-repeat: no-repeat;
83
+ background-position: left -40px top 0;
84
+ animation: ad-skeleton 2s ease infinite;
85
+ z-index: 2;
86
+ }
87
+ .ad-serving {
88
+ position: relative;
89
+ display: flex;
90
+ flex-wrap: wrap;
91
+ align-items: flex-start;
92
+ justify-content: center;
93
+ padding-block: 1rem;
94
+ margin-block: 1rem;
95
+ }
96
+ .ad-serving::before {
97
+ content: "[AD]";
98
+ position: absolute;
99
+ top: 0;
100
+ left: 0;
101
+ width: 100%;
102
+ height: 100%;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ color: #ccc;
107
+ z-index: 1;
108
+ }
109
+
110
+ @keyframes ad-skeleton {
111
+ to {
112
+ background-position: right -40px top 0;
113
+ }
114
+ }
115
+ `;var Dt=Object.defineProperty,jt=Object.getOwnPropertyDescriptor,g=(n,t,e,s)=>{for(var i=s>1?void 0:s?jt(t,e):t,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&Dt(t,e,i),i},Bt=(n,t,e)=>{if(!t.has(n))throw TypeError("Cannot "+e)},ot=(n,t,e)=>{if(t.has(n))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(n):t.set(n,e)},rt=(n,t,e)=>(Bt(n,t,"access private method"),e),q,ft,V,$t;let d=class extends T{constructor(){super(...arguments),ot(this,q),ot(this,V),this.networkId="",this.adUnit="",this.divId=`div-gpt-ad-${this.adUnit}-${crypto.randomUUID()}`,this.mapping=[],this.sizing=[],this.refresh=!1,this.enableTitle=!1,this.title="Publicidad",this.minHeight=100,this.adLoaded=!1}connectedCallback(){if(super.connectedCallback(),!d.initialized)rt(this,q,ft).call(this),d.initialized=!0,d.old_url=location.href;else{const n=location.href;d.old_url!==n&&(window.googletag.destroySlots(window.dreamsAllSlots),d.old_url=n,window.dreamsAllSlots=[],window.dreamsSlotsToUpdate=[])}}firstUpdated(){typeof this.mapping=="string"&&(this.mapping=JSON.parse(this.mapping)),typeof this.sizing=="string"&&(this.sizing=JSON.parse(this.sizing)),typeof this.minHeight=="string"&&(this.minHeight=parseInt(this.minHeight)),rt(this,V,$t).call(this)}render(){return C`
116
+ <div class="ad-container">
117
+ ${nt(this.enableTitle,()=>C`<span class="ad-label">${this.title}</span>`,()=>C``)}
118
+ ${nt(!this.adLoaded,()=>C`<div
119
+ class="ad-loader"
120
+ data-ad-loader="${this.divId}"
121
+ ></div>`,()=>C``)}
122
+ <div
123
+ class="ad-serving"
124
+ data-post-id="${this.divId}"
125
+ data-tag="${this.adUnit}"
126
+ data-refresh="${this.refresh?"true":"false"}"
127
+ style="min-height: ${this.minHeight}px"
128
+ >
129
+ <slot name="ad-slot"></slot>
130
+ </div>
131
+ </div>
132
+ `}};q=new WeakSet;ft=function(){window.googletag=window.googletag||{cmd:[]},window.googletag.cmd.push(()=>{window.dreamsAllSlots=window.dreamsAllSlots||[],window.dreamsSlotsToUpdate=window.dreamsSlotsToUpdate||[],window.googletag.pubads().enableSingleRequest(),window.googletag.enableServices()})};V=new WeakSet;$t=function(){const n=`/${this.networkId}/${this.adUnit}`,t=this.divId,e=document.createElement("div");e.id=t,e.setAttribute("data-ad",this.divId),e.setAttribute("slot","ad-slot"),e.classList.add("ad-serving-rendered"),e.parentElement||this.appendChild(e),window.googletag.cmd.push(()=>{const s=window.googletag.defineSlot(n,this.sizing,t).addService(window.googletag.pubads());window.googletag.pubads().addEventListener("slotRenderEnded",l=>{l.slot.getSlotElementId()===t&&(this.adLoaded=!0)});const i=window.googletag.sizeMapping();this.mapping.forEach(l=>{i.addSize(l.viewport,l.sizing)});const o=i.build(),r=s.defineSizeMapping(o).addService(window.googletag.pubads());this.refresh&&window.dreamsSlotsToUpdate.push(s),window.dreamsAllSlots.push(r),window.googletag.display(t)})};d.styles=ht(Lt);d.initialized=!1;d.old_url="";g([f({type:String})],d.prototype,"networkId",2);g([f({type:String})],d.prototype,"adUnit",2);g([f({type:String})],d.prototype,"divId",2);g([f({type:Array})],d.prototype,"mapping",2);g([f({type:Array})],d.prototype,"sizing",2);g([f({type:Boolean,reflect:!0})],d.prototype,"refresh",2);g([f({type:Boolean,reflect:!0})],d.prototype,"enableTitle",2);g([f({type:String})],d.prototype,"title",2);g([f({type:Number})],d.prototype,"minHeight",2);g([f({type:Boolean})],d.prototype,"adLoaded",2);d=g([zt("dreams-ad-engine")],d);
package/dist/index.html ADDED
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Dreams Ad Engine</title>
8
+ <script
9
+ async
10
+ id="gads-js"
11
+ src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
12
+ defer
13
+ ></script>
14
+ <script type="module" crossorigin src="./dreams-ad-engine.js"></script>
15
+ </head>
16
+ <body>
17
+ <dummy-demo></dummy-demo>
18
+ <dreams-ad-engine
19
+ networkId="270959339"
20
+ adUnit="fco-is-t-01"
21
+ mapping='[{"viewport":[320,0],"sizing":[[320,50],[320,100]]},{"viewport":[720,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[920,250],[970,90],[728,90]]},{"viewport":[1280,0],"sizing":[[920,250],[970,250],[970,90],[728,90]]}]'
22
+ sizing="[[320,50],[320,100],[728,90],[970,90],[920,250],[970,250]]"
23
+ minHeight="600"
24
+ title="Anuncio"
25
+ >
26
+ </dreams-ad-engine>
27
+ <dreams-ad-engine
28
+ networkId="270959339"
29
+ adUnit="fco-is-t-02"
30
+ mapping='[{"viewport":[320,0],"sizing":[[300,250],[320,50]]},{"viewport":[760,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[970,90],[728,90],[728,90]]}]'
31
+ sizing="[[300,250],[320,50],[728,90],[970,90]]"
32
+ minHeight="600"
33
+ >
34
+ </dreams-ad-engine>
35
+ <dreams-ad-engine
36
+ networkId="270959339"
37
+ adUnit="fco-is-t-03"
38
+ mapping='[{"viewport":[320,0],"sizing":[[300,250],[320,50]]},{"viewport":[760,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[970,90],[728,90],[728,90]]}]'
39
+ sizing="[[300,250],[320,50],[728,90],[970,90]]"
40
+ >
41
+ </dreams-ad-engine>
42
+ <dreams-ad-engine
43
+ networkId="270959339"
44
+ adUnit="fco-is-t-04"
45
+ mapping='[{"viewport":[320,0],"sizing":[[300,250],[320,50]]},{"viewport":[760,0],"sizing":[[728,90]]},{"viewport":[970,0],"sizing":[[970,90],[728,90],[728,90]]}]'
46
+ sizing="[[300,250],[320,50],[728,90],[970,90]]"
47
+ >
48
+ </dreams-ad-engine>
49
+ <dreams-ad-engine
50
+ networkId="270959339"
51
+ adUnit="fco-is-b-01"
52
+ mapping='[{"viewport":[320,0],"sizing":[[300,250],[300,600]]}]'
53
+ sizing="[[300,250],[300,600]]"
54
+ enableTitle="false"
55
+ minHeight="600"
56
+ >
57
+ </dreams-ad-engine>
58
+ </body>
59
+ </html>
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@dreamsengine/dreams-ad-engine",
3
+ "version": "0.0.6",
4
+ "type": "module",
5
+ "main": "./dist/dreams-ad-engine.js",
6
+ "module": "./dist/dreams-ad-engine.js",
7
+ "description": "A component to render Google Ads",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "scripts": {
12
+ "dev": "vite",
13
+ "build": "tsc && vite build",
14
+ "format": "biome format --write ./src"
15
+ },
16
+ "dependencies": {
17
+ "lit": "^3.1.0"
18
+ },
19
+ "devDependencies": {
20
+ "@biomejs/biome": "1.4.1",
21
+ "@rollup/plugin-replace": "^5.0.5",
22
+ "cz-conventional-changelog": "^3.3.0",
23
+ "typescript": "^5.3.3",
24
+ "vite": "^5.0.7"
25
+ },
26
+ "config": {
27
+ "commitizen": {
28
+ "path": "./node_modules/cz-conventional-changelog"
29
+ }
30
+ },
31
+ "readme": "./README.md"
32
+ }