Work around Firefox glitch

app/assets/javascripts/comfy/admin/cms/page_file.js

@@ -1,36 +1,66 @@
-(($) => {
- const isImageFile = (link) => !!link.dataset.cmsPageFileThumbUrl;
+(() => {
+ const isFirefox = /\bFirefox\//.test(navigator.userAgent);
 
- const buildPageFileThumbnail = (link) => {
- const img = new Image();
- img.src = link.dataset.cmsPageFileThumbUrl;
- return img;
- };
+ class PageFileLink {
+ constructor(link) {
+ this.link = link;
+ this.isImage = !!link.dataset.cmsPageFileThumbUrl;
+
+ link.addEventListener('dragstart', (evt) => {
+ evt.dataTransfer.setData('text/plain', this.link.dataset.cmsPageFileLinkTag);
+ });
 
- const onDragStart = (evt) => {
- const link = evt.target;
- evt.dataTransfer.setData('text/plain', link.dataset.cmsPageFileLinkTag);
- if (isImageFile(link)) {
- evt.dataTransfer.setDragImage(buildPageFileThumbnail(link), 4, 2);
- $(link).popover('hide');
+ if (this.isImage) {
+ new bootstrap.Popover(link, {
+ trigger: 'hover',
+ placement: 'top',
+ content: this.buildPageFileThumbnail(),
+ html: true
+ });
+
+ link.addEventListener('dragstart', (evt) => {
+ evt.dataTransfer.setDragImage(this.buildPageFileThumbnail(), 4, 2);
+ this.getPopover().hide();
+ });
+
+ this.workAroundFirefoxPopoverGlitch();
+ }
  }
- };
 
- const initPageFileLink = (link) => {
- link.addEventListener('dragstart', onDragStart);
- if (isImageFile(link)) {
- $(link).popover({
- trigger: 'hover',
- placement: 'top',
- content: buildPageFileThumbnail(link),
- html: true
+ buildPageFileThumbnail() {
+ const img = new Image();
+ img.src = this.link.dataset.cmsPageFileThumbUrl;
+ return img;
+ }
+
+ // To work around a Firefox bug causing the popover to re-appear after the drop:
+ // https:/comfy/comfortable-mexican-sofa/pull/799#issuecomment-369124161
+ //
+ // Possibly related to:
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+ workAroundFirefoxPopoverGlitch() {
+ if (!isFirefox) return;
+ this.link.addEventListener('dragstart', () => {
+ this.getPopover().disable();
+ });
+ this.link.addEventListener('dragend', () => {
+ setTimeout(() => {
+ const popover = this.getPopover();
+ popover.enable();
+ popover.hide();
+ }, 300);
  });
  }
- };
+
+ // We can't keep a reference to the Popover object, because Bootstrap re-creates it internally.
+ getPopover() {
+ return jQuery(this.link).data(bootstrap.Popover.DATA_KEY);
+ }
+ }
 
  window.CMS.page_files = () => {
  for (const link of document.querySelectorAll('[data-cms-page-file-link-tag]')) {
- initPageFileLink(link);
+ new PageFileLink(link);
  }
  };
-})(jQuery);
+})();