Skip to content

Commit 803023b

Browse files
committed
Updates
1 parent e4b12cb commit 803023b

File tree

10 files changed

+614
-328
lines changed

10 files changed

+614
-328
lines changed

src/app.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
window.addEventListener('load', () => {
2+
// Initialize jere
3+
console.log('App loaded');
4+
});

src/app/CanvasElement.js

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
3+
/**
4+
* @class CanvasElement
5+
*
6+
* This class is used to contain content boxes which are stacked
7+
* vertically or horizontally within the canvas.
8+
*
9+
* @example
10+
* <w2-canvas vertical>
11+
* <w2-canvas-content>....</w2-canvas-content>
12+
* <w2-canvas-content>....</w2-canvas-content>
13+
* <w2-canvas-content>....</w2-canvas-content>
14+
* </w2-canvas>
15+
*/
16+
export class CanvasElement extends LitElement {
17+
static get localName() {
18+
return 'w2-canvas';
19+
}
20+
21+
constructor() {
22+
super();
23+
this.backgroundColor = 'light';
24+
}
25+
26+
static get properties() {
27+
return {
28+
/**
29+
* @property {Boolean} vertical - Fill the canvas vertically rather than horizontally
30+
*/
31+
vertical: { type: Boolean },
32+
33+
/**
34+
* @property {String} backgroundColor - Background color of the canvas
35+
* @default 'light'
36+
*/
37+
backgroundColor: { type: String },
38+
};
39+
}
40+
41+
static get styles() {
42+
return css`
43+
div {
44+
position: absolute;
45+
top: 0;
46+
bottom: 0;
47+
left: 0;
48+
right: 0;
49+
display: flex;
50+
}
51+
52+
div:not(.vertical) {
53+
flex-direction: row;
54+
}
55+
56+
div.vertical {
57+
flex-direction: column;
58+
}
59+
60+
/* Any canvas section is in flexbox mode */
61+
::slotted(w2-canvas-section),::slotted(w2-canvas-navbar) {
62+
display: flex;
63+
flex: 0 0;
64+
justify-content: center;
65+
border-style: none;
66+
}
67+
68+
/* The first section in vertical mode gets a border below */
69+
div.vertical > ::slotted(w2-canvas-navbar:first-child),div.vertical > ::slotted(w2-canvas-section:first-child) {
70+
min-height: 40px;
71+
border-bottom-style: solid;
72+
}
73+
/* The first section in horizontal mode gets a border right */
74+
div:not(.vertical) > ::slotted(w2-canvas-navbar:first-child), div:not(.vertical) > ::slotted(w2-canvas-section:first-child) {
75+
min-width: 60px;
76+
border-right-style: solid;
77+
}
78+
/* The last section in vertical mode gets a border above */
79+
div.vertical > ::slotted(w2-canvas-navbar:last-child),div.vertical > ::slotted(w2-canvas-section:last-child) {
80+
min-height: 30px;
81+
border-top-style: solid;
82+
}
83+
/* The last section in horizonal mode gets a border left */
84+
div:not(.vertical) > ::slotted(w2-canvas-navbar:last-child),div:not(.vertical) > ::slotted(w2-canvas-section:last-child) {
85+
min-width: 60px;
86+
border-left-style: solid;
87+
}
88+
89+
/* Flex containers stretch */
90+
::slotted(w2-canvas-section[flex]) {
91+
flex: 999 0;
92+
overflow: auto;
93+
}
94+
95+
/* Light theme setting colours and border widths */
96+
div.bg-color-light ::slotted(w2-canvas-navbar) {
97+
background-color: var(--light-color);
98+
color: var(--dark-color);
99+
border-color: var(--grey-20-color);
100+
border-width: 1px;
101+
}
102+
`;
103+
}
104+
105+
render() {
106+
return html`
107+
<div class=${this.className || nothing}>
108+
<slot></slot>
109+
</div>
110+
`;
111+
}
112+
113+
get className() {
114+
const classes = [];
115+
if (this.backgroundColor) {
116+
classes.push(`bg-color-${this.backgroundColor}`);
117+
}
118+
if (this.vertical) {
119+
classes.push('vertical');
120+
}
121+
return classes.join(' ');
122+
}
123+
}

