added prompt() equivalent mscPrompt()

brijeshb42 · May 20, 2015 · 8a1216a · 8a1216a
1 parent 4390e44
commit 8a1216a
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+#### joe made this: http://goel.io/joe
+
+#####=== OSX ===#####
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "medium-style-confirm",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "homepage": "http://bitwiser.i/medium-style-confirm/",
   "authors": [
     "Brijesh Bittu <[email protected]>"

diff --git a/css/msc-style.css b/css/msc-style.css
@@ -95,6 +95,30 @@
     margin-bottom: 1em;
     color: #666;
 }
+.msc-body p {
+    margin: 0 0 10px 0;
+}
+
+.msc-input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 38px;
+    font-size: 14px;
+    text-align: center;
+    letter-spacing: 0.02em;
+    font-weight: 400;
+    font-style: normal;
+    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
+    border: none;
+    border-bottom: 1px solid rgba(0,0,0,0.15);
+    padding: 0 15px;
+}
+
+.msc-input:focus {
+    outline: none;
+    border-color: #0F985A;
+}
+
 
 .msc-action button {
     border: 1px solid #ccc;

diff --git a/js/msc-script.js b/js/msc-script.js
@@ -10,8 +10,9 @@
         return ele;
     }
     var KEY_ESC = 27;
+    var KEY_ENTER = 13;
 
-    var MscConfirm = function(title, sub, onOk, onCancel) {
+    function buildUI(title, sub, onOk, onCancel, type) {
         var prev = document.getElementsByClassName('msc-confirm');
         if(prev.length > 0){
             document.body.removeChild(prev[0]);
@@ -30,6 +31,12 @@
             for(var key in title) {
                 options[key] = title[key];
             }
+            if(typeof options.onOk !== 'function') {
+                options.onOk = null;
+            }
+            if(typeof options.onCancel !== 'function') {
+                options.onCancel = null;
+            }
         } else {
             options.title = (typeof title === 'string') ? title : options.title;
             options.subtitle = (typeof sub === 'string') ? sub : options.subtitle;
@@ -51,10 +58,13 @@
 
         var content = ce('div', 'msc-content'),
             cTitle = ce('h3', 'msc-title', options.title),
-            body = ce('div', 'msc-body', options.subtitle),
+            body = ce('div', 'msc-body'),
             action = ce('div', 'msc-action'),
             okBtn = ce('button', 'msc-ok', options.okText),
-            cancelbtn = ce('button', 'msc-cancel', options.cancelText);
+            cancelbtn = ce('button', 'msc-cancel', options.cancelText),
+            input = ce('input', 'msc-input');
+
+        body.appendChild(ce('p','', options.subtitle));
 
         action.appendChild(okBtn);
         action.appendChild(cancelbtn);
@@ -71,7 +81,18 @@
         document.body.appendChild(dialog);
         dialog.style.display = 'block';
         content.classList.add('msc-confirm--animate');
-        cancelbtn.focus();
+        if(type === "prompt") {
+            input.setAttribute("type", "text");
+            input.addEventListener("keyup", function(e) {
+                if(e.keyCode === KEY_ENTER) {
+                    ok();
+                }
+            });
+            body.appendChild(input);
+            input.focus();
+        }else {
+            cancelbtn.focus();
+        }
 
         document.addEventListener('keyup', _hide);
 
@@ -86,7 +107,11 @@
         function ok() {
             destroy();
             if(options.onOk !== null) {
-                options.onOk();
+                if(type === "prompt") {
+                    options.onOk(input.value);
+                }else {
+                    options.onOk();
+                }
             }
         }
 
@@ -103,7 +128,11 @@
             }
         }
     };
-
     //window.msc = MscConfirm;
-    window.mscConfirm = MscConfirm;
+    window.mscConfirm = function(title, sub, onOk, onCancel) {
+        buildUI(title, sub, onOk, onCancel, "confirm");
+    };
+    window.mscPrompt = function(title, sub, onOk, onCancel) {
+        buildUI(title, sub, onOk, onCancel, "prompt");
+    };
 })();