! Fix profile menu toggle button to toggle menu instead of keep opening (#1437)

* ! Fix profile menu toggle button to toggle menu instead of keep opening

* ! Fix togglable buttons to toggle menu instead of keep opening
This commit is contained in:
PikachuEXE 2021-08-25 22:39:38 +08:00 committed by GitHub
parent f645bc512b
commit 8821613d6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 17 deletions

View File

@ -51,7 +51,7 @@ export default Vue.extend({
}, },
data: function () { data: function () {
return { return {
showDropdown: false, dropdownShown: false,
id: '' id: ''
} }
}, },
@ -60,25 +60,46 @@ export default Vue.extend({
}, },
methods: { methods: {
toggleDropdown: function () { toggleDropdown: function () {
$(`#${this.id}`)[0].style.display = 'inline' const dropdownBox = $(`#${this.id}`)
$(`#${this.id}`).focus()
$(`#${this.id}`).focusout(() => { if (this.dropdownShown) {
const shareLinks = $(`#${this.id}`).find('.shareLinks') dropdownBox.get(0).style.display = 'none'
this.dropdownShown = false
} else {
dropdownBox.get(0).style.display = 'inline'
dropdownBox.get(0).focus()
this.dropdownShown = true
dropdownBox.focusout(() => {
const shareLinks = dropdownBox.find('.shareLinks')
if (shareLinks.length > 0) { if (shareLinks.length > 0) {
if (!shareLinks[0].parentNode.matches(':hover')) { if (!shareLinks[0].parentNode.matches(':hover')) {
$(`#${this.id}`)[0].style.display = 'none' dropdownBox.get(0).style.display = 'none'
// When pressing the profile button
// It will make the menu reappear if we set `dropdownShown` immediately
setTimeout(() => {
this.dropdownShown = false
}, 100)
} }
} else { } else {
$(`#${this.id}`)[0].style.display = 'none' dropdownBox.get(0).style.display = 'none'
// When pressing the profile button
// It will make the menu reappear if we set `dropdownShown` immediately
setTimeout(() => {
this.dropdownShown = false
}, 100)
} }
}) })
}
}, },
focusOut: function () { focusOut: function () {
$(`#${this.id}`).focusout() const dropdownBox = $(`#${this.id}`)
$(`#${this.id}`)[0].style.display = 'none'
dropdownBox.focusout()
dropdownBox.get(0).style.display = 'none'
this.dropdownShown = false
}, },
handleIconClick: function () { handleIconClick: function () {

View File

@ -13,7 +13,7 @@ export default Vue.extend({
}, },
data: function () { data: function () {
return { return {
showProfileList: false profileListShown: false
} }
}, },
computed: { computed: {
@ -38,12 +38,25 @@ export default Vue.extend({
mounted: function () { mounted: function () {
$('#profileList').focusout(() => { $('#profileList').focusout(() => {
$('#profileList')[0].style.display = 'none' $('#profileList')[0].style.display = 'none'
// When pressing the profile button
// It will make the menu reappear if we set `profileListShown` immediately
setTimeout(() => {
this.profileListShown = false
}, 100)
}) })
}, },
methods: { methods: {
toggleProfileList: function () { toggleProfileList: function () {
$('#profileList')[0].style.display = 'inline' const profileList = $('#profileList')
$('#profileList').focus()
if (this.profileListShown) {
profileList.get(0).style.display = 'none'
this.profileListShown = false
} else {
profileList.get(0).style.display = 'inline'
profileList.get(0).focus()
this.profileListShown = true
}
}, },
openProfileSettings: function () { openProfileSettings: function () {