engram-popup 0.1.8 → 0.2.0
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/dist/engram-popup.es.js +50 -41
- package/dist/engram-popup.umd.js +2 -2
- package/dist/index.css +1 -1
- package/package.json +4 -4
package/dist/engram-popup.es.js
CHANGED
|
@@ -1,59 +1,68 @@
|
|
|
1
|
-
function
|
|
1
|
+
function v(m, y) {
|
|
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(
|
|
7
|
-
for (let
|
|
8
|
-
l[
|
|
9
|
-
const
|
|
10
|
-
i !=
|
|
11
|
-
console.log(
|
|
5
|
+
const r = document.querySelectorAll(["[data-engram-popup]"]);
|
|
6
|
+
console.log(r[0]);
|
|
7
|
+
for (let t = 0; t < l.length; t++)
|
|
8
|
+
l[t].addEventListener("click", () => {
|
|
9
|
+
const e = l[t].getAttribute("data-engram-button");
|
|
10
|
+
i != e && a().then((n) => {
|
|
11
|
+
console.log(n), n === !0 && g(e);
|
|
12
12
|
});
|
|
13
13
|
});
|
|
14
|
-
function
|
|
15
|
-
let
|
|
16
|
-
for (let
|
|
17
|
-
let
|
|
18
|
-
if (
|
|
19
|
-
|
|
14
|
+
function g(t) {
|
|
15
|
+
let e = null;
|
|
16
|
+
for (let n = 0; n < r.length; n++) {
|
|
17
|
+
let o = r[n].getAttribute("data-engram-popup");
|
|
18
|
+
if (t === o) {
|
|
19
|
+
e = r[n];
|
|
20
20
|
break;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
i = e.getAttribute("data-engram-popup"), e ? (h(e), m && i && b()) : alert(`popup container with name ${t} dont finded`);
|
|
24
24
|
}
|
|
25
|
-
function
|
|
26
|
-
let
|
|
27
|
-
i =
|
|
28
|
-
let
|
|
29
|
-
|
|
30
|
-
let
|
|
31
|
-
|
|
32
|
-
let
|
|
33
|
-
console.log(
|
|
34
|
-
|
|
35
|
-
},
|
|
25
|
+
function h(t) {
|
|
26
|
+
let e = t;
|
|
27
|
+
i = e.getAttribute("data-engram-popup");
|
|
28
|
+
let n = e.getAttribute("data-engram-theme") ?? "white";
|
|
29
|
+
e.getAttribute("data-engram-animation");
|
|
30
|
+
let o = document.createElement("div");
|
|
31
|
+
o.classList.add("engram-popup__close"), e.classList.add("engram-popup"), n == "white" ? e.classList.add("engram-popup--theme-white") : n == "black" ? e.classList.add("engram-popup--theme-black") : e.classList.add("engram-popup--theme-white"), e.appendChild(o), e.style.visibility = "hidden", e.style.display = "none";
|
|
32
|
+
let u = e.clientHeight, c = window.innerHeight, d = parseInt(getComputedStyle(e).getPropertyValue("width"));
|
|
33
|
+
console.log(c), console.log("popupWidth", d), e.style.display = "block", setTimeout(() => {
|
|
34
|
+
e.style.visibility = "", e.style.left = `calc(50% - (${d}px / 2) )`, e.style.transform = `translateY(${+c / 2 - +u / 2}px)`, o.addEventListener("click", f);
|
|
35
|
+
}, 10), setTimeout(() => {
|
|
36
|
+
document.addEventListener("click", s);
|
|
37
|
+
}, 20);
|
|
36
38
|
}
|
|
37
|
-
function
|
|
38
|
-
|
|
39
|
+
function s(t) {
|
|
40
|
+
t.target.closest(".engram-popup") || (a(), console.log("click outside"));
|
|
39
41
|
}
|
|
40
|
-
function
|
|
41
|
-
let
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
function f() {
|
|
43
|
+
let t = this.closest(".engram-popup");
|
|
44
|
+
t.style.transform = "translateY(110vh)", setTimeout(() => {
|
|
45
|
+
t.style.visibility = "", i = null, document.removeEventListener("click", s), console.log("close current popup"), p();
|
|
44
46
|
}, 500);
|
|
45
47
|
}
|
|
46
|
-
function
|
|
47
|
-
const
|
|
48
|
-
if (document.removeEventListener("click",
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
function a() {
|
|
49
|
+
const t = Array.from(document.querySelectorAll(".engram-popup"));
|
|
50
|
+
if (document.removeEventListener("click", s), t.length < 1) return Promise.resolve(!0);
|
|
51
|
+
const e = t.map((n) => (p(), new Promise((o, u) => {
|
|
52
|
+
n.style.transform = "translateY(110vh)", setTimeout(() => {
|
|
53
|
+
n.style.visibility = "", i = null, o();
|
|
52
54
|
}, 500);
|
|
53
|
-
}));
|
|
54
|
-
return Promise.all(
|
|
55
|
+
})));
|
|
56
|
+
return Promise.all(e).then(() => !0);
|
|
55
57
|
}
|
|
58
|
+
const p = () => {
|
|
59
|
+
const t = document.querySelector(".engram-background");
|
|
60
|
+
t && t.remove();
|
|
61
|
+
}, b = () => {
|
|
62
|
+
const t = document.createElement("div");
|
|
63
|
+
t.classList.add("engram-background"), document.body.appendChild(t);
|
|
64
|
+
};
|
|
56
65
|
}
|
|
57
66
|
export {
|
|
58
|
-
|
|
67
|
+
v as popup
|
|
59
68
|
};
|
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;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
|
|
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-background{width:100%;height:100vh;z-index:998;left:0;top:0;background:#ffffffb3;position:fixed}.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 f(h,k){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 t=0;t<l.length;t++)l[t].addEventListener("click",()=>{const e=l[t].getAttribute("data-engram-button");r!=e&&u().then(n=>{console.log(n),n===!0&&b(e)})});function b(t){let e=null;for(let n=0;n<a.length;n++){let o=a[n].getAttribute("data-engram-popup");if(t===o){e=a[n];break}}r=e.getAttribute("data-engram-popup"),e?(y(e),h&&r&&x()):alert(`popup container with name ${t} dont finded`)}function y(t){let e=t;r=e.getAttribute("data-engram-popup");let n=e.getAttribute("data-engram-theme")??"white";e.getAttribute("data-engram-animation");let o=document.createElement("div");o.classList.add("engram-popup__close"),e.classList.add("engram-popup"),n=="white"?e.classList.add("engram-popup--theme-white"):n=="black"?e.classList.add("engram-popup--theme-black"):e.classList.add("engram-popup--theme-white"),e.appendChild(o),e.style.visibility="hidden",e.style.display="none";let c=e.clientHeight,m=window.innerHeight,g=parseInt(getComputedStyle(e).getPropertyValue("width"));console.log(m),console.log("popupWidth",g),e.style.display="block",setTimeout(()=>{e.style.visibility="",e.style.left=`calc(50% - (${g}px / 2) )`,e.style.transform=`translateY(${+m/2-+c/2}px)`,o.addEventListener("click",v)},10),setTimeout(()=>{document.addEventListener("click",s)},20)}function s(t){t.target.closest(".engram-popup")||(u(),console.log("click outside"))}function v(){let t=this.closest(".engram-popup");t.style.transform="translateY(110vh)",setTimeout(()=>{t.style.visibility="",r=null,document.removeEventListener("click",s),console.log("close current popup"),d()},500)}function u(){const t=Array.from(document.querySelectorAll(".engram-popup"));if(document.removeEventListener("click",s),t.length<1)return Promise.resolve(!0);const e=t.map(n=>(d(),new Promise((o,c)=>{n.style.transform="translateY(110vh)",setTimeout(()=>{n.style.visibility="",r=null,o()},500)})));return Promise.all(e).then(()=>!0)}const d=()=>{const t=document.querySelector(".engram-background");t&&t.remove()},x=()=>{const t=document.createElement("div");t.classList.add("engram-background"),document.body.appendChild(t)}}i.popup=f,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;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}
|
|
1
|
+
[data-engram-popup]{display:none}.engram-background{width:100%;height:100vh;z-index:998;left:0;top:0;background:#ffffffb3;position:fixed}.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.
|
|
3
|
+
"version": "0.2.0",
|
|
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.",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"vite": "^7.2.4"
|
|
35
35
|
},
|
|
36
|
-
"homepage": "",
|
|
36
|
+
"homepage": "https://github.com/psih2131/Engram-Popup-Library.git",
|
|
37
37
|
"repository": {
|
|
38
38
|
"type": "git",
|
|
39
|
-
"url": "https://github.com/psih2131/
|
|
39
|
+
"url": "https://github.com/psih2131/Engram-Popup-Library.git"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|