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
fadfafa6
Commit
fadfafa6
authored
Mar 10, 2020
by
o@immerda.ch
Browse files
Merge branch 'animation' into 'master'
animation and css See merge request
immerda/content/ipick!1
parents
71183ff6
c5bcd0b5
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
ipick.js
View file @
fadfafa6
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">
w
ebmail</a></li>
<li><a href="https://users.immerda.ch">
k
onto</a></li>
<li><a href="https://docs.immerda.ch">hilfe</a></li>
<li><a href="https://webmail.immerda.ch">
W
ebmail</a></li>
<li><a href="https://users.immerda.ch">
K
onto</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
);
logo-source.svg
View file @
fadfafa6
This diff is collapsed.
Click to expand it.
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