Skip to content

Commit 90a8d15

Browse files
texodustexodus
committed
v0.0.2
1 parent e1f49a1 commit 90a8d15

6 files changed

Lines changed: 205 additions & 173 deletions

File tree

‎dist/index.js‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js.map‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎index.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
body {
2+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
3+
}
4+
5+
/* Layout */
6+
regular-layout {
7+
overflow: hidden;
8+
position: absolute;
9+
top: 36px;
10+
left: 0;
11+
right: 0;
12+
bottom: 0;
13+
}
14+
15+
/* Frame */
16+
regular-layout-frame {
17+
--titlebar-height: 24px;
18+
position: relative;
19+
box-sizing: border-box;
20+
margin: 3px;
21+
border-radius: 0 0 6px 6px;
22+
border: 1px solid #666;
23+
box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
24+
}
25+
26+
regular-layout-frame::part(titlebar) {
27+
display: flex;
28+
align-items: stretch;
29+
margin-left: -1px;
30+
margin-right: -1px;
31+
margin-bottom: 0px;
32+
}
33+
34+
regular-layout-frame::part(tab) {
35+
display: flex;
36+
flex: 1 1 150px;
37+
align-items: center;
38+
font-size: 10px;
39+
padding: 0 8px;
40+
cursor: pointer;
41+
max-width: 150px;
42+
text-overflow: ellipsis;
43+
border: 1px solid #666;
44+
border-radius: 6px 6px 0 0;
45+
opacity: 0.5;
46+
}
47+
48+
regular-layout-frame::part(active-tab) {
49+
opacity: 1;
50+
}
51+
52+
/* Frame in Overlay Mode */
53+
regular-layout-frame:not([slot]) {
54+
background-color: rgba(0, 0, 0, 0.2) !important;
55+
border: 1px dashed rgb(0, 0, 0);
56+
border-radius: 6px;
57+
margin: 0;
58+
box-shadow: none;
59+
transition:
60+
top 0.1s ease-in-out,
61+
height 0.1s ease-in-out,
62+
width 0.1s ease-in-out,
63+
left 0.1s ease-in-out;
64+
}
65+
66+
regular-layout-frame::part(container) {
67+
display: none;
68+
}
69+
70+
regular-layout-frame[slot]::part(container) {
71+
display: revert;
72+
}
73+
74+
/* Colors */
75+
regular-layout :nth-child(8n+1),
76+
regular-layout :nth-child(8n+1)::part(tab) {
77+
background-color: #ffadadff;
78+
}
79+
80+
regular-layout :nth-child(8n+2),
81+
regular-layout :nth-child(8n+2)::part(tab) {
82+
background-color: #ffd6a5ff;
83+
}
84+
85+
regular-layout :nth-child(8n+3),
86+
regular-layout :nth-child(8n+3)::part(tab) {
87+
background-color: #fdffb6ff;
88+
}
89+
90+
regular-layout :nth-child(8n+4),
91+
regular-layout :nth-child(8n+4)::part(tab) {
92+
background-color: #caffbfff;
93+
}
94+
95+
regular-layout :nth-child(8n+5),
96+
regular-layout :nth-child(8n+5)::part(tab) {
97+
background-color: #9bf6ffff;
98+
}
99+
100+
regular-layout :nth-child(8n+6),
101+
regular-layout :nth-child(8n+6)::part(tab) {
102+
background-color: #a0c4ffff;
103+
}
104+
105+
regular-layout :nth-child(8n+7),
106+
regular-layout :nth-child(8n+7)::part(tab) {
107+
background-color: #bdb2ffff;
108+
}
109+
110+
regular-layout :nth-child(8n+8),
111+
regular-layout :nth-child(8n+8)::part(tab) {
112+
background-color: #ffc6ffff;
113+
}

‎index.html‎

Lines changed: 26 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Regular Layout</title>
8-
<style>
9-
regular-layout {
10-
overflow: hidden;
11-
position: absolute;
12-
top: 36px;
13-
left: 0;
14-
right: 0;
15-
bottom: 0;
16-
}
17-
18-
regular-layout-frame {
19-
position: relative;
20-
box-sizing: border-box;
21-
margin: 3px;
22-
border-radius: 0 0 6px 6px;
23-
border: 1px solid #666;
24-
box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
25-
}
26-
27-
.AAA {
28-
background-color: #ffb3b0;
29-
}
30-
31-
.BBB {
32-
background-color: #b0e0a3;
33-
}
34-
35-
.CCC {
36-
background-color: #99c9ff;
37-
}
38-
39-
.DDD {
40-
background-color: #ffe699;
41-
}
42-
43-
.EEE {
44-
background-color: #ffcf99;
45-
}
46-
47-
.FFF {
48-
background-color: #ff99fd;
49-
}
50-
51-
regular-layout-frame:not([slot]) {
52-
background-color: rgba(0, 0, 0, 0.2);
53-
border: 1px dashed rgb(0, 0, 0);
54-
border-radius: 6px;
55-
margin: 0;
56-
box-shadow: none;
57-
transition:
58-
top 0.1s ease-in-out,
59-
height 0.1s ease-in-out,
60-
width 0.1s ease-in-out,
61-
left 0.1s ease-in-out;
62-
}
63-
64-
regular-layout-frame::part(container) {
65-
display: none;
66-
}
67-
68-
regular-layout-frame[slot]::part(container) {
69-
display: revert;
70-
}
71-
72-
73-
regular-layout-frame {
74-
--titlebar-height: 24px;
75-
}
76-
77-
regular-layout-frame::part(titlebar) {
78-
display: flex;
79-
align-items: center;
80-
padding: 0 12px;
81-
cursor: pointer;
82-
background-color: inherit;
83-
border: 1px solid #666;
84-
border-radius: 6px 6px 0 0;
85-
margin-left: -1px;
86-
margin-right: -1px;
87-
margin-bottom: 0px;
88-
max-width: 200px;
89-
}
90-
</style>
91-
</head>
92-
93-
<body>
94-
<header>
95-
<button id="add">Add Panel</button>
96-
<button id="save">Save State</button>
97-
<button id="restore">Restore State</button>
98-
<button id="clear">Clear</button>
99-
</header>
100-
<regular-layout>
101-
<regular-layout-frame class="AAA" slot="AAA"></regular-layout-frame>
102-
<regular-layout-frame class="BBB" slot="BBB"></regular-layout-frame>
103-
<regular-layout-frame class="CCC" slot="CCC"></regular-layout-frame>
104-
<regular-layout-frame class="DDD" slot="DDD"></regular-layout-frame>
105-
<regular-layout-frame class="EEE" slot="EEE"></regular-layout-frame>
106-
<regular-layout-frame class="FFF" slot="FFF"></regular-layout-frame>
107-
</regular-layout>
108-
</body>
109-
110-
<script type="module">
111-
import "./dist/index.js";
112-
113-
const add = document.querySelector("#add");
114-
const save = document.querySelector("#save");
115-
const restore = document.querySelector("#restore");
116-
const clear = document.querySelector("#clear");
117-
add.addEventListener("click", () => {
118-
// Note: this *demo* implementation leaks `div` elements, because they
119-
// are not removed from the light DOM by `clear` or `restore`. You must
120-
// handle the lifecycle of the light DOM objects yourself!
121-
const chars = 'abcdefghijklmnopqrstuvwxyz';
122-
let name = '';
123-
for (let i = 0; i < 8; i++) {
124-
name += chars.charAt(Math.floor(Math.random() * chars.length));
125-
}
126-
127-
const COLORS = ["AAA", "BBB", "CCC", "DDD", "EEE", "FFF"];
128-
const elem = document.createElement("regular-layout-frame");
129-
elem.setAttribute("slot", name);
130-
elem.classList.add(COLORS[Math.floor(COLORS.length * Math.random())])
131-
layout.appendChild(elem);
132-
layout.insertPanel(name, []);
133-
})
134-
135-
const req = await fetch("./layout.json");
136-
let state = await req.json();
137-
138-
const layout = document.querySelector("regular-layout");
139-
layout.restore(state);
140-
save.addEventListener("click", () => {
141-
state = layout.save();
142-
})
143-
144-
restore.addEventListener("click", () => {
145-
if (state) {
146-
layout.restore(state);
147-
}
148-
})
149-
150-
clear.addEventListener("click", () => {
151-
layout.clear();
152-
})
153-
154-
</script>
155-
</html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Regular Layout</title>
7+
<link rel="stylesheet" href="./index.css">
8+
<script type="module" src="./index.js"></script>
9+
</head>
10+
<body>
11+
<header>
12+
<button id="add">Add Panel</button>
13+
<button id="save">Save State</button>
14+
<button id="restore">Restore State</button>
15+
<button id="clear">Clear</button>
16+
</header>
17+
<regular-layout>
18+
<regular-layout-frame slot="AAA"></regular-layout-frame>
19+
<regular-layout-frame slot="BBB"></regular-layout-frame>
20+
<regular-layout-frame slot="CCC"></regular-layout-frame>
21+
<regular-layout-frame slot="DDD"></regular-layout-frame>
22+
<regular-layout-frame slot="EEE"></regular-layout-frame>
23+
<regular-layout-frame slot="FFF"></regular-layout-frame>
24+
<regular-layout-frame slot="GGG"></regular-layout-frame>
25+
<regular-layout-frame slot="HHH"></regular-layout-frame>
26+
</regular-layout>
27+
</body>
28+
</html>

