Skip to content

Commit de8df3a

Browse files
djthorpedjthorpe
committed
Updated
1 parent 48446aa commit de8df3a

File tree

10 files changed

+282
-32
lines changed

10 files changed

+282
-32
lines changed

‎config/esbuild.config.mjs

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import esbuild from 'esbuild';
22

33
const commonOptions = {
4-
entryPoints: ['example/index.js'],
54
outdir: 'dist',
65
format: 'esm',
76
bundle: true,
@@ -15,16 +14,19 @@ const commonOptions = {
1514
'.json': 'copy',
1615
},
1716
logLevel: 'info',
17+
entryPoints: [],
1818
};
1919

2020
if (process.env.NODE_ENV === 'production') {
21+
commonOptions.entryPoints.push('src/index.js');
2122
await esbuild.build({
2223
...commonOptions,
24+
entryPoints: ['src/index.js'],
2325
minify: true,
2426
sourcemap: false,
2527
}).catch(() => process.exit(1));
2628
} else {
27-
commonOptions.entryPoints.push('example/index.html', 'example/data.json');
29+
commonOptions.entryPoints.push('example/index.html', 'example/index.js');
2830
let ctx = await esbuild.context({
2931
...commonOptions,
3032
minify: false,

‎example/index.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@
1010
</head>
1111

1212
<body>
13-
<js-container>
14-
<js-tag transform="uppercase">Data</js-tag>
1513

14+
<!-- toast which persists on the screen for 10 seconds -->
15+
<js-toast id="toast" duration="10"></js-toast>
16+
17+
<!-- header -->
18+
<js-container>
1619
<!-- where the data comes from -->
1720
<js-provider id="provider" origin="http://localhost:8080/" path="aktek/area" interval="5"></js-provider>
1821

@@ -34,7 +37,8 @@
3437
<js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
3538

3639
<!-- display the source on the map as polygons -->
37-
<js-maplayer id="points" source="#area" type="fill" paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
40+
<js-maplayer id="points" source="#area" type="fill"
41+
paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
3842
</js-map>
3943
</div>
4044
</js-container>

‎example/index.js

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
11
// This file defines all the styles and elements used for the web components
2-
3-
// Components
4-
import '../src/core/core';
5-
import '../src/element/element';
6-
import '../src/mapbox/mapbox';
7-
8-
// Styles
9-
import '../src/core/core.css';
10-
11-
// Other
2+
import '../src/index.js';
123
import './esbuild';
134
import './load';

‎example/load.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
1-
import { FeatureModel } from '../src/geojson/FeatureModel';
1+
import { EventType } from '../src/core/EventType';
22

33
window.addEventListener('load', () => {
4+
// Set toast when error or done
45
const provider = document.querySelector('#provider');
5-
provider.interval = 5;
6+
const toast = document.querySelector('#toast');
7+
provider.addEventListener(EventType.DONE, (e) => {
8+
toast.visible = true;
9+
toast.duration = 1;
10+
toast.color = 'success';
11+
toast.innerHTML = `DONE: ${e.detail}<js-close></js-close>`;
12+
});
13+
provider.addEventListener(EventType.ERROR, (e) => {
14+
toast.visible = true;
15+
toast.duration = 10;
16+
toast.color = 'error';
17+
toast.innerHTML = `ERROR: ${e.detail}<js-close></js-close>`;
18+
});
619
});

‎src/core/core-tokens.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,49 @@
115115
--tag-font-size-xlarge: var(--font-size-xlarge);
116116
}
117117

118+
/* toast */
119+
:root {
120+
--toast-background-color-primary: var(--primary-color);
121+
--toast-color-primary: var(--light-color);
122+
--toast-border-color-primary: var(--primary-color);
123+
124+
--toast-background-color-secondary: var(--secondary-color);
125+
--toast-color-secondary: var(--light-color);
126+
--toast-border-color-secondary: var(--dark-color);
127+
128+
--toast-background-color-success: var(--success-color);
129+
--toast-color-success: var(--light-color);
130+
--toast-border-color-success: var(--success-color);
131+
132+
--toast-background-color-warning: var(--warning-color);
133+
--toast-color-warning: var(--light-color);
134+
--toast-border-color-warning: var(--warning-color);
135+
136+
--toast-background-color-error: var(--error-color);
137+
--toast-color-error: var(--light-color);
138+
--toast-border-color-error: var(--error-color);
139+
140+
--toast-background-color-light: var(--light-color);
141+
--toast-color-light: var(--dark-color);
142+
--toast-border-color-light: var(--dark-color);
143+
144+
--toast-background-color-dark: var(--dark-color);
145+
--toast-color-dark: var(--light-color);
146+
--toast-border-color-dark: var(--dark-color);
147+
148+
--toast-background-color-white: var(--white-color);
149+
--toast-color-white: var(--black-color);
150+
--toast-border-color-white: var(--black-color);
151+
152+
--toast-background-color-black: var(--black-color);
153+
--toast-color-black: var(--white-color);
154+
--toast-border-color-black: var(--black-color);
155+
156+
--toast-margin: 1rem;
157+
--toast-padding: 0.5rem;
158+
--toast-border: 0.05rem solid var(--dark-color);
159+
}
160+
118161
/* icons */
119162
:root {
120163
--icon-size-small: 1.1em;

‎src/element/CloseButtonElement.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { LitElement, html, svg, css, nothing } from 'lit';
2+
import icons from 'bootstrap-icons/bootstrap-icons.svg';
3+
4+
/**
5+
* @class CloseButtonElement
6+
*
7+
* This class provides an icon element
8+
*
9+
* @example
10+
* <js-close size="large"></js-close>
11+
*/
12+
export class CloseButtonElement extends LitElement {
13+
static get localName() {
14+
return 'js-close';
15+
}
16+
17+
constructor() {
18+
super();
19+
this.size = 'default';
20+
}
21+
22+
static get properties() {
23+
return {
24+
size: { type: String, reflect: true },
25+
};
26+
}
27+
28+
static get styles() {
29+
return css`
30+
:host {
31+
display: inline-block;
32+
vertical-align: middle;
33+
cursor: pointer;
34+
user-select: none;
35+
float: right;
36+
37+
div:hover {
38+
color: red;
39+
}
40+
41+
div:active {
42+
color: red;
43+
transform: translate(0.1rem, 0.1rem);
44+
}
45+
}
46+
.size-small {
47+
position: relative;
48+
width: var(--icon-size-small);
49+
height: var(--icon-size-small);
50+
}
51+
.size-medium, .size-default {
52+
position: relative;
53+
width: var(--icon-size-medium);
54+
height: var(--icon-size-medium);
55+
}
56+
.size-large {
57+
position: relative;
58+
width: var(--icon-size-large);
59+
height: var(--icon-size-large);
60+
}
61+
.size-xlarge {
62+
position: relative;
63+
width: var(--icon-size-xlarge);
64+
height: var(--icon-size-xlarge);
65+
}
66+
svg {
67+
width: 100%;
68+
height: 100%;
69+
fill: currentColor;
70+
}
71+
`;
72+
}
73+
74+
get classes() {
75+
const classes = [];
76+
classes.push(`size-${this.size}`);
77+
return classes;
78+
}
79+
80+
get name() {
81+
return this.textContent.trim() || 'x-lg';
82+
}
83+
84+
render() {
85+
return svg`<div class=${this.classes.join(' ') || nothing}><svg><use href="${icons}#${this.name}"/></svg></div>`;
86+
}
87+
}

‎src/element/ToastElement.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
3+
/**
4+
* @class ToastElement
5+
*
6+
* This class provides a popup toast element
7+
*
8+
* @example
9+
* <js-toast>Error</js-toast>
10+
*/
11+
export class ToastElement extends LitElement {
12+
static get localName() {
13+
return 'js-toast';
14+
}
15+
16+
static get properties() {
17+
return {
18+
color: { type: String, reflect: true },
19+
visible: { type: Boolean, reflect: true },
20+
};
21+
}
22+
23+
static get styles() {
24+
return css`
25+
:host div {
26+
position: fixed;
27+
z-index: 1000;
28+
right: 0;
29+
bottom: 0;
30+
margin: var(--toast-margin);
31+
padding: var(--toast-padding);
32+
border: var(--toast-border);
33+
34+
&.visible {
35+
display: block;
36+
animation: fadein 0.5s, fadeout 0.5s 2.5s;
37+
}
38+
39+
&.hidden {
40+
display: none;
41+
animation: fadein 0.5s, fadeout 0.5s 2.5s;
42+
}
43+
}
44+
.color-primary {
45+
background-color: var(--toast-background-color-primary);
46+
color: var(--toast-color-primary);
47+
border-color: var(--toast-border-color-primary);
48+
}
49+
.color-secondary {
50+
background-color: var(--toast-background-color-secondary);
51+
color: var(--toast-color-secondary);
52+
border-color: var(--toast-border-color-secondary);
53+
}
54+
.color-success {
55+
background-color: var(--toast-background-color-success);
56+
color: var(--toast-color-success);
57+
border-color: var(--toast-border-color-success);
58+
}
59+
.color-warning {
60+
background-color: var(--toast-background-color-warning);
61+
color: var(--toast-color-warning);
62+
border-color: var(--toast-border-color-warning);
63+
}
64+
.color-error {
65+
background-color: var(--toast-background-color-error);
66+
color: var(--toast-color-error);
67+
border-color: var(--toast-border-color-error);
68+
}
69+
.color-light {
70+
background-color: var(--toast-background-color-light);
71+
color: var(--toast-color-light);
72+
border-color: var(--toast-border-color-light);
73+
}
74+
.color-dark {
75+
background-color: var(--toast-background-color-dark);
76+
color: var(--toast-color-dark);
77+
border-color: var(--toast-border-color-dark);
78+
}
79+
.color-white {
80+
background-color: var(--toast-background-color-white);
81+
color: var(--toast-color-white);
82+
border-color: var(--toast-border-color-white);
83+
}
84+
.color-black {
85+
background-color: var(--toast-background-color-black);
86+
color: var(--toast-color-black);
87+
border-color: var(--toast-border-color-black);
88+
}
89+
`;
90+
}
91+
92+
constructor() {
93+
super();
94+
this.color = 'error';
95+
}
96+
97+
render() {
98+
return html`
99+
<div class=${this.classes.join(' ') || nothing}><slot></slot></div>
100+
`;
101+
}
102+
103+
// eslint-disable-next-line class-methods-use-this
104+
get classes() {
105+
const classes = [];
106+
classes.push(`color-${this.color}`);
107+
if (this.visible) {
108+
classes.push('visible');
109+
} else {
110+
classes.push('hidden');
111+
}
112+
return classes;
113+
}
114+
}

‎src/element/element.css

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

‎src/element/element.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
// CSS
2-
import './element.css';
3-
41
// Elements
52
import { ContainerElement } from './ContainerElement';
63
import { TableBodyElement } from './TableBodyElement';
74
import { TableHeadElement } from './TableHeadElement';
85
import { ButtonElement } from './ButtonElement';
6+
import { CloseButtonElement } from './CloseButtonElement';
97
import { TagElement } from './TagElement';
108
import { IconElement } from './IconElement';
9+
import { ToastElement } from './ToastElement';
1110

1211
// Define Web Components
1312
customElements.define(ContainerElement.localName, ContainerElement); // js-container
1413
customElements.define(TableBodyElement.localName, TableBodyElement); // js-tablebody
1514
customElements.define(TableHeadElement.localName, TableHeadElement); // js-tablehead
1615
customElements.define(ButtonElement.localName, ButtonElement); // js-button
16+
customElements.define(CloseButtonElement.localName, CloseButtonElement); // js-close
1717
customElements.define(TagElement.localName, TagElement); // js-tag
1818
customElements.define(IconElement.localName, IconElement); // js-icon
19+
customElements.define(ToastElement.localName, ToastElement); // js-toast

‎src/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Components
2+
import './core/core';
3+
import './element/element';
4+
import './mapbox/mapbox';
5+
6+
// Styles
7+
import './core/core.css';

0 commit comments

Comments
 (0)