upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
|
|
@ -0,0 +1 @@
|
|||
.ygtvspacer { height: 10px; width: 18px; }
.ygtvcheck0 { background: url(../../img/check/check0.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
.ygtvcheck1 { background: url(../../img/check/check1.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
.ygtvcheck2 { background: url(../../img/check/check2.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
|
||||
1
www/extras/yui/examples/treeview/assets/css/code.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
/************* CSS for dp.SyntaxHighlighter ***************************/
/* Main style for the table */
.dp-highlighter {
width: 95%;
overflow: auto;
line-height: 100% !important;
margin: 0px 0px 10px 0px;
}
.dp-highlighter table {
width: 100%;
margin: 0px 0px 2px 0px;
border-collapse: collapse;
border-bottom: 2px solid #eee;
background-color:#fff;
}
.dp-highlighter tbody.hide { display: none; }
.dp-highlighter tbody.show { display: table-row-group; _display: block; }
.dp-highlighter td
{
font-family: Courier New;
font-size: 12px;
}
/* Styles for the tools */
.dp-highlighter .tools-corner {
background-color: #eee;
font-size: 9px;
}
.dp-highlighter .tools {
background-color: #eee;
padding: 3px 8px 3px 10px;
border-bottom: 1px solid gray;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
}
.dp-highlighter .tools-corner {
background-color: #eee;
}
.dp-highlighter .tools a {
font-size: 9px;
color: #aaaaaa;
text-decoration: none;
}
.dp-highlighter .tools a:hover {
color: red;
text-decoration: underline;
}
/* Gutter with line number */
.dp-highlighter .gutter {
padding-right: 5px;
padding-left: 10px;
width: 5px;
background-color: #eee;
border-right: 1px solid #cccccc;
color: gray;
text-align: right;
vertical-align: top;
}
/* Single line style */
.dp-highlighter .line1, .line2 {
padding-left: 10px;
/*
border-bottom: 1px solid #F7F7F7;
*/
white-space:nowrap;
}
.dp-highlighter .line2 {
/*
background-color: #F7F7F7;
*/
}
.dp-xml {}
.dp-xml .cdata { color: #ff1493; }
.dp-xml .comments { color: green; }
.dp-xml .tag { color: blue; }
.dp-xml .tag-name { color: black; font-weight: bold; }
.dp-xml .attribute { color: red; }
.dp-xml .attribute-value { color: blue; }
.dp-c {}
.dp-c .comment { color: green; }
.dp-c .string { color: blue; }
.dp-c .preprocessor { color: gray; }
.dp-c .keyword { color: blue; }
.dp-c .vars { color: #d00; }
|
||||
98
www/extras/yui/examples/treeview/assets/css/default/tree.css
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tn.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/tph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/ln.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph {
|
||||
width:16px; height:22px; cursor:pointer ;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/lph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/loading.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell {
|
||||
width:16px; height:22px;
|
||||
background: url(../../../../../../../i/us/nt/widg/tree/dflt/vline.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/tn.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/ln.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph {
|
||||
width:16px; height:22px; cursor:pointer ;
|
||||
background: url(../../img/default/lph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/loading.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/vline.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
|
||||
64
www/extras/yui/examples/treeview/assets/css/folders/tree.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn { background: url(../../img/folders/tn.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm { background: url(../../img/folders/tm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh { background: url(../../img/folders/tmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp { background: url(../../img/folders/tp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph { background: url(../../img/folders/tph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln { background: url(../../img/folders/ln.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm { background: url(../../img/folders/lm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh { background: url(../../img/folders/lmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp { background: url(../../img/folders/lp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph { background: url(../../img/folders/lph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading { background: url(../../img/folders/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell { background: url(../../img/folders/vline.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
|
||||
.ygtvblankdepthcell { width:17px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
.ygtvitem table{
|
||||
margin-bottom:0;
|
||||
}
|
||||
.ygtvitem td {
|
||||
border:none;padding:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:1%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
99
www/extras/yui/examples/treeview/assets/css/local/tree.css
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* first or middle sibling, no children */
|
||||
.ygtvtn {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/tn.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/tph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/ln.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lm.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lmh.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp {
|
||||
width:16px; height:22px;
|
||||
cursor:pointer ;
|
||||
background: url(../../img/default/lp.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph {
|
||||
width:16px; height:22px; cursor:pointer ;
|
||||
background: url(../../img/default/lph.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/loading.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell {
|
||||
width:16px; height:22px;
|
||||
background: url(../../img/default/vline.gif) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ygtvspacer { height: 22px; width: 16px; }
|
||||
56
www/extras/yui/examples/treeview/assets/css/menu/tree.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/* first or middle sibling, no children */
|
||||
.ygtvtn { background: transparent; width:1em; height:20px; }
|
||||
|
||||
/* first or middle sibling, collapsable */
|
||||
.ygtvtm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, collapsable, hover */
|
||||
.ygtvtmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable */
|
||||
.ygtvtp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* first or middle sibling, expandable, hover */
|
||||
.ygtvtph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* last sibling, no children */
|
||||
.ygtvln { background: transparent; width:1em; height:20px; }
|
||||
|
||||
/* Last sibling, collapsable */
|
||||
.ygtvlm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, collapsable, hover */
|
||||
.ygtvlmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable */
|
||||
.ygtvlp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Last sibling, expandable, hover */
|
||||
.ygtvlph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
|
||||
/* Loading icon */
|
||||
.ygtvloading { background: url(../../img/menu/loading.gif) 0 6px no-repeat; width:1em; height:22px; }
|
||||
|
||||
/* the style for the empty cells that are used for rendering the depth
|
||||
* of the node */
|
||||
.ygtvdepthcell { background: transparent; width:1em; height:20px; }
|
||||
|
||||
.ygtvblankdepthcell { background: transparent; width:1em; height:20px; }
|
||||
|
||||
/* the style of the div around each node */
|
||||
.ygtvitem { border: 0px solid grey; }
|
||||
|
||||
/* the style of the div around each node's collection of children */
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:1%; }
|
||||
|
||||
/* the style of the text label in ygTextNode */
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
/*
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
*/
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
77
www/extras/yui/examples/treeview/assets/css/multi/tree.css
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/* Defaults */
|
||||
.ygtvtn { width:16px; height:22px; background: url(../../img/default/tn.gif) 0 0 no-repeat; }
|
||||
.ygtvtm { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tm.gif) 0 0 no-repeat; }
|
||||
.ygtvtmh { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tmh.gif) 0 0 no-repeat; }
|
||||
.ygtvtp { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tp.gif) 0 0 no-repeat; }
|
||||
.ygtvtph { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tph.gif) 0 0 no-repeat; }
|
||||
.ygtvln { width:16px; height:22px; background: url(../../img/default/ln.gif) 0 0 no-repeat; }
|
||||
.ygtvlm { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lm.gif) 0 0 no-repeat; }
|
||||
.ygtvlmh { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lmh.gif) 0 0 no-repeat; }
|
||||
.ygtvlp { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lp.gif) 0 0 no-repeat; }
|
||||
.ygtvlph { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lph.gif) 0 0 no-repeat; }
|
||||
.ygtvloading { width:16px; height:22px; background: url(../../img/default/loading.gif) 0 0 no-repeat; }
|
||||
.ygtvdepthcell { width:16px; height:22px; background: url(../../img/default/vline.gif) 0 0 no-repeat; }
|
||||
.ygtvblankdepthcell { width:16px; height:22px; }
|
||||
.ygtvitem { }
|
||||
|
||||
.ygtvitem table{
|
||||
margin-bottom:0;
|
||||
}
|
||||
.ygtvitem td {
|
||||
border:none;padding:0;
|
||||
}
|
||||
|
||||
|
||||
.ygtvchildren { }
|
||||
* html .ygtvchildren { height:2%; }
|
||||
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
background-color: white;
|
||||
}
|
||||
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }
|
||||
|
||||
/* via ID selector */
|
||||
#tree2 .ygtvtn { background: url(../../img/folders/tn.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
#tree2 .ygtvtm { background: url(../../img/folders/tm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvtmh { background: url(../../img/folders/tmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvtp { background: url(../../img/folders/tp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvtph { background: url(../../img/folders/tph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvln { background: url(../../img/folders/ln.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
#tree2 .ygtvlm { background: url(../../img/folders/lm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvlmh { background: url(../../img/folders/lmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvlp { background: url(../../img/folders/lp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvlph { background: url(../../img/folders/lph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
|
||||
#tree2 .ygtvloading { background: url(../../img/folders/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
|
||||
#tree2 .ygtvdepthcell { background: url(../../img/folders/vline.gif) 0 0 no-repeat; width:17px; height:22px; }
|
||||
#tree2 .ygtvblankdepthcell { width:17px; height:22px; }
|
||||
#tree2 .ygtvitem { }
|
||||
#tree2 .ygtvchildren { }
|
||||
* html .ygtvchildren { height:1%; }
|
||||
#tree2 .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
margin-left:2px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* via css class selector */
|
||||
.treemenu .ygtvtn {background: transparent; width:1em; height:20px; }
|
||||
.treemenu .ygtvtm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvtmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvtp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvtph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvln { background: transparent; width:1em; height:20px; }
|
||||
.treemenu .ygtvlm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvlmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvlp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvlph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
|
||||
.treemenu .ygtvloading { background: url(../../img/menu/loading.gif) 0 6px no-repeat; width:1em; height:22px; }
|
||||
.treemenu .ygtvdepthcell { background: transparent; width:1em; height:20px; }
|
||||
.treemenu .ygtvblankdepthcell {background: transparent; width:1em; height:20px; }
|
||||
.treemenu .ygtvitem { border: 0px solid grey; }
|
||||
.treemenu .ygtvchildren { }
|
||||
.treemenu .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
1
www/extras/yui/examples/treeview/assets/css/screen.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
html, body { padding: 0px 0px 10px 0px; border: 0; margin: 0; }
body { font: normal 11px verdana, sans-serif; color: #333; line-height: 19px; margin: 0; }
#container { clear: both; text-align: left; padding: 0 0; margin: 0 0; }
#containerTop { height:48px; }
#pad { padding: 0px 20px 0px 20px; }
a { text-decoration: underline; color: #46546C; }
a:hover { text-decoration: underline; color: #4d77c3; }
h1, h2, h3, h4, h5, h6 { font-family: palatino, georgia, "Times New Roman", serif; }
h2 { font-size:16px; font-weight: bold; margin: 0 0 11px 0; }
.border_2px { border: 1px solid #D8D8D8; padding: 2px; background: #fff; }
.border_5px { border: 1px solid #D8D8D8; padding: 5px; background: #fff; margin: 0 0 4px 0; }
img { padding: 0; margin: 0; border: 0; }
form { padding: 0; margin: 0; }
.input { width: 85px; font-size: 9px; }
.submit { font-size: 9px; }
#pageTitle { position:absolute;top:10px;left:90px; }
#pageTitle H3 { font-size:14pt; color:#666666 }
#header h1 { float:left; margin-top: 19px; margin-left: 50px; }
#header h1 a { display: block; height: 19px; text-decoration: none; }
#header { height: 60px; border: 0px solid #CFFB00; margin-bottom:0px; }
#header h4 { position: relative; float: right; font-size:11px;
letter-spacing: 1px; top: 10px; right: 30px;
line-height: 15px; padding: 0 0 0 13px; margin: 0px; }
#content { float: left;width: 620px; min-width: 500px; min-height:400px; padding:10px 0px; border: 0px solid #C13B00;
margin-left: 50px; top:0px; }
#content h1 { font-size:18px; margin:0px; }
.newsItem { padding-bottom:25px; margin-bottom:25px; overflow: hidden; }
.newsItem h3 { font-size:18px; margin:0px; }
.newsItem h3 a { text-decoration:none; color:#6A7981; }
.newsItem h3 a:hover { text-decoration:underline; color:#000; }
.newsItemFooter, .newsItemFooter a { font-size:9px; color:#999; font-weight:normal; }
.newsItemFooter a:hover { color:#222; }
#footer { padding: 0px 0px 20px 0px; clear: both; color: #999; border-top:0px #CCC solid; margin:0px 26px 0px 30px }
#footer a { color: #999; }
#footer a:hover { color: #222; }
#footerContainer { clear: both; }
#rightbar {
float: right;
padding: 5px 5px 5px 5px;
width: 284px; /* for IE5-Win */
width: 280px;
border: 1px solid #333333;
position:relative;
right:48px;
top:0px;
background-color:#eeeeee;
}
#rightbar h2, #rightbar h3 {
font-size:12px;
text-align:center;
color:#FFF;
border-bottom:#848B8F solid 1px;
border-right:#949B9F solid 1px;
border-top:#eee solid 1px;
padding:1px;
margin:0px 0px 0px 0px;
background-color:#383e45;
width:100%;
}
#rightbar h2 a, #rightbar h3 a {
font-size:12px;
color:#FFF;
text-decoration:none;
display:block;
}
#rightBarPad {
margin:0px;
}
#sidenav {
margin: 0px 0;
border-bottom: 1px solid #ddd;
}
#sidenav ul {
margin: 0;
padding: 0;
border: 0;
}
#sidenav ul li {
list-style: none;
list-style-image: none !important;
margin: 0;
padding:0;
}
#sidenav ul li a {
text-decoration: none;
padding: 5px 0px 5px 0px;
color: #4C5250;
display: block;
width: 187px;
font-size: 11px !important;
font-weight: bold;
border-top: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-left: 1px solid #C7CBD0;
text-shadow: -2px -2px 0px #FFF;
}
#sidenav ul li a:hover {
/* background: url(../img/navHover2.png) top no-repeat; */
border-top: 1px solid #A1AAAF;
border-bottom: 1px solid #CCC;
border-right: 0px solid #C3C7CA;
border-left: 1px solid #C3C7CA;
text-shadow: 4px 4px 0px #C3C7CA;
}
.ylogo { position:absolute;top:5px;left:5px }
|
||||
BIN
www/extras/yui/examples/treeview/assets/img/bullet.gif
Normal file
|
After Width: | Height: | Size: 172 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/check0.gif
Normal file
|
After Width: | Height: | Size: 608 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/check1.gif
Normal file
|
After Width: | Height: | Size: 609 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/check2.gif
Normal file
|
After Width: | Height: | Size: 622 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/lm.gif
Normal file
|
After Width: | Height: | Size: 94 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/lmh.gif
Normal file
|
After Width: | Height: | Size: 106 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/ln.gif
Normal file
|
After Width: | Height: | Size: 142 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/loading.gif
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/check/lp.gif
Normal file
|
After Width: | Height: | Size: 130 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/lph.gif
Normal file
|
After Width: | Height: | Size: 111 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/tm.gif
Normal file
|
After Width: | Height: | Size: 545 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/tmh.gif
Normal file
|
After Width: | Height: | Size: 563 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/tn.gif
Normal file
|
After Width: | Height: | Size: 504 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/tp.gif
Normal file
|
After Width: | Height: | Size: 539 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/tph.gif
Normal file
|
After Width: | Height: | Size: 568 B |
BIN
www/extras/yui/examples/treeview/assets/img/check/vline.gif
Normal file
|
After Width: | Height: | Size: 503 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/lm.gif
Normal file
|
After Width: | Height: | Size: 94 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/lmh.gif
Normal file
|
After Width: | Height: | Size: 106 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/ln.gif
Normal file
|
After Width: | Height: | Size: 142 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/loading.gif
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/default/lp.gif
Normal file
|
After Width: | Height: | Size: 130 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/lph.gif
Normal file
|
After Width: | Height: | Size: 111 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/tm.gif
Normal file
|
After Width: | Height: | Size: 545 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/tmh.gif
Normal file
|
After Width: | Height: | Size: 563 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/tn.gif
Normal file
|
After Width: | Height: | Size: 504 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/tp.gif
Normal file
|
After Width: | Height: | Size: 539 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/tph.gif
Normal file
|
After Width: | Height: | Size: 568 B |
BIN
www/extras/yui/examples/treeview/assets/img/default/vline.gif
Normal file
|
After Width: | Height: | Size: 503 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/lm.gif
Normal file
|
After Width: | Height: | Size: 666 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/lmh.gif
Normal file
|
After Width: | Height: | Size: 677 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/ln.gif
Normal file
|
After Width: | Height: | Size: 142 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/loading.gif
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/folders/lp.gif
Normal file
|
After Width: | Height: | Size: 641 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/lph.gif
Normal file
|
After Width: | Height: | Size: 651 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/tm.gif
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/folders/tmh.gif
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/folders/tn.gif
Normal file
|
After Width: | Height: | Size: 504 B |
BIN
www/extras/yui/examples/treeview/assets/img/folders/tp.gif
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/folders/tph.gif
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/folders/vline.gif
Normal file
|
After Width: | Height: | Size: 503 B |
BIN
www/extras/yui/examples/treeview/assets/img/greybg.png
Normal file
|
After Width: | Height: | Size: 197 B |
BIN
www/extras/yui/examples/treeview/assets/img/header.gif
Normal file
|
After Width: | Height: | Size: 203 B |
BIN
www/extras/yui/examples/treeview/assets/img/icons.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/logo.gif
Normal file
|
After Width: | Height: | Size: 705 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/collapse.gif
Normal file
|
After Width: | Height: | Size: 56 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/collapseh.gif
Normal file
|
After Width: | Height: | Size: 67 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/collapseon.gif
Normal file
|
After Width: | Height: | Size: 64 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/dash.gif
Normal file
|
After Width: | Height: | Size: 114 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/expand.gif
Normal file
|
After Width: | Height: | Size: 57 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/expandh.gif
Normal file
|
After Width: | Height: | Size: 66 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/expandon.gif
Normal file
|
After Width: | Height: | Size: 65 B |
BIN
www/extras/yui/examples/treeview/assets/img/menu/loading.gif
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/navHover2.png
Normal file
|
After Width: | Height: | Size: 875 B |
BIN
www/extras/yui/examples/treeview/assets/img/qbottom.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/extras/yui/examples/treeview/assets/img/qmiddle.png
Normal file
|
After Width: | Height: | Size: 385 B |
BIN
www/extras/yui/examples/treeview/assets/img/qtop.png
Normal file
|
After Width: | Height: | Size: 2 KiB |
23
www/extras/yui/examples/treeview/assets/js/CheckOnClickNode.js
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.example.CheckOnClickNode = function(oData, oParent, expanded, checked) {
|
||||
if (oParent) {
|
||||
this.init(oData, oParent, expanded);
|
||||
this.setUpLabel(oData);
|
||||
this.checked = checked;
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.CheckOnClickNode.prototype = new YAHOO.widget.TaskNode();
|
||||
|
||||
YAHOO.example.CheckOnClickNode.prototype.getCheckLink = function() {
|
||||
return "var n=YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
|
||||
this.index + "); " +
|
||||
"var r = n.checkClick(); " +
|
||||
"YAHOO.example.customCheckClickFunction(n);" +
|
||||
"return r;";
|
||||
};
|
||||
|
||||
YAHOO.example.customCheckClickFunction = function(node) {
|
||||
alert(node.checked + "(" + node.checkState + ")");
|
||||
};
|
||||
270
www/extras/yui/examples/treeview/assets/js/TaskNode.js
vendored
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
/**
|
||||
* The check box marks a task complete. It is a simulated form field
|
||||
* with three states ...
|
||||
* 0=unchecked, 1=some children checked, 2=all children checked
|
||||
* When a task is clicked, the state of the nodes and parent and children
|
||||
* are updated, and this behavior cascades.
|
||||
*
|
||||
* @extends YAHOO.widget.TextNode
|
||||
* @constructor
|
||||
* @param oData {object} A string or object containing the data that will
|
||||
* be used to render this node.
|
||||
* @param oParent {Node} This node's parent node
|
||||
* @param expanded {boolean} The initial expanded/collapsed state
|
||||
* @param checked {boolean} The initial checked/unchecked state
|
||||
*/
|
||||
YAHOO.widget.TaskNode = function(oData, oParent, expanded, checked) {
|
||||
YAHOO.widget.TaskNode.superclass.constructor.call(this,oData,oParent,expanded);
|
||||
this.setUpCheck(checked || oData.checked);
|
||||
|
||||
};
|
||||
|
||||
YAHOO.extend(YAHOO.widget.TaskNode, YAHOO.widget.TextNode, {
|
||||
|
||||
/**
|
||||
* True if checkstate is 1 (some children checked) or 2 (all children checked),
|
||||
* false if 0.
|
||||
* @type boolean
|
||||
*/
|
||||
checked: false,
|
||||
|
||||
/**
|
||||
* checkState
|
||||
* 0=unchecked, 1=some children checked, 2=all children checked
|
||||
* @type int
|
||||
*/
|
||||
checkState: 0,
|
||||
|
||||
/**
|
||||
* The node type
|
||||
* @property _type
|
||||
* @private
|
||||
* @type string
|
||||
* @default "TextNode"
|
||||
*/
|
||||
_type: "TaskNode",
|
||||
|
||||
taskNodeParentChange: function() {
|
||||
//this.updateParent();
|
||||
},
|
||||
|
||||
setUpCheck: function(checked) {
|
||||
// if this node is checked by default, run the check code to update
|
||||
// the parent's display state
|
||||
if (checked && checked === true) {
|
||||
this.check();
|
||||
// otherwise the parent needs to be updated only if its checkstate
|
||||
// needs to change from fully selected to partially selected
|
||||
} else if (this.parent && 2 === this.parent.checkState) {
|
||||
this.updateParent();
|
||||
}
|
||||
|
||||
// set up the custom event on the tree for checkClick
|
||||
/**
|
||||
* Custom event that is fired when the check box is clicked. The
|
||||
* custom event is defined on the tree instance, so there is a single
|
||||
* event that handles all nodes in the tree. The node clicked is
|
||||
* provided as an argument. Note, your custom node implentation can
|
||||
* implement its own node specific events this way.
|
||||
*
|
||||
* @event checkClick
|
||||
* @for YAHOO.widget.TreeView
|
||||
* @param {YAHOO.widget.Node} node the node clicked
|
||||
*/
|
||||
if (this.tree && !this.tree.hasEvent("checkClick")) {
|
||||
this.tree.createEvent("checkClick", this.tree);
|
||||
}
|
||||
|
||||
this.tree.subscribe('clickEvent',this.checkClick);
|
||||
this.subscribe("parentChange", this.taskNodeParentChange);
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* The id of the check element
|
||||
* @for YAHOO.widget.TaskNode
|
||||
* @type string
|
||||
*/
|
||||
getCheckElId: function() {
|
||||
return "ygtvcheck" + this.index;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the check box element
|
||||
* @return the check html element (img)
|
||||
*/
|
||||
getCheckEl: function() {
|
||||
return document.getElementById(this.getCheckElId());
|
||||
},
|
||||
|
||||
/**
|
||||
* The style of the check element, derived from its current state
|
||||
* @return {string} the css style for the current check state
|
||||
*/
|
||||
getCheckStyle: function() {
|
||||
return "ygtvcheck" + this.checkState;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Invoked when the user clicks the check box
|
||||
*/
|
||||
checkClick: function(oArgs) {
|
||||
var node = oArgs.node;
|
||||
var target = YAHOO.util.Event.getTarget(oArgs.event);
|
||||
if (YAHOO.util.Dom.hasClass(target,'ygtvspacer')) {
|
||||
node.logger.log("previous checkstate: " + node.checkState);
|
||||
if (node.checkState === 0) {
|
||||
node.check();
|
||||
} else {
|
||||
node.uncheck();
|
||||
}
|
||||
|
||||
node.onCheckClick(node);
|
||||
this.fireEvent("checkClick", node);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Override to get the check click event
|
||||
*/
|
||||
onCheckClick: function() {
|
||||
this.logger.log("onCheckClick: " + this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh the state of this node's parent, and cascade up.
|
||||
*/
|
||||
updateParent: function() {
|
||||
var p = this.parent;
|
||||
|
||||
if (!p || !p.updateParent) {
|
||||
this.logger.log("Abort udpate parent: " + this.index);
|
||||
return;
|
||||
}
|
||||
|
||||
var somethingChecked = false;
|
||||
var somethingNotChecked = false;
|
||||
|
||||
for (var i=0, l=p.children.length;i<l;i=i+1) {
|
||||
|
||||
var n = p.children[i];
|
||||
|
||||
if ("checked" in n) {
|
||||
if (n.checked) {
|
||||
somethingChecked = true;
|
||||
// checkState will be 1 if the child node has unchecked children
|
||||
if (n.checkState === 1) {
|
||||
somethingNotChecked = true;
|
||||
}
|
||||
} else {
|
||||
somethingNotChecked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (somethingChecked) {
|
||||
p.setCheckState( (somethingNotChecked) ? 1 : 2 );
|
||||
} else {
|
||||
p.setCheckState(0);
|
||||
}
|
||||
|
||||
p.updateCheckHtml();
|
||||
p.updateParent();
|
||||
},
|
||||
|
||||
/**
|
||||
* If the node has been rendered, update the html to reflect the current
|
||||
* state of the node.
|
||||
*/
|
||||
updateCheckHtml: function() {
|
||||
if (this.parent && this.parent.childrenRendered) {
|
||||
this.getCheckEl().className = this.getCheckStyle();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the state. The checked property is true if the state is 1 or 2
|
||||
*
|
||||
* @param the new check state
|
||||
*/
|
||||
setCheckState: function(state) {
|
||||
this.checkState = state;
|
||||
this.checked = (state > 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Check this node
|
||||
*/
|
||||
check: function() {
|
||||
this.logger.log("check");
|
||||
this.setCheckState(2);
|
||||
for (var i=0, l=this.children.length; i<l; i=i+1) {
|
||||
var c = this.children[i];
|
||||
if (c.check) {
|
||||
c.check();
|
||||
}
|
||||
}
|
||||
this.updateCheckHtml();
|
||||
this.updateParent();
|
||||
},
|
||||
|
||||
/**
|
||||
* Uncheck this node
|
||||
*/
|
||||
uncheck: function() {
|
||||
this.setCheckState(0);
|
||||
for (var i=0, l=this.children.length; i<l; i=i+1) {
|
||||
var c = this.children[i];
|
||||
if (c.uncheck) {
|
||||
c.uncheck();
|
||||
}
|
||||
}
|
||||
this.updateCheckHtml();
|
||||
this.updateParent();
|
||||
},
|
||||
// Overrides YAHOO.widget.TextNode
|
||||
|
||||
/*
|
||||
getContentHtml: function() {
|
||||
var sb = [];
|
||||
sb[sb.length] = '<td';
|
||||
sb[sb.length] = ' id="' + this.getCheckElId() + '"';
|
||||
sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
|
||||
sb[sb.length] = '>';
|
||||
sb[sb.length] = '<div class="ygtvspacer"></div></td>';
|
||||
|
||||
sb[sb.length] = '<span';
|
||||
sb[sb.length] = ' id="' + this.labelElId + '"';
|
||||
if (this.title) {
|
||||
sb[sb.length] = ' title="' + this.title + '"';
|
||||
}
|
||||
sb[sb.length] = ' class="' + this.labelStyle + '"';
|
||||
sb[sb.length] = ' >';
|
||||
sb[sb.length] = this.label;
|
||||
sb[sb.length] = '</span>';
|
||||
return sb.join("");
|
||||
}
|
||||
*/
|
||||
getContentHtml: function() {
|
||||
var sb = [];
|
||||
sb[sb.length] = '<td';
|
||||
sb[sb.length] = ' id="' + this.getCheckElId() + '"';
|
||||
sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
|
||||
sb[sb.length] = '>';
|
||||
sb[sb.length] = '<div class="ygtvspacer"></div></td>';
|
||||
|
||||
sb[sb.length] = '<td><span';
|
||||
sb[sb.length] = ' id="' + this.labelElId + '"';
|
||||
if (this.title) {
|
||||
sb[sb.length] = ' title="' + this.title + '"';
|
||||
}
|
||||
sb[sb.length] = ' class="' + this.labelStyle + '"';
|
||||
sb[sb.length] = ' >';
|
||||
sb[sb.length] = this.label;
|
||||
sb[sb.length] = '</span></td>';
|
||||
return sb.join("");
|
||||
}
|
||||
});
|
||||
736
www/extras/yui/examples/treeview/assets/js/dpSyntaxHighlighter.js
vendored
Normal file
|
|
@ -0,0 +1,736 @@
|
|||
/**
|
||||
* Code Syntax Highlighter.
|
||||
* Version 1.2.0
|
||||
* Copyright (C) 2004 Alex Gorbatchev.
|
||||
* http://www.dreamprojections.com/syntaxhighlighter/
|
||||
*
|
||||
* This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General
|
||||
* Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option)
|
||||
* any later version.
|
||||
*
|
||||
* This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
|
||||
* details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to
|
||||
* the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
|
||||
*/
|
||||
|
||||
//
|
||||
// create namespaces
|
||||
//
|
||||
var dp = {
|
||||
sh : // dp.sh
|
||||
{
|
||||
Utils : {}, // dp.sh.Utils
|
||||
Brushes : {}, // dp.sh.Brushes
|
||||
Strings : {}
|
||||
},
|
||||
Version : '1.2.0'
|
||||
};
|
||||
|
||||
dp.sh.Strings = {
|
||||
AboutDialog : '<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><div class="para title">dp.SyntaxHighlighter</div><div class="para">Version: {V}</div><div class="para"><a href="http://www.dreamprojections.com/sh/?ref=about" target="_blank">http://www.dreamprojections.com/SyntaxHighlighter</a></div>©2004-2005 Alex Gorbatchev. All right reserved.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>',
|
||||
|
||||
// tools
|
||||
ExpandCode : '+ expand code',
|
||||
ViewPlain : 'view plain',
|
||||
Print : '',
|
||||
CopyToClipboard : '',
|
||||
About : '',
|
||||
|
||||
CopiedToClipboard : 'The code is in your clipboard now.'
|
||||
};
|
||||
|
||||
dp.SyntaxHighlighter = dp.sh;
|
||||
|
||||
//
|
||||
// Dialog and toolbar functions
|
||||
//
|
||||
|
||||
dp.sh.Utils.Expand = function(sender)
|
||||
{
|
||||
var table = sender;
|
||||
var span = sender;
|
||||
|
||||
// find the span in which the text label and pipe contained so we can hide it
|
||||
while(span != null && span.tagName != 'SPAN')
|
||||
span = span.parentNode;
|
||||
|
||||
// find the table
|
||||
while(table != null && table.tagName != 'TABLE')
|
||||
table = table.parentNode;
|
||||
|
||||
// remove the 'expand code' button
|
||||
span.parentNode.removeChild(span);
|
||||
|
||||
table.tBodies[0].className = 'show';
|
||||
table.parentNode.style.height = '100%'; // containing div isn't getting updated properly when the TBODY is shown
|
||||
}
|
||||
|
||||
// opens a new windows and puts the original unformatted source code inside.
|
||||
dp.sh.Utils.ViewSource = function(sender)
|
||||
{
|
||||
var code = sender.parentNode.originalCode;
|
||||
var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=1');
|
||||
|
||||
code = code.replace(/</g, '<');
|
||||
|
||||
wnd.document.write('<pre>' + code + '</pre>');
|
||||
wnd.document.close();
|
||||
}
|
||||
|
||||
// copies the original source code in to the clipboard (IE only)
|
||||
dp.sh.Utils.ToClipboard = function(sender)
|
||||
{
|
||||
var code = sender.parentNode.originalCode;
|
||||
|
||||
// This works only for IE. There's a way to make it work with Mozilla as well,
|
||||
// but it requires security settings changed on the client, which isn't by
|
||||
// default, so 99% of users won't have it working anyways.
|
||||
if(window.clipboardData)
|
||||
{
|
||||
window.clipboardData.setData('text', code);
|
||||
|
||||
alert(dp.sh.Strings.CopiedToClipboard);
|
||||
}
|
||||
}
|
||||
|
||||
// creates an invisible iframe, puts the original source code inside and prints it
|
||||
dp.sh.Utils.PrintSource = function(sender)
|
||||
{
|
||||
var td = sender.parentNode;
|
||||
var code = td.processedCode;
|
||||
var iframe = document.createElement('IFRAME');
|
||||
var doc = null;
|
||||
var wnd =
|
||||
|
||||
// this hides the iframe
|
||||
iframe.style.cssText = 'position:absolute; width:0px; height:0px; left:-5px; top:-5px;';
|
||||
|
||||
td.appendChild(iframe);
|
||||
|
||||
doc = iframe.contentWindow.document;
|
||||
code = code.replace(/</g, '<');
|
||||
|
||||
doc.open();
|
||||
doc.write('<pre>' + code + '</pre>');
|
||||
doc.close();
|
||||
|
||||
iframe.contentWindow.focus();
|
||||
iframe.contentWindow.print();
|
||||
|
||||
td.removeChild(iframe);
|
||||
}
|
||||
|
||||
dp.sh.Utils.About = function()
|
||||
{
|
||||
var wnd = window.open('', '_blank', 'dialog,width=320,height=150,scrollbars=0');
|
||||
var doc = wnd.document;
|
||||
|
||||
var styles = document.getElementsByTagName('style');
|
||||
var links = document.getElementsByTagName('link');
|
||||
|
||||
doc.write(dp.sh.Strings.AboutDialog.replace('{V}', dp.sh.Version));
|
||||
|
||||
// copy over ALL the styles from the parent page
|
||||
for(var i = 0; i < styles.length; i++)
|
||||
doc.write('<style>' + styles[i].innerHTML + '</style>');
|
||||
|
||||
for(var i = 0; i < links.length; i++)
|
||||
if(links[i].rel.toLowerCase() == 'stylesheet')
|
||||
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
|
||||
|
||||
doc.close();
|
||||
wnd.focus();
|
||||
}
|
||||
|
||||
//
|
||||
// Match object
|
||||
//
|
||||
dp.sh.Match = function(value, index, css)
|
||||
{
|
||||
this.value = value;
|
||||
this.index = index;
|
||||
this.length = value.length;
|
||||
this.css = css;
|
||||
}
|
||||
|
||||
//
|
||||
// Highlighter object
|
||||
//
|
||||
dp.sh.Highlighter = function()
|
||||
{
|
||||
this.addGutter = true;
|
||||
this.addControls = true;
|
||||
this.collapse = false;
|
||||
this.tabsToSpaces = true;
|
||||
}
|
||||
|
||||
// static callback for the match sorting
|
||||
dp.sh.Highlighter.SortCallback = function(m1, m2)
|
||||
{
|
||||
// sort matches by index first
|
||||
if(m1.index < m2.index)
|
||||
return -1;
|
||||
else if(m1.index > m2.index)
|
||||
return 1;
|
||||
else
|
||||
{
|
||||
// if index is the same, sort by length
|
||||
if(m1.length < m2.length)
|
||||
return -1;
|
||||
else if(m1.length > m2.length)
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// gets a list of all matches for a given regular expression
|
||||
dp.sh.Highlighter.prototype.GetMatches = function(regex, css)
|
||||
{
|
||||
var index = 0;
|
||||
var match = null;
|
||||
|
||||
while((match = regex.exec(this.code)) != null)
|
||||
{
|
||||
this.matches[this.matches.length] = new dp.sh.Match(match[0], match.index, css);
|
||||
}
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.AddBit = function(str, css)
|
||||
{
|
||||
var span = document.createElement('span');
|
||||
|
||||
str = str.replace(/&/g, '&');
|
||||
str = str.replace(/ /g, ' ');
|
||||
str = str.replace(/</g, '<');
|
||||
str = str.replace(/\n/gm, ' <br>');
|
||||
|
||||
// when adding a piece of code, check to see if it has line breaks in it
|
||||
// and if it does, wrap individual line breaks with span tags
|
||||
if(css != null)
|
||||
{
|
||||
var regex = new RegExp('<br>', 'gi');
|
||||
|
||||
if(regex.test(str))
|
||||
{
|
||||
var lines = str.split(' <br>');
|
||||
|
||||
str = '';
|
||||
|
||||
for(var i = 0; i < lines.length; i++)
|
||||
{
|
||||
span = document.createElement('SPAN');
|
||||
span.className = css;
|
||||
span.innerHTML = lines[i];
|
||||
|
||||
this.div.appendChild(span);
|
||||
|
||||
// don't add a <BR> for the last line
|
||||
if(i + 1 < lines.length)
|
||||
this.div.appendChild(document.createElement('BR'));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
span.className = css;
|
||||
span.innerHTML = str;
|
||||
this.div.appendChild(span);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
span.innerHTML = str;
|
||||
this.div.appendChild(span);
|
||||
}
|
||||
}
|
||||
|
||||
// checks if one match is inside any other match
|
||||
dp.sh.Highlighter.prototype.IsInside = function(match)
|
||||
{
|
||||
if(match == null || match.length == 0)
|
||||
return;
|
||||
|
||||
for(var i = 0; i < this.matches.length; i++)
|
||||
{
|
||||
var c = this.matches[i];
|
||||
|
||||
if(c == null)
|
||||
continue;
|
||||
|
||||
if((match.index > c.index) && (match.index <= c.index + c.length))
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.ProcessRegexList = function()
|
||||
{
|
||||
for(var i = 0; i < this.regexList.length; i++)
|
||||
this.GetMatches(this.regexList[i].regex, this.regexList[i].css);
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.ProcessSmartTabs = function(code)
|
||||
{
|
||||
var lines = code.split('\n');
|
||||
var result = '';
|
||||
var tabSize = 4;
|
||||
var tab = '\t';
|
||||
|
||||
// This function inserts specified amount of spaces in the string
|
||||
// where a tab is while removing that given tab.
|
||||
function InsertSpaces(line, pos, count)
|
||||
{
|
||||
var left = line.substr(0, pos);
|
||||
var right = line.substr(pos + 1, line.length); // pos + 1 will get rid of the tab
|
||||
var spaces = '';
|
||||
|
||||
for(var i = 0; i < count; i++)
|
||||
spaces += ' ';
|
||||
|
||||
return left + spaces + right;
|
||||
}
|
||||
|
||||
// This function process one line for 'smart tabs'
|
||||
function ProcessLine(line, tabSize)
|
||||
{
|
||||
if(line.indexOf(tab) == -1)
|
||||
return line;
|
||||
|
||||
var pos = 0;
|
||||
|
||||
while((pos = line.indexOf(tab)) != -1)
|
||||
{
|
||||
// This is pretty much all there is to the 'smart tabs' logic.
|
||||
// Based on the position within the line and size of a tab,
|
||||
// calculate the amount of spaces we need to insert.
|
||||
var spaces = tabSize - pos % tabSize;
|
||||
|
||||
line = InsertSpaces(line, pos, spaces);
|
||||
}
|
||||
|
||||
return line;
|
||||
}
|
||||
|
||||
// Go through all the lines and do the 'smart tabs' magic.
|
||||
for(var i = 0; i < lines.length; i++)
|
||||
result += ProcessLine(lines[i], tabSize) + '\n';
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.SwitchToTable = function()
|
||||
{
|
||||
// Safari fix: for some reason lowercase <br> isn't getting picked up, even though 'i' is set
|
||||
var lines = this.div.innerHTML.split(/<BR>/gi);
|
||||
var row = null;
|
||||
var cell = null;
|
||||
var tBody = null;
|
||||
var html = '';
|
||||
var pipe = ' | ';
|
||||
|
||||
// creates an anchor to a utility
|
||||
function UtilHref(util, text)
|
||||
{
|
||||
return '<a href="#" onclick="dp.sh.Utils.' + util + '(this); return false;">' + text + '</a>';
|
||||
}
|
||||
|
||||
tBody = document.createElement('TBODY'); // can be created and all others go to tBodies collection.
|
||||
|
||||
this.table.appendChild(tBody);
|
||||
|
||||
if(this.addGutter == true)
|
||||
{
|
||||
row = tBody.insertRow(-1);
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'tools-corner';
|
||||
}
|
||||
|
||||
if(this.addControls == true)
|
||||
{
|
||||
var tHead = document.createElement('THEAD'); // controls will be placed in here
|
||||
this.table.appendChild(tHead);
|
||||
|
||||
row = tHead.insertRow(-1);
|
||||
|
||||
// add corner if there's a gutter
|
||||
if(this.addGutter == true)
|
||||
{
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'tools-corner';
|
||||
}
|
||||
|
||||
cell = row.insertCell(-1);
|
||||
|
||||
// preserve some variables for the controls
|
||||
cell.originalCode = this.originalCode;
|
||||
cell.processedCode = this.code;
|
||||
cell.className = 'tools';
|
||||
|
||||
if(this.collapse == true)
|
||||
{
|
||||
tBody.className = 'hide';
|
||||
cell.innerHTML += '<span><b>' + UtilHref('Expand', dp.sh.Strings.ExpandCode) + '</b>' + pipe + '</span>';
|
||||
}
|
||||
|
||||
cell.innerHTML += UtilHref('ViewSource', dp.sh.Strings.ViewPlain) ;
|
||||
|
||||
// IE has this clipboard object which is easy enough to use
|
||||
if(window.clipboardData)
|
||||
cell.innerHTML += pipe + UtilHref('ToClipboard', dp.sh.Strings.CopyToClipboard);
|
||||
}
|
||||
|
||||
for(var i = 0; i < lines.length - 1; i++)
|
||||
{
|
||||
row = tBody.insertRow(-1);
|
||||
|
||||
if(this.addGutter == true)
|
||||
{
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'gutter';
|
||||
cell.innerHTML = i + 1;
|
||||
}
|
||||
|
||||
cell = row.insertCell(-1);
|
||||
cell.className = 'line' + (i % 2 + 1); // uses .line1 and .line2 css styles for alternating lines
|
||||
cell.innerHTML = lines[i];
|
||||
}
|
||||
|
||||
this.div.innerHTML = '';
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.Highlight = function(code)
|
||||
{
|
||||
function Trim(str)
|
||||
{
|
||||
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
|
||||
}
|
||||
|
||||
function Chop(str)
|
||||
{
|
||||
return str.replace(/\n*$/, '').replace(/^\n*/, '');
|
||||
}
|
||||
|
||||
function Unindent(str)
|
||||
{
|
||||
var lines = str.split('\n');
|
||||
var indents = new Array();
|
||||
var regex = new RegExp('^\\s*', 'g');
|
||||
var min = 1000;
|
||||
|
||||
// go through every line and check for common number of indents
|
||||
for(var i = 0; i < lines.length && min > 0; i++)
|
||||
{
|
||||
if(Trim(lines[i]).length == 0)
|
||||
continue;
|
||||
|
||||
var matches = regex.exec(lines[i]);
|
||||
|
||||
if(matches != null && matches.length > 0)
|
||||
min = Math.min(matches[0].length, min);
|
||||
}
|
||||
|
||||
// trim minimum common number of white space from the begining of every line
|
||||
if(min > 0)
|
||||
for(var i = 0; i < lines.length; i++)
|
||||
lines[i] = lines[i].substr(min);
|
||||
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
// This function returns a portions of the string from pos1 to pos2 inclusive
|
||||
function Copy(string, pos1, pos2)
|
||||
{
|
||||
return string.substr(pos1, pos2 - pos1);
|
||||
}
|
||||
|
||||
var pos = 0;
|
||||
|
||||
this.originalCode = code;
|
||||
this.code = Chop(Unindent(code));
|
||||
this.div = document.createElement('DIV');
|
||||
this.table = document.createElement('TABLE');
|
||||
this.matches = new Array();
|
||||
|
||||
if(this.CssClass != null)
|
||||
this.table.className = this.CssClass;
|
||||
|
||||
// replace tabs with spaces
|
||||
if(this.tabsToSpaces == true)
|
||||
this.code = this.ProcessSmartTabs(this.code);
|
||||
|
||||
this.table.border = 0;
|
||||
this.table.cellSpacing = 0;
|
||||
this.table.cellPadding = 0;
|
||||
|
||||
this.ProcessRegexList();
|
||||
|
||||
// if no matches found, add entire code as plain text
|
||||
if(this.matches.length == 0)
|
||||
{
|
||||
this.AddBit(this.code, null);
|
||||
this.SwitchToTable();
|
||||
return;
|
||||
}
|
||||
|
||||
// sort the matches
|
||||
this.matches = this.matches.sort(dp.sh.Highlighter.SortCallback);
|
||||
|
||||
// The following loop checks to see if any of the matches are inside
|
||||
// of other matches. This process would get rid of highligting strings
|
||||
// inside comments, keywords inside strings and so on.
|
||||
for(var i = 0; i < this.matches.length; i++)
|
||||
if(this.IsInside(this.matches[i]))
|
||||
this.matches[i] = null;
|
||||
|
||||
// Finally, go through the final list of matches and pull the all
|
||||
// together adding everything in between that isn't a match.
|
||||
for(var i = 0; i < this.matches.length; i++)
|
||||
{
|
||||
var match = this.matches[i];
|
||||
|
||||
if(match == null || match.length == 0)
|
||||
continue;
|
||||
|
||||
this.AddBit(Copy(this.code, pos, match.index), null);
|
||||
this.AddBit(match.value, match.css);
|
||||
|
||||
pos = match.index + match.length;
|
||||
}
|
||||
|
||||
this.AddBit(this.code.substr(pos), null);
|
||||
|
||||
this.SwitchToTable();
|
||||
}
|
||||
|
||||
dp.sh.Highlighter.prototype.GetKeywords = function(str)
|
||||
{
|
||||
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
|
||||
}
|
||||
|
||||
// highlightes all elements identified by name and gets source code from specified property
|
||||
dp.sh.HighlightAll = function(name, showGutter /* optional */, showControls /* optional */, collapseAll /* optional */)
|
||||
{
|
||||
function FindValue()
|
||||
{
|
||||
var a = arguments;
|
||||
|
||||
for(var i = 0; i < a.length; i++)
|
||||
{
|
||||
if(a[i] == null)
|
||||
continue;
|
||||
|
||||
if(typeof(a[i]) == 'string' && a[i] != '')
|
||||
return a[i] + '';
|
||||
|
||||
if(typeof(a[i]) == 'object' && a[i].value != '')
|
||||
return a[i].value + '';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function IsOptionSet(value, list)
|
||||
{
|
||||
for(var i = 0; i < list.length; i++)
|
||||
if(list[i] == value)
|
||||
return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
var elements = document.getElementsByName(name);
|
||||
var highlighter = null;
|
||||
var registered = new Object();
|
||||
var propertyName = 'value';
|
||||
|
||||
// if no code blocks found, leave
|
||||
if(elements == null)
|
||||
return;
|
||||
|
||||
// register all brushes
|
||||
for(var brush in dp.sh.Brushes)
|
||||
{
|
||||
var aliases = dp.sh.Brushes[brush].Aliases;
|
||||
|
||||
if(aliases == null)
|
||||
continue;
|
||||
|
||||
for(var i = 0; i < aliases.length; i++)
|
||||
registered[aliases[i]] = brush;
|
||||
}
|
||||
|
||||
for(var i = 0; i < elements.length; i++)
|
||||
{
|
||||
var element = elements[i];
|
||||
var options = FindValue(
|
||||
element.attributes['class'], element.className,
|
||||
element.attributes['language'], element.language
|
||||
);
|
||||
var language = '';
|
||||
|
||||
if(options == null)
|
||||
continue;
|
||||
|
||||
options = options.split(':');
|
||||
|
||||
language = options[0].toLowerCase();
|
||||
|
||||
if(registered[language] == null)
|
||||
continue;
|
||||
|
||||
// instantiate a brush
|
||||
highlighter = new dp.sh.Brushes[registered[language]]();
|
||||
|
||||
// hide the original element
|
||||
element.style.display = 'none';
|
||||
|
||||
highlighter.addGutter = (showGutter == null) ? !IsOptionSet('nogutter', options) : showGutter;
|
||||
highlighter.addControls = (showControls == null) ? !IsOptionSet('nocontrols', options) : showControls;
|
||||
highlighter.collapse = (collapseAll == null) ? IsOptionSet('collapse', options) : collapseAll;
|
||||
|
||||
highlighter.Highlight(element[propertyName]);
|
||||
|
||||
// place the result table inside a div
|
||||
var div = document.createElement('DIV');
|
||||
|
||||
div.className = 'dp-highlighter';
|
||||
div.appendChild(highlighter.table);
|
||||
|
||||
element.parentNode.insertBefore(div, element);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dp.sh.Brushes.JScript = function()
|
||||
{
|
||||
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
|
||||
'default delete do double else enum export extends false final finally float ' +
|
||||
'for function goto if implements import in instanceof int interface long native ' +
|
||||
'new null package private protected public return short static super switch ' +
|
||||
'synchronized this throw throws transient true try typeof var void volatile while with';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
|
||||
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
|
||||
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
|
||||
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
|
||||
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
|
||||
];
|
||||
|
||||
this.CssClass = 'dp-c';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.JScript.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.JScript.Aliases = ['js', 'jscript', 'javascript'];
|
||||
|
||||
|
||||
dp.sh.Brushes.Php = function()
|
||||
{
|
||||
var keywords = 'and or xor __FILE__ __LINE__ array as break case ' +
|
||||
'cfunction class const continue declare default die do echo else ' +
|
||||
'elseif empty enddeclare endfor endforeach endif endswitch endwhile eval exit ' +
|
||||
'extends for foreach function global if include include_once isset list ' +
|
||||
'new old_function print require require_once return static switch unset use ' +
|
||||
'var while __FUNCTION__ __CLASS__';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
|
||||
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
|
||||
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
|
||||
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
|
||||
{ regex: new RegExp('\\$\\w+', 'g'), css: 'vars' }, // variables
|
||||
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keyword
|
||||
];
|
||||
|
||||
this.CssClass = 'dp-c';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.Php.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.Php.Aliases = ['php'];
|
||||
|
||||
|
||||
|
||||
dp.sh.Brushes.Xml = function()
|
||||
{
|
||||
this.CssClass = 'dp-xml';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.Xml.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.Xml.Aliases = ['xml', 'xhtml', 'xslt', 'html', 'xhtml'];
|
||||
|
||||
dp.sh.Brushes.Xml.prototype.ProcessRegexList = function()
|
||||
{
|
||||
function push(array, value)
|
||||
{
|
||||
array[array.length] = value;
|
||||
}
|
||||
|
||||
/* If only there was a way to get index of a group within a match, the whole XML
|
||||
could be matched with the expression looking something like that:
|
||||
|
||||
(<!\[CDATA\[\s*.*\s*\]\]>)
|
||||
| (<!--\s*.*\s*?-->)
|
||||
| (<)*(\w+)*\s*(\w+)\s*=\s*(".*?"|'.*?'|\w+)(/*>)*
|
||||
| (</?)(.*?)(/?>)
|
||||
*/
|
||||
var index = 0;
|
||||
var match = null;
|
||||
var regex = null;
|
||||
|
||||
// Match CDATA in the following format <![ ... [ ... ]]>
|
||||
// <\!\[[\w\s]*?\[(.|\s)*?\]\]>
|
||||
this.GetMatches(new RegExp('<\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\]>', 'gm'), 'cdata');
|
||||
|
||||
// Match comments
|
||||
// <!--\s*.*\s*?-->
|
||||
this.GetMatches(new RegExp('<!--\\s*.*\\s*?-->', 'gm'), 'comments');
|
||||
|
||||
// Match attributes and their values
|
||||
// (\w+)\s*=\s*(".*?"|\'.*?\'|\w+)*
|
||||
regex = new RegExp('([\\w-\.]+)\\s*=\\s*(".*?"|\'.*?\'|\\w+)*', 'gm');
|
||||
while((match = regex.exec(this.code)) != null)
|
||||
{
|
||||
push(this.matches, new dp.sh.Match(match[1], match.index, 'attribute'));
|
||||
|
||||
// if xml is invalid and attribute has no property value, ignore it
|
||||
if(match[2] != undefined)
|
||||
{
|
||||
push(this.matches, new dp.sh.Match(match[2], match.index + match[0].indexOf(match[2]), 'attribute-value'));
|
||||
}
|
||||
}
|
||||
|
||||
// Match opening and closing tag brackets
|
||||
// </*\?*(?!\!)|/*\?*>
|
||||
this.GetMatches(new RegExp('</*\\?*(?!\\!)|/*\\?*>', 'gm'), 'tag');
|
||||
|
||||
// Match tag names
|
||||
// </*\?*\s*(\w+)
|
||||
regex = new RegExp('</*\\?*\\s*([\\w-\.]+)', 'gm');
|
||||
while((match = regex.exec(this.code)) != null)
|
||||
{
|
||||
push(this.matches, new dp.sh.Match(match[1], match.index + match[0].indexOf(match[1]), 'tag-name'));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dp.sh.Brushes.CSS = function()
|
||||
{
|
||||
var keywords = 'link over active visited';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
|
||||
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
|
||||
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
|
||||
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
|
||||
];
|
||||
|
||||
this.CssClass = 'dp-c';
|
||||
}
|
||||
|
||||
dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
|
||||
dp.sh.Brushes.CSS.Aliases = ['css'];
|
||||
150
www/extras/yui/examples/treeview/assets/js/json.js
vendored
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
/*
|
||||
Copyright (c) 2005 JSON.org
|
||||
|
||||
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:
|
||||
|
||||
The Software shall be used for Good, not Evil.
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
/*
|
||||
The global object JSON contains two methods.
|
||||
|
||||
JSON.stringify(value) takes a JavaScript value and produces a JSON text.
|
||||
The value must not be cyclical.
|
||||
|
||||
JSON.parse(text) takes a JSON text and produces a JavaScript value. It will
|
||||
throw a 'JSONError' exception if there is an error.
|
||||
*/
|
||||
var JSON = {
|
||||
copyright: '(c)2005 JSON.org',
|
||||
license: 'http://www.crockford.com/JSON/license.html',
|
||||
/*
|
||||
Stringify a JavaScript value, producing a JSON text.
|
||||
*/
|
||||
stringify: function (v) {
|
||||
var a = [];
|
||||
|
||||
/*
|
||||
Emit a string.
|
||||
*/
|
||||
function e(s) {
|
||||
a[a.length] = s;
|
||||
}
|
||||
|
||||
/*
|
||||
Convert a value.
|
||||
*/
|
||||
function g(x) {
|
||||
var c, i, l, v;
|
||||
|
||||
switch (typeof x) {
|
||||
case 'object':
|
||||
if (x) {
|
||||
if (x instanceof Array) {
|
||||
e('[');
|
||||
l = a.length;
|
||||
for (i = 0; i < x.length; i += 1) {
|
||||
v = x[i];
|
||||
if (typeof v != 'undefined' &&
|
||||
typeof v != 'function') {
|
||||
if (l < a.length) {
|
||||
e(',');
|
||||
}
|
||||
g(v);
|
||||
}
|
||||
}
|
||||
e(']');
|
||||
return;
|
||||
} else if (typeof x.valueOf == 'function') {
|
||||
e('{');
|
||||
l = a.length;
|
||||
for (i in x) {
|
||||
v = x[i];
|
||||
if (typeof v != 'undefined' &&
|
||||
typeof v != 'function' &&
|
||||
(!v || typeof v != 'object' ||
|
||||
typeof v.valueOf == 'function')) {
|
||||
if (l < a.length) {
|
||||
e(',');
|
||||
}
|
||||
g(i);
|
||||
e(':');
|
||||
g(v);
|
||||
}
|
||||
}
|
||||
return e('}');
|
||||
}
|
||||
}
|
||||
e('null');
|
||||
return;
|
||||
case 'number':
|
||||
e(isFinite(x) ? +x : 'null');
|
||||
return;
|
||||
case 'string':
|
||||
l = x.length;
|
||||
e('"');
|
||||
for (i = 0; i < l; i += 1) {
|
||||
c = x.charAt(i);
|
||||
if (c >= ' ') {
|
||||
if (c == '\\' || c == '"') {
|
||||
e('\\');
|
||||
}
|
||||
e(c);
|
||||
} else {
|
||||
switch (c) {
|
||||
case '\b':
|
||||
e('\\b');
|
||||
break;
|
||||
case '\f':
|
||||
e('\\f');
|
||||
break;
|
||||
case '\n':
|
||||
e('\\n');
|
||||
break;
|
||||
case '\r':
|
||||
e('\\r');
|
||||
break;
|
||||
case '\t':
|
||||
e('\\t');
|
||||
break;
|
||||
default:
|
||||
c = c.charCodeAt();
|
||||
e('\\u00' + Math.floor(c / 16).toString(16) +
|
||||
(c % 16).toString(16));
|
||||
}
|
||||
}
|
||||
}
|
||||
e('"');
|
||||
return;
|
||||
case 'boolean':
|
||||
e(String(x));
|
||||
return;
|
||||
default:
|
||||
e('null');
|
||||
return;
|
||||
}
|
||||
}
|
||||
g(v);
|
||||
return a.join('');
|
||||
},
|
||||
/*
|
||||
Parse a JSON text, producing a JavaScript value.
|
||||
*/
|
||||
parse: function (text) {
|
||||
return (/^(\s+|[,:{}\[\]]|"(\\["\\\/bfnrtu]|[^\x00-\x1f"\\]+)*"|-?\d+(\.\d*)?([eE][+-]?\d+)?|true|false|null)+$/.test(text)) &&
|
||||
eval('(' + text + ')');
|
||||
}
|
||||
};
|
||||
34
www/extras/yui/examples/treeview/assets/js/key.js
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Key = new function() {
|
||||
// this.logger = new ygLogger("ygEventUtil");
|
||||
// DOM key constants
|
||||
this.DOM_VK_UNDEFINED = 0x0;
|
||||
this.DOM_VK_RIGHT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_CONTROL = 0x11;
|
||||
this.DOM_VK_RIGHT_CONTROL = 0x11;
|
||||
this.DOM_VK_LEFT_SHIFT = 0x10;
|
||||
this.DOM_VK_RIGHT_SHIFT = 0x10;
|
||||
this.DOM_VK_META = 0x9D;
|
||||
this.DOM_VK_BACK_SPACE = 0x08;
|
||||
this.DOM_VK_CAPS_LOCK = 0x14;
|
||||
this.DOM_VK_DELETE = 0x7F;
|
||||
this.DOM_VK_END = 0x23;
|
||||
this.DOM_VK_ENTER = 0x0D;
|
||||
this.DOM_VK_ESCAPE = 0x1B;
|
||||
this.DOM_VK_HOME = 0x24;
|
||||
this.DOM_VK_NUM_LOCK = 0x90;
|
||||
this.DOM_VK_PAUSE = 0x13;
|
||||
this.DOM_VK_PRINTSCREEN = 0x9A;
|
||||
this.DOM_VK_SCROLL_LOCK = 0x91;
|
||||
this.DOM_VK_SPACE = 0x20;
|
||||
this.DOM_VK_TAB = 0x09;
|
||||
this.DOM_VK_LEFT = 0x25;
|
||||
this.DOM_VK_RIGHT = 0x27;
|
||||
this.DOM_VK_UP = 0x26;
|
||||
this.DOM_VK_DOWN = 0x28;
|
||||
this.DOM_VK_PAGE_DOWN = 0x22;
|
||||
this.DOM_VK_PAGE_UP = 0x21;
|
||||
};
|
||||
|
||||
15
www/extras/yui/examples/treeview/assets/js/log.js
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// Adapter for YAHOO.widget.Logger
|
||||
|
||||
var ygLogger = function(module) {
|
||||
return new YAHOO.widget.LogWriter(module);
|
||||
};
|
||||
|
||||
YAHOO.widget.LogWriter.prototype.debug = function() {
|
||||
this.log.apply(this, arguments);
|
||||
};
|
||||
|
||||
ygLogger.init = function(div) {
|
||||
new YAHOO.widget.LogReader(div, {
|
||||
height: "400px"
|
||||
});
|
||||
};
|
||||
25
www/extras/yui/examples/treeview/assets/ysuggest_proxy.php
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<?php
|
||||
/* yadl_spaceid - Skip Stamping */
|
||||
// Yahoo! Search proxy
|
||||
|
||||
// Hard-code hostname and path:
|
||||
define ('PATH', 'http://search.yahooapis.com/WebSearchService/V1/relatedSuggestion?appid=YahooDemo&output=json&query=');
|
||||
|
||||
$type = "application/json";
|
||||
$query = urlencode($_GET["query"]);
|
||||
$url = PATH.$query;
|
||||
|
||||
// Open the Curl session
|
||||
$session = curl_init($url);
|
||||
|
||||
// Don't return HTTP headers. Do return the contents of the call
|
||||
curl_setopt($session, CURLOPT_HEADER, false);
|
||||
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
|
||||
|
||||
// Make the call
|
||||
$response = curl_exec($session);
|
||||
|
||||
header("Content-Type: ".$type);
|
||||
echo $response;
|
||||
curl_close($session);
|
||||
?>
|
||||
298
www/extras/yui/examples/treeview/customicons.html
Normal file
113
www/extras/yui/examples/treeview/customicons_clean.html
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Using TreeView with Custom Icons</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<!--Bring in the folder-style TreeView CSS:-->
|
||||
<link rel="stylesheet" type="text/css" href="../treeview/assets/css/folders/tree.css"></link>
|
||||
|
||||
<!--Additional custom style rules for this example:-->
|
||||
<style type="text/css">
|
||||
#treewrapper {background: #fff; position:relative;}
|
||||
#treediv {position:relative; width:250px; background: #fff; padding:1em;}
|
||||
.icon-ppt { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 0px no-repeat; }
|
||||
.icon-dmg { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -36px no-repeat; }
|
||||
.icon-prv { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -72px no-repeat; }
|
||||
.icon-gen { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -108px no-repeat; }
|
||||
.icon-doc { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -144px no-repeat; }
|
||||
.icon-jar { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -180px no-repeat; }
|
||||
.icon-zip { display:block; height: 22px; padding-left: 20px; background: transparent url(../treeview/assets/img/icons.png) 0 -216px no-repeat; }
|
||||
.htmlnodelabel { margin-left: 20px; }
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using TreeView with Custom Icons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates the use of custom icon styles on <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a> nodes through the use of a image sprite. Read the tutorial below the example for full details on how to achieve this effect.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="treewrapper">
|
||||
<div id="treediv"> </div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//Wrap our initialization code in an anonymous function
|
||||
//to keep out of the global namespace:
|
||||
(function(){
|
||||
var init = function() {
|
||||
|
||||
//create the TreeView instance:
|
||||
var tree = new YAHOO.widget.TreeView("treediv");
|
||||
|
||||
//get a reusable reference to the root node:
|
||||
var root = tree.getRoot();
|
||||
|
||||
//for Ahmed's documents, we'll use TextNodes.
|
||||
//First, create a parent node for his documents:
|
||||
var ahmedDocs = new YAHOO.widget.TextNode("Ahmed's Documents", root, true);
|
||||
//Create a child node for his Word document:
|
||||
var ahmedMsWord = new YAHOO.widget.TextNode("Prospectus", ahmedDocs, false);
|
||||
//Now, apply the "icon-doc" style to this node's
|
||||
//label:
|
||||
ahmedMsWord.labelStyle = "icon-doc";
|
||||
var ahmedPpt = new YAHOO.widget.TextNode("Presentation", ahmedDocs, false);
|
||||
ahmedPpt.labelStyle = "icon-ppt";
|
||||
var ahmedPdf = new YAHOO.widget.TextNode("Prospectus-PDF version", ahmedDocs, false);
|
||||
ahmedPdf.labelStyle = "icon-prv";
|
||||
|
||||
//for Susheela's documents, we'll use HTMLNodes.
|
||||
//First, create a parent node for her documents:
|
||||
var sushDocs = new YAHOO.widget.TextNode("Susheela's Documents", root, true);
|
||||
//Create a child node for her zipped files:
|
||||
var sushZip = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Zipped Files</span>", sushDocs, false, true);
|
||||
//Now, apply the "icon-zip" style to this HTML node's
|
||||
//content:
|
||||
sushZip.contentStyle = "icon-zip";
|
||||
var sushDmg = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Files -- .dmg version</span>", sushDocs, false, true);
|
||||
sushDmg.contentStyle = "icon-dmg";
|
||||
var sushGen = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">Script -- text version</span>", sushDocs, false, true);
|
||||
sushGen.contentStyle = "icon-gen";
|
||||
var sushJar = new YAHOO.widget.HTMLNode("<span class=\"htmlnodelabel\">JAR file</span>", sushDocs, false, true);
|
||||
sushJar.contentStyle = "icon-jar";
|
||||
|
||||
tree.draw();
|
||||
}
|
||||
//Add an onDOMReady handler to build the tree when the document is ready
|
||||
YAHOO.util.Event.onDOMReady(init);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
302
www/extras/yui/examples/treeview/customicons_log.html
Normal file
314
www/extras/yui/examples/treeview/default_tree.html
Normal file
115
www/extras/yui/examples/treeview/default_tree_clean.html
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Default TreeView</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style>
|
||||
#treeDiv1 {background: #fff; padding:1em;}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Default TreeView</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>In this simple example you see the default presentation for the <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a>. Click on labels or on the expand/collapse icons for each node to interact with the TreeView Control.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
//global variable to allow console inspection of tree:
|
||||
var tree;
|
||||
|
||||
//anonymous function wraps the remainder of the logic:
|
||||
(function() {
|
||||
|
||||
//function to initialize the tree:
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
}
|
||||
|
||||
//Function creates the tree and
|
||||
//builds between 3 and 7 children of the root node:
|
||||
function buildRandomTextNodeTree() {
|
||||
|
||||
//instantiate the tree:
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
|
||||
// tmpNode.collapse();
|
||||
// tmpNode.expand();
|
||||
// buildRandomTextBranch(tmpNode);
|
||||
buildLargeBranch(tmpNode);
|
||||
}
|
||||
|
||||
// Expand and collapse happen prior to the actual expand/collapse,
|
||||
// and can be used to cancel the operation
|
||||
tree.subscribe("expand", function(node) {
|
||||
YAHOO.log(node.index + " was expanded", "info", "example");
|
||||
// return false; // return false to cancel the expand
|
||||
});
|
||||
|
||||
tree.subscribe("collapse", function(node) {
|
||||
YAHOO.log(node.index + " was collapsed", "info", "example");
|
||||
});
|
||||
|
||||
// Trees with TextNodes will fire an event for when the label is clicked:
|
||||
tree.subscribe("labelClick", function(node) {
|
||||
YAHOO.log(node.index + " label was clicked", "info", "example");
|
||||
});
|
||||
|
||||
//The tree is not created in the DOM until this method is called:
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
//function builds 10 children for the node you pass in:
|
||||
function buildLargeBranch(node) {
|
||||
if (node.depth < 10) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
|
||||
for ( var i = 0; i < 10; i++ ) {
|
||||
new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Add an onDOMReady handler to build the tree when the document is ready
|
||||
YAHOO.util.Event.onDOMReady(treeInit);
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
318
www/extras/yui/examples/treeview/default_tree_log.html
Normal file
471
www/extras/yui/examples/treeview/dynamic_tree.html
Normal file
218
www/extras/yui/examples/treeview/dynamic_tree_clean.html
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Dynamically Loading Node Data</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style>
|
||||
#treeDiv1 {background: #fff; margin-top:1em; padding:1em; min-height:7em;}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Dynamically Loading Node Data</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>In many cases, you'll want to avoid rendering your <a
|
||||
href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a> with a
|
||||
full dataset. Rather, you'll want to load all visible nodes immediately and
|
||||
then retrieve data only when needed for nodes that aren't visible when the
|
||||
control is first loaded. This example shows you how to do that.</p>
|
||||
|
||||
<p>In the TreeView instance below, we've loaded all "top-level" nodes into the
|
||||
page as soon as the page loads; these nodes contain the names of many Indian
|
||||
states. When a node is expanded, we use <a
|
||||
href="http://developer.yahoo.com/yui/connection/">Connection Manager</a> to
|
||||
access <a
|
||||
href="http://developer.yahoo.com/search/web/V1/relatedSuggestion.html">a Yahoo!
|
||||
Search web service that will return a list of "related suggestions."</a> So
|
||||
when the page loads, we know nothing about our top-level nodes' children. And
|
||||
while the resulting TreeView instance could grow quite large through user
|
||||
interaction, we need only load a very light set of nodes to begin with.
|
||||
</p>
|
||||
|
||||
<p>This example also shows the two label styles for childless nodes. The first
|
||||
(default) style maintains the expand/collapse icon style even when the node has
|
||||
no children; the second style shows childless nodes as leaf nodes with no
|
||||
expand/collapse icon. Note: this is for dynamically loaded nodes after the
|
||||
dynamic load process has produced zero children. You can also force the leaf
|
||||
node presentation for any node by setting the isLeaf property to true (this
|
||||
also disables dynamic loading).</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Childless Node Style:</h3>
|
||||
<dd><label for="mode0"><input type="radio" id="mode0" name="mode" value ="0" checked />
|
||||
Expand/Collapse</label>
|
||||
</dd>
|
||||
<dd><label for="mode1"><input type="radio" id="mode1" name="mode" value ="1" /> Leaf Node</label></dd>
|
||||
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.treeExample = function() {
|
||||
|
||||
var tree, currentIconMode;
|
||||
|
||||
function changeIconMode() {
|
||||
var newVal = parseInt(this.value);
|
||||
if (newVal != currentIconMode) {
|
||||
currentIconMode = newVal;
|
||||
}
|
||||
buildTree();
|
||||
}
|
||||
|
||||
function loadNodeData(node, fnLoadComplete) {
|
||||
|
||||
//We'll load node data based on what we get back when we
|
||||
//use Connection Manager topass the text label of the
|
||||
//expanding node to the Yahoo!
|
||||
//Search "related suggestions" API. Here, we're at the
|
||||
//first part of the request -- we'll make the request to the
|
||||
//server. In our success handler, we'll build our new children
|
||||
//and then return fnLoadComplete back to the tree.
|
||||
|
||||
//Get the node's label and urlencode it; this is the word/s
|
||||
//on which we'll search for related words:
|
||||
var nodeLabel = encodeURI(node.label);
|
||||
|
||||
//prepare URL for XHR request:
|
||||
var sUrl = "assets/ysuggest_proxy.php?query=" + nodeLabel;
|
||||
|
||||
//prepare our callback object
|
||||
var callback = {
|
||||
|
||||
//if our XHR call is successful, we want to make use
|
||||
//of the returned data and create child nodes.
|
||||
success: function(oResponse) {
|
||||
YAHOO.log("XHR transaction was successful.", "info", "example");
|
||||
//YAHOO.log(oResponse.responseText);
|
||||
var oResults = eval("(" + oResponse.responseText + ")");
|
||||
if((oResults.ResultSet.Result) && (oResults.ResultSet.Result.length)) {
|
||||
//Result is an array if more than one result, string otherwise
|
||||
if(YAHOO.lang.isArray(oResults.ResultSet.Result)) {
|
||||
for (var i=0, j=oResults.ResultSet.Result.length; i<j; i++) {
|
||||
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result[i], node, false);
|
||||
}
|
||||
} else {
|
||||
//there is only one result; comes as string:
|
||||
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result, node, false)
|
||||
}
|
||||
}
|
||||
|
||||
//When we're done creating child nodes, we execute the node's
|
||||
//loadComplete callback method which comes in via the argument
|
||||
//in the response object (we could also access it at node.loadComplete,
|
||||
//if necessary):
|
||||
oResponse.argument.fnLoadComplete();
|
||||
},
|
||||
|
||||
//if our XHR call is not successful, we want to
|
||||
//fire the TreeView callback and let the Tree
|
||||
//proceed with its business.
|
||||
failure: function(oResponse) {
|
||||
YAHOO.log("Failed to process XHR transaction.", "info", "example");
|
||||
oResponse.argument.fnLoadComplete();
|
||||
},
|
||||
|
||||
//our handlers for the XHR response will need the same
|
||||
//argument information we got to loadNodeData, so
|
||||
//we'll pass those along:
|
||||
argument: {
|
||||
"node": node,
|
||||
"fnLoadComplete": fnLoadComplete
|
||||
},
|
||||
|
||||
//timeout -- if more than 7 seconds go by, we'll abort
|
||||
//the transaction and assume there are no children:
|
||||
timeout: 7000
|
||||
};
|
||||
|
||||
//With our callback object ready, it's now time to
|
||||
//make our XHR call using Connection Manager's
|
||||
//asyncRequest method:
|
||||
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
|
||||
}
|
||||
|
||||
function buildTree() {
|
||||
//create a new tree:
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
//turn dynamic loading on for entire tree:
|
||||
tree.setDynamicLoad(loadNodeData, currentIconMode);
|
||||
|
||||
//get root node for tree:
|
||||
var root = tree.getRoot();
|
||||
|
||||
//add child nodes for tree; our top level nodes are
|
||||
//all the states in India:
|
||||
var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka"/* we're only using the first half of this list, to keep the tree smaller,"Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"*/];
|
||||
|
||||
for (var i=0, j=aStates.length; i<j; i++) {
|
||||
var tempNode = new YAHOO.widget.TextNode(aStates[i], root, false);
|
||||
}
|
||||
|
||||
// Use the isLeaf property to force the leaf node presentation for a given node.
|
||||
// This disables dynamic loading for the node.
|
||||
var tempNode = new YAHOO.widget.TextNode('This is a leaf node', root, false);
|
||||
tempNode.isLeaf = true;
|
||||
|
||||
//render tree with these toplevel nodes; all descendants of these nodes
|
||||
//will be generated as needed by the dynamic loader.
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
|
||||
var el = document.getElementById("mode1");
|
||||
if (el && el.checked) {
|
||||
currentIconMode = parseInt(el.value);
|
||||
} else {
|
||||
currentIconMode = 0;
|
||||
}
|
||||
|
||||
buildTree();
|
||||
}
|
||||
|
||||
}
|
||||
} ();
|
||||
|
||||
//once the DOM has loaded, we can go ahead and set up our tree:
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
475
www/extras/yui/examples/treeview/dynamic_tree_log.html
Normal file
329
www/extras/yui/examples/treeview/folder_style.html
Normal file
130
www/extras/yui/examples/treeview/folder_style_clean.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Folder-Style TreeView Design</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<!--bring in the folder-style CSS for the TreeView Control-->
|
||||
<link rel="stylesheet" type="text/css" href="../treeview/assets/css/folders/tree.css">
|
||||
|
||||
<!-- Some custom style for the expand/contract section-->
|
||||
<style>
|
||||
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
|
||||
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Folder-Style TreeView Design</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates how you can transform the look of your <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a> simply by changing the CSS rules on the page. Here, the TreeView instance has a "folder style" applied to it such that branch nodes appear as open or closed folders depending on their expand/collapse state.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- markup for expand/contract links -->
|
||||
<div id="expandcontractdiv">
|
||||
<a id="expand" href="#">Expand all</a>
|
||||
<a id="collapse" href="#">Collapse all</a>
|
||||
</div>
|
||||
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//an anonymous function wraps our code to keep our variables
|
||||
//in function scope rather than in the global namespace:
|
||||
(function() {
|
||||
var tree; //will hold our TreeView instance
|
||||
|
||||
function treeInit() {
|
||||
|
||||
YAHOO.log("Example's treeInit function firing.", "info", "example");
|
||||
|
||||
//Hand off ot a method that randomly generates tree nodes:
|
||||
buildRandomTextNodeTree();
|
||||
|
||||
//handler for expanding all nodes
|
||||
YAHOO.util.Event.on("expand", "click", function(e) {
|
||||
YAHOO.log("Expanding all TreeView nodes.", "info", "example");
|
||||
tree.expandAll();
|
||||
YAHOO.util.Event.preventDefault(e);
|
||||
});
|
||||
|
||||
//handler for collapsing all nodes
|
||||
YAHOO.util.Event.on("collapse", "click", function(e) {
|
||||
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
|
||||
tree.collapseAll();
|
||||
YAHOO.util.Event.preventDefault(e);
|
||||
});
|
||||
}
|
||||
|
||||
//This method will build a TreeView instance and populate it with
|
||||
//between 3 and 7 top-level nodes
|
||||
function buildRandomTextNodeTree() {
|
||||
|
||||
//instantiate the tree:
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
//create top-level nodes
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
|
||||
|
||||
//we'll delegate to another function to build child nodes:
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
|
||||
//once it's all built out, we need to render
|
||||
//our TreeView instance:
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
//This function adds a random number <4 of child nodes to a given
|
||||
//node, stopping at a specific node depth:
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 6) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
|
||||
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//When the DOM is done loading, we can initialize our TreeView
|
||||
//instance:
|
||||
YAHOO.util.Event.onDOMReady(treeInit);
|
||||
|
||||
})();//anonymous function wrapper closed; () notation executes function
|
||||
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
333
www/extras/yui/examples/treeview/folder_style_log.html
Normal file
95
www/extras/yui/examples/treeview/index.html
Normal file
314
www/extras/yui/examples/treeview/menu_style.html
Normal file
123
www/extras/yui/examples/treeview/menu_style_clean.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Menu-Style TreeView Design</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<!--bring in the folder-style CSS for the TreeView Control-->
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/treeview-menu.css" />
|
||||
|
||||
<!-- Some custom style for the expand/contract section-->
|
||||
<style>
|
||||
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
|
||||
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Menu-Style TreeView Design</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>As with the Folder Style example, here we're using CSS to control the styling of our <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a>'s node icons. The CSS and image assets for the Menu Style are available as part of the YUI download package.</p>
|
||||
|
||||
<p>This example also implements <code>MenuNode</code> instead of <code>TextNode</code> for node creation. Only one <code>MenuNode</code> can be open at a given depth at the same time. This creates an interaction in which nodes close up behind you as you open new ones, keeping the vertical size of the TreeView more compact during navigation.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- markup for expand/contract links -->
|
||||
<div id="expandcontractdiv">
|
||||
<a id="collapse" href="#">Collapse all</a>
|
||||
</div>
|
||||
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//an anonymous function wraps our code to keep our variables
|
||||
//in function scope rather than in the global namespace:
|
||||
(function() {
|
||||
var tree; //will hold our TreeView instance
|
||||
|
||||
function treeInit() {
|
||||
|
||||
YAHOO.log("Example's treeInit function firing.", "info", "example");
|
||||
|
||||
//Hand off ot a method that randomly generates tree nodes:
|
||||
buildRandomTextNodeTree();
|
||||
|
||||
//handler for collapsing all nodes
|
||||
YAHOO.util.Event.on("collapse", "click", function(e) {
|
||||
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
|
||||
tree.collapseAll();
|
||||
YAHOO.util.Event.preventDefault(e);
|
||||
});
|
||||
}
|
||||
|
||||
//This method will build a TreeView instance and populate it with
|
||||
//between 3 and 7 top-level nodes
|
||||
function buildRandomTextNodeTree() {
|
||||
|
||||
//instantiate the tree:
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
//create top-level nodes
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var tmpNode = new YAHOO.widget.MenuNode("label-" + i, tree.getRoot(), false);
|
||||
|
||||
//we'll delegate to another function to build child nodes:
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
|
||||
//once it's all built out, we need to render
|
||||
//our TreeView instance:
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
//This function adds a random number <4 of child nodes to a given
|
||||
//node, stopping at a specific node depth:
|
||||
function buildRandomTextBranch(node) {
|
||||
if (node.depth < 6) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index);
|
||||
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
|
||||
var tmpNode = new YAHOO.widget.MenuNode(node.label + "-" + i, node, false);
|
||||
buildRandomTextBranch(tmpNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//When the DOM is done loading, we can initialize our TreeView
|
||||
//instance:
|
||||
YAHOO.util.Event.onDOMReady(treeInit);
|
||||
|
||||
})();//anonymous function wrapper closed; () notation executes function
|
||||
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
318
www/extras/yui/examples/treeview/menu_style_log.html
Normal file
576
www/extras/yui/examples/treeview/tasklist.html
Normal file
284
www/extras/yui/examples/treeview/tv-edit.html
Normal file
109
www/extras/yui/examples/treeview/tv-edit_clean.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Inline Editing of TreeView Node Labels</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Inline Editing of TreeView Node Labels</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates label editing and keyboard navigation in the <a href="http://developer.yahoo.com/yui/treeview/">YUI TreeView Control</a>. As you interact with the TreeView instance below, you'll find that some nodes allow you to edit them — double-click on node labels to open the inline editor. This example also demonstrates how you can use arrow keys, +/- keys (expand/collapse), and the enter key to navigate and control the TreeView instance.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="treeView" style="background-color:white"></div>
|
||||
<div id="msg"> </div>
|
||||
<script type="text/javascript">
|
||||
|
||||
//global variable to allow console inspection of tree:
|
||||
var tree;
|
||||
|
||||
//anonymous function wraps the remainder of the logic:
|
||||
(function() {
|
||||
var treeInit = function() {
|
||||
tree = new YAHOO.widget.TreeView("treeView", [
|
||||
'Label 0',
|
||||
{type:'Text', label:'Label 1', editable:true},
|
||||
{type:'Text', label:'Branch 2', editable:true, expanded:true, children:[
|
||||
{type:'Text', label:'Branch 2-0', editable:true, children: [
|
||||
'Label 2-0-0',
|
||||
'Label 2-0-1'
|
||||
]},
|
||||
|
||||
{type:'Text', label:'Branch 2-1', editable:true, children: [
|
||||
'Label 2-1-0',
|
||||
'Label 2-1-1'
|
||||
]},
|
||||
]},
|
||||
{type:'Text',label:'YAHOO', href:'http://www.yahoo.com', target:'YAHOO\'s home page'},
|
||||
{type:'DateNode',label:'31.3.2001',editable:true, calendarConfig: {
|
||||
DATE_FIELD_DELIMITER:".",
|
||||
MDY_DAY_POSITION:1,
|
||||
MDY_MONTH_POSITION:2,
|
||||
MDY_YEAR_POSITION:3
|
||||
}},
|
||||
{type:'text',label:'Branch 3', editable:true, expanded:false, children:[
|
||||
'Label 3-0',
|
||||
'Label 3-1'
|
||||
]}
|
||||
]);
|
||||
tree.render();
|
||||
|
||||
tree.subscribe('dblClickEvent',tree.onEventEditNode);
|
||||
|
||||
tree.root.children[1].focus();
|
||||
|
||||
tree.subscribe('enterKeyPressed',function(node) {
|
||||
YAHOO.util.Dom.get('msg').innerHTML = 'Enter key pressed on node: ' + node.label;
|
||||
});
|
||||
tree.subscribe('clickEvent',function(oArgs) {
|
||||
YAHOO.util.Dom.get('msg').innerHTML = 'Click on node: ' + oArgs.node.label;
|
||||
});
|
||||
tree.subscribe('dblClickEvent',function(oArgs) {
|
||||
YAHOO.util.Dom.get('msg').innerHTML = 'Double click on node: ' + oArgs.node.label;
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
//Add an onDOMReady handler to build the tree when the document is ready
|
||||
YAHOO.util.Event.onDOMReady(treeInit);
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
317
www/extras/yui/examples/treeview/tv-markup.html
Normal file
129
www/extras/yui/examples/treeview/tv-markup_clean.html
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
.whitebg {
|
||||
background-color:white;
|
||||
}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>In this simple example you can see how to build <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a> instance from several different sources of data:</p>
|
||||
|
||||
<ol>
|
||||
<li>an HTML list on the page;</li>
|
||||
<li>an existing TreeView instance's definition;</li>
|
||||
<li>a branch of an existing TreeView instance (e.g., from one of its nodes).</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Tree from markup</h3>
|
||||
<div id="markup" class="whitebg">
|
||||
<ul>
|
||||
<li>List 0
|
||||
<ul>
|
||||
<li>List 0-0
|
||||
<ul>
|
||||
<li>item 0-0-0</li>
|
||||
<li>item 0-0-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>item 0-1
|
||||
<ul>
|
||||
<li><a target="_new" href="HTTP://developer.yahoo.com/yui" title="go to YUI Home Page">YUI</a>
|
||||
<ul>
|
||||
<li>item 0-1-0</li>
|
||||
<li>item 0-1-1</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr/>
|
||||
<h3>Copy of the tree above taken from its own definition</h3>
|
||||
<div id="treeDiv2" class="whitebg"></div>
|
||||
<hr/>
|
||||
<h3>Copy of the second branch of the tree at the top</h3>
|
||||
<div id="treeDiv3" class="whitebg"></div>
|
||||
<hr/>
|
||||
<h3>Tree built from a static definition</h3>
|
||||
<div id="treeDiv4" class="whitebg"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
//global variable to allow console inspection of tree:
|
||||
var tree1, tree2, tree3;
|
||||
|
||||
//anonymous function wraps the remainder of the logic:
|
||||
(function() {
|
||||
var treeInit = function() {
|
||||
tree1 = new YAHOO.widget.TreeView("markup");
|
||||
tree1.render();
|
||||
|
||||
tree2 = new YAHOO.widget.TreeView("treeDiv2",tree1.getTreeDefinition());
|
||||
tree2.render();
|
||||
|
||||
var branch = tree1.getRoot().children[1];
|
||||
tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition());
|
||||
tree3.render();
|
||||
|
||||
(new YAHOO.widget.TreeView("treeDiv4",[
|
||||
'Label 0',
|
||||
{type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'},
|
||||
{type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[
|
||||
'Label 1-0'
|
||||
]},
|
||||
{type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'},
|
||||
{type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'},
|
||||
{type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[
|
||||
'Label 3-0',
|
||||
'Label 3-1'
|
||||
]}
|
||||
])).render();
|
||||
};
|
||||
|
||||
//Add an onDOMReady handler to build the tree when the document is ready
|
||||
YAHOO.util.Event.onDOMReady(treeInit);
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
342
www/extras/yui/examples/treeview/tv_tooltip.html
Normal file
136
www/extras/yui/examples/treeview/tv_tooltip_clean.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>TreeView with Tooltips</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style>
|
||||
#treeDiv1 {background: #fff; padding:1em;}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>TreeView with Tooltips</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>In this example you see the default presentation for the <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a>. A single <a href="http://developer.yahoo.com/yui/container/tooltip/index.html">YAHOO.widget.Tooltip</a> instance is used to provide tooltips for all nodes.
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
//global variable to allow console inspection of tree:
|
||||
var tree;
|
||||
|
||||
//anonymous function wraps the remainder of the logic:
|
||||
(function() {
|
||||
|
||||
var tt, contextElements = [];
|
||||
|
||||
//function to initialize the tree:
|
||||
function treeInit() {
|
||||
buildRandomTextNodeTree();
|
||||
// Instantiate the single tooltip passing in the list of all of
|
||||
// the node label element ids
|
||||
tt = new YAHOO.widget.Tooltip("tt", {
|
||||
context: contextElements
|
||||
});
|
||||
}
|
||||
|
||||
//Function creates the tree and
|
||||
//builds between 3 and 7 children of the root node:
|
||||
function buildRandomTextNodeTree() {
|
||||
|
||||
//instantiate the tree:
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
var o = {
|
||||
label: "label-" + i,
|
||||
// Tooltip will use the title attribute
|
||||
title: "This is " + "label-" + i
|
||||
};
|
||||
var tmpNode = new YAHOO.widget.TextNode(o, tree.getRoot(), false);
|
||||
// save the element id for Tooltip
|
||||
contextElements.push(tmpNode.labelElId);
|
||||
|
||||
buildLargeBranch(tmpNode);
|
||||
}
|
||||
|
||||
// Expand and collapse happen prior to the actual expand/collapse,
|
||||
// and can be used to cancel the operation
|
||||
tree.subscribe("expand", function(node) {
|
||||
YAHOO.log(node.index + " was expanded", "info", "example");
|
||||
// return false; // return false to cancel the expand
|
||||
});
|
||||
|
||||
tree.subscribe("collapse", function(node) {
|
||||
YAHOO.log(node.index + " was collapsed", "info", "example");
|
||||
});
|
||||
|
||||
// Trees with TextNodes will fire an event for when the label is clicked:
|
||||
tree.subscribe("labelClick", function(node) {
|
||||
YAHOO.log(node.index + " label was clicked", "info", "example");
|
||||
});
|
||||
|
||||
//The tree is not created in the DOM until this method is called:
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
//function builds 10 children for the node you pass in:
|
||||
function buildLargeBranch(node) {
|
||||
if (node.depth < 10) {
|
||||
YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
|
||||
for ( var i = 0; i < 10; i++ ) {
|
||||
var o = {
|
||||
label: node.label + "-" + i,
|
||||
// Tooltip will use the title attribute
|
||||
title: "This is " + node.label + "-" + i
|
||||
};
|
||||
var tmpNode = new YAHOO.widget.TextNode(o, node, false);
|
||||
// save the element id for Tooltip
|
||||
contextElements.push(tmpNode.labelElId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Add an onDOMReady handler to build the tree when the document is ready
|
||||
YAHOO.util.Event.onDOMReady(treeInit);
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||