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
Nicolas PERNOUD
Vestibule
Commits
c72b8f9a
Commit
c72b8f9a
authored
Jun 22, 2020
by
Nicolas Pernoud
Browse files
chore: refactored AnimateCSS to use promises
parent
ff6a212d
Pipeline
#6083
passed with stages
in 2 minutes and 46 seconds
Changes
13
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
web/components/apps/apps.js
View file @
c72b8f9a
...
...
@@ -426,21 +426,20 @@ async function reloadAppsOnServer() {
}
}
function
toggleModal
()
{
async
function
toggleModal
()
{
toggleForwardServe
();
toggleRoles
();
updateIcon
();
const
modal
=
document
.
getElementById
(
"
apps-modal
"
);
const
card
=
document
.
getElementById
(
"
apps-modal-card
"
);
if
(
modal
.
classList
.
contains
(
"
is-active
"
))
{
AnimateCSS
(
modal
,
"
animate__fadeOut
"
);
AnimateCSS
(
card
,
"
animate__zoomOut
"
,
function
()
{
modal
.
classList
.
remove
(
"
is-active
"
);
});
AnimateCSS
(
modal
,
"
fadeOut
"
);
await
AnimateCSS
(
card
,
"
zoomOut
"
);
modal
.
classList
.
remove
(
"
is-active
"
);
}
else
{
modal
.
classList
.
add
(
"
is-active
"
);
AnimateCSS
(
modal
,
"
animate__
fadeIn
"
);
AnimateCSS
(
card
,
"
animate__
zoomIn
"
);
AnimateCSS
(
modal
,
"
fadeIn
"
);
AnimateCSS
(
card
,
"
zoomIn
"
);
}
}
...
...
@@ -507,11 +506,10 @@ function openWebview(app) {
<footer class="modal-card-foot"></footer>
</div>
`
;
webview
.
querySelector
(
"
#
"
+
"
apps-webview-close
"
).
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
webview
.
getElementsByClassName
(
"
modal-background
"
)[
0
],
"
animate__fadeOut
"
,
function
()
{
webview
.
parentNode
.
removeChild
(
webview
);
});
AnimateCSS
(
webview
.
getElementsByClassName
(
"
modal-card
"
)[
0
],
"
animate__zoomOut
"
);
webview
.
querySelector
(
"
#
"
+
"
apps-webview-close
"
).
addEventListener
(
"
click
"
,
async
()
=>
{
AnimateCSS
(
webview
.
getElementsByClassName
(
"
modal-background
"
)[
0
],
"
fadeOut
"
);
await
AnimateCSS
(
webview
.
getElementsByClassName
(
"
modal-card
"
)[
0
],
"
zoomOut
"
);
webview
.
parentNode
.
removeChild
(
webview
);
});
document
.
body
.
appendChild
(
webview
);
}
web/components/davs/davs.js
View file @
c72b8f9a
...
...
@@ -382,20 +382,19 @@ async function reloadDavsOnServer() {
}
}
function
toggleModal
()
{
async
function
toggleModal
()
{
toggleRoles
();
updateIcon
();
const
modal
=
document
.
getElementById
(
"
davs-modal
"
);
const
card
=
document
.
getElementById
(
"
davs-modal-card
"
);
if
(
modal
.
classList
.
contains
(
"
is-active
"
))
{
AnimateCSS
(
modal
,
"
animate__fadeOut
"
);
AnimateCSS
(
card
,
"
animate__zoomOut
"
,
function
()
{
modal
.
classList
.
remove
(
"
is-active
"
);
});
AnimateCSS
(
modal
,
"
fadeOut
"
);
await
AnimateCSS
(
card
,
"
zoomOut
"
);
modal
.
classList
.
remove
(
"
is-active
"
);
}
else
{
modal
.
classList
.
add
(
"
is-active
"
);
AnimateCSS
(
modal
,
"
animate__
fadeIn
"
);
AnimateCSS
(
card
,
"
animate__
zoomIn
"
);
AnimateCSS
(
modal
,
"
fadeIn
"
);
AnimateCSS
(
card
,
"
zoomIn
"
);
}
}
...
...
@@ -441,6 +440,6 @@ function openExplorerModal(hostname, readwrite, encrypted) {
const
explorer
=
new
Explorer
(
hostname
);
explorer
.
mount
(
"
davs-explorer-modal-card
"
,
readwrite
,
encrypted
);
modal
.
classList
.
add
(
"
is-active
"
);
AnimateCSS
(
modal
,
"
animate__
fadeIn
"
);
AnimateCSS
(
card
,
"
animate__
zoomIn
"
);
AnimateCSS
(
modal
,
"
fadeIn
"
);
AnimateCSS
(
card
,
"
zoomIn
"
);
}
web/components/davs/edit.js
View file @
c72b8f9a
...
...
@@ -40,10 +40,9 @@ export class Edit {
}
this
.
editModal
.
innerHTML
=
this
.
computeTemplate
(
content
);
document
.
body
.
appendChild
(
this
.
editModal
);
this
.
gid
(
"
edit-close
"
).
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
this
.
editModal
,
"
animate__fadeOut
"
,
()
=>
{
this
.
editModal
.
parentNode
.
removeChild
(
this
.
editModal
);
});
this
.
gid
(
"
edit-close
"
).
addEventListener
(
"
click
"
,
async
()
=>
{
await
AnimateCSS
(
this
.
editModal
,
"
fadeOut
"
);
this
.
editModal
.
parentNode
.
removeChild
(
this
.
editModal
);
});
this
.
gid
(
"
edit-save
"
).
addEventListener
(
"
click
"
,
()
=>
{
this
.
save
();
...
...
web/components/davs/explorer.js
View file @
c72b8f9a
...
...
@@ -58,12 +58,11 @@ export class Explorer {
</footer>
`
;
this
.
user
=
await
Auth
.
GetUser
();
document
.
getElementById
(
`explorer-modal-close`
).
addEventListener
(
"
click
"
,
function
()
{
document
.
getElementById
(
`explorer-modal-close`
).
addEventListener
(
"
click
"
,
async
function
()
{
const
modal
=
card
.
parentNode
;
AnimateCSS
(
modal
,
"
animate__fadeOut
"
);
AnimateCSS
(
card
,
"
animate__zoomOut
"
,
function
()
{
modal
.
classList
.
remove
(
"
is-active
"
);
});
AnimateCSS
(
modal
,
"
fadeOut
"
);
await
AnimateCSS
(
card
,
"
zoomOut
"
);
modal
.
classList
.
remove
(
"
is-active
"
);
});
document
.
getElementById
(
`explorer-modal-back`
).
addEventListener
(
"
click
"
,
()
=>
{
this
.
navigate
(
goUp
(
this
.
path
));
...
...
@@ -311,14 +310,12 @@ export class Explorer {
}
catch
(
e
)
{
HandleError
(
e
);
}
AnimateCSS
(
renameModal
,
"
animate__fadeOut
"
,
function
()
{
renameModal
.
parentNode
.
removeChild
(
renameModal
);
});
await
AnimateCSS
(
renameModal
,
"
fadeOut
"
);
renameModal
.
parentNode
.
removeChild
(
renameModal
);
});
renameCancel
.
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
renameModal
,
"
animate__fadeOut
"
,
function
()
{
renameModal
.
parentNode
.
removeChild
(
renameModal
);
});
renameCancel
.
addEventListener
(
"
click
"
,
async
()
=>
{
await
AnimateCSS
(
renameModal
,
"
fadeOut
"
);
renameModal
.
parentNode
.
removeChild
(
renameModal
);
});
document
.
body
.
appendChild
(
renameModal
);
field
.
focus
();
...
...
@@ -358,14 +355,12 @@ export class Explorer {
}
catch
(
e
)
{
HandleError
(
e
);
}
AnimateCSS
(
pasteControl
,
"
animate__zoomOut
"
,
function
()
{
pasteControl
.
parentNode
.
removeChild
(
pasteControl
);
});
await
AnimateCSS
(
pasteControl
,
"
zoomOut
"
);
pasteControl
.
parentNode
.
removeChild
(
pasteControl
);
});
pasteControl
.
getElementsByTagName
(
"
a
"
)[
1
].
addEventListener
(
"
click
"
,
async
()
=>
{
AnimateCSS
(
pasteControl
,
"
animate__zoomOut
"
,
function
()
{
pasteControl
.
parentNode
.
removeChild
(
pasteControl
);
});
await
AnimateCSS
(
pasteControl
,
"
zoomOut
"
);
pasteControl
.
parentNode
.
removeChild
(
pasteControl
);
});
document
.
getElementById
(
"
explorer-modal-footer-buttons
"
).
appendChild
(
pasteControl
);
}
...
...
@@ -495,9 +490,8 @@ export class Explorer {
console
.
error
(
e
.
statusText
);
Messages
.
Show
(
"
is-warning
"
,
e
.
statusText
);
}
AnimateCSS
(
msg
,
"
animate__fadeOutDown
"
,
function
()
{
msg
.
parentNode
.
removeChild
(
msg
);
});
await
AnimateCSS
(
msg
,
"
fadeOutDown
"
);
msg
.
parentNode
.
removeChild
(
msg
);
}
}
...
...
web/components/davs/open.js
View file @
c72b8f9a
...
...
@@ -85,10 +85,9 @@ export class Open {
}
this
.
openModal
.
innerHTML
=
this
.
computeTemplate
(
content
,
token
);
document
.
body
.
appendChild
(
this
.
openModal
);
this
.
gid
(
"
open-close
"
).
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
this
.
openModal
,
"
animate__fadeOut
"
,
()
=>
{
this
.
openModal
.
parentNode
.
removeChild
(
this
.
openModal
);
});
this
.
gid
(
"
open-close
"
).
addEventListener
(
"
click
"
,
async
()
=>
{
await
AnimateCSS
(
this
.
openModal
,
"
fadeOut
"
);
this
.
openModal
.
parentNode
.
removeChild
(
this
.
openModal
);
});
this
.
gid
(
"
open-previous
"
).
addEventListener
(
"
click
"
,
()
=>
{
this
.
update
(
false
);
...
...
web/components/davs/share.js
View file @
c72b8f9a
...
...
@@ -100,22 +100,19 @@ export class Share {
</div>
`
;
document
.
body
.
appendChild
(
resultModal
);
this
.
gid
(
"
explorer-result-close
"
).
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
resultModal
,
"
animate__fadeOut
"
,
function
()
{
resultModal
.
parentNode
.
removeChild
(
resultModal
);
});
this
.
gid
(
"
explorer-result-close
"
).
addEventListener
(
"
click
"
,
async
()
=>
{
await
AnimateCSS
(
resultModal
,
"
fadeOut
"
);
resultModal
.
parentNode
.
removeChild
(
resultModal
);
});
}
catch
(
e
)
{
HandleError
(
e
);
}
AnimateCSS
(
shareModal
,
"
animate__fadeOut
"
,
function
()
{
shareModal
.
parentNode
.
removeChild
(
shareModal
);
});
await
AnimateCSS
(
shareModal
,
"
fadeOut
"
);
shareModal
.
parentNode
.
removeChild
(
shareModal
);
});
this
.
gid
(
"
share-cancel
"
).
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
shareModal
,
"
animate__fadeOut
"
,
function
()
{
shareModal
.
parentNode
.
removeChild
(
shareModal
);
});
this
.
gid
(
"
share-cancel
"
).
addEventListener
(
"
click
"
,
async
()
=>
{
await
AnimateCSS
(
shareModal
,
"
fadeOut
"
);
shareModal
.
parentNode
.
removeChild
(
shareModal
);
});
}
}
web/components/navbar/navbar.js
View file @
c72b8f9a
...
...
@@ -24,17 +24,16 @@ export function mount(mountpoint) {
// Hamburger menu
const
burger
=
document
.
getElementById
(
"
navbar-burger
"
);
menu
=
document
.
getElementById
(
"
navbar-menu
"
);
const
openClose
=
(
e
)
=>
{
const
openClose
=
async
(
e
)
=>
{
if
(
burger
.
classList
.
contains
(
"
is-active
"
))
{
AnimateCSS
(
menu
,
"
animate__slideOutRight
"
,
function
()
{
menu
.
classList
.
remove
(
"
is-active
"
);
burger
.
classList
.
remove
(
"
is-active
"
);
});
await
AnimateCSS
(
menu
,
"
slideOutRight
"
);
menu
.
classList
.
remove
(
"
is-active
"
);
burger
.
classList
.
remove
(
"
is-active
"
);
}
else
{
if
(
e
.
srcElement
==
burger
)
{
menu
.
classList
.
add
(
"
is-active
"
);
burger
.
classList
.
add
(
"
is-active
"
);
AnimateCSS
(
menu
,
"
animate__
slideInRight
"
);
AnimateCSS
(
menu
,
"
slideInRight
"
);
}
}
};
...
...
web/components/users/users.js
View file @
c72b8f9a
...
...
@@ -282,17 +282,16 @@ async function postUser() {
toggleModal
();
}
function
toggleModal
()
{
async
function
toggleModal
()
{
const
modal
=
document
.
getElementById
(
"
users-modal
"
);
const
card
=
document
.
getElementById
(
"
users-modal-card
"
);
if
(
modal
.
classList
.
contains
(
"
is-active
"
))
{
AnimateCSS
(
modal
,
"
animate__fadeOut
"
);
AnimateCSS
(
card
,
"
animate__zoomOut
"
,
function
()
{
modal
.
classList
.
remove
(
"
is-active
"
);
});
AnimateCSS
(
modal
,
"
fadeOut
"
);
await
AnimateCSS
(
card
,
"
zoomOut
"
);
modal
.
classList
.
remove
(
"
is-active
"
);
}
else
{
modal
.
classList
.
add
(
"
is-active
"
);
AnimateCSS
(
modal
,
"
animate__
fadeIn
"
);
AnimateCSS
(
card
,
"
animate__
zoomIn
"
);
AnimateCSS
(
modal
,
"
fadeIn
"
);
AnimateCSS
(
card
,
"
zoomIn
"
);
}
}
web/index.html
View file @
c72b8f9a
...
...
@@ -75,7 +75,7 @@
</div>
<div
class=
"navbar-menu"
>
<div
class=
"navbar-end"
>
<div
class=
"navbar-item"
><p>
v4.3.2
4
</p></div>
<div
class=
"navbar-item"
><p>
v4.3.2
5
</p></div>
</div>
</div>
</nav>
...
...
web/main.js
View file @
c72b8f9a
...
...
@@ -52,18 +52,15 @@ async function navigate() {
}
async
function
load
(
element
,
domAlteration
)
{
AnimateCSS
(
element
,
"
animate__fadeOut
"
,
async
function
()
{
element
.
classList
.
add
(
"
is-hidden
"
);
spinner
.
classList
.
remove
(
"
is-hidden
"
);
AnimateCSS
(
spinner
,
"
animate__fadeIn
"
,
async
()
=>
{
if
(
typeof
domAlteration
===
"
function
"
)
{
await
domAlteration
();
AnimateCSS
(
spinner
,
"
animate__fadeOut
"
,
()
=>
{
spinner
.
classList
.
add
(
"
is-hidden
"
);
element
.
classList
.
remove
(
"
is-hidden
"
);
AnimateCSS
(
element
,
"
animate__fadeIn
"
);
});
}
});
});
await
AnimateCSS
(
element
,
"
fadeOut
"
);
element
.
classList
.
add
(
"
is-hidden
"
);
spinner
.
classList
.
remove
(
"
is-hidden
"
);
await
AnimateCSS
(
spinner
,
"
fadeIn
"
);
if
(
typeof
domAlteration
===
"
function
"
)
{
await
domAlteration
();
await
AnimateCSS
(
spinner
,
"
fadeOut
"
);
spinner
.
classList
.
add
(
"
is-hidden
"
);
element
.
classList
.
remove
(
"
is-hidden
"
);
AnimateCSS
(
element
,
"
fadeIn
"
);
}
}
web/services/common/common.js
View file @
c72b8f9a
export
function
AnimateCSS
(
el
,
animationName
,
callback
)
{
el
.
classList
.
add
(
"
animate__animated
"
,
animationName
);
function
handleAnimationEnd
()
{
el
.
classList
.
remove
(
"
animate__animated
"
,
animationName
);
el
.
removeEventListener
(
"
animationend
"
,
handleAnimationEnd
);
if
(
typeof
callback
===
"
function
"
)
callback
();
}
el
.
addEventListener
(
"
animationend
"
,
handleAnimationEnd
);
}
export
const
AnimateCSS
=
(
element
,
animation
,
prefix
=
"
animate__
"
)
=>
// We create a Promise and return it
new
Promise
((
resolve
,
reject
)
=>
{
const
animationName
=
`
${
prefix
}${
animation
}
`
;
element
.
classList
.
add
(
`
${
prefix
}
animated`
,
animationName
);
// When the animation ends, we clean the classes and resolve the Promise
function
handleAnimationEnd
()
{
element
.
classList
.
remove
(
`
${
prefix
}
animated`
,
animationName
);
element
.
removeEventListener
(
"
animationend
"
,
handleAnimationEnd
);
resolve
(
"
Animation ended
"
);
}
element
.
addEventListener
(
"
animationend
"
,
handleAnimationEnd
);
});
export
let
GID
=
(
obj
,
id
)
=>
{
return
document
.
getElementById
(
obj
.
prefix
+
id
);
...
...
web/services/common/delete.js
View file @
c72b8f9a
...
...
@@ -38,14 +38,12 @@ export class Delete {
toggleButtons
();
await
okFunction
();
toggleButtons
();
AnimateCSS
(
deleteModal
,
"
animate__fadeOut
"
,
function
()
{
deleteModal
.
parentNode
.
removeChild
(
deleteModal
);
});
await
AnimateCSS
(
deleteModal
,
"
fadeOut
"
);
deleteModal
.
parentNode
.
removeChild
(
deleteModal
);
});
deleteCancel
.
addEventListener
(
"
click
"
,
()
=>
{
AnimateCSS
(
deleteModal
,
"
animate__fadeOut
"
,
function
()
{
deleteModal
.
parentNode
.
removeChild
(
deleteModal
);
});
deleteCancel
.
addEventListener
(
"
click
"
,
async
()
=>
{
await
AnimateCSS
(
deleteModal
,
"
fadeOut
"
);
deleteModal
.
parentNode
.
removeChild
(
deleteModal
);
});
document
.
body
.
appendChild
(
deleteModal
);
}
...
...
web/services/messages/messages.js
View file @
c72b8f9a
...
...
@@ -29,13 +29,11 @@ export function Show(bulmaClass, message) {
}
}
function
removeMsg
(
msg
,
message
,
height
)
{
AnimateCSS
(
msg
,
"
animate__fadeOutDown
"
,
function
()
{
msg
.
parentNode
.
removeChild
(
msg
);
});
offset
=
offset
-
height
;
async
function
removeMsg
(
msg
,
message
,
height
)
{
const
index
=
messages
.
indexOf
(
message
);
if
(
index
>
-
1
)
{
messages
.
splice
(
index
,
1
);
}
await
AnimateCSS
(
msg
,
"
fadeOutDown
"
);
msg
.
parentNode
.
removeChild
(
msg
);
}
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