Last active
March 2, 2021 08:16
-
-
Save leMaur/06edd3320c6247a1e8de8e1741cf7e4f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function toggleable(id) { | |
return { | |
id: id, | |
show: false, | |
bodyNeedsOverflowHidden: false, | |
originalOverflow: '', | |
id() { | |
return id || `toggleable-${Math.random().toString(36).substr(2, 10)}` | |
}, | |
open(bodyNeedsOverflowHidden) { | |
this.show = true; | |
if (bodyNeedsOverflowHidden === true) { | |
this.originalOverflow = document.body.style.overflow; | |
this.bodyNeedsOverflowHidden = !!bodyNeedsOverflowHidden; | |
document.body.style.overflow = 'hidden'; | |
} | |
}, | |
close() { | |
this.show = false; | |
if (this.bodyNeedsOverflowHidden) { | |
document.body.style.overflow = this.originalOverflow; | |
} | |
}, | |
toggle(bodyNeedsOverflowHidden) { | |
if (this.isOpen()) { | |
this.close(); | |
} else { | |
this.open(bodyNeedsOverflowHidden); | |
} | |
}, | |
isOpen() { | |
return this.show === true | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- normal dropdown --> | |
<nav x-data="toggleable()"> | |
<button type="button" :aria-expanded="isOpen()" :aria-controls="id()" @click="toggle()">click</button> | |
<div :id="id()" x-show="isOpen()" @click.away="close()" x-cloak> | |
<ul> | |
<li><a href="#">item</a></li> | |
<li><a href="#">item</a></li> | |
<li><a href="#">item</a></li> | |
</ul> | |
</div> | |
</nav> | |
<!-- dropdown with body scroll freezed --> | |
<nav x-data="toggleable()"> | |
<button type="button" :aria-expanded="isOpen()" :aria-controls="id()" @click="toggle(true)">click</button> | |
<div :id="id()" x-show="isOpen()" @click.away="close()" x-cloak> | |
<ul> | |
<li><a href="#">item</a></li> | |
<li><a href="#">item</a></li> | |
<li><a href="#">item</a></li> | |
</ul> | |
</div> | |
</nav> | |
<!-- dropdown with custom id --> | |
<nav x-data="toggleable('primary-navigation')"> | |
<button type="button" :aria-expanded="isOpen()" :aria-controls="id()" @click="toggle()">click</button> | |
<div :id="id()" x-show="isOpen()" @click.away="close()" x-cloak> | |
<ul> | |
<li><a href="#">item</a></li> | |
<li><a href="#">item</a></li> | |
<li><a href="#">item</a></li> | |
</ul> | |
</div> | |
</nav> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment