Merge pull request #2 from aleksanderkoder/V3

V3

Author: aleksanderkoder

OzoneAlerts.css

@@ -18,7 +18,7 @@
   background-color: rgba(0, 0, 0, 0.75);
   font-family: "Roboto";
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-  animation: ozfadeIn ease 0.5s;
+  animation: ozFadeIn ease 0.25s;
   z-index: 999999;
 }
 
@@ -42,7 +42,7 @@
 }
 
 /* Styles the buttons used for the dialog type */
-#OzoneBtnConfirm {
+.OzoneBtnConfirm {
   margin-right: 30px; 
   transition: 0.3s;
   border-radius: 2px;
@@ -55,13 +55,13 @@
   cursor: pointer;
 }
 
-#OzoneBtnConfirm:hover {
+.OzoneBtnConfirm:hover {
   background-color: rgba(37, 155, 53, 0.75); 
   color: white; 
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
 }
 
-#OzoneBtnCancel {
+.OzoneBtnCancel {
   margin-left: 30px;
   transition: 0.3s;
   border-radius: 2px;
@@ -74,7 +74,7 @@
   cursor: pointer;
 }
 
-#OzoneBtnCancel:hover {
+.OzoneBtnCancel:hover {
   background-color: rgba(155, 37, 37, 0.75);
   color: white; 
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
@@ -86,7 +86,7 @@
 }
 
 /* Specifies animations used upon initial appearance, persisting and deletion of alert */
-@keyframes ozfadeIn {
+@keyframes ozFadeIn {
   0% {
     opacity: 0;
   }
@@ -96,7 +96,7 @@
   }
 }
 
-@keyframes ozfadeOut {
+@keyframes ozFadeOut {
   0% {
     opacity: 1;
   }
@@ -106,7 +106,7 @@
   }
 }
 
