Skip to content

Commit 7e030db

Browse files
mathertelmathertel
committed
toast-message sfc component
1 parent 86fd6d1 commit 7e030db

8 files changed

+240
-139
lines changed

‎board.htm

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717

1818
<link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" defer />
1919
<script src="/micro.js" defer></script>
20-
21-
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
22-
<script src="u-toast.js"></script>
23-
20+
<script src="/sfc/loader.js"></script>
21+
<script>
22+
var allSFCLoaded = window.loadComponent('u-toast', '/sfc');
23+
</script>
2424
<style>
2525
svg.setconfig {
2626
position: absolute;
@@ -55,6 +55,7 @@
5555
</head>
5656

5757
<body>
58+
<u-toast></u-toast>
5859
<div class="u-header">
5960
<h1>Board</h1>
6061
</div>
@@ -69,7 +70,6 @@ <h1>Board</h1>
6970
</div>
7071

7172
<main class="panel"></main>
72-
<u-toast></u-toast>
7373

7474
<div id="u-templates" style="display:none">
7575

‎log.htm

+5-3
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@
1919

2020
<script src="micro.js"></script>
2121

22-
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
23-
<script src="u-toast.js"></script>
22+
<script src="/sfc/loader.js"></script>
23+
<script>
24+
var allSFCLoaded = window.loadComponent('u-toast', '/sfc');
25+
</script>
2426

2527
<style>
2628
pre.code {
@@ -38,6 +40,7 @@
3840
</head>
3941

4042
<body style="margin:0;padding:0">
43+
<u-toast></u-toast>
4144
<div class="u-header">
4245
<h1>Log output</h1>
4346
</div>
@@ -50,7 +53,6 @@ <h1>Log output</h1>
5053
<button id="clearButton">clear</button>
5154
</div>
5255
<pre class="code" id="logtext"></pre>
53-
<u-toast></u-toast>
5456

5557
<script>
5658
var clearObj = document.getElementById('clearButton');

‎microide.htm

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010
<!-- no web site meta data here -->
1111
<link Content-Type="text/css" href="iotstyle.css" rel="stylesheet" />
1212
<script src="micro.js"></script>
13-
<link Content-Type="text/css" href="/u-toast.css" rel="stylesheet" />
14-
<script src="u-toast.js"></script>
13+
<script src="/sfc/loader.js"></script>
14+
<script>
15+
var allSFCLoaded = window.loadComponent('u-toast', '/sfc');
16+
</script>
1517
<style>
1618
#files {
1719
border: solid 1px black;
@@ -110,6 +112,7 @@
110112
</head>
111113

112114
<body style="margin: 0; padding: 0">
115+
<u-toast></u-toast>
113116
<div class="grid-container" style="padding: 1rem">
114117
<div class="u-header">
115118
<svg class="icon">
@@ -153,7 +156,6 @@ <h3 style="display: inline-block; margin: 0">
153156
<pre style="grid-column: 2" class="code" contenteditable id="content" autocomplete="off" autocorrect="off"
154157
autocapitalize="off" spellcheck="false"></pre>
155158
</div>
156-
<u-toast></u-toast>
157159

158160
<script>
159161
const filesObj = document.getElementById('files');

‎packdist.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -123,20 +123,14 @@ const assets = [
123123
// { m: 'c', src: 'favicon270.png' },
124124
// { m: 'c', src: 'favicon512.png' },
125125
{ m: 'xml', src: 'icons.svg' },
126-
// { m: 'xml', src: 'i/start.svg' },
127-
// { m: 'xml', src: 'i/stop.svg' },
128-
// { m: 'xml', src: 'i/default.svg' },
129-
// { m: 'xml', src: 'i/no.svg' },
130126
{ m: 'css', src: 'iotstyle.scss', tar: 'iotstyle.css' },
131127

132-
{ m: 'm', src: 'u-toast.css', tar: 'u-toast.css' },
133-
{ m: 'js', src: 'u-toast.js' },
134-
135128
{ m: 'js', src: 'sfc/loader.js' },
136129
{ m: 'm', src: 'sfc/u-colorpick.vue' },
137130
{ m: 'm', src: 'sfc/u-piechart.vue' },
138131
{ m: 'm', src: 'sfc/u-gaugechart.vue' },
139132
{ m: 'm', src: 'sfc/u-linechart.vue' },
133+
{ m: 'm', src: 'sfc/u-toast.vue' },
140134

141135
{ m: 'js', src: 'microsvg.js' },
142136

‎sfc/u-toast.vue

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!--
2+
Implementation of a web component for displaying toast messages ...
3+
4+
The component displays messages of type 'log', 'info', 'error'.
5+
6+
<u-toast></u-toast>
7+
8+
This element is typically added to the html body element and will position itself on the top right corner above any html.
9+
10+
## HTML Attributes
11+
12+
The style of the template web component can be changed using the <style> section in this file.
13+
14+
## JavaScript accessible methods
15+
16+
* setOptions(opts) -- Set chart options.
17+
* draw(value) -- Adjust the needle and the displayed value.
18+
19+
## Options
20+
21+
The options are used to configure the chart and are passed using the setOptions function.
22+
23+
* **fontSize** -- The size of the value shown as text. Default is '6px'.
24+
* **strokeWidth** -- The with of the stroke drawing a border around a segment. Default is 0.2.
25+
* **title** -- : 't',
26+
* **minimum** -- : 'mi',
27+
* **maximum** -- : 'ma',
28+
* **units** -- : 'ut',
29+
* **segments** -- : [ { color: '#4040ff' }]
30+
31+
-->
32+
33+
<template>
34+
</template>
35+
36+
<style scoped>
37+
:host {
38+
--log-color: #111111;
39+
--info-color:#00bb11;
40+
--error-color: #bb0000;
41+
display: block;
42+
display: block;
43+
position: absolute;
44+
width: 320px;
45+
top: 1rem;
46+
right: 1rem;
47+
48+
>div {
49+
position: relative;
50+
overflow-y: hidden;
51+
box-sizing: border-box;
52+
53+
padding: 0.25em;
54+
margin-bottom: 0.25em;
55+
border-radius: 0.5em;
56+
color: black;
57+
background-color: white;
58+
border-left: 0.8em solid gray;
59+
60+
&.fade {
61+
transition: all 0.5s linear;
62+
height: 0;
63+
padding-top: 0;
64+
padding-bottom: 0;
65+
margin-bottom: 0;
66+
}
67+
68+
&.log {
69+
border-color: var(--log-color);
70+
}
71+
72+
&.info {
73+
border-color: var(--info-color);
74+
}
75+
76+
&.error {
77+
border-color: var(--error-color);
78+
}
79+
80+
>button {
81+
position: absolute;
82+
right: 0.5em;
83+
top: 0;
84+
padding: 0.1em 0.2em;
85+
border: 0;
86+
min-width: 1em;
87+
color: white;
88+
background-color: var(--error-color);;
89+
}
90+
}
91+
92+
}
93+
</style>
94+
95+
<script>
96+
export default class UToast extends UComponent {
97+
// runtime options
98+
#options = {
99+
design: "u-log",
100+
duration: 3000,
101+
close: false
102+
};
103+
104+
// ===== inner methods =====
105+
106+
// create a box for logs, alerts...
107+
#addMessage(msg, options) {
108+
options = Object.assign({}, this.#options, options);
109+
110+
const txt = document.createElement('div');
111+
txt.classList.add(options.design);
112+
txt.innerText = msg;
113+
this.shadowRoot.appendChild(txt);
114+
txt.style.height = txt.clientHeight + 'px';
115+
116+
if (options.close) {
117+
// add close button to box
118+
const b = document.createElement('button');
119+
b.textContent = 'x';
120+
txt.appendChild(b);
121+
b.addEventListener("click", () => {
122+
txt.remove();
123+
});
124+
}
125+
126+
if (options.duration) {
127+
// close box after duration ....
128+
window.setTimeout(() => {
129+
txt.style.height = '';
130+
txt.classList.add('fade');
131+
}, options.duration);
132+
133+
// finally remove box
134+
txt.addEventListener("transitionend", () => {
135+
txt.remove();
136+
});
137+
138+
}
139+
}
140+
141+
/// ===== public methods =====
142+
143+
// pre-configured toast-message types.
144+
log(msg, options = {}) {
145+
this.#addMessage(msg, Object.assign({ design: 'log' }, options));
146+
}
147+
148+
info(msg, options = {}) {
149+
this.#addMessage(msg, Object.assign({ design: 'info' }, options));
150+
}
151+
152+
error(msg, options = {}) {
153+
this.#addMessage(msg, Object.assign({ design: 'error', close: true, duration: 8000 }, options));
154+
}
155+
156+
}
157+
</script>

‎test-toast.htm

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
8+
<title>Pie Chart Test</title>
9+
10+
<link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" />
11+
<style>
12+
pre.code {
13+
display: block;
14+
margin: 0.5em 0;
15+
border: solid 1px black;
16+
padding: 0.2em;
17+
font-family: Courier New, Courier, monospace;
18+
font-size: 0.75em;
19+
line-height: 1.2;
20+
color: black;
21+
background-color: rgb(255, 255, 240);
22+
}
23+
</style>
24+
<script src="/sfc/loader.js"></script>
25+
<script>
26+
var allSFCLoaded = window.loadComponent('u-toast', '/sfc');
27+
</script>
28+
</head>
29+
30+
<body>
31+
<u-toast></u-toast>
32+
33+
<div class="container">
34+
<h1>Toast Test Page</h1>
35+
36+
<p>
37+
<button id="doLog">Log</button>
38+
<button id="doError">Error</button>
39+
</p>
40+
<p>API Documentation available at <a
41+
href="https://homeding.github.io/#page=microchart-pie.md">https://homeding.github.io/#page=microchart-pie.md</a>
42+
</p>
43+
</div>
44+
45+
<script>
46+
var toastElement = document.querySelector('u-toast');
47+
48+
window.addEventListener('DOMContentLoaded', async function() {
49+
document.querySelector('#doLog').addEventListener('click', evt => {
50+
toastElement.log('log text...');
51+
});
52+
53+
document.querySelector('#doError').addEventListener('click', evt => {
54+
toastElement.error('log text...');
55+
});
56+
57+
await allSFCLoaded;
58+
toastElement.log('Hello Toaster!');
59+
toastElement.error('Failed !');
60+
window.setTimeout(() => {
61+
toastElement.info('progress...');
62+
}, 2000);
63+
});
64+
</script>
65+
</body>
66+
67+
</html>

‎u-toast.css

-52
This file was deleted.

0 commit comments

Comments
 (0)