Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
agb@immerda.ch
ipick
Commits
2448205a
Commit
2448205a
authored
Mar 28, 2020
by
mahogony
Browse files
Add backdrop to the dom and some interactions
parent
2c1bcb9b
Changes
1
Hide whitespace changes
Inline
Side-by-side
ipick.js
View file @
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;
}
...
...
@@ -72,12 +82,31 @@
.ipick-open .ipick-menu {
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
"
;
...
...
@@ -107,6 +136,7 @@
// add menu to the dom
document
.
body
.
appendChild
(
menu
);
document
.
body
.
appendChild
(
backdrop
);
/**
* Open the menu
...
...
@@ -132,6 +162,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
);
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment