engram-popup 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -0
- package/dist/engram-popup.es.js +17 -17
- package/dist/engram-popup.umd.js +2 -2
- package/dist/index.css +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
text
|
|
2
|
+
# Engram Popup Library
|
|
3
|
+
|
|
4
|
+
A lightweight and easy-to-use modal/popup library for web projects.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
Install the package via npm:
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm i engram-popup
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Usage
|
|
15
|
+
|
|
16
|
+
1. Import the library
|
|
17
|
+
In your main JavaScript/TypeScript file:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
// Import styles
|
|
21
|
+
import 'engram-popup/dist/index.css';
|
|
22
|
+
|
|
23
|
+
// Import JavaScript functionality
|
|
24
|
+
import { popup } from 'engram-popup';
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
2. Create a popup
|
|
29
|
+
Add a div element with the data-engram-popup attribute to your HTML:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
<div class="your-popup-class" data-engram-popup="unique-popup-name"></div>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Important notes:
|
|
36
|
+
|
|
37
|
+
Use a unique value for the data-engram-popup attribute (e.g., login-popup, contact-form)
|
|
38
|
+
|
|
39
|
+
Avoid creating multiple popups with the same attribute value as this may cause conflicts
|
|
40
|
+
|
|
41
|
+
Add your own CSS class (like your-popup-class) to style the popup (dimensions, background, etc.)
|
|
42
|
+
|
|
43
|
+
3. Create a trigger button
|
|
44
|
+
Add a button (or any other element) with the data-engram-button attribute:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
<button data-engram-button="unique-popup-name">Open Popup</button>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The value of data-engram-button must match the value of the corresponding data-engram-popup attribute.
|
|
51
|
+
|
|
52
|
+
Complete Example
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
<!-- Trigger button -->
|
|
56
|
+
<button data-engram-button="test-popup">Open Modal</button>
|
|
57
|
+
|
|
58
|
+
<!-- Popup element -->
|
|
59
|
+
<div class="custom-popup-style" data-engram-popup="test-popup">
|
|
60
|
+
<h2>Popup Content</h2>
|
|
61
|
+
<p>This is your custom popup content.</p>
|
|
62
|
+
</div>
|
|
63
|
+
```
|
|
64
|
+
Add your own CSS classes to customize the appearance of your popups:
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
.custom-popup-style {
|
|
68
|
+
width: 400px;
|
|
69
|
+
background: white;
|
|
70
|
+
padding: 20px;
|
|
71
|
+
border-radius: 8px;
|
|
72
|
+
/* Add your custom styles here */
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Notes
|
|
77
|
+
You can add as many popups as needed on a single page
|
|
78
|
+
|
|
79
|
+
Each popup should have a unique data-engram-popup value
|
|
80
|
+
|
|
81
|
+
The trigger element and popup element are linked through matching attribute values
|
package/dist/engram-popup.es.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
function
|
|
1
|
+
function f() {
|
|
2
2
|
const l = document.querySelectorAll("[data-engram-button]");
|
|
3
3
|
if (console.log(l.length), !l || l.length < 1) return;
|
|
4
4
|
let i = null;
|
|
5
|
-
const
|
|
6
|
-
console.log(
|
|
5
|
+
const p = document.querySelectorAll(["[data-engram-popup]"]);
|
|
6
|
+
console.log(p[0]);
|
|
7
7
|
for (let e = 0; e < l.length; e++)
|
|
8
8
|
l[e].addEventListener("click", () => {
|
|
9
9
|
const n = l[e].getAttribute("data-engram-button");
|
|
10
10
|
i != n && s().then((o) => {
|
|
11
|
-
console.log(o), o === !0 &&
|
|
11
|
+
console.log(o), o === !0 && d(n);
|
|
12
12
|
});
|
|
13
13
|
});
|
|
14
|
-
function
|
|
14
|
+
function d(e) {
|
|
15
15
|
let n = null;
|
|
16
|
-
for (let o = 0; o <
|
|
17
|
-
let t =
|
|
16
|
+
for (let o = 0; o < p.length; o++) {
|
|
17
|
+
let t = p[o].getAttribute("data-engram-popup");
|
|
18
18
|
if (e === t) {
|
|
19
|
-
n =
|
|
19
|
+
n = p[o];
|
|
20
20
|
break;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
n ?
|
|
23
|
+
n ? m(n) : alert(`popup container with name ${e} dont finded`);
|
|
24
24
|
}
|
|
25
|
-
function
|
|
25
|
+
function m(e) {
|
|
26
26
|
let n = e.cloneNode(!0);
|
|
27
27
|
i = n.getAttribute("data-engram-popup");
|
|
28
28
|
let o = n.getAttribute("data-engram-theme") ?? "white";
|
|
29
29
|
n.getAttribute("data-engram-animation");
|
|
30
|
-
let t = document.createElement("div"),
|
|
31
|
-
|
|
32
|
-
let
|
|
33
|
-
console.log(u), t.style.visibility = "", t.style.transform = `translateY(${+u / 2 - +
|
|
30
|
+
let t = document.createElement("div"), r = document.createElement("div");
|
|
31
|
+
r.classList.add("engram-popup__close"), t.classList.add("engram-popup"), o == "white" ? t.classList.add("engram-popup--theme-white") : o == "black" ? t.classList.add("engram-popup--theme-black") : t.classList.add("engram-popup--theme-white"), n.removeAttribute("data-engram-popup"), t.appendChild(r), t.appendChild(n), t.style.visibility = "hidden", document.body.appendChild(t);
|
|
32
|
+
let h = t.clientHeight, u = window.innerHeight, c = parseInt(getComputedStyle(t).getPropertyValue("width"));
|
|
33
|
+
console.log(u), console.log("popupWidth", c), t.style.visibility = "", t.style.left = `calc(50% - (${c}px / 2) )`, t.style.transform = `translateY(${+u / 2 - +h / 2}px)`, r.addEventListener("click", g), setTimeout(() => {
|
|
34
34
|
document.addEventListener("click", a);
|
|
35
35
|
}, 0);
|
|
36
36
|
}
|
|
37
37
|
function a(e) {
|
|
38
38
|
e.target.closest(".engram-popup") || (s(), console.log("click outside"));
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function g() {
|
|
41
41
|
let e = this.closest(".engram-popup");
|
|
42
42
|
e.style.transform = "translateY(110vh)", setTimeout(() => {
|
|
43
43
|
e.style.visibility = "", e.remove(), i = null, document.removeEventListener("click", a), console.log("close current popup");
|
|
@@ -46,7 +46,7 @@ function h() {
|
|
|
46
46
|
function s() {
|
|
47
47
|
const e = Array.from(document.querySelectorAll(".engram-popup"));
|
|
48
48
|
if (document.removeEventListener("click", a), e.length < 1) return Promise.resolve(!0);
|
|
49
|
-
const n = e.map((o) => new Promise((t,
|
|
49
|
+
const n = e.map((o) => new Promise((t, r) => {
|
|
50
50
|
o.style.transform = "translateY(110vh)", setTimeout(() => {
|
|
51
51
|
o.style.visibility = "", o.remove(), i = null, t();
|
|
52
52
|
}, 500);
|
|
@@ -55,5 +55,5 @@ function h() {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
export {
|
|
58
|
-
|
|
58
|
+
f as popup
|
|
59
59
|
};
|
package/dist/engram-popup.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(i,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(i=typeof globalThis<"u"?globalThis:i||self,p(i["engram-popup"]={}))})(this,(function(i){"use strict";var p=document.createElement("style");p.textContent=`[data-engram-popup]{display:none}.engram-popup{width:600px;z-index:999;top:0;background:#fff;border-radius:20px;position:fixed;box-shadow:0 0 10px #0000001a;
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(p);function
|
|
1
|
+
(function(i,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(i=typeof globalThis<"u"?globalThis:i||self,p(i["engram-popup"]={}))})(this,(function(i){"use strict";var p=document.createElement("style");p.textContent=`[data-engram-popup]{display:none}.engram-popup{width:600px;z-index:999;top:0;background:#fff;border-radius:20px;position:fixed;box-shadow:0 0 10px #0000001a;padding:30px;transform:translateY(110vh);transition:all ease .5s;box-sizing:border-box}.engram-popup--theme-black{background:#222}.engram-popup__close{position:absolute;width:35px;height:35px;border-radius:100px;display:flex;align-items:center;justify-content:center;background:#ccc;right:10px;top:10px;cursor:pointer}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(p);function g(){const l=document.querySelectorAll("[data-engram-button]");if(console.log(l.length),!l||l.length<1)return;let r=null;const a=document.querySelectorAll(["[data-engram-popup]"]);console.log(a[0]);for(let e=0;e<l.length;e++)l[e].addEventListener("click",()=>{const n=l[e].getAttribute("data-engram-button");r!=n&&d().then(o=>{console.log(o),o===!0&&h(n)})});function h(e){let n=null;for(let o=0;o<a.length;o++){let t=a[o].getAttribute("data-engram-popup");if(e===t){n=a[o];break}}n?f(n):alert(`popup container with name ${e} dont finded`)}function f(e){let n=e.cloneNode(!0);r=n.getAttribute("data-engram-popup");let o=n.getAttribute("data-engram-theme")??"white";n.getAttribute("data-engram-animation");let t=document.createElement("div"),s=document.createElement("div");s.classList.add("engram-popup__close"),t.classList.add("engram-popup"),o=="white"?t.classList.add("engram-popup--theme-white"):o=="black"?t.classList.add("engram-popup--theme-black"):t.classList.add("engram-popup--theme-white"),n.removeAttribute("data-engram-popup"),t.appendChild(s),t.appendChild(n),t.style.visibility="hidden",document.body.appendChild(t);let y=t.clientHeight,c=window.innerHeight,m=parseInt(getComputedStyle(t).getPropertyValue("width"));console.log(c),console.log("popupWidth",m),t.style.visibility="",t.style.left=`calc(50% - (${m}px / 2) )`,t.style.transform=`translateY(${+c/2-+y/2}px)`,s.addEventListener("click",b),setTimeout(()=>{document.addEventListener("click",u)},0)}function u(e){e.target.closest(".engram-popup")||(d(),console.log("click outside"))}function b(){let e=this.closest(".engram-popup");e.style.transform="translateY(110vh)",setTimeout(()=>{e.style.visibility="",e.remove(),r=null,document.removeEventListener("click",u),console.log("close current popup")},500)}function d(){const e=Array.from(document.querySelectorAll(".engram-popup"));if(document.removeEventListener("click",u),e.length<1)return Promise.resolve(!0);const n=e.map(o=>new Promise((t,s)=>{o.style.transform="translateY(110vh)",setTimeout(()=>{o.style.visibility="",o.remove(),r=null,t()},500)}));return Promise.all(n).then(()=>!0)}}i.popup=g,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-engram-popup]{display:none}.engram-popup{width:600px;z-index:999;top:0;background:#fff;border-radius:20px;position:fixed;box-shadow:0 0 10px #0000001a;
|
|
1
|
+
[data-engram-popup]{display:none}.engram-popup{width:600px;z-index:999;top:0;background:#fff;border-radius:20px;position:fixed;box-shadow:0 0 10px #0000001a;padding:30px;transform:translateY(110vh);transition:all ease .5s;box-sizing:border-box}.engram-popup--theme-black{background:#222}.engram-popup__close{position:absolute;width:35px;height:35px;border-radius:100px;display:flex;align-items:center;justify-content:center;background:#ccc;right:10px;top:10px;cursor:pointer}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "engram-popup",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "A lightweight and dependency-free JavaScript library for creating popups and modals. Works via npm and CDN, and fits projects of any size — from simple landing pages to complex SPA applications.",
|