diff options
| -rw-r--r-- | notif/example.html | 51 | ||||
| -rw-r--r-- | notif/notif.d.ts | 8 | ||||
| -rw-r--r-- | notif/notif.js | 55 | ||||
| -rw-r--r-- | notif/notif.ts | 77 |
4 files changed, 191 insertions, 0 deletions
diff --git a/notif/example.html b/notif/example.html new file mode 100644 index 0000000..681a951 --- /dev/null +++ b/notif/example.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>WUI - notif</title> + <style> + .test-1 { + width: 80%; + height: 4em; + border: 2px solid salmon; + background-color: lightsalmon; + margin-bottom: 1em; + } + .test-2 { + width: 80%; + height: 4em; + border: 2px solid silver; + background-color: honeydew; + margin-bottom: 1em; + } + </style> + </head> + <body onload="main()"> + <input id="notif.msg"></input> + <button onclick="notifInfo()">Info</button> + <button onclick="notifError()">Error</button> + + <br/> + <br/> + <div class="test-1"></div> + <div class="test-2"></div> + <script> + var exports = {} + let inputMsg = document.getElementById("notif.msg") + let wuiNotif = null + </script> + <script src="notif.js"></script> + <script> + function main() { + wuiNotif = new WuiNotif() + inputMsg.value = `test <b>bold</b>` + } + function notifInfo() { + wuiNotif.Info(inputMsg.value) + } + function notifError() { + wuiNotif.Error(inputMsg.value) + } + </script> + </body> +</html> diff --git a/notif/notif.d.ts b/notif/notif.d.ts new file mode 100644 index 0000000..612a823 --- /dev/null +++ b/notif/notif.d.ts @@ -0,0 +1,8 @@ +export declare class WuiNotif { + private el; + private timeout; + constructor(); + Info(msg: string): void; + Error(msg: string): void; + private initStyle; +} diff --git a/notif/notif.js b/notif/notif.js new file mode 100644 index 0000000..084ddfc --- /dev/null +++ b/notif/notif.js @@ -0,0 +1,55 @@ +"use strict"; +// Copyright 2021, Shulhan <ms@kilabit.info>. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. +exports.__esModule = true; +exports.WuiNotif = void 0; +var WUI_NOTIF_ID = "wui-notif"; +var WUI_NOTIF_CLASS_INFO = "wui-notif-info"; +var WUI_NOTIF_CLASS_ERROR = "wui-notif-error"; +// +// WuiNotif implement the HTML interface to display pop-up notification. +// The notification can be triggered by calling method Info() or Error(). +// Each pop-up has 5 seconds duration, after that they will be removed +// automatically. +// +var WuiNotif = /** @class */ (function () { + function WuiNotif() { + this.timeout = 5000; // 5 seconds timeout + this.el = document.createElement("div"); + this.el.id = WUI_NOTIF_ID; + document.body.appendChild(this.el); + this.initStyle(); + } + // Info show the msg as information. + WuiNotif.prototype.Info = function (msg) { + var _this = this; + var item = document.createElement("div"); + item.innerHTML = msg; + item.classList.add(WUI_NOTIF_CLASS_INFO); + this.el.appendChild(item); + setTimeout(function () { + _this.el.removeChild(item); + }, this.timeout); + }; + // Info show the msg as an error. + WuiNotif.prototype.Error = function (msg) { + var _this = this; + var item = document.createElement("div"); + item.innerHTML = msg; + item.classList.add(WUI_NOTIF_CLASS_ERROR); + this.el.appendChild(item); + setTimeout(function () { + _this.el.removeChild(item); + }, this.timeout); + }; + WuiNotif.prototype.initStyle = function () { + var style = document.createElement("style"); + style.type = "text/css"; + style.innerText = "\n\t\t\t#wui-notif {\n\t\t\t\tleft: 10%;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 1em;\n\t\t\t\twidth: 80%;\n\t\t\t}\n\t\t\t#wui-notif > ." + WUI_NOTIF_CLASS_INFO + " {\n\t\t\t\tborder: 1px solid silver;\n\t\t\t\tbackground-color: honeydew;\n\t\t\t\tmargin-bottom: 1em;\n\t\t\t\tpadding: 1em;\n\t\t\t}\n\t\t\t#wui-notif > ." + WUI_NOTIF_CLASS_ERROR + " {\n\t\t\t\tborder: 1px solid salmon;\n\t\t\t\tbackground-color: lightsalmon;\n\t\t\t\tmargin-bottom: 1em;\n\t\t\t\tpadding: 1em;\n\t\t\t}\n\t\t"; + document.head.appendChild(style); + }; + return WuiNotif; +}()); +exports.WuiNotif = WuiNotif; +//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWYuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJub3RpZi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsa0VBQWtFO0FBQ2xFLHlFQUF5RTtBQUN6RSw2QkFBNkI7OztBQUU3QixJQUFNLFlBQVksR0FBRyxXQUFXLENBQUE7QUFDaEMsSUFBTSxvQkFBb0IsR0FBRyxnQkFBZ0IsQ0FBQTtBQUM3QyxJQUFNLHFCQUFxQixHQUFHLGlCQUFpQixDQUFBO0FBRS9DLEVBQUU7QUFDRix3RUFBd0U7QUFDeEUseUVBQXlFO0FBQ3pFLHNFQUFzRTtBQUN0RSxpQkFBaUI7QUFDakIsRUFBRTtBQUNGO0lBSUM7UUFGUSxZQUFPLEdBQVcsSUFBSSxDQUFBLENBQUMsb0JBQW9CO1FBR2xELElBQUksQ0FBQyxFQUFFLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUN2QyxJQUFJLENBQUMsRUFBRSxDQUFDLEVBQUUsR0FBRyxZQUFZLENBQUE7UUFFekIsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFBO1FBRWxDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQTtJQUNqQixDQUFDO0lBRUQsb0NBQW9DO0lBQ3BDLHVCQUFJLEdBQUosVUFBSyxHQUFXO1FBQWhCLGlCQVNDO1FBUkEsSUFBSSxJQUFJLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQTtRQUN4QyxJQUFJLENBQUMsU0FBUyxHQUFHLEdBQUcsQ0FBQTtRQUNwQixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFBO1FBQ3hDLElBQUksQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFBO1FBRXpCLFVBQVUsQ0FBQztZQUNWLEtBQUksQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFBO1FBQzFCLENBQUMsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUE7SUFDakIsQ0FBQztJQUVELGlDQUFpQztJQUNqQyx3QkFBSyxHQUFMLFVBQU0sR0FBVztRQUFqQixpQkFTQztRQVJBLElBQUksSUFBSSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDeEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUE7UUFDcEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMscUJBQXFCLENBQUMsQ0FBQTtRQUN6QyxJQUFJLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUV6QixVQUFVLENBQUM7WUFDVixLQUFJLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUMxQixDQUFDLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFBO0lBQ2pCLENBQUM7SUFFTyw0QkFBUyxHQUFqQjtRQUNDLElBQUksS0FBSyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUE7UUFDM0MsS0FBSyxDQUFDLElBQUksR0FBRyxVQUFVLENBQUE7UUFDdkIsS0FBSyxDQUFDLFNBQVMsR0FBRyxpSkFPRCxvQkFBb0IscUtBTXBCLHFCQUFxQixxSkFNckMsQ0FBQTtRQUNELFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFBO0lBQ2pDLENBQUM7SUFDRixlQUFDO0FBQUQsQ0FBQyxBQTlERCxJQThEQztBQTlEWSw0QkFBUSJ9
\ No newline at end of file diff --git a/notif/notif.ts b/notif/notif.ts new file mode 100644 index 0000000..f3ec4c4 --- /dev/null +++ b/notif/notif.ts @@ -0,0 +1,77 @@ +// Copyright 2021, Shulhan <ms@kilabit.info>. All rights reserved. +// 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" + +// +// WuiNotif implement the HTML interface to display pop-up notification. +// The notification can be triggered by calling method Info() or Error(). +// Each pop-up has 5 seconds duration, after that they will be removed +// automatically. +// +export class WuiNotif { + private el: HTMLElement + private timeout: number = 5000 // 5 seconds timeout + + constructor() { + this.el = document.createElement("div") + this.el.id = WUI_NOTIF_ID + + document.body.appendChild(this.el) + + this.initStyle() + } + + // Info show the msg as information. + Info(msg: string) { + let item = document.createElement("div") + item.innerHTML = msg + item.classList.add(WUI_NOTIF_CLASS_INFO) + this.el.appendChild(item) + + setTimeout(() => { + this.el.removeChild(item) + }, this.timeout) + } + + // Info show the msg as an error. + Error(msg: string) { + let item = document.createElement("div") + item.innerHTML = msg + item.classList.add(WUI_NOTIF_CLASS_ERROR) + this.el.appendChild(item) + + setTimeout(() => { + this.el.removeChild(item) + }, this.timeout) + } + + private initStyle() { + let style = document.createElement("style") + style.type = "text/css" + style.innerText = ` + #wui-notif { + left: 10%; + position: absolute; + top: 1em; + width: 80%; + } + #wui-notif > .${WUI_NOTIF_CLASS_INFO} { + border: 1px solid silver; + background-color: honeydew; + margin-bottom: 1em; + padding: 1em; + } + #wui-notif > .${WUI_NOTIF_CLASS_ERROR} { + border: 1px solid salmon; + background-color: lightsalmon; + margin-bottom: 1em; + padding: 1em; + } + ` + document.head.appendChild(style) + } +} |