Javascript library to create trees in HTML

Related tags

Learning resource treeMaker
Overview

treeMaker

This javascript library allows you to make tree in HTML from JSON.

screen shot

How it works

First of all you can download the library and only add the 2 minified files in the folder lib/ like that:

<script type="text/javascript" src="path/to/your/site/index/tree_maker-min.js"></script>
<link rel="stylesheet" href="path/to/your/site/index/tree_maker-min.css">

Add a div to your page where you want your tree:

<div id="my_tree"></div>

Then add this javascript code

//The structure of your tree
const tree = {
        key_1: {
            key_2: '',
            key_3: '',
            key_4: '',
            key_5: ''
        },
    };

//The parameters of your tree
const params = {
    key_1: {trad: 'Card 1', styles: {'box-shadow': '0 0 15px 2px blue'}},
    key_2: {trad: 'Card 2', styles: {'color': 'red'}},
    key_3: {trad: 'Card 3'},
    key_4: {trad: 'Card 4'},
    key_5: {trad: 'Card 5'},
};

//The function which will build the tree
treeMaker(tree, {
    id: 'my_tree', card_click: function (element) {
        console.log(element);
    },
    treeParams: params,
    'link_width': '4px',
    'link_color': '#ff5259',
});

How to build your JSON tree

You need to create an object which contains either other object if you want to continue the tree or an empty string if there are no more step to your tree. You need to fill the tree with keys which are used in the tree parameters.

Tree options

trad: the text that will be showed in the card, if there is no trad the key will be showed styles: the style you want to add to a specific card, every CSS rules will worked

treeMaker()

This function takes 2 arguments: the tree in JSON and parameters which is an object.

Parameters:

Params Required Description
id: yes The id where the library will generate the tree
card_click: no This a call back function when a card is clicked
treeParams: yes An object which contains the options for the tree card
link_width: no The width of the svg that linked the cards
link_color: no The color of the svg that linked the cards

License

This library is available under the MIT license

You might also like...

This website utilizes JavaScript, HTML, and CSS to allow the user to create a to-do list that they can add to, remove from, and edit.

todo Description the project. "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to

Jul 23, 2022

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Dec 29, 2022

It is an app that allows you to create lists of books and authors made in the course of Microverse. This project was develop using JavaScript, HTML and CSS.

AWESOME BOOKS This is an Awesome book store project that add store and diplay books on the UI. Built With HTML,CSS, JavaScript Frameworks Github, Lint

Jul 28, 2022

This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different currencies and formattings.

intl-currency-input This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different

Jan 4, 2023

Create HTML, CSS only with Javascript/Typescript

SwiftUI inspired JS FrameWork BreazeJS GOAL: Rapidly build modern websites without ever leaving your Javascript/Typescript. Output const ContentView:

Sep 14, 2022

In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. I followed the JavaScript, CSS, HTML, DRY, KISS and YAGNI Best practices.

In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. I followed the JavaScript, CSS, HTML, DRY, KISS and YAGNI Best practices.

To Do list: add & remove In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of th

Nov 20, 2022

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko 📗 Table of Contents 📗 Table of Contents 📖 To Do List PROJECT 🛠 Built With Tech Stack Key Features 🚀 Live Demo 💻 Getting Started

May 9, 2023

Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

Awesome-books A single page project with the porpuse of storing books' titles and authors. Built With CSS, HTML & Javascript. How to run in your local

Feb 21, 2022

This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Sep 20, 2022
Comments
  • going vertically instead of horizontally

    going vertically instead of horizontally

    Hey, Is there a way to make the tree condense itself in specific width, and then the rest of the tree just push it down? So I just gotta scroll down to see the whole tree, not scrolling horizontally

    opened by nabil-ha 1
  • Right to Left support

    Right to Left support

    Hi

    When adding DIR=RTL to HTML tag the library not working as it should

    How we can make treeMaker support RTL site what part of the code we should be changed to achive that

    Thank you

    opened by DrAljuhani 1
  • Reset pathNumber and allLinks globals on treeMaker() call to enable o…

    Reset pathNumber and allLinks globals on treeMaker() call to enable o…

    Noticed that if the 'card_click' parameter is configured to call treeMaker() - for example, if the server initially sends the root and 1 level below to the client and treeMaker() is used to build just those levels, and card_click is subsequently used to drill down into the children of a level-1 node by fetching lower levels from the server and re-calling treeMaker() - the JS gives an error because allLinks and pathNumber globals continue from where the first tree initially built and rendered.

    This change is minor and resets allLinks to an empty array and pathNumber = 1 within treeMaker() itself to address this error. I left the instantiation of these globals as still initially defining them, which is perhaps unnecessary, but it seemed safer.

    More modest, still, I adjusted some of the comments that used no space after "//" to include a space so that all were uniform, and added one semicolon where missing, though JS wouldn't normally care, anyway.

    I'm glad I found your repo, I'm having fun with it so far, thank you :)

    opened by CasualJon 1
  • Left cards disappear

    Left cards disappear

    When adding multiple cards in same level the far left cards disapears

    `let tree = { 1: { 2: '', 3: { 6: '', 7: '' }, 4: '', 8: '', 9: '', 10: '', 11: '', 12: { 28: '', 29: { 30: '', 31: '', 32: { 35: '', 36: '' }, 33: '', 34: '' } }, 13: '', 14: '', 15: '', 16: '', 17: '', 18: '', 19: '', 20: '', 21: '', 22: '', 23: '', 24: '', 25: '', 26: '', 27: '' } };

    let treeParams = {
    1: {trad: 'Card 1'},
    2: {trad: 'Card 2'},
    3: {trad: 'Card 3'},
    4: {trad: 'Card 4'},
    5: {trad: 'Card 5'},
    6: {trad: 'Card 6'},
    7: {trad: 'Card 7'},
    8: {trad: 'Card 8'},
    9: {trad: 'Card 9'},
    10: {trad: 'Card 10'},
    11: {trad: 'Card 11'},
    12: {trad: 'Card 12'},
    13: {trad: 'Card 13'},
    14: {trad: 'Card 14'},
    15: {trad: 'Card 15'},
    16: {trad: 'Card 16'},
    17: {trad: 'Card 17'},
    18: {trad: 'Card 18'},
    19: {trad: 'Card 19'},
    20: {trad: 'Card 20'},
    21: {trad: 'Card 21'},
    22: {trad: 'Card 22'},
    23: {trad: 'Card 23'},
    24: {trad: 'Card 24'},
    25: {trad: 'Card 25'},
    26: {trad: 'Card 26'},
    27: {trad: 'Card 27'},
    28: {trad: 'Card 28'},
    29: {trad: 'Card 29'},
    30: {trad: 'Card 30'},
    31: {trad: 'Card 31'},
    32: {trad: 'Card 32'},
    33: {trad: 'Card 33'},
    34: {trad: 'Card 34'},
    35: {trad: 'Card 35'},
    36: {trad: 'Card 36'},
};

treeMaker(tree, {
    id: 'my_tree', card_click: function (element) {
        console.log(element);
    },
    treeParams: treeParams,
    'link_width': '4px',
    'link_color': '#2199e8',
});`

    treemaster

    opened by DrAljuhani 3
Owner
Rémi Leclercq
Web developer
Rémi Leclercq
GitHub
PaperFreeForm is a Free Form Builder to save trees and create beautiful forms

PaperFreeForm PaperFreeForm is a Free Form Builder to save trees and create beautiful forms. Easy online form builder that works like a doc. Just add

Zaid Mukaddam 5 Feb 24, 2022
Explore very large trees in the browser

Taxodium Taxodium is a client-side Javascript tool for exploring extremely large trees. It is currently used for Cov2Tree, a display of the global SAR

Theo Sanderson 63 Dec 18, 2022
A starter next.js + solidity project that implements merkle trees

Create Merkle App By Backseats This is an example app that shows you how to use a Merkle tree for your allow list Includes a partial contract contract

null 6 Nov 6, 2022
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. <section>

Nick Dreckshage 464 Dec 21, 2022
A JavaScript library to create html elements with js easily

applecake is a javascript library for making HTML elements with javascript really easy . Why applecake ? Really easy to use It is not heavy It has a s

null 4 Jul 21, 2021
Create HTML from CSS! A modern javascript library you'd expect Facebook to invent.

Create HTML from CSS! A modern javascript library you'd expect Facebook to invent. Slowly build modern websites without ever leaving your CSS, with HeadwindHTML

Gökhan Mete ERTÜRK 282 Dec 30, 2022
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Matthieu Bué 277 Nov 25, 2022
this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Afolabi Akorede 7 Jul 17, 2022
LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

Hossein Khalili 3 May 3, 2022
Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

LeaderBoard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Mini Presentation Additio

Clinton Mbonu 20 Jun 30, 2022