-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
147 lines (121 loc) · 4.89 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// script.js
const appConfig = {
enableMultiTasking: true // Set to true to enable multi-tasking
};
const iframeData = [
{ name: 'Nomad Sculpt', url: 'https://nomadsculpt.com/demo/' },
{ name: 'SculptGL', url: 'https://stephaneginier.com/sculptgl/' },
{ name: 'Sculptfab', url: 'https://labs.sketchfab.com/sculptfab/' },
{ name: 'Photopea', url: 'https://www.photopea.com/' },
{ name: 'graphite.rs', url: 'https://editor.graphite.rs/' },
{ name: 'A-Frame', url: 'https://aframe.io/' },
{ name: 'ARMORY3D', url: 'https://armory3d.github.io/armory_examples_browser/#templates-third_person/' },
{ name: 'BABYLON.JS', url: 'https://playground.babylonjs.com/' },
{ name: 'BevyEngine', url: 'https://bevyengine.org/examples/' },
{ name: 'Excalidraw', url: 'https://excalidraw.com/' },
// Add more names and URLs as needed
];
const iframes = [];
function createIframes() {
iframeData.forEach(({ url }) => {
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.display = 'none';
document.getElementById('iframeContainer').appendChild(iframe);
iframes.push(iframe);
});
}
function changeIframeSrc(url) {
iframes.forEach(iframe => {
if (iframe.src === url) {
iframe.style.display = 'block';
} else {
iframe.style.display = 'none';
}
});
if (appConfig.enableMultiTasking) {
console.log("Multitasking enabled for URL: " + url);
// Add multitasking logic here if needed for each URL
}
}
// Function to populate side panel with names of the URLs
function populateSidePanel() {
const sideContent = document.getElementById('sideContent');
const ul = sideContent.querySelector('ul');
iframeData.forEach(({ name, url }) => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = "#";
a.textContent = name; // Display name instead of URL
a.onclick = () => changeIframeSrc(url);
li.appendChild(a);
ul.appendChild(li);
});
}
// Function to add docker functionalities
function setupDocker() {
const docker = document.getElementById('docker');
docker.innerHTML = ''; // Clear the content before appending new buttons
const closeButton = document.createElement('i');
closeButton.classList.add('fas', 'fa-times');
closeButton.onclick = removeIframe;
const fullscreenButton = document.createElement('i');
fullscreenButton.classList.add('fas', 'fa-expand');
fullscreenButton.onclick = toggleFullscreen;
const moveButton = document.createElement('i');
moveButton.classList.add('fas', 'fa-arrows-alt');
moveButton.onmousedown = startDrag;
docker.appendChild(closeButton);
docker.appendChild(fullscreenButton);
docker.appendChild(moveButton);
}
function removeIframe() {
const iframeContainer = document.getElementById('iframeContainer');
const confirmClose = window.confirm("Are you sure you want to close the iframe?");
if (confirmClose) {
iframeContainer.innerHTML = '';
document.getElementById('docker').style.display = 'none';
}
}
// Function to toggle fullscreen
let isMaximized = false;
let isDragging = false;
let offsetX, offsetY;
function toggleFullscreen() {
const iframe = document.querySelector('#iframeContainer iframe');
const docker = document.getElementById('docker');
if (!isMaximized) {
iframe.classList.add('maximized');
document.documentElement.requestFullscreen(); // Enter fullscreen
} else {
iframe.classList.remove('maximized');
document.exitFullscreen(); // Exit fullscreen
document.getElementById('sidePanel').style.display = 'flex';
}
docker.style.display = isMaximized ? 'grid' : 'none';
isMaximized = !isMaximized;
}
function startDrag(e) {
isDragging = true;
const docker = document.getElementById('docker');
const boundingBox = docker.getBoundingClientRect();
offsetX = e.clientX - boundingBox.left;
offsetY = e.clientY - boundingBox.top;
initialX = docker.offsetLeft; // Store initial horizontal position
}
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const docker = document.getElementById('docker');
const newX = e.clientX - offsetX;
// Calculate the change in horizontal position
const moveX = newX - initialX;
docker.style.left = `${moveX}px`; // Update horizontal position only
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
// Call functions to create iframes, populate side panel, and set up docker
createIframes();
populateSidePanel();
setupDocker();