...
 
Commits (10)
......@@ -32,31 +32,63 @@
z-index: 1
}
// Metro style
.metro-animation {
margin-top: -20px;
display: block;
display: flex;
height: 300px;
justify-content: center;
}
.metro-animation-git {
margin-top: -20px;
display: flex;
height: 300px;
}
// Metro style
.metro-graph {
position: relative;
z-index: 0;
margin-top: -20px;
width: 47%;
width: 48%;
height: 100%;
display: inline-block;
}
.metro-git-container {
display: inline-block;
font-family: 'Source Code Pro', monospace;
width: 45%;
width: 48%;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
flex-direction: column;
span {
display: block
;
display: inline-block;
}
}
@media (min-width: 320px) and (max-width: 480px) {
.metro-animation-git {
flex-direction: column;
height: 500px;
}
.metro-animation-git {
.metro-graph {
height: 70%;
}
}
.metro-graph {
min-width: 100%;
}
.metro-git-container {
height: 29%;
min-width: 100%;
justify-content: flex-start;
}
}
This diff is collapsed.
document.addEventListener('DOMContentLoaded', function(){
var config1 = [{name: "Red", stations: ["A", "C", "E"]},
{name: "Blue", stations: ["B", "C", "F"]}];
var container1 = {
graph_container: "build-1",
};
metro.animations.build_raw_animation(container1, config1, {git_container: false})
var config2 = [{name: "Red", stations: ["B", "C", "D"]},
{name: "Blue", stations: ["D", "B", "A"]}];
var container2 = {
graph_container: "build-2",
};
metro.animations.build_raw_animation(container2, config2, {git_container: false})
var config3 = [{name: "Red", stations: ["B", "C", "D"]},
{name: "Blue", stations: ["A", "B", "D"]}];
var container3 = {
graph_container: "build-3",
};
metro.animations.build_raw_animation(container3, config3, {git_container: false})
var config4 = [{name: "Red", stations: ["A", "B", "C", "D", "A"]}];
var container4 = {
graph_container: "build-4",
};
metro.animations.build_raw_animation(container4, config4, {git_container: false})
var config5 = [{name: "Red", stations: ["A", "B", "C", "D"]}];
var container5 = {
graph_container: "build-5",
};
metro.animations.build_raw_animation(container5, config5, {git_container: false})
var config6 = [{name: "Green", stations: ["A", "B", "C"]}];
var container6 = {
graph_container: "alg-1",
};
metro.animations.build_raw_animation(container6, config6, {git_container: false})
var containers1 = {
graph_container: "alg-2",
current_node: "B",
traversal_function: 1,
};
var config7 = [{name: "Green", stations: ["A", "B", "C"]}];
var graph1 = metro.animations.build_animation(containers1, config7)
document.getElementById("alg-2-button").addEventListener("click", function(event) {
var element = event.target;
if(element.classList.contains('fa-play')) {
element.classList.remove('fa-play');
element.classList.add('fa-pause');
metro.animations.start_animation(graph1);
} else {
element.classList.remove('fa-pause');
element.classList.add('fa-play');
metro.animations.stop_animation(graph1);
}
});
var containers2 = {
graph_container: "alg-3",
current_node: "B",
traversal_function: 2,
};
var config8 = [{name: "Green", stations: ["A", "B", "C"]}];
var graph2 = metro.animations.build_animation(containers2, config8)
function buildRawAnimation(containerConfig, config) {
metro.animations.build_raw_animation(containerConfig, config, {git_container: false})
}
document.getElementById("alg-3-button").addEventListener("click", function(event) {
var element = event.target;
if(element.classList.contains('fa-play')) {
element.classList.remove('fa-play');
element.classList.add('fa-pause');
metro.animations.start_animation(graph2);
} else {
element.classList.remove('fa-pause');
element.classList.add('fa-play');
metro.animations.stop_animation(graph2);
}
});
var containers3 = {
graph_container: "alg-4",
current_node: "B",
traversal_function: 3,
};
function buildAnimation(containerConfig, config, buttonId) {
var graph = metro.animations.build_animation(containerConfig, config)
var config9 = [{name: "Green", stations: ["A", "B", "C"]}];
var graph3 = metro.animations.build_animation(containers3, config9)
document.getElementById("alg-4-button").addEventListener("click", function(event) {
document.getElementById(buttonId).addEventListener("click", function(event) {
var element = event.target;
if(element.classList.contains('fa-play')) {
element.classList.remove('fa-play');
element.classList.add('fa-pause');
metro.animations.start_animation(graph3);
metro.animations.start_animation(graph);
} else {
element.classList.remove('fa-pause');
element.classList.add('fa-play');
metro.animations.stop_animation(graph3);
metro.animations.stop_animation(graph);
}
});
}
var containers4 = {
graph_container: "alg-5",
current_node: "B",
traversal_function: 3,
};
var config10 = [{name: "Green", stations: ["A", "B", "C"]},
{name: "Red", stations: ["D", "B", "E"]}];
var graph4 = metro.animations.build_animation(containers4, config10)
document.getElementById("alg-5-button").addEventListener("click", function(event) {
var element = event.target;
if(element.classList.contains('fa-play')) {
element.classList.remove('fa-play');
element.classList.add('fa-pause');
metro.animations.start_animation(graph4);
} else {
element.classList.remove('fa-pause');
element.classList.add('fa-play');
metro.animations.stop_animation(graph4);
}
});
var containers5 = {
graph_container: "alg-6",
current_node: "B",
traversal_function: 10,
};
var config11 = [{name: "Green", stations: ["A", "B", "C"]},
{name: "Red", stations: ["D", "B", "E"]}];
var graph5 = metro.animations.build_animation(containers5, config11)
document.getElementById("alg-6-button").addEventListener("click", function(event) {
var element = event.target;
if(element.classList.contains('fa-play')) {
element.classList.remove('fa-play');
element.classList.add('fa-pause');
metro.animations.start_animation(graph5);
} else {
element.classList.remove('fa-pause');
element.classList.add('fa-play');
metro.animations.stop_animation(graph5);
}
});
document.addEventListener('DOMContentLoaded', function(){
buildRawAnimation(
{graph_container: "build-1"},
[{name: "Red", stations: ["A", "C", "E"]},
{name: "Blue", stations: ["B", "C", "F"]}]
);
buildRawAnimation(
{graph_container: "build-2", layout: "grid"},
[{name: "Red", stations: ["B", "C", "D"]},
{name: "Blue", stations: ["D", "B", "A"]}]
);
buildRawAnimation(
{graph_container: "build-3"},
[{name: "Red", stations: ["B", "C", "D"]},
{name: "Blue", stations: ["A", "B", "D"]}]
);
buildRawAnimation(
{graph_container: "build-4", layout: "grid"},
[{name: "Red", stations: ["A", "B", "C", "D", "A"]}]
);
buildRawAnimation(
{graph_container: "build-5"},
[{name: "Red", stations: ["A", "B", "C", "D"]}]
);
buildRawAnimation(
{graph_container: "alg-1"},
[{name: "Green", stations: ["A", "B", "C"]}]
);
buildAnimation(
{
graph_container: "alg-2",
current_node: "B",
traversal_function: 1,
},
[{name: "Green", stations: ["A", "B", "C"]}],
"alg-2-button"
);
buildAnimation(
{
graph_container: "alg-3",
current_node: "B",
traversal_function: 2,
} ,
[{name: "Green", stations: ["A", "B", "C"]}],
"alg-3-button"
);
buildAnimation(
{
graph_container: "alg-4",
current_node: "B",
traversal_function: 3,
},
[{name: "Green", stations: ["A", "B", "C"]}],
"alg-4-button"
);
buildAnimation(
{
graph_container: "alg-5",
current_node: "B",
traversal_function: 3,
},
[{name: "Green", stations: ["A", "B", "C"]},
{name: "Red", stations: ["D", "B", "E"]}],
"alg-5-button"
);
buildAnimation(
{
graph_container: "alg-6",
current_node: "B",
traversal_function: 10,
},
[{name: "Green", stations: ["A", "B", "C"]},
{name: "Red", stations: ["D", "B", "E"]}],
"alg-6-button"
);
buildAnimation(
{
graph_container: "alg-7",
git_container: "alg-7-git",
current_node: "B",
traversal_function: 10,
},
[{name: "Blue", stations: ["A", "B", "C"]}],
"alg-7-button"
);
buildAnimation(
{
graph_container: "alg-8",
git_container: "alg-8-git",
current_node: "B",
traversal_function: 10,
},
[{name: "Blue", stations: ["A", "B"]},
{name: "Red", stations: ["B", "C"]}],
"alg-8-button"
);
buildAnimation(
{
graph_container: "alg-9",
git_container: "alg-9-git",
current_node: "B",
traversal_function: 10,
},
[{name: "Blue", stations: ["A", "B"]},
{name: "Red", stations: ["C", "B"]}],
"alg-9-button"
);
buildAnimation(
{
graph_container: "alg-10",
git_container: "alg-10-git",
current_node: "B",
traversal_function: 10,
},
[{name: "Blue", stations: ["A", "B", "D"]},
{name: "Red", stations: ["C", "B", "D"]}],
"alg-10-button"
);
buildAnimation(
{
graph_container: "alg-11",
git_container: "alg-11-git",
current_node: "B",
traversal_function: 10,
},
[{name: "Green", stations: ["A", "D", "E"]},
{name: "Red", stations: ["B", "D", "F", "G"]},
{name: "Blue", stations: ["C", "D", "F", "H"]}],
"alg-11-button"
);
}, false);