Skip to content
This repository has been archived by the owner on Oct 20, 2023. It is now read-only.

Preload image by adding Poppy to DOM on init #2

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+70 −28
Open

Preload image by adding Poppy to DOM on init #2

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
324baa0
Avoid sudden container resizing by using aspect-ratio box for image
saltymouse Jul 8, 2019
51a857c
Center the background image
saltymouse Jul 8, 2019
32ca05a
Preload Poppy into DOM with open/close animations
saltymouse Jul 8, 2019
0c31b70
Add init to constructor
saltymouse Jul 8, 2019
534a3bc
Add example usage for new show() method
saltymouse Jul 8, 2019
5c135b5
Add animations for all positions
saltymouse Jul 8, 2019
34e2520
Set correct element for show()
saltymouse Jul 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 24 additions & 22 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@
}
}
</style>
<script src="./Poppy/Poppy.min.js"></script>
<script src="../dist/Poppy.js" async></script>
</head>

<body>
Expand Down Expand Up @@ -258,33 +258,35 @@ <h5>Useful Links</h5>
</footer>

<script>
let pop = new Poppy({
title: {
text: "Planning a travel?",
avatar: "https://randomuser.me/api/portraits/women/31.jpg",
color: "#4fc3f7"
},
content:
"<strong>Travel Tips:</strong><br />If you are not a regular traveller, here are some of the tips for travellers.",
cta: {
text: "Create Your Own Poppy",
url: "https://github.com/apvarun/poppyjs",
color: "#4fc3f7",
newtab: true,
onclick: () => {
console.log("CTA Clicked");
}
},
coverImage: "https://source.unsplash.com/tK-Ag9DkuZU/400x250",
position: "bottomLeft",
});

function triggerPoppy() {
let pop = new Poppy({
title: {
text: "Planning a travel?",
avatar: "https://randomuser.me/api/portraits/women/31.jpg",
color: "#4fc3f7"
},
content:
"<strong>Travel Tips:</strong><br />If you are not a regular traveller, here are some of the tips for travellers.",
cta: {
text: "Create Your Own Poppy",
url: "https://github.com/apvarun/poppyjs",
color: "#4fc3f7",
newtab: true,
onclick: () => {
console.log("CTA Clicked");
}
},
coverImage: "https://source.unsplash.com/tK-Ag9DkuZU/400x250",
position: "bottomRight"
});
pop.show();
}

document
.querySelector(".initPoppy")
.addEventListener("click", triggerPoppy);
</script>
</body>

</html>
</html>
52 changes: 46 additions & 6 deletions src/Poppy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
container.style.transform = 'translateY(0)';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Transform should be applied to this.element instead of container

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed!

}
}

init() {
const createContainer = position => {
const container = document.createElement("div");
container.style.maxWidth = "300px";
Expand All @@ -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);
Expand All @@ -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");
Expand Down Expand Up @@ -108,6 +126,7 @@ export class Poppy {
titleContainer.appendChild(createCloseIcon());
return titleContainer;
};

const createContent = content => {
if (!content) return null;
const contentContainer = document.createElement("div");
Expand All @@ -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");
Expand All @@ -155,6 +177,7 @@ export class Poppy {

return contentContainer;
};

const createCloseIcon = () => {
// Close Icon
const closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square">
Expand All @@ -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();
};
Expand All @@ -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);
}
})
}
}
}
Expand Down