Add popover
This commit is contained in:
parent
a5ab67228f
commit
0488d44cc2
1 changed files with 84 additions and 0 deletions
84
app/assets/javascripts/shared/popover.js
Normal file
84
app/assets/javascripts/shared/popover.js
Normal file
|
@ -0,0 +1,84 @@
|
|||
export default class Popover {
|
||||
constructor(trigger, content) {
|
||||
this.isOpen = false;
|
||||
|
||||
this.$popover = $(trigger).popover({
|
||||
content,
|
||||
html: true,
|
||||
placement: 'bottom',
|
||||
trigger: 'manual',
|
||||
});
|
||||
}
|
||||
|
||||
init() {
|
||||
this.registerClickOpenListener();
|
||||
}
|
||||
|
||||
openPopover() {
|
||||
if (this.isOpen) return;
|
||||
|
||||
this.$popover.popover('show');
|
||||
this.$popover.one('shown.bs.popover', this.enableClose.bind(this));
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
closePopover() {
|
||||
if (!this.isOpen) return;
|
||||
|
||||
this.$popover.popover('hide');
|
||||
this.disableClose();
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
closePopoverClick(event) {
|
||||
const $target = $(event.target);
|
||||
|
||||
if ($target.is(this.$popover) ||
|
||||
$target.is('.popover') ||
|
||||
$target.parents('.popover').length > 0) return;
|
||||
|
||||
this.closePopover();
|
||||
}
|
||||
|
||||
closePopoverMouseleave() {
|
||||
setTimeout(() => {
|
||||
if (this.$popover.is(':hover') ||
|
||||
(this.$popover.siblings('.popover').length > 0 &&
|
||||
this.$popover.siblings('.popover').is(':hover'))) return;
|
||||
|
||||
this.closePopover();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
registerClickOpenListener() {
|
||||
this.$popover.on('click.glPopover.open', this.openPopover.bind(this));
|
||||
}
|
||||
|
||||
registerClickCloseListener() {
|
||||
$(document.body).on('click.glPopover.close', this.closePopoverClick.bind(this));
|
||||
}
|
||||
|
||||
registerMouseleaveCloseListener() {
|
||||
this.$popover.on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this));
|
||||
this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleave.bind(this));
|
||||
}
|
||||
|
||||
destroyMouseleaveCloseListener() {
|
||||
this.$popover.off('mouseleave.glPopover.close');
|
||||
this.$popover.siblings('.popover').on('mouseleave.glPopover.close');
|
||||
}
|
||||
|
||||
enableClose() {
|
||||
this.registerClickCloseListener();
|
||||
this.registerMouseleaveCloseListener();
|
||||
}
|
||||
|
||||
disableClose() {
|
||||
Popover.destroyClickCloseListener();
|
||||
this.destroyMouseleaveCloseListener();
|
||||
}
|
||||
|
||||
static destroyClickCloseListener() {
|
||||
$(document.body).off('click.glPopover.close');
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue