paco

2019-12-13 22:20:23 +00:00
parent 3c32a4b96c
commit 1a4d72f145
136 changed files with 7187 additions and 138 deletions
@@ -0,0 +1,18 @@
+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: #fff; }
+/* optional Container STYLES */
+.chart { height: 600px; margin: 5px; width: 900px; }
+.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
+.Treant > .node img { width: 100%; height: 100%; }
+
+.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
+.Treant .node.collapsed { background-color: #DEF82D; }
+.Treant .node.collapsed .collapse-switch { background: none; }
@@ -0,0 +1,112 @@
+
+    var chart_config = {
+        chart: {
+            container: "#collapsable-example",
+
+            animateOnInit: true,
+            
+            node: {
+                collapsable: true
+            },
+            animation: {
+                nodeAnimation: "easeOutBounce",
+                nodeSpeed: 700,
+                connectorsAnimation: "bounce",
+                connectorsSpeed: 700
+            }
+        },
+        nodeStructure: {
+            image: "img/malory.png",
+            children: [
+                {
+                    image: "img/lana.png",
+                    collapsed: true,
+                    children: [
+                        {
+                            image: "img/figgs.png"
+                        }
+                    ]
+                },
+                {
+                    image: "img/sterling.png",
+                    childrenDropLevel: 1,
+                    children: [
+                        {
+                            image: "img/woodhouse.png"
+                        }
+                    ]
+                },
+                {
+                    pseudo: true,
+                    children: [
+                        {
+                            image: "img/cheryl.png"
+                        },
+                        {
+                            image: "img/pam.png"
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+
+/* Array approach
+    var config = {
+        container: "#collapsable-example",
+
+        animateOnInit: true,
+        
+        node: {
+            collapsable: true
+        },
+        animation: {
+            nodeAnimation: "easeOutBounce",
+            nodeSpeed: 700,
+            connectorsAnimation: "bounce",
+            connectorsSpeed: 700
+        }
+    },
+    malory = {
+        image: "img/malory.png"
+    },
+
+    lana = {
+        parent: malory,
+        image: "img/lana.png"
+    }
+
+    figgs = {
+        parent: lana,
+        image: "img/figgs.png"
+    }
+
+    sterling = {
+        parent: malory,
+        childrenDropLevel: 1,
+        image: "img/sterling.png"
+    },
+
+    woodhouse = {
+        parent: sterling,
+        image: "img/woodhouse.png"
+    },
+
+    pseudo = {
+        parent: malory,
+        pseudo: true
+    },
+
+    cheryl = {
+        parent: pseudo,
+        image: "img/cheryl.png"
+    },
+
+    pam = {
+        parent: pseudo,
+        image: "img/pam.png"
+    },
+
+    chart_config = [config, malory, lana, figgs, sterling, woodhouse, pseudo, pam, cheryl];
+
+*/
@@ -0,0 +1,28 @@
+<!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> Collapsable example </title>
+    <link rel="stylesheet" href="../../Treant.css">
+    <link rel="stylesheet" href="collapsable.css">
+    
+    <link rel="stylesheet" href="../../perfect-scrollbar/perfect-scrollbar.css">
+
+</head>
+<body>
+    <div class="chart" id="collapsable-example"></div>
+    <script src="../../vendor/raphael.js"></script>
+    <script src="../../Treant.js"></script>
+    
+    <script src="../../vendor/jquery.min.js"></script>
+    <script src="../../vendor/jquery.easing.js"></script>
+    
+    
+    <script src="collapsable.js"></script>
+    <script>
+        tree = new Treant( chart_config );
+    </script>
+</body>
+</html>