review

4 files changed, 42 insertions, 116 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index c50ac667c20..a3eaf5b32cd 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -5,7 +5,7 @@ import {
   togglePopover,
   inserted,
   mouseenter,
-  mouseleave,
+  debouncedMouseleave,
 } from './feature_highlight_helper';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
@@ -13,7 +13,6 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $parent = $selector.parent();
   const $popoverContent = $parent.siblings('.feature-highlight-popover-content');
   const hideOnScroll = togglePopover.bind($selector, false);
-  const debouncedMouseleave = _.debounce(mouseleave, debounceTimeout);
 
   $selector
     // Setup popover
@@ -29,7 +28,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
       `,
     })
     .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave)
+    .on('mouseleave', debouncedMouseleave(debounceTimeout))
     .on('inserted.bs.popover', inserted)
     .on('show.bs.popover', () => {
       window.addEventListener('scroll', hideOnScroll);
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index f480e72961c..bcc7cefc2f2 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -3,20 +3,10 @@ import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import Flash from '../flash';
 import LazyLoader from '../lazy_loader';
+import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
 
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
-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);
-
-  return true;
-}
-
 export function dismiss(highlightId) {
   axios.post(this.attr('data-dismiss-endpoint'), {
     feature_name: highlightId,
@@ -27,23 +17,6 @@ export function dismiss(highlightId) {
   this.hide();
 }
 
-export function mouseleave() {
-  if (!$('.popover:hover').length > 0) {
-    const $featureHighlight = $(this);
-    togglePopover.call($featureHighlight, false);
-  }
-}
-
-export function mouseenter() {
-  const $featureHighlight = $(this);
-
-  const showedPopover = togglePopover.call($featureHighlight, true);
-  if (showedPopover) {
-    $('.popover')
-      .on('mouseleave', mouseleave.bind($featureHighlight));
-  }
-}
-
 export function inserted() {
   const popoverId = this.getAttribute('aria-describedby');
   const highlightId = this.dataset.highlight;
@@ -58,3 +31,5 @@ export function inserted() {
     LazyLoader.loadImage(lazyImg);
   }
 }
+
+export { togglePopover, mouseenter, debouncedMouseleave };
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 22aeb396318..5a7843f3093 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import Popover from './shared/popover';
+import { mouseenter, debouncedMouseleave } from './shared/popover';
 
 export default class Milestone {
   constructor() {
@@ -47,14 +47,20 @@ export default class Milestone {
   }
 
   static initDeprecationMessage() {
-    const deprecationMesssage = document.querySelector('.milestone-deprecation-message');
+    const deprecationMesssageContainer = document.querySelector('.milestone-deprecation-message');
 
-    if (!deprecationMesssage) return;
+    if (!deprecationMesssageContainer) return;
 
-    const deprecationMesssageTemplate = deprecationMesssage.querySelector('.milestone-deprecation-message-template').innerHTML;
-    const popoverLink = deprecationMesssage.querySelector('.popover-link');
+    const deprecationMessage = deprecationMesssageContainer.querySelector('.milestone-deprecation-message-template').innerHTML;
+    const popoverLink = deprecationMesssageContainer.querySelector('.popover-link');
 
-    const popover = new Popover(popoverLink, deprecationMesssageTemplate);
-    popover.init();
+    $(popoverLink).popover({
+      content: deprecationMessage,
+      html: true,
+      placement: 'bottom',
+      trigger: 'manual',
+    })
+    .on('mouseenter', mouseenter)
+    .on('mouseleave', debouncedMouseleave());
   }
 }
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