Compare commits

...

2 Commits

Author SHA1 Message Date
Midgard 9102750770
Improve popup layout a bit 2020-05-21 02:59:29 +02:00
Midgard 77ceb6fa47
Make function more sensible
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.
2020-05-21 02:26:44 +02:00
3 changed files with 22 additions and 26 deletions

View File

@ -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 {
max-width: 150px;
.location, .period {
margin-bottom: 8px;
}
}

View File

@ -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 />
{{#if period.start}}
{{date period.start}} tot {{date period.end}}
<div class="location">Locatie: {{address}}</div>
<div class="period">{{#if period.start}}
Periode: {{date period.start}} tot {{date period.end}}
{{else}}
Open gedurende het hele jaar.
{{/if}}

View File

@ -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) {
var parent = element.parentNode;
while (parent) {
if (parent.className && L.DomUtil.hasClass(parent, className))
return parent;
parent = parent.parentNode;
_findAncestorWithClass: function(element, className) {
while (element) {
if (element.className && L.DomUtil.hasClass(element, className))
return element;
element = element.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("-");
var date = parts[0];
var month = monthNames[parts[1] - 1];
var year = parts[2];
return date + " " + month + " " + year;
return ddmyyyy.replace(/-/g, "/");
})
});