Astronaut Library .js

Notify

A small library for notification messages in your Projects or Web Applications.

Download Notify v1.0.0
Download Library Complete v1.0.0

How to use:

index.html
<script src="src/js/astronaut.notify.js"></script>
script.js
//'astronaut.', 'astlibjs.' or 'ast.' can be used!
astronaut.notify({
  message: 'Hi Dev! -> Welcome to Astronaut Library',
  icon: 'src/img/astronaut.head.svg',
  style: {
    iconSize: '80%',
    position: 'bottom -> right'
  },
  theme: 'dark',
})

Opções:

Option Type Values Description
message: String text Define the Message
icon: String url or <svg> Define an Icon
link: Object {object} Define Links
type: String text Defines the notification type
theme: String text Define theme dark
style: Object {object} Define your own notification style
autoClose: Boolean/Number true/miliseconds Sets automatic closing

Message:

Set the main message

script.js
astronaut.notify({
  message: 'Main message'
})

Use "->" to set a secondary message

script.js
astronaut.notify({
  message: 'Main message -> Secondary message'
})

Icon:

Define an Icon with URL

script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: 'https://astlibjs.ga/src/img/icon/128x128.png'
})

Define an Icon with tag SVG

script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"></path></svg>'
})

Define an Icon with others tags HTML too

script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: '<i class="gg-coffee"></i>'
})

Type:

Define specific types/colors for message

Accepted values: 'warn', 'error', 'off', 'success' -> Default

script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: '<i class="gg-coffee"></i>',
  type: 'error'
})

Theme:

Define theme dark

script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: '<i class="gg-coffee"></i>',
  theme: 'dark'
})

Style:

Define your own notification style

Option Type Default Description
position: String 'top -> left' Change the position of the notification on the screen,
Other options : 'top -> right', 'bottom -> right'
or 'bottom -> left'
background: String '#fff' Change background color, other option '#ffffff85 -> 2px',
Second parameter is optional, he declare background blur
color: String '#878787' Change font color
border: String '#2ecc71' Change border color
margin: String '2rem 2rem' Notification distance from the sides of the screen
iconColor: String '#fff' Change icon color
iconBackground: String '#2ecc71' Change icon background
iconSize: String '2.2rem' Change icon size
closeColor: String '#878787' Change icon 'close' color
closeBackground: String '#f2f2f2' Change icon 'close' background
closeSize: String '0.8rem' Change icon 'close' size
filter: String 'none' Add a filter to the notification
timeout: String '0.5s' Notification appearance animation time
script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: 'src/img/astronaut.head.svg',
  style: {
    background: '#574b8799 -> 5px', //Example with background blur
    color: '#e9e9e9',
    iconSize: '80%',
    iconBackground: '#3b395c',
    border: '#e9e9e9',
    closeColor: '#574b87'
  }
})

Tip: If you want to define a default style for all your notifications, define a variable in your main script file or script tag before any notify call. to store your styles.

script.js
var styleForNotify = {
   background: '#574b8799 -> 5px', //Example with background blur
   color: '#e9e9e9',
   iconSize: '80%',
   iconBackground: '#3b395c',
   border: '#e9e9e9',
   closeColor: '#574b87'
 };

 astronaut.notify({
   message: 'Main message -> Secondary message',
   icon: 'src/img/astronaut.head.svg',
   style: styleForNotify
 })

Auto Close:

Sets automatic closing, You can set the values to true or in milliseconds

Default value: false, default time: 5000 = 5 seconds

script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: 'src/img/astronaut.head.svg',
  style: {
    iconSize: '80%',
  },
  autoClose: true //true or time in milisecond Ex: (1000)
})
script.js
astronaut.notify({
  message: 'Main message -> Secondary message',
  icon: 'src/img/astronaut.head.svg',
  style: {
    iconSize: '80%',
  },
  autoClose: 1000 //true or time in milisecond Ex: (1000)
})