├── .githooks └── pre-commit │ └── standard ├── .gitignore ├── .travis.yml ├── collaborators.md ├── index.js ├── package.json └── readme.md /.githooks/pre-commit/standard: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | npm run lint 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bundle.js 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: false 3 | node_js: 4 | - '0.10' 5 | - '0.12' 6 | - '4.0' 7 | - '6.0' 8 | -------------------------------------------------------------------------------- /collaborators.md: -------------------------------------------------------------------------------- 1 | ## Collaborators 2 | 3 | explore-dat is only possible due to the excellent work of the following collaborators: 4 | 5 | 6 | 7 | 8 |
maxogdenGitHub/maxogden
mafintoshGitHub/mafintosh
karissaGitHub/karissa
9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var yo = require('yo-yo') 3 | var yofs = require('yo-fs') 4 | 5 | module.exports = function ui (archive, opts, onclick) { 6 | if (!onclick) return ui(archive, opts, function thunk () {}) 7 | if ((typeof opts) === 'function') return ui(archive, {}, opts) 8 | if (!opts) opts = {} 9 | var root = opts.root || '' 10 | var uniques = {} 11 | opts.entries.forEach(addEntry) 12 | 13 | function addEntry (entry) { 14 | uniques[entry.name] = entry 15 | var dir = path.dirname(entry.name) 16 | if (!uniques[dir]) { 17 | uniques[dir] = { 18 | type: 'directory', 19 | name: dir, 20 | length: 0 21 | } 22 | } 23 | } 24 | 25 | function clicky (ev, entry) { 26 | if (entry.type === 'directory') { 27 | root = entry.name 28 | } 29 | return onclick(ev, entry) 30 | } 31 | 32 | var tree = yofs(root, getEntries(), clicky) 33 | 34 | function getEntries () { 35 | // super inefficient. yo-fs should probably have a .add(entry) 36 | // function instead of recomputing the entry list every time 37 | var vals = [] 38 | for (var key in uniques) { 39 | if (uniques.hasOwnProperty(key)) { 40 | vals.push(uniques[key]) 41 | } 42 | } 43 | return vals 44 | } 45 | 46 | function update () { 47 | var fresh = tree.render(root, getEntries(), clicky) 48 | yo.update(tree.widget, fresh) 49 | } 50 | 51 | if (archive) { 52 | var stream = archive.list({live: true}) 53 | stream.on('data', function (entry) { 54 | addEntry(entry) 55 | update() 56 | }) 57 | } 58 | return tree.widget 59 | } 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyperdrive-ui", 3 | "version": "4.0.2", 4 | "description": "Render a hyperdrive in the browser.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "standard", 8 | "lint": "standard" 9 | }, 10 | "author": "Karissa McKelvey (http://karissamck.com/)", 11 | "license": "MIT", 12 | "dependencies": { 13 | "yo-fs": "^3.0.0", 14 | "yo-yo": "^1.2.1" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git://github.com/karissa/hyperdrive-ui.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/karissa/hyperdrive-ui/issues" 22 | }, 23 | "devDependencies": { 24 | "standard": "^7.1.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # hyperdrive-ui 2 | 3 | Explore the contents of a [hyperdrive](http://github.com/mafintosh/hyperdrive) in the browser. 4 | 5 | ## Example 6 | 7 | Live demo: [http://dat.land/](http://dat.land/) 8 | 9 | 10 | ## usage 11 | 12 | ```npm install hyperdrive-ui``` 13 | 14 | ## `hyperdriveUI(archive, opts, onclick)` 15 | 16 | Renders the explorer. 17 | 18 | ```js 19 | var explorer = require('hyperdrive-ui') 20 | function onclick (ev, entry) { 21 | console.log('clicked', entry.name, entry.type) 22 | } 23 | var tree = explorer(archive, onclick) 24 | document.querySelector('#hyperdrive').appendChild(tree) 25 | 26 | ``` 27 | 28 | ## get started 29 | 30 | ``` 31 | npm install 32 | npm start 33 | ``` 34 | --------------------------------------------------------------------------------