Hochschulprojekte/f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Add state to courseSelector

Browse Source
This commit is contained in:
Jan Philipp Timme 2017-12-30 00:15:53 +01:00
parent a8a1f8f133
commit 23e7ce324b
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/main.css
View File

@ -15,6 +15,14 @@ body {
/*border: 1px solid grey;*/ /*border: 1px solid grey;*/
} }
#courseSelection li.hover {
background-color: #e2eaff;
}
#courseSelection li.selected {
border-color: #aaaaff;
}
/* This container will allow scaling svg, so we don't need to care about it in d3.js */ /* This container will allow scaling svg, so we don't need to care about it in d3.js */
.svg-container { .svg-container {
display: inline-block; display: inline-block;

17
js/main.js
View File

@ -44,8 +44,9 @@ preprocessor.load(function(data) {
yearSelector.change(function(event) { yearSelector.change(function(event) {
var selectedYear = $(event.target).val(); var selectedYear = $(event.target).val();
slyelement.curRaces = processor.getRacesByYear(selectedYear); slyelement.curRaces = processor.getRacesByYear(selectedYear);
// Empty the course selector
$("#courseSelection").empty(); $("#courseSelection").empty();
// Add all the races to the selector // ... and fill it with fresh races to choose from
for(var race in slyelement.curRaces) { for(var race in slyelement.curRaces) {
var raceD = slyelement.curRaces[race]; var raceD = slyelement.curRaces[race];
$("#courseSelection").append("<li data=\"" + raceD.raceInfo.raceId + "\">" + $("#courseSelection").append("<li data=\"" + raceD.raceInfo.raceId + "\">" +
@ -53,6 +54,11 @@ preprocessor.load(function(data) {
"<div class=\"courseimagecontainer\"></div>" + raceD.raceInfo.date.toLocaleDateString("de-DE") + "</li>"); "<div class=\"courseimagecontainer\"></div>" + raceD.raceInfo.date.toLocaleDateString("de-DE") + "</li>");
$("#courseSelection li").click(function(event) { $("#courseSelection li").click(function(event) {
// Clear previously selected courses
$("#courseSelection .selected").removeClass("selected");
// Mark selected course
$(event.currentTarget).addClass("selected");
// Hand off to diagram rendering
var raceI = event.currentTarget.attributes.data.value; var raceI = event.currentTarget.attributes.data.value;
if(slyelement.curRaceId == raceI){ return; } if(slyelement.curRaceId == raceI){ return; }
slyelement.curRaceId = raceI; slyelement.curRaceId = raceI;
@ -62,7 +68,16 @@ preprocessor.load(function(data) {
}); });
slyelement.obj.reload(); slyelement.obj.reload();
} }
// Refresh carousell after building the selector
slyelement.obj.reload(); slyelement.obj.reload();
// Register hover event
$("#courseSelection li").hover(function(event){
// handlerIn
$(event.currentTarget).addClass("hover");
}, function(event) {
// handlerOut
$(event.currentTarget).removeClass("hover");
});
// TODO: Now add all the images without disturbing the user // TODO: Now add all the images without disturbing the user
for(var race in slyelement.curRaces) { for(var race in slyelement.curRaces) {