fix backdrop default

bradmartin · Mar 27, 2017 · 082d327 · 082d327
1 parent fb15989
commit 082d327
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 28 deletions.
diff --git a/demo/index.js b/demo/index.js
@@ -18,6 +18,8 @@ function note2() {
   mystical.Mystical.alert({
     color: "#333",
     backgroundColor: "#fff000",
+    backdrop: false,
+    duration: 3000,
     template: `
       <div style="padding: 5px">
           <h3> What </h3>

diff --git a/dist/mystical.js b/dist/mystical.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mystical-notification",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Web alerts I needed.",
   "main": "dist/mystical",
   "typings": "dist/index.d.ts",

diff --git a/src/index.ts b/src/index.ts
@@ -9,15 +9,15 @@ export class Mystical {
         // create the main note div
         const note = createNote(defaults)
         // create the backdrop if backdrop === true
-        let backdrop
-        if (defaults.backdrop === true) {
-            backdrop = createBackdrop()
-            document.body.appendChild(backdrop)
-            backdrop.onclick = (ev: MouseEvent) => {
-                ev.preventDefault()
-                removeNoteFromDom(note, backdrop, defaults.pos)
-            }
+        // let backdrop
+        // if (defaults.backdrop === true) {
+        const backdrop = createBackdrop(defaults)
+        document.body.appendChild(backdrop)
+        backdrop.onclick = (ev: MouseEvent) => {
+            ev.preventDefault()
+            removeNoteFromDom(note, backdrop, defaults.pos)
         }
+        // }
 
         // add click event
         note.onclick = () => {
@@ -62,29 +62,24 @@ export class Mystical {
             const defaults = initDefaults(opts)
             // create the main note div
             const note = createNote(defaults)
-            // create the backdrop if backdrop === true
-            let backdrop
-            if (defaults.backdrop === true) {
-                backdrop = createBackdrop()
-                document.body.appendChild(backdrop)
-                backdrop.onclick = (ev: MouseEvent) => {
-                    ev.preventDefault()
-                    resolve(false)
-                    removeNoteFromDom(note, backdrop, defaults.pos)
-                }
+            // create the backdrop
+            const backdrop = createBackdrop(defaults)
+            document.body.appendChild(backdrop)
+            backdrop.onclick = (ev: MouseEvent) => {
+                ev.preventDefault()
+                resolve(false)
+                removeNoteFromDom(note, backdrop, defaults.pos)
             }
 
             // close on enter and escape key press
             note.onkeydown = (ev: KeyboardEvent) => {
                 if (ev.keyCode === 13 || ev.keyCode === 27) {
                     ev.preventDefault()
-                    removeNoteFromDom(note, backdrop, defaults.pos)
                     resolve(false)
+                    removeNoteFromDom(note, backdrop, defaults.pos)
                 }
             }
 
-
-
             const positiveBtnId = randoID()
             const negativeBtnId = randoID()
             const buttonStyle = `color: ${defaults.fg}; background-color: ${defaults.bg}; cursor: pointer; border: none; background: transparent; padding:4px; font-size: 1em;`
@@ -107,8 +102,8 @@ export class Mystical {
             // positive btn event
             const positiveBtn = document.getElementById(positiveBtnId)
             positiveBtn.onclick = (ev: MouseEvent) => {
-                removeNoteFromDom(note, backdrop, defaults.pos)
                 resolve(true)
+                removeNoteFromDom(note, backdrop, defaults.pos)
             }
 
             // negative btn event
@@ -151,9 +146,14 @@ function startTransition(defaults, note, top, bottom) {
 }
 
 
-function createBackdrop() {
+function createBackdrop(defaults) {
     const backdrop = document.createElement("div") as HTMLDivElement
-    backdrop.style.cssText = `position: fixed; height: 100%; width: 100%; top: 0; left: 0; overflow: hidden; background-color: rgba(33,33,33,1.0); opacity: 0.48;`
+    const baseStyle = `position: fixed; height: 100%; width: 100%; top: 0; left: 0; overflow: hidden; background-color: rgba(33,33,33,1.0);`
+    if (defaults.backdrop === true) {
+        backdrop.style.cssText = `${baseStyle} opacity: 0.48;`
+    } else {
+        backdrop.style.cssText = `${baseStyle} opacity: 0;`
+    }
     return backdrop
 }
 
@@ -232,7 +232,7 @@ function initDefaults(opts) {
     const bg = opts.backgroundColor ? opts.backgroundColor : "#333"
     const fg = opts.color ? opts.color : "#fff"
     const pos = opts.position ? opts.position : "top"
-    const backdrop = opts.backdrop ? opts.backdrop : true
+    const backdrop = opts.backdrop === false ? false : true
     const duration = opts.duration ? opts.duration : undefined
     const posText = opts.positiveText ? opts.positiveText : "Yes"
     const negText = opts.negativeText ? opts.negativeText : "No"

diff --git a/webpack.config.js b/webpack.config.js
@@ -27,7 +27,7 @@ const config = {
 
   plugins: [
     new webpack.optimize.UglifyJsPlugin(),
-    new webpack.HotModuleReplacementPlugin()
+    // new webpack.HotModuleReplacementPlugin()
   ],
   devServer: {
     contentBase: path.join(__dirname, "demo"),