Fork me on GitHub

AST Notif


When the original JS Alert needs treatments.

AST Dialog


This is the main purpose of making this library, replacing the old school JS alert.
No JQuery needed, written in pure JS. :)

AstNotif.dialog("Caution!", "Hai Dunia! :D");

API


AstNotif.dialog(title: string, message: string, options[optional]: object, callbackOK: function, callbackCancel: function);

Options


Option Description
color Dialog text color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgheadcolor Background header color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgbodycolor Background body color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgfootcolor Background footer color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
icon Will dialog show icon?
Argument: Booelan, true/false.
imgIcon If dialog icon using image.
Argument: String path e.g: "../your/path/image.png"
iconSize The size of the icon.
Argument: Integer. Read as pixel.
positive Dialog button OK.
Argument: String, default: "OK"
negative Dialog button cancel.
Argument: String, default: "cancel"
fa Supports font awesome icon.
Argument: Font awesome string, without "fa-". So "fa-money" is just "money".
dismissible Enables user to close the dialog by clicking the backdrop.
Argument: Boolean, default: true

AST Poster


This is the brand new version of dialog, quite modern and extremely similar to dialog. But without the title and you can make your own html content in the message.

AstNotif.poster("<h3>Hai Dunia! :D 😊</h3>");

API


AstNotif.poster(message: string or HTML content string, options[optional]: object, callbackOK: function, callbackCancel: function);

Options


Option Description
color Dialog text color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgcolor Poster background color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
icon Will dialog show icon?
Argument: Booelan, true/false.
imgIcon If dialog icon using image.
Argument: String path e.g: "../your/path/image.png"
iconSize The size of the icon.
Argument: Integer. Read as pixel.
positive Dialog button OK.
Argument: String, default: "OK"
negative Dialog button cancel.
Argument: String, default: "cancel"
fa Supports font awesome icon.
Argument: Font awesome string, without "fa-". So "fa-money" is just "money".
dismissible Enables user to close the poster by clicking the backdrop.
Argument: Boolean, default: true

AST Toast


It just like a toast on your Android smartphone, with customizable color and others. :)

AstNotif.toast("Hai Dunia! :D");

API


AstNotif.toast(message: string, options[optional]: object);

Options


Option Description
length How long Toast will show.
Argument: Integer in milliseconds or "SHORT"/"LONG"
color Toast text color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgcolor Toast background color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
reverseColor Reverse background and text color, suitable if you want night mode for example.
Argument: Boolean. Default is false.
alpha Toast opacity or transparancy.
Argument: Float number from 0 to 1.
borderRadius Set Toast corner roundness.
Argument: Integer or string that followed by "px" or "%". Integer is read as pixel (px). E.g: 50 or "40px" or "10%"
vdist Set Toast vertical distance relative position after margin.
Argument: Integer, read as pixel (px). Use minus for opposite use. (Doesn't apply to center ("c") position)
hdist Set Toast horizontal distance relative position after margin.
Argument: Integer, read as pixel (px). Use minus for opposite use. (Doesn't apply to center ("c") position)
margin Set Toast margin relative to screen.
Argument: Integer, read as pixel (px).
position Set Toast position in 8 wind directions.
Argument: Insensitive String, "n", "ne", "e", "se", "s", "sw", "w", "nw", and "c" for position of the center of the screen. Default "s".

AST Snackbar


It just like a snackbar on your Android smartphone, with customizable color and others. :)

AstNotif.snackbar("Hai Dunia! :D");

API


AstNotif.snackbar(message: string, options[optional]: object, action/callback: function);

Options


Option Description
length How long Snackbar will show.
Argument: Integer in milliseconds or "SHORT"/"LONG"
color Snackbar text color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgcolor Snackbar background color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
btncolor Snackbar button color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
button Button text.
Argument: Text string, button will not show if you leave this empty.
fa Supports font awesome icon.
Argument: Font awesome string, without "fa-". So "fa-money" is just "money".
reverseColor Reverse background and text color, suitable if you want night mode for example.
Argument: Boolean. Default is false.
position Snackbar position.
Argument: "top" or "bottom". Default is "bottom".

AST Notify


If you are a Windows user, you should be familiar with this. :)

AstNotif.notify("The Title", "Hai Dunia! :D", "now");

API


AstNotif.notify(title: string, message: string, footer: string, options[optional]: object, callback: function);

Options


