-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile.html
127 lines (119 loc) · 5.15 KB
/
profile.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
126
127
---
layout: default
---
<div class="col-2">
<div class="portrait-wrapper"></div>
</div>
<article class="col-3">
<header role="heading">
<h3 class="pagesubtitle"> </h3>
<h2 class="pagetitle"> </h2>
</header>
<aside class="meta col-5">
<ul class="contact preserve"></ul>
<ul class="project">
</ul>
</aside>
<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 profile = getObject("Your Name", name);
var contact = document.getElementsByClassName("contact")[0];
var projectHTML = document.getElementsByClassName("project")[0];
var statementHTML = document.getElementsByClassName("statement")[0];
console.log(profile);
/* Populate HTML with certain mandatory Spreadsheet entries */
document.getElementsByClassName("pagesubtitle")[0].innerHTML = profile["Your Degree"];
document.getElementsByClassName("pagetitle")[0].innerHTML = profile["Your Name"];
document.getElementsByTagName("title")[0].innerHTML = profile["Your Name"];
/* Check for values in the Spreadsheet then populate the HTML with them */
if (profile["Your Website"]) {
var websiteName = shortenURL(profile["Your Website"]);
contact.innerHTML += '<li><a href="'
+ profile["Your Website"]
+ '">'
+ websiteName
+ '</a></li>';
}
if (profile["Your Email"]) {
contact.innerHTML += '<li><a href="mailto:'
+ profile["Your Email"]
+ '">'
+ profile["Your Email"]
+ '</a></li>';
}
if (profile["Your Statement"]) {
statementHTML.innerHTML += '<p>'
+ profile["Your Statement"].escapeParagraphs();
+ '</p>';
}
if (profile["Project Name"]) {
projectHTML.innerHTML += '<li><a href="{{ site.baseurl }}project.html?pname='
+ encodeURIComponent(profile["Project Name"])
+ '"><h4>'
+ profile["Project Name"]
+ '</h4></a></li>';
statementHTML.innerHTML += '<br><p><a href="{{ site.baseurl }}project.html?pname='
+ encodeURIComponent(profile["Project Name"])
+ '">View my project:<br><strong>'
+ profile["Project Name"]
+ '</strong></a></p>';
}
/* If there's a portrait available, use it. Otherwise, hide the container entirely */
if (profile["Image"] == "TRUE") {
document.getElementsByClassName("portrait-wrapper")[0].innerHTML += '<img src="{{ "assets/portraits/3x5/" | prepend: site.baseurl }}'
+ profile["Your Name"].escapeSpaces()
+ '.jpg" width="518" height="829">'
} else {
document.getElementsByClassName("portrait-wrapper")[0].parentNode.setAttribute("style","display:none;");
}
/* Use the pattern file definitions to fetch the correct pattern and color variation for the given profile */
var pattern = patternDir[profile["Pattern"]]
+ colorName[profile["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) '
+ profile["Bottom Color"]
+ ' fixed;');
}
/* Use the given profile's color specifications to recolor certain elements */
document.body.innerHTML += '<style>h2{ color:'
+ profile["Bottom Color"]
+ ';}h3,a,a:link,a:visited{ color:'
+ profile["Top Color"]
+ ';} h2 { border-color:'
+ profile["Top Color"]
+ ' !important;}a:focus{ outline: .15em solid'
+ profile["Top Color"]
+ ';}a:hover,a:focus,a:active{color:'
+ profile["Bottom Color"]
+ ' !important;}</style>';
}
</script>