1.0.3 • Published 3 years ago
element-videommerce v1.0.3
Videommerce Modal
How to use videommerce Modal ?
1. First install videommerce by using below command
for npm
npm install element-videommerce@1.0.3
for yarn
yarn add element-videommerce@1.0.3
2. Then import the module in your project
<script type="module" src="node_modules\element-videommerce\element-videommerce.js"></script>
or
Any React,Vue or Angular component
import './node_modules\element-videommerce\element-videommerce.js'
define a variable that acts like an ON/OFF switch.
<script>
//for React and Vue apps
window.showWebComponent = true;
//for Angular apps
var showWebComponent = true;
</script>Finally use the web component by using its HTML selector:
<element-videommerce></element-videommerce>
Events available to be used after following the above instructions
- To open the modal on load add atribute
visibleas follows<element-videommerce visible></element-videommerce> - To add the modal title add atribute
titleas follows<element-videommerce title="my-modal-name"></element-videommerce> - To open the modal on click do as follows
<script>
modal = document.querySelector("element-videommerce");
open = document.querySelector(".open");
open.addEventListener("click", function () {
modal.visible = true;
});
</script>- To close the modal on click do as follows
<script>
modal = document.querySelector("element-videommerce");
modal.addEventListener("cancel", function () {
console.log("cancel event raised");
});
</script>- To get data eg images on click by default data is loaded automatically
<script>
modal = document.querySelector("element-videommerce");
document.querySelector(".images").addEventListener('click', function () {
console.log('images')
modal.getImages();
})
</script>below is html demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><element-videommerce Demo</title>
<script type="module" src="node_modules\element-videommerce\element-videommerce.js"></script>
<style>
p {
border: solid 1px blue;
padding: 8px;
}
</style>
</head>
<body>
<button class="open">Open</button>
<button class="images">get images</button>
<element-videommerce title="Makumba" visible>
<p>This is some really important stuff</p>
<button>hahaha</button>
</element-videommerce>
</body>
<script>
modal = document.querySelector("element-videommerce");
modal.addEventListener("cancel", function () {
console.log("cancel event raised");
});
modal.addEventListener("ok", function () {
console.log("ok event raised");
});
document.querySelector(".images").addEventListener('click', function () {
console.log('images')
modal.getImages();
})
modal.addEventListener('image-selected', function(e){
console.log(e.detail.download_url)
});
open = document.querySelector(".open");
open.addEventListener("click", function () {
modal.visible = true;
});
</script>
</html>