mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
This naming scheme removes some duplication which is nice, but it's a little strange and results in a longer name overall. I don't like it very much because: - filenames don't include the component's actual name. This makes it slightly harder to find them in my text editor (but I'd probably get used to that) - the namespace and class naming isn't exactly right. This is _the_ vertical_ellipsis_menu, not a subcomponent. - the stimulus controller name is now longer, adding more cruft to the HTML. Lots of discussion here: https://github.com/ViewComponent/view_component/discussions/67 People tried to come up with a better way (and I was tempted to try myself). It seems this approach won. I guess it's not so bad if your component names are shorter.
26 lines
485 B
JavaScript
26 lines
485 B
JavaScript
import { Controller } from "stimulus";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["content"];
|
|
|
|
connect() {
|
|
super.connect();
|
|
window.addEventListener("click", this.#hideIfClickedOutside);
|
|
}
|
|
|
|
toggle() {
|
|
this.contentTarget.classList.toggle("show");
|
|
}
|
|
|
|
#hideIfClickedOutside = (event) => {
|
|
if (this.element.contains(event.target)) {
|
|
return;
|
|
}
|
|
this.#hide();
|
|
};
|
|
|
|
#hide() {
|
|
this.contentTarget.classList.remove("show");
|
|
}
|
|
}
|