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

Added Toggle Button with Animation

This commit is contained in:
sirsandmann 2017-12-29 23:45:10 +01:00
parent ab5a112c66
commit f5f04f273f
3 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -73,6 +73,10 @@ body {
margin-right: auto;
}
#toggle-btn{
text-align: center;
}
#icon-up-arrow{
width: 1%;
height: 1%;

17
index.html
View File

@ -60,7 +60,7 @@
<div class="handle"></div>
</div>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
@ -68,16 +68,13 @@
<!-- Diagram card -->
<div class="card" id="diagram-card">
<div class="card-header">
Diagramm
<button type="button" class="btn btn-info btn-block" data-toggle="collapse" data-target="#selection-box">
<svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 8" xml:space="preserve">
<rect x="0.016" y="1.68" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 6.2428 2.2389)" width="5.283" height="1.466"/>
<rect x="3.161" y="1.604" width="1.683" height="6.375"/>
<rect x="2.709" y="1.674" transform="matrix(0.7073 0.7069 -0.7069 0.7073 3.2674 -3.0786)" width="5.284" height="1.465"/>
<div class="card-header" style="padding:0;">
<div id="toggle-btn">
<svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
<polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
<polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
</svg>
Collapse
</button>
</div>
</div>
<div class="card-body">

32
js/main.js
View File

@ -31,8 +31,8 @@ var slyelement = {
};
preprocessor.load(function(data) {
slyelement.obj = new Sly($(slyelement.el), slyelement.options);
preprocessor.load(function(data) {
slyelement.obj = new Sly($(slyelement.el), slyelement.options);
slyelement.obj.init();
// Some sample code for a year selector - TODO: Improve a lot and move somewhere else
@ -41,7 +41,7 @@ preprocessor.load(function(data) {
var seasons = processor.getSeasonsWithLapData();
for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
// Someone chose a year
yearSelector.change(function(event) {
var selectedYear = $(event.target).val();
@ -62,7 +62,7 @@ preprocessor.load(function(data) {
$("#lineGraphBox").empty();
createLineGraph("#lineGraphBox", rdata);
});
slyelement.obj.reload();
slyelement.obj.reload();
}
slyelement.obj.reload();
@ -82,6 +82,30 @@ preprocessor.load(function(data) {
slyelement.obj.reload();
});
$( "#toggle-btn" ).click(function() {
if ( $( "#selector-card .card-body" ).is( ":hidden" ) ) {
$( "#selector-card .card-body" ).slideDown();
$('#icon-up-arrow').animate({ borderSpacing: 0 - 90 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration: 150
},'linear');
} else {
$( "#selector-card .card-body" ).slideUp();
$('#icon-up-arrow').animate({ borderSpacing: 180 - 90 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
},
duration: 150
},'linear');
}
});
$("#seasonByYearSelector").trigger("change");
});