all

Author: Philippe Assis

README.md

@@ -1,7 +1,7 @@
 #custom-alert.js
 ![custom-alert.js](https://raw.githubusercontent.com/PhilippeAssis/custom-alert/master/customAlert2.jpg)
 
-Override the alert () and confirm () functions of JavaScript, allowing you to customize them. This application does not use jQuery or another framework, just JavaScript and CSS. Responsive design.
+Override the alert() and confirm() functions of JavaScript, allowing you to customize them. This application does not use jQuery or another framework, just JavaScript and CSS. Responsive design.
 
 ## Demo
 [demo page](https://philippeassis.github.io/custom-alert)
@@ -31,7 +31,7 @@ Default bootstrap style
 
 and script
 ```html
-<script src="YOU/PATH/dist/js/custom-alert.min.js">
+<!--<script src="YOU/PATH/dist/js/custom-alert.min.js">-->
 ```
 
 ## Use
@@ -99,9 +99,12 @@ Setting Title and Text of Buttons.
         //..
     }, { 
         "title" : "Wellcome",
-        "buttons": {
-            "done" : ":)",
-            "cancel" : ":("
+        "done": {
+                "text": ":)",
+        },
+        "cancel": {
+            "text" : ":(",
+            "default": true
         }
     })
 ```
@@ -115,13 +118,30 @@ Setting Title and Text of Buttons.
 
 #### Confirm
 ##### options
- - **title:**  The title.
- - **buttons.done:**  The done text.
- - **buttons.cancel:**  The cancel text.
+ - **title.text**  The title.
+ - **title.default**  If true, set the default as default.
+ - **title.bold**  Add bold text.
+ - **done.text**  The done text.
+ - **done.default**  If true, set the default as default.
+ - **done.bold**  Add bold text.
+ - **cancel:**  The cancel text.
 
 ##### callback
- - **buttons.success:**  if button done press.
- - **buttons.cancel:**  if button calcel press.
+ - **success:**  if button done press.
+ - **cancel:**  if button calcel press.
  - **only function:**  Gets an attribute with true or false.
 
+## Keyboard events
+The ENTER key performs the default button.
+
+```javascript
+{
+    "cancel": {
+        "default" : true
+    }
+}
+```
+In this example, the default button will be "Cancel", so by clicking ENTER on the keyboard, this button will be executed.
+**By default the "default button" is done.**
+
 I see an example on the [demo page](https://philippeassis.github.io/custom-alert)

demo/assets/js/demo.js

@@ -8,17 +8,16 @@ function demo1() {
         confirm("Ok?", function(done) {
             if (!done) {
                 confirm("No?", function(done) {
+                    console.log('NO!')
                     if (!done) {
                         alert("Cry... :/")
                     }
                     else {
                         alert("Good!")
                     }
                 }, {
-                    "buttons": {
-                        "done": "No, no... Good!",
-                        "cancel": "No."
-                    }
+                    "done": "No, no... Good!",
+                    "cancel": "No."
                 })
             }
             else {
@@ -27,10 +26,15 @@ function demo1() {
 
         }, {
             "title": "Demo Confirm",
-            "buttons": {
-                "done": ":)",
-                "cancel": ":("
+
+            "done": {
+                "text": ":)",
+            },
+            "cancel": {
+                "text" : ":(",
+                "default": true
             }
+
         })
     })
 }

demo/assets/styl/demo.styl

@@ -0,0 +1,28 @@
+.demo
+    padding 0% 20% 
+    text-align center
+    font-family: 'Roboto', sans-serif;
+    h1
+        margin-bottom 40px
+    a
+        background-color #3e619b
+        color #fff
+        padding 5px 10px
+        text-decoration none
+        border-radius 5px
+        
+    pre
+        margin-top 40px
+        padding: 20px
+        border-radius 5px
+        text-align left
+        font-family: 'Ubuntu', sans-serif;
+        background-color #20252d
+        color: #fff
+        width 100%
+        float left
+        box-sizing: border-box;
+        code
+            width 100%
+            float left
+        

demo/assets/views/index.pug

@@ -4,11 +4,14 @@ html
     meta(charset='utf-8')
     title custom-alert.js :: Demo
     link(rel="stylesheet", href="dist/css/custom-alert.css")
+    link(href="https://fonts.googleapis.com/css?family=Roboto|Ubuntu" rel="stylesheet")
+    link(rel="stylesheet", href="demo/public/css/demo.css")
   body
-    h1 custom-alert.js
-    pre
-      code
-    a(href="#", onclick="demo1()") Click to demo.
-    script(src="dist/js/custom-alert.min.js")
+    .demo
+      h1 custom-alert.js
+      a(href="#", onclick="demo1()") Click to demo
+      pre
+        code
+    script(src="dist/js/custom-alert-debug.js")
     script(src="demo/public/js/demo.js")
 

demo/public/css/demo.css

@@ -8,17 +8,16 @@ function demo1() {
         confirm("Ok?", function(done) {
             if (!done) {
                 confirm("No?", function(done) {
+                    console.log('NO!')
                     if (!done) {
                         alert("Cry... :/")
                     }
                     else {
                         alert("Good!")
                     }
                 }, {
-                    "buttons": {
-                        "done": "No, no... Good!",
-                        "cancel": "No."
-                    }
+                    "done": "No, no... Good!",
+                    "cancel": "No."
                 })
             }
             else {
@@ -27,10 +26,15 @@ function demo1() {
 
         }, {
             "title": "Demo Confirm",
-            "buttons": {
-                "done": ":)",
-                "cancel": ":("
+
+            "done": {
+                "text": ":)",
+            },
+            "cancel": {
+                "text" : ":(",
+                "default": true
             }
+
         })
     })
 }