From 07b84248a1dff345234339cf136578f5228d01b5 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Wed, 2 Oct 2019 10:52:33 +0200
Subject: [PATCH] Simplify and fix ngeo Popover

---
 contribs/gmf/src/sass/map.scss |  5 +++
 src/Popover.js                 | 69 ++++++++++++----------------------
 2 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/contribs/gmf/src/sass/map.scss b/contribs/gmf/src/sass/map.scss
index f9e2eb84556b..83cf958bd2ea 100644
--- a/contribs/gmf/src/sass/map.scss
+++ b/contribs/gmf/src/sass/map.scss
@@ -155,3 +155,8 @@ button[ngeo-mobile-geolocation] {
     height: inherit;
   }
 }
+
+.gmf-permalink-tooltip {
+  white-space: nowrap;
+  margin-right: 2em;
+}
diff --git a/src/Popover.js b/src/Popover.js
index 7c27311ec5db..007b0a6be29b 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -9,34 +9,26 @@ import olOverlay from 'ol/Overlay.js';
  */
 export default class extends olOverlay {
   constructor(options = {}) {
-    super(options);
 
-    let originalEl;
-    if (options.element) {
-      originalEl = options.element;
-      delete options.element;
-    } else {
-      originalEl = $('<div />')[0];
-    }
+    const originalEl = options.element ? options.element : document.createElement('div');
+    options.element = document.createElement('div');
+
+    super(options);
 
-    /**
-     * @type {JQuery}
-     * @private
-     */
-    this.closeEl_ = $('<button>', {
-      'class': 'close',
-      'html': '&times;'
-    });
+    const closeEl = document.createElement('div');
+    closeEl.className = 'close';
+    closeEl.innerHTML = '&times;';
+    closeEl.addEventListener('click', this.close.bind(this));
 
-    /**
-     * @type {JQuery}
-     * @private
-     */
-    this.contentEl_ = $('<div/>')
-      .append(this.closeEl_)
-      .append(originalEl);
+    this.contentEl_ = document.createElement('div');
+    this.contentEl_.append(closeEl, originalEl);
+  }
 
-    options.element = $('<div />')[0];
+  close() {
+    const map = this.getMap();
+    if (map) {
+      map.removeOverlay(this);
+    }
   }
 
   /**
@@ -50,33 +42,20 @@ export default class extends olOverlay {
       $(element).popover('dispose');
     }
 
-    olOverlay.prototype.setMap.call(this, map);
+    super.setMap(map);
 
     if (map) {
       const contentEl = this.contentEl_;
       // wait for the overlay to be rendered in the map before popping over
       window.setTimeout(() => {
-        $(element)
-          .popover({
-            content: contentEl.get()[0],
-            html: true,
-            placement: 'top',
-            template: [
-              '<div class="popover ngeo-popover" role="tooltip">',
-              '  <div class="arrow"></div>',
-              '  <h3 class="popover-header"></h3>',
-              '  <div class="popover-body"></div>',
-              '</div>'
-            ].join('')
-          }).popover('show');
+        $(element).popover({
+          container: element.parentElement,
+          placement: 'top',
+          content: contentEl,
+          html: true
+        });
+        $(element).popover('show');
       }, 0);
-
-      this.closeEl_.one('click', () => {
-        const map = this.getMap();
-        if (map) {
-          map.removeOverlay(this);
-        }
-      });
     }
   }
 }