Option Description
length How long notif box will show.
Argument: Integer in milliseconds or "SHORT"/"LONG", -1 for stay forever.
color Notif box text color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
bgcolor Notif box theme color.
Argument: Hex color string or rgb, e.g: "#02BAF2"
icon Will notif box show icon?
Argument: Booelan, true/false.
imgIcon If notif box icon using image.
Argument: String path e.g: "../your/path/image.png"
fa Supports font awesome icon.
Argument: Font awesome string, without "fa-". So "fa-money" is just "money".
position Opacity or transparancy.
Argument: String, "left" or "right". Default is "right"
alpha Opacity or transparancy.
Argument: Float number from 0 to 1.

Examples & Extras


A semi playground you will enjoy. :)

Choose a theme (just like a bootstrap ones):
IMPORTANT! As per this version (v0.1), setting the theme in individual module would affect the current module only. If you want to change the whole theme, use astn.theme.set(theTheme). See "Main Settings" section on the left.


AST Dialog


Title: Travel Caution!
Message: Jakarta is very good city. You should visit it!
AstNotif.dialog("Travel Caution!", "Jakarta is very good city. You should visit it!", options[optional]: object);

AST Poster


Message (can use HTML content): <h3>Jakarta is very good city. You should visit it!</h3>
AstNotif.poster("Travel Caution!", "<h3>Jakarta is very good city. You should visit it!</h3>", options[optional]: object);

AST Toast


Text: Jakarta is very good city. You should visit it!
AstNotif.toast("Jakarta is very good city. You should visit it!", options[optional]: object);

AST Snackbar


Text: Jakarta is very good city. You should visit it!
AstNotif.snackbar("Jakarta is very good city. You should visit it!", options[optional]: object);

AST Notify


Header: Travel Caution!
Message: Jakarta is very good city. You should visit it!

Main Settings


There's also a get and set to the whole settings. Like, when you want set a general theme for the whole notification modules or like when you want to change the Z Index so that it would always the top, just like CSS z-index.


API


AstNotif.theme.set(Theme :String)
Set the theme. Available theme: "Default", "Danger", "Info", "Success", "Warning", "Primary", and "Dark".
AstNotif.theme.get()
Return the string of current theme.
AstNotif.zIndex.set(zIndex :int)
Set the Z Index.
AstNotif.zIndex.get()
Get the current global Z Index of this library.

Notes


Thank you for using my library.
Works fine on IE 9, I guess.
But there're some important notes you should notice.


This library, does not using new constructor. So, any changes you've made for the options are permanent unless you refresh the page. Thanks for understanding. :)

OH


There's also an alias for this library. You can just use
astn
instead of
AstNotif
just like jQuery that using
$
instead of
jQuery
.

Download on Github


Thank you for using my library. Click this:
AST Notif download page.


Contact


You can send email to anandastoon@gmail.com if you have any complaints or suggestions. Thank you for using my library, hope it can help everyone..

Release Notes


  • 0.1.2
  • CHANGED

    Fix: Poster and Dialog backdrop click event not bubbling up anymore.
    Fix: Poster can't have negative button callback. Worked now.
    Fix: Toast and Snackbar can now use reverseColor option after global theming feature added.
  • 0.1.1
  • ADDED

    Dialog: Add dismissible option.
    Poster: Add dismissible option.

    CHANGED

    Theme: Fix dark theme for several modules.
  • 0.1
  • ADDED

    Poster: The brand new notification family.
    AstNotif: Main Settings for zIndex and theme.

    CHANGED

    Theme: Adding theme option per module now can affect individual notification only instead of global.
    Assign length option for Toast, Snackbar, and Notify now case insensitive. You can either insert "short" or "SHORT" or "ShOrT".
  • 0.0.5
  • CHANGED

    Toast: Rename top option to vdist.
    Toast: Rename left option to hdist.
    Toast: Rename padding option to margin.
  • 0.0.4
  • ADDED

    Notify: Left position.

    CHANGED

    Notify: Click to close for non-permanent notify.
  • 0.0.3
  • ADDED

    Dialog: Icon size.
    Toast: Left position option.
    Toast: Padding option.
    Toast: Positioning option by 8 wind directions.

    CHANGED

    Dialog: Set default icon size to 48px.
    Toast: Rename bottom option to top.
  • 0.0.2
  • ADDED

    Toast: Add bottom position option.
  • 0.0.1
  • Initial release.