diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | notif/example.d.ts | 1 | ||||
| -rw-r--r-- | notif/example.html | 51 | ||||
| -rw-r--r-- | notif/example.ts | 52 | ||||
| -rw-r--r-- | notif/index.html | 20 | ||||
| -rw-r--r-- | notif/notif.d.ts | 3 | ||||
| -rw-r--r-- | notif/notif.ts | 6 |
7 files changed, 80 insertions, 54 deletions
@@ -7,6 +7,7 @@ <body> <h3><a href="/editor"> Editor </a></h3> <h3><a href="/input"> Input </a></h3> + <h3><a href="/notif"> Notification </a></h3> <h3><a href="/vfs"> VFS </a></h3> </body> </html> diff --git a/notif/example.d.ts b/notif/example.d.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/notif/example.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/notif/example.html b/notif/example.html deleted file mode 100644 index b1211b0..0000000 --- a/notif/example.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>WUI - notif</title> - <style> - #input_msg { - width: calc(100% - 1em); - height: 4em; - } - .empty { - height: 100vh; - } - </style> - </head> - <body onload="main()"> - <p class="empty">Empty spaces.</p> - <textarea id="input_msg"></textarea> - <button onclick="notifInfo()">Info</button> - <button onclick="notifError()">Error</button - <p></p> - <script> - var exports = {} - let inputMsg = document.getElementById("input_msg") - let wuiNotif = null - </script> - <script src="notif.js"></script> - <script> - function main() { - wuiNotif = new WuiNotif() - inputMsg.value = `Hello world, this is a notification with HTML format using <b>bold</b> and <u>underline</u> words.` - - let previewError = document.createElement("div") - previewError.classList.add(`${WUI_NOTIF_CLASS_ERROR}`) - previewError.innerText = `Preview of error style`; - document.body.appendChild(previewError) - - let previewInfo = document.createElement("div") - previewInfo.classList.add(`${WUI_NOTIF_CLASS_INFO}`) - previewInfo.innerText = `Preview of info style`; - document.body.appendChild(previewInfo) - } - function notifInfo() { - wuiNotif.Info(inputMsg.value) - } - function notifError() { - wuiNotif.Error(inputMsg.value) - } - </script> - </body> -</html> diff --git a/notif/example.ts b/notif/example.ts new file mode 100644 index 0000000..bb919ae --- /dev/null +++ b/notif/example.ts @@ -0,0 +1,52 @@ +import { WuiNotif, WUI_NOTIF_CLASS_ERROR, WUI_NOTIF_CLASS_INFO } from "./notif.js" + +let inputMsg: HTMLTextAreaElement +let wuiNotif: WuiNotif + +function main() { + wuiNotif = new WuiNotif() + + inputMsg = document.createElement("textarea") as HTMLTextAreaElement + inputMsg.id = "input_msg" + inputMsg.value = `Hello world, this is a notification with HTML format using <b>bold</b> and <u>underline</u> words.` + document.body.appendChild(inputMsg) + + let el_wrapper = document.createElement("div") + el_wrapper.style.marginTop = "10px" + document.body.appendChild(el_wrapper) + + let el_button_info = document.createElement("button") + el_button_info.innerText = "Info" + el_button_info.style.marginRight = "10px" + el_button_info.onclick = notifInfo + el_wrapper.appendChild(el_button_info) + + let el_button_error = document.createElement("button") + el_button_error.innerText = "Error" + el_button_error.onclick = notifError + el_wrapper.appendChild(el_button_error) + + document.body.appendChild(document.createElement("p")) + + let previewError = document.createElement("div") + previewError.classList.add(`${WUI_NOTIF_CLASS_ERROR}`) + previewError.innerText = `Preview of error style` + document.body.appendChild(previewError) + + let previewInfo = document.createElement("div") + previewInfo.classList.add(`${WUI_NOTIF_CLASS_INFO}`) + previewInfo.innerText = `Preview of info style` + document.body.appendChild(previewInfo) +} + +function notifInfo() { + wuiNotif.Info(inputMsg.value) +} + +function notifError() { + wuiNotif.Error(inputMsg.value) +} + +//---- + +main() diff --git a/notif/index.html b/notif/index.html new file mode 100644 index 0000000..ca9a307 --- /dev/null +++ b/notif/index.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>WUI - notif</title> + <style> + #input_msg { + width: calc(100% - 1em); + height: 4em; + } + .empty { + height: 100vh; + } + </style> + </head> + <body> + <p class="empty">Empty spaces.</p> + <script type="module" src="/notif/example.js"></script> + </body> +</html> diff --git a/notif/notif.d.ts b/notif/notif.d.ts index 612a823..ae2c331 100644 --- a/notif/notif.d.ts +++ b/notif/notif.d.ts @@ -1,3 +1,6 @@ +export declare const WUI_NOTIF_ID = "wui_notif"; +export declare const WUI_NOTIF_CLASS_INFO = "wui_notif_info"; +export declare const WUI_NOTIF_CLASS_ERROR = "wui_notif_error"; export declare class WuiNotif { private el; private timeout; diff --git a/notif/notif.ts b/notif/notif.ts index 46b96d3..8b7c4b3 100644 --- a/notif/notif.ts +++ b/notif/notif.ts @@ -2,9 +2,9 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -const WUI_NOTIF_ID = "wui_notif" -const WUI_NOTIF_CLASS_INFO = "wui_notif_info" -const WUI_NOTIF_CLASS_ERROR = "wui_notif_error" +export const WUI_NOTIF_ID = "wui_notif" +export const WUI_NOTIF_CLASS_INFO = "wui_notif_info" +export const WUI_NOTIF_CLASS_ERROR = "wui_notif_error" // // WuiNotif implement the HTML interface to display pop-up notification. |