Commit a6582cfa authored by o@immerda.ch's avatar o@immerda.ch
Browse files

Merge branch '2-backdrop' into 'master'

Add backdrop to the dom and some interactions

Closes #2

See merge request immerda/content/ipick!3
parents 51e1c94d 2448205a
......@@ -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);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment