Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alincode/skilltree.js
https://github.com/alincode/skilltree.js
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/alincode/skilltree.js
- Owner: alincode
- Created: 2019-02-26T14:05:02.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-25T04:43:25.000Z (almost 5 years ago)
- Last Synced: 2024-12-06T09:46:02.977Z (30 days ago)
- Language: JavaScript
- Size: 3.05 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# skilltree.js
[](https://david-dm.org/alincode/skilltree.js)
[Demo](https://alincode.github.io/skilltree.js/)
### feature
- [x] icon image node & if icon empty use default
- [x] click event open window
- [x] workshop json load data
- [x] workshop have different url
- [x] hover event show title
### run demo
```
npm install
npm start
```
### customized css
- you can add some css to make your own style.
### standard data structure
- `parentIds`
- if it is a root node, should don't have `parentIds` property.
- `parentIds` is a array.
- `title` will show in the tooltip.
### javascript example
```js
const skilltree = require("skilltree.js");
const faker = require("faker");
const html = require("nanohtml");
const dag_data = [
{
id: "0",
title: "Solidity",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "1",
parentIds: ["0"],
title: "Variables",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "2",
parentIds: ["0"],
title: "Events",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "3",
parentIds: ["2"],
title: "Mappings",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "4",
parentIds: ["2"],
title: "Types",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "5",
parentIds: ["2"],
title: "Modifiers",
url: "https://play.ethereum.org/play-workshop/",
icon: faker.image.imageUrl(32, 32)
},
{
id: "6",
parentIds: ["9"],
title: "Imports",
url: "https://play.ethereum.org/play-workshop/",
icon: faker.image.imageUrl(32, 32)
},
{
id: "7",
parentIds: ["3"],
title: "Source File",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "8",
parentIds: ["3"],
title: "Remix",
url: "https://play.ethereum.org/play-workshop/"
},
{
id: "9",
parentIds: ["8"],
title: "Deploying",
url: "https://play.ethereum.org/play-workshop/"
// icon: faker.image.imageUrl(32, 32),
},
{
id: "10",
parentIds: ["9"],
title: "Networks",
url: "https://play.ethereum.org/play-workshop/"
}
];
const element = html`
${skilltree(dag_data)}
`;
// const element = html`
//
// ${skilltree(dag_data, '4')}
//
// `
document.body.appendChild(element);
```
## License
MIT © [alincode](https://github.com/alincode/solcjs-lightweight)