-@keyframes ozpulse {
+@keyframes ozPulse {
   0% {
     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
   }

OzoneAlerts.js

@@ -4,8 +4,7 @@ class Ozone {
     message,
     position,
     type = "notification",
-    confirmButtonText = "Confirm",
-    cancelButtonText = "Cancel",
+    options = {},
     onConfirm = function () {},
     onCancel = function () {}
   ) {
@@ -26,11 +25,11 @@ class Ozone {
 
     // Handles icon selection based on parameter "icon"
     if (icon == "success") {
-      divIcon.innerHTML = '<i style=" color: white;" class="fas fa-check"></i>';
+      divIcon.innerHTML = '<i class="fas fa-check"></i>';
     } else if (icon == "error") {
-      divIcon.innerHTML = '<i style="color: white;" class="fas fa-times"></i>';
+      divIcon.innerHTML = '<i class="fas fa-times"></i>';
     } else if (icon == "info") {
-      divIcon.innerHTML = '<i style="color: white;" class="fas fa-info"></i>';
+      divIcon.innerHTML = '<i class="fas fa-info"></i>';
     }
     // Creates Ozone instance of type "dialog" based on "type" parameter
     if (type == "dialog") {
@@ -45,11 +44,11 @@ class Ozone {
       divControls.className = "OzoneControls";
 
       const btnConfirm = document.createElement("button");
-      btnConfirm.id = "OzoneBtnConfirm";
-      btnConfirm.innerHTML = confirmButtonText;
+      btnConfirm.className = "OzoneBtnConfirm";
+      btnConfirm.innerHTML = "Confirm";
       const btnCancel = document.createElement("button");
-      btnCancel.id = "OzoneBtnCancel";
-      btnCancel.innerHTML = cancelButtonText;
+      btnCancel.className = "OzoneBtnCancel";
+      btnCancel.innerHTML = "Cancel";
 
       // Appends elements to parent element
       el.appendChild(divControls);
@@ -66,6 +65,28 @@ class Ozone {
         onCancel();
         removeOzoneAlert(el);
       };
+
+      // Sets dialog specific options based on "options" object parameter
+      if(Object.keys(options).length > 0) {
+        if(options.confirmButtonText) {
+          btnConfirm.innerHTML = options.confirmButtonText;
+        }
+        if(options.cancelButtonText) {
+          btnCancel.innerHTML = options.cancelButtonText;
+        }
+        if(options.confirmButtonColor) {
+          btnConfirm.style.backgroundColor = options.confirmButtonColor;
+        }
+        if(options.cancelButtonColor) {
+          btnCancel.style.backgroundColor = options.cancelButtonColor;
+        }
+        if(options.confirmButtonRadius) {
+          btnConfirm.style.borderRadius = options.confirmButtonRadius;
+        }
+        if(options.cancelButtonRadius) {
+          btnCancel.style.borderRadius = options.cancelButtonRadius;
+        }
+      }
     }
 
     // Handles position based on parameter "position"
@@ -114,18 +135,37 @@ class Ozone {
         break;
     }
 
-    // Handles animations upon creation and deletion of Ozone element
-    setTimeout(() => {
-      el.style.animation = "ozpulse 2s infinite";
-    }, 1000);
+    // Sets general options based on "options" object passed as parameter
+    if(Object.keys(options).length > 0) {
+      if(options.backgroundColor) {
+        el.style.backgroundColor = options.backgroundColor;
+      }
+      if(options.fontColor) {
+        divMessage.style.color = options.fontColor;
+      }
+      if(options.iconColor) {
+        divIcon.style.color = options.iconColor;
+      }
+      if(options.borderRadius) {
+        el.style.borderRadius = options.borderRadius;
+      }
+      if(options.border) {
+        el.style.border = options.border;
+      }
+    }
 
     // Finally appends Ozone alert element to document body
     document.body.appendChild(el);
 
+    // Handles animations upon creation and deletion of Ozone element
+    setTimeout(() => {
+      el.style.animation = "ozPulse 2s infinite";
+    }, 1000);
+
     // Handles behavior of Ozone alert upon deletion based on type
     if (type == "notification") {
       setTimeout(() => {
-        el.style.animation = "ozfadeOut ease 1s";
+        el.style.animation = "ozFadeOut ease 1s";
       }, 7000);
 
       setTimeout(() => {
@@ -135,10 +175,10 @@ class Ozone {
 
     // Function that removes a given Ozone-element with a fadeOut-effect
     function removeOzoneAlert(element) {
-      element.style.animation = "ozfadeOut ease 0.5s";
+      element.style.animation = "ozFadeOut ease 0.5s";
       setTimeout(() => {
         element.parentNode.removeChild(element);
-      }, 500);
+      }, 495);
     }
   }
 }

README.md

@@ -26,24 +26,26 @@ OzoneAlerts.js should now be ready for use.
 
 Basic usage: 
 ```javascript
-Ozone.fire("success", "Hello, world!", "top-left")
+Ozone.fire("success", "Hello, world!", "top-left");
 ```
 Advanced usage: 
 ```javascript
-Ozone.fire("success", "Would you like a cinnamon roll?", "top-left", "dialog", "Yes thanks!", "No thanks!", 
+let options = {backgroundColor: "green", fontColor: "#8b0000"};
+
+Ozone.fire("success", "Would you like a cinnamon roll?", "top-left", "dialog", options, 
    function () { 
       alert("You just pressed the confirm button!")}, 
    function () {
       alert("You just pressed the cancel button!")}
-      )
+      );
 ```
 
 
 ***Parameters***
 
 Method parameter structure:
 ```javascript
-Ozone.fire(icon, message, position, type, confirmButtonText, cancelButtonText, onConfirm, onCancel)
+Ozone.fire(icon, message, position, type, options, onConfirm, onCancel); 
 ```
 
 *The first three parameters are required.*
@@ -68,19 +70,49 @@ The fourth parameter *"type"* (optional) chooses what type of alert should be sh
  1. "notification" - (default) The standard slim variant. 
  2. "dialog" - The full-sized variant allowing user input via programmable buttons. 
 
-The fifth parameter *"confirmButtonText"* (optional) sets the text shown inside the "confirm" dialog button.
- - Example value: "I got it!"
+The fifth parameter *"options"* (optional) is an object containing different properties which are used to configure the alert visually. Create an object containing the options you want and pass it as a parameter to the  *Ozone.fire()* method.
+An example of the options object:
 
-The sixt parameter *"cancelButtonText"* (optional) sets the text shown inside the "cancel" dialog button.
- - Example value: "No thanks!"
+```javascript 
+let options = {backgroundColor: "green", fontColor: "#8b0000"};  
+```
 
- The seventh and eight parameters *"onConfirm"* (optional) and *"onCancel"* (optional) controls what should happen when each of the two dialog buttons are pressed.
- These parameters take a function containing whatever code you want. 
+ The sixt and seventh parameters *"onConfirm"* (optional) and *"onCancel"* (optional) controls what should happen when each of the two dialog buttons are pressed.
+ These parameters take a function containing whatever code you want. If no code is provided and the buttons are clicked, the button will close the dialog only. 
   - See the "advanced usage" example under the *Usage* section for an exact example of how these parameters can be used. 
 
 ## Visual customization 
 
-The alerts can be easily customized via the *OzoneAlerts.css* style sheet. This requires basic knowledge of CSS, however.
+**OzoneAlerts.js** can be visually customized using the *"options"* parameter, using an object containing the wanted properties. These options are split into two categories. One that is relevant for both types ("notification" and "dialog"), and one that is only applied for the "dialog" type alert. All standard CSS values are valid for the specified properties.
+
+The general customization options available are: 
+ 1. **backgroundColor** - Sets the "background-color" CSS property for the alert element.
+     - Example value: "green", "#8b0000" etc. 
+ 2. **fontColor** - Sets the "font-color" CSS property for the alert element.
+     - Example value: "red", "#FFFF00" etc. 
+ 3. **iconColor** - Sets the color CSS property for the icon in the alert element.
+     - Example value: "black", "#000000" etc.  
+ 4. **borderRadius** - Sets the "border-radius" CSS property for the alert element. 
+     - Example value: "5px"
+ 5. **border** - Sets the "border" CSS property for the alert element. 
+     - Example value: "5px solid white" 
+
+The "dialog" specific customization options available are: 
+ 1. **confirmButtonText** - Sets the inner text of the confirmation button. 
+     - Example value: "Hello, world!"
+ 2. **cancelButtonText** - Sets the inner text of the cancellation button.
+     - Example value: "Goodbye, world!"
+ 3. **confirmButtonColor** - Sets the "background-color" CSS property for the confirmation button.
+     - Example value: "green", "#8b0000" etc. 
+ 4. **cancelButtonColor** - Sets the "background-color" CSS property for the cancellation button. 
+     - Example value: "red", "#008080" etc. 
+ 5. **confirmButtonRadius** - Sets the "border-radius" CSS property for the confirmation button. 
+     - Example value: "5px"
+ 6. **cancelButtonRadius** - Sets the "border-radius" CSS property for the cancellation button.
+     - Example value: "15px"
+
+
+If you require more control over the visuals, the alerts can be customized via the *OzoneAlerts.css* style sheet. This requires basic knowledge of CSS, however.
 
 ## Dependencies 
   - Font Awesome (https://fontawesome.com/) - Needed for icons to appear. Include it within the head tag of your HTML.