‎index.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2+
// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3+
// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4+
// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5+
// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6+
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7+
// ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8+
// ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9+
// ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10+
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11+
12+
import "./dist/index.js";
13+
14+
const add = document.querySelector("#add");
15+
const save = document.querySelector("#save");
16+
const restore = document.querySelector("#restore");
17+
const clear = document.querySelector("#clear");
18+
add.addEventListener("click", () => {
19+
// Note: this *demo* implementation leaks `div` elements, because they
20+
// are not removed from the light DOM by `clear` or `restore`. You must
21+
// handle the lifecycle of the light DOM objects yourself!
22+
const chars = "abcdefghijklmnopqrstuvwxyz";
23+
let name = "";
24+
for (let i = 0; i < 8; i++) {
25+
name += chars.charAt(Math.floor(Math.random() * chars.length));
26+
}
27+
28+
const COLORS = ["AAA", "BBB", "CCC", "DDD", "EEE", "FFF"];
29+
const elem = document.createElement("regular-layout-frame");
30+
elem.setAttribute("slot", name);
31+
elem.classList.add(COLORS[Math.floor(COLORS.length * Math.random())]);
32+
layout.appendChild(elem);
33+
layout.insertPanel(name, []);
34+
});
35+
36+
const req = await fetch("./layout.json");
37+
let state = await req.json();
38+
39+
const layout = document.querySelector("regular-layout");
40+
layout.restore(state);
41+
save.addEventListener("click", () => {
42+
state = layout.save();
43+
});
44+
45+
restore.addEventListener("click", () => {
46+
if (state) {
47+
layout.restore(state);
48+
}
49+
});
50+
51+
clear.addEventListener("click", () => {
52+
layout.clear();
53+
});

‎layout.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@
1212
"children": [
1313
{
1414
"type": "child-panel",
15-
"child": "AAA"
15+
"child": ["AAA"]
1616
},
1717
{
1818
"type": "split-panel",
1919
"orientation": "vertical",
2020
"children": [
2121
{
2222
"type": "child-panel",
23-
"child": "BBB"
23+
"child": ["BBB"]
2424
},
2525
{
2626
"type": "child-panel",
27-
"child": "CCC"
27+
"child": ["CCC"]
2828
}
2929
],
3030
"sizes": [
@@ -44,11 +44,11 @@
4444
"children": [
4545
{
4646
"type": "child-panel",
47-
"child": "DDD"
47+
"child": ["DDD"]
4848
},
4949
{
5050
"type": "child-panel",
51-
"child": "EEE"
51+
"child": ["EEE"]
5252
}
5353
],
5454
"sizes": [
@@ -64,7 +64,7 @@
6464
},
6565
{
6666
"type": "child-panel",
67-
"child": "FFF"
67+
"child": ["FFF", "GGG", "HHH"]
6868
}
6969
],
7070
"sizes": [

0 commit comments

Comments
 (0)