Merge pull request #40 from azerion/dev

Added support for aligning GD banner in parent element
azerion · Nov 15, 2019 · 0d68167 · 0d68167
2 parents f5265e4 + 93e1f08
commit 0d68167
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.4.1] 2019-11-15
+### Added
+- GD banner alignment enum
+- Possibility to align GD Banner in a given HTMLElement
+
 ## [2.4.0] 2019-11-15
 ### Added
 - GD banner ad support

diff --git a/build/phaser-ads.d.ts b/build/phaser-ads.d.ts
@@ -154,11 +154,32 @@ declare module PhaserAds {
             Skyscraper = 4,
             WideSkyscraper = 5
         }
+        enum GameDistributionAlignment {
+            TopLeft = 0,
+            TopCenter = 1,
+            TopRight = 2,
+            CenterLeft = 3,
+            Center = 4,
+            CenterRight = 5,
+            BottomLeft = 6,
+            BottomCenter = 7,
+            BottomRight = 8
+        }
         class GameDistributionBanner {
             element: HTMLElement;
+            private resizeListener;
+            private parent;
+            private alignment;
+            private width;
+            private height;
+            private offsetX;
+            private offsetY;
             constructor();
             loadBanner(): void;
             destroy(): void;
+            alignIn(element: HTMLElement, position: GameDistributionAlignment): void;
+            setOffset(x?: number, y?: number): void;
+            private resize;
             setSize(size: GameDistributionBannerSize): void;
             position(x: number, y: number): void;
         }

diff --git a/build/phaser-ads.js b/build/phaser-ads.js
diff --git a/build/phaser-ads.js.map b/build/phaser-ads.js.map
diff --git a/build/phaser-ads.min.js b/build/phaser-ads.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@azerion/phaser-ads",
   "author": "Azerion",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "A Phaser plugin for providing nice ads integration in your phaser.io game",
   "contributors": [
     {

diff --git a/ts/Providers/GameDistributionAds.ts b/ts/Providers/GameDistributionAds.ts
@@ -1,4 +1,3 @@
-
 module PhaserAds {
     export module AdProvider {
         export enum GameDistributionAdType {
@@ -16,10 +15,36 @@ module PhaserAds {
             WideSkyscraper      // 160x600
         }
 
+        export enum GameDistributionAlignment {
+            TopLeft,
+            TopCenter,
+            TopRight,
+            CenterLeft,
+            Center,
+            CenterRight,
+            BottomLeft,
+            BottomCenter,
+            BottomRight
+        }
+
         export class GameDistributionBanner {
 
             public element: HTMLElement;
 
+            private resizeListener: () => void;
+
+            private parent: HTMLElement;
+
+            private alignment: GameDistributionAlignment;
+
+            private width: number;
+
+            private height: number;
+
+            private offsetX: number = 0;
+
+            private offsetY: number = 0;
+
             constructor() {
                 this.element = document.createElement('div');
                 this.element.style.position = 'absolute';
@@ -37,6 +62,92 @@ module PhaserAds {
 
             public destroy(): void {
                 document.body.removeChild(this.element);
+                this.element = null;
+                this.parent = null;
+                this.alignment = null;
+
+                if (this.resizeListener) {
+                    window.removeEventListener('resize', this.resizeListener);
+                }
+            }
+
+            public alignIn(element: HTMLElement, position: GameDistributionAlignment): void {
+                this.parent = element;
+                this.alignment = position;
+
+                this.resizeListener = () => this.resize();
+
+                window.addEventListener('resize', this.resizeListener);
+
+                this.resize();
+            }
+
+            public setOffset(x: number = 0, y: number = 0): void {
+                this.offsetX = x;
+                this.offsetY = y;
+
+                this.resize();
+            }
+
+            private resize(): void {
+                const parentBoundingRect: ClientRect = this.parent.getBoundingClientRect();
+
+                switch (this.alignment) {
+                    case GameDistributionAlignment.TopLeft:
+                        this.position(
+                            parentBoundingRect.left,
+                            parentBoundingRect.top
+                        );
+                        break;
+                    case GameDistributionAlignment.TopCenter:
+                        this.position(
+                            parentBoundingRect.left + parentBoundingRect.width / 2 - this.width / 2,
+                            parentBoundingRect.top
+                        );
+                        break;
+                    case GameDistributionAlignment.TopRight:
+                        this.position(
+                            parentBoundingRect.left + parentBoundingRect.width - this.width,
+                            parentBoundingRect.top
+                        );
+                        break;
+                    case GameDistributionAlignment.CenterLeft:
+                        this.position(
+                            parentBoundingRect.left,
+                            parentBoundingRect.top + parentBoundingRect.height / 2 - this.height / 2
+                        );
+                        break;
+                    case GameDistributionAlignment.Center:
+                        this.position(
+                            parentBoundingRect.left + parentBoundingRect.width / 2 - this.width / 2,
+                            parentBoundingRect.top + parentBoundingRect.height / 2 - this.height / 2
+                        );
+                        break;
+                    case GameDistributionAlignment.CenterRight:
+                        this.position(
+                            parentBoundingRect.left + parentBoundingRect.width - this.width,
+                            parentBoundingRect.top + parentBoundingRect.height / 2 - this.height / 2
+                        );
+                        break;
+                    case GameDistributionAlignment.BottomLeft:
+                        this.position(
+                            parentBoundingRect.left,
+                            parentBoundingRect.top + parentBoundingRect.height - this.height
+                        );
+                        break;
+                    case GameDistributionAlignment.BottomCenter:
+                        this.position(
+                            parentBoundingRect.left + parentBoundingRect.width / 2 - this.width / 2,
+                            parentBoundingRect.top + parentBoundingRect.height - this.height
+                        );
+                        break;
+                    case GameDistributionAlignment.BottomRight:
+                        this.position(
+                            parentBoundingRect.left + parentBoundingRect.width - this.width,
+                            parentBoundingRect.top + parentBoundingRect.height - this.height
+                        );
+                        break;
+                }
             }
 
             public setSize(size: GameDistributionBannerSize): void {
@@ -68,13 +179,17 @@ module PhaserAds {
                         height = 600;
                         break;
                 }
+
+                this.width = width;
+                this.height = height;
+
                 this.element.style.width = `${width}px`;
                 this.element.style.height = `${height}px`;
             }
 
             public position(x: number, y: number): void {
-                this.element.style.left = `${x}px`;
-                this.element.style.top = `${y}px`;
+                this.element.style.left = `${x + this.offsetX}px`;
+                this.element.style.top = `${y + this.offsetY}px`;
             }
         }
 
@@ -106,7 +221,7 @@ module PhaserAds {
                 };
 
                 //Include script. even when adblock is enabled, this script also allows us to track our users;
-                (function(d: Document, s: string, id: string): void {
+                (function (d: Document, s: string, id: string): void {
                     let js: HTMLScriptElement;
                     let fjs: HTMLScriptElement = <HTMLScriptElement>d.getElementsByTagName(s)[0];
                     if (d.getElementById(id)) {
@@ -130,7 +245,7 @@ module PhaserAds {
                     return;
                 }
 
-                if (typeof gdsdk === 'undefined' ||  (gdsdk && typeof gdsdk.showAd === 'undefined')) {
+                if (typeof gdsdk === 'undefined' || (gdsdk && typeof gdsdk.showAd === 'undefined')) {
                     //So gdApi isn't available OR
                     //gdApi is available, but showBanner is not there (weird but can happen)
                     this.adsEnabled = false;