fvuarjs
v0.0.5
Published
Fast Visual User Alerts Resource
Downloads
43
Maintainers
ahmetcanisikReadme
fvuarJS v0.0.5
Create your alert messages with fvuarJS!
This is an example of the alert messages you created with us:
Fvuar.new({
text: "This is alert without taking advantage of fvuarJS.",
})Installation
NPM
Paste these codes into the terminal where you are sure you are in your project directory. It will include the latest version of fvuarjs as a package for you in your project. or yarn add fvuarjs
npm install fvuarjs@latestCDN
Copy this script and paste your html file.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/fvuar.min.js"></script>Examples
Basic Example in React
import { Fvuar } from 'fvuarjs';
const App = () => {
Fvuar.configure({
MAXTIME: 10
})
const showAlert = () => {
Fvuar.new({
theme: "success",
position: "top-right",
text: "This is a message of success!",
time: 10, // time
css: { backgroundColor: 'lightgreen', color: 'darkgreen' }, // If you don't like our theme, you can add your own css rules, most css rules are available.
clickToClose: true
});
};
return (
<div>
<button onClick={showAlert}>Show Alert</button>
</div>
);
};
export default App;Basic Example CDN
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include css file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/fvuar.min.css" />
</head>
<body>
<button type="button" id="copy">Copy clipboard</button>
<!-- include js file -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/fvuar.min.js"></script>
<script>
const copyBtn = document.getElementById('copy');
copyBtn.addEventListener('click', () => {
Fvuar.new({
text: 'Copied!', // The text to display on the alert.
theme: 'success', // Alert theme, this could also be one of these: error, orange, info, default, warning
position: 'top-center', // The alert location will be displayed at the top and far right of the page.
displayTime: 3 // Alert's existence time.
});
});
</script>
</body>
</html>The use of (Deprecated as of version 0.0.5)~~copy()~~ function is as in the example below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<button type="button" id="copy">Copy clipboard</button>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/fvuar.min.js"></script>
<script>
const fv = new Fvuar();
const copyBtn = document.getElementById('copy');
copyBtn.addEventListener('click', () => {
fv.copy(copyBtn, true, {
text: 'Copied!', // The text to display on the alert.
theme: 'success', // Alert theme, this could also be one of these: error, orange, info, default, warning
position: 'top-center', // The alert location will be displayed at the top and far right of the page.
displayTime: 3 // Alert's existence time.
});
});
</script>
</body>
</html>| Methods | Parameters | Details |
|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| configure() | MAXCOUNT, MAXTIME, DEFAULTTIME, DEFAULTTHEME, DEFAULTPOSITION, CPALERT, ALERTOFFSET, CLOSEMETHOD, HOVERTOTOP, CLICKTOCLOSE, MULTIPLY | - MAXCOUNT: Determine the maximum number of alerts to be shown on the page. --default value: 4 - MAXTIME: Set the maximum time that alerts will remain on the screen. --default value: 4 - DEFAULTTIME: Determine the time that alerts will remain on the screen, --default value: 4 - DEFAULTTHEME: It determines the default theme of the alerts on the screen, --default value: "default" - DEFAULTPOSITION: It determines the default location of alerts on the screen, --default value: "top-right" - CPALERT: It takes two values: true or false, if true, the copy function also calls alert. If false, it does not call. --default value: false - ALERTOFFSET: You set the distance between alerts (in px) --default value: 70 - CLOSEMETHOD: How to turn off alerts? you specify. The value you give will be processed as an event in addEventListener. --default value: "click" - HOVERTOTOP: When alerts overlap, the bottom one may not be visible. To fix this situation, set this value to true. This setting highlights the alert you hover over. --default value: false - CLICKTOCLOSE: If you want alerts to close when clicked before they expire, set this property to true. --default value: true - MULTIPLY: If you want to prevent the old alert from disappearing every time you request a new alert. If you do not want this setting? Set it to true. Is this setting the same on the screen? Allows more than one alert to appear at a time. --default value: false - |
| new() | theme, position, text, displayTime, css, clickToClose | - theme: You can determine the theme of your alert by choosing one of the following types: success, default, error, orange, info, warning. --default value : "default" - text: The articles you want to appear in the alert will be located here. --default value : "Your Alert is here!" - position: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right --default value : "top-right" - displayTime: You can specify the survival time of your alert (the value in seconds you enter, after which the alert will disappear). --default value: 4 - css: You can change the alert CSS rules you don't like according to your needs. It supports all javascript style reference features. --default value : none. - clickToClose: If you want alerts to close when clicked before they expire, set this property to true. --default value: true |
| ~~copy()~~ | ~~target, alert, alertOptions~~ | - ~~target: If you give the target itself or its id, the copy() function copies the text in that targeted element for you. --default value : none - alert: If you want to show alert, set true here. See the next parameter to change alert settings. --default value: false - alertOptions: To access here, you must provide true in the previous parameter. It is the parameter where you can set alerts. It takes an object and supports all new() function parameters. --default value: new() function parameters~~ |
What's next?
- [x] minify-js should release its compressed version.
- [x] A piece of code will be added that will allow the user to change the warning message location according to his needs.
- [x] While you can select the copy() function with its id, now you can make a selection with its id, its class and itself.
- [ ] Color codes will be rearranged according to dark and light themes.
- [ ] A code will be added so that the user can change the color of the text on the alert to the color he/she chooses.
- [ ] A piece of code will be added where the user can change the font size as he wishes.
- [ ] There will be a restriction on the maximum value of the text on the Alert close button.
- [ ] An animation will be added to Alert's existence and disappearance using css.