From e3da79cf1adfb6dc2d9fed2e982bcde7fe7a7161 Mon Sep 17 00:00:00 2001 From: Shulhan Date: Sun, 5 Sep 2021 22:46:05 +0700 Subject: notif: convert the example using TypeScript and load it with type="module" --- index.html | 1 + notif/example.d.ts | 1 + notif/example.html | 51 --------------------------------------------------- notif/example.ts | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ notif/index.html | 20 ++++++++++++++++++++ notif/notif.d.ts | 3 +++ notif/notif.ts | 6 +++--- 7 files changed, 80 insertions(+), 54 deletions(-) create mode 100644 notif/example.d.ts delete mode 100644 notif/example.html create mode 100644 notif/example.ts create mode 100644 notif/index.html diff --git a/index.html b/index.html index f0be1a4..c82c94c 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@

Editor

Input

+

Notification

VFS

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 @@ - - - - - WUI - notif - - - -

Empty spaces.

- - -

- - - - - 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 bold and underline 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 @@ + + + + + WUI - notif + + + +

Empty spaces.

+ + + 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. -- cgit v1.3