this.gui 0.0.53 → 0.0.55
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/package.json +1 -1
- package/src/browser/guiFormatter.browser.js +12 -0
- package/src/createGUIFormatter.js +21 -0
- package/src/htmls/html.html +24 -0
- package/src/htmls/layout.html +37 -0
- package/src/htmls/layout2.html +56 -0
- package/src/htmls/layout3.html +80 -0
- package/src/nodejs/guiFormatter.node.js +12 -0
- package/src/this.GUI.js +19 -0
package/package.json
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// In guiFormatter.browser.js
|
|
2
|
+
export default class GUIFormatterBrowser {
|
|
3
|
+
constructor(guiInput) {
|
|
4
|
+
this.guiInput = guiInput;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
async process() {
|
|
8
|
+
// Browser-specific GUI processing logic
|
|
9
|
+
console.log('Processing GUI in Browser environment...');
|
|
10
|
+
return { /* processed GUI data */ };
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// In createGUIFormatter.js
|
|
2
|
+
import GUIFormatterNode from './nodejs/guiFormatter.node.js';
|
|
3
|
+
import GUIFormatterBrowser from './browser/guiFormatter.browser.js';
|
|
4
|
+
|
|
5
|
+
function isNode() {
|
|
6
|
+
return typeof window === 'undefined';
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
function isBrowser() {
|
|
10
|
+
return typeof window !== 'undefined';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export async function createGUIFormatter(guiInput) {
|
|
14
|
+
if (isNode()) {
|
|
15
|
+
return { formatter: new GUIFormatterNode(guiInput), error: null };
|
|
16
|
+
} else if (isBrowser()) {
|
|
17
|
+
return { formatter: new GUIFormatterBrowser(guiInput), error: null };
|
|
18
|
+
} else {
|
|
19
|
+
return { formatter: null, error: 'Unsupported environment' };
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>this.GUI HTML</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
<p>Check twice the console for test output.</p>
|
|
8
|
+
<script type="module">
|
|
9
|
+
import thisGUI from '../index.js';
|
|
10
|
+
|
|
11
|
+
// Mock input for testing - replace with actual GUI input data or structure for a real test
|
|
12
|
+
const guiInput = {
|
|
13
|
+
type: 'mock', // Indicate this is mock data
|
|
14
|
+
content: 'This is a mock GUI input for browser test.'
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
thisGUI(guiInput).then(processedGUI => {
|
|
18
|
+
console.log('Processed GUI in Browser:', processedGUI);
|
|
19
|
+
}).catch(error => {
|
|
20
|
+
console.error('Error processing GUI in Browser:', error);
|
|
21
|
+
});
|
|
22
|
+
</script>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Interactive GUI Layout</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<h1>Welcome to this.GUI</h1>
|
|
9
|
+
<p>Select a background color:</p>
|
|
10
|
+
<input type="color" id="backgroundColorPicker" onchange="changeBackgroundColor()">
|
|
11
|
+
<button onclick="saveBackgroundColor()">Save Background Color</button>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
// Function to change the background color
|
|
15
|
+
function changeBackgroundColor() {
|
|
16
|
+
var colorPicker = document.getElementById('backgroundColorPicker');
|
|
17
|
+
document.body.style.backgroundColor = colorPicker.value;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Function to save the background color to localStorage
|
|
21
|
+
function saveBackgroundColor() {
|
|
22
|
+
var colorPicker = document.getElementById('backgroundColorPicker');
|
|
23
|
+
localStorage.setItem('backgroundColor', colorPicker.value);
|
|
24
|
+
alert('Background color saved!');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// On load, set the background color from localStorage if it exists
|
|
28
|
+
document.addEventListener('DOMContentLoaded', (event) => {
|
|
29
|
+
var savedColor = localStorage.getItem('backgroundColor');
|
|
30
|
+
if (savedColor) {
|
|
31
|
+
document.body.style.backgroundColor = savedColor;
|
|
32
|
+
document.getElementById('backgroundColorPicker').value = savedColor;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Interactive GUI Layout</title>
|
|
6
|
+
<style>
|
|
7
|
+
/* Define basic themes */
|
|
8
|
+
:root {
|
|
9
|
+
--dark-bg-color: #333;
|
|
10
|
+
--dark-text-color: #f1f1f1;
|
|
11
|
+
|
|
12
|
+
--light-bg-color: #f1f1f1;
|
|
13
|
+
--light-text-color: #333;
|
|
14
|
+
|
|
15
|
+
--contrast-bg-color: #000;
|
|
16
|
+
--contrast-text-color: #fff;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body.dark {
|
|
20
|
+
background-color: var(--dark-bg-color);
|
|
21
|
+
color: var(--dark-text-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
body.light {
|
|
25
|
+
background-color: var(--light-bg-color);
|
|
26
|
+
color: var(--light-text-color);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
body.contrast {
|
|
30
|
+
background-color: var(--contrast-bg-color);
|
|
31
|
+
color: var(--contrast-text-color);
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
</head>
|
|
35
|
+
<body>
|
|
36
|
+
<h1>Welcome to this.GUI</h1>
|
|
37
|
+
<p>Select a theme:</p>
|
|
38
|
+
<button onclick="changeTheme('dark')">Dark</button>
|
|
39
|
+
<button onclick="changeTheme('light')">Light</button>
|
|
40
|
+
<button onclick="changeTheme('contrast')">High Contrast</button>
|
|
41
|
+
|
|
42
|
+
<script>
|
|
43
|
+
// Function to change the theme
|
|
44
|
+
function changeTheme(theme) {
|
|
45
|
+
document.body.className = theme; // Set the class name on the body to change themes
|
|
46
|
+
localStorage.setItem('theme', theme); // Save the theme selection
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// On load, apply the saved theme
|
|
50
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
51
|
+
const savedTheme = localStorage.getItem('theme') || 'light'; // Default to light theme
|
|
52
|
+
document.body.className = savedTheme;
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Interactive GUI Layout</title>
|
|
6
|
+
<style>
|
|
7
|
+
/* Define basic themes with default colors */
|
|
8
|
+
:root {
|
|
9
|
+
--dark-bg-color: #333;
|
|
10
|
+
--dark-text-color: #f1f1f1;
|
|
11
|
+
|
|
12
|
+
--light-bg-color: #f1f1f1;
|
|
13
|
+
--light-text-color: #333;
|
|
14
|
+
|
|
15
|
+
--contrast-bg-color: #000;
|
|
16
|
+
--contrast-text-color: #fff;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body.dark {
|
|
20
|
+
background-color: var(--dark-bg-color);
|
|
21
|
+
color: var(--dark-text-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
body.light {
|
|
25
|
+
background-color: var(--light-bg-color);
|
|
26
|
+
color: var(--light-text-color);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
body.contrast {
|
|
30
|
+
background-color: var(--contrast-bg-color);
|
|
31
|
+
color: var(--contrast-text-color);
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
</head>
|
|
35
|
+
<body>
|
|
36
|
+
<h1>Welcome to this.GUI</h1>
|
|
37
|
+
<p>Select a theme:</p>
|
|
38
|
+
<button onclick="changeTheme('dark')">Dark</button>
|
|
39
|
+
<button onclick="changeTheme('light')">Light</button>
|
|
40
|
+
<button onclick="changeTheme('contrast')">High Contrast</button>
|
|
41
|
+
|
|
42
|
+
<p>Select a background color for the chosen theme:</p>
|
|
43
|
+
<input type="color" id="backgroundColorPicker" onchange="changeBackgroundColor()">
|
|
44
|
+
<button onclick="saveBackgroundColor()">Save Background Color</button>
|
|
45
|
+
|
|
46
|
+
<script>
|
|
47
|
+
let currentTheme = localStorage.getItem('theme') || 'light';
|
|
48
|
+
|
|
49
|
+
// Function to change the theme and update the color picker and background color
|
|
50
|
+
function changeTheme(theme) {
|
|
51
|
+
currentTheme = theme;
|
|
52
|
+
document.body.className = theme;
|
|
53
|
+
localStorage.setItem('theme', theme);
|
|
54
|
+
|
|
55
|
+
// Load the saved color for the selected theme
|
|
56
|
+
const savedColor = localStorage.getItem(theme + 'BackgroundColor') || document.body.style.backgroundColor;
|
|
57
|
+
document.body.style.backgroundColor = savedColor;
|
|
58
|
+
document.getElementById('backgroundColorPicker').value = savedColor;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Function to change the background color based on the color picker's value
|
|
62
|
+
function changeBackgroundColor() {
|
|
63
|
+
const colorPicker = document.getElementById('backgroundColorPicker');
|
|
64
|
+
document.body.style.backgroundColor = colorPicker.value;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Function to save the background color for the current theme
|
|
68
|
+
function saveBackgroundColor() {
|
|
69
|
+
const colorPicker = document.getElementById('backgroundColorPicker');
|
|
70
|
+
localStorage.setItem(currentTheme + 'BackgroundColor', colorPicker.value);
|
|
71
|
+
alert('Background color saved for ' + currentTheme + ' theme!');
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// On load, apply the saved theme and its background color
|
|
75
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
76
|
+
changeTheme(currentTheme);
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// In guiFormatter.node.js
|
|
2
|
+
export default class GUIFormatterNode {
|
|
3
|
+
constructor(guiInput) {
|
|
4
|
+
this.guiInput = guiInput;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
async process() {
|
|
8
|
+
// Node.js-specific GUI processing logic
|
|
9
|
+
console.log('Processing GUI in Node.js environment...');
|
|
10
|
+
return { /* processed GUI data */ };
|
|
11
|
+
}
|
|
12
|
+
}
|
package/src/this.GUI.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// this.GUI.js
|
|
2
|
+
import { createGUIFormatter } from './createGUIFormatter.js';
|
|
3
|
+
|
|
4
|
+
async function thisGUI(guiInput) {
|
|
5
|
+
let { formatter, error } = await createGUIFormatter(guiInput);
|
|
6
|
+
|
|
7
|
+
if (error) {
|
|
8
|
+
return { success: false, error };
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
try {
|
|
12
|
+
const processedGUI = await formatter.process();
|
|
13
|
+
return { success: true, data: processedGUI };
|
|
14
|
+
} catch (processingError) {
|
|
15
|
+
return { success: false, error: processingError.message };
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default thisGUI;
|