diff --git a/src/app/components/adbutler/adbutler.component.html b/src/app/components/adbutler/adbutler.component.html index 40395c14..2885bcf5 100644 --- a/src/app/components/adbutler/adbutler.component.html +++ b/src/app/components/adbutler/adbutler.component.html @@ -1,12 +1 @@ - - - -
-
- - - - - - -
+
diff --git a/src/app/components/adbutler/adbutler.component.scss b/src/app/components/adbutler/adbutler.component.scss index 2ae4c28a..910902fe 100644 --- a/src/app/components/adbutler/adbutler.component.scss +++ b/src/app/components/adbutler/adbutler.component.scss @@ -1,27 +1,24 @@ -.butler a { +.ad { + background-color: #263238; + width: 400px; + padding-top: 10px; + padding-bottom: 10px; + font-size: 12px; +} + +button { + background-color: #0097a7; + margin-top: 10px; + border: none; + outline: none; + padding: 5px; + color: white; + font-weight: bold; + padding-right: 15px; + padding-left: 15px; + border-radius: 5px; +} + +a { color: #0097a7; } - -.butler { - font-size: 14px; -} - -.butlerdark { - width: 400px; - border: 0px solid #C0C0C0; - background-color: #263238; -} - -.butlerlight { - width: 400px; - border: 0px solid #C0C0C0; - background-color: white; -} - -.rowdark { - background-color: #263238; -} - -.rowlight { - background-color: #263238; -} diff --git a/src/app/components/adbutler/adbutler.component.ts b/src/app/components/adbutler/adbutler.component.ts index e4f74e3f..1aa46f78 100644 --- a/src/app/components/adbutler/adbutler.component.ts +++ b/src/app/components/adbutler/adbutler.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewEncapsulation, OnDestroy, Input } from '@angular/core'; +import { Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, Input } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { AdButlerResponse } from '../../models/adbutler'; @Component({ selector: 'app-adbutler', @@ -6,64 +8,20 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewEncapsulat styleUrls: ['./adbutler.component.scss'], encapsulation: ViewEncapsulation.None }) -export class AdbutlerComponent implements OnInit, AfterViewInit, OnDestroy { - id: number; - setId: number; - rnd: number; - abkw: string; - sparkCounter: number; - divId: string; - - @ViewChild('code') code: ElementRef; +export class AdbutlerComponent implements OnInit { + @ViewChild('ad') ad: ElementRef; @Input() theme: string; - constructor() { } + htmlCode: string; + + constructor( + private httpClient: HttpClient + ) {} ngOnInit() { - var loadedTextAds355353 = (window as any).loadedTextAds355353; - if(loadedTextAds355353 == null) { - (window as any).loadedTextAds355353 = new Array(); - } - - (window as any).id355353 = 165803; - (window as any).setID355353 = 355353; - (window as any).rnd = (window as any).rnd || Math.floor(Math.random()*10e6); - (window as any).abkw = (window as any).abkw ||''; - - var sparkCounter355353 = (window as any).sparkCounter355353; - if(sparkCounter355353 == null) { - sparkCounter355353 = 1; - } - else { - sparkCounter355353 = sparkCounter355353 + 1 - } - - (window as any).sparkCounter355353 = sparkCounter355353; - (window as any).loadedTextAds355353[sparkCounter355353] = false; - - this.id = (window as any).id355353; - this.divId = "abta355353" + sparkCounter355353; - this.setId = (window as any).setID355353; - this.abkw = (window as any).abkw; - this.rnd = (window as any).rnd; - this.sparkCounter = (window as any).sparkCounter355353; + this.httpClient.get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe((response: AdButlerResponse) => { + this.htmlCode = response.placements.placement_1.body; + this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode); + }); } - - ngAfterViewInit() { - const scriptUrl = "https://servedbyadbutler.com/adserve/;ID=" + this.id + ";setID=" + this.setId + ";type=textad;kw=" + this.abkw + ";pid=" + this.rnd + ";layoutID=" + this.sparkCounter; - - const scriptElement = document.createElement('script'); - scriptElement.src = scriptUrl; - scriptElement.type = 'text/javascript'; - scriptElement.async = true; - scriptElement.charset = 'utf-8'; - this.code.nativeElement.appendChild(scriptElement); - } - - ngOnDestroy() { - // start from 0 when switching pages - (window as any).sparkCounter355353 = 0; - delete (window as any).loadedTextAds355353[this.sparkCounter]; - } - } diff --git a/src/app/components/notification-box/notification-box.component.html b/src/app/components/notification-box/notification-box.component.html index fa0581b5..1bcabaa9 100644 --- a/src/app/components/notification-box/notification-box.component.html +++ b/src/app/components/notification-box/notification-box.component.html @@ -1,10 +1,9 @@
-
+
close -
diff --git a/src/app/components/notification-box/notification-box.component.scss b/src/app/components/notification-box/notification-box.component.scss index 24b0ec74..178ae504 100644 --- a/src/app/components/notification-box/notification-box.component.scss +++ b/src/app/components/notification-box/notification-box.component.scss @@ -3,7 +3,7 @@ bottom: 20px; right: 20px; width: 412px; - height: 88px; + height: 108px; } .content { @@ -16,7 +16,7 @@ .close-button { position: fixed; - bottom: 70px; + bottom: 90px; right: 30px; cursor: pointer; } diff --git a/src/app/models/adbutler.ts b/src/app/models/adbutler.ts new file mode 100644 index 00000000..00518ab6 --- /dev/null +++ b/src/app/models/adbutler.ts @@ -0,0 +1,23 @@ +export interface Placement1 { + banner_id: string; + width: string; + height: string; + alt_text: string; + accompanied_html: string; + target: string; + tracking_pixel: string; + body: string; + redirect_url: string; + refresh_url: string; + refresh_time: string; + image_url: string; +} + +export interface Placements { + placement_1: Placement1; +} + +export interface AdButlerResponse { + status: string; + placements: Placements; +}