Feature-rich Web Notification Library – AST-Notif

Category: Javascript , Notification | September 13, 2020
Author:anandastoon
Views Total:77 views
Official Page:Go to website
Last Update:September 13, 2020
License:MIT

Preview:

Feature-rich Web Notification Library – AST-Notif

Description:

AST-Notif is a simple yet feature-rich notification library to create alert dialog, Microsoft style growl notifications, and Android Material style toasts & snackbars on the web.

How to use it:

1. Put the stylesheet ast-notif.css and JavaScript ast-notif.js on the HTML page.

<link rel="stylesheet" href="css/ast-notif.css" />
<script src="js/ast-notif.js"></script>

2. Create an alert dialog with AstNotif.dialog() function. Possible parameters:

AST-Notif Alert Dialog

  • title: title
  • message: message
  • options: options object
  • callbackOK: callback function
  • callbackCancel: callback function
// AstNotif.dialog(title: string, message: string, options[optional]: object, callbackOK: function, callbackCancel: function);
AstNotif.dialog('Alert Title', 'Alert Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
  theme: 'default',
  bgheadcolor: THEMES.DEFAULT.bgcolor,
  bgbodycolor: "white",
  bgfootercolor: "white",
  color: THEMES.DEFAULT.color,
  // Has icons?
  icon: true,
  // Custom icon image
  imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_hitam_garis.png",
  // Icon size
  iconSize: "48px",
  // OK button text
  positive: "OK",
  // Cancel button text
  negative: "Cancel",
  // Font awesome class without "fa-"
  fa: "",
  // Efek lebay *special effect
  lebayify: 0
});

3. Create an Android inspired toast message with AstNotif.toast() function.

AST-Notif Toast

// AstNotif.toast(message: string, options[optional]: object);
AstNotif.toast('Toast Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default' 
  theme: 'default',
  // Time length, or whatever its called until the toast is gone.
  length: 2000,
  // Background and text color
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // Reverse color
  reverseColor: false,
  // Transparency
  alpha: 1,
  // Border radius
  borderRadius: 10,
  // Bottom position, minus for top position
  vdist: 10,
  // Left position
  hdist: 10,
  // Margin
  margin: 10,
  // Position (cardinal point)
  position: "s",
  // Efek lebay *special effect
  lebayify: 0
});

4. Create an Android inspired snackbar with AstNotif.snackbar() function.

AST-Notif Snackbar

AstNotif.snackbar(message: string, options[optional]: object, action/callback: function);
AstNotif.snackbar('Snackbar Message', {
  // 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default' 
  theme: 'default',
  // Snack position, either top or bottom.
  position: "bottom",
  // Time length, or whatever its called until the snack is gone.
  length: 2000,
  // Background and text color
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // Button color
  btncolor: THEMES.DEFAULT.btncolor,
  // Reverse color
  reverseColor: false,
  // Font awesome class without "fa-"
  fa: "",
  button: "",
  // Efek lebay *special effect
  lebayify: 0
});

5. Create a Microsoft Windows style growl notification with AstNotif.notify() function.

AST-Notif Notify Window

AstNotif.notify(title: string, message: string, footer: string, options[optional]: object, callback: function);
AstNotif.notify('Notify Title', 'Notify Message', {
  // Background and text color
  bgcolor: THEMES.DEFAULT.color,
  color: THEMES.DEFAULT.bgcolor,
  // Using icon?
  icon: true,
  // Custom icon image
  imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_putih_garis.png",
  // Font awesome, please strip the "fa-" from the argument
  fa: "",
  // Length the notify object, -1 for stay forever
  length: 2000,
  // Transparency
  alpha: 0.8,
  // Efek lebay *special effect
  lebayify: 0,
  // Position
  position: "right"
});

Changelog:

v0.0.5 (09/13/2020)

  • Renamed options
  • Bugfixes

You Might Be Interested In:


Leave a Reply