From 9e72a5dcc219420190feae5d48b14f3360e10ddf Mon Sep 17 00:00:00 2001 From: Midgard Date: Wed, 20 May 2020 17:58:11 +0200 Subject: [PATCH] Improve style consistency --- .editorconfig | 6 ++ src/index.html | 8 +- src/js/map.js | 207 +++++++++++++++++++++++-------------------------- 3 files changed, 105 insertions(+), 116 deletions(-) diff --git a/.editorconfig b/.editorconfig index 080bd20..f0d45ef 100644 --- a/.editorconfig +++ b/.editorconfig @@ -6,8 +6,14 @@ root = true charset = utf-8 end_of_line = lf insert_final_newline = true +trim_trailing_whitespace = true indent_style = space indent_size = 4 +quote_type = double [*.html] indent_size = 2 + +[*.svg] +indent_style = tab +indent_size = unset diff --git a/src/index.html b/src/index.html index 4e9ebba..1c5a290 100644 --- a/src/index.html +++ b/src/index.html @@ -115,13 +115,13 @@ diff --git a/src/js/map.js b/src/js/map.js index 0861bb3..f534bee 100644 --- a/src/js/map.js +++ b/src/js/map.js @@ -1,16 +1,16 @@ $(document).ready(function() { /* change image path */ - L.Icon.Default.imagePath = 'img/'; + L.Icon.Default.imagePath = "img/"; - var popuptemplate = Handlebars.compile($('#popup-template').html()); + var popuptemplate = Handlebars.compile($("#popup-template").html()); var RedIcon = L.Icon.Default.extend({ options: { - iconUrl: 'red-marker.png' + iconUrl: "red-marker.png" } }); var ChristmasIcon = L.Icon.Default.extend({ options: { - iconUrl: 'christmas-marker.png' + iconUrl: "christmas-marker.png" } }); var redIcon = new RedIcon(); @@ -22,152 +22,135 @@ $(document).ready(function() { function onEachFeature(feature, layer) { if (feature.properties) { layer.bindPopup(popuptemplate(feature.properties), { - showOnMouseOver: true + showOnMouseOver: true }); } } function pointToLayer(feature, latlng) { - var marker = new HoverMarker(latlng, { icon: redIcon, riseOnHover: true}); - if (feature.properties) { - if (feature.properties.holidays && christmasHoliday) { - var marker = new HoverMarker(latlng, { icon: christmasIcon, riseOnHover: true}); + var marker = new HoverMarker(latlng, { icon: redIcon, riseOnHover: true}); + if (feature.properties) { + if (feature.properties.holidays && christmasHoliday) { + var marker = new HoverMarker(latlng, { icon: christmasIcon, riseOnHover: true}); + } + if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) { + var marker = new HoverMarker(latlng, { icon: blueIcon, riseOnHover: true}); + } } - if (!feature.properties.hours.saturday && !feature.properties.hours.sunday) { - var marker = new HoverMarker(latlng, { icon: blueIcon, riseOnHover: true}); - } - } - return marker + return marker; } - var map = L.map('map').setView([50.702, 4.335], 9); - var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}{r}.png', { + var map = L.map("map").setView([50.702, 4.335], 9); + var osm = L.tileLayer("https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}{r}.png", { attribution: 'Achtergrondkaart © OpenStreetMap-bijdragers (data) en © Mapbox (stijl) | Made with ❤ by Zeus WPI', detectRetina: true }).addTo(map); - $.getJSON('https://blokdata.zeus.gent/data.json') - .done(function(data) { - var geojson = L.geoJson(data, { - onEachFeature: onEachFeature, - pointToLayer: pointToLayer + $.getJSON("https://blokdata.zeus.gent/data.json") + .done(function(data) { + var geojson = L.geoJson(data, { + onEachFeature: onEachFeature, + pointToLayer: pointToLayer + }); + map.addLayer(geojson); }); - map.addLayer(geojson); - }); var SimpleControl = L.Control.extend({ - initialize: function(templateId, divClass, options) { - this.template = Handlebars.compile($(templateId).html()); - this.divClass = divClass; - L.Util.setOptions(this, options); - }, + initialize: function(templateId, divClass, options) { + this.template = Handlebars.compile($(templateId).html()); + this.divClass = divClass; + L.Util.setOptions(this, options); + }, - onAdd: function (map) { - this._div = L.DomUtil.create('div', this.divClass); - this._div.innerHTML = this.template(); + onAdd: function (map) { + this._div = L.DomUtil.create("div", this.divClass); + this._div.innerHTML = this.template(); - return this._div; - } + return this._div; + } }); + // code copied from http://jsfiddle.net/sowelie/3JbNY/ var HoverMarker = L.Marker.extend({ - bindPopup: function(htmlContent, options) { + bindPopup: function(htmlContent, options) { - if (options && options.showOnMouseOver) { + if (options && options.showOnMouseOver) { - // call the super method - L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]); + L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]); - // unbind the click event - this.off("click", this.openPopup, this); + this.off("click", this.openPopup, this); - // bind to mouse over - this.on("mouseover", function(e) { + this.on("mouseover", function(e) { + + // get the element that the mouse hovered onto + var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget; + var parent = this._getParent(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) + return true; + + this.openPopup(); + + }, this); + + this.on("mouseout", function(e) { + + // get the element that the mouse hovered onto + var target = e.originalEvent.toElement || e.originalEvent.relatedTarget; + + // check to see if the element is a popup + if (this._getParent(target, "leaflet-popup")) { + L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this); + return true; + } + + this.closePopup(); + + }, this); + } + }, + + _popupMouseOut: function(e) { + // detach the event + L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this); // get the element that the mouse hovered onto - var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget; - var parent = this._getParent(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) - return true; - - // show the popup - this.openPopup(); - - }, this); - - // and mouse out - this.on("mouseout", function(e) { - - // get the element that the mouse hovered onto - var target = e.originalEvent.toElement || e.originalEvent.relatedTarget; + var target = e.toElement || e.relatedTarget; // check to see if the element is a popup - if (this._getParent(target, "leaflet-popup")) { + if (this._getParent(target, "leaflet-popup")) + return true; - L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this); - return true; + // check to see if the marker was hovered back onto + 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; } - // hide the popup - this.closePopup(); - - }, this); - + return false; } - - }, - - _popupMouseOut: function(e) { - - // detach the event - L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this); - - // get the element that the mouse hovered onto - var target = e.toElement || e.relatedTarget; - - // check to see if the element is a popup - if (this._getParent(target, "leaflet-popup")) - return true; - - // check to see if the marker was hovered back onto - if (target == this._icon) - return true; - - // hide the popup - this.closePopup(); - - }, - - _getParent: function(element, className) { - - var parent = element.parentNode; - - while (parent != null) { - - if (parent.className && L.DomUtil.hasClass(parent, className)) - return parent; - - parent = parent.parentNode; - - } - - return false; - - } }); - var info = new SimpleControl('#info-template', 'info', { - position: 'topright' + var info = new SimpleControl("#info-template", "info", { + position: "topright" }).addTo(map); - var sharePane = new SimpleControl('#share-template', 'info', { - position: 'bottomleft' + var sharePane = new SimpleControl("#share-template", "info", { + position: "bottomleft" }).addTo(map); - var legend = new SimpleControl('#legend-template', christmasHoliday ? "holiday-legend" : "legend", { - position: 'bottomright' + var legend = new SimpleControl("#legend-template", christmasHoliday ? "holiday-legend" : "legend", { + position: "bottomright" }).addTo(map); });