- - - - - - - - - ${repo.name} - - created by - ${repo.owner} - - ${moment(repo.created_at).fromNow()} - - - ${repo.description} - ${repo.license} + function render({ repos, total }) { + let html = ""; + for (let i = 0; i < repos.length; ++i) { + let repo = repos[i]; + html += ` + + + + + + + + + + + ${repo.name} + + created by + ${repo.owner} + + ${moment(repo.created_at).fromNow()} + + + ${repo.description} + ${repo.license} + + + + + + + + Git + + + + + + + + + + + + + ${repo.stars} + + + ${numeral(repo.lines).format("0.[0]a")} + + + ${formatDate(repo.pushed_at)} + + + - - - - - Git - - - - - - - - - - - - - - - ${repo.stars} - - - ${numeral(repo.lines).format("0.[0]a")} - - - ${formatDate(repo.pushed_at)} - - - - - `; + `; + } + document.getElementById("list").innerHTML = html; + document.getElementById("burger").classList.remove("is-active"); + document.getElementById("menu").classList.remove("is-active"); + document.getElementById("totalLOC").innerHTML = document.getElementById("totalLOC").innerHTML + .replace("?", numeral(total).format("0.[0]a")); + return repos; + } + function hideMenu() { + document.getElementById("burger").classList.remove("is-active"); + document.getElementById("menu").classList.remove("is-active"); + return false; } - document.getElementById("list").innerHTML = html; - document.getElementById("burger").classList.remove("is-active"); - document.getElementById("menu").classList.remove("is-active"); -} -function callback(xhttp) { - if (xhttp.readyState == 4 && xhttp.status == 200) { - parse(JSON.parse(xhttp.responseText)); - sortDescending('pushed_at'); + function toggleMenu() { + document.getElementById("burger").classList.toggle("is-active"); + document.getElementById("menu").classList.toggle("is-active"); + return false; } -} -function toggleLoader() { - document.getElementById("main").classList.toggle("is-hidden"); - document.getElementById("loading").classList.toggle("is-hidden"); - document.getElementById("nav").classList.toggle("is-hidden"); - document.getElementById("footer").classList.toggle("is-hidden"); -} + function afterRender(repos) { + var shuffle = null; + + function sort(attribute, descending) { + shuffle.sort({ + reverse: descending, + by: element => { + let v = repos[element.getAttribute("data-index")][attribute]; + return typeof v === "string" ? v.toLowerCase() : v + } + }); + hideMenu(); + return false; + } -function run() { - new Clipboard(".is-clipboard-enabled"); - setTimeout(toggleLoader, 500); + let search = (function () { + let inner = () => { + let query = document.getElementById("search").value; + let regex = new RegExp(query, 'i'); + let predicate = repo => repo.description.match(regex) || repo.owner.match(regex) || repo.name.match(regex); + shuffle.filter(element => predicate(repos[element.getAttribute("data-index")])); + } + let timeout = null; + let later = () => { + timeout = null; + inner(); + }; + return () => { + if (timeout) { + clearTimeout(timeout); + } + timeout = setTimeout(later, 500); + } + })(); - let url = ""; - if (window.location.host.match("c9users.io")) { - // for testing outside github - url = "../dotabap-generated/generated.json"; - } else { - url = "http://generated.dotabap.org/generated.json"; + new Clipboard(".is-clipboard-enabled"); + shuffle = new Shuffle(document.getElementById("list"), { itemSelector: ".column", delimiter: "," }); + setTimeout(() => { + document.getElementById("main").classList.toggle("is-hidden"); + document.getElementById("loading").classList.toggle("is-hidden"); + document.getElementById("nav").classList.toggle("is-hidden"); + document.getElementById("footer").classList.toggle("is-hidden"); + document.getElementById("search").onkeyup = search; + document.getElementById("burger").onclick = toggleMenu; + document.getElementById("search-button").onclick = search; + document.getElementById("sort-by-name").onclick = sort.bind(null, "name", false); + document.getElementById("sort-by-stars").onclick = sort.bind(null, "stars", true); + document.getElementById("sort-by-updated").onclick = sort.bind(null, "pushed_at", true); + document.getElementById("sort-by-size").onclick = sort.bind(null, "lines", true); + document.getElementById("sort-by-created").onclick = sort.bind(null, "created_at", true); + document.getElementById("sort-by-author").onclick = sort.bind(null, "owner", false); + shuffle.update(); + }, 500); } - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = (() => callback(xhttp)); - xhttp.open("GET", url, true); - xhttp.send(); + ajax(getUrl()) + .then(parse) + .then(render) + .then(afterRender); } diff --git a/style.css b/style.css index 0e10088..6fcda68 100644 --- a/style.css +++ b/style.css @@ -20,7 +20,11 @@ section.is-hidden, nav.is-hidden, footer.is-hidden { } strong.huge { - font-size: x-large; + font-size: x-large; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; } .column .box .media-content a:hover { @@ -46,3 +50,9 @@ input.is-header-input::placeholder { .is-underlined { border-bottom: 1px #f5f5f5 solid; } + +@media (max-width: 320px) { + .field.is-main-search { + width: 175px; + } +} \ No newline at end of file
+ + + + + + + + + ${repo.name} + + created by + ${repo.owner} + + ${moment(repo.created_at).fromNow()} + + + ${repo.description} + ${repo.license} + + + +