├── examples
├── headshots
│ ├── 1.jpg
│ ├── 2.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── 6.jpg
│ ├── 7.jpg
│ ├── 8.jpg
│ ├── 9.jpg
│ ├── 10.jpg
│ └── 11.jpg
├── comments
│ ├── avatar.jpg
│ ├── example8.css
│ ├── example8.js
│ └── index.html
├── collapsable
│ ├── img
│ │ ├── pam.png
│ │ ├── figgs.png
│ │ ├── lana.png
│ │ ├── cheryl.png
│ │ ├── malory.png
│ │ ├── sterling.png
│ │ └── woodhouse.png
│ ├── collapsable.css
│ ├── index.html
│ └── collapsable.js
├── tennis-draw
│ ├── trophy.png
│ ├── flags
│ │ ├── arg.jpg
│ │ ├── aus.jpg
│ │ ├── can.jpg
│ │ ├── esp.jpg
│ │ ├── fin.jpg
│ │ ├── fra.jpg
│ │ ├── lat.jpg
│ │ ├── rus.jpg
│ │ ├── slo.jpg
│ │ ├── srb.jpg
│ │ ├── ukr.jpg
│ │ └── usa.jpg
│ ├── index.html
│ ├── example7.css
│ └── example7.js
├── test_ground
│ ├── image.png
│ ├── slika-manja.jpg
│ ├── index.css
│ ├── index.html
│ └── example_configs.js
├── evolution-tree
│ ├── img
│ │ ├── ferns.png
│ │ ├── fungi.png
│ │ ├── ptica.png
│ │ ├── rak.png
│ │ ├── slon.png
│ │ ├── zaba.png
│ │ ├── flatare.png
│ │ ├── insekti.png
│ │ ├── mosculs.png
│ │ ├── mosses.png
│ │ ├── spuzva.png
│ │ ├── zvezda.png
│ │ ├── bonyfish.png
│ │ ├── chelirates.png
│ │ ├── cnidarians.png
│ │ ├── cvijece1.png
│ │ ├── cvijece2.png
│ │ ├── greenalgae.png
│ │ ├── kornjaca.png
│ │ ├── ne_cvijece.png
│ │ ├── protoctis.png
│ │ ├── rotfiers.png
│ │ ├── roundworms.png
│ │ ├── zmijurina.png
│ │ ├── lophoprates.png
│ │ ├── truebacteria.png
│ │ ├── archaebacteria.png
│ │ ├── segmentedworms.png
│ │ └── cartilaginousfish.png
│ ├── index.html
│ ├── example6.css
│ └── example6.js
├── super-simple
│ ├── super-simple.css
│ ├── index.html
│ └── super-simple.js
├── no-parent
│ ├── index.html
│ ├── no-parent.css
│ └── no-parent.js
├── basic-example
│ ├── index.html
│ ├── basic-example.css
│ └── basic-example.js
├── custom-colored
│ ├── index.html
│ ├── custom-colored.css
│ └── custom-colored.js
├── connectors
│ ├── index.html
│ ├── connectors.css
│ └── connectors.js
├── timeline
│ ├── index.html
│ ├── timeline.css
│ └── timeline.js
├── simple-scrollbar
│ ├── index.html
│ ├── simple-scrollbar.css
│ └── simple-scrollbar.js
└── custom-color-plus-scrollbar
│ ├── index.html
│ ├── custom-color-plus-scrollbar.css
│ └── custom-color-plus-scrollbar.js
├── README.md
├── Treant.css
├── package.json
├── LICENSE
└── vendor
├── perfect-scrollbar
├── perfect-scrollbar.css
└── perfect-scrollbar.js
├── jquery.mousewheel.js
└── jquery.easing.js
/examples/headshots/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/1.jpg
--------------------------------------------------------------------------------
/examples/headshots/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/2.jpg
--------------------------------------------------------------------------------
/examples/headshots/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/4.jpg
--------------------------------------------------------------------------------
/examples/headshots/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/5.jpg
--------------------------------------------------------------------------------
/examples/headshots/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/6.jpg
--------------------------------------------------------------------------------
/examples/headshots/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/7.jpg
--------------------------------------------------------------------------------
/examples/headshots/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/8.jpg
--------------------------------------------------------------------------------
/examples/headshots/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/9.jpg
--------------------------------------------------------------------------------
/examples/headshots/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/10.jpg
--------------------------------------------------------------------------------
/examples/headshots/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/headshots/11.jpg
--------------------------------------------------------------------------------
/examples/comments/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/comments/avatar.jpg
--------------------------------------------------------------------------------
/examples/collapsable/img/pam.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/pam.png
--------------------------------------------------------------------------------
/examples/tennis-draw/trophy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/trophy.png
--------------------------------------------------------------------------------
/examples/test_ground/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/test_ground/image.png
--------------------------------------------------------------------------------
/examples/collapsable/img/figgs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/figgs.png
--------------------------------------------------------------------------------
/examples/collapsable/img/lana.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/lana.png
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/arg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/arg.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/aus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/aus.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/can.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/can.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/esp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/esp.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/fin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/fin.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/fra.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/fra.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/lat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/lat.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/rus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/rus.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/slo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/slo.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/srb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/srb.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/ukr.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/ukr.jpg
--------------------------------------------------------------------------------
/examples/tennis-draw/flags/usa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/tennis-draw/flags/usa.jpg
--------------------------------------------------------------------------------
/examples/collapsable/img/cheryl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/cheryl.png
--------------------------------------------------------------------------------
/examples/collapsable/img/malory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/malory.png
--------------------------------------------------------------------------------
/examples/collapsable/img/sterling.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/sterling.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/ferns.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/ferns.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/fungi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/fungi.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/ptica.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/ptica.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/rak.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/rak.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/slon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/slon.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/zaba.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/zaba.png
--------------------------------------------------------------------------------
/examples/test_ground/slika-manja.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/test_ground/slika-manja.jpg
--------------------------------------------------------------------------------
/examples/collapsable/img/woodhouse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/collapsable/img/woodhouse.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/flatare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/flatare.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/insekti.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/insekti.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/mosculs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/mosculs.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/mosses.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/mosses.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/spuzva.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/spuzva.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/zvezda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/zvezda.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/bonyfish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/bonyfish.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/chelirates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/chelirates.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/cnidarians.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/cnidarians.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/cvijece1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/cvijece1.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/cvijece2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/cvijece2.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/greenalgae.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/greenalgae.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/kornjaca.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/kornjaca.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/ne_cvijece.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/ne_cvijece.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/protoctis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/protoctis.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/rotfiers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/rotfiers.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/roundworms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/roundworms.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/zmijurina.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/zmijurina.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/lophoprates.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/lophoprates.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/truebacteria.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/truebacteria.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/archaebacteria.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/archaebacteria.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/segmentedworms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/segmentedworms.png
--------------------------------------------------------------------------------
/examples/evolution-tree/img/cartilaginousfish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fperucic/treant-js/HEAD/examples/evolution-tree/img/cartilaginousfish.png
--------------------------------------------------------------------------------
/examples/super-simple/super-simple.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 |
3 |
4 | body { background: #fff; }
5 |
6 | /* optional Container STYLES */
7 | .chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
8 | .node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; }
9 | .node p { font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | _______ _ _
3 | |__ __| | | (_)
4 | | |_ __ ___ __ _ _ __ | |_ ______ _ ___
5 | | | '__/ _ \/ _` | '_ \| __|______| / __|
6 | | | | | __/ (_| | | | | |_ | \__ \
7 | |_|_| \___|\__,_|_| |_|\__| | |___/
8 | _/ |
9 | |__/
10 |
11 |
12 | Treant-js is an SVG based JS library for drawing tree diagrams.
13 | It relies on Raphael for handling SVG and animations.
14 |
15 | For Docs, Examples, and everything else see:
16 | http://fperucic.github.io/treant-js
17 |
--------------------------------------------------------------------------------
/Treant.css:
--------------------------------------------------------------------------------
1 | /* required LIB STYLES */
2 | /* .Treant se automatski dodaje na svaki chart conatiner */
3 | .Treant { position: relative; overflow: hidden; padding: 0 !important; }
4 | .Treant > .node,
5 | .Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
6 | .Treant.Treant-loaded .node,
7 | .Treant.Treant-loaded .pseudo { visibility: visible; }
8 | .Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
9 | .Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
10 | .Treant .collapsed .collapse-switch { background-color: #868DEE; }
11 | .Treant > .node img { border: none; float: left; }
--------------------------------------------------------------------------------
/examples/no-parent/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart example 1
8 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
--------------------------------------------------------------------------------
/examples/super-simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart emulation
8 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/examples/tennis-draw/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tennis draw example
8 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
--------------------------------------------------------------------------------
/examples/basic-example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Basic example
8 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
--------------------------------------------------------------------------------
/examples/custom-colored/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Custom colored example
8 | --@--
14 |
15 |
16 |
17 |
18 |
21 |
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "treantjs",
3 | "version": "1.0.0",
4 | "description": "JavaScipt library for visualization of tree diagrams",
5 | "main": "Treant.js",
6 | "directories": {
7 | "example": "examples"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/fperucic/treant-js.git"
15 | },
16 | "keywords": [
17 | "treant",
18 | "diagram",
19 | "tree",
20 | "js",
21 | "svg",
22 | "draw"
23 | ],
24 | "author": "Fran Peručić",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/fperucic/treant-js/issues"
28 | },
29 | "homepage": "https://github.com/fperucic/treant-js#readme"
30 | }
--------------------------------------------------------------------------------
/examples/connectors/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Connectors style example
8 |
16 |
17 |
18 |
19 |
20 |
21 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/examples/timeline/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart emulation
8 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/examples/super-simple/super-simple.js:
--------------------------------------------------------------------------------
1 |
2 | var simple_chart_config = {
3 | chart: {
4 | container: "#OrganiseChart-simple"
5 | },
6 |
7 | nodeStructure: {
8 | text: { name: "Parent node" },
9 | children: [
10 | {
11 | text: { name: "First child" }
12 | },
13 | {
14 | text: { name: "Second child" }
15 | }
16 | ]
17 | }
18 | };
19 |
20 | // // // // // // // // // // // // // // // // // // // // // // // //
21 |
22 | var config = {
23 | container: "#OrganiseChart-simple"
24 | };
25 |
26 | var parent_node = {
27 | text: { name: "Parent node" }
28 | };
29 |
30 | var first_child = {
31 | parent: parent_node,
32 | text: { name: "First child" }
33 | };
34 |
35 | var second_child = {
36 | parent: parent_node,
37 | text: { name: "Second child" }
38 | };
39 |
40 | var simple_chart_config = [
41 | config, parent_node,
42 | first_child, second_child
43 | ];
44 |
--------------------------------------------------------------------------------
/examples/collapsable/collapsable.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; }
11 | /* optional Container STYLES */
12 | .chart { height: 600px; margin: 5px; width: 900px; }
13 | .Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
14 | .Treant > .node img { width: 100%; height: 100%; }
15 |
16 | .Treant .collapse-switch { width: 100%; height: 100%; border: none; }
17 | .Treant .node.collapsed { background-color: #DEF82D; }
18 | .Treant .node.collapsed .collapse-switch { background: none; }
--------------------------------------------------------------------------------
/examples/collapsable/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Collapsable example
8 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT) Copyright © 2016 Fran Peručić
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 |
--------------------------------------------------------------------------------
/examples/evolution-tree/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Evolution tree example
8 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
--------------------------------------------------------------------------------
/examples/simple-scrollbar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart example 1
8 | --@--
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
--------------------------------------------------------------------------------
/examples/custom-color-plus-scrollbar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart example 1
8 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
--------------------------------------------------------------------------------
/examples/connectors/connectors.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 |
3 |
4 | body { background: #fff; font-family: "Droid Serif",Georgia,"Times New Roman",Times,serif; color: #444444; }
5 |
6 | /* optional Container STYLES */
7 | .chart { height: 600px; width: 750px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
8 |
9 | .node { font-size: 11px; }
10 |
11 | .node.big-commpany {
12 | cursor: pointer;
13 | padding: 0 2px;
14 | min-width: 60px;
15 | text-align: center;
16 | height: 30px;
17 | border: 2px solid #E8E8E3;
18 | border-radius: 2px;
19 | box-shadow: 1px 1px 1px rgba(0,0,0,.5);
20 | background: #fff;
21 | }
22 | .node.big-commpany:active {
23 | box-shadow: inset 1px 1px 1px rgba(0,0,0,.1);
24 | margin: 1px 0 0 1px;
25 | border: 2px solid #D3D3CB;
26 | }
27 |
28 | .node.big-commpany .node-name {
29 | line-height: 30px;
30 | color: #9B9B9B;
31 | }
32 |
33 | .node.big-commpany:hover .node-name {
34 | color: #8B8B8B;
35 | text-shadow: 1px 1px rgba(0,0,0,.15);
36 | }
--------------------------------------------------------------------------------
/examples/basic-example/basic-example.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; }
11 | /* optional Container STYLES */
12 | .chart { height: 600px; margin: 5px; width: 900px; }
13 | .Treant > .node { }
14 | .Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
15 | .node-name { font-weight: bold;}
16 |
17 | .nodeExample1 {
18 | padding: 2px;
19 | -webkit-border-radius: 3px;
20 | -moz-border-radius: 3px;
21 | border-radius: 3px;
22 | background-color: #ffffff;
23 | border: 1px solid #000;
24 | width: 200px;
25 | font-family: Tahoma;
26 | font-size: 12px;
27 | }
28 |
29 | .nodeExample1 img {
30 | margin-right: 10px;
31 | }
--------------------------------------------------------------------------------
/examples/timeline/timeline.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 |
3 |
4 | body { background: #fff; }
5 |
6 | /* optional Container STYLES */
7 | .chart { height: 400px; width: 900px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
8 | .node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; background: #fff; transition: background 0.7s, color 0.7s; }
9 | .node p { font-size: 17px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }
10 |
11 | .node.main-date { width: 10px; height: 10px; border-radius: 50%; }
12 | .node.main-date p.node-name { top: -15px; font-size: 15px; position: absolute; opacity: 0; z-index: -1; left: -30px; transition: top 1s, opacity 1s; }
13 | .node.main-date:hover p.node-name { opacity: 1; top: -25px; }
14 |
15 | .Treant .collapse-switch { width: 100%; height: 100%; border: none; }
16 | .Treant .node.collapsed { background-color: #D7F5FF; color: #827A7A; }
17 | .Treant .node.collapsed .collapse-switch { background: none; }
18 |
19 | .timeline .node-desc { position: absolute; left: -999px; width: 2000px; background: #665B57; height: 3px; padding: 0; z-index: -1; top: 3px; }
--------------------------------------------------------------------------------
/examples/no-parent/no-parent.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; }
11 | /* optional Container STYLES */
12 | .chart { height: 670px; margin: 5px; width: 900px; }
13 | .Treant > .node { }
14 | .Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
15 | .node-name { font-weight: bold; font-size: 16px;}
16 |
17 | .nodeExample1 {
18 | padding: 10px;
19 | -webkit-border-radius: 3px;
20 | -moz-border-radius: 3px;
21 | border-radius: 3px;
22 | background-color: #ffffff;
23 | border: 1px solid #000;
24 | width: 200px;
25 | font-family: Tahoma;
26 | font-size: 12px;
27 | }
28 |
29 | .nodeExample1 img {
30 | margin-right: 10px;
31 | }
--------------------------------------------------------------------------------
/examples/comments/example8.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 |
3 | body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
4 | /* optional Container STYLES */
5 | .chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
6 | .comments { width: 427px; margin: 15px auto; }
7 | .comments ul { margin-left: 35px; list-style: none; }
8 | .comment {
9 | color: #333333;
10 | display: inline-block;
11 | font-size: 14px;
12 | margin-top: 6px;
13 | width: 360px;
14 | }
15 |
16 | .comment img {
17 | border-radius: 3px 3px 3px 3px;
18 | float: left;
19 | height: 30px;
20 | margin-right: 8px;
21 | margin-top: 3px;
22 | width: 30px;
23 | }
24 | .comment p {
25 | color: #42474A;
26 | font-size: 14px;
27 | line-height: 1.4em;
28 | margin-bottom: 0;
29 | max-height: 4.2em;
30 | overflow: hidden;
31 | }
32 |
33 | .comment .user {
34 | color: rgba(30, 55, 70, 0.4);
35 | font-size: 13px;
36 | font-weight: 600;
37 | }
38 |
39 | .Treant .comment { margin: 0; padding: 3px; border: 1px solid #ddd; border-radius: 3px; }
--------------------------------------------------------------------------------
/examples/evolution-tree/example6.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
11 | /* optional Container STYLES */
12 | .chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
13 |
14 | .evolution-tree {
15 | padding: 2px;
16 | width: 40px; height: 40px;
17 | border-radius: 3px;
18 | font-size: 10px;
19 | }
20 |
21 | .evolution-tree .node-name { text-align: center; position: absolute; width: 88px; left: -50%; }
22 | .evolution-tree img { margin-right: 10px; float: none !important; }
23 |
24 | .evolution-tree.the-parent { border-radius: 50%; background-color: #000; width: 3px; height: 3px; }
25 | .evolution-tree.the-parent .node-name { width: auto; margin-top: -7px; text-indent: 12px; font-weight: bold; }
--------------------------------------------------------------------------------
/examples/simple-scrollbar/simple-scrollbar.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; }
11 | /* optional Container STYLES */
12 | .chart { height: 400px; margin: 5px; width: 500px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
13 | .Treant > .node { }
14 | .Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
15 | .node-name { font-weight: bold;}
16 |
17 | .nodeExample1 {
18 | padding: 2px;
19 | -webkit-border-radius: 3px;
20 | -moz-border-radius: 3px;
21 | border-radius: 3px;
22 | background-color: #ffffff;
23 | border: 1px solid #000;
24 | width: 200px;
25 | font-family: Tahoma;
26 | font-size: 12px;
27 | }
28 |
29 | .nodeExample1 img {
30 | margin-right: 10px;
31 | }
--------------------------------------------------------------------------------
/examples/custom-colored/custom-colored.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; }
11 | /* optional Container STYLES */
12 | .chart { height: 550px; margin: 5px; width: 900px; }
13 | .Treant > .node { }
14 | .Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
15 | .node-name { font-weight: bold;}
16 |
17 | .nodeExample1 {
18 | padding: 2px;
19 | -webkit-border-radius: 3px;
20 | -moz-border-radius: 3px;
21 | border-radius: 3px;
22 | background-color: #ffffff;
23 | border: 1px solid #000;
24 | width: 200px;
25 | font-family: Tahoma;
26 | font-size: 12px;
27 | }
28 |
29 | .nodeExample1 img {
30 | margin-right: 10px;
31 | }
32 |
33 | .gray {
34 | background-color: #909090;
35 | }
36 |
37 | .light-gray {
38 | background-color: #D3D3C7;
39 | }
40 |
41 | .blue {
42 | background-color: #A2BDFD;
43 | }
--------------------------------------------------------------------------------
/examples/test_ground/index.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #333; }
11 |
12 | /* optional Container STYLES */
13 | .chart { height: 290px; margin: 5px; width: 400px; border: 2px solid #727564; border-radius: 3px; float: left; }
14 |
15 | /* optional STYLES */
16 | .Treant > .node { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 8px; }
17 |
18 | .Treant .extra-title { font-size: 20px; }
19 | .Treant > .node { background-color: gray; border: 2px solid #ccc; padding: 2px; border-radius: 2px; }
20 | .Treant > .redNode { background-color: red; }
21 | .Treant > .greenNode { background-color: green; }
22 | .Treant > .blueNode { background-color: blue; }
23 | .Treant > .cyan { background-color: cyan; height: 30px; width: 40px; }
24 | /*.Treant > .cyan { background-color: cyan; height: 0; width: 0; border: 0; padding: 0; overflow: hidden; }*/
25 | .Treant ul { padding-left: 17px; }
26 |
27 | #NodeID { background-color: white; }
--------------------------------------------------------------------------------
/examples/custom-color-plus-scrollbar/custom-color-plus-scrollbar.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; }
11 | /* optional Container STYLES */
12 | .chart { height: 670px; margin: 5px; width: 900px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
13 | .Treant > .node { }
14 | .Treant > p { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 12px; }
15 | .node-name { font-weight: bold;}
16 |
17 | .nodeExample1 {
18 | padding: 2px;
19 | -webkit-border-radius: 3px;
20 | -moz-border-radius: 3px;
21 | border-radius: 3px;
22 | background-color: #262626;
23 | border: 1px solid #000;
24 | width: 200px;
25 | font-family: Tahoma;
26 | font-size: 12px;
27 | color: #ffffff;
28 | }
29 |
30 | .nodeExample1 img {
31 | margin-right: 10px;
32 | }
33 |
34 | .Treant > a:link {
35 | color: #ffffff;
36 | }
37 |
38 | .Treant > a:visited {
39 | color: #ffffff;
40 | }
41 |
42 | .Treant > a:link:hover {
43 | color: #636363;
44 | }
--------------------------------------------------------------------------------
/examples/timeline/timeline.js:
--------------------------------------------------------------------------------
1 |
2 | var simple_chart_config = {
3 | chart: {
4 | container: "#OrganiseChart-simple",
5 | hideRootNode: true,
6 | connectors: {
7 | type: 'step',
8 | style: {
9 | "arrow-end": "classic-wide-long",
10 | "stroke-width": 2,
11 | "stroke": "#665B57"
12 | }
13 | },
14 | node: {
15 | collapsable: true
16 | },
17 | animation: {
18 | nodeAnimation: "easeOutBounce",
19 | nodeSpeed: 700,
20 | connectorsAnimation: "bounce",
21 | connectorsSpeed: 700
22 | }
23 | },
24 |
25 | nodeStructure: {
26 | text: { name: "Parent node" },
27 | children: [
28 | {
29 | HTMLclass: "timeline main-date",
30 | text: { desc: "", name: "01.01.2014" },
31 | children: [
32 | {
33 | text: { name: "Event 1" },
34 | },
35 | {
36 | text: { name: "Event 2" }
37 | }
38 | ]
39 | },
40 | {
41 | HTMLclass: "main-date",
42 | text: { name: "12.02.2014" },
43 | collapsed: true,
44 | children: [
45 | {
46 | text: { name: "Event 1" }
47 | },
48 | {
49 | text: { name: "Event 2" }
50 | }
51 | ]
52 | },
53 | {
54 | HTMLclass: "main-date",
55 | text: { name: "23.02.2014" },
56 | children: [
57 | {
58 | text: { name: "Event 1" }
59 | },
60 | {
61 | text: { name: "Event 2" }
62 | }
63 | ]
64 | },
65 | {
66 | HTMLclass: "main-date",
67 | text: { name: "03.06.2014" }
68 | }
69 | ]
70 | }
71 | };
72 |
--------------------------------------------------------------------------------
/examples/tennis-draw/example7.css:
--------------------------------------------------------------------------------
1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
2 | table { border-collapse:collapse; border-spacing:0; }
3 | fieldset,img { border:0; }
4 | address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
5 | caption,th { text-align:left; }
6 | h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
7 | q:before,q:after { content:''; }
8 | abbr,acronym { border:0; }
9 |
10 | body { background: #fff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
11 | /* optional Container STYLES */
12 | .chart { height: 600px; width: 900px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }
13 |
14 | .tennis-draw {
15 | font-size: 10px;
16 | width: 100px;
17 | }
18 |
19 | .tennis-draw.winner { height: 38px; }
20 | .tennis-draw.winner:hover { background: url('trophy.png') right 0 no-repeat; }
21 | .tennis-draw.winner .node-name { padding-left: 10px; margin-top: 1px; display: block; }
22 |
23 | .tennis-draw .node-name { padding: 2px; white-space: pre; color: #00AFF0; }
24 | .tennis-draw .node-desc { padding: 2px; color: #999; }
25 |
26 | .tennis-draw.first-draw .node-title,
27 | .tennis-draw.first-draw .node-name,
28 | .tennis-draw.first-draw img { position: absolute; top: -8px; }
29 | .tennis-draw.first-draw:hover img { width: 20px; top: -12px; }
30 |
31 | .tennis-draw.first-draw { width: 165px; height: 20px; }
32 | .tennis-draw.first-draw img { margin: 3px 4px 0 0; left: 25px; }
33 | .tennis-draw.first-draw .node-title { margin-top: 3px; }
34 | .tennis-draw.first-draw .node-name { width: 113px; padding-left: 50px; }
35 | .tennis-draw.first-draw.bye .node-name { color: #999; }
36 |
37 |
--------------------------------------------------------------------------------
/vendor/perfect-scrollbar/perfect-scrollbar.css:
--------------------------------------------------------------------------------
1 | .ps-container .ps-scrollbar-x {
2 | position: absolute; /* please don't change 'position' */
3 | bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
4 | height: 8px;
5 | background-color: #aaa;
6 | border-radius: 4px;
7 | -webkit-border-radius: 4px;
8 | -moz-border-radius: 4px;
9 | opacity: 0;
10 | filter: alpha(opacity = 0);
11 | -webkit-transition: opacity.2s linear;
12 | -moz-transition: opacity .2s linear;
13 | transition: opacity .2s linear;
14 | }
15 |
16 | .ps-container:hover .ps-scrollbar-x {
17 | opacity: 0.6;
18 | filter: alpha(opacity = 60);
19 | }
20 |
21 | .ps-container .ps-scrollbar-x:hover {
22 | opacity: 0.9;
23 | filter: alpha(opacity = 90);
24 | cursor:default;
25 | }
26 |
27 | .ps-container .ps-scrollbar-x.in-scrolling {
28 | opacity: 0.9;
29 | filter: alpha(opacity = 90);
30 | }
31 |
32 | .ps-container .ps-scrollbar-y {
33 | position: absolute; /* please don't change 'position' */
34 | right: 3px; /* there must be 'right' for ps-scrollbar-y */
35 | width: 8px;
36 | background-color: #aaa;
37 | border-radius: 4px;
38 | -webkit-border-radius: 4px;
39 | -moz-border-radius: 4px;
40 | opacity: 0;
41 | filter: alpha(opacity = 0);
42 | -webkit-transition: opacity.2s linear;
43 | -moz-transition: opacity .2s linear;
44 | transition: opacity .2s linear;
45 | }
46 |
47 | .ps-container:hover .ps-scrollbar-y {
48 | opacity: 0.6;
49 | filter: alpha(opacity = 60);
50 | }
51 |
52 | .ps-container .ps-scrollbar-y:hover {
53 | opacity: 0.9;
54 | filter: alpha(opacity = 90);
55 | cursor: default;
56 | }
57 |
58 | .ps-container .ps-scrollbar-y.in-scrolling {
59 | opacity: 0.9;
60 | filter: alpha(opacity = 90);
61 | }
62 |
--------------------------------------------------------------------------------
/examples/comments/example8.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | container: "#OrganiseChart8",
3 | levelSeparation: 70,
4 | siblingSeparation: 60,
5 | nodeAlign: "BOTTOM",
6 | connectors: {
7 | type: "step",
8 | style: {
9 | "stroke-width": 2,
10 | "stroke": "#ccc",
11 | "stroke-dasharray": "--", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
12 | "arrow-end": "classic-wide-long"
13 | }
14 | }
15 | },
16 |
17 | first_post = {
18 | innerHTML: "#first-post"
19 | },
20 |
21 | first_reply = {
22 | parent: first_post,
23 | innerHTML: "#first-reply"
24 | },
25 |
26 | second_reply = {
27 | parent: first_post,
28 | innerHTML: "#second-reply"
29 | }
30 |
31 | second_reply_reply = {
32 | parent: second_reply,
33 | innerHTML: "#second-reply-reply"
34 | },
35 |
36 | tree_structure = [
37 | config, first_post, first_reply, second_reply, second_reply_reply
38 | ];
39 |
40 |
41 | /* ALTERNATIVE tree_structure CONFIG, same result as above
42 |
43 | var tree_structure = {
44 | chart: {
45 | container: "#OrganiseChart8",
46 | levelSeparation: 70,
47 | siblingSeparation: 60,
48 | nodeAlign: "BOTTOM",
49 | connectors: {
50 | type: "step",
51 | style: {
52 | "stroke-width": 2,
53 | "stroke": "#ccc",
54 | "stroke-dasharray": "--",
55 | "arrow-end": "classic-wide-long"
56 | }
57 | }
58 | },
59 | nodeStructure: {
60 | innerHTML: "#first-post",
61 | children: [
62 | {
63 | innerHTML: "#first-reply"
64 | },
65 | {
66 | innerHTML: "#second-reply",
67 | children: [
68 | {
69 | innerHTML: "#second-reply-reply"
70 | }
71 | ]
72 | }
73 | ]
74 | }
75 | };
76 |
77 | */
78 |
79 |
80 |
--------------------------------------------------------------------------------
/vendor/jquery.mousewheel.js:
--------------------------------------------------------------------------------
1 | /*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
2 | * Licensed under the MIT License (LICENSE.txt).
3 | *
4 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
5 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
6 | * Thanks to: Seamus Leahy for adding deltaX and deltaY
7 | *
8 | * Version: 3.0.6
9 | *
10 | * Requires: 1.2.2+
11 | */
12 |
13 | (function($) {
14 |
15 | var types = ['DOMMouseScroll', 'mousewheel'];
16 |
17 | if ($.event.fixHooks) {
18 | for ( var i=types.length; i; ) {
19 | $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
20 | }
21 | }
22 |
23 | $.event.special.mousewheel = {
24 | setup: function() {
25 | if ( this.addEventListener ) {
26 | for ( var i=types.length; i; ) {
27 | this.addEventListener( types[--i], handler, false );
28 | }
29 | } else {
30 | this.onmousewheel = handler;
31 | }
32 | },
33 |
34 | teardown: function() {
35 | if ( this.removeEventListener ) {
36 | for ( var i=types.length; i; ) {
37 | this.removeEventListener( types[--i], handler, false );
38 | }
39 | } else {
40 | this.onmousewheel = null;
41 | }
42 | }
43 | };
44 |
45 | $.fn.extend({
46 | mousewheel: function(fn) {
47 | return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
48 | },
49 |
50 | unmousewheel: function(fn) {
51 | return this.unbind("mousewheel", fn);
52 | }
53 | });
54 |
55 |
56 | function handler(event) {
57 | var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
58 | event = $.event.fix(orgEvent);
59 | event.type = "mousewheel";
60 |
61 | // Old school scrollwheel delta
62 | if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
63 | if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
64 |
65 | // New school multidimensional scroll (touchpads) deltas
66 | deltaY = delta;
67 |
68 | // Gecko
69 | if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
70 | deltaY = 0;
71 | deltaX = -1*delta;
72 | }
73 |
74 | // Webkit
75 | if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
76 | if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
77 |
78 | // Add event and delta to the front of the arguments
79 | args.unshift(event, delta, deltaX, deltaY);
80 |
81 | return ($.event.dispatch || $.event.handle).apply(this, args);
82 | }
83 |
84 | })(jQuery);
85 |
--------------------------------------------------------------------------------
/examples/collapsable/collapsable.js:
--------------------------------------------------------------------------------
1 |
2 | var chart_config = {
3 | chart: {
4 | container: "#collapsable-example",
5 |
6 | animateOnInit: true,
7 |
8 | node: {
9 | collapsable: true
10 | },
11 | animation: {
12 | nodeAnimation: "easeOutBounce",
13 | nodeSpeed: 700,
14 | connectorsAnimation: "bounce",
15 | connectorsSpeed: 700
16 | }
17 | },
18 | nodeStructure: {
19 | image: "img/malory.png",
20 | children: [
21 | {
22 | image: "img/lana.png",
23 | collapsed: true,
24 | children: [
25 | {
26 | image: "img/figgs.png"
27 | }
28 | ]
29 | },
30 | {
31 | image: "img/sterling.png",
32 | childrenDropLevel: 1,
33 | children: [
34 | {
35 | image: "img/woodhouse.png"
36 | }
37 | ]
38 | },
39 | {
40 | pseudo: true,
41 | children: [
42 | {
43 | image: "img/cheryl.png"
44 | },
45 | {
46 | image: "img/pam.png"
47 | }
48 | ]
49 | }
50 | ]
51 | }
52 | };
53 |
54 | /* Array approach
55 | var config = {
56 | container: "#collapsable-example",
57 |
58 | animateOnInit: true,
59 |
60 | node: {
61 | collapsable: true
62 | },
63 | animation: {
64 | nodeAnimation: "easeOutBounce",
65 | nodeSpeed: 700,
66 | connectorsAnimation: "bounce",
67 | connectorsSpeed: 700
68 | }
69 | },
70 | malory = {
71 | image: "img/malory.png"
72 | },
73 |
74 | lana = {
75 | parent: malory,
76 | image: "img/lana.png"
77 | }
78 |
79 | figgs = {
80 | parent: lana,
81 | image: "img/figgs.png"
82 | }
83 |
84 | sterling = {
85 | parent: malory,
86 | childrenDropLevel: 1,
87 | image: "img/sterling.png"
88 | },
89 |
90 | woodhouse = {
91 | parent: sterling,
92 | image: "img/woodhouse.png"
93 | },
94 |
95 | pseudo = {
96 | parent: malory,
97 | pseudo: true
98 | },
99 |
100 | cheryl = {
101 | parent: pseudo,
102 | image: "img/cheryl.png"
103 | },
104 |
105 | pam = {
106 | parent: pseudo,
107 | image: "img/pam.png"
108 | },
109 |
110 | chart_config = [config, malory, lana, figgs, sterling, woodhouse, pseudo, pam, cheryl];
111 |
112 | */
--------------------------------------------------------------------------------
/examples/no-parent/no-parent.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | container: "#OrganiseChart1",
3 | rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
4 | hideRootNode: true,
5 | // levelSeparation: 30,
6 | siblingSeparation: 40,
7 | subTeeSeparation: 30,
8 |
9 | connectors: {
10 | type: 'curve'
11 | },
12 | node: {
13 | HTMLclass: 'nodeExample1'
14 | }
15 | },
16 | root = {},
17 |
18 | cto = {
19 | parent: root,
20 | text:{
21 | name: "Joe Linux",
22 | title: "Board member",
23 | contact: "email: we@aregreat.com"
24 | },
25 | stackChildren: true,
26 | HTMLid: "coo"
27 | },
28 | cbo = {
29 | parent: root,
30 | stackChildren: true,
31 | text:{
32 | name: "Linda May",
33 | title: "Board member",
34 | contact: "email: we@aregreat.com"
35 | },
36 | HTMLid: "cbo"
37 | },
38 | cdo = {
39 | parent: root,
40 | text:{
41 | name: "John Green",
42 | title: "Board member, CEO",
43 | contact: "email: we@aregreat.com"
44 | },
45 | HTMLid: "cdo"
46 | },
47 | cio = {
48 | parent: cto,
49 | text:{
50 | name: "Ron Blomquist",
51 | title: "Chief Information Security Officer",
52 | contact: "email: we@aregreat.com"
53 | },
54 | HTMLid: "cio"
55 | },
56 | ciso = {
57 | parent: cto,
58 | text:{
59 | name: "Michael Rubin",
60 | title: "Chief Innovation Officer",
61 | contact: "email: we@aregreat.com"
62 | },
63 | HTMLid: "ciso"
64 | },
65 | cio2 = {
66 | parent: cdo,
67 | text:{
68 | name: "Erica Reel",
69 | title: "Chief Customer Officer",
70 | contact: "email: we@aregreat.com"
71 | },
72 | link: {
73 | href: "www.google.com"
74 | },
75 | HTMLid: "cio2"
76 | },
77 | ciso2 = {
78 | parent: cbo,
79 | text:{
80 | name: "Alice Lopez",
81 | title: "Chief Communications Officer",
82 | contact: "email: we@aregreat.com"
83 | },
84 | HTMLid: "ciso2"
85 | },
86 | ciso3 = {
87 | parent: cbo,
88 | text:{
89 | name: "Mary Johnson",
90 | title: "Chief Brand Officer",
91 | contact: "email: we@aregreat.com"
92 | },
93 | HTMLid: "ciso2"
94 | },
95 | ciso4 = {
96 | parent: cbo,
97 | text:{
98 | name: "Kirk Douglas",
99 | title: "Chief Business Development Officer",
100 | contact: "email: we@aregreat.com"
101 | },
102 | HTMLid: "ciso2"
103 | }
104 |
105 | ALTERNATIVE = [
106 | config,
107 | root,
108 | cto,
109 | cbo,
110 | cdo,
111 | cio,
112 | ciso,
113 | cio2,
114 | ciso2,
115 | ciso3,
116 | ciso4
117 | ];
--------------------------------------------------------------------------------
/examples/comments/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Comments, selector example
8 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
77 |
78 |
--------------------------------------------------------------------------------
/examples/simple-scrollbar/simple-scrollbar.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | container: "#OrganiseChart1",
3 | rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
4 | scrollbar: "fancy",
5 | // levelSeparation: 30,
6 | siblingSeparation: 20,
7 | subTeeSeparation: 60,
8 |
9 | connectors: {
10 | type: 'step'
11 | },
12 | node: {
13 | HTMLclass: 'nodeExample1'
14 | }
15 | },
16 | ceo = {
17 | text: {
18 | name: "Mark Hill",
19 | title: "Chief executive officer",
20 | contact: "Tel: 01 213 123 134",
21 | },
22 | image: "../headshots/2.jpg",
23 | HTMLid: "ceo"
24 | },
25 |
26 | cto = {
27 | parent: ceo,
28 | text:{
29 | name: "Joe Linux",
30 | title: "Chief Technology Officer",
31 | },
32 | stackChildren: true,
33 | image: "../headshots/1.jpg",
34 | HTMLid: "coo"
35 | },
36 | cbo = {
37 | parent: ceo,
38 | stackChildren: true,
39 | text:{
40 | name: "Linda May",
41 | title: "Chief Business Officer",
42 | },
43 | image: "../headshots/5.jpg",
44 | HTMLid: "cbo"
45 | },
46 | cdo = {
47 | parent: ceo,
48 | text:{
49 | name: "John Green",
50 | title: "Chief accounting officer",
51 | contact: "Tel: 01 213 123 134",
52 | },
53 | image: "../headshots/6.jpg",
54 | HTMLid: "cdo"
55 | },
56 | cio = {
57 | parent: cto,
58 | text:{
59 | name: "Ron Blomquist",
60 | title: "Chief Information Security Officer"
61 | },
62 | image: "../headshots/8.jpg",
63 | HTMLid: "cio"
64 | },
65 | ciso = {
66 | parent: cto,
67 | text:{
68 | name: "Michael Rubin",
69 | title: "Chief Innovation Officer",
70 | contact: "we@aregreat.com"
71 | },
72 | image: "../headshots/9.jpg",
73 | HTMLid: "ciso"
74 | },
75 | cio2 = {
76 | parent: cdo,
77 | text:{
78 | name: "Erica Reel",
79 | title: "Chief Customer Officer"
80 | },
81 | link: {
82 | href: "www.google.com"
83 | },
84 | image: "../headshots/10.jpg",
85 | HTMLid: "cio2"
86 | },
87 | ciso2 = {
88 | parent: cbo,
89 | text:{
90 | name: "Alice Lopez",
91 | title: "Chief Communications Officer"
92 | },
93 | image: "../headshots/7.jpg",
94 | HTMLid: "ciso2"
95 | },
96 | ciso3 = {
97 | parent: cbo,
98 | text:{
99 | name: "Mary Johnson",
100 | title: "Chief Brand Officer"
101 | },
102 | image: "../headshots/4.jpg",
103 | HTMLid: "ciso2"
104 | },
105 | ciso4 = {
106 | parent: cbo,
107 | text:{
108 | name: "Kirk Douglas",
109 | title: "Chief Business Development Officer"
110 | },
111 | image: "../headshots/11.jpg",
112 | HTMLid: "ciso2"
113 | }
114 |
115 | ALTERNATIVE = [
116 | config,
117 | ceo,
118 | cto,
119 | cbo,
120 | cdo,
121 | cio,
122 | ciso,
123 | cio2,
124 | ciso2,
125 | ciso3,
126 | ciso4
127 | ];
--------------------------------------------------------------------------------
/examples/custom-color-plus-scrollbar/custom-color-plus-scrollbar.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | container: "#OrganiseChart1",
3 | rootOrientation: 'WEST', // NORTH || EAST || WEST || SOUTH
4 | // levelSeparation: 30,
5 | siblingSeparation: 20,
6 | subTeeSeparation: 60,
7 | scrollbar: "fancy",
8 |
9 | connectors: {
10 | type: 'step'
11 | },
12 | node: {
13 | HTMLclass: 'nodeExample1'
14 | }
15 | },
16 | ceo = {
17 | text: {
18 | name: "Mark Hill",
19 | title: "Chief executive officer",
20 | contact: "Tel: 01 213 123 134",
21 | },
22 | image: "../headshots/2.jpg",
23 | HTMLid: "ceo"
24 | },
25 |
26 | cto = {
27 | parent: ceo,
28 | text:{
29 | name: "Joe Linux",
30 | title: "Chief Technology Officer",
31 | },
32 | stackChildren: true,
33 | image: "../headshots/1.jpg",
34 | HTMLid: "coo"
35 | },
36 | cbo = {
37 | parent: ceo,
38 | text:{
39 | name: "Linda May",
40 | title: "Chief Business Officer",
41 | },
42 | image: "../headshots/5.jpg",
43 | HTMLid: "cbo"
44 | },
45 | cdo = {
46 | parent: ceo,
47 | text:{
48 | name: "John Green",
49 | title: "Chief accounting officer",
50 | contact: "Tel: 01 213 123 134",
51 | },
52 | image: "../headshots/6.jpg",
53 | HTMLid: "cdo"
54 | },
55 | cio = {
56 | parent: cto,
57 | text:{
58 | name: "Ron Blomquist",
59 | title: "Chief Information Security Officer"
60 | },
61 | image: "../headshots/8.jpg",
62 | HTMLid: "cio"
63 | },
64 | ciso = {
65 | parent: cto,
66 | text:{
67 | name: "Michael Rubin",
68 | title: "Chief Innovation Officer",
69 | contact: "we@aregreat.com"
70 | },
71 | image: "../headshots/9.jpg",
72 | HTMLid: "ciso"
73 | },
74 | cio2 = {
75 | parent: cdo,
76 | text:{
77 | name: "Erica Reel",
78 | title: "Chief Customer Officer"
79 | },
80 | link: {
81 | href: "http://www.google.com",
82 | target: "_blank"
83 | },
84 | image: "../headshots/10.jpg",
85 | HTMLid: "cio2"
86 | },
87 | ciso2 = {
88 | parent: cbo,
89 | text:{
90 | name: "Alice Lopez",
91 | title: "Chief Communications Officer"
92 | },
93 | image: "../headshots/7.jpg",
94 | HTMLid: "ciso2"
95 | },
96 | ciso3 = {
97 | parent: cbo,
98 | text:{
99 | name: "Mary Johnson",
100 | title: "Chief Brand Officer"
101 | },
102 | image: "../headshots/4.jpg",
103 | HTMLid: "ciso2"
104 | },
105 | ciso4 = {
106 | parent: cbo,
107 | text:{
108 | name: "Kirk Douglas",
109 | title: "Chief Business Development Officer"
110 | },
111 | image: "../headshots/11.jpg",
112 | HTMLid: "ciso2"
113 | }
114 |
115 | ALTERNATIVE = [
116 | config,
117 | ceo,
118 | cto,
119 | cbo,
120 | cdo,
121 | cio,
122 | ciso,
123 | cio2,
124 | ciso2,
125 | ciso3,
126 | ciso4
127 | ];
--------------------------------------------------------------------------------
/examples/test_ground/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chart emulation
8 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
134 |
135 |
136 |
--------------------------------------------------------------------------------
/examples/connectors/connectors.js:
--------------------------------------------------------------------------------
1 | // fix arrow end issues:
2 | // https://github.com/DmitryBaranovskiy/raphael/issues/471
3 |
4 | var chart_config = {
5 | chart: {
6 | container: "#OrganiseChart-big-commpany",
7 | levelSeparation: 45,
8 |
9 | rootOrientation: "WEST",
10 |
11 | nodeAlign: "BOTTOM",
12 |
13 | connectors: {
14 | type: "step",
15 | style: {
16 | "stroke-width": 2
17 | }
18 | },
19 | node: {
20 | HTMLclass: "big-commpany"
21 | }
22 | },
23 |
24 | nodeStructure: {
25 | text: { name: "CEO" },
26 | connectors: {
27 | style: {
28 | 'stroke': '#bbb',
29 | 'arrow-end': 'oval-wide-long'
30 | }
31 | },
32 | children: [
33 | {
34 | text: { name: "Account" },
35 | stackChildren: true,
36 | connectors: {
37 | style: {
38 | 'stroke': '#8080FF',
39 | 'arrow-end': 'block-wide-long'
40 | }
41 | },
42 | children: [
43 | {
44 | text: {name: "Receptionist"},
45 | HTMLclass: "reception"
46 | },
47 | {
48 | text: {name: "Author"}
49 | }
50 | ]
51 | },
52 | {
53 | text: { name: "Operation Manager" },
54 | connectors: {
55 | style: {
56 | 'stroke': '#bbb',
57 | "stroke-dasharray": "- .", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
58 | 'arrow-start': 'classic-wide-long'
59 | }
60 | },
61 | children: [
62 | {
63 | text: {name: "Manager I"},
64 | connectors: {
65 | style: {
66 | stroke: "#00CE67"
67 | }
68 | },
69 | children: [
70 | {
71 | text: {name: "Worker I"}
72 | },
73 | {
74 | pseudo: true,
75 | connectors: {
76 | style: {
77 | stroke: "#00CE67"
78 | }
79 | },
80 | children: [
81 | {
82 | text: {name: "Worker II"}
83 | }
84 | ]
85 | },
86 | {
87 | text: {name: "Worker III"}
88 | }
89 | ]
90 | },
91 | {
92 | text: {name: "Manager II"},
93 | connectors: {
94 | type: "curve",
95 | style: {
96 | stroke: "#50688D"
97 | }
98 | },
99 | children: [
100 | {
101 | text: {name: "Worker I"}
102 | },
103 | {
104 | text: {name: "Worker II"}
105 | }
106 | ]
107 | },
108 | {
109 | text: {name: "Manager III"},
110 | connectors: {
111 | style: {
112 | 'stroke': '#FF5555'
113 | }
114 | },
115 | children: [
116 | {
117 | text: {name: "Worker I"}
118 | },
119 | {
120 | pseudo: true,
121 | connectors: {
122 | style: {
123 | 'stroke': '#FF5555'
124 | }
125 | },
126 | children: [
127 | {
128 | text: {name: "Worker II"}
129 | },
130 | {
131 | text: {name: "Worker III"}
132 | }
133 | ]
134 | },
135 | {
136 | text: {name: "Worker IV"}
137 | }
138 | ]
139 | }
140 | ]
141 | },
142 | {
143 | text: { name: "Delivery Manager" },
144 | stackChildren: true,
145 | connectors: {
146 | stackIndent: 30,
147 | style: {
148 | 'stroke': '#E3C61A',
149 | 'arrow-end': 'block-wide-long'
150 | }
151 | },
152 | children: [
153 | {
154 | text: {name: "Driver I"}
155 | },
156 | {
157 | text: {name: "Driver II"}
158 | },
159 | {
160 | text: {name: "Driver III"}
161 | }
162 | ]
163 | }
164 | ]
165 | }
166 | };
167 |
--------------------------------------------------------------------------------
/examples/basic-example/basic-example.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | container: "#basic-example",
3 |
4 | connectors: {
5 | type: 'step'
6 | },
7 | node: {
8 | HTMLclass: 'nodeExample1'
9 | }
10 | },
11 | ceo = {
12 | text: {
13 | name: "Mark Hill",
14 | title: "Chief executive officer",
15 | contact: "Tel: 01 213 123 134",
16 | },
17 | image: "../headshots/2.jpg"
18 | },
19 |
20 | cto = {
21 | parent: ceo,
22 | text:{
23 | name: "Joe Linux",
24 | title: "Chief Technology Officer",
25 | },
26 | stackChildren: true,
27 | image: "../headshots/1.jpg"
28 | },
29 | cbo = {
30 | parent: ceo,
31 | stackChildren: true,
32 | text:{
33 | name: "Linda May",
34 | title: "Chief Business Officer",
35 | },
36 | image: "../headshots/5.jpg"
37 | },
38 | cdo = {
39 | parent: ceo,
40 | text:{
41 | name: "John Green",
42 | title: "Chief accounting officer",
43 | contact: "Tel: 01 213 123 134",
44 | },
45 | image: "../headshots/6.jpg"
46 | },
47 | cio = {
48 | parent: cto,
49 | text:{
50 | name: "Ron Blomquist",
51 | title: "Chief Information Security Officer"
52 | },
53 | image: "../headshots/8.jpg"
54 | },
55 | ciso = {
56 | parent: cto,
57 | text:{
58 | name: "Michael Rubin",
59 | title: "Chief Innovation Officer",
60 | contact: {val: "we@aregreat.com", href: "mailto:we@aregreat.com"}
61 | },
62 | image: "../headshots/9.jpg"
63 | },
64 | cio2 = {
65 | parent: cdo,
66 | text:{
67 | name: "Erica Reel",
68 | title: "Chief Customer Officer"
69 | },
70 | link: {
71 | href: "http://www.google.com"
72 | },
73 | image: "../headshots/10.jpg"
74 | },
75 | ciso2 = {
76 | parent: cbo,
77 | text:{
78 | name: "Alice Lopez",
79 | title: "Chief Communications Officer"
80 | },
81 | image: "../headshots/7.jpg"
82 | },
83 | ciso3 = {
84 | parent: cbo,
85 | text:{
86 | name: "Mary Johnson",
87 | title: "Chief Brand Officer"
88 | },
89 | image: "../headshots/4.jpg"
90 | },
91 | ciso4 = {
92 | parent: cbo,
93 | text:{
94 | name: "Kirk Douglas",
95 | title: "Chief Business Development Officer"
96 | },
97 | image: "../headshots/11.jpg"
98 | }
99 |
100 | chart_config = [
101 | config,
102 | ceo,
103 | cto,
104 | cbo,
105 | cdo,
106 | cio,
107 | ciso,
108 | cio2,
109 | ciso2,
110 | ciso3,
111 | ciso4
112 | ];
113 |
114 |
115 |
116 |
117 | // Another approach, same result
118 | // JSON approach
119 |
120 | /*
121 | var chart_config = {
122 | chart: {
123 | container: "#basic-example",
124 |
125 | connectors: {
126 | type: 'step'
127 | },
128 | node: {
129 | HTMLclass: 'nodeExample1'
130 | }
131 | },
132 | nodeStructure: {
133 | text: {
134 | name: "Mark Hill",
135 | title: "Chief executive officer",
136 | contact: "Tel: 01 213 123 134",
137 | },
138 | image: "../headshots/2.jpg",
139 | children: [
140 | {
141 | text:{
142 | name: "Joe Linux",
143 | title: "Chief Technology Officer",
144 | },
145 | stackChildren: true,
146 | image: "../headshots/1.jpg",
147 | children: [
148 | {
149 | text:{
150 | name: "Ron Blomquist",
151 | title: "Chief Information Security Officer"
152 | },
153 | image: "../headshots/8.jpg"
154 | },
155 | {
156 | text:{
157 | name: "Michael Rubin",
158 | title: "Chief Innovation Officer",
159 | contact: "we@aregreat.com"
160 | },
161 | image: "../headshots/9.jpg"
162 | }
163 | ]
164 | },
165 | {
166 | stackChildren: true,
167 | text:{
168 | name: "Linda May",
169 | title: "Chief Business Officer",
170 | },
171 | image: "../headshots/5.jpg",
172 | children: [
173 | {
174 | text:{
175 | name: "Alice Lopez",
176 | title: "Chief Communications Officer"
177 | },
178 | image: "../headshots/7.jpg"
179 | },
180 | {
181 | text:{
182 | name: "Mary Johnson",
183 | title: "Chief Brand Officer"
184 | },
185 | image: "../headshots/4.jpg"
186 | },
187 | {
188 | text:{
189 | name: "Kirk Douglas",
190 | title: "Chief Business Development Officer"
191 | },
192 | image: "../headshots/11.jpg"
193 | }
194 | ]
195 | },
196 | {
197 | text:{
198 | name: "John Green",
199 | title: "Chief accounting officer",
200 | contact: "Tel: 01 213 123 134",
201 | },
202 | image: "../headshots/6.jpg",
203 | children: [
204 | {
205 | text:{
206 | name: "Erica Reel",
207 | title: "Chief Customer Officer"
208 | },
209 | link: {
210 | href: "http://www.google.com"
211 | },
212 | image: "../headshots/10.jpg"
213 | }
214 | ]
215 | }
216 | ]
217 | }
218 | };
219 |
220 | */
--------------------------------------------------------------------------------
/examples/custom-colored/custom-colored.js:
--------------------------------------------------------------------------------
1 | var config = {
2 | container: "#custom-colored",
3 |
4 | nodeAlign: "BOTTOM",
5 |
6 | connectors: {
7 | type: 'step'
8 | },
9 | node: {
10 | HTMLclass: 'nodeExample1'
11 | }
12 | },
13 | ceo = {
14 | text: {
15 | name: "Mark Hill",
16 | title: "Chief executive officer",
17 | contact: "Tel: 01 213 123 134",
18 | },
19 | image: "../headshots/2.jpg"
20 | },
21 |
22 | cto = {
23 | parent: ceo,
24 | HTMLclass: 'light-gray',
25 | text:{
26 | name: "Joe Linux",
27 | title: "Chief Technology Officer",
28 | },
29 | image: "../headshots/1.jpg"
30 | },
31 | cbo = {
32 | parent: ceo,
33 | childrenDropLevel: 2,
34 | HTMLclass: 'blue',
35 | text:{
36 | name: "Linda May",
37 | title: "Chief Business Officer",
38 | },
39 | image: "../headshots/5.jpg"
40 | },
41 | cdo = {
42 | parent: ceo,
43 | HTMLclass: 'gray',
44 | text:{
45 | name: "John Green",
46 | title: "Chief accounting officer",
47 | contact: "Tel: 01 213 123 134",
48 | },
49 | image: "../headshots/6.jpg"
50 | },
51 | cio = {
52 | parent: cto,
53 | HTMLclass: 'light-gray',
54 | text:{
55 | name: "Ron Blomquist",
56 | title: "Chief Information Security Officer"
57 | },
58 | image: "../headshots/8.jpg"
59 | },
60 | ciso = {
61 | parent: cto,
62 | HTMLclass: 'light-gray',
63 | text:{
64 | name: "Michael Rubin",
65 | title: "Chief Innovation Officer",
66 | contact: "we@aregreat.com"
67 | },
68 | image: "../headshots/9.jpg"
69 | },
70 | cio2 = {
71 | parent: cdo,
72 | HTMLclass: 'gray',
73 | text:{
74 | name: "Erica Reel",
75 | title: "Chief Customer Officer"
76 | },
77 | link: {
78 | href: "http://www.google.com"
79 | },
80 | image: "../headshots/10.jpg"
81 | },
82 | ciso2 = {
83 | parent: cbo,
84 | HTMLclass: 'blue',
85 | text:{
86 | name: "Alice Lopez",
87 | title: "Chief Communications Officer"
88 | },
89 | image: "../headshots/7.jpg"
90 | },
91 | ciso3 = {
92 | parent: cbo,
93 | HTMLclass: 'blue',
94 | text:{
95 | name: "Mary Johnson",
96 | title: "Chief Brand Officer"
97 | },
98 | image: "../headshots/4.jpg"
99 | },
100 | ciso4 = {
101 | parent: cbo,
102 | HTMLclass: 'blue',
103 | text:{
104 | name: "Kirk Douglas",
105 | title: "Chief Business Development Officer"
106 | },
107 | image: "../headshots/11.jpg"
108 | },
109 |
110 | chart_config = [
111 | config,
112 | ceo,cto,cbo,
113 | cdo,cio,ciso,
114 | cio2,ciso2,ciso3,ciso4
115 | ];
116 |
117 | // Another approach, same result
118 | // JSON approach
119 |
120 | /*
121 | var chart_config = {
122 | chart: {
123 | container: "#custom-colored",
124 |
125 | nodeAlign: "BOTTOM",
126 |
127 | connectors: {
128 | type: 'step'
129 | },
130 | node: {
131 | HTMLclass: 'nodeExample1'
132 | }
133 | },
134 | nodeStructure: {
135 | text: {
136 | name: "Mark Hill",
137 | title: "Chief executive officer",
138 | contact: "Tel: 01 213 123 134",
139 | },
140 | image: "../headshots/2.jpg",
141 | children: [
142 | {
143 | text:{
144 | name: "Joe Linux",
145 | title: "Chief Technology Officer",
146 | },
147 | image: "../headshots/1.jpg",
148 | HTMLclass: 'light-gray',
149 | children: [
150 | {
151 | text:{
152 | name: "Ron Blomquist",
153 | title: "Chief Information Security Officer"
154 | },
155 | HTMLclass: 'light-gray',
156 | image: "../headshots/8.jpg"
157 | },
158 | {
159 | text:{
160 | name: "Michael Rubin",
161 | title: "Chief Innovation Officer",
162 | contact: "we@aregreat.com"
163 | },
164 | HTMLclass: 'light-gray',
165 | image: "../headshots/9.jpg"
166 | }
167 | ]
168 | },
169 | {
170 | childrenDropLevel: 2,
171 | text:{
172 | name: "Linda May",
173 | title: "Chief Business Officer",
174 | },
175 | HTMLclass: 'blue',
176 | image: "../headshots/5.jpg",
177 | children: [
178 | {
179 | text:{
180 | name: "Alice Lopez",
181 | title: "Chief Communications Officer"
182 | },
183 | HTMLclass: 'blue',
184 | image: "../headshots/7.jpg"
185 | },
186 | {
187 | text:{
188 | name: "Mary Johnson",
189 | title: "Chief Brand Officer"
190 | },
191 | HTMLclass: 'blue',
192 | image: "../headshots/4.jpg"
193 | },
194 | {
195 | text:{
196 | name: "Kirk Douglas",
197 | title: "Chief Business Development Officer"
198 | },
199 | HTMLclass: 'blue',
200 | image: "../headshots/11.jpg"
201 | }
202 | ]
203 | },
204 | {
205 | text:{
206 | name: "John Green",
207 | title: "Chief accounting officer",
208 | contact: "Tel: 01 213 123 134",
209 | },
210 | HTMLclass: 'gray',
211 | image: "../headshots/6.jpg",
212 | children: [
213 | {
214 | text:{
215 | name: "Erica Reel",
216 | title: "Chief Customer Officer"
217 | },
218 | link: {
219 | href: "http://www.google.com"
220 | },
221 | HTMLclass: 'gray',
222 | image: "../headshots/10.jpg"
223 | }
224 | ]
225 | }
226 | ]
227 | }
228 | };
229 |
230 | */
--------------------------------------------------------------------------------
/examples/test_ground/example_configs.js:
--------------------------------------------------------------------------------
1 |
2 | // img_examples/example4
3 | var example1 = {
4 | chart: {
5 | container: "#OrganiseChart1",
6 | levelSeparation: 25,
7 | siblingSeparation: 15,
8 | subTeeSeparation: 15
9 | },
10 |
11 | nodeStructure: {
12 | text: {
13 | name: "C1"
14 | },
15 | children: [
16 | {
17 |
18 | text:{
19 | name: "c1_C1"
20 | },
21 | stackChildren: true,
22 | pseudo: true,
23 | children: [
24 | {
25 | text:{
26 | name: "c2_C1C1"
27 | },
28 | link: {
29 | href: "http://www.google.com"
30 | // target defaults to "_self"
31 | }
32 | },
33 | {
34 | innerHTML: " \
35 | test \
36 | test \
37 | \
235 | test \
236 | test \
237 | \
327 | test \
328 | test \
329 | "
330 | },
331 | node112 = {
332 | parent: node11,
333 | text:{
334 | name: "c2_C1C1"
335 | },
336 | link: {
337 | href: "http://www.google.com"
338 | // target defaults to "_self"
339 | }
340 | },
341 | node113 = {
342 | parent: node11,
343 | link: {
344 | href: "http://www.google.com",
345 | target: "_blank"
346 | },
347 | text:{
348 | name: "c3_C1C1",
349 | HTMLclass: 'extra-title'
350 | }
351 | },
352 |
353 | node121 = {
354 | parent: node12,
355 | HTMLclass: 'cyan',
356 | text: {
357 | name: "c1_C2C1"
358 | },
359 | stackChildren: true,
360 | connectors: {
361 |
362 | type: 'curve',
363 | style: {
364 | 'stroke': 'white',
365 | 'arrow-end': 'block-wide-long',
366 | 'stroke-width': 2
367 | }
368 | }
369 | },
370 |
371 | node131 = {
372 | parent: node13,
373 | text:{
374 | name: "c1_C3C1"
375 | },
376 | HTMLid: "NodeID"
377 | },
378 | node132 = {
379 | parent: node13,
380 | text:{
381 | name: "c2_C3C1"
382 | }
383 | },
384 |
385 | node1211 = {
386 | parent: node121,
387 | image: "image.png",
388 | text:{
389 | name: "c1_C1C2C1 jos malo textaaaaa"
390 | }
391 | },
392 | node1212 = {
393 | parent: node121,
394 | text:{
395 | name: "c2_C1C2C1"
396 | }
397 | },
398 | node1213 = {
399 | parent: node121,
400 | text:{
401 | name: "c3_C1C2C1"
402 | }
403 | },
404 |
405 | ALTERNATIVE = [
406 | config,
407 | rootNode,
408 | node11,
409 | node12,
410 | node13,
411 | node111,
412 | node112,
413 | node113,
414 | node121,
415 | node131,
416 | node132,
417 | node1211,
418 | node1212,
419 | node1213
420 | ];
421 |
--------------------------------------------------------------------------------
/vendor/jquery.easing.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
3 | *
4 | * Uses the built in easing capabilities added In jQuery 1.1
5 | * to offer multiple easing options
6 | *
7 | * TERMS OF USE - jQuery Easing
8 | *
9 | * Open source under the BSD License.
10 | *
11 | * Copyright © 2008 George McGinley Smith
12 | * All rights reserved.
13 | *
14 | * Redistribution and use in source and binary forms, with or without modification,
15 | * are permitted provided that the following conditions are met:
16 | *
17 | * Redistributions of source code must retain the above copyright notice, this list of
18 | * conditions and the following disclaimer.
19 | * Redistributions in binary form must reproduce the above copyright notice, this list
20 | * of conditions and the following disclaimer in the documentation and/or other materials
21 | * provided with the distribution.
22 | *
23 | * Neither the name of the author nor the names of contributors may be used to endorse
24 | * or promote products derived from this software without specific prior written permission.
25 | *
26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
34 | * OF THE POSSIBILITY OF SUCH DAMAGE.
35 | *
36 | */
37 |
38 | // t: current time, b: begInnIng value, c: change In value, d: duration
39 | jQuery.easing['jswing'] = jQuery.easing['swing'];
40 |
41 | jQuery.extend( jQuery.easing,
42 | {
43 | def: 'easeOutQuad',
44 | swing: function (x, t, b, c, d) {
45 | //alert(jQuery.easing.default);
46 | return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
47 | },
48 | easeInQuad: function (x, t, b, c, d) {
49 | return c*(t/=d)*t + b;
50 | },
51 | easeOutQuad: function (x, t, b, c, d) {
52 | return -c *(t/=d)*(t-2) + b;
53 | },
54 | easeInOutQuad: function (x, t, b, c, d) {
55 | if ((t/=d/2) < 1) return c/2*t*t + b;
56 | return -c/2 * ((--t)*(t-2) - 1) + b;
57 | },
58 | easeInCubic: function (x, t, b, c, d) {
59 | return c*(t/=d)*t*t + b;
60 | },
61 | easeOutCubic: function (x, t, b, c, d) {
62 | return c*((t=t/d-1)*t*t + 1) + b;
63 | },
64 | easeInOutCubic: function (x, t, b, c, d) {
65 | if ((t/=d/2) < 1) return c/2*t*t*t + b;
66 | return c/2*((t-=2)*t*t + 2) + b;
67 | },
68 | easeInQuart: function (x, t, b, c, d) {
69 | return c*(t/=d)*t*t*t + b;
70 | },
71 | easeOutQuart: function (x, t, b, c, d) {
72 | return -c * ((t=t/d-1)*t*t*t - 1) + b;
73 | },
74 | easeInOutQuart: function (x, t, b, c, d) {
75 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
76 | return -c/2 * ((t-=2)*t*t*t - 2) + b;
77 | },
78 | easeInQuint: function (x, t, b, c, d) {
79 | return c*(t/=d)*t*t*t*t + b;
80 | },
81 | easeOutQuint: function (x, t, b, c, d) {
82 | return c*((t=t/d-1)*t*t*t*t + 1) + b;
83 | },
84 | easeInOutQuint: function (x, t, b, c, d) {
85 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
86 | return c/2*((t-=2)*t*t*t*t + 2) + b;
87 | },
88 | easeInSine: function (x, t, b, c, d) {
89 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
90 | },
91 | easeOutSine: function (x, t, b, c, d) {
92 | return c * Math.sin(t/d * (Math.PI/2)) + b;
93 | },
94 | easeInOutSine: function (x, t, b, c, d) {
95 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
96 | },
97 | easeInExpo: function (x, t, b, c, d) {
98 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
99 | },
100 | easeOutExpo: function (x, t, b, c, d) {
101 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
102 | },
103 | easeInOutExpo: function (x, t, b, c, d) {
104 | if (t==0) return b;
105 | if (t==d) return b+c;
106 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
107 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
108 | },
109 | easeInCirc: function (x, t, b, c, d) {
110 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
111 | },
112 | easeOutCirc: function (x, t, b, c, d) {
113 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
114 | },
115 | easeInOutCirc: function (x, t, b, c, d) {
116 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
117 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
118 | },
119 | easeInElastic: function (x, t, b, c, d) {
120 | var s=1.70158;var p=0;var a=c;
121 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
122 | if (a < Math.abs(c)) { a=c; var s=p/4; }
123 | else var s = p/(2*Math.PI) * Math.asin (c/a);
124 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
125 | },
126 | easeOutElastic: function (x, t, b, c, d) {
127 | var s=1.70158;var p=0;var a=c;
128 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
129 | if (a < Math.abs(c)) { a=c; var s=p/4; }
130 | else var s = p/(2*Math.PI) * Math.asin (c/a);
131 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
132 | },
133 | easeInOutElastic: function (x, t, b, c, d) {
134 | var s=1.70158;var p=0;var a=c;
135 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
136 | if (a < Math.abs(c)) { a=c; var s=p/4; }
137 | else var s = p/(2*Math.PI) * Math.asin (c/a);
138 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
139 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
140 | },
141 | easeInBack: function (x, t, b, c, d, s) {
142 | if (s == undefined) s = 1.70158;
143 | return c*(t/=d)*t*((s+1)*t - s) + b;
144 | },
145 | easeOutBack: function (x, t, b, c, d, s) {
146 | if (s == undefined) s = 1.70158;
147 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
148 | },
149 | easeInOutBack: function (x, t, b, c, d, s) {
150 | if (s == undefined) s = 1.70158;
151 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
152 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153 | },
154 | easeInBounce: function (x, t, b, c, d) {
155 | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
156 | },
157 | easeOutBounce: function (x, t, b, c, d) {
158 | if ((t/=d) < (1/2.75)) {
159 | return c*(7.5625*t*t) + b;
160 | } else if (t < (2/2.75)) {
161 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
162 | } else if (t < (2.5/2.75)) {
163 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
164 | } else {
165 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
166 | }
167 | },
168 | easeInOutBounce: function (x, t, b, c, d) {
169 | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
170 | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
171 | }
172 | });
173 |
174 | /*
175 | *
176 | * TERMS OF USE - EASING EQUATIONS
177 | *
178 | * Open source under the BSD License.
179 | *
180 | * Copyright © 2001 Robert Penner
181 | * All rights reserved.
182 | *
183 | * Redistribution and use in source and binary forms, with or without modification,
184 | * are permitted provided that the following conditions are met:
185 | *
186 | * Redistributions of source code must retain the above copyright notice, this list of
187 | * conditions and the following disclaimer.
188 | * Redistributions in binary form must reproduce the above copyright notice, this list
189 | * of conditions and the following disclaimer in the documentation and/or other materials
190 | * provided with the distribution.
191 | *
192 | * Neither the name of the author nor the names of contributors may be used to endorse
193 | * or promote products derived from this software without specific prior written permission.
194 | *
195 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
196 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
197 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
198 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
199 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
200 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
201 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
202 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
203 | * OF THE POSSIBILITY OF SUCH DAMAGE.
204 | *
205 | */
--------------------------------------------------------------------------------
/examples/tennis-draw/example7.js:
--------------------------------------------------------------------------------
1 | // source:
2 | // http://www.atpworldtour.com/Share/Event-Draws.aspx?EventId=410&Year=2013
3 |
4 | var tree_structure = {
5 | chart: {
6 | container: "#OrganiseChart6",
7 | levelSeparation: 20,
8 | siblingSeparation: 15,
9 | subTeeSeparation: 15,
10 | rootOrientation: "EAST",
11 |
12 | node: {
13 | HTMLclass: "tennis-draw",
14 | drawLineThrough: true
15 | },
16 | connectors: {
17 | type: "straight",
18 | style: {
19 | "stroke-width": 2,
20 | "stroke": "#ccc"
21 | }
22 | }
23 | },
24 |
25 | nodeStructure: {
26 | text: {
27 | name: {val: "Djokovic, Novak", href: "http://www.atpworldtour.com/Tennis/Players/Top-Players/Novak-Djokovic.aspx"}
28 | },
29 | HTMLclass: "winner",
30 | children: [
31 | {
32 | text: {
33 | name: "Djokovic, Novak",
34 | desc: "4-6, 6-2, 6-2"
35 | },
36 | children: [
37 | {
38 | text: {
39 | name: "Djokovic, Novak",
40 | desc: "4-6, 6-1, 6-4"
41 | },
42 | children: [
43 | {
44 | text: {
45 | name: "Djokovic, Novak",
46 | desc: "4-6, 6-1, 6-4"
47 | },
48 | children: [
49 | {
50 | text: {
51 | name: "Djokovic, Novak",
52 | title: 1
53 | },
54 | image: "flags/srb.jpg",
55 | HTMLclass: "first-draw",
56 |
57 | },
58 | {
59 | text: {
60 | name: "Bye",
61 | title: 2
62 | },
63 | HTMLclass: "first-draw bye"
64 | }
65 | ]
66 | },
67 | {
68 | text: {
69 | name: "Youzhny, Mikhail",
70 | desc: "6-4, 6-0"
71 | },
72 | children: [
73 | {
74 | text: {
75 | name: "Youzhny, Mikhail",
76 | title: 3
77 | },
78 | image: "flags/rus.jpg",
79 | HTMLclass: "first-draw"
80 | },
81 | {
82 | text: {
83 | name: "Gimeno-Traver, Daniel",
84 | title: 4
85 | },
86 | image: "flags/esp.jpg",
87 | HTMLclass: "first-draw"
88 | }
89 | ]
90 | }
91 | ]
92 | },
93 | {
94 | text: {
95 | name: "Monaco, Juan",
96 | desc: "6-0, 3-6, 6-3"
97 | },
98 | children: [
99 | {
100 | text: {
101 | name: "Gulbis, Ernests",
102 | desc: "4-6, 6-2, 6-3"
103 | },
104 | children: [
105 | {
106 | text: {
107 | name: "Gulbis, Ernests",
108 | title: 5
109 | },
110 | image: "flags/lat.jpg",
111 | HTMLclass: "first-draw"
112 | },
113 | {
114 | text: {
115 | name: "Isner, John",
116 | title: 6
117 | },
118 | image: "flags/usa.jpg",
119 | HTMLclass: "first-draw"
120 | }
121 | ]
122 | },
123 | {
124 | text: {
125 | name: "Monaco, Juan",
126 | desc: "6-4, 6-0"
127 | },
128 | children: [
129 | {
130 | text: {
131 | name: "Klizan, Martin",
132 | title: 7
133 | },
134 | image: "flags/slo.jpg",
135 | HTMLclass: "first-draw"
136 | },
137 | {
138 | text: {
139 | name: "Monaco, Juan",
140 | title: 8
141 | },
142 | image: "flags/arg.jpg",
143 | HTMLclass: "first-draw"
144 | }
145 | ]
146 | }
147 | ]
148 | }
149 | ]
150 | },
151 | {
152 | text: {
153 | name: "Nieminen, Jarkko",
154 | desc: "6-3, 1-6, 7-6(3)"
155 | },
156 | children: [
157 | {
158 | text: {
159 | name: "Nieminen, Jarkko",
160 | desc: "4-6, 6-1, 6-4"
161 | },
162 | children: [
163 | {
164 | text: {
165 | name: "Raonic, Milos",
166 | desc: "6-1, 6-4"
167 | },
168 | children: [
169 | {
170 | text: {
171 | name: "Raonic, Milos",
172 | title: 9
173 | },
174 | image: "flags/can.jpg",
175 | HTMLclass: "first-draw"
176 | },
177 | {
178 | text: {
179 | name: "Benneteau, Julien",
180 | title: 10
181 | },
182 | image: "flags/fra.jpg",
183 | HTMLclass: "first-draw"
184 | }
185 | ]
186 | },
187 | {
188 | text: {
189 | name: "Nieminen, Jarkko",
190 | desc: "6-1, 6-2"
191 | },
192 | children: [
193 | {
194 | text: {
195 | name: "Nieminen, Jarkko",
196 | title: 11
197 | },
198 | image: "flags/fin.jpg",
199 | HTMLclass: "first-draw"
200 | },
201 | {
202 | text: {
203 | name: "Troicki, Viktor",
204 | title: 12
205 | },
206 | image: "flags/srb.jpg",
207 | HTMLclass: "first-draw"
208 | }
209 | ]
210 | }
211 | ]
212 | },
213 | {
214 | text: {
215 | name: "Del Potro, Juan Martin",
216 | desc: "6-2, 6-4"
217 | },
218 | children: [
219 | {
220 | text: {
221 | name: "Dolgopolov, Alexandr",
222 | desc: "4-6, 6-2, 6-3"
223 | },
224 | children: [
225 | {
226 | text: {
227 | name: "Dolgopolov, Alexandr",
228 | title: 13
229 | },
230 | image: "flags/ukr.jpg",
231 | HTMLclass: "first-draw"
232 | },
233 | {
234 | text: {
235 | name: "Tomic, Bernard",
236 | title: 14
237 | },
238 | image: "flags/aus.jpg",
239 | HTMLclass: "first-draw"
240 | }
241 | ]
242 | },
243 | {
244 | text: {
245 | name: "Del Potro, Juan Martin",
246 | desc: "6-4, 6-0"
247 | },
248 | children: [
249 | {
250 | text: {
251 | name: "Bye",
252 | title: 15
253 | },
254 | HTMLclass: "first-draw bye"
255 | },
256 | {
257 | text: {
258 | name: "Del Potro, Juan Martin",
259 | title: 16
260 | },
261 | image: "flags/arg.jpg",
262 | HTMLclass: "first-draw"
263 | }
264 | ]
265 | }
266 | ]
267 | }
268 | ]
269 | }
270 | ]
271 | }
272 | };
273 |
--------------------------------------------------------------------------------
/vendor/perfect-scrollbar/perfect-scrollbar.js:
--------------------------------------------------------------------------------
1 | /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
2 | * Licensed under the MIT License
3 | */
4 | ((function($) {
5 |
6 | // The default settings for the plugin
7 | var defaultSettings = {
8 | wheelSpeed: 10,
9 | wheelPropagation: false
10 | };
11 |
12 | $.fn.perfectScrollbar = function(suppliedSettings, option) {
13 |
14 | // Use the default settings
15 | var settings = $.extend( true, {}, defaultSettings );
16 | if (typeof suppliedSettings === "object") {
17 | // But over-ride any supplied
18 | $.extend( true, settings, suppliedSettings );
19 | } else {
20 | // If no settings were supplied, then the first param must be the option
21 | option = suppliedSettings;
22 | }
23 |
24 | if(option === 'update') {
25 | if($(this).data('perfect_scrollbar_update')) {
26 | $(this).data('perfect_scrollbar_update')();
27 | }
28 | return $(this);
29 | }
30 | else if(option === 'destroy') {
31 | if($(this).data('perfect_scrollbar_destroy')) {
32 | $(this).data('perfect_scrollbar_destroy')();
33 | }
34 | return $(this);
35 | }
36 |
37 | if($(this).data('perfect_scrollbar')) {
38 | // if there's already perfect_scrollbar
39 | return $(this).data('perfect_scrollbar');
40 | }
41 |
42 | var $this = $(this).addClass('ps-container'),
43 | $content = $(this).children(),
44 | $scrollbar_x = $("
").appendTo($this),
45 | $scrollbar_y = $("
").appendTo($this),
46 | container_width,
47 | container_height,
48 | content_width,
49 | content_height,
50 | scrollbar_x_width,
51 | scrollbar_x_left,
52 | scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom'), 10),
53 | scrollbar_y_height,
54 | scrollbar_y_top,
55 | scrollbar_y_right = parseInt($scrollbar_y.css('right'), 10);
56 |
57 | var updateContentScrollTop = function() {
58 | var scroll_top = parseInt(scrollbar_y_top * content_height / container_height, 10);
59 | $this.scrollTop(scroll_top);
60 | $scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top});
61 | };
62 |
63 | var updateContentScrollLeft = function() {
64 | var scroll_left = parseInt(scrollbar_x_left * content_width / container_width, 10);
65 | $this.scrollLeft(scroll_left);
66 | $scrollbar_y.css({right: scrollbar_y_right - scroll_left});
67 | };
68 |
69 | var updateBarSizeAndPosition = function() {
70 | container_width = $this.width();
71 | container_height = $this.height();
72 | content_width = $content.outerWidth(false);
73 | content_height = $content.outerHeight(false);
74 | if(container_width < content_width) {
75 | scrollbar_x_width = parseInt(container_width * container_width / content_width, 10);
76 | scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width, 10);
77 | }
78 | else {
79 | scrollbar_x_width = 0;
80 | scrollbar_x_left = 0;
81 | $this.scrollLeft(0);
82 | }
83 | if(container_height < content_height) {
84 | scrollbar_y_height = parseInt(container_height * container_height / content_height, 10);
85 | scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height, 10);
86 | }
87 | else {
88 | scrollbar_y_height = 0;
89 | scrollbar_y_left = 0;
90 | $this.scrollTop(0);
91 | }
92 |
93 | $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
94 | $scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), right: scrollbar_y_right - $this.scrollLeft(), height: scrollbar_y_height});
95 | };
96 |
97 | var moveBarX = function(current_left, delta_x) {
98 | var new_left = current_left + delta_x,
99 | max_left = container_width - scrollbar_x_width;
100 |
101 | if(new_left < 0) {
102 | scrollbar_x_left = 0;
103 | }
104 | else if(new_left > max_left) {
105 | scrollbar_x_left = max_left;
106 | }
107 | else {
108 | scrollbar_x_left = new_left;
109 | }
110 | $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
111 | };
112 |
113 | var moveBarY = function(current_top, delta_y) {
114 | var new_top = current_top + delta_y,
115 | max_top = container_height - scrollbar_y_height;
116 |
117 | if(new_top < 0) {
118 | scrollbar_y_top = 0;
119 | }
120 | else if(new_top > max_top) {
121 | scrollbar_y_top = max_top;
122 | }
123 | else {
124 | scrollbar_y_top = new_top;
125 | }
126 | $scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()});
127 | };
128 |
129 | var bindMouseScrollXHandler = function() {
130 | var current_left,
131 | current_page_x;
132 |
133 | $scrollbar_x.bind('mousedown.perfect-scroll', function(e) {
134 | current_page_x = e.pageX;
135 | current_left = $scrollbar_x.position().left;
136 | $scrollbar_x.addClass('in-scrolling');
137 | e.stopPropagation();
138 | e.preventDefault();
139 | });
140 |
141 | $(document).bind('mousemove.perfect-scroll', function(e) {
142 | if($scrollbar_x.hasClass('in-scrolling')) {
143 | moveBarX(current_left, e.pageX - current_page_x);
144 | updateContentScrollLeft();
145 | e.stopPropagation();
146 | e.preventDefault();
147 | }
148 | });
149 |
150 | $(document).bind('mouseup.perfect-scroll', function(e) {
151 | if($scrollbar_x.hasClass('in-scrolling')) {
152 | $scrollbar_x.removeClass('in-scrolling');
153 | }
154 | });
155 | };
156 |
157 | var bindMouseScrollYHandler = function() {
158 | var current_top,
159 | current_page_y;
160 |
161 | $scrollbar_y.bind('mousedown.perfect-scroll', function(e) {
162 | current_page_y = e.pageY;
163 | current_top = $scrollbar_y.position().top;
164 | $scrollbar_y.addClass('in-scrolling');
165 | e.stopPropagation();
166 | e.preventDefault();
167 | });
168 |
169 | $(document).bind('mousemove.perfect-scroll', function(e) {
170 | if($scrollbar_y.hasClass('in-scrolling')) {
171 | moveBarY(current_top, e.pageY - current_page_y);
172 | updateContentScrollTop();
173 | e.stopPropagation();
174 | e.preventDefault();
175 | }
176 | });
177 |
178 | $(document).bind('mouseup.perfect-scroll', function(e) {
179 | if($scrollbar_y.hasClass('in-scrolling')) {
180 | $scrollbar_y.removeClass('in-scrolling');
181 | }
182 | });
183 | };
184 |
185 | // bind handlers
186 | var bindMouseWheelHandler = function() {
187 | var shouldPreventDefault = function(deltaX, deltaY) {
188 | var scrollTop = $this.scrollTop();
189 | if(scrollTop === 0 && deltaY > 0 && deltaX === 0) {
190 | return !settings.wheelPropagation;
191 | }
192 | else if(scrollTop >= content_height - container_height && deltaY < 0 && deltaX === 0) {
193 | return !settings.wheelPropagation;
194 | }
195 |
196 | var scrollLeft = $this.scrollLeft();
197 | if(scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
198 | return !settings.wheelPropagation;
199 | }
200 | else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY === 0) {
201 | return !settings.wheelPropagation;
202 | }
203 | return true;
204 | };
205 |
206 | $this.mousewheel(function(e, delta, deltaX, deltaY) {
207 | $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
208 | $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
209 |
210 | // update bar position
211 | updateBarSizeAndPosition();
212 |
213 | if(shouldPreventDefault(deltaX, deltaY)) {
214 | e.preventDefault();
215 | }
216 | });
217 | };
218 |
219 | // bind mobile touch handler
220 | var bindMobileTouchHandler = function() {
221 | var applyTouchMove = function(difference_x, difference_y) {
222 | $this.scrollTop($this.scrollTop() - difference_y);
223 | $this.scrollLeft($this.scrollLeft() - difference_x);
224 |
225 | // update bar position
226 | updateBarSizeAndPosition();
227 | };
228 |
229 | var start_coords = {},
230 | start_time = 0,
231 | speed = {},
232 | breaking_process = null;
233 |
234 | $this.bind("touchstart.perfect-scroll", function(e) {
235 | var touch = e.originalEvent.targetTouches[0];
236 |
237 | start_coords.pageX = touch.pageX;
238 | start_coords.pageY = touch.pageY;
239 |
240 | start_time = (new Date()).getTime();
241 |
242 | if (breaking_process !== null) {
243 | clearInterval(breaking_process);
244 | }
245 | });
246 | $this.bind("touchmove.perfect-scroll", function(e) {
247 | var touch = e.originalEvent.targetTouches[0];
248 |
249 | var current_coords = {};
250 | current_coords.pageX = touch.pageX;
251 | current_coords.pageY = touch.pageY;
252 |
253 | var difference_x = current_coords.pageX - start_coords.pageX,
254 | difference_y = current_coords.pageY - start_coords.pageY;
255 |
256 | applyTouchMove(difference_x, difference_y);
257 | start_coords = current_coords;
258 |
259 | var current_time = (new Date()).getTime();
260 | speed.x = difference_x / (current_time - start_time);
261 | speed.y = difference_y / (current_time - start_time);
262 | start_time = current_time;
263 |
264 | e.preventDefault();
265 | });
266 | $this.bind("touchend.perfect-scroll", function(e) {
267 | breaking_process = setInterval(function() {
268 | if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
269 | clearInterval(breaking_process);
270 | return;
271 | }
272 |
273 | applyTouchMove(speed.x * 30, speed.y * 30);
274 |
275 | speed.x *= 0.8;
276 | speed.y *= 0.8;
277 | }, 10);
278 | });
279 | };
280 |
281 | var destroy = function() {
282 | $scrollbar_x.remove();
283 | $scrollbar_y.remove();
284 | $this.unbind('mousewheel');
285 | $this.unbind('touchstart.perfect-scroll');
286 | $this.unbind('touchmove.perfect-scroll');
287 | $this.unbind('touchend.perfect-scroll');
288 | $(window).unbind('mousemove.perfect-scroll');
289 | $(window).unbind('mouseup.perfect-scroll');
290 | $this.data('perfect_scrollbar', null);
291 | $this.data('perfect_scrollbar_update', null);
292 | $this.data('perfect_scrollbar_destroy', null);
293 | };
294 |
295 | var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
296 |
297 | var initialize = function() {
298 | updateBarSizeAndPosition();
299 | bindMouseScrollXHandler();
300 | bindMouseScrollYHandler();
301 | if(isMobile) bindMobileTouchHandler();
302 | if($this.mousewheel) bindMouseWheelHandler();
303 | $this.data('perfect_scrollbar', $this);
304 | $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
305 | $this.data('perfect_scrollbar_destroy', destroy);
306 | };
307 |
308 | // initialize
309 | initialize();
310 |
311 | return $this;
312 | };
313 | })(jQuery));
314 |
--------------------------------------------------------------------------------
/examples/evolution-tree/example6.js:
--------------------------------------------------------------------------------
1 | var tree_structure = {
2 | chart: {
3 | container: "#OrganiseChart6",
4 | levelSeparation: 25,
5 | siblingSeparation: 70,
6 | subTeeSeparation: 70,
7 | nodeAlign: "BOTTOM",
8 | scrollbar: "fancy",
9 | padding: 35,
10 | node: { HTMLclass: "evolution-tree" },
11 | connectors: {
12 | type: "curve",
13 | style: {
14 | "stroke-width": 2,
15 | "stroke-linecap": "round",
16 | "stroke": "#ccc"
17 | }
18 | }
19 | },
20 |
21 | nodeStructure: {
22 | text: { name: "LIFE" },
23 | HTMLclass: "the-parent",
24 | children: [
25 | {
26 | text: { name: "true bacteria" },
27 | image: "img/truebacteria.png"
28 | },
29 | {
30 | pseudo: true,
31 | children: [
32 | {
33 | text: { name: "archea bacteria" },
34 | image: "img/archaebacteria.png"
35 | },
36 | {
37 | text: { name: "EUKARYOTES" },
38 | HTMLclass: "the-parent",
39 | children: [
40 | {
41 | text: { name: "protocists" },
42 | image: "img/protoctis.png"
43 | },
44 | {
45 | pseudo: true,
46 | children: [
47 | {
48 | text: { name: "PLANTS" },
49 | HTMLclass: "the-parent",
50 | children: [
51 | {
52 | pseudo: true,
53 | children: [
54 | {
55 | pseudo: true,
56 | children: [
57 | {
58 | pseudo: true,
59 | children: [
60 | {
61 | text: { name: "flowering seed plants" },
62 | image: "img/cvijece2.png"
63 | },
64 | {
65 | text: { name: "non-flowering seed plants" },
66 | image: "img/ne_cvijece.png"
67 | }
68 | ]
69 | },
70 | {
71 | text: { name: "ferns and fern allies" },
72 | image: "img/ferns.png"
73 | }
74 | ]
75 | },
76 | {
77 | text: { name: "mosses and allies" },
78 | image: "img/mosses.png"
79 | }
80 | ]
81 | },
82 | {
83 | text: { name: "green algae" },
84 | image: "img/greenalgae.png"
85 | }
86 | ]
87 | },
88 | {
89 | pseudo: true,
90 | children: [
91 | {
92 | text: { name: "fungi and lichens" },
93 | image: "img/fungi.png"
94 | },
95 | {
96 | text: { name: "ANIMALS" },
97 | HTMLclass: "the-parent",
98 | children: [
99 | {
100 | text: { name: "sponges" },
101 | image: "img/spuzva.png"
102 | },
103 | {
104 | pseudo: true,
105 | children: [
106 | {
107 | text: { name: "cnidarians" },
108 | image: "img/cnidarians.png"
109 | },
110 | {
111 | pseudo: true,
112 | childrenDropLevel: 1,
113 | children: [
114 | {
115 | pseudo: true,
116 | children: [
117 | {
118 | text: { name: "echinoderms" },
119 | image: "img/zvezda.png"
120 | },
121 | {
122 | text: { name: "VERTEBRATES" },
123 | HTMLclass: "the-parent",
124 | children: [
125 | {
126 | text: { name: "cartilaginous fish" },
127 | image: "img/cartilaginousfish.png"
128 | },
129 | {
130 | text: { name: "bony fish" },
131 | image: "img/bonyfish.png"
132 | },
133 | {
134 | text: { name: "TETRAPODS" },
135 | HTMLclass: "the-parent",
136 | children: [
137 | {
138 | text: { name: "amphibians" },
139 | image: "img/zaba.png"
140 | },
141 | {
142 | text: { name: "AMNIOTES" },
143 | HTMLclass: "the-parent",
144 | children: [
145 | {
146 | pseudo: true,
147 | children: [
148 | {
149 | text: { name: "turtles" },
150 | image: "img/kornjaca.png"
151 | },
152 | {
153 | pseudo: true,
154 | children: [
155 | {
156 | text: { name: "snakes and lizards" },
157 | image: "img/zmijurina.png"
158 | },
159 | {
160 | text: { name: "crocodiles and birds" },
161 | image: "img/ptica.png"
162 | }
163 | ]
164 | }
165 | ]
166 | },
167 | {
168 | text: { name: "mammals" },
169 | image: "img/slon.png"
170 | }
171 | ]
172 | }
173 | ]
174 | }
175 | ]
176 | }
177 | ]
178 | },
179 | {
180 | text: { name: "ARTHROPODS" },
181 | HTMLclass: "the-parent",
182 | children: [
183 | {
184 | text: { name: "chelicerates" },
185 | image: "img/chelirates.png"
186 | },
187 | {
188 | pseudo: true,
189 | stackChildren: true,
190 | children: [
191 | {
192 | text: { name: "crustaceans" },
193 | image: "img/rak.png"
194 | },
195 | {
196 | text: { name: "insects and myriapods" },
197 | image: "img/insekti.png"
198 | }
199 | ]
200 | }
201 | ]
202 | },
203 | {
204 | pseudo: true,
205 | children: [
206 | {
207 | text: { name: "flatworms" },
208 | image: "img/flatare.png"
209 | },
210 | {
211 | text: { name: "lophophorates" },
212 | image: "img/lophoprates.png"
213 | }
214 |
215 | ]
216 | },
217 | {
218 | pseudo: true,
219 | childrenDropLevel: 1,
220 | stackChildren: true,
221 | children: [
222 | {
223 | text: { name: "rotifers" },
224 | image: "img/rotfiers.png"
225 | },
226 | {
227 | text: { name: "roundworms" },
228 | image: "img/roundworms.png"
229 | }
230 | ]
231 | },
232 | {
233 | pseudo: true,
234 | childrenDropLevel: 1,
235 | stackChildren: true,
236 | children: [
237 | {
238 | text: { name: "mollusks" },
239 | image: "img/mosculs.png"
240 | },
241 | {
242 | text: { name: "segmented worms" },
243 | image: "img/segmentedworms.png"
244 | }
245 | ]
246 | }
247 | ]
248 | }
249 | ]
250 | }
251 | ]
252 | }
253 | ]
254 | }
255 | ]
256 | }
257 | ]
258 | }
259 | ]
260 | }
261 | ]
262 | }
263 | };
--------------------------------------------------------------------------------
"
38 | },
39 | {
40 | link: {
41 | href: "http://www.google.com",
42 | target: "_blank"
43 | },
44 | text:{
45 | name: "c3_C1C1"
46 | }
47 | },
48 | {
49 | link: {
50 | href: "http://www.google.com",
51 | target: "_blank"
52 | },
53 | text:{
54 | name: "c3_C1C1"
55 | }
56 | }
57 | ]
58 | },
59 | {
60 | text:{
61 | name: "c2_C1"
62 | },
63 | connectors: {
64 |
65 | type: 'step',
66 | style: {
67 | 'stroke': 'white',
68 | 'arrow-end': 'block-wide-long',
69 | 'arrow-start': 'block-wide-long',
70 | 'stroke-width': 2
71 | }
72 | },
73 | children: [
74 | {
75 | HTMLclass: 'cyan',
76 | text: {
77 | name: "c1_C2C1"
78 | },
79 | connectors: {
80 |
81 | type: 'curve',
82 | style: {
83 | 'stroke': 'white',
84 | 'arrow-end': 'block-wide-long',
85 | 'stroke-width': 2
86 | }
87 | },
88 | children: [
89 | {
90 | text:{
91 | name: "c1_C1C2C1"
92 | }
93 | },
94 | {
95 | text:{
96 | name: "c2_C1C2C1"
97 | }
98 | },
99 | {
100 | text:{
101 | name: "c3_C1C2C1"
102 | }
103 | }
104 |
105 | ]
106 | }
107 | ]
108 | },
109 | {
110 | text:{
111 | name: "c3_C1"
112 | },
113 | children: [
114 | {
115 | text:{
116 | name: "c1_C3C1"
117 | },
118 | HTMLid: "NodeID"
119 | },
120 | {
121 | text:{
122 | name: "c2_C3C1"
123 | }
124 | }
125 | ]
126 | }
127 | ]
128 | }
129 | };
130 |
131 |
132 | var example1b = {
133 | chart: {
134 | container: "#OrganiseChart1"
135 | // nodeAlign: "BOTTOM"
136 | },
137 |
138 | nodeStructure: {
139 | text: {
140 | name: "C1"
141 | },
142 | children: [
143 | {
144 | text:{
145 | name: "c2_C1"
146 | },
147 | connectors: {
148 |
149 | type: 'step',
150 | style: {
151 | 'stroke': 'white',
152 | 'arrow-end': 'block-wide-long',
153 | 'arrow-start': 'block-wide-long',
154 | 'stroke-width': 2
155 | }
156 | },
157 | children: [
158 | {
159 | HTMLclass: 'cyan',
160 | text: {
161 | name: "c1_C2C1"
162 | },
163 | connectors: {
164 |
165 | type: 'curve',
166 | style: {
167 | 'stroke': 'white',
168 | 'arrow-end': 'block-wide-long',
169 | 'stroke-width': 2
170 | }
171 | },
172 | children: [
173 | {
174 | text:{
175 | name: "c1_C1C2C1"
176 | }
177 | },
178 | {
179 | text:{
180 | name: "c2_C1C2C1"
181 | }
182 | },
183 | {
184 | text:{
185 | name: "c3_C1C2C1"
186 | },
187 | stackChildren: true,
188 | children: [
189 | {
190 | text:{
191 | name: "c1_C1C2C1"
192 | }
193 | },
194 | {
195 | text:{
196 | name: "c2_C1C2C1"
197 | }
198 | }
199 | ]
200 | }
201 |
202 | ]
203 | }
204 | ]
205 | },
206 | {
207 | text:{
208 | name: "c1_C1"
209 | },
210 | children: [
211 | {
212 |
213 | text:{
214 | name: "c1_C1"
215 | },
216 | children: [
217 | {
218 | text:{
219 | name: "c1_C1"
220 | },
221 | stackChildren: true,
222 | children: [
223 |
224 | {
225 | text:{
226 | name: "c2_C1C1"
227 | },
228 | link: {
229 | href: "http://www.google.com"
230 | // target defaults to "_self"
231 | }
232 | },
233 | {
234 | innerHTML: "
16 |-
17 |
18 | 
19 |
26 |
64 |
65 |20 | John Smitt — 21 | 22 | Treant.js is an library that handles drawing and visualisation of tree structural charts. What does that mean? 23 | 24 |
25 |27 |-
28 |
29 | 
30 |
37 |
38 | -
39 |
40 | 
41 |
48 |
62 |
63 |31 | Peter Griffin — 32 | 33 | Great collection! A lot of good inspiration. Thanks! 34 | 35 |
36 |42 | Jane Black — 43 | 44 | Thanks for tutorial. One issue I have is that all tutorials is on dev environment. What about production? what differences between … 45 | 46 |
47 |49 |-
50 |
51 | 
52 |
59 |
60 |
61 |53 | Joe Linux — 54 | 55 | Looks very promising. I'll have to take a closer look some time. 56 | 57 |
58 |