No images in this repository’s iceberg at this time
Download raw (6.5 KB)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>OSP works</title>
<link rel="stylesheet" href="https://semestriel.framapad.org/p/9f7m-osp-website-css/export/txt" type="text/css" media="all" charset="utf-8">
<style>
img {
max-width: 200px;
max-height: 200px;
}
.repo {
outline: 10px solid pink;
margin: 2em;
padding: 2em;
}
.font-folder {
outline: 10px solid blue;
margin: 2em;
padding: 2em;
}
.font-folder:empty {
display: none;
}
input {
font-size: 2em;
}
</style>
</head>
<body>
<h1>Works</h1>
<div class="filters">
View through:
<ul>
<li><a href="works-commit.html" id="filter-commit">Last update</a></li>
<li><a href="#" id="filter-fonts">Fonts</a></li>
<li><a href="#" id="filter-images">Images</a></li>
<li><a href="#" id="filter-readme">Description</a></li>
<li><a href="#" id="filter-tree">Diagram</a></li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
let body = document.querySelector('body');
var gitlab_url = "http://gitlab.constantvzw.org";
var user_name = "osp";
//var repos = [455, 456, 508, 536]
var repos = [455, 456, 508]
for (i=0; i < repos.length; i++) {
// CREATING DIV REPO
let repo = document.createElement('div'),
title_elt = document.createElement('h2');
repo.classList.add("repo");
title_elt.classList.add("repo-title");
repo.appendChild(title_elt);
body.appendChild(repo);
getFonts(i, repos[i], repo);
}
// GET ALL FONTS ///////////////////////////////
function getFonts(i, repoID, repoElt){
let repo_url = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID;
let nb_fonts = 0;
fetch(repo_url)
.then(function(resp){
return resp.json();
})
.then(function(data){
// FETCH REPO TITLE
let title = repoElt.querySelector('.repo-title');
name = data.name.split(".").slice(1);
title.innerHTML = name.replace(",", ".");
})
// FETCH FONTS OF THE REPO
let fonts_url = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?path=fonts";
fetch(fonts_url)
.then(function(resp){
return resp.json();
})
.then(function(data){
return data.map(function(font) {
// REPO TITLE
let title = repoElt.querySelector('.repo-title:first-child').innerHTML;
getFontFolder(font, repoElt, title, repoID);
})
nbFonts = repoElt.querySelectorAll(".font");
console.log(nbFonts);
})
//.catch(function(error) {
// console.log(JSON.stringify(error));
//});
}
// END GET ALL FONTS
// GET FONT FOLDER
function getFontFolder(font, repoElt, title, repoID){
//var reg = new RegExp(/^[\w\/].*result\b/);
var reg = new RegExp('^(?!.*(ufo|OSX)$).*$');
if (font.type == "tree" && reg.test(font.name)) {
// CREATE FONT FOLDER ELEMENT
let font_folder_elt = document.createElement('div');
font_folder_elt.classList.add('font-folder');
repoElt.appendChild(font_folder_elt);
// FOLDER NAME
//foldername = document.createElement('h3');
//foldername.classList.add('font-name');
//foldername.innerHTML = font.name;
let fonts_url = "https://gitlab.constantvzw.org/api/v4/projects/" + repoID + "/repository/tree?path="+ font.path;
fetch(fonts_url)
.then(function(resp){
return resp.json();
})
.then(function(data){
return data.map(function(font) {
if (font.type == "tree" && reg.test(font.name)) {
getFontFolder(font, repoElt, title, repoID);
} else if (font.name.endsWith(".ttf") || font.name.endsWith(".otf")) {
font_elt.insertBefore(fontname, font_elt.childNodes[0]);
getFont(font, font_folder_elt, title);
}
})
})
} else if (font.name.endsWith(".ttf") || font.name.endsWith(".otf")) {
getFont(font, repoElt, title);
}
}
// END GET FONT FOLDER
// GET ONE FONT
function getFont(font, repoElt, title){
// CREATE FONT ELEMENT
font_elt = document.createElement('div');
font_elt.classList.add('font');
repoElt.appendChild(font_elt);
// FONT NAME
fontname = document.createElement('h4');
fontname.classList.add('font-name');
fontname.innerHTML = font.name;
font_elt.appendChild(fontname);
// FONT PATH
fontfile = font.path.split("/");
fontfile.shift();
var blob_url = 'http://osp.kitchen/api/osp.work.' + title + '/' + font.id + '/blob-data/' + font.path;
fontInput = document.createElement('input');
fontDl = document.createElement('a');
fontface = document.createElement('style');
fontInput.classList.add('font-input');
fontDl.classList.add('font-dl');
fontface.innerHTML = "@font-face { font-family: '" + font.name + "'; src: url('" + blob_url + "')}";
fontInput.value = font.name;
fontInput.style.fontFamily = '"' + font.name + '"';
fontDl.innerHTML = "Download font";
fontDl.setAttribute("href", blob_url);
font_elt.appendChild(fontface);
font_elt.appendChild(fontInput);
font_elt.appendChild(fontDl);
}
// END GET ONE FONT
</script>
<script type="text/javascript" charset="utf-8" src="pad.js"> </script>
</body>
</html>