vfsjs-test 1.0.11 → 1.0.13
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/index.html +1 -10
- package/main.js +73 -22
- package/package.json +1 -1
- package/vfsjs.js +25 -36
package/index.html
CHANGED
|
@@ -7,16 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
<script src="vfsjs.js"></script>
|
|
9
9
|
<script src="main.js"></script>
|
|
10
|
-
|
|
11
|
-
<link rel="stylesheet" href="live_theme.css?vfs=true">
|
|
12
10
|
</head>
|
|
13
|
-
<body
|
|
14
|
-
|
|
15
|
-
<h2>Infrared Advanced VFS Core</h2>
|
|
16
|
-
<div id="status" style="background: #020617; border: 1px solid #334155; padding: 15px; height: 180px; color: #f1f5f9; line-height: 1.6; overflow-y: auto;">
|
|
17
|
-
> Initializing isolated modular framework...
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<script src="index.js?vfs=true"></script>
|
|
11
|
+
<body>
|
|
21
12
|
</body>
|
|
22
13
|
</html>
|
package/main.js
CHANGED
|
@@ -1,36 +1,87 @@
|
|
|
1
|
-
// main.js -
|
|
1
|
+
// main.js - Developer Workspace API
|
|
2
2
|
|
|
3
3
|
window.vfs = {
|
|
4
4
|
add(filename, contentString, customMime = null) {
|
|
5
5
|
return window._vfsKernel.write(filename, contentString, customMime);
|
|
6
6
|
},
|
|
7
|
-
delete(filename) {
|
|
8
|
-
|
|
9
|
-
},
|
|
10
|
-
clear() {
|
|
11
|
-
return window._vfsKernel.wipe();
|
|
12
|
-
}
|
|
7
|
+
delete(filename) { return window._vfsKernel.remove(filename); },
|
|
8
|
+
clear() { return window._vfsKernel.wipe(); }
|
|
13
9
|
};
|
|
14
10
|
|
|
15
11
|
async function startDeveloperWorkspace() {
|
|
16
|
-
//
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
#status b { color: #ffea00 !important; text-shadow: 0 0 5px rgba(255,234,0,0.5); }
|
|
25
|
-
@keyframes rainbowShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }\n`, 'text/css');
|
|
12
|
+
// 1. Add standard CSS rules directly
|
|
13
|
+
vfs.add('live_theme.css', `
|
|
14
|
+
html, body { margin: 0; padding: 40px; height: 100%; overflow: hidden; font-family: monospace; background: #020617; color: #38bdf8; }
|
|
15
|
+
body { background: linear-gradient(-45deg, #ff007f, #7f00ff, #00bfff, #00ff7f, #ffea00, #ff007f) !important; background-size: 400% 400% !important; animation: rainbowShift 12s ease infinite !important; color: #ffffff !important; }
|
|
16
|
+
@keyframes rainbowShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
|
|
17
|
+
`, 'text/css');
|
|
18
|
+
|
|
19
|
+
// 2. Add traditional JavaScript code
|
|
26
20
|
vfs.add('index.js', `
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
console.log("VFS Engine: Spin test activated inside the seamless frame!");
|
|
22
|
+
|
|
23
|
+
// 1. Inject a global CSS animation rule directly into the frame's head
|
|
24
|
+
const styleNode = document.createElement('style');
|
|
25
|
+
styleNode.innerHTML = \`
|
|
26
|
+
@keyframes customSpinMatrix {
|
|
27
|
+
0% { transform: rotate(0deg); }
|
|
28
|
+
100% { transform: rotate(360deg); }
|
|
29
|
+
}
|
|
30
|
+
.vfs-spinning-target {
|
|
31
|
+
display: inline-block !important;
|
|
32
|
+
animation: customSpinMatrix 4s linear infinite !important;
|
|
33
|
+
}
|
|
34
|
+
\`;
|
|
35
|
+
document.head.appendChild(styleNode);
|
|
36
|
+
|
|
37
|
+
// 2. Locate all text elements and wrap their text in spinning tags
|
|
38
|
+
function applySpinToText() {
|
|
39
|
+
// Target headers, paragraphs, lists, and span layers
|
|
40
|
+
const textElements = document.querySelectorAll('h1, h2, h3, p, span, li, div');
|
|
41
|
+
|
|
42
|
+
textElements.forEach(element => {
|
|
43
|
+
// Ignore containers that have children to avoid breaking structure layouts
|
|
44
|
+
if (element.children.length === 0 && element.innerText.trim() !== '') {
|
|
45
|
+
const words = element.innerText.split(' ');
|
|
46
|
+
element.innerHTML = words.map(word =>
|
|
47
|
+
\`<span class="vfs-spinning-target">\${word}</span>\`
|
|
48
|
+
).join(' ');
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Run the spin cycle as soon as the virtual document structure loads
|
|
54
|
+
if (document.readyState === 'loading') {
|
|
55
|
+
document.addEventListener('DOMContentLoaded', applySpinToText);
|
|
56
|
+
} else {
|
|
57
|
+
applySpinToText();
|
|
58
|
+
}
|
|
59
|
+
`, 'text/javascript');
|
|
60
|
+
|
|
61
|
+
// 3. Add the main index entry file using native, normal markup tags!
|
|
62
|
+
vfs.add('workspace.html', `
|
|
63
|
+
<!DOCTYPE html>
|
|
64
|
+
<html>
|
|
65
|
+
<head>
|
|
66
|
+
<meta charset="UTF-8">
|
|
67
|
+
<link rel="stylesheet" href="live_theme.css?vfs=true">
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<h2>Infrared Seamless Virtual Environment</h2>
|
|
71
|
+
<p>This layout runs seamlessly inside an entirely virtual context.</p>
|
|
72
|
+
<script src="index.js?vfs=true"></script>
|
|
73
|
+
</body>
|
|
74
|
+
</html>
|
|
75
|
+
`, 'text/html');
|
|
76
|
+
|
|
77
|
+
// 4. Point the auto-generated viewport to the entry path!
|
|
78
|
+
const viewport = document.getElementById('canvas-viewport');
|
|
79
|
+
if (viewport) {
|
|
80
|
+
viewport.src = 'workspace.html?vfs=true';
|
|
81
|
+
}
|
|
31
82
|
}
|
|
32
83
|
|
|
33
|
-
//
|
|
84
|
+
// Automatically bootstrap when document structure is verified
|
|
34
85
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
35
86
|
const ready = await window._vfsKernel.init();
|
|
36
87
|
if (ready) {
|
package/package.json
CHANGED
package/vfsjs.js
CHANGED
|
@@ -1,24 +1,40 @@
|
|
|
1
|
-
// vfsjs.js -
|
|
1
|
+
// vfsjs.js - Automated Infrastructure Engine Core
|
|
2
2
|
(function() {
|
|
3
3
|
const encoder = new TextEncoder();
|
|
4
|
-
const display = document.getElementById('status');
|
|
5
|
-
let injectedNodes = []; // Tracks dynamically mounted elements
|
|
6
4
|
|
|
7
5
|
const engineCore = {
|
|
8
|
-
// Automatically registers and activates the Service Worker thread
|
|
9
6
|
async init() {
|
|
10
7
|
try {
|
|
8
|
+
// 1. Core Service Worker Registration
|
|
11
9
|
await navigator.serviceWorker.register('./sw.js');
|
|
12
|
-
if (display) display.innerHTML += "<br>> Service worker synchronized.";
|
|
13
|
-
|
|
14
10
|
if (!navigator.serviceWorker.controller) {
|
|
15
|
-
if (display) display.innerHTML += "<br>> Securing worker routing links...";
|
|
16
11
|
await new Promise(r => navigator.serviceWorker.addEventListener('controllerchange', r, { once: true }));
|
|
17
12
|
}
|
|
18
|
-
|
|
13
|
+
|
|
14
|
+
// 2. AUTOMATION UPGRADE: Enforce full-screen layout constraints on the main window
|
|
15
|
+
Object.assign(document.documentElement.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0' });
|
|
16
|
+
Object.assign(document.body.style, { width: '100%', height: '100%', overflow: 'hidden', margin: '0', padding: '0', background: '#020617' });
|
|
17
|
+
|
|
18
|
+
// 3. AUTOMATION UPGRADE: Create and mount the seamless borderless canvas iframe
|
|
19
|
+
const iframe = document.createElement('iframe');
|
|
20
|
+
iframe.id = 'canvas-viewport';
|
|
21
|
+
iframe.setAttribute('scrolling', 'no');
|
|
22
|
+
Object.assign(iframe.style, {
|
|
23
|
+
position: 'absolute',
|
|
24
|
+
top: '0',
|
|
25
|
+
left: '0',
|
|
26
|
+
width: '100%',
|
|
27
|
+
height: '100%',
|
|
28
|
+
border: 'none',
|
|
29
|
+
margin: '0',
|
|
30
|
+
padding: '0',
|
|
31
|
+
zIndex: '999999'
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
document.body.appendChild(iframe);
|
|
19
35
|
return true;
|
|
20
36
|
} catch (err) {
|
|
21
|
-
|
|
37
|
+
console.error("VFS Kernel Boot Failure:", err);
|
|
22
38
|
return false;
|
|
23
39
|
}
|
|
24
40
|
},
|
|
@@ -31,46 +47,19 @@
|
|
|
31
47
|
content: encoder.encode(contentString),
|
|
32
48
|
mime: customMime
|
|
33
49
|
});
|
|
34
|
-
if (display) display.innerHTML += `<br>> Core Write: <b>${filename}</b>`;
|
|
35
50
|
return true;
|
|
36
51
|
},
|
|
37
52
|
|
|
38
53
|
remove(filename) {
|
|
39
54
|
if (!navigator.serviceWorker.controller) return false;
|
|
40
55
|
navigator.serviceWorker.controller.postMessage({ type: 'VFS_DELETE', filename: filename });
|
|
41
|
-
if (display) display.innerHTML += `<br>> Core Remove: <span style="color: #ef4444;">${filename}</span>`;
|
|
42
56
|
return true;
|
|
43
57
|
},
|
|
44
58
|
|
|
45
59
|
wipe() {
|
|
46
60
|
if (!navigator.serviceWorker.controller) return false;
|
|
47
61
|
navigator.serviceWorker.controller.postMessage({ type: 'VFS_CLEAR' });
|
|
48
|
-
if (display) display.innerHTML += `<br>><span style="color: #f59e0b;"> Core Clear: Matrix flushed.</span>`;
|
|
49
62
|
return true;
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
// Dynamically injects virtual assets into the browser frame safely
|
|
53
|
-
mount(filename, type) {
|
|
54
|
-
if (type === 'css') {
|
|
55
|
-
const el = document.createElement('link');
|
|
56
|
-
el.rel = 'stylesheet';
|
|
57
|
-
el.href = filename;
|
|
58
|
-
document.head.appendChild(el);
|
|
59
|
-
injectedNodes.push(el);
|
|
60
|
-
} else if (type === 'js') {
|
|
61
|
-
const el = document.createElement('script');
|
|
62
|
-
el.src = filename;
|
|
63
|
-
document.body.appendChild(el);
|
|
64
|
-
injectedNodes.push(el);
|
|
65
|
-
}
|
|
66
|
-
if (display) display.innerHTML += `<br>> Frame Hooked: Loaded [${filename}]`;
|
|
67
|
-
},
|
|
68
|
-
|
|
69
|
-
// Pulls all injected elements back out of the DOM frame
|
|
70
|
-
unmount() {
|
|
71
|
-
injectedNodes.forEach(node => node.remove());
|
|
72
|
-
injectedNodes = [];
|
|
73
|
-
if (display) display.innerHTML += `<br>><span style="color: #f43f5e;"> Frame Unhooked: Virtual nodes detached.</span>`;
|
|
74
63
|
}
|
|
75
64
|
};
|
|
76
65
|
|