diff --git a/docs/index.html b/docs/index.html index e57ea73..1357dce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -126,7 +126,7 @@ } } - + @@ -258,33 +258,35 @@
Useful Links
- \ No newline at end of file + diff --git a/src/Poppy.js b/src/Poppy.js index 60dc343..7fb2475 100644 --- a/src/Poppy.js +++ b/src/Poppy.js @@ -33,8 +33,18 @@ export class Poppy { } }; this.element = null; + this.init(); } + show() { + if (this.state.position === "topLeft" || this.state.position === "topRight") { + this.element.style.transform = 'translateY(10%)'; + } else if (this.state.position === "bottomLeft" || this.state.position === "bottomRight") { + this.element.style.transform = 'translateY(0)'; + } + } + + init() { const createContainer = position => { const container = document.createElement("div"); container.style.maxWidth = "300px"; @@ -47,22 +57,29 @@ export class Poppy { container.style.backgroundColor = "#FFF"; container.style.fontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; + + container.style.transition = '1s all'; if (position === "topLeft") { container.style.top = "0"; container.style.left = "0"; + container.style.transform = 'translateY(calc(-100% - 20px))'; } else if (position === "topRight") { container.style.top = "0"; container.style.right = "0"; + container.style.transform = 'translateY(calc(-100% - 20px))'; } else if (position === "bottomLeft") { container.style.bottom = "0"; container.style.left = "0"; + container.style.transform = 'translateY(calc(100% + 20px))'; } else if (position === "bottomRight") { container.style.bottom = "0"; container.style.right = "0"; + container.style.transform = 'translateY(calc(100% + 20px))'; } return container; }; + const createPopup = options => { const title = createTitle(options.title); const image = createCoverImage(options.coverImage); @@ -76,6 +93,7 @@ export class Poppy { components.forEach(component => fragment.appendChild(component)); return fragment; }; + const createTitle = title => { if (!title.text) return null; const titleContainer = document.createElement("div"); @@ -108,6 +126,7 @@ export class Poppy { titleContainer.appendChild(createCloseIcon()); return titleContainer; }; + const createContent = content => { if (!content) return null; const contentContainer = document.createElement("div"); @@ -117,20 +136,23 @@ export class Poppy { contentContainer.innerHTML = content; return contentContainer; }; + const createCoverImage = image => { if (!image) return null; - const imageContainer = document.createElement("img"); + const imageContainer = document.createElement("div"); imageContainer.style.width = "100%"; - imageContainer.style.maxHeight = "150px"; - imageContainer.style.objectFit = "cover"; + imageContainer.style.paddingTop = "150px"; + imageContainer.style.backgroundSize = "cover"; + imageContainer.style.backgroundPosition = "center"; + imageContainer.style.backgroundImage = `url(${image})`; - imageContainer.src = image; imageContainer.onerror = () => { imageContainer.style.display = "none"; console.warn("Poppy: Cover image cannot be found."); }; return imageContainer; }; + const createCTA = cta => { if (!cta || !cta.text || !cta.url) return null; const contentContainer = document.createElement("a"); @@ -155,6 +177,7 @@ export class Poppy { return contentContainer; }; + const createCloseIcon = () => { // Close Icon const closeIcon = ` @@ -168,13 +191,14 @@ export class Poppy { closeIconContainer.addEventListener("click", () => { if (this.element) { - this.element.parentNode.removeChild(this.element); + this.close(); } }); // OnClick Handler return closeIconContainer; }; + const createFragmentContainer = () => { return document.createDocumentFragment(); }; @@ -196,9 +220,25 @@ export class Poppy { } }, this.state.delay); } + close() { if (this.element && this.element.parentNode) { - this.element.parentNode.removeChild(this.element); + console.log(this); + if (this.state.position === "topLeft") { + this.element.style.transform = 'translateY(calc(-100% - 20px))'; + } else if (this.state.position === "topRight") { + this.element.style.transform = 'translateY(calc(-100% - 20px))'; + } else if (this.state.position === "bottomLeft") { + this.element.style.transform = 'translateY(calc(100% + 20px))'; + } else if (this.state.position === "bottomRight") { + this.element.style.transform = 'translateY(calc(100% + 20px))'; + } + + this.element.addEventListener('transitionend', function closeContainer(event) { + if (event.propertyName === "transform") { + this.parentNode.removeChild(this); + } + }) } } }