Merge branch 'animation' into 'master'

animation and css

See merge request immerda/content/ipick!1

ipick.js

-var style = `
-.ipick-button.ipick-open {
-  right: calc(6cm - 150px);
-  width: 300px;
-}
-.ipick-menu.ipick-open {
-  display: block;
-}
+(function(document) {
+  var style = `
+    #ipick-button {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 10.9375em;
+      height: 7.8125em;
+      transform: translate(-50%, 0);
+      cursor: pointer;
+      background-image:
+        linear-gradient(
+          to right,
+          transparent,
+          transparent 50%,
+          #ffffff 50%,
+          transparent 98%
+        );
+    }
 
-.ipick-button {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  background-image: url("logo.png");
-  width: 150px;
-  height: 214px;
-}
-.ipick-menu {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: none;
-  height: 100%;
-  width: 6cm;
-  background-color: #222;
-  filter: alpha(opacity=95);
-  opacity: 0.95;
-  clip-path: polygon(100% 0%, 0% 0%, 0% calc(100% - 214px), 150px calc(100% - 214px), 150px 100%, 100% 100%);
-}
-.ipick-menu ul {
-  bottom: 200px;
-  position: absolute;
-}
-.ipick-menu ul li a {
-  color: green;
-  font-size: 20pt;
-}
-`;
+    #ipick-button img {
+      width: 10.9375em;
+      height: 7.8125em;
+    }
+
+    .ipick-menu {
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      height: 100%;
+      width: 18.75em;
+      max-width: 0;
+      transition:  max-width 300ms ease-in-out;
+      background-color: #222;
+    }
+
+    .ipick-menu ul {
+      bottom: 200px;
+      position: absolute;
+    }
+
+    .ipick-menu ul li a {
+      color: green;
+      font-size: 20pt;
+    }
 
-var styleDom = document.createElement("style");
-styleDom.innerHTML = style;
-document.body.appendChild(styleDom);
+    .ipick-open .ipick-menu {
+      max-width: 18.75em;
+    }
+  `;
+  // add styles
+  var styleDom = document.createElement("style");
+  styleDom.innerHTML = style;
+  document.body.appendChild(styleDom);
 
-var menu = document.createElement("div");
-menu.className = "ipick-menu";
-menu.innerHTML = `
+  // create menu
+  var menu = document.createElement("div");
+  menu.className = "ipick-menu";
+  menu.innerHTML = `
 <ul>
-<li><a href="https://webmail.immerda.ch">webmail</a></li>
-<li><a href="https://users.immerda.ch">konto</a></li>
-<li><a href="https://docs.immerda.ch">hilfe</a></li>
+  <li><a href="https://webmail.immerda.ch">Webmail</a></li>
+  <li><a href="https://users.immerda.ch">Konto</a></li>
+  <li><a href="https://docs.immerda.ch">hilfe</a></li>
 </ul>
 `;
-document.body.appendChild(menu);
 
-function openMenu() {
-  menu.className = "ipick-menu ipick-open";
-  b.className = "ipick-button ipick-open";
-  b.onclick = closeMenu;
-}
-function closeMenu() {
-  menu.className = "ipick-menu";
-  b.className = "ipick-button";
-  b.onclick = openMenu;
-}
+  // create menu toggler
+  var image = document.createElement("img");
+  image.src = "logo-source.svg";
+  var toggle = document.createElement("div");
+  toggle.id = "ipick-button";
+  toggle.onclick = openMenu;
+  // add menu toggler
+  toggle.appendChild(image);
+  menu.appendChild(toggle);
+
+  // add menu to the dom
+  document.body.appendChild(menu);
+
+  /**
+   * Open the menu
+   */
+  function openMenu() {
+    document.body.classList.add("ipick-open");
+    this.onclick = closeMenu;
+    // hook for menu
+    var event = new Event('ipick.open');
+    menu.dispatchEvent(event)
+  }
 
-var b = document.createElement("div");
-b.className = "ipick-button";
-b.onclick = openMenu;
-document.body.appendChild(b);
+  /**
+   * Close the menu on the right
+   */
+  function closeMenu() {
+    document.body.classList.remove("ipick-open");
+    this.onclick = openMenu;
+    // hook for menu
+    var event = new Event('ipick.close');
+    menu.dispatchEvent(event)
+  }
+})(document);