Improve popup layout a bit

Redo the getParent function:
* Rename to findAncestorWithClass, which is a better name.
* There's no reason the mouse event's target should not be allowed to be
  the popup's container itself, so check the element itself too.
* Return null if nothing found instead of false.

src/css/map.css

@@ -19,6 +19,7 @@ html, body {
     width: 600px;
     max-height: 400px;
     overflow-y: auto;
+    overflow-wrap: anywhere;
 }
 
 .leaflet-popup-content {
@@ -35,6 +36,10 @@ h4 {
     margin-bottom: 5px;
 }
 
+.location, .period {
+    margin-bottom: 3px;
+}
+
 table {
     padding-bottom: 10px;
     border-spacing: 0;
@@ -116,8 +121,8 @@ table {
         width: 213px;
     }
 
-    h3, .text {
+    .location, .period {
-        max-width: 150px;
+        margin-bottom: 8px;
     }
 }
 

src/index.html

@@ -35,9 +35,9 @@
     <div id="resto-popup">
       <h3>{{name}} ({{capacity}} pl.)</h3>
       <img src="img/{{type}}.png" class="type">
-      <div class="text">Locatie: {{address}}<br />
+      <div class="location">Locatie: {{address}}</div>
-        {{#if period.start}}
+      <div class="period">{{#if period.start}}
-          {{date period.start}} tot {{date period.end}}
+          Periode: {{date period.start}} tot {{date period.end}}
         {{else}}
           Open gedurende het hele jaar.
         {{/if}}

src/js/map.js

@@ -87,10 +87,10 @@ $(document).ready(function() {
 
                     // get the element that the mouse hovered onto
                     var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
-                    var parent = this._getParent(target, "leaflet-popup");
+                    var ancestor = this._findAncestorWithClass(target, "leaflet-popup");
 
                     // check to see if the element is a popup, and if it is this marker's popup
-                    if (parent == this._popup._container)
+                    if (ancestor && ancestor === this._popup._container)
                         return true;
 
                     this.openPopup();
@@ -103,7 +103,7 @@ $(document).ready(function() {
                     var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
 
                     // check to see if the element is a popup
-                    if (this._getParent(target, "leaflet-popup")) {
+                    if (this._findAncestorWithClass(target, "leaflet-popup")) {
                         L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
                         return true;
                     }
@@ -122,26 +122,24 @@ $(document).ready(function() {
             var target = e.toElement || e.relatedTarget;
 
             // check to see if the element is a popup
-            if (this._getParent(target, "leaflet-popup"))
+            if (this._findAncestorWithClass(target, "leaflet-popup"))
                 return true;
 
             // check to see if the marker was hovered back onto
-            if (target == this._icon)
+            if (target === this._icon)
                 return true;
 
             this.closePopup();
         },
 
-        _getParent: function(element, className) {
+        _findAncestorWithClass: function(element, className) {
-            var parent = element.parentNode;
+            while (element) {
-
+                if (element.className && L.DomUtil.hasClass(element, className))
-            while (parent) {
+                    return element;
-                if (parent.className && L.DomUtil.hasClass(parent, className))
+                element = element.parentNode;
-                    return parent;
-                parent = parent.parentNode;
             }
 
-            return false;
+            return null;
         }
     });
 
@@ -158,14 +156,7 @@ $(document).ready(function() {
     }).addTo(map);
 
 
-    var monthNames = ["jan.", "feb.", "mrt.", "apr.", "mei", "juni", "juli", "aug.", "sep.", "okt.", "nov.", "dec."];
     Handlebars.registerHelper("date", function (ddmyyyy) {
-        var parts = ddmyyyy.split("-");
+        return ddmyyyy.replace(/-/g, "/");
-
-        var date = parts[0];
-        var month = monthNames[parts[1] - 1];
-        var year = parts[2];
-
-        return date + " " + month + " " + year;
     })
 });