Skip to content

Commit b2aea90

Browse files
NatuworkguyNatuworkguy
authored
Update ultra.js
1 parent 1f7e4eb commit b2aea90

File tree

1 file changed

+99
-95
lines changed

1 file changed

+99
-95
lines changed

‎dist/ultra.js‎

Lines changed: 99 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,123 @@
11
const Ultra = {
22
init() {
3-
document.querySelectorAll('button.ultra-button.button-wave').forEach(button => {
4-
button.addEventListener('click', function (e) {
5-
const wave = document.createElement('span');
6-
wave.className = 'wave-effect';
7-
8-
const rect = this.getBoundingClientRect();
9-
const size = Math.max(this.clientWidth, this.clientHeight);
10-
wave.style.width = wave.style.height = `${size}px`;
11-
12-
const x = e.clientX - rect.left - size / 2;
13-
const y = e.clientY - rect.top - size / 2;
14-
wave.style.left = `${x}px`;
15-
wave.style.top = `${y}px`;
16-
17-
this.appendChild(wave);
18-
setTimeout(() => wave.remove(), 600);
19-
});
3+
// Button ripple effect
4+
document.querySelectorAll('button.ultra-button.button-wave').forEach(button => {
5+
button.addEventListener('click', function (e) {
6+
const wave = document.createElement('span');
7+
wave.className = 'wave-effect';
8+
9+
const rect = this.getBoundingClientRect();
10+
const size = Math.max(this.clientWidth, this.clientHeight);
11+
wave.style.width = wave.style.height = `${size}px`;
12+
13+
const x = e.clientX - rect.left - size / 2;
14+
const y = e.clientY - rect.top - size / 2;
15+
wave.style.left = `${x}px`;
16+
wave.style.top = `${y}px`;
17+
18+
this.appendChild(wave);
19+
setTimeout(() => wave.remove(), 600);
2020
});
21-
document.querySelectorAll('[ultra-href]').forEach(el => {
22-
if (el.classList.contains('tab-disabled')) {
23-
return;
24-
}
25-
el.addEventListener('click', e => {
26-
const target = e.currentTarget;
27-
location.href = target.getAttribute('ultra-href');
28-
});
21+
});
22+
23+
// ultra-href navigation
24+
document.querySelectorAll('[ultra-href]').forEach(el => {
25+
if (el.classList.contains('tab-disabled')) return;
26+
el.addEventListener('click', e => {
27+
const target = e.currentTarget;
28+
location.href = target.getAttribute('ultra-href');
2929
});
30+
});
3031

31-
document.querySelectorAll('.ultra-chip').forEach(el => {
32-
if (el.classList.contains('chip-permanent')) {
33-
return;
34-
}
35-
el.addEventListener('click', e => {
36-
const target = e.currentTarget;
37-
target.remove();
38-
});
32+
// chip removal
33+
document.querySelectorAll('.ultra-chip').forEach(el => {
34+
if (el.classList.contains('chip-permanent')) return;
35+
el.addEventListener('click', e => {
36+
const target = e.currentTarget;
37+
target.remove();
3938
});
40-
}
41-
}
39+
});
40+
},
4241

43-
Ultra.popupmsg = function (text = null, allowHTML = false) {
42+
popupmsg(text = null, allowHTML = false) {
4443
if (text === null) {
45-
throw new Error('"text" argument must be supplied')
44+
throw new Error('"text" argument must be supplied');
4645
}
46+
4747
const popup = document.createElement('div');
4848
popup.className = 'ultra-popup';
4949
if (!allowHTML) {
50-
popup.textContent = text;
50+
popup.textContent = text;
5151
} else {
52-
popup.innerHTML = text;
52+
popup.innerHTML = text;
5353
}
54+
5455
popup.addEventListener('click', () => {
5556
popup.classList.add('fade-out');
56-
setTimeout(() => {
57-
popup.remove();
58-
}, 500);
57+
setTimeout(() => popup.remove(), 500);
5958
});
59+
6060
if (!document.querySelector('.ultra-popup-container')) {
61-
let el = document.createElement('div')
62-
el.classList.add('ultra-popup-container')
63-
document.body.appendChild(el)
61+
const container = document.createElement('div');
62+
container.classList.add('ultra-popup-container');
63+
document.body.appendChild(container);
6464
}
65+
6566
document.querySelector('.ultra-popup-container').appendChild(popup);
67+
6668
setTimeout(() => {
67-
popup.classList.add('fade-out')
68-
setTimeout(() => {
69-
popup.remove();
70-
}, 500);
69+
popup.classList.add('fade-out');
70+
setTimeout(() => popup.remove(), 500);
7171
}, 10000);
72-
}
73-
};
72+
},
73+
74+
modal({ head = "Modal", text = "" }) {
75+
const modalOverlay = document.createElement("div");
76+
modalOverlay.className = "ultra-modal-container";
77+
Object.assign(modalOverlay.style, {
78+
position: "fixed",
79+
top: "0",
80+
left: "0",
81+
width: "100vw",
82+
height: "100vh",
83+
background: "rgba(0, 0, 0, 0.5)",
84+
display: "flex",
85+
justifyContent: "center",
86+
alignItems: "center",
87+
zIndex: "9999"
88+
});
7489

75-
Ultra.modal = function ({ head = "Modal", text = "" }) {
76-
const modalOverlay = document.createElement("div");
77-
modalOverlay.className = "ultra-modal-container";
78-
modalOverlay.style.position = "fixed";
79-
modalOverlay.style.top = "0";
80-
modalOverlay.style.left = "0";
81-
modalOverlay.style.width = "100vw";
82-
modalOverlay.style.height = "100vh";
83-
modalOverlay.style.background = "rgba(0, 0, 0, 0.5)";
84-
modalOverlay.style.display = "flex";
85-
modalOverlay.style.justifyContent = "center";
86-
modalOverlay.style.alignItems = "center";
87-
modalOverlay.style.zIndex = "9999";
88-
89-
const modal = document.createElement("div");
90-
modal.className = "ultra-modal";
91-
modal.style.background = "white";
92-
modal.style.padding = "30px";
93-
modal.style.borderRadius = "10px";
94-
modal.style.maxWidth = "90%";
95-
modal.style.width = "400px";
96-
modal.style.position = "relative";
97-
modal.style.boxShadow = "0 10px 30px rgba(0,0,0,0.3)";
98-
modal.style.textAlign = "center";
99-
100-
const modalHead = document.createElement("h2");
101-
modalHead.className = "ultra-modal-head";
102-
modalHead.textContent = head;
103-
104-
const modalText = document.createElement("p");
105-
modalText.className = "ultra-modal-text";
106-
modalText.textContent = text;
107-
108-
const closeBtn = document.createElement("button");
109-
closeBtn.className = "ultra-modal-close ultra-button button-wave";
110-
closeBtn.textContent = "Close";
111-
closeBtn.style.marginTop = "20px";
112-
closeBtn.onclick = () => modalOverlay.remove()
113-
114-
modal.appendChild(modalHead);
115-
modal.appendChild(modalText);
116-
modal.appendChild(closeBtn);
117-
modalOverlay.appendChild(modal);
118-
document.body.appendChild(modalOverlay);
90+
const modal = document.createElement("div");
91+
modal.className = "ultra-modal";
92+
Object.assign(modal.style, {
93+
background: "white",
94+
padding: "30px",
95+
borderRadius: "10px",
96+
maxWidth: "90%",
97+
width: "400px",
98+
position: "relative",
99+
boxShadow: "0 10px 30px rgba(0,0,0,0.3)",
100+
textAlign: "center"
101+
});
102+
103+
const modalHead = document.createElement("h2");
104+
modalHead.className = "ultra-modal-head";
105+
modalHead.textContent = head;
106+
107+
const modalText = document.createElement("p");
108+
modalText.className = "ultra-modal-text";
109+
modalText.textContent = text;
110+
111+
const closeBtn = document.createElement("button");
112+
closeBtn.className = "ultra-modal-close ultra-button button-wave";
113+
closeBtn.textContent = "Close";
114+
closeBtn.style.marginTop = "20px";
115+
closeBtn.onclick = () => modalOverlay.remove();
116+
117+
modal.appendChild(modalHead);
118+
modal.appendChild(modalText);
119+
modal.appendChild(closeBtn);
120+
modalOverlay.appendChild(modal);
121+
document.body.appendChild(modalOverlay);
122+
}
119123
};

0 commit comments

Comments
 (0)