forked from mynameistechno/finderjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (115 loc) · 6.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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/1.0.0/finderjs-1.0.0.zip">
Download <strong>.zip</strong>
</a>
<a class="btn" href="https://github.com/mynameistechno/finderjs/releases/download/1.0.0/finderjs-1.0.0.tar.gz">
Download <strong>.tar.gz</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>Stlying:</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>Test coverage:</strong> <a href="https://codeclimate.com/github/mynameistechno/finderjs/coverage">100%<span class="fa fa-external-link"></span></a>.</li>
</ul>
</div>
</section>
<section class="example">
<div class="section-container">
<h2 id="examples">Examples</h2>
<p class="alert">
<strong>Note</strong>: these examples require CSS flexbox support.
</p>
<h4 class="sub-title">Example A</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 B</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>
<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>