Skip to content

Commit

Permalink
Merge pull request #1 from nimajneBG/improvements
Browse files Browse the repository at this point in the history 
Improvements
  • Loading branch information
@nimajneBG
nimajneBG authored Feb 14, 2021
2 parents 00d1e4b + 6591ccf commit c259abe
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 106 deletions.
52 changes: 36 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vanilla JS and CSS Pop-up library

[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://lbesson.mit-license.org/)  [![GitHub release](https://img.shields.io/github/release/nimajneBG/Pop-up-Library.svg?style=for-the-badge)](https://github.com/nimajneBG/Pop-up-Library)
[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://lbesson.mit-license.org/)  [![GitHub release](https://img.shields.io/github/release/nimajneBG/Pop-up-Library.svg?style=for-the-badge)](https://github.com/nimajneBG/Pop-up-Library)  ![Using JS](https://img.shields.io/badge/Unsing-JS-green?style=for-the-badge)  ![Using CSS](https://img.shields.io/badge/Unsing-CSS-green?style=for-the-badge)

Library for pop-ups and toasts that look much nicer than `alert()`.
<!--Hello-->
Expand All @@ -12,6 +12,8 @@ You don't need any special HTML, because the required HTML is generated automati

## Usage
### Include the library

**Normal files**
```HTML
<!--Include the CSS-->
<link rel="stylesheet" href="pop-up.css">
Expand All @@ -20,11 +22,28 @@ You don't need any special HTML, because the required HTML is generated automati
<script src="pop-up.js"></script>
```

**Minified files**
```HTML
<!--Include the CSS-->
<link rel="stylesheet" href="pop-up.min.css">

<!--Include the library-->
<script src="pop-up.min.js"></script>
```

### Use the predefined functions for pop-ups
```JavaScript
popUpInfo("Message"); //Displays an information pop-up with an OK button and a close button.
popUpError("Error message"); //Displays an error pop-up with an OK button and a close button.
popUpConfirm("Question");
popUpConfirm("Question").then((result) => {
if (result == "ok") {
//What should happen if ok was pressed
} else if (result == "cancel") {
//What should happen if cancel was pressed
}
}).catch((err) => {
console.error(err); //What should happen if something goes wrong
});
/*Displays an confirm pop-up with an OK button and a cancel button.
Returns a promise which gets fulfilled when the user clicks one of the buttons.
The promise returns "ok" or "cancel".*/
Expand All @@ -34,25 +53,25 @@ The promise returns "ok" or "cancel".*/
```HTML
<!--Create Pop-up-->
<script type="text/javascript">
var p = new PopUp({
let p = new PopUp({
"message" : "Lorem ipsum dolor sit amet", //Set the message in the pop-up
"ok" : true, //Set if there should be a OK button
"cancel" : true, //Set if there should be a cancel button
"custom" : false, //Set if there should be a custom button
"close" : true, //Set if there should be a close button ("x")
"ok" : true, //Set whether there should be a OK button
"cancel" : true, //Set whether there should be a cancel button
"custom" : false, //Set whether there should be a custom button
"close" : true, //Set whether there should be a close button ("x")
"text" : "custom button text", //Set the text for your custom button
"icon" : "📣" //Set the emoji which should be used as icon
});
p.create().then(function(result) {
p.create().then((result) => {
if (result == "ok") {
//What should happen if ok was pressed
} else if (result == "cancel") {
//What should happen if cancel was pressed
} else if (result == "custom") {
//What should happen if the custom button was pressed
}
}, function(err) {
}).catch((err) => {
console.error(err); //What should happen if something goes wrong
});
</script>
Expand All @@ -62,13 +81,14 @@ The promise returns "ok" or "cancel".*/
```HTML
<!--Create Pop-up-->
<script type="text/javascript">
var t = new Toast({
"message" : "Lorem ipsum dolor sit amet", //Set the message in the pop-up
"ok" : true, //Set if there should be a OK button
"cancel" : true, //Set if there should be a cancel button
"custom" : false, //Set if there should be a custom button
"close" : true, //Set if there should be a close button ("x")
let t = new Toast({
"message" : "Lorem ipsum dolor sit amet", //Set the message in the toast
"ok" : true, //Set whether there should be a OK button
"cancel" : true, //Set whether there should be a cancel button
"custom" : false, //Set whether there should be a custom button
"close" : true, //Set whether there should be a close button ("x")
"text" : "custom button text", //Set the text for your custom button
"decay": 5 //Set the decay time of the toast. If the toast shouldn't decay set it to false or leave it out
});
t.create().then((result) => {
Expand All @@ -79,7 +99,7 @@ The promise returns "ok" or "cancel".*/
} else if (result == "custom") {
//What should happen if the custom button was pressed
}
}, function(err) {
}).catch((err) => {
console.error(err); //What should happen if something goes wrong
});
</script>
Expand Down
151 changes: 61 additions & 90 deletions pop-up.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ class PopUp {
create() {

// Error detection
if (this.input.ok != true && this.input.cancel != true && this.input.custom != true) {
console.error("At least one sort of button have to be selected.");
return 1;
if (!this.input.ok && !this.input.cancel && !this.input.custom) {
return console.error("At least one sort of button have to be selected.");
}


Expand Down Expand Up @@ -70,35 +69,33 @@ class PopUp {

}

createButton(name, text) {
this[name] = document.createElement("BUTTON");
this[name].innerHTML = text;
this[name].classList.add("standard-button");
this.buttonLine.appendChild(this[name]);
}


createButtons() {
// Create buttons
var buttonLine = document.createElement("DIV");
buttonLine.classList.add("button-line");
this.popUp.appendChild(buttonLine);
this.buttonLine = document.createElement("DIV");
this.buttonLine.classList.add("button-line");
this.popUp.appendChild(this.buttonLine);

// OK Button
if (this.input.ok) {
this.btnOk = document.createElement("BUTTON");
this.btnOk.innerHTML = "OK";
this.btnOk.classList.add("standard-button");
buttonLine.appendChild(this.btnOk);
this.createButton('btnOk', 'OK');
}

// Cancel Button
if (this.input.cancel) {
this.btnCancel = document.createElement("BUTTON");
this.btnCancel.innerHTML = "Cancel";
this.btnCancel.classList.add("standard-button");
buttonLine.appendChild(this.btnCancel);
this.createButton('btnCancel', 'Cancel');
}

// Custom Button
if (this.input.custom) {
this.btnCustom = document.createElement("BUTTON");
this.btnCustom.innerHTML = this.input.text;
this.btnCustom.classList.add("standard-button");
buttonLine.appendChild(this.btnCustom);
this.createButton('btnCustom', this.input.text);
}

}
Expand All @@ -113,44 +110,32 @@ class PopUp {
}

events() {
const bg = this.popUpBg;
const btnOk = this.btnOk;
const inBtnOk = this.input.ok;
const btnCancel = this.btnCancel;
const inBtnCancel = this.input.cancel;
const btnCustom = this.btnCustom;
const inBtnCustom = this.input.custom;
const closeX = this.closeX;
const inCloseX = this.input.close;

var promise = new Promise(function (resolve, reject) {
if (inCloseX == true) {
closeX.onclick = () => {
bg.remove();
}
let promise = new Promise((resolve, reject) => {
if (this.input.close == true) {
this.closeX.onclick = () => this.close();
}

if (inBtnOk == true) {
btnOk.onclick = () => {
bg.remove();
if (this.input.ok) {
this.btnOk.onclick = () => {
this.close();
resolve("ok");
}
}

if (inBtnCancel == true) {
btnCancel.onclick = () => {
bg.remove();
if (this.input.cancel) {
this.btnCancel.onclick = () => {
this.close();
resolve("cancel");
}
}

if (inBtnCustom == true) {
btnCustom.onclick = () => {
bg.remove();
if (this.input.custom) {
this.btnCustom.onclick = () => {
this.close();
resolve("custom");
}
}
if (inBtnCustom != true && inBtnOk != true && inBtnCancel != true) {
if (!this.input.custom && !this.input.ok && !this.input.cancel) {
reject(Error("It broke"));
}

Expand Down Expand Up @@ -203,91 +188,77 @@ class Toast {
this.toastText.innerHTML = text;
}

createButton(name, text) {
this[name] = document.createElement("BUTTON");
this[name].innerHTML = text;
this[name].classList.add("standard-button");
this.buttonLine.appendChild(this[name]);
}

createButtons() {
// Create buttons
var buttonLine = document.createElement("DIV");
buttonLine.classList.add("button-line");
this.toast.appendChild(buttonLine);
this.buttonLine = document.createElement("DIV");
this.buttonLine.classList.add("button-line");
this.toast.appendChild(this.buttonLine);

// OK Button
if (this.input.ok) {
this.btnOk = document.createElement("BUTTON");
this.btnOk.innerHTML = "OK";
this.btnOk.classList.add("standard-button");
buttonLine.appendChild(this.btnOk);
this.createButton('btnOk', 'OK');
}

// Cancel Button
if (this.input.cancel) {
this.btnCancel = document.createElement("BUTTON");
this.btnCancel.innerHTML = "Cancel";
this.btnCancel.classList.add("standard-button");
buttonLine.appendChild(this.btnCancel);
this.createButton('btnCancel', 'Cancel');
}

// Custom Button
if (this.input.custom) {
this.btnCustom = document.createElement("BUTTON");
this.btnCustom.innerHTML = this.input.text;
this.btnCustom.classList.add("standard-button");
buttonLine.appendChild(this.btnCustom);
this.createButton('btnCustom', this.input.text);
}

// Close x
if (this.input.close == true) {
this.closeX = document.createElement("i");
this.closeX.classList.add("cross");
buttonLine.appendChild(this.closeX);
this.buttonLine.appendChild(this.closeX);
}
}

events() {
const bg = this.toastBg;
const btnOk = this.btnOk;
const inBtnOk = this.input.ok;
const btnCancel = this.btnCancel;
const inBtnCancel = this.input.cancel;
const btnCustom = this.btnCustom;
const inBtnCustom = this.input.custom;
const closeX = this.closeX;
const inCloseX = this.input.close;

// Decay
if (this.input.decay && this.input.time != undefined) {
setTimeout(() => {
this.close()
}, this.input.time * 1000)
if (this.input.decay) {
if (typeof this.input.decay === 'number') {
setTimeout(() => this.close(), this.input.time * 1000)
}
}

// Buttons clicked
let promise = new Promise(function (resolve, reject) {
if (inCloseX == true) {
closeX.onclick = () => {
bg.remove();
}
let promise = new Promise((resolve, reject) => {
if (this.input.close == true) {
this.closeX.onclick = () => this.close();
}

if (inBtnOk == true) {
btnOk.onclick = () => {
bg.remove();
if (this.input.ok) {
this.btnOk.onclick = () => {
this.close();
resolve("ok");
}
}

if (inBtnCancel == true) {
btnCancel.onclick = () => {
bg.remove();
if (this.input.cancel) {
this.btnCancel.onclick = () => {
this.close();
resolve("cancel");
}
}

if (inBtnCustom == true) {
btnCustom.onclick = () => {
bg.remove();
if (this.input.custom) {
this.btnCustom.onclick = () => {
this.close();
resolve("custom");
}
}
if (inBtnCustom != true && inBtnOk != true && inBtnCancel != true) {
if (!this.input.custom && !this.input.ok && !this.input.cancel) {
reject(Error("It broke"));
}

Expand All @@ -311,7 +282,7 @@ function popUpInfo(message) {
"close": true,
"icon": "📣"
});
p.create().then(function (result) { }, function (err) { console.log(err); });
p.create().then((result) => { }).catch((err) => console.log(err));
}

function popUpError(message) {
Expand All @@ -323,7 +294,7 @@ function popUpError(message) {
"close": true,
"icon": "🛑"
});
p.create().then(function (result) { }, function (err) { console.log(err); });
p.create().then((result) => { }).catch((err) => console.log(err));
}

function popUpConfirm(message) {
Expand Down
12 changes: 12 additions & 0 deletions pop-up.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c259abe

Please sign in to comment.