Merge branch '2-backdrop' into 'master'

Add backdrop to the dom and some interactions

Closes #2

See merge request immerda/content/ipick!3

ipick.js

@@ -21,6 +21,16 @@
       width: 10.9375em;
       height: 7.8125em;
     }
+    .ipick-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: none;
+      background-color: rgba(0,0,0);
+      opacity: 0;
+    }
     .ipick-is-open #ipick-button img:hover {
       filter: none;
     }
@@ -90,12 +100,31 @@
         max-width: 18.75em;
       }
     }
+    .ipick-open .ipick-backdrop {
+      display: block;
+      animation-name: back;
+      animation-duration: 300ms;
+      opacity: 0.25;
+      z-index: 999;
+    }
+    @keyframes back {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 0.25;
+      }
+    }
   `;
   // add styles
   var styleDom = document.createElement("style");
   styleDom.innerHTML = style;
   document.body.appendChild(styleDom);
 
+  // create backdrop
+  var backdrop = document.createElement("div")
+  backdrop.className = "ipick-backdrop";
+
   // create menu
   var menu = document.createElement("div");
   menu.className = "ipick-menu";
@@ -125,6 +154,7 @@
 
   // add menu to the dom
   document.body.appendChild(menu);
+  document.body.appendChild(backdrop);
 
   /**
    * Open the menu
@@ -150,6 +180,12 @@
     menu.dispatchEvent(event)
   }
 
+  /**
+   * Add a backdrop
+   */
+  backdrop.onclick = function() {
+    toggle.click();
+  }
 
   if (!document.cookie.match(/ipick-blinked/)) {
     setTimeout(function(){document.body.classList.add("ipick-appear")}, 300);