-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
220 lines (202 loc) · 9.75 KB
/
index.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Julien Bellue - CV</title>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2/build/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progress.js/0.1.0/progress.min.js" integrity="sha256-USHpqyG25gg7qT3Fct9R1kLVVFIuUson6rg8qfxRGdA=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/progress.js/0.1.0/progressjs.min.css" integrity="sha256-m41xTDkrSptkkc2bzyb902dDCy/YoJ4gMfMNexQ1JwU=" crossorigin="anonymous" />
<style type="text/css">
@media (min-width: 1400px) {
#menu {position:fixed; top:0; float: left;width: 240px;}
#pdf-canvas {margin-top: -150px; margin-left:10px;}
}
.center{text-align: center; margin: 0 auto; width: auto; display:block;}
#menu {text-align:center; padding: 10px;}
#menu img {cursor: pointer;}
.halfSize {transform: scale(0.5);}
#pdf-canvas {margin-top: -100px; margin-left:50%; transform: translateX(-50%); position:relative; z-index:-1;}
input[type=button]{width: 7rem;}
footer{clear:both;}
</style>
</head>
<body>
<div id="menu">
<img id="uk-flag" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgZW5hYmxl
LWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwM
DAvc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnJkZj0iaHR0cDovL3d3dy
53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+PG1ldGFkYXRhPjxyZGY6UkRGPjxjYzpXb3JrIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM
6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+PGRjOnRpdGxlLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGcgZmlsbD0iIzAw
NiI+PHBhdGggZD0ibTUyLjkyIDEwMC4xNGMtMjAuMTA5IDI2LjE2My0zNS4yNzIgNTYuMzE4LTQ0LjEwMSA4OS4wNzdoMTMzLjE4bC04OS4wNzctODkuMDc3eiIvPjxwYXRoIGQ9Im01MDMuMTggMTg5L
jIyYy04LjgyOS0zMi43NTgtMjMuOTkzLTYyLjkxMy00NC4xMDEtODkuMDc2bC04OS4wNzUgODkuMDc2aDEzMy4xOHoiLz48cGF0aCBkPSJtOC44MTkgMzIyLjc4YzguODMgMzIuNzU4IDIzLjk5MyA2Mi
45MTMgNDQuMTAxIDg5LjA3NWw4OS4wNzQtODkuMDc1aC0xMzMuMTh6Ii8+PHBhdGggZD0ibTQxMS44NiA1Mi45MjFjLTI2LjE2My0yMC4xMDktNTYuMzE3LTM1LjI3Mi04OS4wNzYtNDQuMTAydjEzMy4
xOGw4OS4wNzYtODkuMDc1eiIvPjxwYXRoIGQ9Im0xMDAuMTQgNDU5LjA4YzI2LjE2MyAyMC4xMDkgNTYuMzE4IDM1LjI3MiA4OS4wNzYgNDQuMTAydi0xMzMuMThsLTg5LjA3NiA4OS4wNzR6Ii8+PHBh
dGggZD0iTTE4OS4yMTcsOC44MTljLTMyLjc1OCw4LjgzLTYyLjkxMywyMy45OTMtODkuMDc1LDQ0LjEwMWw4OS4wNzUsODkuMDc1VjguODE5eiIvPjxwYXRoIGQ9Im0zMjIuNzggNTAzLjE4YzMyLjc1O
C04LjgzIDYyLjkxMy0yMy45OTMgODkuMDc1LTQ0LjEwMWwtODkuMDc1LTg5LjA3NXYxMzMuMTh6Ii8+PHBhdGggZD0ibTM3MCAzMjIuNzhsODkuMDc1IDg5LjA3NmMyMC4xMDgtMjYuMTYyIDM1LjI3Mi
01Ni4zMTggNDQuMTAxLTg5LjA3NmgtMTMzLjE4eiIvPjwvZz48ZyBmaWxsPSIjYzAwIj48cGF0aCBkPSJtNTA5LjgzIDIyMi42MWgtMjIwLjQ0di0yMjAuNDRjLTEwLjkzMS0xLjQyMy0yMi4wNzUtMi4
xNjctMzMuMzkyLTIuMTY3LTExLjMxOSAwLTIyLjQ2MSAwLjc0NC0zMy4zOTEgMi4xNjd2MjIwLjQ0aC0yMjAuNDRjLTEuNDIzIDEwLjkzMS0yLjE2NyAyMi4wNzUtMi4xNjcgMzMuMzkyIDAgMTEuMzE5
IDAuNzQ0IDIyLjQ2MSAyLjE2NyAzMy4zOTFoMjIwLjQ0djIyMC40NGMxMC45MzEgMS40MjMgMjIuMDczIDIuMTY3IDMzLjM5MiAyLjE2NyAxMS4zMTcgMCAyMi40NjEtMC43NDMgMzMuMzkxLTIuMTY3d
i0yMjAuNDRoMjIwLjQ0YzEuNDIzLTEwLjkzMSAyLjE2Ny0yMi4wNzMgMi4xNjctMzMuMzkyIDAtMTEuMzE3LTAuNzQ0LTIyLjQ2MS0yLjE2Ny0zMy4zOTF6Ii8+PHBhdGggZD0ibTMyMi43OCAzMjIuNz
hsMTE0LjI0IDExNC4yNGM1LjI1NC01LjI1MiAxMC4yNjYtMTAuNzQzIDE1LjA0OC0xNi40MzVsLTk3LjgwMi05Ny44MDJoLTMxLjQ4MnYxZS0zeiIvPjxwYXRoIGQ9Im0xODkuMjIgMzIyLjc4aC0yZS0
zbC0xMTQuMjQgMTE0LjI0YzUuMjUyIDUuMjU0IDEwLjc0MyAxMC4yNjYgMTYuNDM1IDE1LjA0OGw5Ny44MDItOTcuODA0di0zMS40Nzl6Ii8+PHBhdGggZD0ibTE4OS4yMiAxODkuMjJ2LTJlLTNsLTEx
NC4yNC0xMTQuMjRjLTUuMjU0IDUuMjUyLTEwLjI2NiAxMC43NDMtMTUuMDQ4IDE2LjQzNWw5Ny44MDMgOTcuODAzaDMxLjQ4MXoiLz48cGF0aCBkPSJtMzIyLjc4IDE4OS4yMmwxMTQuMjQtMTE0LjI0Y
y01LjI1Mi01LjI1NC0xMC43NDMtMTAuMjY2LTE2LjQzNS0xNS4wNDdsLTk3LjgwMiA5Ny44MDN2MzEuNDgyeiIvPjwvZz48L3N2Zz4NCg=="/>
<img id="fr-flag" class="halfSize" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgZW5hYmxl
LWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwM
DAvc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnJkZj0iaHR0cDovL3d3dy
53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+PG1ldGFkYXRhPjxyZGY6UkRGPjxjYzpXb3JrIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM
6dHlwZSByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIi8+PGRjOnRpdGxlLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PHBhdGggZD0iTTUx
MiwyNTZjMC0xMTAuMDcxLTY5LjQ3Mi0yMDMuOTA2LTE2Ni45NTctMjQwLjA3N3Y0ODAuMTU1QzQ0Mi41MjgsNDU5LjkwNiw1MTIsMzY2LjA3MSw1MTIsMjU2eiIgZmlsbD0iI2VkMjkzOSIvPjxwYXRoI
GQ9Ik0wLDI1NmMwLDExMC4wNzEsNjkuNDczLDIwMy45MDYsMTY2Ljk1NywyNDAuMDc3VjE1LjkyM0M2OS40NzMsNTIuMDk0LDAsMTQ1LjkyOSwwLDI1NnoiIGZpbGw9IiMwMDIzOTUiLz48L3N2Zz4="/>
<br>
<span>Page
<span id="pageNum"></span> /
<span id="pageCount"></span>
</span>
<br>
<input type="button" id="btnPrev"/>
<input type="button" id="btnNext"/>
<br>
<a id="dlLink" download></a>
<br>
<div id="ciHelper"></div><a id="ciLink" href="https://github.com/jbellue/cv"></a>.
</div>
<canvas id="pdf-canvas" class="center"></canvas>
<footer class="center">
Julien Bellue ❖
<a href="https://github.com/jbellue/cv">https://github.com/jbellue/cv</a>
</footer>
<script type="text/javascript">
const languageData = {
"en": {
"url": "https://jbellue.github.io/cv/cv-en.pdf",
"dlInnerText": "Download",
"previous": "Previous",
"next": "Next",
"subTitle": "This PDF is automatically generated every time an update is pushed to ",
"linkText": "my github"
},
"fr": {
"url": "https://jbellue.github.io/cv/cv-fr.pdf",
"dlInnerText": "Télécharger",
"previous": "Précédente",
"next": "Suivante",
"subTitle": "Ce fichier PDF est automatiquement généré à chaque commit sur ",
"linkText": "mon github"
}
};
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2/build/pdf.worker.min.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 2,
canvas = document.getElementById('pdf-canvas'),
ctx = canvas.getContext('2d');
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
const renderPage = (num) => {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(page => {
let viewport = page.getViewport({ scale: scale, });
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
let renderContext = {
canvasContext: ctx,
viewport: viewport
};
let renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(() => {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('pageNum').textContent = num;
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
const queueRenderPage = (num) => {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
document.getElementById('btnPrev').addEventListener('click', () => {
if (pageNum <= 1) {
return;
}
queueRenderPage(--pageNum);
});
document.getElementById('btnNext').addEventListener('click', () => {
if (pageNum >= pdfDoc.numPages) {
return;
}
queueRenderPage(++pageNum);
});
const updatePdf = (newFile) => {
pdfDoc = newFile;
document.getElementById('pageCount').textContent = pdfDoc.numPages;
pageNum = 1;
renderPage(pageNum);
}
const setLanguage = (lang) => {
if (lang === "fr") {
document.getElementById('uk-flag').classList.add("halfSize");
document.getElementById('fr-flag').classList.remove("halfSize");
} else {
document.getElementById('fr-flag').classList.add("halfSize");
document.getElementById('uk-flag').classList.remove("halfSize");
lang = "en";
}
let loadingTask = pdfjsLib.getDocument(languageData[lang].url);
progressJs().start();
loadingTask.onProgress = (progress) => {
var percent = parseInt(progress.loaded / progress.total * 100);
progressJs().set(percent);
};
loadingTask.promise.then((pdfDoc_) => {
updatePdf(pdfDoc_);
progressJs().end();
});
let dlLink = document.getElementById('dlLink');
dlLink.href = languageData[lang].url;
dlLink.innerText = languageData[lang].dlInnerText;
document.getElementById('btnPrev').value = languageData[lang].previous;
document.getElementById('btnNext').value = languageData[lang].next;
document.getElementById("ciHelper").innerText = languageData[lang].subTitle;
document.getElementById("ciLink").innerText = languageData[lang].linkText;
}
document.getElementById('fr-flag').addEventListener('click', () => {
setLanguage("fr");
});
document.getElementById('uk-flag').addEventListener('click', () => {
setLanguage("en");
});
let language = "en";
// check if the language has been overridden (...?lang="fr")
let urlLanguage = location.search.split('lang=')[1];
if (urlLanguage && languageData[urlLanguage]) {
// remove GET parameters, for a cleaner history
window.history.replaceState({}, document.title, location.protocol + "//" + location.host + location.pathname);
language = urlLanguage;
}
setLanguage(language);
</script>
</body>
</html>