diff options
author | Luke Bennett <lukeeeebennettplus@gmail.com> | 2018-03-26 18:46:42 +0100 |
---|---|---|
committer | Luke Bennett <lukeeeebennettplus@gmail.com> | 2018-03-26 18:51:51 +0100 |
commit | 60432a4a7873e2b5f8ddee0d7252b1967a3a3872 (patch) | |
tree | b9c76840427b8373703adc10c92aa0bb02e9390c /app/assets/javascripts/shared | |
parent | 08290d2c43b0ae4d6689c9ca197f4f3f6fe6de70 (diff) | |
download | gitlab-ce-60432a4a7873e2b5f8ddee0d7252b1967a3a3872.tar.gz |
review
Diffstat (limited to 'app/assets/javascripts/shared')
-rw-r--r-- | app/assets/javascripts/shared/popover.js | 102 |
1 files changed, 24 insertions, 78 deletions
diff --git a/app/assets/javascripts/shared/popover.js b/app/assets/javascripts/shared/popover.js index ae4bfa1c916..8df52cfce2b 100644 --- a/app/assets/javascripts/shared/popover.js +++ b/app/assets/javascripts/shared/popover.js @@ -1,88 +1,34 @@ import $ from 'jquery'; +import { debounce } from 'underscore'; -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; +export function togglePopover(show) { + const isAlreadyShown = this.hasClass('js-popover-show'); + if ((show && isAlreadyShown) || (!show && !isAlreadyShown)) { + return false; } + this.popover(show ? 'show' : 'hide'); + this.toggleClass('disable-animation js-popover-show', show); - 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() { - if (this.$popover.is(':hover') || - (this.$popover.siblings('.popover').length > 0 && - this.$popover.siblings('.popover').is(':hover'))) return; - - this.closePopover(); - } - - closePopoverMouseleaveDelayed() { - setTimeout(this.closePopoverMouseleave.bind(this), 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.closePopoverMouseleaveDelayed.bind(this)); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close', this.closePopoverMouseleaveDelayed.bind(this)); - } - - destroyMouseleaveCloseListener() { - this.$popover.off('mouseleave.glPopover.close'); - this.$popover.siblings('.popover').on('mouseleave.glPopover.close'); - } + return true; +} - enableClose() { - this.registerClickCloseListener(); - this.registerMouseleaveCloseListener(); +export function mouseleave() { + if (!$('.popover:hover').length > 0) { + const $popover = $(this); + togglePopover.call($popover, false); } +} - disableClose() { - Popover.destroyClickCloseListener(); - this.destroyMouseleaveCloseListener(); - } +export function mouseenter() { + const $popover = $(this); - static destroyClickCloseListener() { - $(document.body).off('click.glPopover.close'); + const showedPopover = togglePopover.call($popover, true); + if (showedPopover) { + $('.popover') + .on('mouseleave', mouseleave.bind($popover)); } } + +export function debouncedMouseleave(debounceTimeout = 300) { + return debounce(mouseleave, debounceTimeout); +}
\ No newline at end of file |