99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import { DeesElement, property, html, customElement, cssManager, css, type TemplateResult } from '@design.estate/dees-element';
|
|
|
|
import * as domtools from '@design.estate/dees-domtools';
|
|
|
|
import * as smartdelay from '@push.rocks/smartdelay';
|
|
|
|
// lets load the Google Script once
|
|
const script = document.createElement('script');
|
|
script.onload = () => {};
|
|
script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
|
|
document.head.appendChild(script);
|
|
|
|
globalThis.adsbygoogle ? null : globalThis.adsbygoogle = [];
|
|
globalThis.adsbygoogle.push({
|
|
google_ad_client: "ca-pub-4104137977476459",
|
|
enable_page_level_ads: false
|
|
});
|
|
|
|
/**
|
|
* the counter for adding multiple ads
|
|
*/
|
|
let counter = 0;
|
|
|
|
@customElement('bellini-adsense')
|
|
export class BelliniAdSense extends DeesElement {
|
|
public static demo = () => html`<bellini-adsense adSenseSlotId="5326656750"></bellini-adsense>`
|
|
|
|
@property()
|
|
public adSenseSlotId: string;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
z-index: 1;
|
|
background: ${cssManager.bdTheme('#fafafa', '#222')};
|
|
font-family: 'Roboto', sans-serif;
|
|
display: block;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding-bottom: 100px;
|
|
}
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
|
|
#adSenseContainer {
|
|
margin: auto;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
${cssManager.cssForTablet(css`
|
|
#adSenseContainer {
|
|
margin: 0px 50px;
|
|
}
|
|
`)}
|
|
`
|
|
]
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<style>
|
|
</style>
|
|
<div id="adSenseContainer">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async firstUpdated(changedProperties) {
|
|
await smartdelay.delayFor(10000);
|
|
const injectableElement = document.querySelectorAll('bellini-adsense')[counter];
|
|
counter++;
|
|
const myInsElement = document.createElement('ins');
|
|
myInsElement.classList.add('adsbygoogle');
|
|
myInsElement.style.display = 'block';
|
|
myInsElement.style.overflow = 'hidden';
|
|
myInsElement.style.borderRadius = '7px';
|
|
myInsElement.style.boxShadow = '0px 0px 5px rgba(0,0,0,0.2)';
|
|
myInsElement.setAttribute('data-ad-client', 'ca-pub-4104137977476459');
|
|
myInsElement.setAttribute('data-ad-slot', this.adSenseSlotId);
|
|
myInsElement.setAttribute('data-ad-format', 'auto');
|
|
myInsElement.setAttribute('data-adtest', 'on');
|
|
|
|
|
|
|
|
injectableElement.appendChild(myInsElement);
|
|
|
|
const adSenseContainer = this.shadowRoot.querySelector('#adSenseContainer');
|
|
// adSenseContainer.appendChild(myInsElement);
|
|
globalThis.adsbygoogle.push({});
|
|
}
|
|
}
|