Fixing CloseButton position when Rrose popup opens down.

GPavlovic · Mar 29, 2017 · 7778111 · 7778111
1 parent 04fac08
commit 7778111
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/leaflet.rrose-src.js b/leaflet.rrose-src.js
@@ -17,19 +17,11 @@
 
 L.Rrose = L.Popup.extend({
 
-  _initLayout:function () {
+  _initLayout: function () {
     var prefix = 'leaflet-rrose',
       container = this._container = L.DomUtil.create('div', prefix + ' ' + this.options.className + ' leaflet-zoom-animated'),
       closeButton, wrapper;
 
-    if (this.options.closeButton) {
-      closeButton = this._closeButton = L.DomUtil.create('a', prefix + '-close-button', container);
-      closeButton.href = '#close';
-      closeButton.innerHTML = '&#215;';
-
-      L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
-    }
-
     // Set the pixel distances from the map edges at which popups are too close and need to be re-oriented.
     var x_bound = 80, y_bound = 80;
     // Determine the alternate direction to pop up; north mimics Leaflet's default behavior, so we initialize to that.
@@ -51,6 +43,18 @@ L.Rrose = L.Popup.extend({
       }
     }
 
+    if (this.options.closeButton) {
+      let closeButtonClass = prefix + '-close-button';
+      if (this.options.position === 's') {
+        closeButtonClass += ' ' + prefix + '-close-button-s';
+      }
+      closeButton = this._closeButton = L.DomUtil.create('a', closeButtonClass, container);
+      closeButton.href = '#close';
+      closeButton.innerHTML = '&#215;';
+
+      L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
+    }
+
     // Create the necessary DOM elements in the correct order. Pure 'n' and 's' conditions need only one class for styling, others need two.
     if (/s/.test(this.options.position)) {
       if (this.options.position === 's') {
@@ -83,7 +87,7 @@ L.Rrose = L.Popup.extend({
 
   },
 
-  _updatePosition:function () {
+  _updatePosition: function () {
     var pos = this._map.latLngToLayerPoint(this._latlng),
       is3d = L.Browser.any3d,
       offset = this.options.offset;
@@ -112,4 +116,4 @@ L.Rrose = L.Popup.extend({
     this._container.style.left = this._containerLeft + 'px';
   }
 
-});
+});
diff --git a/leaflet.rrose.css b/leaflet.rrose.css
@@ -80,6 +80,10 @@ a.leaflet-rrose-close-button {
     font-weight: bold;
 }
 
+a.leaflet-rrose-close-button-s {
+    top: 20px;
+}
+
 a.leaflet-rrose-close-button:hover {
     color: #999;
 }
@@ -136,4 +140,4 @@ a.leaflet-rrose-close-button:hover {
 
 .leaflet-rrose-content {
     font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
-}
+}