Skip to content

Commit 6e2c149

Browse files
angelo-vangelo-v
authored
Merge pull request SolidOS#355 from solid/storybook-log-and-notepad
Storybook log and notepad
2 parents c45fbe9 + e450554 commit 6e2c149

5 files changed

Lines changed: 321 additions & 525 deletions

File tree

‎examples/log/index.html‎

Lines changed: 5 additions & 288 deletions
Original file line numberDiff line numberDiff line change
@@ -3,293 +3,10 @@
33
<head>
44
<meta charset='UTF-8'>
55
<title>solid-ui UI.log examples page</title>
6-
<script type="text/javascript" src="../../lib/webpack-bundle.js"></script>
7-
<script>
8-
function showSource (widgetName) {
9-
document.querySelector(`#viewSource-${widgetName}`).innerHTML = document.querySelector(`#script-${widgetName}`).innerText
10-
.replace(/&/g, '&amp;')
11-
.replace(/</g, '&lt;')
12-
.replace(/>/g, '&gt;')
13-
.replace(/"/g, '&quot;')
14-
.replace(/'/g, '&#039;')
15-
}
16-
17-
window.addEventListener('DOMContentLoaded', () => {
18-
Array.from(document.querySelectorAll('article')).forEach(title => {
19-
const section = title.id
20-
showSource(section)
21-
})
22-
})
23-
</script>
6+
<meta http-equiv="refresh" content="0; url=https://solid.github.io/solid-ui/examples/storybook/?path=/docs/log--simple-message" />
247
</head>
25-
<body style="padding-right: 300px;">
26-
27-
<h1>The log module</h1>
28-
29-
<p>
30-
On this page you'll find some examples from the log module. See
31-
<a href="https://solid.github.io/solid-ui/Documentation/api/modules/_log_">API documentation</a> for more
32-
information.
33-
</p>
34-
35-
<div style="background: white; border: 0.5em solid black; position: fixed; top: 0; right: 0; width: 300px; padding: 0.5em;">
36-
<p>
37-
<strong>Status area:</strong> This is the playground which the examples will interact with. Click the various
38-
buttons to see their effect here.
39-
</p>
40-
<div id="status" style="border: 1px solid red; padding: 0.5em; max-height: 50vh; overflow: auto;"></div>
41-
<p>
42-
Note that by default only <code>msg</code>, <code>warn</code> and <code>error</code> will add messages to the
43-
status area. You can change this by using <a href="#log-setLevel"><code>setLevel</code></a>.
44-
</p>
45-
</div>
46-
47-
<article id="log-msg">
48-
<h2>
49-
<a href="#log-msg">
50-
<code>log.msg</code>: A simple message
51-
</a>
52-
</h2>
53-
<script id="script-log-msg">
54-
window.addEventListener('DOMContentLoaded', () => {
55-
const button = document.createElement('button')
56-
button.innerText = 'Add a message'
57-
button.addEventListener('click', () => UI.log.msg('A simple message'))
58-
document.querySelector('#demo-log-msg').appendChild(button)
59-
})
60-
</script>
61-
<pre id="viewSource-log-msg"></pre>
62-
<div id="demo-log-msg"></div>
63-
</article>
64-
65-
<article id="log-warn">
66-
<h2>
67-
<a href="#log-warn">
68-
<code>log.warn</code>: A warning message
69-
</a>
70-
</h2>
71-
<script id="script-log-warn">
72-
window.addEventListener('DOMContentLoaded', () => {
73-
const button = document.createElement('button')
74-
button.innerText = 'Add a warning'
75-
button.addEventListener('click', () => UI.log.warn('A warning message'))
76-
document.querySelector('#demo-log-warn').appendChild(button)
77-
})
78-
</script>
79-
<pre id="viewSource-log-warn"></pre>
80-
<div id="demo-log-warn"></div>
81-
</article>
82-
83-
<article id="log-debug">
84-
<h2>
85-
<a href="#log-debug">
86-
<code>log.debug</code>: A debug message
87-
</a>
88-
</h2>
89-
<script id="script-log-debug">
90-
window.addEventListener('DOMContentLoaded', () => {
91-
const button = document.createElement('button')
92-
button.innerText = 'Add a debugging message'
93-
button.addEventListener('click', () => UI.log.debug('A debugging message'))
94-
document.querySelector('#demo-log-debug').appendChild(button)
95-
})
96-
</script>
97-
<pre id="viewSource-log-debug"></pre>
98-
<div id="demo-log-debug"></div>
99-
</article>
100-
101-
<article id="log-info">
102-
<h2>
103-
<a href="#log-info">
104-
<code>log.info</code>: An info message
105-
</a>
106-
</h2>
107-
<script id="script-log-info">
108-
window.addEventListener('DOMContentLoaded', () => {
109-
const button = document.createElement('button')
110-
button.innerText = 'Add an info message'
111-
button.addEventListener('click', () => UI.log.info('An info message'))
112-
document.querySelector('#demo-log-info').appendChild(button)
113-
})
114-
</script>
115-
<pre id="viewSource-log-info"></pre>
116-
<div id="demo-log-info"></div>
117-
</article>
118-
119-
<article id="log-error">
120-
<h2>
121-
<a href="#log-error">
122-
<code>log.error</code>: An error message
123-
</a>
124-
</h2>
125-
<script id="script-log-error">
126-
window.addEventListener('DOMContentLoaded', () => {
127-
const button = document.createElement('button')
128-
button.innerText = 'Add an error message'
129-
button.addEventListener('click', () => UI.log.error('An error message'))
130-
document.querySelector('#demo-log-error').appendChild(button)
131-
})
132-
</script>
133-
<pre id="viewSource-log-error"></pre>
134-
<div id="demo-log-error"></div>
135-
</article>
136-
137-
<article id="log-success">
138-
<h2>
139-
<a href="#log-success">
140-
<code>log.success</code>: A success message
141-
</a>
142-
</h2>
143-
<script id="script-log-success">
144-
window.addEventListener('DOMContentLoaded', () => {
145-
const button = document.createElement('button')
146-
button.innerText = 'Add a success message'
147-
button.addEventListener('click', () => UI.log.success('A success message'))
148-
document.querySelector('#demo-log-success').appendChild(button)
149-
})
150-
</script>
151-
<pre id="viewSource-log-success"></pre>
152-
<div id="demo-log-success"></div>
153-
</article>
154-
155-
<article id="log-alert">
156-
<h2>
157-
<a href="#log-alert">
158-
<code>log.alert</code>: An alert message
159-
</a>
160-
</h2>
161-
<p>
162-
This example uses alert to notify user of a message. It will not log in the status area unless
163-
<code>window.alert</code> is not available.
164-
</p>
165-
<script id="script-log-alert">
166-
window.addEventListener('DOMContentLoaded', () => {
167-
const button = document.createElement('button')
168-
button.innerText = 'Trigger an alert message'
169-
button.addEventListener('click', () => UI.log.alert('An alert message'))
170-
document.querySelector('#demo-log-alert').appendChild(button)
171-
})
172-
</script>
173-
<pre id="viewSource-log-alert"></pre>
174-
<div id="demo-log-alert"></div>
175-
</article>
176-
177-
<article id="log-clear">
178-
<h2>
179-
<a href="#log-clear">
180-
<code>log.clear</code>: Clear messages
181-
</a>
182-
</h2>
183-
<p>
184-
Using this method you can clear the existing messages in the status area.
185-
</p>
186-
<script id="script-log-clear">
187-
window.addEventListener('DOMContentLoaded', () => {
188-
const button = document.createElement('button')
189-
button.innerText = 'Clear status area'
190-
button.addEventListener('click', () => UI.log.clear())
191-
document.querySelector('#demo-log-clear').appendChild(button)
192-
})
193-
</script>
194-
<pre id="viewSource-log-clear"></pre>
195-
<div id="demo-log-clear"></div>
196-
</article>
197-
198-
<article id="log-setLevel">
199-
<h2>
200-
<a href="#log-setLevel">
201-
<code>log.setLevel</code>: Configure which messages that are to be shown
202-
</a>
203-
</h2>
204-
<p>
205-
The module uses <a href="https://en.wikipedia.org/wiki/Mask_(computing)">bitmask</a> to filter which types
206-
of messages that will be shown. It assigns the following 10-based number to each type (binaries in
207-
parenthesis):
208-
</p>
209-
<ul>
210-
<li>Error: 1 (000001)</li>
211-
<li>Warning: 2 (000010)</li>
212-
<li>Message: 4 (000100)</li>
213-
<li>Success: 8 (001000)</li>
214-
<li>Info: 16 (010000)</li>
215-
<li>Debug: 32 (100000)</li>
216-
</ul>
217-
<p>
218-
By default only error, warning, and normal messages will be shown, hence the number 7 that is shown by default
219-
in this example. You can set it to show all types of messages by passing 63 (which is the sum of all, and is
220-
111111 in binary).
221-
</p>
222-
<script id="script-log-setLevel">
223-
window.addEventListener('DOMContentLoaded', () => {
224-
const input = document.createElement('input')
225-
input.type = 'text'
226-
input.inputmode = 'numeric'
227-
input.pattern = '[0-9]*'
228-
input.value = 7
229-
document.querySelector('#demo-log-setLevel').appendChild(input)
230-
const button = document.createElement('button')
231-
button.innerText = 'Set level'
232-
button.addEventListener('click', () => UI.log.setLevel(parseInt(input.value, 10)))
233-
document.querySelector('#demo-log-setLevel').appendChild(button)
234-
})
235-
</script>
236-
<pre id="viewSource-log-setLevel"></pre>
237-
<div id="demo-log-setLevel"></div>
238-
</article>
239-
240-
<article id="log-dumpHTML">
241-
<h2>
242-
<a href="#log-dumpHTML">
243-
<code>log.dumpHTML</code>: Dump all HTML in body in a log message
244-
</a>
245-
</h2>
246-
<script id="script-log-dumpHTML">
247-
window.addEventListener('DOMContentLoaded', () => {
248-
const button = document.createElement('button')
249-
button.innerText = 'Dump HTML'
250-
button.addEventListener('click', () => UI.log.dumpHTML())
251-
document.querySelector('#demo-log-dumpHTML').appendChild(button)
252-
})
253-
</script>
254-
<pre id="viewSource-log-dumpHTML"></pre>
255-
<div id="demo-log-dumpHTML"></div>
256-
</article>
257-
258-
<article id="log-logAscending">
259-
<h2>
260-
<a href="#log-logAscending">
261-
<code>log.logAscending</code>: Start logging all messages in ascending order
262-
</a>
263-
</h2>
264-
<script id="script-log-logAscending">
265-
window.addEventListener('DOMContentLoaded', () => {
266-
const button = document.createElement('button')
267-
button.innerText = 'Log ascending'
268-
button.addEventListener('click', () => UI.log.logAscending())
269-
document.querySelector('#demo-log-logAscending').appendChild(button)
270-
})
271-
</script>
272-
<pre id="viewSource-log-logAscending"></pre>
273-
<div id="demo-log-logAscending"></div>
274-
</article>
275-
276-
<article id="log-logDescending">
277-
<h2>
278-
<a href="#log-logDescending">
279-
<code>log.logDescending</code>: Start logging all messages in descending order
280-
</a>
281-
</h2>
282-
<script id="script-log-logDescending">
283-
window.addEventListener('DOMContentLoaded', () => {
284-
const button = document.createElement('button')
285-
button.innerText = 'Log descending'
286-
button.addEventListener('click', () => UI.log.logDescending())
287-
document.querySelector('#demo-log-logDescending').appendChild(button)
288-
})
289-
</script>
290-
<pre id="viewSource-log-logDescending"></pre>
291-
<div id="demo-log-logDescending"></div>
292-
</article>
293-
8+
<body>
9+
<h1>These examples have moved to storybook</h1>
10+
<a href="https://solid.github.io/solid-ui/examples/storybook/?path=/docs/log--simple-message">https://solid.github.io/solid-ui/examples/storybook/?path=/docs/log--simple-message</a>
29411
</body>
295-
</html>
12+
</html>

0 commit comments

Comments
 (0)