gitlabculture
clone your own copy | download snapshot

Snapshots | iceberg

No images in this repository’s iceberg at this time

Inside this repository

works-fonts.html
text/html

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>