src/app/CanvasNavbarElement.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { html, css, nothing } from 'lit';
2+
import { CanvasSectionElement } from './CanvasSectionElement';
3+
4+
/**
5+
* @class CanvasNavbarElement
6+
*
7+
* This class is a navigaton used to contain content boxes which are stacked
8+
* vertically or horizontally within the canvas.
9+
*
10+
* @example
11+
* <w2-canvas vertical>
12+
* <w2-canvas-navbar>....</w2-canvas-navbar>
13+
* <w2-canvas-section>....</w2-canvas-section>
14+
* <w2-canvas-navbar>....</w2-canvas-navbar>
15+
* </w2-canvas>
16+
*/
17+
export class CanvasElement extends CanvasSectionElement {
18+
static get localName() {
19+
return 'w2-canvas-navbar';
20+
}
21+
22+
constructor() {
23+
super();
24+
this.hidden = false;
25+
}
26+
27+
static get properties() {
28+
return {
29+
/**
30+
* @property {Boolean} hidden - Whether the navigation is hidden
31+
*/
32+
hidden: { type: Boolean },
33+
};
34+
}
35+
36+
static get styles() {
37+
return css`
38+
.hidden {
39+
display: none;
40+
}
41+
`;
42+
}
43+
44+
render() {
45+
return html`
46+
<div class=${this.className || nothing}>
47+
<slot></slot>
48+
</div>
49+
`;
50+
}
51+
52+
// eslint-disable-next-line class-methods-use-this
53+
get className() {
54+
const classes = [];
55+
if (this.hidden) {
56+
classes.push('hidden');
57+
}
58+
return classes.join(' ');
59+
}
60+
}

src/app/CanvasSectionElement.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
3+
/**
4+
* @class CanvasSectionElement
5+
*
6+
* This class is used for content boxes which are stacked
7+
* vertically or horizontally within a canvas. The content
8+
* boxes can be flexed to fill the available space.
9+
*
10+
* @example
11+
* <w2-canvas vertical>
12+
* <w2-canvas-section>....</w2-canvas-section>
13+
* <w2-canvas-section>....</w2-canvas-section>
14+
* <w2-canvas-section>....</w2-canvas-section>
15+
* </w2-canvas>
16+
*/
17+
export class CanvasSectionElement extends LitElement {
18+
static get localName() {
19+
return 'w2-canvas-section';
20+
}
21+
22+
static get properties() {
23+
return {
24+
/**
25+
* @property {Boolean} flex - Flex the element to fill the available space
26+
*/
27+
flex: { type: Boolean },
28+
};
29+
}
30+
31+
static get styles() {
32+
return css`
33+
:host {}
34+
div {
35+
left: 0;
36+
right: 0;
37+
border: 1px solid red;
38+
}
39+
`;
40+
}
41+
42+
render() {
43+
return html`
44+
<div class=${this.className || nothing}>
45+
<slot></slot>
46+
</div>
47+
`;
48+
}
49+
50+
get className() {
51+
const classes = [];
52+
if (this.flex) {
53+
classes.push('flex');
54+
}
55+
return classes.join(' ');
56+
}
57+
}

src/app/app.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* Theme variables go here */

src/app/app.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// CSS
2+
import './app.css';
3+
4+
// Classes
5+
import { CanvasElement } from './CanvasElement';
6+
import { CanvasSectionElement } from './CanvasSectionElement';
7+
8+
// Web Components
9+
customElements.define(CanvasElement.localName, CanvasElement); // w2-canvas
10+
customElements.define(CanvasSectionElement.localName, CanvasSectionElement); // w2-canvas-section

0 commit comments

Comments
 (0)