diff options
| author | ivarlovlie <ivar.lovlie@gmail.com> | 2020-06-15 19:13:57 +0200 |
|---|---|---|
| committer | ivarlovlie <ivar.lovlie@gmail.com> | 2020-06-15 19:13:57 +0200 |
| commit | 55483eee0f655ea9e5bdf88165ec1f2a107f39dc (patch) | |
| tree | 5f655c697c17e54f0d2e662b82b242c33676b422 | |
| download | web-components-55483eee0f655ea9e5bdf88165ec1f2a107f39dc.tar.xz web-components-55483eee0f655ea9e5bdf88165ec1f2a107f39dc.zip | |
Initial commit
| -rw-r--r-- | README.md | 3 | ||||
| -rw-r--r-- | lightbox/lightbox.css | 21 | ||||
| -rw-r--r-- | lightbox/lightbox.js | 34 | ||||
| -rw-r--r-- | lightbox/sample.html | 28 | ||||
| -rw-r--r-- | tabs/index.html | 59 |
5 files changed, 145 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..1313ba8 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# pure + +diverse pure js komponenter diff --git a/lightbox/lightbox.css b/lightbox/lightbox.css new file mode 100644 index 0000000..953af83 --- /dev/null +++ b/lightbox/lightbox.css @@ -0,0 +1,21 @@ +img.lightbox[data-light-box-id] { + cursor: pointer; +} + +[data-light-box-wrapper-id] { + background-color: #0b0704; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +[data-light-box-wrapper-id] img { + padding: 1rem; + max-height: calc(100% - 50px); + max-width: calc(100% - 50px); +}
\ No newline at end of file diff --git a/lightbox/lightbox.js b/lightbox/lightbox.js new file mode 100644 index 0000000..d6b974f --- /dev/null +++ b/lightbox/lightbox.js @@ -0,0 +1,34 @@ +class Lightbox { + constructor(selector) { + this.initalizeTags(selector); + const css = "img.lightbox[data-light-box-id]{cursor:pointer}[data-light-box-wrapper-id]{background-color:#0b0704;position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center}[data-light-box-wrapper-id] img{padding:1rem;max-height:calc(100% - 50px);max-width:calc(100% - 50px)}"; + const styleSheet = document.createElement("style"); + styleSheet.innerHTML = css; + styleSheet.dataset.lightboxStyles = "true"; + document.head.appendChild(styleSheet); + } + + openLightbox(id) { + const source = document.querySelector("[data-light-box-id='" + id + "']"); + const wrapper = document.createElement("div"); + wrapper.dataset.lightBoxWrapperId = id; + wrapper.onclick = () => this.closeLightbox(id); + const img = document.createElement("img"); + img.src = source.src; + wrapper.appendChild(img); + document.body.style = "overflow: hidden !important;"; + document.body.appendChild(wrapper); + } + + closeLightbox(id) { + document.querySelector("[data-light-box-wrapper-id='" + id + "']").remove(); + document.body.style.overflow = ""; + } + + initalizeTags(selector) { + document.querySelectorAll(selector).forEach(image => { + image.dataset.lightBoxId = Math.random().toString(36).substring(2) + Date.now().toString(36); + image.onclick = () => this.openLightbox(image.dataset.lightBoxId); + }); + } +}
\ No newline at end of file diff --git a/lightbox/sample.html b/lightbox/sample.html new file mode 100644 index 0000000..48964e5 --- /dev/null +++ b/lightbox/sample.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>Document</title> +</head> + +<body> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <img src="https://source.unsplash.com/random" height="250" alt="Random image from unsplash" class="lightbox"> + <script src="lightbox.js"></script> + <script> + const lightbox = new Lightbox(".lightbox"); + </script> +</body> + +</html>
\ No newline at end of file diff --git a/tabs/index.html b/tabs/index.html new file mode 100644 index 0000000..e50728b --- /dev/null +++ b/tabs/index.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <title>Document</title> +</head> + +<body> + <ul class="tabs"> + <li class="tab-button" data-tab="1">ONE</li> + <li class="tab-button" data-tab="2">TWO</li> + <li class="tab-button" data-tab="3">THREE</li> + </ul> + + + <main> + <div class="tab-content-container" data-tab="1"> + <h1>ONE</h1> + </div> + <div class="tab-content-container" data-tab="2"> + <h1>TWO</h1> + </div> + <div class="tab-content-container" data-tab="3"> + <h1>THREE</h1> + </div> + </main> + + <script> + document.querySelectorAll(".tab-content-container[data-tab]").forEach(contentContainer => { + contentContainer.style.display = "none"; + }); + + document.querySelectorAll(".tab-button[data-tab]").forEach(button => { + button.addEventListener("click", handleButtonClick); + }); + + function handleButtonClick(element) { + if (element.originalTarget.dataset.tab) { + document.querySelectorAll(".tab-button[data-tab]").forEach(b => { + if (b.dataset.tab === element.originalTarget.dataset.tab) + b.classList.add("active"); + else + b.classList.remove("active"); + }); + document.querySelectorAll(".tab-content-container[data-tab]").forEach(c => { + if (c.dataset.tab === element.originalTarget.dataset.tab) + c.style.display = ""; + else + c.style.display = "none"; + }); + } + } + </script> +</body> + +</html>
\ No newline at end of file |