From 371a4ad018bf546af0b84b8dd1254fde4767e045 Mon Sep 17 00:00:00 2001
From: Rajko Zschiegner <ricki_z@gmx.de>
Date: Tue, 23 Apr 2019 13:39:51 +0200
Subject: [PATCH 1/2] remake of option select

more d3
---
 src/css/style.css     |  18 ++--
 src/index.html        |  12 +--
 src/js/config.js.dist |   2 +
 src/js/index.js       | 208 ++++++++++--------------------------------
 4 files changed, 68 insertions(+), 172 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 52d572ce..7c158ac3 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -256,7 +256,7 @@ body {
 	background: linear-gradient(to top, #dd2e97 0%,#6b3b8f 12.5%, #2979b9 25%, #02B9ed 37.5%, #13ae52 50%, #c9d841 62.5%, #fad635 75%, #f0a03d 87.5%, #892725 100%);
 }
 
-#legend_Official_AQI_US span {
+#legend_Official_AQI_US .AQI_color {
 	display: inline-block;
 	width: 15px;
 	height: 15px;
@@ -274,33 +274,39 @@ body {
 li {
 	display: list-item;
 	text-align: -webkit-match-parent;
+	width: 100%;
 	pointer-events: auto;
 }
 
-
 .tooltip {
 	text-decoration:none;
 	position:relative;
     cursor:pointer;
 }
 
-.tooltip div {
+.tooltip-text {
+}
+
+.tooltip-text div {
 	display:none;
 	pointer-events: auto;
 }
 
-.tooltip:hover div {
-	display:block;
-	position:fixed;
+.tooltip-text:hover div {
+	display:inline;
+	position:absolute;
+	bottom:0px;
 	overflow:hidden;
 	background-color: rgba(56, 181, 173, 1);
 	z-index:1000;
+	margin-left: 5px;
 }
 
 .tooltip-div {
 	padding: 5px;
 	border-radius: 5px;
 	width:auto;
+	min-width: 200px;
 	max-width: 500px;
 	height:auto;
 }
diff --git a/src/index.html b/src/index.html
index 9d55f786..8f51f1e1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -72,12 +72,12 @@
 			<div class ="legend" id="legend_Official_AQI_US" style="display: none;">
 <!--				<h3>Air quality US</h3>-->
 				<ul>
-					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span style="background-color:#00E400"></span> Good<div class="tooltip-div">Air quality is considered satisfactory, and air pollution poses little or no risk.</div></li>
-					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span style="background-color:#FFFF00"></span> Moderate<div class="tooltip-div">Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution.</div></li>
-					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span style="background-color:#FF7E00"></span> Unhealthy for Sensitive Groups<div class="tooltip-div">Members of sensitive groups may experience health effects. The general public is not likely to be affected. </div></li>
-					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span style="background-color:#FF0000"></span> Unhealthy<div class="tooltip-div">Everyone may begin to experience health effects; members of sensitive groups may experience more serious health effects.</div></li>
-					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span style="background-color:rgb(143, 63, 151)"></span> Very Unhealthy<div class="tooltip-div">Health alert: everyone may experience more serious health effects.</div></li>
-					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span style="background-color:#7E0023"></span> Hazardous<div class="tooltip-div">Health warnings of emergency conditions. The entire population is more likely to be affected.</div></li>
+					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span class="AQI_color" style="background-color:#00E400"></span><span class="tooltip-text"> Good<div class="tooltip-div">Air quality is considered satisfactory, and air pollution poses little or no risk.</div></span></li>
+					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span class="AQI_color" style="background-color:#FFFF00"></span><span class="tooltip-text"> Moderate<div class="tooltip-div">Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution.</div></span></li>
+					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span class="AQI_color" style="background-color:#FF7E00"></span><span class="tooltip-text"> Unhealthy for Sensitive Groups<div class="tooltip-div">Members of sensitive groups may experience health effects. The general public is not likely to be affected. </div></span></li>
+					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span class="AQI_color" style="background-color:#FF0000"></span><span class="tooltip-text"> Unhealthy<div class="tooltip-div">Everyone may begin to experience health effects; members of sensitive groups may experience more serious health effects.</div></span></li>
+					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span class="AQI_color" style="background-color:rgb(143, 63, 151)"></span><span class="tooltip-text"> Very Unhealthy<div class="tooltip-div">Health alert: everyone may experience more serious health effects.</div></span></li>
+					<li class="tooltip" onclick="window.open('https://www.airnow.gov/index.cfm?action=aqibasics.aqi','_blank')"><span class="AQI_color" style="background-color:#7E0023"></span><span class="tooltip-text"> Hazardous<div class="tooltip-div">Health warnings of emergency conditions. The entire population is more likely to be affected.</div></span></li>
 				</ul>
 			</div>
 
diff --git a/src/js/config.js.dist b/src/js/config.js.dist
index ab1d51c1..3b9226b4 100644
--- a/src/js/config.js.dist
+++ b/src/js/config.js.dist
@@ -3,7 +3,9 @@ module.exports = {
 	"zoom" : 2,
 	"minZoom": 2,
 	"maxZoom": 16,
+	// phenomenon shown at start, possible values: PM10, PM25, Official_AQI_US, Temperature, Humidity, Pressure
 	"selection": "PM10",
+	// Tiles
 	"tiles": "https://maps.luftdaten.info/tiles/{z}/{x}/{y}.png",
 	"attribution": "Map data © <a href='https://openstreetmap.org'>OpenStreetMap</a> contributors"
 }
diff --git a/src/js/index.js b/src/js/index.js
index 82b31d8e..268f420b 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -36,12 +36,16 @@ var tiles;
 
 var selector1 = config.selection;
 
-var lang = 	lang = translate.getFirstBrowserLanguage().substring(0,2);
+var lang = translate.getFirstBrowserLanguage().substring(0,2);
 
 var openedGraph1 = [];
 
 var is_click;
 
+var click_inside_select = false;
+
+var query={};
+
 var locale = d3.timeFormatLocale({
 	"dateTime": "%Y.%m.%d %H:%M:%S",
 	"date": "%d.%m.%Y",
@@ -97,39 +101,27 @@ var panelIDs = {
 					"Pressure": [8,7]
 }
 
-
-var div = d3.select("#sidebar").append("div")
-				.attr("id", "table")
-				.style("display", "none");
-
-var tooltipDiv = document.getElementsByClassName('tooltip-div');
+var div = d3.select("#sidebar").append("div").attr("id", "table").style("display", "none");
 
 function console_log(text) {
 	console.log(text);
 }
 
-window.onmousemove = function (e) {
-	var x = e.clientX,
-	y = e.clientY;
-
-	for (var i = 0; i < tooltipDiv.length; i++) {
-		tooltipDiv.item(i).style.top = (y - 10 )+ 'px';
-		tooltipDiv.item(i).style.left = (x + 20) + 'px';
-	};
-};
-
-var i=0;
-var telem;
-var search_values=location.search.replace('\?','').split('&');
-var query={}
-for(i=0;i<search_values.length;i++){
-    telem=search_values[i].split('=');
-    query[telem[0]]='';
-    if (typeof telem[1] != 'undefined') {
-		query[telem[0]]=telem[1];
+function get_query_vars() {
+	var i=0;
+	var telem;
+	var search_values=location.search.replace('\?','').split('&');
+	for(i=0;i<search_values.length;i++) {
+		telem=search_values[i].split('=');
+		query[telem[0]]='';
+		if (typeof telem[1] != 'undefined') {
+			query[telem[0]]=telem[1];
+		}
 	}
 }
 
+get_query_vars();
+
 console_log("Query No overlay: "+query.nooverlay);
 if (typeof query.nooverlay !== "undefined") {
 	var nooverlay = true;
@@ -137,8 +129,6 @@ if (typeof query.nooverlay !== "undefined") {
 	d3.select("#betterplace").style("display", "inline-block");
 }
 
-//var coordsCenter = [50.495171, 9.730827];
-//var zoomLevel = 6;
 var coordsCenter = config.center;
 var zoomLevel = config.zoom;
 
@@ -183,6 +173,8 @@ The values are refreshed every 5 minutes in order to fit with the measurement fr
 	});
 
 	d3.select("#custom-select").style("display","inline-block");
+	d3.select("#custom-select").select("select").property("value", config.selection);
+	d3.select("#custom-select").append("div").attr("class","select-selected").html(translate.tr(lang,d3.select("#custom-select").select("select").select("option:checked").text())).on("click",showAllSelect);
 
 	map.setView(coordsCenter, zoomLevel);
 	
@@ -244,9 +236,11 @@ map = L.map('map',{ zoomControl:true,minZoom:config.minZoom,maxZoom:config.maxZo
 
 new L.Hash(map);
 
-tiles = L.tileLayer(config.tiles,{
-			attribution: config.attribution,
-			maxZoom: config.maxZoom, minZoom: config.minZoom}).addTo(map);
+tiles = L.tileLayer(config.tiles, {
+				attribution: config.attribution,
+				maxZoom: config.maxZoom,
+				minZoom: config.minZoom
+			}).addTo(map);
 
 function switch_legend(val) {
 	d3.select('#legendcontainer').selectAll("[id^=legend_]").style("display","none");
@@ -356,13 +350,6 @@ function reload(val){
 	} else if (val == "Temperature" || val == "Humidity" || val == "Pressure") {
 		hexagonheatmap.data(hmhexa_t_h_p.filter(function(value){return check_values(value.data[val]);}));
 	}
-
-	if (sidebar.style.display === "block") {
-		sidebar.style.display = "none";
-		if(!d3.select("#results").empty()){
-			d3.select("#results").remove();
-		};
-	};
 };
 
 function getRightValue(array,type){
@@ -680,7 +667,6 @@ L.hexbinLayer = function(options) {
 	return new L.HexbinLayer(options);
 };
 
-
 function sensorNr(data){
 
 	var inner_pre = "#";
@@ -838,132 +824,34 @@ function removeInArray(array) {
 	return array;
 }
 
-//SELECT
-
-var x, i, j, selElmnt, a, b, c;
-console_log("test");
-d3.select("#custom-select").select("select").property("value", config.selection);
-/*look for any elements with the class "custom-select":*/
-x = document.getElementById("custom-select");
-selElmnt = x.getElementsByTagName("select")[0];
-selector1 = selElmnt.value;
-console_log(selElmnt.value);
-console_log(selElmnt.selectedIndex);
-/*for each element, create a new DIV that will act as the selected item:*/
-a = document.createElement("DIV");
-a.setAttribute("class", "select-selected");
-a.innerHTML = translate.tr(lang,selElmnt.options[selElmnt.selectedIndex].innerHTML);
-x.appendChild(a);
-/*for each element, create a new DIV that will contain the option list:*/
-b = document.createElement("DIV");
-b.setAttribute("class", "select-items select-hide");
-
-for (j = 0; j < selElmnt.length; j++) {
-	if (selElmnt.options[j].value != selector1){
-
-		/*for each option in the original select element,
-		create a new DIV that will act as an option item:*/
-		c = document.createElement("DIV");
-		c.innerHTML = translate.tr(lang,selElmnt.options[j].innerHTML);
-		c.addEventListener("click", function(e) {
-			/*when an item is clicked, update the original select box,
-			and the selected item:*/
-			var y, i, k, s, h;
-			s = this.parentNode.parentNode.getElementsByTagName("select")[0];
-			h = this.parentNode.previousSibling;
-			for (i = 0; i < s.length; i++) {
-				if (s.options[i].innerHTML == this.innerHTML) {
-
-					reload(s.options[i].value);
-					s.selectedIndex = i;
-					h.innerHTML = this.innerHTML;
-
-//					console_log(h.value);
-//					console_log(this.innerHTML);
-//
-//					y = this.parentNode.getElementsByClassName("same-as-selected");
-//					for (k = 0; k < y.length; k++) {
-//						y[k].removeAttribute("class");
-//					}
-//					this.setAttribute("class", "same-as-selected");
-					break;
-				}
+function showAllSelect() {
+	click_inside_select = true;
+	if (d3.select("#custom-select").select(".select-items").empty()) {
+		d3.select("#custom-select").append("div").attr("class","select-items");
+		d3.select("#custom-select").select("select").selectAll("option").each(function(d,i) {
+			if (this.value != selector1) {
+				d3.select("#custom-select").select(".select-items").append("div").text(this.text).attr("id","select-item-"+this.value).on("click",function(){ switchTo(this);});
 			}
-			h.click();
 		});
-		b.appendChild(c);
+		d3.select("#custom-select").select(".select-selected").attr("class","select-selected select-arrow-active");
 	}
 }
 
-x.appendChild(b);
-a.addEventListener("click", function(e) {
-	/*when the select box is clicked, close any other select boxes,
-	and open/close the current select box:*/
-	e.stopPropagation();
-	closeAllSelect(this);
-	this.nextSibling.classList.toggle("select-hide");
-	this.classList.toggle("select-arrow-active");
-});
-
-function closeAllSelect(elmnt) {
-	/*a function that will close all select boxes in the document,
-	except the current select box:*/
-	var x, y,z, i, arrNo = [],selElmnt;
-	x = document.getElementsByClassName("select-items");
-	y = document.getElementsByClassName("select-selected");
-	z = document.getElementsByClassName("same-as-selected");
-	selElmnt = document.getElementsByTagName("select")[0];
-	for (i = 0; i < y.length; i++) {
-		if (elmnt == y[i]) {
-			arrNo.push(i)
-			var element = x[0];
-			while (element.firstChild) {
-				element.removeChild(element.firstChild);
-			};
-
-			for (j = 0; j < selElmnt.length; j++) {
-
-				if (selElmnt.options[j].value != selector1){
-
-					/*for each option in the original select element,
-					create a new DIV that will act as an option item:*/
-					c = document.createElement("DIV");
-					c.innerHTML = selElmnt.options[j].innerHTML;
-					c.addEventListener("click", function(e) {
-						/*when an item is clicked, update the original select box,
-						and the selected item:*/
-						var y, i, k, s, h;
-						s = this.parentNode.parentNode.getElementsByTagName("select")[0];
-						h = this.parentNode.previousSibling;
-						for (i = 0; i < s.length; i++) {
-							if (s.options[i].innerHTML == this.innerHTML) {
-
-								reload(s.options[i].value);
-								s.selectedIndex = i;
-								h.innerHTML = this.innerHTML;
-//								y = this.parentNode.getElementsByClassName("same-as-selected");
-//								for (k = 0; k < y.length; k++) {
-//									y[k].removeAttribute("class");
-//								}
-//								this.setAttribute("class", "same-as-selected");
-								break;
-							}
-						}
-						h.click();
-					});
-					b.appendChild(c);
-				}
-			}
-		} else {
-			y[i].classList.remove("select-arrow-active");
-		}
-	}
-	for (i = 0; i < x.length; i++) {
-		if (arrNo.indexOf(i)) {
-			x[i].classList.add("select-hide");
-		}
-	}
+function switchTo(element) {
+	d3.select("#custom-select").select("select").property("value", element.id.substring(12));
+	d3.select("#custom-select").select(".select-selected").text(d3.select("#custom-select").select("select").select("option:checked").text());
+	selector1=element.id.substring(12);
+	reload(selector1);
+	d3.select("#custom-select").select(".select-items").remove();
 }
+
 /*if the user clicks anywhere outside the select box,
 then close all select boxes:*/
-document.addEventListener("click", closeAllSelect);
+document.addEventListener("click", function() {
+	if (! click_inside_select) {
+		d3.select("#custom-select").select(".select-items").remove();
+	} else {
+		click_inside_select = false;
+	}
+});
+

From 1d12cf8bfcfd54f046958939b3018923f2255aa3 Mon Sep 17 00:00:00 2001
From: Rajko Zschiegner <ricki_z@gmx.de>
Date: Tue, 23 Apr 2019 13:51:14 +0200
Subject: [PATCH 2/2] Update .travis.yml

---
 .travis.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index e75157fe..b34aa49e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,9 @@
 language: node_js
 node_js:
-- '6'
-script: npm run build
+  - '6'
+script:
+  - cp src/js/config.js.dist src/js/config.js
+  - npm run build
 after_success:
   - git config --global user.name "ricki-z"
   - git config --global user.email "ricki_z@gmx.de"