ullamlaboriosam
Version:
Lightweight and intuitive javascript library
167 lines (146 loc) • 6.21 kB
HTML
<html>
<head>
<title>Documentation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="javascript, js, library, umbrella, html, html5, light">
<meta name="description" content=" Lightweight and intuitive javascript library">
<meta property="og:url" content="http://umbrellajs.com/">
<meta property="og:title" content="Umbrella JS">
<meta property="og:image" content="http://umbrellajs.com/web/umbrella.png?1">
<meta property="og:description" content="Lightweight and intuitive javascript library to speed up your web development">
<link href="https://cdn.jsdelivr.net/picnicss/6.2.5/picnic.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css" rel="stylesheet" />
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">
<link href="demo.css" rel="stylesheet">
</head>
<body class="withaside">
<nav class="super">
<a href="#" class="brand">
<img class="logo" src="http://umbrellajs.com/web/umbrella.svg">
<span class="text">Umbrella JS</span>
</a>
<input id="bmenu" type="checkbox" class="show">
<label for="bmenu" class="burger pseudo button switch"></label>
<header><strong>Umbrella JS</strong></header>
<div class="menu loading" data-headers="h2"><ul class="flex two three-600"></ul></div>
<footer>
<div class="flex three">
<a class="pseudo button" href="/tests">
<i class="fa fa-check"></i> Tests
</a>
<a class="pseudo button" href="https://github.com/franciscop/umbrella">
<i class="fa fa-github-alt"></i> Github
</a>
<a class="button" href="/documentation">
<i class="fa fa-file-text-o"></i> Documentation
</a>
</div>
</footer>
</nav>
<aside class="loading" data-headers="h1, h2">
<!-- <a class="brand" href="/">
<img class="logo" src="http://umbrellajs.com/web/umbrella.svg">
<span class="text">Umbrella JS</span>
</a> -->
<ul></ul>
</aside>
<article class="loading" data-src="documentation.md"></article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<script src="https://unpkg.com/umbrellajs"></script>
<script src="https://unpkg.com/superdom@0.9.0"></script>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script>
let tableofcontents = () => {
dom['[data-headers]'].forEach(header => {
let headers = header.getAttribute('data-headers') || 'h1, h2, h3';
let selector = headers.split(/\s*,\s*/).map(h => h + ':not(.noindex)').join(', ');
dom['[data-headers] ul, [data-headers] ol'].html = `
${dom[selector].map(node => `
<li class="${node.nodeName === 'H2' ? 'primary' : 'secondary'}">
<a class="pseudo button" href="#${node.id}">
${node.innerHTML}
</a>
</li>
`).join('')}
`;
});
}
// Supermenu
let supermenu = (smoothscroll = true) => {
function shouldScrollOrNot(){
u('body').toggleClass('no-scroll', u('nav > input').first().checked);
}
u('nav > input').on('change', shouldScrollOrNot);
shouldScrollOrNot();
u('article h2').each(function(node){
u(node).attr('id', node.id);
});
var lessonName = u('h1').html();
var main = '<a href="#" class="pseudo button"><strong>' + lessonName + '</strong></a>';
u('[data-headers]').on('click', 'a', function(e){
u('nav > input').first().checked = false;
u('body').removeClass('no-scroll');
if (smoothscroll) {
e.preventDefault();
var to = u(u(e.currentTarget).attr('href'));
if (to.length) {
to.scroll();
}
}
});
// Change the title of the section
var pagesize = u('body').size().height / 2;
let last;
function setupSection () {
var current = u('article h2').filter(function(node){
return u(node).size().top < pagesize;
}).last() || u('h1').first();
var section = u(current).html() || u('h1').html();
if (u('h1').length && u('h1').size().top > 0 && u('h1').size().top < pagesize) {
section = u('h1').html();
var hash = u(current).attr('id');
}
if (!last || !current || current != last) {
last = current;
u('nav header').html(section);
dom['[data-headers] [href]'].class.active = false;
if (current) {
dom[`[href="#${current.id}"]`].class = 'active';
}
}
}
u(document).on('scroll', setupSection);
setupSection();
}
if (dom.aside.length)
dom.body.class = 'withaside';
dom['article[data-src]'].forEach(article => {
let url = article.getAttribute('data-src');
fetch(url).then(res => res.text()).then(md => {
article.innerHTML = marked(md);
dom.class.loading.class.loading = false;
Prism.highlightAll();
tableofcontents();
supermenu();
});
});
dom['common-mark, .common-mark'].forEach(el => {
let lines = el.innerHTML
.replace(/\>\;/g, '>')
.replace(/\<\;/g, '<')
.replace(/\&\;/g, '&').split('\n');
let min = parseInt(el.getAttribute('spaces'));
min = min || Math.min.apply(Math, lines // Minimum of array
.filter(n => !n.match(/^\s*$/)) // Only filled lines
.map(line => line.match(/^\s*/)) // Get each space str
.map(n => n[0].length) // Count spaces
);
// Set the html as the parsed from markdown
el.innerHTML = marked(lines.map(l => l.slice(min)).join('\n'));
});
tableofcontents();
</script>
</body>
</html>