Skip to content

Commit 2549c6e

Browse files
andy64lolandy64lol
authored
Create 4ndyBetterIframes.js
1 parent 5333c65 commit 2549c6e

1 file changed

Lines changed: 237 additions & 0 deletions

File tree

‎4ndyBetterIframes.js‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
// Name: 4ndyBetterIframes.js Ver: 1.1.0
2+
// Made by 4ndy64
3+
(() => {
4+
const _4ndyBetterIframes = {
5+
VERSION: '1.1.0',
6+
_tabs: {},
7+
_container: null,
8+
_tabHeaderBar: null,
9+
_tabContentArea: null,
10+
11+
_functions: {
12+
initContainer: (containerSelector) => {
13+
_4ndyBetterIframes._container = containerSelector ? document.querySelector(containerSelector) : document.body;
14+
if (!_4ndyBetterIframes._container.querySelector('.iframe-tab-headers')) {
15+
_4ndyBetterIframes._tabHeaderBar = document.createElement('div');
16+
_4ndyBetterIframes._tabHeaderBar.className = 'iframe-tab-headers';
17+
_4ndyBetterIframes._tabHeaderBar.style.display = 'flex';
18+
_4ndyBetterIframes._tabHeaderBar.style.borderBottom = '1px solid #ccc';
19+
_4ndyBetterIframes._container.appendChild(_4ndyBetterIframes._tabHeaderBar);
20+
} else {
21+
_4ndyBetterIframes._tabHeaderBar = _4ndyBetterIframes._container.querySelector('.iframe-tab-headers');
22+
}
23+
if (!_4ndyBetterIframes._container.querySelector('.iframe-tab-content')) {
24+
_4ndyBetterIframes._tabContentArea = document.createElement('div');
25+
_4ndyBetterIframes._tabContentArea.className = 'iframe-tab-content';
26+
_4ndyBetterIframes._container.appendChild(_4ndyBetterIframes._tabContentArea);
27+
} else {
28+
_4ndyBetterIframes._tabContentArea = _4ndyBetterIframes._container.querySelector('.iframe-tab-content');
29+
}
30+
},
31+
32+
createTab: (id, src, options = {}) => {
33+
if (_4ndyBetterIframes._tabs[id] || document.getElementById(id)) {
34+
console.error(`Tab with id "${id}" already exists.`);
35+
return null;
36+
}
37+
if (!_4ndyBetterIframes._container) {
38+
_4ndyBetterIframes._functions.initContainer(options.container);
39+
}
40+
41+
const iframeType = options.type || "basic_iframe";
42+
const iframeElement = _4ndyBetterIframes._functions.createIframeByType(iframeType, id, src, options);
43+
44+
const tabHeader = document.createElement('div');
45+
tabHeader.className = 'iframe-tab-header';
46+
tabHeader.style.padding = '8px 12px';
47+
tabHeader.style.cursor = 'pointer';
48+
tabHeader.style.position = 'relative';
49+
tabHeader.style.borderRight = '1px solid #ccc';
50+
tabHeader.innerText = options.title || id;
51+
const closeBtn = document.createElement('span');
52+
closeBtn.innerText = '×';
53+
closeBtn.style.position = 'absolute';
54+
closeBtn.style.right = '4px';
55+
closeBtn.style.top = '2px';
56+
closeBtn.style.cursor = 'pointer';
57+
closeBtn.style.fontWeight = 'bold';
58+
closeBtn.style.padding = '0 4px';
59+
closeBtn.onclick = (e) => {
60+
e.stopPropagation();
61+
_4ndyBetterIframes._functions.removeTab(id);
62+
};
63+
tabHeader.appendChild(closeBtn);
64+
tabHeader.onclick = () => _4ndyBetterIframes._functions.activateTab(id);
65+
_4ndyBetterIframes._tabHeaderBar.appendChild(tabHeader);
66+
67+
_4ndyBetterIframes._tabs[id] = { header: tabHeader, iframe: iframeElement };
68+
_4ndyBetterIframes._functions.activateTab(id);
69+
return { header: tabHeader, iframe: iframeElement };
70+
},
71+
72+
createIframeByType: (type, id, src, options) => {
73+
let iframe = document.createElement('iframe');
74+
iframe.id = id;
75+
iframe.src = src;
76+
iframe.style.display = 'none';
77+
iframe = _4ndyBetterIframes._functions.applyIframeType(type, iframe, options);
78+
_4ndyBetterIframes._tabContentArea.appendChild(iframe);
79+
return iframe;
80+
},
81+
82+
applyIframeType: (type, iframe, options) => {
83+
switch(type) {
84+
case 'basic_iframe':
85+
iframe.style.border = options.border || "none";
86+
iframe.style.width = options.width || "100%";
87+
iframe.style.height = options.height || "500px";
88+
break;
89+
case 'responsive_iframe':
90+
iframe.style.width = "100%";
91+
iframe.style.height = "100%";
92+
iframe.style.maxWidth = options.maxWidth || "100%";
93+
iframe.style.maxHeight = options.maxHeight || "100%";
94+
iframe.style.aspectRatio = options.aspectRatio || "16:9";
95+
break;
96+
case 'fullscreen_iframe':
97+
iframe.style.width = "100%";
98+
iframe.style.height = "100vh";
99+
iframe.style.border = "none";
100+
iframe.style.position = "absolute";
101+
iframe.style.top = "0";
102+
iframe.style.left = "0";
103+
iframe.classList.add('fullscreen');
104+
break;
105+
case 'scrollable_iframe':
106+
iframe.style.overflow = 'auto';
107+
iframe.style.maxHeight = options.maxHeight || '500px';
108+
break;
109+
case 'popup_iframe':
110+
iframe.style.position = 'fixed';
111+
iframe.style.top = '50%';
112+
iframe.style.left = '50%';
113+
iframe.style.transform = 'translate(-50%, -50%)';
114+
iframe.style.zIndex = 1000;
115+
iframe.style.border = options.border || '1px solid #ccc';
116+
iframe.style.boxShadow = options.boxShadow || '0px 4px 6px rgba(0, 0, 0, 0.1)';
117+
break;
118+
case 'lazyload_iframe':
119+
iframe.loading = 'lazy';
120+
iframe.style.border = options.border || 'none';
121+
break;
122+
case 'borderless_iframe':
123+
iframe.style.border = 'none';
124+
break;
125+
case 'custom_style_iframe':
126+
iframe.style.cssText = options.customCSS || '';
127+
break;
128+
case 'iframe_with_audio':
129+
iframe.style.border = 'none';
130+
iframe.style.width = options.width || '100%';
131+
iframe.style.height = options.height || '300px';
132+
iframe.src = options.audioSrc || src;
133+
break;
134+
case 'iframe_with_video':
135+
iframe.style.border = 'none';
136+
iframe.style.width = options.width || '100%';
137+
iframe.style.height = options.height || '400px';
138+
iframe.src = options.videoSrc || src;
139+
break;
140+
case 'iframe_with_tabs':
141+
iframe.style.border = 'none';
142+
iframe.style.width = options.width || '100%';
143+
iframe.style.height = options.height || '500px';
144+
break;
145+
case 'iframe_with_shadow':
146+
iframe.style.boxShadow = options.boxShadow || '0px 4px 6px rgba(0, 0, 0, 0.1)';
147+
break;
148+
case 'iframe_with_border_animation':
149+
iframe.style.border = '2px solid transparent';
150+
iframe.style.transition = 'border-color 0.5s';
151+
iframe.addEventListener('mouseenter', () => iframe.style.borderColor = 'blue');
152+
iframe.addEventListener('mouseleave', () => iframe.style.borderColor = 'transparent');
153+
break;
154+
case 'iframe_with_draggable':
155+
iframe.style.position = 'absolute';
156+
iframe.draggable = true;
157+
iframe.addEventListener('dragstart', (event) => {
158+
event.dataTransfer.setData("text/plain", iframe.id);
159+
});
160+
break;
161+
default:
162+
console.error(`Unknown iframe type: ${type}`);
163+
}
164+
return iframe;
165+
},
166+
167+
removeTab: (id) => {
168+
const tab = _4ndyBetterIframes._tabs[id] || document.getElementById(id);
169+
if (tab) {
170+
if (_4ndyBetterIframes._tabs[id]) {
171+
if (_4ndyBetterIframes._tabs[id].header.parentNode) _4ndyBetterIframes._tabs[id].header.parentNode.removeChild(_4ndyBetterIframes._tabs[id].header);
172+
if (_4ndyBetterIframes._tabs[id].iframe.parentNode) _4ndyBetterIframes._tabs[id].iframe.parentNode.removeChild(_4ndyBetterIframes._tabs[id].iframe);
173+
delete _4ndyBetterIframes._tabs[id];
174+
} else {
175+
const iframe = document.getElementById(id);
176+
if (iframe && iframe.parentNode) iframe.parentNode.removeChild(iframe);
177+
}
178+
const remainingIds = Object.keys(_4ndyBetterIframes._tabs);
179+
if (remainingIds.length > 0) {
180+
_4ndyBetterIframes._functions.activateTab(remainingIds[0]);
181+
}
182+
return true;
183+
}
184+
console.error(`Tab with id "${id}" not found.`);
185+
return false;
186+
},
187+
188+
activateTab: (id) => {
189+
Object.keys(_4ndyBetterIframes._tabs).forEach(tabId => {
190+
_4ndyBetterIframes._tabs[tabId].header.style.backgroundColor = '';
191+
_4ndyBetterIframes._tabs[tabId].iframe.style.display = 'none';
192+
});
193+
if (_4ndyBetterIframes._tabs[id]) {
194+
_4ndyBetterIframes._tabs[id].header.style.backgroundColor = '#ddd';
195+
_4ndyBetterIframes._tabs[id].iframe.style.display = 'block';
196+
}
197+
},
198+
199+
resizeTab: (id, width, height) => {
200+
const tab = _4ndyBetterIframes._tabs[id];
201+
if (tab && tab.iframe) {
202+
if (width) tab.iframe.style.width = width;
203+
if (height) tab.iframe.style.height = height;
204+
return true;
205+
}
206+
console.error(`Tab with id "${id}" not found.`);
207+
return false;
208+
},
209+
210+
sendMessageToTab: (id, message, targetOrigin = "*") => {
211+
const tab = _4ndyBetterIframes._tabs[id];
212+
if (tab && tab.iframe && tab.iframe.contentWindow) {
213+
tab.iframe.contentWindow.postMessage(message, targetOrigin);
214+
return true;
215+
}
216+
console.error(`Tab with id "${id}" not found or invalid contentWindow.`);
217+
return false;
218+
},
219+
220+
listenToTabMessages: (callback) => {
221+
if (typeof callback !== "function") {
222+
console.error("Callback must be a function.");
223+
return;
224+
}
225+
window.addEventListener("message", (event) => {
226+
callback(event);
227+
});
228+
},
229+
230+
getTab: (id) => {
231+
return _4ndyBetterIframes._tabs[id] || null;
232+
}
233+
}
234+
};
235+
236+
window._4ndyBetterIframes = _4ndyBetterIframes;
237+
})();

0 commit comments

Comments
 (0)