Skip to content
Assassin edited this page Aug 14, 2021 · 4 revisions

Logo

Introduction

Alertism.js is a JavaScript Library which is used to make the default Alerts of JavaScript more beautiful and good-looking than original with some few lines of code. This is the V2.0.0 of Alertism.js by Assassin. Alertism.js is also used to make some nice Toasts means Pop-Ups.

Implementation

Let's talk about the easy implementation of Alertism.js V2.0.0 to your webpage. You just have to copy/paste the following CDN of Alertism.js V2.0.0 to your webpage. This CDN will import the Alertism.js V2.0.0 Library from it's repository on Assassin's GitHub profile to your webpage.

<script src="https://cdn.jsdelivr.net/gh/AssassinAguilar/Alertism/dist/V2.0.0/main.js"></script>

Usage

Alertism({
    alertHeading: "Heading for Alert",
    alertText: "Text for Alert."
})

That was the basic calling of the Alertism.js V2.0.0 Alerts.

WARNING:- 2 Alerts can't be used at same event listeners, So if you want to use 2 Alerts at same time. You have to use the other one in the onConfirmed like argumetns of the first one.

The main object is Alertism which contains all arguments in a form of array. Check out the following table and try to understand it carefully as you are only become able to use Alertism.js V2.0.0 after understanding the following table.

Arguments Table

Argument Argument Type Work
alertHeading String ( Text ) Heading For The Alert
alertText String ( Text ) Text For The Alert
alertHTML String ( HTML Code ) HTML Code For Alert
btnText String ( Text ) Text for Right Side Button
closeBtnText String ( Text ) Enable a Button on Left Side and Text for It
alertFooter String ( HTML Code or Text ) HTML Code or Text For Footer
enableIcon Boolean ( True or False ) Enables Icon For The Alert
icon Array Colour, Position and Type for Icon
enableInput Boolean ( True or False ) Enable Input for Alert
input Array Type ( within textarea ), Value and PlaceHolder for Input
enableCloseBtn Boolean ( True or False ) Enable a Button to Close the Alert
backdrop String ( CSS Background Code ) Change the Backdrop of The Alert
background String ( CSS Background Code ) Change the Background of The Alert
theme String Theme for The Alert
timer Int ( milliseconds ) Close the Alert automatically in the given time
position String Open the Alert at the given position
animation String Sets animation for the Alert
animationIn String Sets animation for the Alert Coming
animationOut String Sets animation for the Alert Going
onConfirmed Function A function which will work after closing the alert with confirming the following situation
onDenied Function A function which will work after closing the alert with dening the following situation
onCanceled Function A function which will work after closing the alert with canceling the following situation
onAutoClose Function A function which will work after closing the alert by the timer argument
1. All valid Positons are like top-left, center and bottom-right. Here's the list for them
  • top-left
  • top
  • top-right
  • center-left
  • center
  • center-right
  • bottom-left
  • bottom
  • bottom-right
2. All valid Animations are same as old, they just get a little bit more good and awesome. Here's the list
  • top
  • left
  • bottom
  • right
  • center

Note :- The animationOut values are same as animation values just put "-out" after animation name.

  1. All valis themes are as follows
  • light
  • dark
  • glass
  • light-neumorphism
  • dark-neumorphism
4. The icon Array arguments are as follows
{
    position: "center",
    type: "tick",
    color: "#2196f3"
}
  • All valid positions are left, center, right.
  • All valid types of icons are tick, cross, info, warning, question.
5. The input arguments are as follows
{
    type: "textarea",
    placeHolder: "Enter Your Feedback",
    value: "This is Nice."
}

A mixed example of most of the arguments of the Alertism

Alertism({
    alertHeading: "Hello",
    alertText: "Can I try to Hack your device please ? :) Do not worry I am just a beginner in Hacking, If I accidently done something wrong then nothing will happen just your data got sold :)",
    btnText: "Ok, Hack It",
    closeBtnText: "No, Please Do not",
    enableCloseBtn: true,
    enableIcon: true,
    icon: {
        type: "question"
    },
    alertFooter: "If something gone wrong, then BLAME YOURSELF !!",
    onConfirmed: () => {
        Alertism({
            alertHeading: "Hey, Thanks !",
            alertText: "Hacking Completed Successfully !! Your all data is now mine :)",
            enableIcon: true,
            theme: "light-neumorphism",
            animation: "top"
        })
    },
    onDenied: () => {
        Alertism({
            alertHeading: "Why ?",
            alertText: "If you do not want your phone to be hacked than I am leaving you but do not met me again, Bye Bye ! :(",
            enableIcon: true,
            icon: {
                type: "cross"
            },
            theme: "dark-neumorphism",
            animation: "bottom"
        })
    },
    onCanceled: () => {
        Alertism({
            alertHeading: "",
            alertText: "Why ? You Canceled it !! Are not you are my friend ? Our friendship overed !! :(",
            enableIcon: true,
            icon: {
                type: "warning"
            },
            theme: "dark",
            animation: "left"
        })
    },
    theme: "glass",
    animation: "zoom-in"
})

Toast

Alertism.js V2.0.0 also makes Toasts means Pop-Ups, Let's have a look on it's table to understand it properly. The main object in this is Toast which contains all the arguments in the form of an array

Arguments Table

Arguments Arguments Type Work
text String ( Text ) Text For The Toast
background String ( CSS Background Code ) Background For The Toast
color String ( Color ) Colour of Text For Toast
theme String Theme For The Toast
position String Open the Toast at the given position
enableIcon Boolean ( True or False ) Enable Icon For Toast
icon Array Colour and Type For Toast
showTimeLine Boolean ( True or False ) Enable Time Bar For The Toast
timer Int ( in milliseconds ) Close Toast in the given time
animation String Sets animation For The Toast
onClose Function A function which will work after closing the Toast
All the valid positions, themes, animations and icon array are same as Alerts. Just remember the following
  • Position in icon Array isn't available
  • Make the First letter capital in the animations

Note:- The timer for the Toasts are setted to 500 milliseconds more for the perfect animation of the time bar, If you aslo want perfect timing of the toasts going then enter the timer value to 500 milliseconds less than you want.

A mixed example of most of the arguments of the Toast

Toast({
    position: 'top-right',
    showTimeLine: true,
    enableIcon: true,
    icon: {
    type: 'info',
    color: '#2196f3'
    },
    animation: 'Right',
    theme: 'glass',
    timer: 4500,
    onClose: () => {
        Toast({
            text: 'I am a Toast which comes on the onClose argument of the other one',
            enableIcon: true,
            position: 'top-left',
            animation: 'Left',
            showTimeLine: true,
            theme: 'dark-neumorphism',
            timer: 4500
       })
    }
})
Clone this wiki locally