feather-ts
Version:
Lightweight javascript framework with REST, routing, bindings, message hub and event delegation (under 10kb gzipped)
452 lines (292 loc) • 11.1 kB
HTML
<html class="no-js">
<head lang="en-us">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<title>Image layout algorithm - Featherₜₛ</title>
<meta name="generator" content="Hugo 0.18.1" />
<meta name="description" content="Feather TS - official Website">
<link rel="canonical" href="//www.feather-ts.com/example/">
<meta name="author" content="Andreas Prudzilko">
<meta property="og:url" content="//www.feather-ts.com/example/">
<meta property="og:title" content="Featherₜₛ">
<meta property="og:image" content="//www.feather-ts.com/images/logo.svg">
<meta name="apple-mobile-web-app-title" content="Featherₜₛ">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="shortcut icon" type="image/x-icon" href="//www.feather-ts.com/images/favicon.ico">
<link rel="icon" type="image/x-icon" href="//www.feather-ts.com/images/favicon.ico">
<style>
@font-face {
font-family: 'Icon';
src: url('//www.feather-ts.com/fonts/icon.eot');
src: url('//www.feather-ts.com/fonts/icon.eot')
format('embedded-opentype'),
url('//www.feather-ts.com/fonts/icon.woff')
format('woff'),
url('//www.feather-ts.com/fonts/icon.ttf')
format('truetype'),
url('//www.feather-ts.com/fonts/icon.svg')
format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/application.css">
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/temporary.css">
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/palettes.css">
<link rel="stylesheet" href="//www.feather-ts.com/stylesheets/highlight/highlight.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu:400,700|Ubuntu+Mono">
<style>
body, input {
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
}
pre, code {
font-family: 'Ubuntu Mono', 'Courier New', 'Courier', monospace;
}
</style>
<link rel="stylesheet" href="//www.feather-ts.com/css/tweaks.css">
<script src="//www.feather-ts.com/javascripts/modernizr.js"></script>
</head>
<body class="palette-primary-deep-purple palette-accent-cyan">
<div class="backdrop">
<div class="backdrop-paper"></div>
</div>
<input class="toggle" type="checkbox" id="toggle-drawer">
<input class="toggle" type="checkbox" id="toggle-search">
<label class="toggle-button overlay" for="toggle-drawer"></label>
<header class="header">
<nav aria-label="Header">
<div class="bar default">
<div class="button button-menu" role="button" aria-label="Menu">
<label class="toggle-button icon icon-menu" for="toggle-drawer">
<span></span>
</label>
</div>
<div class="stretch">
<div class="title">
Image layout algorithm
</div>
</div>
<div class="button button-github" role="button" aria-label="GitHub">
<a href="https://github.com/mendrik" title="@mendrik on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
</div>
</div>
<div class="bar search">
<div class="button button-close" role="button" aria-label="Close">
<label class="toggle-button icon icon-back" for="toggle-search"></label>
</div>
<div class="stretch">
<div class="field">
<input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
</div>
</div>
<div class="button button-reset" role="button" aria-label="Search">
<button class="toggle-button icon icon-close" id="reset-search"></button>
</div>
</div>
</nav>
</header>
<main class="main">
<div class="drawer">
<nav aria-label="Navigation">
<a href="https://github.com/mendrik/feather" class="project">
<div class="banner">
<div class="logo">
<img src="//www.feather-ts.com/images/logo.svg">
</div>
<div class="name">
<strong>Featherₜₛ <span class="version">ᴮᵉᵗᵃ</span></strong>
<br>
mendrik/feather
</div>
</div>
</a>
<div class="scrollable">
<div class="wrapper">
<ul class="repo">
<li class="repo-download">
<a href="https://github.com/mendrik/feather/archive/master.zip" target="_blank" title="Download" data-action="download">
<i class="icon icon-download"></i> Download
</a>
</li>
<li class="repo-stars">
<a href="https://github.com/mendrik/feather/stargazers" target="_blank" title="Stargazers" data-action="star">
<i class="icon icon-star"></i> Stars
<span class="count">–</span>
</a>
</li>
</ul>
<hr>
<div class="toc">
<ul>
<li>
<a title="Introduction" href="//www.feather-ts.com/">
Introduction
</a>
</li>
<li>
<a title="Getting started" href="//www.feather-ts.com/getting-started/">
Getting started
</a>
</li>
<li>
<a title="API" href="//www.feather-ts.com/api/">
API
</a>
</li>
<li>
<a class="current" title="Example" href="//www.feather-ts.com/example/">
Example
</a>
<ul id="scrollspy">
</ul>
</li>
</ul>
<hr>
<span class="section">The author</span>
<ul>
<li>
<a href="https://github.com/mendrik" target="_blank" title="@mendrik on GitHub">
@mendrik on GitHub
</a>
</li>
<li>
<a href="mailto:mendrik76@gmail.com" title="Email of mendrik76@gmail.com">
Contact via email
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<article class="article">
<div class="wrapper">
<h1>Image layout algorithm </h1>
<p>Here we are going to use feather to write a small widget that layouts a set of images in an rectangle with fixed dimensions.</p>
<aside class="copyright" role="note">
Documentation built with
<a href="https://www.gohugo.io" target="_blank">Hugo</a>
using the
<a href="http://github.com/digitalcraftsman/hugo-material-docs" target="_blank">Material</a> theme.
</aside>
<footer class="footer">
<nav class="pagination" aria-label="Footer">
<div class="previous">
<a href="//www.feather-ts.com/api/" title="API Documentation">
<span class="direction">
Previous
</span>
<div class="page">
<div class="button button-previous" role="button" aria-label="Previous">
<i class="icon icon-back"></i>
</div>
<div class="stretch">
<div class="title">
API Documentation
</div>
</div>
</div>
</a>
</div>
<div class="next">
<a href="//www.feather-ts.com/" title="Introduction">
<span class="direction">
Next
</span>
<div class="page">
<div class="stretch">
<div class="title">
Introduction
</div>
</div>
<div class="button button-next" role="button" aria-label="Next">
<i class="icon icon-forward"></i>
</div>
</div>
</a>
</div>
</nav>
</footer>
</div>
</article>
<div class="results" role="status" aria-live="polite">
<div class="scrollable">
<div class="wrapper">
<div class="meta"></div>
<div class="list"></div>
</div>
</div>
</div>
</main>
<script>
var base_url = '\/\/www.feather-ts.com\/';
var repo_id = 'mendrik\/feather';
</script>
<script src="//www.feather-ts.com/javascripts/application.js"></script>
<script>
/* Add headers to scrollspy */
var headers = document.getElementsByTagName("h2");
var scrollspy = document.getElementById('scrollspy');
if(scrollspy) {
if(headers.length > 0) {
for(var i = 0; i < headers.length; i++) {
var li = document.createElement("li");
li.setAttribute("class", "anchor");
var a = document.createElement("a");
a.setAttribute("href", "#" + headers[i].id);
a.setAttribute("title", headers[i].innerHTML);
a.innerHTML = headers[i].innerHTML;
li.appendChild(a)
scrollspy.appendChild(li);
}
} else {
scrollspy.parentElement.removeChild(scrollspy)
}
/* Add permanent link next to the headers */
var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for(var i = 0; i < headers.length; i++) {
var a = document.createElement("a");
a.setAttribute("class", "headerlink");
a.setAttribute("href", "#" + headers[i].id);
a.setAttribute("title", "Permanent link")
a.innerHTML = "#";
headers[i].appendChild(a);
}
}
</script>
<script>
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)
})(window, document,
'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-84969611-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
var buttons = document.querySelectorAll('a');
Array.prototype.map.call(buttons, function(item) {
if (item.host != document.location.host) {
item.addEventListener('click', function() {
var action = item.getAttribute('data-action') || 'follow';
ga('send', 'event', 'outbound', action, item.href);
});
}
});
var query = document.querySelector('.query');
query.addEventListener('blur', function() {
if (this.value) {
var path = document.location.pathname;
ga('send', 'pageview', path + '?q=' + this.value);
}
});
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>