Commit f52b967d authored by Porter Libby's avatar Porter Libby
Browse files

startup

parent 8e45b9c2
# EPIC Journey Display
This is the repo for developing the EPIC Journey display project.
## Structure
For each item rendered to the screen, there is a data key attached to it in the `index.html`. Each time details for a catagory are viewed, that object uses its key to fetch data from the dictionary, and render it in a details popup.
## Data Dictionary
In the file `/data/data.js`, the dictionary itself can be found. It follows the form:
```
var dictionary = {
<KEY>: <DESCRIPTION>, // this form attaches a description to a key.
<KEY>: [ // this form attaches a set of options to a key.
<OPTION>,
<OPTION>,
<OPTION>,
...
],
...
}
```
## Elements with keys
In order to interact with the dictionary, the elements must have a specific form:
```
<div class="[CIRCLE OR SQUARE] [GRID LOCATION]" onclick='openDetails([KEY], this)'>
<span class='box-header'>[TITLE]</span></br>
<span class='box-prompt'></span>
</div>
```
Here is a complete example of this form:
```
<div class="circle div8" onclick='openDetails("career_community", this)'>
<span class='box-header'>Career Community</span></br>
<span class='box-prompt'></span>
</div>
```
## Contributors
- Craig Earley
- Porter Libby
- Dipesh Poudel
- Roger Lu
- Dong Cao
\ No newline at end of file
# blank branch for new 2020 draft
\ No newline at end of file
This diff is collapsed.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>EPIC JOURNEY</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="public/css/main.css">
<script src="data/careers-data.js"></script>
<script src="data/data.js"></script>
<script src="public/js/searchbar.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
</head>
<body>
<div id='container'>
<div id='slide-button'>
Next
</div>
<div class="parent p0" id='p0' style='position: absolute; z-index: 0;'>
<div class="circle div2" onclick='openDetails("first_year_advising",this)'>
<span class='box-header'>First Year Advising</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div5" onclick='openDetails("career_exploration", this)'>
<span class='box-header'>Career Exploration</span></br>
<span class='box-prompt'></span>
</div>
<div class="circle div8" onclick='openDetails("career_community", this)'>
<span class='box-header'>Career Community</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div class="parent p1" id='p1' style='position: absolute; z-index: 0;'>
<div class="box color-2 div1" onclick='openDetails("campus_life",this)'>
<span class='box-header'>Campus Life</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-2 div2" onclick='openDetails("community_engagement", this)'>
<span class='box-header'>Community Engagement</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-3 div3" onclick='openDetails("major_selection", this)'>
<span class='box-header'>Major Selection</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-3 div4" onclick='openDetails("research", this)'>
<span class='box-header'>Research</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-3 div5" onclick='openDetails("internship", this)'>
<span class='box-header'>Internship</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-4 div6" onclick='openDetails("off_campus_study", this)'>
<span class='box-header'>Off-Campus Study</span></br>
<span class='box-prompt'></span>
</div>
<div class="box color-4 div7" onclick='openDetails("career", this)'>
<span class='box-header'>Career</span></br>
<span class='box-prompt'></span>
</div>
</div>
<div id='details-container' style='z-index: 4;'>
<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>
</div>
</div>
<script>
function openDetails(key, target){
console.log(target);
var newDiv = document.createElement("div");
newDiv.className = 'details';
var title = document.createElement("span");
title.className = 'details-title';
title.textContent += key;
newDiv.append(title);
var returnButton = document.createElement('input');
returnButton.className = 'return';
returnButton.setAttribute("type", "button");
returnButton.onclick = function() { closeDetails(); };
newDiv.append(returnButton);
var container = document.getElementById('details-container');
container.style.zIndex = 4;
container.append(newDiv);
if (key == "first_year_advising" || key == "career_exploration" || key == "career_community"){
var text = dictionary[key];
newDiv.innerHTML += '</br><span>' + text + '</span>';
}
else if ((key == 'campus_life') ||
(key == 'community_engagement') ||
(key == 'major_selection') ||
(key == 'research') ||
(key == 'internship') ||
(key == 'off_campus_study') ||
(key == 'career')) {
createSearchBar(newDiv, key);
}
}
function closeDetails() {
console.log('test');
var container = document.getElementById('details-container');
container.innerHTML = "<div onclick='closeDetails()' style='width: 100%; height: 100%;'></div>";
container.style.zIndex = -1;
}
</script>
<script type="text/javascript">
var state = 0;
$( "#slide-button" ).click(function() {
console.log('switch')
if (state == 0){
console.log('0')
state = 1; // swtich to second screen
document.getElementById('p0').style.display = 'none';
document.getElementById('p1').style.display = 'grid';
document.getElementById('slide-button').innerHTML = 'Previous';
}
else if (state == 1){
console.log('1')
state = 0; // swtich back to first screen
document.getElementById('p1').style.display = 'none';
document.getElementById('p0').style.display = 'grid';
document.getElementById('slide-button').innerHTML = 'Next';
}
});
closeDetails()
</script>
</body>
</html>
\ No newline at end of file
:root{
--block-color-1: coral;
--block-color-2: lightblue;
--block-color-3: orange;
--block-color-4: maroon;
--circle-color-1: coral;
--detail-color-1: lightgray;
--text-color-1: black;
--text-color-light: #ddd;
--text-color-2: #333;
--button-color: lightgray;
}
html{
width: 100%;
height: 100%;
position: fixed;
}
body {
width: 100%;
height: 100%;
position: absolute;
}
.details-container{
position: absolute;
z-index: 3;
}
.details{
height: 85vh;
width: 90vw;
margin: 5vh 5vw;
position: absolute;
z-index: 3;
top: 0px;
background-color: var(--detail-color-1);
border-radius: 8px;
border: 1px solid black;
text-align: center;
overflow: hidden;
padding-top: 5vh;
}
.details-title{
font-size: 3vmin;
}
.details #searchbar{
margin-top: 100px;
}
.return{
position: absolute;
right: 10px;
top: 10px;
}
#details-container{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
z-index: -1;
}
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 50px;
grid-row-gap: 50px;
height: 90vh;
width: 90vw;
padding: 5vh 5vw;
}
.p0{
display:grid
}
.p1{
display: none;
}
.box{
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
border-radius: 8px;
}
.color-1{
background-color: var(--block-color-1);
color: var(--text-color-1);
}
.color-2{
background-color: var(--block-color-2);
color: var(--text-color-1);
}
.color-3{
background-color: var(--block-color-3);
color: var(--text-color-1);
}
.color-4{
background-color: var(--block-color-4);
color: var(--text-color-light);
}
.box:hover{
font-weight: bold;
}
.circle{
margin-top:-20%;
width: 50vmin;
height: 50vmin;
text-align: center;
cursor: pointer;
border-radius: 1000px;
background-color: var(--circle-color-1);
}
.circle:hover{
font-weight: bold;
}
.circle .box-header{
margin-top:20%;
}
.box-header {
display: inline-block;
vertical-align: middle;
font-size: 3vmin;
}
.box-prompt{
font-size: 2vmin;
font-weight: normal;
}
.box-prompt::before{
content: "Click for more details";
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2;}
.div3 { grid-area: 3 / 1 / 4 / 2;}
.div4 { grid-area: 1 / 2 / 2 / 3;}
.div5 { grid-area: 2 / 2 / 3 / 3;}
.div6 { grid-area: 3 / 2 / 4 / 3;}
.div7 { grid-area: 1 / 3 / 2 / 4;}
.div8 { grid-area: 2 / 3 / 3 / 4;}
.div9 { grid-area: 3 / 3 / 4 / 4;}
#slide-button{
position: absolute;
margin-left: 45%;
bottom: 20px;
width: 10%;
height: 35px;
padding-top: 15px;
background-color: var(--button-color);
z-index: 2;
text-align: center;
cursor: pointer;
}
#slide-button:hover{
font-weight: bold;
}
\ No newline at end of file
// Test data for now
// Mimic form of JSON input for future development
var items = [{
'name': "First Year Advising",
'items': [],
'type': "circle-1",
'column': 0
},
{
'name': "Career Exploration",
'items': [],
'type': "circle-2",
'column': 0
},
{
'name': "Campus Life",
'items': [],
'type': "square-2",
'column': 1
},
{
'name': "Community Engagement",
'items': [],
'type': "square-5",
'column': 1
},
{
'name': "Career Community",
'items': [],
'type': "circle-1",
'column': 1
},
{
'name': "Major Selection",
'items': [],
'type': "square-3",
'column': 2
},
{
'name': "Research",
'items': [],
'type': "square-4",
'column': 2
},
{
'name': "Internship",
'items': [],
'type': "square-5",
'column': 2
},
{
'name': "Off-Campus Study",
'items': [],
'type': "square-1",
'column': 3
},
{
'name': "Career",
'items': [],
'type': "square-2",
'column': 3
}];
var container = document.getElementById("flow-chart-container");
var columns = items[items.length - 1].column;
// main render
function main(){
// loop over the colums in in the chart
console.table(items);
console.log(columns);
for (j = 0; j < columns + 1; j++){
var column = document.createElement('div');
column.className = 'flow-chart-column';
// loop over the items in each column
for (i = 0; i < items.length; i++){
if (items[i].column == j) {
var line = document.createElement('div');
line.className = 'flow-chart-line-down';
line.innerHTML = "<svg height='40px' width='100%'><line x1='50%' y1='0' x2='50%' y2='40' stroke-dasharray='4' style='stroke:rgb(0,0,0);stroke-width:2' /></svg>"
// create div of specific shape
var elem = document.createElement("div");
elem.className = "flow-chart-block flow-chart-" + items[i].type;
elem.id = items[i].name;
// create text to go in div
var text = document.createElement("p");
text.innerText = items[i].name;
// append elements together
elem.append(text);
column.append(line);
column.append(elem);
}
}
var endline = document.createElement('div');
endline.className = 'flow-chart-line-down';
endline.innerHTML = "<svg height='40px' width='100%'><line x1='50%' y1='0' x2='50%' y2='40' stroke-dasharray='4' style='stroke:rgb(0,0,0);stroke-width:2' /></svg>"
if (j != columns){
column.append(endline);
}
container.append(column);
}
}
main();
// Render search bar
// Porter Libby 2019
function createSearchBar(container, key){
//create search obj
var search_container = document.createElement("div");
search_container.id = key + '-search-container';
var search = document.createElement("INPUT");
search.id = 'searchbar'
search.setAttribute("type", "text");
search.setAttribute("value", "");
prompt = document.createElement('span');
prompt.innerHTML = 'Search for ' + key + ':';
search_container.appendChild(prompt);
search_container.appendChild(search);
container.appendChild(search_container);
names_for_search = [];
for(x=0;x<dictionary[key].length;x++){
names_for_search.push(dictionary[key][x]);
}
autocomplete(document.getElementById("searchbar"), names_for_search);
}
function autocomplete(inp, arr) {
var currentFocus;
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) { //up
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment