BigW Consortium Gitlab
Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gitlab-ce
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
Forest Godfrey
gitlab-ce
Commits
8990410e
Commit
8990410e
authored
Sep 12, 2017
by
Bryce Johnson
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Remove emoji-menu from the render tree when hidden.
parent
d15109dc
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
47 additions
and
6 deletions
+47
-6
awards_handler.js
app/assets/javascripts/awards_handler.js
+39
-6
awards.scss
app/assets/stylesheets/framework/awards.scss
+8
-0
No files found.
app/assets/javascripts/awards_handler.js
View file @
8990410e
...
...
@@ -23,6 +23,9 @@ const categoryLabelMap = {
flags
:
'Flags'
,
};
const
IS_VISIBLE
=
'is-visible'
;
const
IS_RENDERED
=
'is-rendered'
;
class
AwardsHandler
{
constructor
(
emoji
)
{
this
.
emoji
=
emoji
;
...
...
@@ -50,7 +53,7 @@ class AwardsHandler {
if
(
!
$target
.
closest
(
'.emoji-menu'
).
length
)
{
if
(
$
(
'.emoji-menu'
).
is
(
':visible'
))
{
$
(
'.js-add-award.is-active'
).
removeClass
(
'is-active'
);
$
(
'.emoji-menu'
).
removeClass
(
'is-visible'
);
this
.
hideMenuElement
(
$
(
'.emoji-menu'
)
);
}
}
});
...
...
@@ -87,12 +90,12 @@ class AwardsHandler {
if
(
$menu
.
length
)
{
if
(
$menu
.
is
(
'.is-visible'
))
{
$addBtn
.
removeClass
(
'is-active'
);
$menu
.
removeClass
(
'is-visible'
);
this
.
hideMenuElement
(
$menu
);
$
(
'.js-emoji-menu-search'
).
blur
();
}
else
{
$addBtn
.
addClass
(
'is-active'
);
this
.
positionMenu
(
$menu
,
$addBtn
);
$menu
.
addClass
(
'is-visible'
);
this
.
showMenuElement
(
$menu
);
$
(
'.js-emoji-menu-search'
).
focus
();
}
}
else
{
...
...
@@ -102,7 +105,7 @@ class AwardsHandler {
$addBtn
.
removeClass
(
'is-loading'
);
this
.
positionMenu
(
$createdMenu
,
$addBtn
);
return
setTimeout
(()
=>
{
$createdMenu
.
addClass
(
'is-visible'
);
this
.
showMenuElement
(
$createdMenu
);
$
(
'.js-emoji-menu-search'
).
focus
();
},
200
);
});
...
...
@@ -240,7 +243,8 @@ class AwardsHandler {
if
(
gl
.
utils
.
isInIssuePage
()
&&
!
isMainAwardsBlock
)
{
const
id
=
votesBlock
.
attr
(
'id'
).
replace
(
'note_'
,
''
);
$
(
'.emoji-menu'
).
removeClass
(
'is-visible'
);
this
.
hideMenuElement
(
$
(
'.emoji-menu'
));
$
(
'.js-add-award.is-active'
).
removeClass
(
'is-active'
);
const
toggleAwardEvent
=
new
CustomEvent
(
'toggleAward'
,
{
detail
:
{
...
...
@@ -260,7 +264,8 @@ class AwardsHandler {
return
typeof
callback
===
'function'
?
callback
()
:
undefined
;
});
$
(
'.emoji-menu'
).
removeClass
(
'is-visible'
);
this
.
hideMenuElement
(
$
(
'.emoji-menu'
));
return
$
(
'.js-add-award.is-active'
).
removeClass
(
'is-active'
);
}
...
...
@@ -528,6 +533,34 @@ class AwardsHandler {
return
$matchingElements
.
closest
(
'li'
).
clone
();
}
/* showMenuElement and hideMenuElement are performance optimizations. We use
* opacity to show/hide the emoji menu, because we can animate it. But opacity
* leaves hidden elements in the render tree, which is unacceptable given the number
* of emoji elements in the emoji menu (5k+). To get the best of both worlds, we separately
* apply IS_RENDERED to add/remove the menu from the render tree and IS_VISIBLE to animate
* the menu being opened and closed. */
showMenuElement
(
$emojiMenu
)
{
// enqueues animation as a microtask, so it begins ASAP once IS_RENDERED added
Promise
.
resolve
().
then
(()
=>
{
// eslint-disable-line promise/catch-or-return
$emojiMenu
.
addClass
(
IS_VISIBLE
);
});
$emojiMenu
.
addClass
(
IS_RENDERED
);
}
hideMenuElement
(
$emojiMenu
)
{
$emojiMenu
.
on
(
transitionEndEventString
,
(
e
)
=>
{
if
(
e
.
currentTarget
===
e
.
target
)
{
$emojiMenu
.
removeClass
(
IS_RENDERED
)
.
off
(
transitionEndEventString
);
}
});
$emojiMenu
.
removeClass
(
IS_VISIBLE
);
}
destroy
()
{
this
.
eventListeners
.
forEach
((
entry
)
=>
{
entry
.
element
.
off
.
call
(
entry
.
element
,
...
entry
.
args
);
...
...
app/assets/stylesheets/framework/awards.scss
View file @
8990410e
...
...
@@ -27,6 +27,14 @@
transition
:
.3s
cubic-bezier
(
.67
,
.06
,
.19
,
1
.44
);
transition-property
:
transform
,
opacity
;
&
.is-rendered
{
display
:
block
;
}
&
:not
(
.is-rendered
)
{
display
:
none
;
}
&
.is-aligned-right
{
transform-origin
:
100%
-45px
;
}
...
...
Write
Preview
Markdown
is supported
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