Merge pull request #8 from hanzge/UI-2352-popover-margin

UI-2352 Add margin to popup container

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-map",
-  "version": "3.4.0",
+  "version": "3.8.0",
   "description": "A lightweight framework for building interactive maps with web components",
   "main": [
     "px-map.html"
@@ -67,4 +67,4 @@
     }
   },
   "license": "Apache-2.0"
-}
+}

demo/px-map-marker-group-demo.html

@@ -200,6 +200,7 @@
                     "popup-base": "data-popup",
                     "popup-title": "Cabrillo National Monument",
                     "popup-opened": "true",
+                    "popup-margin": "10px",
                     "popup-maxWidth": "600",
                     "popup-minWidth": "500",
                     "popup-data": {

demo/px-map-popup-info-demo.html

@@ -65,7 +65,7 @@
           attribution-prefix='<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | &copy; <a href="http://osm.org/copyright">OpenStreetMap contributors</a>'>
           <px-map-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></px-map-tile-layer>
           <px-map-marker-static lat="42.3518414" lng="-71.0500149" type="info">
-            <px-map-popup-info min-width="200" title="{{props.title.value}}1233" description="{{props.description.value}}">
+            <px-map-popup-info margin="10px" min-width="200" title="{{props.title.value}}" description="{{props.description.value}}">
             </px-map-popup-info>
           </px-map-marker-static>
           <px-map-marker-static lat="42.3518414" lng="-71.0510149" type="info">

package.json

@@ -2,7 +2,7 @@
   "name": "px-map",
   "author": "General Electric",
   "description": "A lightweight framework for building interactive maps with web components",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "private": false,
   "extName": null,
   "repository": {

px-map-behavior-popup.es6.js

@@ -41,6 +41,14 @@
         value: false
       },
 
+      /**
+       * Margin of the marker popup container
+       */
+      margin: {
+        type: String,
+        value: '15px'
+      },
+
       /**
        * Max width of popup container
        */
@@ -115,6 +123,7 @@
     getInstOptions() {
       return {
         opened: this.opened,
+        margin: this.margin,
         minWidth: this.minWidth,
         maxWidth: this.maxWidth,
       };
@@ -385,15 +394,15 @@
     _createPopup(settings={}) {
       // Assign settings and create content
       this.settings = settings;
-      const { title, description, imgSrc, styleScope, maxWidth, minWidth, customContent } = settings;
-      const content = this._generatePopupContent(title, description, imgSrc, customContent);
+      const { title, description, imgSrc, styleScope, maxWidth, margin, minWidth, customContent } = settings;
+      const content = this._generatePopupContent(margin, title, description, imgSrc, customContent);
       const className = `map-popup-info ${styleScope||''}`
 
       this.initialize({ className, maxWidth, minWidth, customContent });
       this.setContent(content);
     }
 
-    _generatePopupContent(title, description, imgSrc, customContent = []) {
+    _generatePopupContent(margin, title, description, imgSrc, customContent = []) {
       const tmplFnIf = (fn, ...vals) =>
         vals.length && vals[0] !== undefined ? fn.call(this, ...vals) : '';
 
@@ -419,7 +428,7 @@
       }
 
       return `
-        <section class="map-box-info">
+        <section class="map-box-info" style="margin: ${margin};">
           ${tmplFnIf(imgTmpl, imgSrc)}
           <div class="map-box-info__content">
             ${
@@ -518,12 +527,12 @@
     // so hopefully it won't cause grief
     _createPopup(settings={}, config={}) {
       this.settings = settings;
-      const { title, data, styleScope, maxWidth, minWidth } = settings;
+      const { title, data, styleScope, margin, maxWidth, minWidth } = settings;
       const content = this._generatePopupContent(title, data);
 
       const className = `map-popup-data ${styleScope||''}`
 
-      this.initialize({ className, maxWidth, minWidth });
+      this.initialize({ className, margin, maxWidth, minWidth });
       this.setContent(content);
     }