aboutsummaryrefslogtreecommitdiff
path: root/webAO/ui.js
diff options
context:
space:
mode:
Diffstat (limited to 'webAO/ui.js')
-rw-r--r--webAO/ui.js329
1 files changed, 178 insertions, 151 deletions
diff --git a/webAO/ui.js b/webAO/ui.js
index 3342a09..81b41e8 100644
--- a/webAO/ui.js
+++ b/webAO/ui.js
@@ -1,7 +1,7 @@
/* eslint indent: ["error", 2, { "SwitchCase": 1 }] */
/* eslint no-param-reassign: ["error",
{ "props": true, "ignorePropertyModificationsFor": ["container"] }] */
-import { GoldenLayout } from 'golden-layout';
+import { GoldenLayout } from "golden-layout";
const config = {
settings: {
@@ -11,83 +11,98 @@ const config = {
dimensions: {
minItemHeight: 40,
},
- content: [{
- type: 'row',
- content: [{
- type: 'column',
- width: 40,
- content: [{
- type: 'component',
- height: 80,
- isClosable: false,
- componentName: 'template',
- title: 'IC',
- componentState: { id: 'client_wrapper' },
- },
- {
- type: 'component',
- height: 20,
- isClosable: false,
- title: 'IC Options',
- componentName: 'template',
- componentState: { id: 'icoptions' },
- }]
- },
+ content: [
{
- type: 'column',
- content: [{
- type: 'row',
- height: 65,
- content: [{
- type: 'stack',
- content: [{
- type: 'component',
- isClosable: false,
- title: 'Main',
- componentName: 'template',
- componentState: { id: 'mainmenu' },
- },
- {
- type: 'component',
- isClosable: false,
- title: 'Log',
- componentName: 'template',
- componentState: { id: 'log' },
- }],
+ type: "row",
+ content: [
+ {
+ type: "column",
+ width: 40,
+ content: [
+ {
+ type: "component",
+ height: 80,
+ isClosable: false,
+ componentName: "template",
+ title: "IC",
+ componentState: { id: "client_wrapper" },
+ },
+ {
+ type: "component",
+ height: 20,
+ isClosable: false,
+ title: "IC Options",
+ componentName: "template",
+ componentState: { id: "icoptions" },
+ },
+ ],
},
{
- type: 'stack',
- width: 30,
- content: [{
- type: 'component',
- isClosable: false,
- title: 'Music',
- componentName: 'template',
- componentState: { id: 'music' },
- },
- {
- type: 'component',
- isClosable: true,
- title: 'Players',
- componentName: 'template',
- componentState: { id: 'players' },
- }],
- }],
- },
- {
- type: 'row',
- content: [{
- type: 'component',
- title: 'OOC',
- componentName: 'template',
- componentState: { id: 'ooc' },
- }],
- }],
- }],
- }],
+ type: "column",
+ content: [
+ {
+ type: "row",
+ height: 65,
+ content: [
+ {
+ type: "stack",
+ content: [
+ {
+ type: "component",
+ isClosable: false,
+ title: "Main",
+ componentName: "template",
+ componentState: { id: "mainmenu" },
+ },
+ {
+ type: "component",
+ isClosable: false,
+ title: "Log",
+ componentName: "template",
+ componentState: { id: "log" },
+ },
+ ],
+ },
+ {
+ type: "stack",
+ width: 30,
+ content: [
+ {
+ type: "component",
+ isClosable: false,
+ title: "Music",
+ componentName: "template",
+ componentState: { id: "music" },
+ },
+ {
+ type: "component",
+ isClosable: true,
+ title: "Players",
+ componentName: "template",
+ componentState: { id: "players" },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: "row",
+ content: [
+ {
+ type: "component",
+ title: "OOC",
+ componentName: "template",
+ componentState: { id: "ooc" },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
};
-
const configMobile = {
settings: {
showPopoutIcon: false,
@@ -96,92 +111,104 @@ const configMobile = {
dimensions: {
minItemHeight: 40,
},
- content: [{
- type: 'row',
- content: [{
- type: 'column',
- content: [{
- type: 'component',
- isClosable: false,
- reorderEnabled: false,
- componentName: 'template',
- title: 'IC',
- componentState: { id: 'client_wrapper' },
- height: 56 // Adjust the height proportion as needed
- },
- {
- type: 'stack',
- height: 44,
- content: [{
- type: 'component',
- isClosable: false,
- reorderEnabled: false,
- title: 'IC Options',
- componentName: 'template',
- componentState: { id: 'icoptions' },
- },
- {
- type: 'component',
- isClosable: false,
- reorderEnabled: false,
- title: 'Main',
- componentName: 'template',
- componentState: { id: 'mainmenu' },
- },
- {
- type: 'component',
- isClosable: false,
- reorderEnabled: false,
- title: 'Log',
- componentName: 'template',
- componentState: { id: 'log' },
- },
- {
- type: 'component',
- isClosable: false,
- reorderEnabled: false,
- title: 'Music',
- componentName: 'template',
- componentState: { id: 'music' },
- },
+ content: [
+ {
+ type: "row",
+ content: [
{
- type: 'component',
- isClosable: true,
- title: 'Players',
- componentName: 'template',
- componentState: { id: 'players' },
+ type: "column",
+ content: [
+ {
+ type: "component",
+ isClosable: false,
+ reorderEnabled: false,
+ componentName: "template",
+ title: "IC",
+ componentState: { id: "client_wrapper" },
+ height: 56, // Adjust the height proportion as needed
+ },
+ {
+ type: "stack",
+ height: 44,
+ content: [
+ {
+ type: "component",
+ isClosable: false,
+ reorderEnabled: false,
+ title: "IC Options",
+ componentName: "template",
+ componentState: { id: "icoptions" },
+ },
+ {
+ type: "component",
+ isClosable: false,
+ reorderEnabled: false,
+ title: "Main",
+ componentName: "template",
+ componentState: { id: "mainmenu" },
+ },
+ {
+ type: "component",
+ isClosable: false,
+ reorderEnabled: false,
+ title: "Log",
+ componentName: "template",
+ componentState: { id: "log" },
+ },
+ {
+ type: "component",
+ isClosable: false,
+ reorderEnabled: false,
+ title: "Music",
+ componentName: "template",
+ componentState: { id: "music" },
+ },
+ {
+ type: "component",
+ isClosable: true,
+ title: "Players",
+ componentName: "template",
+ componentState: { id: "players" },
+ },
+ {
+ type: "component",
+ isClosable: false,
+ reorderEnabled: false,
+ title: "OOC",
+ componentName: "template",
+ componentState: { id: "ooc" },
+ },
+ ],
+ },
+ ],
},
- {
- type: 'component',
- isClosable: false,
- reorderEnabled: false,
- title: 'OOC',
- componentName: 'template',
- componentState: { id: 'ooc' },
- }]
- }]
- }]
- }]
-}
-
+ ],
+ },
+ ],
+};
-const isMobileDevice = window.innerWidth <= window.innerHeight;
+const isMobileDevice = window.innerWidth <= window.innerHeight;
const golden = new GoldenLayout();
-golden.registerComponentFactoryFunction('template', (container, componentState) => {
- const template = document.querySelector(`#${componentState.id}`);
- container.element.innerHTML = template.innerHTML;
-});
-if (isMobileDevice){
+golden.registerComponentFactoryFunction(
+ "template",
+ (container, componentState) => {
+ const template = document.querySelector(`#${componentState.id}`);
+ container.element.innerHTML = template.innerHTML;
+ },
+);
+if (isMobileDevice) {
golden.loadLayout(configMobile);
-}
-else {
+} else {
golden.loadLayout(config);
}
console.log(golden.root.contentItems[0].contentItems[0].contentItems[0]);
-golden.root.contentItems[0].contentItems[0].contentItems[0].on('resize',function(){
- console.log("IC pane resized"); //TEMP
- console.log(golden.root.contentItems[0].contentItems[0]);
- }); \ No newline at end of file
+golden.root.contentItems[0].contentItems[0].contentItems[0].on(
+ "resize",
+ function () {
+ console.log("IC pane resized"); //TEMP
+ console.log(golden.root.contentItems[0].contentItems[0]);
+ },
+);
generated by cgit (git 2.34.1) at 2026-04-23 14:22:02 +0000