Skip to content

Commit

Permalink
Merge pull request #18 from opendata-stuttgart/master
Browse files Browse the repository at this point in the history 
remake of option select
  • Loading branch information
@pjgueno
pjgueno committed Apr 23, 2019
2 parents 7364473 + 1d12cf8 commit eabd3c9
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 174 deletions.
6 changes: 4 additions & 2 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
@@ -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 "[email protected]"
Expand Down
18 changes: 12 additions & 6 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
12 changes: 6 additions & 6 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 2 additions & 0 deletions src/js/config.js.dist
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
208 changes: 48 additions & 160 deletions src/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -97,48 +101,34 @@ 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;
} else {
d3.select("#betterplace").style("display", "inline-block");
}

//var coordsCenter = [50.495171, 9.730827];
//var zoomLevel = 6;
var coordsCenter = config.center;
var zoomLevel = config.zoom;

Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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");
Expand Down Expand Up @@ -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){
Expand Down Expand Up @@ -680,7 +667,6 @@ L.hexbinLayer = function(options) {
return new L.HexbinLayer(options);
};


function sensorNr(data){

var inner_pre = "#";
Expand Down Expand Up @@ -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;
}
});

0 comments on commit eabd3c9

Please sign in to comment.