index.html
<!DOCTYPE html>
<html>
<head>
<title>Finder.js</title>
<link href="example/site.css" media="all" rel="stylesheet" />
<link href="example/finderjs.css" media="all" rel="stylesheet" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
lazyload
/>
</head>
<body class="site">
<header class="header">
<h1 class="main-title">
<span class="fa fa-tree"></span> finder<span>js</span>
</h1>
<h2 class="sub-title">
Browse hierarchical data in columns, similar to OS X's Finder
</h2>
<div class="actions">
<a class="btn btn-hi" href="https://github.com/mynameistechno/finderjs">
<span class="fa fa-github"></span> View on Github
</a>
<a
class="btn"
href="https://github.com/mynameistechno/finderjs/releases"
>
Download <strong>.zip</strong>
</a>
</div>
<nav>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#usage">Usage</a></li>
</ul>
</nav>
</header>
<main class="site-content">
<section>
<div class="section-container">
<h2 id="introduction">Introduction</h2>
<p>
<strong>Finder</strong>JS allows you to browse tree-like data in
columns, similar to OS X's file manager
<a href="https://en.wikipedia.org/wiki/Finder_(software)"
>Finder<span class="fa fa-external-link"></span></a
>.
</p>
<h3>Features</h3>
<ul>
<li>
<strong>Data source:</strong> Array or Function (useful for
asynchronous operations, e.g. calling an API).
</li>
<li>
<strong>Styling:</strong> Use any CSS/framework of choice, or feel
free to use the example CSS (which leverages
<a href="http://www.w3.org/TR/css-flexbox-1/"
>Flexbox<span class="fa fa-external-link"></span></a
>). You can also define how items are rendered and change default
classnames.
</li>
<li>
<strong>Keyboard navigation:</strong> use arrows keys to navigate.
</li>
<li>
<strong>Events:</strong> several events are emitted to allow for
custom behavior.
</li>
<li>
<strong>Module formats:</strong> Provided as an npm module
(CommonJS), a jQuery plugin, and exported as the global
<em>finder</em>.
</li>
<li>
<strong>File size:</strong> 4KB minified and gzipped. No external
dependencies.
</li>
<li>
<strong>Code quality:</strong>
<a href="https://codeclimate.com/github/mynameistechno/finderjs"
>Code Climate<span class="fa fa-external-link"></span></a
>.
</li>
</ul>
</div>
</section>
<section class="example">
<div class="section-container">
<h2 id="examples">Examples</h2>
<h4 class="sub-title">Example #1</h4>
<p>The data source is an array.</p>
<div id="container1"></div>
<p>
<a
href="https://github.com/mynameistechno/finderjs/blob/master/example/example-static.js"
><span class="fa fa-code"></span>View source</a
>
</p>
</div>
</section>
<section class="example">
<div class="section-container">
<h4 class="sub-title">Example #2</h4>
<p>
The data source is a function that pulls in sample data from
<a href="https://restcountries.eu/"
>REST Countries<span class="fa fa-external-link"></span></a
>.
</p>
<div id="container2"></div>
<p>
<a
href="https://github.com/mynameistechno/finderjs/blob/master/example/example-async.js"
><span class="fa fa-code"></span>View source</a
>
</p>
</div>
</section>
<section class="example">
<div class="section-container">
<h4 class="sub-title">Example #3</h4>
<p>
Selects default path
<strong>build/finder.js</strong> on load. You can also
programmatically select a path:
</p>
<p>
<button id="select-path-button">
Go to <strong>test/test.js</strong>
</button>
</p>
<div id="container3"></div>
<p>
<a
href="https://github.com/mynameistechno/finderjs/blob/master/example/example-static-select-path.js"
><span class="fa fa-code"></span>View source</a
>
</p>
</div>
</section>
<section>
<div class="section-container">
<h2 id="installation">Installation</h2>
<pre><code class="shell">npm install finderjs</code></pre>
<p>
or download the latest
<a href="https://github.com/mynameistechno/finderjs/releases"
>release</a
>
and include the standalone script or jquery plugin directly onto
your page.
</p>
</div>
</section>
<section>
<div class="section-container">
<h2 id="usage">Usage</h2>
<p>
FinderJS expects a container HTML element, a data source (Array or
Function), and an options object.
</p>
<pre><code class="javascript">
finder(container, data, options)
.on('leaf-selected', function(item) {
console.log('Leaf node selected', item);
});
</code></pre>
<p>
For more information see the
<a href="https://github.com/mynameistechno/finderjs">README</a> or
view the source of the
<a
href="https://github.com/mynameistechno/finderjs/tree/master/example"
>examples</a
>
above.
</p>
</div>
</section>
</main>
<footer class="footer">
<div class="links">
<iframe
src="https://ghbtns.com/github-btn.html?user=mynameistechno&repo=finderjs&type=star&count=true"
frameborder="0"
scrolling="0"
width="90px"
height="20px"
></iframe>
<iframe
src="https://ghbtns.com/github-btn.html?user=mynameistechno&repo=finderjs&type=fork&count=true"
frameborder="0"
scrolling="0"
width="90px"
height="20px"
></iframe>
<a
href="https://twitter.com/share"
class="twitter-share-button"
data-url="https://github.com/mynameistechno/finderjs"
data-via="brazill"
>Tweet</a
>
<a
href="https://twitter.com/brazill"
class="twitter-follow-button"
data-show-count="false"
>Follow @brazill</a
>
</div>
<p>
Created by <a href="https://mynameistechno.github.io/">Mark Matyas</a>.
Source code released under the
<a
href="https://raw.githubusercontent.com/mynameistechno/finderjs/master/LICENSE"
>MIT license</a
>.
</p>
<small>Icons by <a href="http://fontawesome.io">Font Awesome</a></small>
</footer>
<script src="example/bundle.js"></script>
<script>
!(function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
})(document, 'script', 'twitter-wjs');
</script>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>
typeof hljs !== 'undefined' && hljs.initHighlightingOnLoad();
</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-70022140-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>