From 0453258d8698c67aee8a9e2c29eb5e7c3e5f161e Mon Sep 17 00:00:00 2001 From: "Joshua@Econify" Date: Thu, 17 Oct 2019 12:49:18 -0400 Subject: [PATCH 1/2] [JR] fix restore original container style on destroy --- src/plugins/Sticky.ts | 16 ++++++++++---- tests/plugins/Sticky.test.ts | 42 +++++++++++++++++++++++++++++++++++- 2 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/plugins/Sticky.ts b/src/plugins/Sticky.ts index 0708f1b..82789b6 100644 --- a/src/plugins/Sticky.ts +++ b/src/plugins/Sticky.ts @@ -23,6 +23,7 @@ class Sticky extends GenericPlugin { public listener?: any; public boundary?: IBoundary; public originalStyle?: any; + public originalStyleCssText?: any; public onCreate() { if (!this.isEnabled('sticky')) { @@ -31,7 +32,16 @@ class Sticky extends GenericPlugin { const { container, configuration } = this.ad; const { stickyOffset = 0 } = configuration; - this.originalStyle = container.style; + + this.originalStyle = {}; + + // Clone to avoid container.style value assigment overriding original style values + Object.entries(container.style).forEach(([_, cssProperty]) => { + this.originalStyle[cssProperty] = container.style.getPropertyValue(cssProperty); + }); + + // Simplify style restoration on destroy + this.originalStyleCssText = container.style.cssText; container.style.position = 'sticky'; container.style.top = `${stickyOffset}px`; @@ -58,9 +68,7 @@ class Sticky extends GenericPlugin { public cleanup() { const { container } = this.ad; - container.style.position = this.originalStyle.position; - container.style.top = this.originalStyle.top; - container.style.transform = this.originalStyle.transform; + container.style.cssText = this.originalStyleCssText; if (this.listener) { window.removeEventListener('scroll', this.listener); diff --git a/tests/plugins/Sticky.test.ts b/tests/plugins/Sticky.test.ts index f9d5512..a05861c 100644 --- a/tests/plugins/Sticky.test.ts +++ b/tests/plugins/Sticky.test.ts @@ -55,5 +55,45 @@ describe('Sticky', () => { const sticky: any = new Sticky(ad); sticky.onCreate(); expect(ad.container.style.top).toBe('3px'); - }) + }); + + it('reverts sticky container to original styles when destroyed', () => { + const dummyParent: any = document.createElement('div'); + const dummyAdContainer: any = document.createElement('div'); + const originalDummyAdContainerPosition = 'relative' + dummyAdContainer.style.position = originalDummyAdContainerPosition; + + dummyParent.appendChild(dummyAdContainer); + + const ad = { + configuration: { + breakpoints: {}, + stickyOffset: 3, + sticky: true + }, + container: dummyAdContainer, + el: {}, + network: 'DFP', + render: () => {}, + refresh: jest.fn(() => {}), + clear: () => {}, + destroy: () => {}, + freeze: () => {}, + unfreeze: () => {} + } + + // @ts-ignore + const sticky: any = new Sticky(ad); + + // Container set to sticky + sticky.onCreate(); + + // Ad container styles like position should be overridden + expect(ad.container.style.position).not.toEqual(originalDummyAdContainerPosition); + + // Clean up should revert styles to original + sticky.onDestroy(); + + expect(ad.container.style.position).toEqual(originalDummyAdContainerPosition); + }); }); From fd618c9e75c9107c306f7ac8212db4837ab07244 Mon Sep 17 00:00:00 2001 From: "Joshua@Econify" Date: Thu, 17 Oct 2019 13:29:26 -0400 Subject: [PATCH 2/2] package.json: bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f12de0f..d2ab0c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "adjs", - "version": "2.0.0-beta.24", + "version": "2.0.0-beta.25", "description": "Ad Library to simplify and optimize integration with ad networks such as DFP", "main": "./core.js", "types": "./types.d.ts",