Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/assassinaguilar/alertism
A Good Replacement For Default JavaScript Alerts Which Also Makes Good Pop-Ups
https://github.com/assassinaguilar/alertism
alert-library alerts customizable dialog javascript js-library modules npm popup-dialog popups toasts
Last synced: 24 days ago
JSON representation
A Good Replacement For Default JavaScript Alerts Which Also Makes Good Pop-Ups
- Host: GitHub
- URL: https://github.com/assassinaguilar/alertism
- Owner: AssassinAguilar
- License: apache-2.0
- Created: 2021-01-26T09:23:33.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-28T17:07:25.000Z (over 2 years ago)
- Last Synced: 2024-12-03T03:09:48.154Z (24 days ago)
- Topics: alert-library, alerts, customizable, dialog, javascript, js-library, modules, npm, popup-dialog, popups, toasts
- Language: JavaScript
- Homepage: https://alertism.js.org
- Size: 549 KB
- Stars: 20
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://npmjs.com/package/alertism)
### 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.
```html
```
or via npm
```
npm i alertism --save
```
then
```javascript
import { Alertism, Toast } from "node_modules/alertism/alertism.js";
```
# Usage
```javascript
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._**
3. All valis themes are as follows
-
light
-
dark
-
glass
-
light-neumorphism
-
dark-neumorphism
4. The icon Array arguments are as follows
```javascript
{
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
```javascript
{
type: "textarea",
placeHolder: "Enter Your Feedback",
value: "This is Nice."
}
```
A mixed example of most of the arguments of the Alertism
```javascript
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
```javascript
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
})
}
})
```
#### **Docs of V1.0.0 :- [https://code.sololearn.com/WxvT30Psiaqz/?ref=app](https://code.sololearn.com/WxvT30Psiaqz/?ref=app)**
