-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.html
125 lines (116 loc) · 4.97 KB
/
project.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
---
layout: default
---
<article class="col-5">
<header role="heading">
<h3 class="pagesubtitle"> </h3>
<h2 class="pagetitle"> </h2>
</header>
<aside>
<ul class="meta">
</ul>
</aside>
<div class="content">
<div class="image-feature"></div>
<p class="statement"></p>
</div>
</article>
<script src="{{ site.baseurl }}js/papaparse.min.js"></script>
<script>
/* After loading, fetch profile/project information then populate the HTML template */
window.onload = function() { init() };
function init() {
Papa.parse(
"{{ site.url }}{{ site.baseurl }}data.csv",
{
download: true,
header: true,
complete: function(result) {
renderContent(result.data)
}
}
)
}
function renderContent(data) {
/* Find specific profile within the Spreadsheet according to name */
function getObject(property, value) {
for (i=0; i<data.length; i++) {
if (data[i][property] == value) return data[i];
}
}
var project = getObject("Project Name", pname);
var meta = document.getElementsByClassName("meta")[0];
console.log(project);
/* Populate HTML with certain mandatory Spreadsheet entries */
document.getElementsByClassName("pagesubtitle")[0].innerHTML = '<a href="{{ site.baseurl }}profile.html?name='
+ encodeURIComponent(project["Your Name"])
+ '">'
+ project["Your Name"]
+ '</a>';
document.getElementsByClassName("pagetitle")[0].innerHTML = project["Project Name"];
document.getElementsByTagName("title")[0].innerHTML = project["Project Name"];
/* Check for values in the Spreadsheet then populate the HTML with them */
if (project["Project Location"]) {
meta.innerHTML += '<li>'
+ project["Project Location"]
+ '</li>';
}
if (project["Project Date"]) {
var date = new Date(project["Project Date"]);
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
meta.innerHTML += '<li>'
+ date.getDate()
+ ' '
+ months[date.getMonth()]
+ ' '
+ date.getFullYear()
+ '</li>';
}
if (project["Project Website"]) {
meta.innerHTML += '<li><a href="'
+ project["Project Website"]
+ '">'
+ shortenURL(project["Project Website"])
+ '</a></li>';
}
if (project["Project Statement"]) {
document.getElementsByClassName("statement")[0].innerHTML += '<p>'
+ project["Project Statement"].escapeParagraphs();
+ '</p>';
}
/* Use the pattern file definitions to fetch the correct pattern and color variation for the given profile */
var pattern = patternDir[project["Pattern"]]
+ colorName[project["Top Color"]];
/* Use the pattern! */
var patternFills = document.getElementsByClassName("pattern");
for (i=0; i<patternFills.length; i++) {
patternFills[i].setAttribute('style', 'background: url('
+ pattern
+ '.png) '
+ project["Bottom Color"]
+ ' fixed;');
}
/* Use the given profile's color specifications to recolor certain elements */
document.body.innerHTML += '<style>h2 { color:'
+ project["Bottom Color"]
+ '; }h3,a,a:link,a:visited{ color:'
+ project["Top Color"]
+ '; } h2 { border-color:'
+ project["Top Color"]
+ ' !important;} a:focus { outline: .15em solid'
+ project["Top Color"]
+ ';}a:hover,a:focus,a:active{color:'
+ project["Bottom Color"]
+ ' !important;}</style>';
if (project["Project Images"] > 0) {
var name = project["Your Name"].escapeSpaces();
for (i=1; i<=project["Project Images"]; i++) {
document.getElementById("image-" + i).innerHTML += '<img src="assets/projects/'
+ name
+ '/'
+ i
+ '.jpg">'
}
}
}
</script>