paco
This commit is contained in:
root
+420
@@ -0,0 +1,420 @@
|
||||
|
||||
// img_examples/example4
|
||||
var example1 = {
|
||||
chart: {
|
||||
container: "#OrganiseChart1",
|
||||
levelSeparation: 25,
|
||||
siblingSeparation: 15,
|
||||
subTeeSeparation: 15
|
||||
},
|
||||
|
||||
nodeStructure: {
|
||||
text: {
|
||||
name: "C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
pseudo: true,
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C1"
|
||||
},
|
||||
link: {
|
||||
href: "http://www.google.com"
|
||||
// target defaults to "_self"
|
||||
}
|
||||
},
|
||||
{
|
||||
innerHTML: "<ul> \
|
||||
<li> test </li> \
|
||||
<li> test </li> \
|
||||
</ul><img src='slika-manja.jpg' />"
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'step',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'arrow-start': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
HTMLclass: 'cyan',
|
||||
text: {
|
||||
name: "c1_C2C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'curve',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1C2C1"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C3C1"
|
||||
},
|
||||
HTMLid: "NodeID"
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C3C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var example1b = {
|
||||
chart: {
|
||||
container: "#OrganiseChart1"
|
||||
// nodeAlign: "BOTTOM"
|
||||
},
|
||||
|
||||
nodeStructure: {
|
||||
text: {
|
||||
name: "C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'step',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'arrow-start': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
HTMLclass: 'cyan',
|
||||
text: {
|
||||
name: "c1_C2C1"
|
||||
},
|
||||
connectors: {
|
||||
|
||||
type: 'curve',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1C2C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1C2C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
children: [
|
||||
|
||||
{
|
||||
text:{
|
||||
name: "c2_C1C1"
|
||||
},
|
||||
link: {
|
||||
href: "http://www.google.com"
|
||||
// target defaults to "_self"
|
||||
}
|
||||
},
|
||||
{
|
||||
innerHTML: "<ul> \
|
||||
<li> test </li> \
|
||||
<li> test </li> \
|
||||
</ul><img src='slika-manja.jpg' />"
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
},
|
||||
{
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c3_C1"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
text:{
|
||||
name: "c1_C3C1"
|
||||
},
|
||||
HTMLid: "NodeID"
|
||||
},
|
||||
{
|
||||
text:{
|
||||
name: "c2_C3C1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// #####################################
|
||||
// ########### ALTERNATIVE CONFIG ######
|
||||
// #####################################
|
||||
|
||||
var config = {
|
||||
container: "#OrganiseChart5"
|
||||
//rootOrientation: 'NORTH', // NORTH || EAST || WEST || SOUTH
|
||||
// levelSeparation: 30,
|
||||
// siblingSeparation: 30,
|
||||
// subTeeSeparation: 30,
|
||||
},
|
||||
rootNode = {
|
||||
text: {
|
||||
name: "C1"
|
||||
}
|
||||
},
|
||||
|
||||
node11 = {
|
||||
parent: rootNode,
|
||||
text:{
|
||||
name: "c1_C1"
|
||||
},
|
||||
stackChildren: true
|
||||
},
|
||||
node12 = {
|
||||
parent: rootNode,
|
||||
text:{
|
||||
name: "c1_C2"
|
||||
},
|
||||
childrenDropLevel: 1
|
||||
},
|
||||
node13 = {
|
||||
parent: rootNode,
|
||||
text:{
|
||||
name: "c1_C3"
|
||||
}
|
||||
// stackChildren: true,
|
||||
},
|
||||
|
||||
node111 = {
|
||||
parent: node11,
|
||||
innerHTML: "<ul> \
|
||||
<li> test </li> \
|
||||
<li> test </li> \
|
||||
</ul>"
|
||||
},
|
||||
node112 = {
|
||||
parent: node11,
|
||||
text:{
|
||||
name: "c2_C1C1"
|
||||
},
|
||||
link: {
|
||||
href: "http://www.google.com"
|
||||
// target defaults to "_self"
|
||||
}
|
||||
},
|
||||
node113 = {
|
||||
parent: node11,
|
||||
link: {
|
||||
href: "http://www.google.com",
|
||||
target: "_blank"
|
||||
},
|
||||
text:{
|
||||
name: "c3_C1C1",
|
||||
HTMLclass: 'extra-title'
|
||||
}
|
||||
},
|
||||
|
||||
node121 = {
|
||||
parent: node12,
|
||||
HTMLclass: 'cyan',
|
||||
text: {
|
||||
name: "c1_C2C1"
|
||||
},
|
||||
stackChildren: true,
|
||||
connectors: {
|
||||
|
||||
type: 'curve',
|
||||
style: {
|
||||
'stroke': 'white',
|
||||
'arrow-end': 'block-wide-long',
|
||||
'stroke-width': 2
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
node131 = {
|
||||
parent: node13,
|
||||
text:{
|
||||
name: "c1_C3C1"
|
||||
},
|
||||
HTMLid: "NodeID"
|
||||
},
|
||||
node132 = {
|
||||
parent: node13,
|
||||
text:{
|
||||
name: "c2_C3C1"
|
||||
}
|
||||
},
|
||||
|
||||
node1211 = {
|
||||
parent: node121,
|
||||
image: "image.png",
|
||||
text:{
|
||||
name: "c1_C1C2C1 jos malo textaaaaa"
|
||||
}
|
||||
},
|
||||
node1212 = {
|
||||
parent: node121,
|
||||
text:{
|
||||
name: "c2_C1C2C1"
|
||||
}
|
||||
},
|
||||
node1213 = {
|
||||
parent: node121,
|
||||
text:{
|
||||
name: "c3_C1C2C1"
|
||||
}
|
||||
},
|
||||
|
||||
ALTERNATIVE = [
|
||||
config,
|
||||
rootNode,
|
||||
node11,
|
||||
node12,
|
||||
node13,
|
||||
node111,
|
||||
node112,
|
||||
node113,
|
||||
node121,
|
||||
node131,
|
||||
node132,
|
||||
node1211,
|
||||
node1212,
|
||||
node1213
|
||||
];
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 543 B |
+27
@@ -0,0 +1,27 @@
|
||||
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; }
|
||||
table { border-collapse:collapse; border-spacing:0; }
|
||||
fieldset,img { border:0; }
|
||||
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
|
||||
caption,th { text-align:left; }
|
||||
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
|
||||
q:before,q:after { content:''; }
|
||||
abbr,acronym { border:0; }
|
||||
|
||||
body { background: #333; }
|
||||
|
||||
/* optional Container STYLES */
|
||||
.chart { height: 290px; margin: 5px; width: 400px; border: 2px solid #727564; border-radius: 3px; float: left; }
|
||||
|
||||
/* optional STYLES */
|
||||
.Treant > .node { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold; font-size: 8px; }
|
||||
|
||||
.Treant .extra-title { font-size: 20px; }
|
||||
.Treant > .node { background-color: gray; border: 2px solid #ccc; padding: 2px; border-radius: 2px; }
|
||||
.Treant > .redNode { background-color: red; }
|
||||
.Treant > .greenNode { background-color: green; }
|
||||
.Treant > .blueNode { background-color: blue; }
|
||||
.Treant > .cyan { background-color: cyan; height: 30px; width: 40px; }
|
||||
/*.Treant > .cyan { background-color: cyan; height: 0; width: 0; border: 0; padding: 0; overflow: hidden; }*/
|
||||
.Treant ul { padding-left: 17px; }
|
||||
|
||||
#NodeID { background-color: white; }
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title> Chart emulation </title>
|
||||
<link rel="stylesheet" href="../../Treant.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/perfect-scrollbar/perfect-scrollbar.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="chart" id="OrganiseChart1">
|
||||
<a href="http://www.treant-js.com/"></a>
|
||||
</div>
|
||||
<div class="chart" id="OrganiseChart2"></div>
|
||||
<div class="chart" id="OrganiseChart3"></div>
|
||||
<div class="chart" id="OrganiseChart4"></div>
|
||||
<div class="chart" id="OrganiseChart5"></div>
|
||||
|
||||
<script src="../../vendor/jquery.min.js"></script>
|
||||
<script src="../../vendor/jquery.mousewheel.js"></script>
|
||||
<script src="../../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
|
||||
<script src="../../vendor/raphael.js"></script>
|
||||
|
||||
<script src="../../Treant.js"></script>
|
||||
<script src="example_configs.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var UTIL = {
|
||||
inheritAttrs: function(me, from) {
|
||||
|
||||
for (var attr in from) {
|
||||
if(typeof from[attr] !== 'function') {
|
||||
if(me[attr] instanceof Object && from[attr] instanceof Object) {
|
||||
|
||||
this.inheritAttrs( me[attr], from[attr] );
|
||||
} else {
|
||||
|
||||
me[attr] = from[attr];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createMerge: function(obj1, obj2) {
|
||||
var newObj = {};
|
||||
if(obj1) this.inheritAttrs( newObj, this.clone(obj1) );
|
||||
if(obj2) this.inheritAttrs( newObj, obj2 );
|
||||
return newObj;
|
||||
},
|
||||
|
||||
clone: function (obj) {
|
||||
if (Object(obj) !== obj) {
|
||||
return obj;
|
||||
}
|
||||
var res = new obj.constructor();
|
||||
for (var key in obj) if (obj["hasOwnProperty"](key)) {
|
||||
res[key] = this.clone(obj[key]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
};
|
||||
|
||||
var T1 = new Treant(example1);
|
||||
|
||||
var example2 = UTIL.createMerge(
|
||||
example1,
|
||||
{
|
||||
chart: {
|
||||
container: "#OrganiseChart2",
|
||||
rootOrientation: "EAST",
|
||||
connectors: {
|
||||
type: 'bCurve',
|
||||
style: {
|
||||
"stroke": 'green'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
HTMLclass: 'blueNode'
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
var T2 = new Treant(example2);
|
||||
|
||||
var example3 = UTIL.createMerge(
|
||||
example1,
|
||||
{
|
||||
chart: {
|
||||
container: "#OrganiseChart3",
|
||||
rootOrientation: "SOUTH",
|
||||
connectors: {
|
||||
type: 'straight',
|
||||
style: {
|
||||
"stroke": 'cyan'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
HTMLclass: 'redNode'
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
var T3 = new Treant(example3);
|
||||
|
||||
var example4 = UTIL.createMerge(
|
||||
example1,
|
||||
{
|
||||
chart:{
|
||||
container: "#OrganiseChart4",
|
||||
rootOrientation: "WEST",
|
||||
connectors: {
|
||||
type: 'step',
|
||||
style: {
|
||||
"stroke": 'yellow'
|
||||
}
|
||||
},
|
||||
node: {
|
||||
HTMLclass: 'greenNode'
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
var T4 = new Treant(example4);
|
||||
|
||||
var T5 = new Treant(ALTERNATIVE);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user