initial commit

js/core.js

@@ -0,0 +1,147 @@
+
+
+//Update url //Rester au même endroit de la liste après clic const 
+searchInput = document.getElementById("search");
+var refreshCategories = true;
+var currentCategory = null;
+var regexValue = '.*';
+var searchedFeatures;
+searchInput.addEventListener('input', function (evt) {
+	display(this.value);
+});
+
+function categoryFilter(categorie) {
+	if (currentCategory === categorie) {
+		document.getElementById(currentCategory).classList.remove('selected');
+		currentCategory = null;
+		display(searchInput.value);
+	} else if (currentCategory != null) {
+		document.getElementById(currentCategory).classList.remove('selected');
+		document.getElementById(categorie).classList.add('selected');
+		currentCategory = categorie;
+		display(searchInput.value);
+	} else {
+		document.getElementById(categorie).classList.add('selected');
+		currentCategory = categorie;
+		display(searchInput.value);
+	}
+}
+
+function display(value) {
+	regexValue = '.*' + value + '.*';
+	searchedFeatures = data.features.filter(function (feature) {
+		const regex = new RegExp(regexValue, 'gi');
+		if (currentCategory === null) {
+			return feature.properties.name.match(regex);
+		} else {
+			return feature.properties.name.match(regex) && feature.properties.category.match(currentCategory);
+		}
+	});
+	var categories = [];
+	var categoriesLink = '';
+	var locationLink = '';
+	searchedFeatures.forEach(function (element) {
+		if (refreshCategories) {
+			var category = element.properties.category;
+			if (!categories.includes(category)) {
+				categories.push(category);
+				categoriesLink += `<button id="${category}" onClick="categoryFilter('${category}');" >${category}</button>`;
+			}
+		}
+		var long = element.geometry.coordinates[0];
+		var lat = element.geometry.coordinates[1];
+		locationLink += `<button id="${lat}-${long}" class="item" href="javascript:;" onClick="focusOnLocation('${lat}', '${long}');"> <div class ="icon icon-care"></div> <div> <div><b>${element.properties.name}</b></div> ${element.properties.chapo} </div> </button>`;
+	});
+	document.getElementById('list').innerHTML = locationLink;
+	if (refreshCategories) {
+		document.getElementById('categories').innerHTML = categoriesLink;
+	}
+	refreshCategories = false;
+}
+
+function focusOnLocation(lat, long) {
+	document.getElementById("action").classList.remove('suggestion');
+	document.getElementById("action").classList.add('geo');
+	var infoElements = document.getElementsByClassName('item-info');
+	Array.prototype.forEach.call(infoElements, function (infoElement) {
+		infoElement.style.display = "block";
+	});
+	var mapElements = document.getElementsByClassName('map-info');
+	Array.prototype.forEach.call(mapElements, function (mapElement) {
+		mapElement.style.display = "none";
+	});
+	searchedFeatures.forEach(function (element) {
+		var currentLong = element.geometry.coordinates[0];
+		var currentLat = element.geometry.coordinates[1];
+		if (currentLat == lat && currentLong == long) {
+			map.setView([lat, long], 17);
+			document.getElementById('name').innerHTML = element.properties.name;
+			document.getElementById('description').innerHTML = element.properties.description;
+			document.getElementById('action').href = `geo:${lat},${long}`;
+			document.getElementById('contact').innerHTML = "";
+			var contactContent = '';
+			var webValue = element.properties.website;
+			if (webValue !== undefined) {
+				var web = `<a class="icon icon-web" href="${webValue}"></a>`;
+				contactContent += web;
+			}
+			var phoneValue = element.properties.phone;
+			if (phoneValue !== undefined) { //TODO : Don't show if undefined
+				var phone = `<a class="icon icon-phone" href="tel:${phoneValue}"></a>`;
+				contactContent += phone;
+			}
+			var mailValue = element.properties.mail;
+			if (phoneValue !== undefined) {
+				var mail = `<a class="icon icon-mail" href="mailto:${mailValue}"></a>`;
+				contactContent += mail;
+			}
+			var facebookValue = element.properties.mail;
+			if (facebookValue !== undefined) {
+				var facebook = `<a class="icon icon-facebook" href="${facebookValue}"></a>`;
+				contactContent += facebook;
+			}
+			document.getElementById('contact').innerHTML += contactContent;
+			var popup = L.popup().setLatLng(new L.LatLng(lat, long)).setContent(element.properties.name).openOn(map);
+		}
+	});
+}
+
+function closeDetail() {
+	document.getElementById("action").classList.remove('geo');
+	document.getElementById("action").classList.add('suggestion');
+	var infoElements = document.getElementsByClassName('item-info');
+	Array.prototype.forEach.call(infoElements, function (infoElement) {
+		infoElement.style.display = "none";
+	});
+	var mapElements = document.getElementsByClassName('map-info');
+	Array.prototype.forEach.call(mapElements, function (mapElement) {
+		mapElement.style.display = "block";
+	});
+}
+display(''); /** Leaflet **/
+function whenClicked(e) {
+	var lat = e.latlng.lat;
+	var long = e.latlng.lng;
+	focusOnLocation(lat, long);
+}
+
+function onEachFeature(feature, layer) {
+	layer.on({
+		click: whenClicked
+	});
+}
+
+function searchFilter(feature) {
+	return feature.properties.name.match(regexValue);
+}
+var map = L.map('map').setView([47.16801, 5.174217], 11);
+map.zoomControl.setPosition('topright');
+map.attributionControl.setPosition('bottomleft');
+L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png', {
+	id: 'mapbox.light'
+}).addTo(map); //TODO : Refresh when filter
+L.geoJson(searchedFeatures, {
+	filter: searchFilter,
+	onEachFeature: onEachFeature
+}).addTo(map);
+

js/main.js

@@ -0,0 +1,13 @@
+window.onload = () => {
+	'use strict';
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.register('sw.js', {
+			scope: '/map/'
+		}).then(function (reg) { // registration worked 
+			console.log('Registration succeeded. Scope is ' + reg.scope);
+		}).catch(function (error) { // registration failed 
+			console.log('Registration failed with ' + error);
+		});
+	};
+}
+