Sha256: 817c440a2f99b03a6f27a6b5623c12a9ccbd45abf9fdc7dcadb04755077306cd
Contents?: true
Size: 1.45 KB
Versions: 7
Compression:
Stored size: 1.45 KB
Contents
// Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
import { Controller } from "@hotwired/stimulus";
import { createPopper } from "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js";
import { useClickOutside } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
export default class UIPopover extends Controller {
static values = {
dismissAfter: Number,
};
static targets = ["content", "wrapper", "trigger"];
connect() {
useClickOutside(this);
this.popperInstance = createPopper(this.triggerTarget, this.contentTarget, {
placement: this.contentTarget.dataset.side || "bottom",
modifiers: [
{
name: "offset",
options: {
offset: [0, 8],
},
},
],
});
}
// Show the popover
show() {
this.contentTarget.classList.remove("hidden");
this.contentTarget.dataset.state = "open";
}
// Hide the popover
hide() {
this.contentTarget.classList.add("hidden");
this.contentTarget.dataset.state = "closed";
}
clickOutside(event) {
this.hide();
}
// Toggle the popover on demand
toggle(event) {
this.popperInstance.update();
if (this.contentTarget.classList.contains("hidden")) {
this.show();
if (this.hasDismissAfterValue) {
setTimeout(() => {
this.hide();
}, this.dismissAfterValue);
}
} else {
this.hide();
}
}
}
Version data entries
7 entries across 7 versions & 1 rubygems