initial commit
This commit is contained in:
Wanderson Braganca
commit
a9dcb2c50a
26
.gitattributes
vendored
Normal file
26
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Autodetect text files
|
||||
* text=auto
|
||||
|
||||
# ...Unless the name matches the following overriding patterns
|
||||
|
||||
# Definitively text files
|
||||
*.php text
|
||||
*.css text
|
||||
*.js text
|
||||
*.txt text
|
||||
*.md text
|
||||
*.xml text
|
||||
*.json text
|
||||
*.bat text
|
||||
*.sql text
|
||||
*.xml text
|
||||
*.yml text
|
||||
|
||||
# Ensure those won't be messed up with
|
||||
*.png binary
|
||||
*.jpg binary
|
||||
*.gif binary
|
||||
*.ttf binary
|
||||
*.svg binary
|
||||
*.eot binary
|
||||
*.woff binary
|
||||
27
LICENSE
Normal file
27
LICENSE
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
Copyright (c) 2014, Wanderson Bragança
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification,
|
||||
are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this
|
||||
list of conditions and the following disclaimer in the documentation and/or
|
||||
other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the {organization} nor the names of its
|
||||
contributors may be used to endorse or promote products derived from
|
||||
this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
|
||||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
||||
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
64
README.md
Normal file
64
README.md
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
yii2-fancytree-widget
|
||||
=====================
|
||||
The yii2-fancytree-widget is a Yii 2 wrapper for the [Fancytree](http://wwwendt.de/tech/fancytree/demo/). A JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading.
|
||||
|
||||
Installation
|
||||
------------
|
||||
|
||||
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
|
||||
|
||||
Either run
|
||||
|
||||
```
|
||||
php composer.phar require --prefer-dist wbraganca/yii2-fancytree-widget "*"
|
||||
```
|
||||
|
||||
or add
|
||||
|
||||
```
|
||||
"wbraganca/yii2-fancytree-widget": "*"
|
||||
```
|
||||
|
||||
to the require section of your `composer.json` file.
|
||||
|
||||
|
||||
How to use
|
||||
----------
|
||||
|
||||
On your view file.
|
||||
|
||||
```php
|
||||
|
||||
<?php
|
||||
// Example of data.
|
||||
$data = [
|
||||
['title' => 'Node 1', 'key' => 1],
|
||||
['title' => 'Folder 2', 'key' => '2', 'folder' => true, 'children' => [
|
||||
['title' => 'Node 2.1', 'key' => '3'],
|
||||
['title' => 'Node 2.2', 'key' => '4']
|
||||
]]
|
||||
];
|
||||
|
||||
echo \wbraganca\fancytree\FancytreeWidget::widget([
|
||||
'options' =>[
|
||||
'source' => $data,
|
||||
'extensions' => ['dnd'],
|
||||
'dnd' => [
|
||||
'preventVoidMoves' => true,
|
||||
'preventRecursiveMoves' => true,
|
||||
'autoExpandMS' => 400,
|
||||
'dragStart' => new JsExpression('function(node, data) {
|
||||
return true;
|
||||
}'),
|
||||
'dragEnter' => new JsExpression('function(node, data) {
|
||||
return true;
|
||||
}'),
|
||||
'dragDrop' => new JsExpression('function(node, data) {
|
||||
data.otherNode.moveTo(node, data.hitMode);
|
||||
}'),
|
||||
],
|
||||
]
|
||||
]);
|
||||
?>
|
||||
|
||||
```
|
||||
21
assets/MIT-LICENSE.txt
Normal file
21
assets/MIT-LICENSE.txt
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
Copyright 2006-2014 Martin Wendt,
|
||||
http://wwWendt.de/
|
||||
|
||||
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 above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
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.
|
||||
6365
assets/jquery.fancytree-all.js
Normal file
6365
assets/jquery.fancytree-all.js
Normal file
File diff suppressed because it is too large
Load diff
41
assets/jquery.fancytree-custom.min.js
vendored
Normal file
41
assets/jquery.fancytree-custom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4070
assets/jquery.fancytree.js
Normal file
4070
assets/jquery.fancytree.js
Normal file
File diff suppressed because it is too large
Load diff
14
assets/jquery.fancytree.min.js
vendored
Normal file
14
assets/jquery.fancytree.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
311
assets/skin-awesome/ui.fancytree.css
Normal file
311
assets/skin-awesome/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
/*!
|
||||
* Fancytree "awesome" skin.
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0em 0em;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-position: 0em 0em;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url("loading.gif");
|
||||
}
|
||||
/* Status node icons */
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
/* Documents */
|
||||
/* Folders */
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 2em;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 4em;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0em 0em;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
ul.fancytree-container ul {
|
||||
padding: 0.3em 0 0 1em;
|
||||
margin: 0;
|
||||
}
|
||||
6
assets/skin-awesome/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-awesome/ui.fancytree.min.css
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/*!
|
||||
* Fancytree "awesome" skin.
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/.ui-helper-hidden{display:none}ul.fancytree-container{font-family:tahoma,arial,helvetica;font-size:10pt;white-space:nowrap;padding:3px;margin:0;background-color:#fff;border:1px dotted gray;overflow:auto;min-height:0;position:relative}ul.fancytree-container li{list-style-image:none;list-style-position:outside;list-style-type:none;-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat-y;background-image:none;margin:0;padding:1px 0 0}ul.fancytree-container li.fancytree-lastsib,ul.fancytree-no-connector>li{background-image:none}.ui-fancytree-disabled ul.fancytree-container{opacity:.5;background-color:silver}#fancytree-drop-marker,span.fancytree-checkbox,span.fancytree-drag-helper-img,span.fancytree-empty,span.fancytree-expander,span.fancytree-icon,span.fancytree-radio,span.fancytree-vline{width:1em;height:1em;display:inline-block;vertical-align:top;background-repeat:no-repeat;background-position:left;background-position:0 0}span.fancytree-checkbox,span.fancytree-custom-icon,span.fancytree-icon,span.fancytree-radio{margin-top:1px}span.fancytree-custom-icon{display:inline-block}img.fancytree-icon{width:1em;height:1em;margin-left:.5em;margin-top:1px;vertical-align:top;border-style:none}span.fancytree-expander{cursor:pointer}.fancytree-exp-n span.fancytree-expander,.fancytree-exp-nl span.fancytree-expander{background-image:none;cursor:default}.fancytree-loading span.fancytree-expander,.fancytree-loading span.fancytree-expander:hover,.fancytree-statusnode-wait span.fancytree-icon,.fancytree-statusnode-wait span.fancytree-icon:hover{background-image:url(loading.gif)}span.fancytree-checkbox,span.fancytree-icon{margin-left:.5em}span.fancytree-node{display:inherit;width:100%}span.fancytree-title{display:inline-block;padding-left:3px;padding-right:3px;color:#000;vertical-align:top;margin:0;margin-left:3px;cursor:pointer}span.fancytree-node.fancytree-error span.fancytree-title{color:red}div.fancytree-drag-helper a{border:1px solid gray;background-color:#fff;padding-left:5px;padding-right:5px;opacity:.8}div.fancytree-drag-helper.fancytree-drop-reject{border-color:red}#fancytree-drop-marker{width:2em;position:absolute;margin:0}#fancytree-drop-marker.fancytree-drop-after,#fancytree-drop-marker.fancytree-drop-before{width:4em}span.fancytree-drag-source{background-color:#e0e0e0}span.fancytree-drag-source span.fancytree.title{color:gray}span.fancytree-drop-target.fancytree-drop-accept a{background-color:#3169C6!important;color:#fff!important;text-decoration:none}table.fancytree-ext-table{border-collapse:collapse}table.fancytree-ext-table span.fancytree-node{display:inline-block}table.fancytree-ext-columnview tbody tr td{position:relative;border:1px solid gray;vertical-align:top;overflow:auto}table.fancytree-ext-columnview tbody tr td>ul{padding:0}table.fancytree-ext-columnview tbody tr td>ul li{list-style-image:none;list-style-position:outside;list-style-type:none;-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background-attachment:scroll;background-color:transparent;background-position:0 0;background-repeat:repeat-y;background-image:none;margin:0;padding:1px 0 0}table.fancytree-ext-columnview span.fancytree-node{position:relative;display:inline-block}table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded{background-color:#CBE8F6}table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right{position:absolute;right:3px}.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title{color:silver;font-weight:lighter}.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title,.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title{color:#000;font-weight:400}.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title,.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title{color:#000;font-weight:700}.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide,.fancytree-ext-filter-hide tr.fancytree-hide{display:none}.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title,.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title{color:silver;font-weight:lighter}.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title,.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title{color:#000;font-weight:400}ul.fancytree-ext-wide span.fancytree-node>span{position:relative;z-index:2}ul.fancytree-ext-wide span.fancytree-node span.fancytree-title{position:relative;z-index:1;width:100%;padding-left:503px;margin-left:-500px}ul.fancytree-container ul{padding:.3em 0 0 1em;margin:0}
|
||||
391
assets/skin-bootstrap/ui.fancytree.css
Normal file
391
assets/skin-bootstrap/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,391 @@
|
|||
/*!
|
||||
* Fancytree "bootstrap" skin (highlighting the node span instead of title-only).
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0em 0em;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-position: 0em 0em;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url("loading.gif");
|
||||
}
|
||||
/* Status node icons */
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
/* Documents */
|
||||
/* Folders */
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 2em;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 4em;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0em 0em;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
/* Prevent focus frame */
|
||||
.fancytree-container:focus {
|
||||
outline: none;
|
||||
}
|
||||
span.fancytree-node {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
span.fancytree-title {
|
||||
border-radius: 3px;
|
||||
}
|
||||
span.fancytree-node.fancytree-selected {
|
||||
background-color: #80c780;
|
||||
border-color: #80c780;
|
||||
}
|
||||
span.fancytree-node.fancytree-selected span.fancytree-title {
|
||||
background-color: #80c780;
|
||||
}
|
||||
span.fancytree-node.fancytree-active {
|
||||
background-color: #6aa3d5;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node:hover {
|
||||
background-color: #e9f2f9;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-focused {
|
||||
border-color: #428bca;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-selected {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-selected span.fancytree-title {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active {
|
||||
background-color: #428bca;
|
||||
border-color: #428bca;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
table.fancytree-ext-table tbody tr td {
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected {
|
||||
background-color: #80c780;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected span.fancytree-node {
|
||||
background-color: #80c780;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected span.fancytree-title {
|
||||
background-color: #80c780;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active {
|
||||
background-color: #6aa3d5;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active span.fancytree-node {
|
||||
background-color: #6aa3d5;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr:hover {
|
||||
background-color: #e9f2f9;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-focused span.fancytree-title {
|
||||
outline: 1px dotted #428bca;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected span.fancytree-node {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected span.fancytree-title {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active {
|
||||
background-color: #428bca;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active span.fancytree-node {
|
||||
background-color: #428bca;
|
||||
}
|
||||
6
assets/skin-bootstrap/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-bootstrap/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-lion/icons.gif
Normal file
BIN
assets/skin-lion/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
assets/skin-lion/loading.gif
Normal file
BIN
assets/skin-lion/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
501
assets/skin-lion/ui.fancytree.css
Normal file
501
assets/skin-lion/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,501 @@
|
|||
/*!
|
||||
* Fancytree "Lion" skin.
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*
|
||||
Lion colors:
|
||||
gray highlight bar: #D4D4D4
|
||||
blue highlight-bar and -border #3875D7
|
||||
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-image: url("icons.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 3px;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-n span.fancytree-expander:hover {
|
||||
background-position: 0px -64px;
|
||||
}
|
||||
.fancytree-exp-nl span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander:hover {
|
||||
background-position: -16px -64px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander {
|
||||
background-position: 0px -96px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander:hover {
|
||||
background-position: -16px -96px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander {
|
||||
background-position: -64px -80px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander:hover {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander {
|
||||
background-position: -64px -96px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander:hover {
|
||||
background-position: -80px -96px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander,
|
||||
.fancytree-exp-ed span.fancytree-expander {
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander:hover,
|
||||
.fancytree-exp-ed span.fancytree-expander:hover {
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander,
|
||||
.fancytree-exp-edl span.fancytree-expander {
|
||||
background-position: -32px -96px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander:hover,
|
||||
.fancytree-exp-edl span.fancytree-expander:hover {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url("loading.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Status node icons */
|
||||
.fancytree-statusnode-error span.fancytree-icon {
|
||||
background-position: 0px -112px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 3px;
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
span.fancytree-checkbox:hover {
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-radio span.fancytree-checkbox {
|
||||
background-position: 0px -48px;
|
||||
}
|
||||
.fancytree-radio span.fancytree-checkbox:hover {
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 3px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:hover {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
/* Folders */
|
||||
.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
div.fancytree-drop-accept span.fancytree-drag-helper-img {
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
div.fancytree-drop-reject span.fancytree-drag-helper-img {
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
background-position: 0px -128px;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 64px;
|
||||
background-position: 0px -144px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-copy {
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-move {
|
||||
background-position: -32px -128px;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
/*******************************************************************************
|
||||
* Node titles
|
||||
*/
|
||||
span.fancytree-title {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
span.fancytree-focused span.fancytree-title {
|
||||
outline: 1px dotted black;
|
||||
}
|
||||
span.fancytree-selected span.fancytree-title,
|
||||
span.fancytree-active span.fancytree-title {
|
||||
background-color: #D4D4D4;
|
||||
}
|
||||
span.fancytree-selected span.fancytree-title {
|
||||
font-style: italic;
|
||||
}
|
||||
.fancytree-treefocus span.fancytree-selected span.fancytree-title,
|
||||
.fancytree-treefocus span.fancytree-active span.fancytree-title {
|
||||
color: white;
|
||||
background-color: #3875D7;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-focused {
|
||||
background-color: #99DEFD;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active {
|
||||
background-color: royalblue;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected {
|
||||
background-color: #99DEFD;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'columnview' extension
|
||||
*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #ccc;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
|
||||
background-color: royalblue;
|
||||
}
|
||||
6
assets/skin-lion/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-lion/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-themeroller/icons.gif
Normal file
BIN
assets/skin-themeroller/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
assets/skin-themeroller/loading.gif
Normal file
BIN
assets/skin-themeroller/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
505
assets/skin-themeroller/ui.fancytree.css
Normal file
505
assets/skin-themeroller/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,505 @@
|
|||
/*
|
||||
* Fancytree for use with ext-themeroller extension.
|
||||
*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fancytree-container
|
||||
{
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0; /* issue 201 */
|
||||
overflow: auto;
|
||||
/* height: 100%; /* issue 263 */
|
||||
/*
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
*/
|
||||
}
|
||||
|
||||
ul.fancytree-container ul
|
||||
{
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.fancytree-container li
|
||||
{
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip:border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none; /* no v-lines */
|
||||
|
||||
margin:0;
|
||||
padding:1px 0 0 0;
|
||||
}
|
||||
/* Suppress lines for last child node */
|
||||
ul.fancytree-container li.fancytree-lastsib
|
||||
{
|
||||
background-image: none;
|
||||
}
|
||||
/* Suppress lines if level is fixed expanded (option minExpandLevel) */
|
||||
ul.fancytree-no-connector > li
|
||||
{
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* Style, when control is disabled */
|
||||
/*
|
||||
.ui-fancytree-disabled ul.fancytree-container
|
||||
{
|
||||
opacity: 0.5;
|
||||
}
|
||||
*/
|
||||
|
||||
span.fancytree-node
|
||||
{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* Common icon definitions
|
||||
*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
/*span.fancytree-connector,*/
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker
|
||||
{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block; /* Required to make a span sizable */
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-image: url("icons.gif");
|
||||
background-position: 0 0;
|
||||
}
|
||||
/** Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/** Used by 'icon' node option: */
|
||||
.fancytree-container img
|
||||
{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 3px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Lines and connectors
|
||||
*/
|
||||
/* span.fancytree-connector
|
||||
{
|
||||
background-image: none;
|
||||
}
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Expander icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*/
|
||||
|
||||
span.fancytree-expander
|
||||
{
|
||||
background-position: 0px -80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-expander:hover
|
||||
{
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander:hover /* Collapsed, not delayed, not last sibling */
|
||||
{
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander /* Collapsed, not delayed, last sibling */
|
||||
{
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander /* Collapsed, delayed, not last sibling */
|
||||
{
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander /* Collapsed, delayed, last sibling */
|
||||
{
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander, /* Expanded, not delayed, not last sibling */
|
||||
.fancytree-exp-ed span.fancytree-expander, /* Expanded, delayed, not last sibling */
|
||||
.fancytree-exp-el span.fancytree-expander, /* Expanded, not delayed, last sibling */
|
||||
.fancytree-exp-edl span.fancytree-expander /* Expanded, delayed, last sibling */
|
||||
{
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander:hover, /* Expanded, not delayed, not last sibling */
|
||||
.fancytree-exp-ed span.fancytree-expander:hover, /* Expanded, delayed, not last sibling */
|
||||
.fancytree-exp-el span.fancytree-expander:hover, /* Expanded, not delayed, last sibling */
|
||||
.fancytree-exp-edl span.fancytree-expander:hover /* Expanded, delayed, last sibling */
|
||||
{
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander /* 'Loading' status overrides all others */
|
||||
{
|
||||
background-position: 0 0;
|
||||
background-image: url("loading.gif");
|
||||
}
|
||||
|
||||
.fancytree-exp-n span.fancytree-expander, /* Connector instead of expander, if node has no children */
|
||||
.fancytree-exp-nl span.fancytree-expander
|
||||
{
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Checkbox icon
|
||||
*/
|
||||
span.fancytree-checkbox
|
||||
{
|
||||
margin-left: 3px;
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
span.fancytree-checkbox:hover
|
||||
{
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
|
||||
.fancytree-partsel span.fancytree-checkbox
|
||||
{
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox:hover
|
||||
{
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
|
||||
.fancytree-selected span.fancytree-checkbox
|
||||
{
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox:hover
|
||||
{
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*/
|
||||
.fancytree-radio span.fancytree-checkbox
|
||||
{
|
||||
margin-left: 3px;
|
||||
background-position: 0px -48px;
|
||||
}
|
||||
.fancytree-radio span.fancytree-checkbox:hover
|
||||
{
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox
|
||||
{
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover
|
||||
{
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox
|
||||
{
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox:hover
|
||||
{
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*/
|
||||
|
||||
span.fancytree-icon /* Default icon */
|
||||
{
|
||||
margin-left: 3px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.fancytree-has-children span.fancytree-icon /* Default icon */
|
||||
{
|
||||
/* background-position: 0px -16px; */
|
||||
}
|
||||
|
||||
.fancytree-ico-cf span.fancytree-icon /* Collapsed Folder */
|
||||
{
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
|
||||
.fancytree-ico-ef span.fancytree-icon /* Expanded Folder */
|
||||
{
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
|
||||
/* Status node icons */
|
||||
|
||||
.fancytree-statusnode-wait span.fancytree-icon
|
||||
{
|
||||
background-image: url("loading.gif");
|
||||
}
|
||||
|
||||
.fancytree-statusnode-error span.fancytree-icon
|
||||
{
|
||||
background-position: 0px -112px;
|
||||
/* background-image: url("ltError.gif");*/
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* Node titles
|
||||
*/
|
||||
|
||||
span.fancytree-title
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.fancytree-title
|
||||
{
|
||||
display: inline-block; /* Better alignment, when title contains <br> */
|
||||
padding-left: 3px;
|
||||
padding-right: 3px; /* Otherwise italic font will be outside bounds */
|
||||
/* color: black; /* inherit doesn't work on IE */
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
|
||||
/*
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr:nth-child(even){
|
||||
background-color: #f4f4f8;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr td {
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* 'columnview' extension
|
||||
*/
|
||||
|
||||
/*
|
||||
table.fancytree-ext-columnview {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
table.fancytree-ext-columnview td
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
table.fancytree-ext-columnview td >ul
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview td >ul li
|
||||
{
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip:border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none; /* no v-lines */
|
||||
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
/*
|
||||
table.fancytree-ext-columnview tbody tr[0] {
|
||||
height: 200px;
|
||||
}
|
||||
*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative; /* allow positioning of embedded spans*/
|
||||
}
|
||||
/*
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
|
||||
background-color: royalblue;
|
||||
}
|
||||
*/
|
||||
table.fancytree-ext-columnview span.fancytree-cv-right {
|
||||
background-position: 0px -80px;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
* 'filter' extension
|
||||
*/
|
||||
.fancytree-ext-filter .fancytree-node .fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter .fancytree-node.fancytree-submatch .fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter .fancytree-node.fancytree-match .fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Drag'n'drop support
|
||||
*/
|
||||
|
||||
/*** Helper object ************************************************************/
|
||||
div.fancytree-drag-helper
|
||||
{
|
||||
}
|
||||
div.fancytree-drag-helper a
|
||||
{
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
span.fancytree-drag-helper-img
|
||||
{
|
||||
/*
|
||||
position: relative;
|
||||
left: -16px;
|
||||
*/
|
||||
}
|
||||
div.fancytree-drag-helper /*.fancytree-drop-accept*/
|
||||
{
|
||||
/* border-color: green;
|
||||
background-color: red;*/
|
||||
}
|
||||
div.fancytree-drop-accept span.fancytree-drag-helper-img
|
||||
{
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject
|
||||
{
|
||||
border-color: red;
|
||||
}
|
||||
div.fancytree-drop-reject span.fancytree-drag-helper-img
|
||||
{
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
|
||||
/*** Drop marker icon *********************************************************/
|
||||
|
||||
#fancytree-drop-marker
|
||||
{
|
||||
width: 24px;
|
||||
position: absolute;
|
||||
background-position: 0 -128px;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before
|
||||
{
|
||||
width:64px;
|
||||
background-position: 0 -144px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-copy
|
||||
{
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-move
|
||||
{
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
|
||||
/*** Source node while dragging ***********************************************/
|
||||
|
||||
span.fancytree-drag-source
|
||||
{
|
||||
/* border: 1px dotted gray; */
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source a
|
||||
{
|
||||
color: gray;
|
||||
}
|
||||
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
|
||||
span.fancytree-drop-target
|
||||
{
|
||||
/*border: 1px solid gray;*/
|
||||
}
|
||||
span.fancytree-drop-target a
|
||||
{
|
||||
}
|
||||
span.fancytree-drop-target.fancytree-drop-accept a
|
||||
{
|
||||
/*border: 1px solid green;*/
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important; /* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
span.fancytree-drop-target.fancytree-drop-reject
|
||||
{
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
span.fancytree-drop-target.fancytree-drop-after a
|
||||
{
|
||||
}
|
||||
1
assets/skin-themeroller/ui.fancytree.min.css
vendored
Normal file
1
assets/skin-themeroller/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-vista/icons.gif
Normal file
BIN
assets/skin-vista/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
assets/skin-vista/loading.gif
Normal file
BIN
assets/skin-vista/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
507
assets/skin-vista/ui.fancytree.css
Normal file
507
assets/skin-vista/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
/*!
|
||||
* Fancytree "Vista" skin.
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*
|
||||
both:
|
||||
unselected background: #FCFCFC 'nearly white'
|
||||
hover bar (unselected, inactive): #F8FCFE..#EFF9FE (border: #D8F0FA) 'very light blue'
|
||||
active node: #F6FBFD..#D5EFFC (border: #99DEFD) 'light blue'
|
||||
active node with hover: #F2F9FD..#C4E8FA (border: #B6E6FB)
|
||||
|
||||
Tree view:
|
||||
active node, tree inactive: #FAFAFB..#E5E5E5 (border: #D9D9D9) 'light gray, selected, but tree not active'
|
||||
|
||||
List view:
|
||||
selected bar: --> active bar
|
||||
focus bar: active + border 1px dotted #090402 (inside the blue border)
|
||||
|
||||
table left/right border: #EDEDED 'light gray'
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-image: url("icons.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 3px;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-n span.fancytree-expander:hover {
|
||||
background-position: 0px -64px;
|
||||
}
|
||||
.fancytree-exp-nl span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander:hover {
|
||||
background-position: -16px -64px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander {
|
||||
background-position: 0px -96px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander:hover {
|
||||
background-position: -16px -96px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander {
|
||||
background-position: -64px -80px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander:hover {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander {
|
||||
background-position: -64px -96px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander:hover {
|
||||
background-position: -80px -96px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander,
|
||||
.fancytree-exp-ed span.fancytree-expander {
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander:hover,
|
||||
.fancytree-exp-ed span.fancytree-expander:hover {
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander,
|
||||
.fancytree-exp-edl span.fancytree-expander {
|
||||
background-position: -32px -96px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander:hover,
|
||||
.fancytree-exp-edl span.fancytree-expander:hover {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url("loading.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Status node icons */
|
||||
.fancytree-statusnode-error span.fancytree-icon {
|
||||
background-position: 0px -112px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 3px;
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
span.fancytree-checkbox:hover {
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-radio span.fancytree-checkbox {
|
||||
background-position: 0px -48px;
|
||||
}
|
||||
.fancytree-radio span.fancytree-checkbox:hover {
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 3px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:hover {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
/* Folders */
|
||||
.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
div.fancytree-drop-accept span.fancytree-drag-helper-img {
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
div.fancytree-drop-reject span.fancytree-drag-helper-img {
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
background-position: 0px -128px;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 64px;
|
||||
background-position: 0px -144px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-copy {
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-move {
|
||||
background-position: -32px -128px;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
/*******************************************************************************
|
||||
* Node titles
|
||||
*/
|
||||
span.fancytree-title {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
span.fancytree-title:hover {
|
||||
background-color: #F2F7FD;
|
||||
border-color: #B8D6FB;
|
||||
}
|
||||
span.fancytree-focused span.fancytree-title {
|
||||
background-color: #EFEBDE;
|
||||
outline: 1px dotted gray;
|
||||
}
|
||||
span.fancytree-selected span.fancytree-title {
|
||||
font-style: italic;
|
||||
}
|
||||
span.fancytree-active span.fancytree-title {
|
||||
border: 1px solid #99DEFD;
|
||||
background-color: #D8F0FA;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-focused {
|
||||
background-color: #99DEFD;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active {
|
||||
background-color: royalblue;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected {
|
||||
background-color: #99FDDE;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'columnview' extension
|
||||
*/
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #ccc;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
|
||||
background-color: royalblue;
|
||||
}
|
||||
6
assets/skin-vista/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-vista/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-win7/icons.gif
Normal file
BIN
assets/skin-win7/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
assets/skin-win7/loading.gif
Normal file
BIN
assets/skin-win7/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
571
assets/skin-win7/ui.fancytree.css
Normal file
571
assets/skin-win7/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,571 @@
|
|||
/*!
|
||||
* Fancytree "Win7" skin.
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-image: url("icons.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 3px;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-n span.fancytree-expander:hover {
|
||||
background-position: 0px -64px;
|
||||
}
|
||||
.fancytree-exp-nl span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander:hover {
|
||||
background-position: -16px -64px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander {
|
||||
background-position: 0px -96px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander:hover {
|
||||
background-position: -16px -96px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander {
|
||||
background-position: -64px -80px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander:hover {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander {
|
||||
background-position: -64px -96px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander:hover {
|
||||
background-position: -80px -96px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander,
|
||||
.fancytree-exp-ed span.fancytree-expander {
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander:hover,
|
||||
.fancytree-exp-ed span.fancytree-expander:hover {
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander,
|
||||
.fancytree-exp-edl span.fancytree-expander {
|
||||
background-position: -32px -96px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander:hover,
|
||||
.fancytree-exp-edl span.fancytree-expander:hover {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url("loading.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Status node icons */
|
||||
.fancytree-statusnode-error span.fancytree-icon {
|
||||
background-position: 0px -112px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 3px;
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
span.fancytree-checkbox:hover {
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-radio span.fancytree-checkbox {
|
||||
background-position: 0px -48px;
|
||||
}
|
||||
.fancytree-radio span.fancytree-checkbox:hover {
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 3px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:hover {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
/* Folders */
|
||||
.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
div.fancytree-drop-accept span.fancytree-drag-helper-img {
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
div.fancytree-drop-reject span.fancytree-drag-helper-img {
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
background-position: 0px -128px;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 64px;
|
||||
background-position: 0px -144px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-copy {
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-move {
|
||||
background-position: -32px -128px;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
/*******************************************************************************
|
||||
* Node titles
|
||||
*/
|
||||
span.fancytree-title {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
span.fancytree-title:hover {
|
||||
border-color: #d8f0fa;
|
||||
background: #f8fcfe;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8fcfe), color-stop(100%, #eff9fe));
|
||||
background: -webkit-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: -o-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: -ms-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: linear-gradient(to bottom, #f8fcfe 0%, #eff9fe 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8fcfe', endColorstr='#eff9fe', GradientType=0);
|
||||
}
|
||||
span.fancytree-focused span.fancytree-title {
|
||||
outline: 1px dotted black;
|
||||
}
|
||||
span.fancytree-active .fancytree-title {
|
||||
border-color: #d9d9d9;
|
||||
background: #e5e5e5;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #fafafb 0%, #e5e5e5 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafb), color-stop(100%, #e5e5e5));
|
||||
background: -webkit-linear-gradient(top, #fafafb 0%, #e5e5e5 100%);
|
||||
background: -o-linear-gradient(top, #fafafb 0%, #e5e5e5 100%);
|
||||
background: -ms-linear-gradient(top, #fafafb 0%, #e5e5e5 100%);
|
||||
background: linear-gradient(to bottom, #fafafb 0%, #e5e5e5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafb', endColorstr='#e5e5e5', GradientType=0);
|
||||
}
|
||||
.fancytree-treefocus span.fancytree-active .fancytree-title,
|
||||
span.fancytree-selected .fancytree-title {
|
||||
border-color: #99defd;
|
||||
background: #f6fbfd;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6fbfd), color-stop(100%, #d5effc));
|
||||
background: -webkit-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: -o-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: -ms-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: linear-gradient(to bottom, #f6fbfd 0%, #d5effc 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6fbfd', endColorstr='#d5effc', GradientType=0);
|
||||
}
|
||||
span.fancytree-active .fancytree-title:hover,
|
||||
span.fancytree-active.fancytree-focused .fancytree-title,
|
||||
span.fancytree-selected .fancytree-title:hover,
|
||||
span.fancytree-selected.fancytree-focused .fancytree-title {
|
||||
border-color: #b6e6fb;
|
||||
background: #f2f9fd;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f9fd), color-stop(100%, #c4e8fa));
|
||||
background: -webkit-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: -o-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: -ms-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: linear-gradient(to bottom, #f2f9fd 0%, #c4e8fa 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f9fd', endColorstr='#c4e8fa', GradientType=0);
|
||||
}
|
||||
.fancytree-selected .fancytree-title {
|
||||
font-style: italic;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
table.fancytree-ext-table tbody tr td {
|
||||
border: 1px solid #EDEDED;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr:hover {
|
||||
border-color: inherit;
|
||||
background: #f8fcfe;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8fcfe), color-stop(100%, #eff9fe));
|
||||
background: -webkit-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: -o-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: -ms-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
|
||||
background: linear-gradient(to bottom, #f8fcfe 0%, #eff9fe 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8fcfe', endColorstr='#eff9fe', GradientType=0);
|
||||
outline: 1px solid #D8F0FA;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-focused {
|
||||
outline: 1px dotted #090402;
|
||||
}
|
||||
table.fancytree-ext-table tbody span.fancytree-focused span.fancytree-title {
|
||||
outline: solid dotted black;
|
||||
}
|
||||
table.fancytree-ext-table tbody span.fancytree-title:hover {
|
||||
border: 1px solid transparent;
|
||||
background: inherit;
|
||||
background: transparent;
|
||||
background: none;
|
||||
filter: none;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active:hover,
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected:hover {
|
||||
border-color: inherit;
|
||||
background: #f2f9fd;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f9fd), color-stop(100%, #c4e8fa));
|
||||
background: -webkit-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: -o-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: -ms-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
|
||||
background: linear-gradient(to bottom, #f2f9fd 0%, #c4e8fa 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f9fd', endColorstr='#c4e8fa', GradientType=0);
|
||||
outline: 1px solid #B6E6FB;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active,
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected {
|
||||
border-color: inherit;
|
||||
background: #f6fbfd;
|
||||
color: inherit;
|
||||
background: -moz-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6fbfd), color-stop(100%, #d5effc));
|
||||
background: -webkit-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: -o-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: -ms-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
|
||||
background: linear-gradient(to bottom, #f6fbfd 0%, #d5effc 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6fbfd', endColorstr='#d5effc', GradientType=0);
|
||||
outline: 1px solid #99DEFD;
|
||||
}
|
||||
6
assets/skin-win7/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-win7/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-win8-xxl/icons.gif
Normal file
BIN
assets/skin-win8-xxl/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
assets/skin-win8-xxl/loading.gif
Normal file
BIN
assets/skin-win8-xxl/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
528
assets/skin-win8-xxl/ui.fancytree.css
Normal file
528
assets/skin-win8-xxl/ui.fancytree.css
Normal file
File diff suppressed because one or more lines are too long
11
assets/skin-win8-xxl/ui.fancytree.min.css
vendored
Normal file
11
assets/skin-win8-xxl/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-win8/icons.gif
Normal file
BIN
assets/skin-win8/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
assets/skin-win8/loading.gif
Normal file
BIN
assets/skin-win8/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
518
assets/skin-win8/ui.fancytree.css
Normal file
518
assets/skin-win8/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,518 @@
|
|||
/*!
|
||||
* Fancytree "win8" skin (highlighting the node span instead of title-only).
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-image: url("icons.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 3px;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-n span.fancytree-expander:hover {
|
||||
background-position: 0px -64px;
|
||||
}
|
||||
.fancytree-exp-nl span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander:hover {
|
||||
background-position: -16px -64px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander {
|
||||
background-position: 0px -96px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander:hover {
|
||||
background-position: -16px -96px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander {
|
||||
background-position: -64px -80px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander:hover {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander {
|
||||
background-position: -64px -96px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander:hover {
|
||||
background-position: -80px -96px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander,
|
||||
.fancytree-exp-ed span.fancytree-expander {
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander:hover,
|
||||
.fancytree-exp-ed span.fancytree-expander:hover {
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander,
|
||||
.fancytree-exp-edl span.fancytree-expander {
|
||||
background-position: -32px -96px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander:hover,
|
||||
.fancytree-exp-edl span.fancytree-expander:hover {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url('data:image/gif;base64,R0lGODlhEAAQAPcAAEai/0+m/1is/12u/2Oy/2u1/3C3/3G4/3W6/3q8/3+//4HA/4XC/4nE/4/H/5LI/5XK/5vN/57O/6DP/6HQ/6TS/6/X/7DX/7HY/7bb/7rd/7ze/8Hg/8fj/8rl/83m/9Dn/9Lp/9bq/9jr/9rt/9/v/+Dv/+Hw/+Xy/+v1/+32//D3//L5//f7//j7//v9/0qk/06m/1Ko/1er/2Cw/2m0/2y2/3u9/32+/4jD/5bK/5jL/5/P/6HP/6PS/6fS/6nU/67X/7Ta/7nc/7zd/8Ph/8bj/8jk/8vl/9Pp/9fr/9rs/9zu/+j0/+72//T6/0ij/1Op/1uu/1yu/2Wy/2q0/2+3/3C4/3m8/3y9/4PB/4vE/4/G/6XS/6jU/67W/7HZ/7Xa/7vd/73e/8Lh/8nk/87m/9Hn/9Ho/9vt/97u/+Lx/+bz/+n0//H4//X6/1Gn/1Go/2Gx/36+/5PJ/5TJ/5nL/57P/7PZ/7TZ/8Xi/9Tq/9zt/+by/+r0/+73//P5//n8/0uk/1Wq/3K4/3e7/4bC/4vF/47G/5fK/77f/9Do/9ns/+Tx/+/3//L4//b6//r9/2Wx/2q1/4bD/6DQ/6fT/9Tp/+Lw/+jz//D4//j8/1qt/2mz/5rM/6bS/8Lg/8jj/97v/+r1/1Cn/1ar/2Cv/3O5/3++/53O/8Th/9Lo/9Xq/+z2/2Kw/2Sx/8Ti/4rF/7DY/1+v/4TB/7fb/+Ty/1+u/2Ox/4zG/6vU/7/f//r8/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/i1NYWRlIGJ5IEtyYXNpbWlyYSBOZWpjaGV2YSAod3d3LmxvYWRpbmZvLm5ldCkAIfkEAQoAMAAsAAAAABAAEAAABptAmFCI6mAsnNNwCUthGomDoYCQoJinyELRgDwUhAFCNFRJGg8P6/VSaQyCgxK2cURMTJioEIA0Jw8geUIZAQMkIhEVLIMwKgMAFx4SGS+NLwwCFR8UGo1CKSgsJBUYLZ9sMCsZF3iDLy2nMCEXGyp5bSqyLBwaHSguQi8sKigqlkIqHb4hJc4lJsdMLSQeHyEhIyXSgy2hxsFLQQAh+QQBCgAAACwAAAAAEAAQAAAHp4AAgoIoH0NCSCiDiwBORDo5Czg3C0BNjCg/Dw46PjwOBwcLS4MrQTs9ICwvL05FODU4igBGPECzi0s4NDyNQT5KjINDAzZMTEBCLMKCTQczQ0lBRcyDODI8SojVAC84MTxMQkVP1SgDMEJPRkS4jB8xM6RKRR/Lwi9HQYJPIB9KTV4MeuHiicBSSkAoYYKiiRMnKw4ucnFiyRKGKJyUq/aChUaDjAIBACH5BAEKAAAALAAAAAAQABAAAAeogACCgm1KZGRmbYOLAG5GXjoPXFsPYIqLbWE7XV1fXjtaWQ9qg25iXmBKby8AKmVcWFyXaBdil4tqWldejWNhpIyCZFZZa2tjZG/BgipYVWRpY2bLg1s0XWpGaNQAL1pTXW1maMrLbVZSYm9oZyrUYVFUpGxoaeWLZzQBOoJvamkm3OCSAsWKiUH+1rBp48bFCxVWaGxb9LBNGxVvVqUBFuzFizculgUCACH5BAEKAAEALAAAAAAQABAAAAi4AAMIFPiHxJEjJPwMXBgAEIg8XijcsUNhzB+GfzjkwYNnSB4KdRzcWTPwzZEhY/i8EfgmhJ0GdhQGIDFGz0WGJuoswBPgzQc9fRgOPDKnQR8/H0K4EErQQQKgIPgwFRioTgE8ffZInRqIztWCfAJN/TOnAAcXJvgAmjpEDgKSf9b4Ectwz5UBd6j68fNnaYBAfvIUEIAgKNU/gN4E+sNgAJw4BvYIfeMiUB8BAAbUMTz1TYU8YRcGBAAh+QQBCgAAACwAAAAAEAAQAAAItAABCBT4qJGIRY0cDVwIAJIIMnnyWABiwYjChY8WGVFExgjELjwsNBroQgSSD40gCXQIJFGXi41AiHjEEECjLg8UNWS06GLND4gSNXrEqESkmgQTGfrgqMRIpAAidVkwpKDPmpF44MgDqVGTo0gdHbqBJJIjR2BrkiG0YCSkRyprMsJBCMhASJEioczbZEihGoaeCtQrgwYOujRoLGBU08IgQYJkzKjBQ/DCSIzy8OgypATDgAAh+QQBCgAAACwAAAAAEAAQAAAIswABCBQIKRMfPmw0DVwIYBObEEiKjBEzJoTChZD4XArB0UyRMBfGtBm4CdOSJW02EeQjxkuYi38wYYLEEEAmDJWMNGyTsKbAS5Us/YHU5o9PgZos7QixSdPFo18eFNkESeXRTV+4FGlo1aemHVvM7ORzFMmCByOXHJgSoiafLTgwCOQjCYqkMCk3/SlCCQvagSEmBRh0gBLcAwe4kF2IaYekKVNoTMLiZWTNTSwtWRqDiWFAACH5BAEKAAIALAAAAAAQABAAAAi5AAUIFOhCBRs2o94MXCjghQpRI/YkQYJkj8KFL0atEcVRVJIOY0KtWKhi1Cg3LwS+YdNhCCg3Kt2oSMlQxZg8IGLSZChA1IU8Khru5PkmjxdRbtgE5TlwCAUknzgxGIoxDw8kQgAMGMVUgJtPnvaQGBAgT1cQDyhwhRCnUxKeazw5GCNwTQFOBsbMfLECyYMGPJYK2INgAAEFDyA0ULDA0xqGbHggKFDgQIIGF7jyfLGmw4ULHdgwDAgAIfkEAQoAAAAsAAAAABAAEAAACLcAAQgcqElTK00uBioUuKlVEzYnlixhk3BhC4MO2SxhtIrVCoWbNrnYNLAhKzMgWggMgqTiwhVIiiwBsKQUKTMLB7IhoqpVHhimmuQU2KJInhOpYtxwmdNMHlapZKAiORRAkSCshpQ61arqijxAJNoYMKTqEh95uvagUWjmQjZAUqkSyAZVDVRFWoXUBKLHjiAfBS5hcOqUg1Q+djh44IPNwiZAFtxAtSCHDiJdh55AkmeIGaEKAwIAIfkEAQoAAAAsAAAAABAAEAAACLcAAQgcGMgFJEiBBioEUEIJAINuRo36k1AhGldXVhSMyAaTCUgDMVWBMiWNQjeY0pRwIVBHAFdoFgKAxOgMG4avooSRKfCPmTOQNEi5MornwzNIRnWZQqkiTyVFSnRxtYWlUTMa0hSpkuWPUUgcNGDClMVKEaMmwohxA6CLFUolZI7ScCEmgFFcsnBB4nVmCTBeNLAVWCKvlh1dvnjRUSlMUYWjwDzYwuWBji6wBss1U6QImscDAwIAIfkEAQoAAQAsAAAAABAAEAAACLMAAwgUyEfWJxYDEw5sBGEAAAGNXkCCpDAAKwNw4AxgoEIii44LCwnolMfPC4EvVPgxKfDOgCusKr7ws0ZFABOF5IipKJAFHz4vOBSYY5NnAD4jVMgqAOGkUT5J/CxtajRAmiRr9CSIVbQiJFZI/DRyMAeJ0awfKMqaQ2dNRRV6xqQR6MdOLDusEAaAtGbMGCR6A6y54wDCpzxiZCnm0FWgijF3INyhcDhJYIV+wH5I0zhAQAAh+QQBCgAAACwAAAAAEAAQAAAItAABCBRYYkiqVLUYuRjIkE2qGjNkxBA0IwhDgYwU0JhVg1YCGjLMLBzYxFCNBEM0uXDBxkyLlQOBEFLA6CKAlZpaAGBjiBAZmwP//HFhJMGhP0AF/mHjopaCVCOBsmGjqZahLlFtsinxx4yhHZqSurDFaGkiREmS/rnESOeQB6nY2NR0CYRcAH+67AByaWSLlkj6DmQTJFWXWmSMkCFCBkRYhn+MBAESpBbitmpLJLlU4vHAgAAh+QQBCgAAACwAAAAAEAAQAAAIvQABCBS4ZpclS0PWDFwIoI0uHFVu3ZIiiY7ChWpyHTiAowGDK4MCVEEzsA0dLAw4OOHFq00YXFBwqREIBkeumQzN3DqQBkCmOgvKMByYpg0vAGZy7XAydCCvFgA45NLVdGCLFrw40PlytCoLJy0u7bAEtSkvJ21aOLF055JXNkYBwKoEJtPQFmvWMAWwIoyuIWrKunCSJo2Jrg2HXAjDwcwlNCDQpCk7kAWIXUN2wTKDZo2Lqk7YpFGTibLAgAA7');
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Status node icons */
|
||||
.fancytree-statusnode-error span.fancytree-icon {
|
||||
background-position: 0px -112px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 3px;
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
span.fancytree-checkbox:hover {
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-radio span.fancytree-checkbox {
|
||||
background-position: 0px -48px;
|
||||
}
|
||||
.fancytree-radio span.fancytree-checkbox:hover {
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 3px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:hover {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
/* Folders */
|
||||
.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
div.fancytree-drop-accept span.fancytree-drag-helper-img {
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
div.fancytree-drop-reject span.fancytree-drag-helper-img {
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
background-position: 0px -128px;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 64px;
|
||||
background-position: 0px -144px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-copy {
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-move {
|
||||
background-position: -32px -128px;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
/*******************************************************************************
|
||||
* Node titles
|
||||
*/
|
||||
span.fancytree-node {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
span.fancytree-node:hover {
|
||||
background-color: #E5F3FB;
|
||||
border-color: #70C0E7;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-focused {
|
||||
border-color: #3399FF;
|
||||
}
|
||||
span.fancytree-node.fancytree-active,
|
||||
span.fancytree-node.fancytree-selected {
|
||||
background-color: #F7F7F7;
|
||||
border-color: #DEDEDE;
|
||||
}
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active,
|
||||
.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-selected,
|
||||
span.fancytree-node.fancytree-active:hover,
|
||||
span.fancytree-node.fancytree-selected:hover {
|
||||
background-color: #CBE8F6;
|
||||
border-color: #26A0DA;
|
||||
}
|
||||
.fancytree-node.fancytree-selected {
|
||||
font-style: italic;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
table.fancytree-ext-table tbody tr td {
|
||||
border: 1px solid #EDEDED;
|
||||
}
|
||||
table.fancytree-ext-table tbody span.fancytree-node,
|
||||
table.fancytree-ext-table tbody span.fancytree-node:hover {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
table.fancytree-ext-table tbody span.fancytree-title:hover {
|
||||
border: none;
|
||||
background: inherit;
|
||||
background: transparent;
|
||||
background: none;
|
||||
filter: none;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr:hover {
|
||||
background-color: #E5F3FB;
|
||||
outline: 1px solid #70C0E7;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-focused span.fancytree-title {
|
||||
outline: 1px dotted black;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active:hover,
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected:hover {
|
||||
background-color: #CBE8F6;
|
||||
outline: 1px solid #26A0DA;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active {
|
||||
background-color: #F7F7F7;
|
||||
outline: 1px solid #DEDEDE;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected {
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-active {
|
||||
background-color: #CBE8F6;
|
||||
outline: 1px solid #26A0DA;
|
||||
}
|
||||
table.fancytree-ext-table.fancytree-treefocus tbody tr.fancytree-selected {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
6
assets/skin-win8/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-win8/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-xp/icons-rtl.gif
Normal file
BIN
assets/skin-xp/icons-rtl.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
assets/skin-xp/icons.gif
Normal file
BIN
assets/skin-xp/icons.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
assets/skin-xp/loading.gif
Normal file
BIN
assets/skin-xp/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 570 B |
498
assets/skin-xp/ui.fancytree.css
Normal file
498
assets/skin-xp/ui.fancytree.css
Normal file
|
|
@ -0,0 +1,498 @@
|
|||
/*!
|
||||
* Fancytree "XP" skin.
|
||||
*
|
||||
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
|
||||
* the LESS templates.
|
||||
*/
|
||||
/*******************************************************************************
|
||||
* Common Styles for Fancytree Skins.
|
||||
*
|
||||
* This section is automatically generated from the `skin-common.less` template.
|
||||
******************************************************************************/
|
||||
/*------------------------------------------------------------------------------
|
||||
* Helpers
|
||||
*----------------------------------------------------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Container and UL / LI
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-container {
|
||||
font-family: tahoma, arial, helvetica;
|
||||
font-size: 10pt;
|
||||
white-space: nowrap;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border: 1px dotted gray;
|
||||
overflow: auto;
|
||||
min-height: 0%;
|
||||
position: relative;
|
||||
}
|
||||
ul.fancytree-container ul {
|
||||
padding: 0 0 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
ul.fancytree-container li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-fancytree-disabled ul.fancytree-container {
|
||||
opacity: 0.5;
|
||||
background-color: silver;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Common icon definitions
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-empty,
|
||||
span.fancytree-vline,
|
||||
span.fancytree-expander,
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-drag-helper-img,
|
||||
#fancytree-drop-marker {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-image: url("icons.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
span.fancytree-icon,
|
||||
span.fancytree-checkbox,
|
||||
span.fancytree-radio,
|
||||
span.fancytree-custom-icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
/* Used by iconclass option */
|
||||
span.fancytree-custom-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
/* Used by 'icon' node option: */
|
||||
img.fancytree-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 3px;
|
||||
margin-top: 1px;
|
||||
vertical-align: top;
|
||||
border-style: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Expander icon
|
||||
*
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-exp-
|
||||
* 1st character: 'e': expanded, 'c': collapsed, 'n': no children
|
||||
* 2nd character (optional): 'd': lazy (Delayed)
|
||||
* 3rd character (optional): 'l': Last sibling
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-expander {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander {
|
||||
cursor: default;
|
||||
}
|
||||
.fancytree-exp-n span.fancytree-expander,
|
||||
.fancytree-exp-n span.fancytree-expander:hover {
|
||||
background-position: 0px -64px;
|
||||
}
|
||||
.fancytree-exp-nl span.fancytree-expander,
|
||||
.fancytree-exp-nl span.fancytree-expander:hover {
|
||||
background-position: -16px -64px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.fancytree-exp-c span.fancytree-expander:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander {
|
||||
background-position: 0px -96px;
|
||||
}
|
||||
.fancytree-exp-cl span.fancytree-expander:hover {
|
||||
background-position: -16px -96px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander {
|
||||
background-position: -64px -80px;
|
||||
}
|
||||
.fancytree-exp-cd span.fancytree-expander:hover {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander {
|
||||
background-position: -64px -96px;
|
||||
}
|
||||
.fancytree-exp-cdl span.fancytree-expander:hover {
|
||||
background-position: -80px -96px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander,
|
||||
.fancytree-exp-ed span.fancytree-expander {
|
||||
background-position: -32px -80px;
|
||||
}
|
||||
.fancytree-exp-e span.fancytree-expander:hover,
|
||||
.fancytree-exp-ed span.fancytree-expander:hover {
|
||||
background-position: -48px -80px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander,
|
||||
.fancytree-exp-edl span.fancytree-expander {
|
||||
background-position: -32px -96px;
|
||||
}
|
||||
.fancytree-exp-el span.fancytree-expander:hover,
|
||||
.fancytree-exp-edl span.fancytree-expander:hover {
|
||||
background-position: -48px -96px;
|
||||
}
|
||||
.fancytree-loading span.fancytree-expander,
|
||||
.fancytree-loading span.fancytree-expander:hover,
|
||||
.fancytree-statusnode-wait span.fancytree-icon,
|
||||
.fancytree-statusnode-wait span.fancytree-icon:hover {
|
||||
background-image: url("loading.gif");
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Status node icons */
|
||||
.fancytree-statusnode-error span.fancytree-icon {
|
||||
background-position: 0px -112px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Checkbox icon
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-checkbox {
|
||||
margin-left: 3px;
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
span.fancytree-checkbox:hover {
|
||||
background-position: -16px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -32px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Radiobutton icon
|
||||
* This is a customization, that may be activated by overriding the 'checkbox'
|
||||
* class name as 'fancytree-radio' in the tree options.
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-radio span.fancytree-checkbox {
|
||||
background-position: 0px -48px;
|
||||
}
|
||||
.fancytree-radio span.fancytree-checkbox:hover {
|
||||
background-position: -16px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox {
|
||||
background-position: -64px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-partsel span.fancytree-checkbox:hover {
|
||||
background-position: -80px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox {
|
||||
background-position: -32px -48px;
|
||||
}
|
||||
.fancytree-radio .fancytree-selected span.fancytree-checkbox:hover {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node type icon
|
||||
* Note: IE6 doesn't correctly evaluate multiples class names,
|
||||
* so we create combined class names that can be used in the CSS.
|
||||
*
|
||||
* Prefix: fancytree-ico-
|
||||
* 1st character: 'e': expanded, 'c': collapsed
|
||||
* 2nd character (optional): 'f': folder
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-icon {
|
||||
margin-left: 3px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
/* Documents */
|
||||
.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -16px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-c span.fancytree-icon:hover {
|
||||
background-position: -48px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.fancytree-ico-e span.fancytree-icon:hover {
|
||||
background-position: -80px 0px;
|
||||
}
|
||||
/* Folders */
|
||||
.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: 0px -16px;
|
||||
}
|
||||
.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -16px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon {
|
||||
background-position: -32px -16px;
|
||||
}
|
||||
.fancytree-has-children.fancytree-ico-cf span.fancytree-icon:hover {
|
||||
background-position: -48px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon {
|
||||
background-position: -64px -16px;
|
||||
}
|
||||
.fancytree-ico-ef span.fancytree-icon:hover {
|
||||
background-position: -80px -16px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Node titles and highlighting
|
||||
*----------------------------------------------------------------------------*/
|
||||
span.fancytree-node {
|
||||
/* See #117 */
|
||||
display: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
span.fancytree-title {
|
||||
display: inline-block;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
margin: 0px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span.fancytree-node.fancytree-error span.fancytree-title {
|
||||
color: red;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* Drag'n'drop support
|
||||
*----------------------------------------------------------------------------*/
|
||||
div.fancytree-drag-helper a {
|
||||
border: 1px solid gray;
|
||||
background-color: white;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
div.fancytree-drag-helper.fancytree-drop-reject {
|
||||
border-color: red;
|
||||
}
|
||||
div.fancytree-drop-accept span.fancytree-drag-helper-img {
|
||||
background-position: -32px -112px;
|
||||
}
|
||||
div.fancytree-drop-reject span.fancytree-drag-helper-img {
|
||||
background-position: -16px -112px;
|
||||
}
|
||||
/*** Drop marker icon *********************************************************/
|
||||
#fancytree-drop-marker {
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
background-position: 0px -128px;
|
||||
margin: 0;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 64px;
|
||||
background-position: 0px -144px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-copy {
|
||||
background-position: -64px -128px;
|
||||
}
|
||||
#fancytree-drop-marker.fancytree-drop-move {
|
||||
background-position: -32px -128px;
|
||||
}
|
||||
/*** Source node while dragging ***********************************************/
|
||||
span.fancytree-drag-source {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
span.fancytree-drag-source span.fancytree.title {
|
||||
color: gray;
|
||||
}
|
||||
/*** Target node while dragging cursor is over it *****************************/
|
||||
span.fancytree-drop-target.fancytree-drop-accept a {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
/* @ IE6 */
|
||||
text-decoration: none;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'table' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table span.fancytree-node {
|
||||
display: inline-block;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'columnview' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
table.fancytree-ext-columnview tbody tr td {
|
||||
position: relative;
|
||||
border: 1px solid gray;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul {
|
||||
padding: 0;
|
||||
}
|
||||
table.fancytree-ext-columnview tbody tr td > ul li {
|
||||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
-moz-background-clip: border;
|
||||
-moz-background-inline-policy: continuous;
|
||||
-moz-background-origin: padding;
|
||||
background-attachment: scroll;
|
||||
background-color: transparent;
|
||||
background-position: 0px 0px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: none;
|
||||
/* no v-lines */
|
||||
margin: 0;
|
||||
padding: 1px 0 0 0;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node {
|
||||
position: relative;
|
||||
/* allow positioning of embedded spans */
|
||||
display: inline-block;
|
||||
}
|
||||
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
|
||||
background-color: #CBE8F6;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:hover {
|
||||
background-position: -16px -80px;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'filter' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
.fancytree-ext-filter-dimm tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-dimm span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-hide,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
|
||||
color: silver;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,
|
||||
.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
}
|
||||
/*------------------------------------------------------------------------------
|
||||
* 'wide' extension
|
||||
*----------------------------------------------------------------------------*/
|
||||
ul.fancytree-ext-wide span.fancytree-node > span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
ul.fancytree-ext-wide span.fancytree-node span.fancytree-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding-left: 503px;
|
||||
margin-left: -500px;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Styles specific to this skin.
|
||||
*
|
||||
* This section is automatically generated from the `ui-fancytree.less` template.
|
||||
******************************************************************************/
|
||||
/*******************************************************************************
|
||||
* Tree container
|
||||
*/
|
||||
ul.fancytree-container li {
|
||||
background-image: url("vline.gif");
|
||||
background-position: 0 0;
|
||||
}
|
||||
ul.fancytree-container li.fancytree-lastsib {
|
||||
background-image: none;
|
||||
}
|
||||
ul.fancytree-no-connector > li {
|
||||
background-image: none;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* Node titles
|
||||
*/
|
||||
span.fancytree-title {
|
||||
border: 0 solid transparent;
|
||||
}
|
||||
span.fancytree-title:hover {
|
||||
background-color: #F2F7FD;
|
||||
border-color: #B8D6FB;
|
||||
}
|
||||
span.fancytree-focused span.fancytree-title {
|
||||
outline: 1px dotted black;
|
||||
background-color: #EFEBDE;
|
||||
}
|
||||
.fancytree-folder span.fancytree-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.fancytree-selected span.fancytree-title {
|
||||
color: green;
|
||||
font-style: italic;
|
||||
}
|
||||
.fancytree-active span.fancytree-title {
|
||||
background-color: #3169C6 !important;
|
||||
color: white !important;
|
||||
}
|
||||
/*******************************************************************************
|
||||
* 'table' extension
|
||||
*/
|
||||
table.fancytree-ext-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-focused {
|
||||
background-color: #99DEFD;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-active {
|
||||
background-color: royalblue;
|
||||
}
|
||||
table.fancytree-ext-table tbody tr.fancytree-selected {
|
||||
background-color: #99FDDE;
|
||||
}
|
||||
6
assets/skin-xp/ui.fancytree.min.css
vendored
Normal file
6
assets/skin-xp/ui.fancytree.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/skin-xp/vline-rtl.gif
Normal file
BIN
assets/skin-xp/vline-rtl.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 842 B |
BIN
assets/skin-xp/vline.gif
Normal file
BIN
assets/skin-xp/vline.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 844 B |
185
assets/src/jquery.fancytree.childcounter.js
Normal file
185
assets/src/jquery.fancytree.childcounter.js
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
// Extending Fancytree
|
||||
// ===================
|
||||
//
|
||||
// See also the [live demo](http://wwwendt.de/tech/fancytree/demo/sample-ext-childcounter.html) of this code.
|
||||
//
|
||||
// Every extension should have a comment header containing some information
|
||||
// about the author, copyright and licensing. Also a pointer to the latest
|
||||
// source code.
|
||||
// Prefix with `/*!` so the comment is not removed by the minifier.
|
||||
|
||||
/*!
|
||||
* jquery.fancytree.childcounter.js
|
||||
*
|
||||
* Add a child counter bubble to tree nodes.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
// To keep the global namespace clean, we wrap everything in a closure
|
||||
|
||||
;(function($, undefined) {
|
||||
|
||||
// Consider to use [strict mode](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
|
||||
"use strict";
|
||||
|
||||
// The [coding guidelines](http://contribute.jquery.org/style-guide/js/)
|
||||
// require jshint compliance.
|
||||
// But for this sample, we want to allow unused variables for demonstration purpose.
|
||||
|
||||
/*jshint unused:false */
|
||||
|
||||
|
||||
// Adding methods
|
||||
// --------------
|
||||
|
||||
// New member functions can be added to the `Fancytree` class.
|
||||
// This function will be available for every tree instance.
|
||||
//
|
||||
// var tree = $("#tree").fancytree("getTree");
|
||||
// tree.countSelected(false);
|
||||
|
||||
$.ui.fancytree._FancytreeClass.prototype.countSelected = function(topOnly){
|
||||
var tree = this,
|
||||
treeOptions = tree.options;
|
||||
return tree.getSelectedNodes(topOnly).length;
|
||||
};
|
||||
|
||||
|
||||
// The `FancytreeNode` class can also be easily extended. This would be called
|
||||
// like
|
||||
//
|
||||
// node.toUpper();
|
||||
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.toUpper = function(){
|
||||
var node = this;
|
||||
return node.setTitle(node.title.toUpperCase());
|
||||
};
|
||||
|
||||
|
||||
// Finally, we can extend the widget API and create functions that are called
|
||||
// like so:
|
||||
//
|
||||
// $("#tree").fancytree("widgetMethod1", "abc");
|
||||
|
||||
$.ui.fancytree.prototype.widgetMethod1 = function(arg1){
|
||||
var tree = this.tree;
|
||||
return arg1;
|
||||
};
|
||||
|
||||
|
||||
// Register a Fancytree extension
|
||||
// ------------------------------
|
||||
// A full blown extension, extension is available for all trees and can be
|
||||
// enabled like so (see also the [live demo](http://wwwendt.de/tech/fancytree/demo/sample-ext-childcounter.html)):
|
||||
//
|
||||
// <script src="../src/jquery.fancytree.js" type="text/javascript"></script>
|
||||
// <script src="../src/jquery.fancytree.childcounter.js" type="text/javascript"></script>
|
||||
// ...
|
||||
//
|
||||
// $("#tree").fancytree({
|
||||
// extensions: ["childcounter"],
|
||||
// childcounter: {
|
||||
// hideExpanded: true
|
||||
// },
|
||||
// ...
|
||||
// });
|
||||
//
|
||||
|
||||
|
||||
/* 'childcounter' extension */
|
||||
$.ui.fancytree.registerExtension({
|
||||
// Every extension must be registered by a unique name.
|
||||
name: "childcounter",
|
||||
// Version information should be compliant with [semver](http://semver.org)
|
||||
version: "1.0.0",
|
||||
|
||||
// Extension specific options and their defaults.
|
||||
// This options will be available as `tree.options.childcounter.hideExpanded`
|
||||
|
||||
options: {
|
||||
deep: true,
|
||||
hideZeros: true,
|
||||
hideExpanded: false
|
||||
},
|
||||
|
||||
// Attributes other than `options` (or functions) can be defined here, and
|
||||
// will be added to the tree.ext.EXTNAME namespace, in this case `tree.ext.childcounter.foo`.
|
||||
// They can also be accessed as `this._local.foo` from within the extension
|
||||
// methods.
|
||||
foo: 42,
|
||||
|
||||
// Local functions are prefixed with an underscore '_'.
|
||||
// Callable as `this._local._appendCounter()`.
|
||||
|
||||
_appendCounter: function(bar){
|
||||
var tree = this;
|
||||
},
|
||||
|
||||
// **Override virtual methods for this extension.**
|
||||
//
|
||||
// Fancytree implements a number of 'hook methods', prefixed by 'node...' or 'tree...'.
|
||||
// with a `ctx` argument (see [EventData](http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#EventData)
|
||||
// for details) and an extended calling context:<br>
|
||||
// `this` : the Fancytree instance<br>
|
||||
// `this._local`: the namespace that contains extension attributes and private methods (same as this.ext.EXTNAME)<br>
|
||||
// `this._super`: the virtual function that was overridden (member of previous extension or Fancytree)
|
||||
//
|
||||
// See also the [complete list of available hook functions](http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree_Hooks.html).
|
||||
|
||||
/* Init */
|
||||
// `treeInit` is triggered when a tree is initalized. We can set up classes or
|
||||
// bind event handlers here...
|
||||
treeInit: function(ctx){
|
||||
var tree = this, // same as ctx.tree,
|
||||
opts = ctx.options,
|
||||
extOpts = ctx.options.childcounter;
|
||||
// Optionally check for dependencies with other extensions
|
||||
/* this._requireExtension("glyph", false, false); */
|
||||
// Call the base implementation
|
||||
this._super(ctx);
|
||||
// Add a class to the tree container
|
||||
this.$container.addClass("fancytree-ext-childcounter");
|
||||
},
|
||||
|
||||
// Destroy this tree instance (we only call the default implementation, so
|
||||
// this method could as well be omitted).
|
||||
|
||||
treeDestroy: function(ctx){
|
||||
this._super(ctx);
|
||||
},
|
||||
|
||||
// Overload the `renderTitle` hook, to append a counter badge
|
||||
nodeRenderTitle: function(ctx, title) {
|
||||
var node = ctx.node,
|
||||
extOpts = ctx.options.childcounter,
|
||||
count = (node.data.childCounter == null) ? node.countChildren(extOpts.deep) : +node.data.childCounter;
|
||||
// Let the base implementation render the title
|
||||
this._super(ctx, title);
|
||||
// Append a counter badge
|
||||
if( (count || ! extOpts.hideZeros) && (!node.isExpanded() || !extOpts.hideExpanded) ){
|
||||
$("span.fancytree-icon", node.span).append($("<span class='fancytree-childcounter'/>").text(count));
|
||||
}
|
||||
},
|
||||
// Overload the `setExpanded` hook, so the counters are updated
|
||||
nodeSetExpanded: function(ctx, flag, opts) {
|
||||
var tree = ctx.tree,
|
||||
node = ctx.node;
|
||||
// Let the base implementation expand/collapse the node, then redraw the title
|
||||
// after the animation has finished
|
||||
return this._super(ctx, flag, opts).always(function(){
|
||||
tree.nodeRenderTitle(ctx);
|
||||
});
|
||||
}
|
||||
|
||||
// End of extension definition
|
||||
});
|
||||
// End of namespace closure
|
||||
}(jQuery));
|
||||
447
assets/src/jquery.fancytree.clones.js
Normal file
447
assets/src/jquery.fancytree.clones.js
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
/*!
|
||||
*
|
||||
* jquery.fancytree.clones.js
|
||||
* Support faster lookup of nodes by key and shared ref-ids.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
function _assert(cond, msg){
|
||||
// TODO: see qunit.js extractStacktrace()
|
||||
if(!cond){
|
||||
msg = msg ? ": " + msg : "";
|
||||
$.error("Assertion failed" + msg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Return first occurrence of member from array. */
|
||||
function _removeArrayMember(arr, elem) {
|
||||
// TODO: use Array.indexOf for IE >= 9
|
||||
var i;
|
||||
for (i = arr.length - 1; i >= 0; i--) {
|
||||
if (arr[i] === elem) {
|
||||
arr.splice(i, 1);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// /**
|
||||
// * Calculate a 32 bit FNV-1a hash
|
||||
// * Found here: https://gist.github.com/vaiorabbit/5657561
|
||||
// * Ref.: http://isthe.com/chongo/tech/comp/fnv/
|
||||
// *
|
||||
// * @param {string} str the input value
|
||||
// * @param {boolean} [asString=false] set to true to return the hash value as
|
||||
// * 8-digit hex string instead of an integer
|
||||
// * @param {integer} [seed] optionally pass the hash of the previous chunk
|
||||
// * @returns {integer | string}
|
||||
// */
|
||||
// function hashFnv32a(str, asString, seed) {
|
||||
// /*jshint bitwise:false */
|
||||
// var i, l,
|
||||
// hval = (seed === undefined) ? 0x811c9dc5 : seed;
|
||||
|
||||
// for (i = 0, l = str.length; i < l; i++) {
|
||||
// hval ^= str.charCodeAt(i);
|
||||
// hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
|
||||
// }
|
||||
// if( asString ){
|
||||
// // Convert to 8 digit hex string
|
||||
// return ("0000000" + (hval >>> 0).toString(16)).substr(-8);
|
||||
// }
|
||||
// return hval >>> 0;
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* JS Implementation of MurmurHash3 (r136) (as of May 20, 2011)
|
||||
*
|
||||
* @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
|
||||
* @see http://github.com/garycourt/murmurhash-js
|
||||
* @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
|
||||
* @see http://sites.google.com/site/murmurhash/
|
||||
*
|
||||
* @param {string} key ASCII only
|
||||
* @param {boolean} [asString=false]
|
||||
* @param {number} seed Positive integer only
|
||||
* @return {number} 32-bit positive integer hash
|
||||
*/
|
||||
function hashMurmur3(key, asString, seed) {
|
||||
/*jshint bitwise:false */
|
||||
var h1b, k1,
|
||||
remainder = key.length & 3,
|
||||
bytes = key.length - remainder,
|
||||
h1 = seed,
|
||||
c1 = 0xcc9e2d51,
|
||||
c2 = 0x1b873593,
|
||||
i = 0;
|
||||
|
||||
while (i < bytes) {
|
||||
k1 =
|
||||
((key.charCodeAt(i) & 0xff)) |
|
||||
((key.charCodeAt(++i) & 0xff) << 8) |
|
||||
((key.charCodeAt(++i) & 0xff) << 16) |
|
||||
((key.charCodeAt(++i) & 0xff) << 24);
|
||||
++i;
|
||||
|
||||
k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff;
|
||||
k1 = (k1 << 15) | (k1 >>> 17);
|
||||
k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff;
|
||||
|
||||
h1 ^= k1;
|
||||
h1 = (h1 << 13) | (h1 >>> 19);
|
||||
h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff;
|
||||
h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16));
|
||||
}
|
||||
|
||||
k1 = 0;
|
||||
|
||||
switch (remainder) {
|
||||
/*jshint -W086:true */
|
||||
case 3: k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16;
|
||||
case 2: k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8;
|
||||
case 1: k1 ^= (key.charCodeAt(i) & 0xff);
|
||||
|
||||
k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
|
||||
k1 = (k1 << 15) | (k1 >>> 17);
|
||||
k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
|
||||
h1 ^= k1;
|
||||
}
|
||||
|
||||
h1 ^= key.length;
|
||||
|
||||
h1 ^= h1 >>> 16;
|
||||
h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff;
|
||||
h1 ^= h1 >>> 13;
|
||||
h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff;
|
||||
h1 ^= h1 >>> 16;
|
||||
|
||||
if( asString ){
|
||||
// Convert to 8 digit hex string
|
||||
return ("0000000" + (h1 >>> 0).toString(16)).substr(-8);
|
||||
}
|
||||
return h1 >>> 0;
|
||||
}
|
||||
|
||||
// console.info(hashMurmur3("costarring"));
|
||||
// console.info(hashMurmur3("costarring", true));
|
||||
// console.info(hashMurmur3("liquid"));
|
||||
// console.info(hashMurmur3("liquid", true));
|
||||
|
||||
|
||||
/*
|
||||
* Return a unique key for node by calculationg the hash of the parents refKey-list
|
||||
*/
|
||||
function calcUniqueKey(node) {
|
||||
var key,
|
||||
path = $.map(node.getParentList(false, true), function(e){ return e.refKey || e.key; });
|
||||
path = path.join("/");
|
||||
key = "id_" + hashMurmur3(path, true);
|
||||
node.debug(path + " -> " + key);
|
||||
return key;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* [ext-clones] Return a list of clone-nodes or null.
|
||||
* @param {boolean} [includeSelf=false]
|
||||
* @returns {FancytreeNode[] | null}
|
||||
*
|
||||
* @alias FancytreeNode#getCloneList
|
||||
* @requires jquery.fancytree.clones.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.getCloneList = function(includeSelf){
|
||||
var key,
|
||||
tree = this.tree,
|
||||
refList = tree.refMap[this.refKey] || null,
|
||||
keyMap = tree.keyMap;
|
||||
|
||||
if( refList ) {
|
||||
key = this.key;
|
||||
// Convert key list to node list
|
||||
if( includeSelf ) {
|
||||
refList = $.map(refList, function(val){ return keyMap[val]; });
|
||||
} else {
|
||||
refList = $.map(refList, function(val){ return val === key ? null : keyMap[val]; });
|
||||
if( refList.length < 1 ) {
|
||||
refList = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return refList;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-clones] Return true if this node has at least another clone with same refKey.
|
||||
* @returns {boolean}
|
||||
*
|
||||
* @alias FancytreeNode#isClone
|
||||
* @requires jquery.fancytree.clones.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.isClone = function(){
|
||||
var refKey = this.refKey || null,
|
||||
refList = refKey && this.tree.refMap[refKey] || null;
|
||||
return !!(refList && refList.length > 1);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-clones] Update key and/or refKey for an existing node.
|
||||
* @param {FancytreeNode} [node]
|
||||
* @param {string} key
|
||||
* @param {string} refKey
|
||||
* @returns {boolean}
|
||||
*
|
||||
* @alias FancytreeNode#reRegister
|
||||
* @requires jquery.fancytree.clones.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.reRegister = function(key, refKey){
|
||||
key = (key == null) ? null : "" + key;
|
||||
refKey = (refKey == null) ? null : "" + refKey;
|
||||
this.debug("reRegister", key, refKey);
|
||||
|
||||
var tree = this.tree,
|
||||
prevKey = this.key,
|
||||
prevRefKey = this.refKey,
|
||||
keyMap = tree.keyMap,
|
||||
refMap = tree.refMap,
|
||||
refList = refMap[prevRefKey] || null,
|
||||
// curCloneKeys = refList ? node.getCloneList(true),
|
||||
modified = false;
|
||||
|
||||
// Key has changed: update all references
|
||||
if( key != null && key !== this.key ) {
|
||||
if( keyMap[key] ) {
|
||||
$.error("[ext-clones] reRegister(" + key + "): already exists.");
|
||||
}
|
||||
// Update keyMap
|
||||
delete keyMap[prevKey];
|
||||
keyMap[key] = this;
|
||||
// Update refMap
|
||||
if( refList ) {
|
||||
refMap[prevRefKey] = $.map(refList, function(e){
|
||||
return e === prevKey ? key : e;
|
||||
});
|
||||
}
|
||||
this.key = key;
|
||||
modified = true;
|
||||
}
|
||||
|
||||
// refKey has changed
|
||||
if( refKey != null && refKey !== this.refKey ) {
|
||||
// Remove previous refKeys
|
||||
if( refList ){
|
||||
if( refList.length === 1 ){
|
||||
delete refMap[prevRefKey];
|
||||
}else{
|
||||
refMap[prevRefKey] = $.map(refList, function(e){
|
||||
return e === prevKey ? null : e;
|
||||
});
|
||||
}
|
||||
}
|
||||
// Add refKey
|
||||
if( refMap[refKey] ) {
|
||||
refMap[refKey].append(key);
|
||||
}else{
|
||||
refMap[refKey] = [ this.key ];
|
||||
}
|
||||
this.refKey = refKey;
|
||||
modified = true;
|
||||
}
|
||||
return modified;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-clones] Return all nodes with a given refKey (null if not found).
|
||||
* @param {string} refKey
|
||||
* @param {FancytreeNode} [rootNode] optionally restrict results to descendants of this node
|
||||
* @returns {FancytreeNode[] | null}
|
||||
* @alias Fancytree#getNodesByRef
|
||||
* @requires jquery.fancytree.clones.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.getNodesByRef = function(refKey, rootNode){
|
||||
var keyMap = this.keyMap,
|
||||
refList = this.refMap[refKey] || null;
|
||||
|
||||
if( refList ) {
|
||||
// Convert key list to node list
|
||||
if( rootNode ) {
|
||||
refList = $.map(refList, function(val){
|
||||
var node = keyMap[val];
|
||||
return node.isDescendantOf(rootNode) ? node : null;
|
||||
});
|
||||
}else{
|
||||
refList = $.map(refList, function(val){ return keyMap[val]; });
|
||||
}
|
||||
if( refList.length < 1 ) {
|
||||
refList = null;
|
||||
}
|
||||
}
|
||||
return refList;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-clones] Replace a refKey with a new one.
|
||||
* @param {string} oldRefKey
|
||||
* @param {string} newRefKey
|
||||
* @alias Fancytree#changeRefKey
|
||||
* @requires jquery.fancytree.clones.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.changeRefKey = function(oldRefKey, newRefKey) {
|
||||
var i, node,
|
||||
keyMap = this.keyMap,
|
||||
refList = this.refMap[oldRefKey] || null;
|
||||
|
||||
if (refList) {
|
||||
for (i = 0; i < refList.length; i++) {
|
||||
node = keyMap[refList[i]];
|
||||
node.refKey = newRefKey;
|
||||
}
|
||||
delete this.refMap[oldRefKey];
|
||||
this.refMap[newRefKey] = refList;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "clones",
|
||||
version: "0.0.3",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
highlightActiveClones: true, // set 'fancytree-active-clone' on active clones and all peers
|
||||
highlightClones: false // set 'fancytree-clone' class on any node that has at least one clone
|
||||
},
|
||||
|
||||
treeCreate: function(ctx){
|
||||
this._super(ctx);
|
||||
ctx.tree.refMap = {};
|
||||
ctx.tree.keyMap = {};
|
||||
},
|
||||
treeInit: function(ctx){
|
||||
this.$container.addClass("fancytree-ext-clones");
|
||||
_assert(ctx.options.defaultKey == null);
|
||||
// Generate unique / reproducible default keys
|
||||
ctx.options.defaultKey = function(node){
|
||||
return calcUniqueKey(node);
|
||||
};
|
||||
// The default implementation loads initial data
|
||||
this._super(ctx);
|
||||
},
|
||||
treeRegisterNode: function(ctx, add, node) {
|
||||
var refList, len,
|
||||
tree = ctx.tree,
|
||||
keyMap = tree.keyMap,
|
||||
refMap = tree.refMap,
|
||||
key = node.key,
|
||||
refKey = (node && node.refKey != null) ? "" + node.refKey : null;
|
||||
|
||||
// ctx.tree.debug("clones.treeRegisterNode", add, node);
|
||||
|
||||
if( key === "_statusNode" ){
|
||||
return this._super(ctx, add, node);
|
||||
}
|
||||
|
||||
if( add ) {
|
||||
if( keyMap[node.key] != null ) {
|
||||
$.error("clones.treeRegisterNode: node.key already exists: " + node.key);
|
||||
}
|
||||
keyMap[key] = node;
|
||||
if( refKey ) {
|
||||
refList = refMap[refKey];
|
||||
if( refList ) {
|
||||
refList.push(key);
|
||||
if( refList.length === 2 && ctx.options.clones.highlightClones ) {
|
||||
// Mark peer node, if it just became a clone (no need to
|
||||
// mark current node, since it will be rendered later anyway)
|
||||
keyMap[refList[0]].renderStatus();
|
||||
}
|
||||
} else {
|
||||
refMap[refKey] = [key];
|
||||
}
|
||||
node.debug("clones.treeRegisterNode: add clone =>", refMap[refKey]);
|
||||
}
|
||||
}else {
|
||||
if( keyMap[key] == null ) {
|
||||
$.error("clones.treeRegisterNode: node.key not registered: " + node.key);
|
||||
}
|
||||
delete keyMap[key];
|
||||
if( refKey ) {
|
||||
refList = refMap[refKey];
|
||||
node.debug("clones.treeRegisterNode: remove clone BEFORE =>", refMap[refKey]);
|
||||
if( refList ) {
|
||||
len = refList.length;
|
||||
if( len <= 1 ){
|
||||
_assert(len === 1);
|
||||
_assert(refList[0] === key);
|
||||
delete refMap[refKey];
|
||||
}else{
|
||||
_removeArrayMember(refList, key);
|
||||
// Unmark peer node, if this was the only clone
|
||||
if( len === 2 && ctx.options.clones.highlightClones ) {
|
||||
// node.debug("clones.treeRegisterNode: last =>", node.getCloneList());
|
||||
keyMap[refList[0]].renderStatus();
|
||||
}
|
||||
}
|
||||
node.debug("clones.treeRegisterNode: remove clone =>", refMap[refKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return this._super(ctx, add, node);
|
||||
},
|
||||
nodeRenderStatus: function(ctx) {
|
||||
var $span, res,
|
||||
node = ctx.node;
|
||||
|
||||
res = this._super(ctx);
|
||||
|
||||
if( ctx.options.clones.highlightClones ) {
|
||||
$span = $(node[ctx.tree.statusClassPropName]);
|
||||
// Only if span already exists
|
||||
if( $span.length && node.isClone() ){
|
||||
// node.debug("clones.nodeRenderStatus: ", ctx.options.clones.highlightClones);
|
||||
$span.addClass("fancytree-clone");
|
||||
}
|
||||
}
|
||||
return res;
|
||||
},
|
||||
nodeSetActive: function(ctx, flag) {
|
||||
var res,
|
||||
scpn = ctx.tree.statusClassPropName,
|
||||
node = ctx.node;
|
||||
|
||||
res = this._super(ctx, flag);
|
||||
|
||||
if( ctx.options.clones.highlightActiveClones && node.isClone() ) {
|
||||
$.each(node.getCloneList(true), function(idx, n){
|
||||
n.debug("clones.nodeSetActive: ", flag !== false);
|
||||
$(n[scpn]).toggleClass("fancytree-active-clone", flag !== false);
|
||||
});
|
||||
}
|
||||
return res;
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
149
assets/src/jquery.fancytree.columnview.js
Normal file
149
assets/src/jquery.fancytree.columnview.js
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
/*!
|
||||
* jquery.fancytree.columnview.js
|
||||
*
|
||||
* Render tree like a Mac Finder's column view.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// prevent duplicate loading
|
||||
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
||||
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
||||
// return;
|
||||
// }
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
/*
|
||||
function _assert(cond, msg){
|
||||
msg = msg || "";
|
||||
if(!cond){
|
||||
$.error("Assertion failed " + msg);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "columnview",
|
||||
version: "0.0.1",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
},
|
||||
// Overide virtual methods for this extension.
|
||||
// `this` : is this extension object
|
||||
// `this._base` : the Fancytree instance
|
||||
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
||||
treeInit: function(ctx){
|
||||
var $tdFirst, $ul,
|
||||
tree = ctx.tree,
|
||||
$table = tree.widget.element;
|
||||
|
||||
tree.tr = $("tbody tr", $table)[0];
|
||||
tree.columnCount = $(">td", tree.tr).length;
|
||||
// Perform default behavior
|
||||
this._super(ctx);
|
||||
// Standard Fancytree created a root <ul>. Now move this into first table cell
|
||||
$ul = $(tree.rootNode.ul);
|
||||
$tdFirst = $(">td", tree.tr).eq(0);
|
||||
|
||||
$ul.removeClass("fancytree-container");
|
||||
$ul.removeAttr("tabindex");
|
||||
tree.$container = $table;
|
||||
$table.addClass("fancytree-container fancytree-ext-columnview");
|
||||
$table.attr("tabindex", "0");
|
||||
|
||||
$tdFirst.empty();
|
||||
$ul.detach().appendTo($tdFirst);
|
||||
|
||||
// Force some required options
|
||||
tree.widget.options.autoCollapse = true;
|
||||
// tree.widget.options.autoActivate = true;
|
||||
tree.widget.options.fx = false;
|
||||
tree.widget.options.clickFolderMode = 1;
|
||||
|
||||
// Make sure that only active path is expanded when a node is activated:
|
||||
$table.bind("fancytreeactivate", function(event, data){
|
||||
var i, tdList,
|
||||
node = data.node,
|
||||
tree = data.tree,
|
||||
level = node.getLevel();
|
||||
|
||||
tree._callHook("nodeCollapseSiblings", node);
|
||||
// Clear right neighbours
|
||||
if(level <= tree.columnCount){
|
||||
tdList = $(">td", tree.tr);
|
||||
for(i=level; i<tree.columnCount; i++){
|
||||
tdList.eq(i).empty();
|
||||
}
|
||||
}
|
||||
// Expand nodes on activate, so we populate the right neighbor cell
|
||||
if(!node.expanded && (node.children || node.lazy)) {
|
||||
node.setExpanded();
|
||||
}
|
||||
// Adjust keyboard behaviour:
|
||||
}).bind("fancytreekeydown", function(event, data){
|
||||
var next = null;
|
||||
switch(event.which){
|
||||
case $.ui.keyCode.DOWN:
|
||||
next = data.node.getNextSibling();
|
||||
if( next ){
|
||||
next.setFocus();
|
||||
}
|
||||
return false;
|
||||
case $.ui.keyCode.LEFT:
|
||||
next = data.node.getParent();
|
||||
if( next ){
|
||||
next.setFocus();
|
||||
}
|
||||
return false;
|
||||
case $.ui.keyCode.UP:
|
||||
next = data.node.getPrevSibling();
|
||||
if( next ){
|
||||
next.setFocus();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
|
||||
// Render standard nested <ul> - <li> hierarchy
|
||||
this._super(ctx, force, deep, collapsed, _recursive);
|
||||
// Remove expander and add a trailing triangle instead
|
||||
var level, $tdChild, $ul,
|
||||
tree = ctx.tree,
|
||||
node = ctx.node,
|
||||
$span = $(node.span);
|
||||
|
||||
$span.find("span.fancytree-expander").remove();
|
||||
if(node.hasChildren() !== false && !$span.find("span.fancytree-cv-right").length){
|
||||
$span.append($("<span class='fancytree-icon fancytree-cv-right'>"));
|
||||
}
|
||||
// Move <ul> with children into the appropriate <td>
|
||||
if(node.ul){
|
||||
node.ul.style.display = ""; // might be hidden if RIGHT was pressed
|
||||
level = node.getLevel();
|
||||
if(level < tree.columnCount){
|
||||
$tdChild = $(">td", tree.tr).eq(level);
|
||||
$ul = $(node.ul).detach();
|
||||
$tdChild.empty().append($ul);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
142
assets/src/jquery.fancytree.debug.js
Normal file
142
assets/src/jquery.fancytree.debug.js
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
/*!
|
||||
* jquery.fancytree.debug.js
|
||||
*
|
||||
* Miscellaneous debug extensions.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// prevent duplicate loading
|
||||
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
||||
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
||||
// return;
|
||||
// }
|
||||
|
||||
|
||||
/* *****************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
var i,
|
||||
HOOK_NAMES = "nodeClick nodeCollapseSiblings".split(" "),
|
||||
EVENT_NAMES = "activate beforeActivate".split(" "),
|
||||
HOOK_NAME_MAP = {},
|
||||
EVENT_NAME_MAP = {};
|
||||
|
||||
for(i=0; i<HOOK_NAMES.length; i++){ HOOK_NAME_MAP[HOOK_NAMES[i]] = true; }
|
||||
for(i=0; i<EVENT_NAMES.length; i++){ EVENT_NAME_MAP[EVENT_NAMES[i]] = true; }
|
||||
|
||||
/* *****************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "tracecalls",
|
||||
version: "0.0.1",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
logTarget: null, // optional redirect logging to this <div> tag
|
||||
traceEvents: false, // `true`or list of hook names
|
||||
traceHooks: false // `true`or list of event names
|
||||
},
|
||||
// Overide virtual methods for this extension.
|
||||
// `this` : is this Fancytree object
|
||||
// `this._super`: the virtual function that was overridden (member of prev. extension or Fancytree)
|
||||
treeInit: function(ctx){
|
||||
var tree = ctx.tree;
|
||||
|
||||
// Bind init-handler to apply cookie state
|
||||
tree.$div.bind("fancytreeinit", function(event){
|
||||
tree.debug("COOKIE " + document.cookie);
|
||||
});
|
||||
// Init the tree
|
||||
this._super(ctx);
|
||||
},
|
||||
nodeClick: function(ctx) {
|
||||
if(this.options.tracecalls.traceHooks){
|
||||
this.debug();
|
||||
}
|
||||
},
|
||||
nodeCollapseSiblings: function(ctx) {
|
||||
},
|
||||
nodeDblclick: function(ctx) {
|
||||
},
|
||||
nodeKeydown: function(ctx) {
|
||||
},
|
||||
nodeLoadChildren: function(ctx, source) {
|
||||
},
|
||||
nodeOnFocusInOut: function(ctx) {
|
||||
},
|
||||
nodeRemoveChildMarkup: function(ctx) {
|
||||
},
|
||||
nodeRemoveMarkup: function(ctx) {
|
||||
},
|
||||
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
|
||||
},
|
||||
nodeRenderStatus: function(ctx) {
|
||||
},
|
||||
nodeRenderTitle: function(ctx, title) {
|
||||
},
|
||||
nodeSetActive: function(ctx, flag, opts) {
|
||||
},
|
||||
nodeSetExpanded: function(ctx, flag, opts) {
|
||||
},
|
||||
nodeSetFocus: function(ctx) {
|
||||
},
|
||||
nodeSetSelected: function(ctx, flag) {
|
||||
},
|
||||
nodeSetStatus: function(ctx, status, message, details) {
|
||||
},
|
||||
nodeToggleExpanded: function(ctx) {
|
||||
},
|
||||
nodeToggleSelected: function(ctx) {
|
||||
},
|
||||
treeClear: function(ctx) {
|
||||
},
|
||||
treeCreate: function(ctx) {
|
||||
},
|
||||
treeDestroy: function(ctx) {
|
||||
},
|
||||
// treeInit: function(ctx) {
|
||||
// },
|
||||
treeLoad: function(ctx, source) {
|
||||
},
|
||||
treeSetFocus: function(ctx, flag) {
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery, window, document));
|
||||
|
||||
|
||||
|
||||
/* *****************************************************************************
|
||||
* Fancytree extension: profiler
|
||||
*/
|
||||
;(function($, window, document, undefined) {
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "profiler",
|
||||
version: "0.0.1",
|
||||
// Default options for this extension
|
||||
options: {
|
||||
prefix: ""
|
||||
},
|
||||
// Overide virtual methods for this extension
|
||||
nodeRender: function(ctx, force, deep, collapsed){
|
||||
// ctx.tree.debug("**** PROFILER nodeRender");
|
||||
var s = this.options.prefix + "render '" + ctx.node + "'";
|
||||
/*jshint expr:true */
|
||||
window.console && window.console.time && window.console.time(s);
|
||||
this._super(ctx, force, deep, collapsed);
|
||||
window.console && window.console.timeEnd && window.console.timeEnd(s);
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
523
assets/src/jquery.fancytree.dnd.js
Normal file
523
assets/src/jquery.fancytree.dnd.js
Normal file
|
|
@ -0,0 +1,523 @@
|
|||
/*!
|
||||
* jquery.fancytree.dnd.js
|
||||
*
|
||||
* Drag-and-drop support.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/* *****************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
var logMsg = $.ui.fancytree.debug,
|
||||
didRegisterDnd = false;
|
||||
|
||||
/* Convert number to string and prepend +/-; return empty string for 0.*/
|
||||
function offsetString(n){
|
||||
return n === 0 ? "" : (( n > 0 ) ? ("+" + n) : ("" + n));
|
||||
}
|
||||
|
||||
/* *****************************************************************************
|
||||
* Drag and drop support
|
||||
*/
|
||||
function _initDragAndDrop(tree) {
|
||||
var dnd = tree.options.dnd || null;
|
||||
// Register 'connectToFancytree' option with ui.draggable
|
||||
if( dnd ) {
|
||||
_registerDnd();
|
||||
}
|
||||
// Attach ui.draggable to this Fancytree instance
|
||||
if(dnd && dnd.dragStart ) {
|
||||
tree.widget.element.draggable($.extend({
|
||||
addClasses: false,
|
||||
appendTo: "body",
|
||||
containment: false,
|
||||
delay: 0,
|
||||
distance: 4,
|
||||
// TODO: merge Dynatree issue 419
|
||||
revert: false,
|
||||
scroll: true, // issue 244: enable scrolling (if ul.fancytree-container)
|
||||
scrollSpeed: 7,
|
||||
scrollSensitivity: 10,
|
||||
// Delegate draggable.start, drag, and stop events to our handler
|
||||
connectToFancytree: true,
|
||||
// Let source tree create the helper element
|
||||
helper: function(event) {
|
||||
var sourceNode = $.ui.fancytree.getNode(event.target);
|
||||
if(!sourceNode){ // Dynatree issue 211
|
||||
// might happen, if dragging a table *header*
|
||||
return "<div>ERROR?: helper requested but sourceNode not found</div>";
|
||||
}
|
||||
return sourceNode.tree.ext.dnd._onDragEvent("helper", sourceNode, null, event, null, null);
|
||||
},
|
||||
start: function(event, ui) {
|
||||
var sourceNode = ui.helper.data("ftSourceNode");
|
||||
return !!sourceNode; // Abort dragging if no node could be found
|
||||
}
|
||||
}, tree.options.dnd.draggable));
|
||||
}
|
||||
// Attach ui.droppable to this Fancytree instance
|
||||
if(dnd && dnd.dragDrop) {
|
||||
tree.widget.element.droppable($.extend({
|
||||
addClasses: false,
|
||||
tolerance: "intersect",
|
||||
greedy: false
|
||||
/*
|
||||
activate: function(event, ui) {
|
||||
logMsg("droppable - activate", event, ui, this);
|
||||
},
|
||||
create: function(event, ui) {
|
||||
logMsg("droppable - create", event, ui);
|
||||
},
|
||||
deactivate: function(event, ui) {
|
||||
logMsg("droppable - deactivate", event, ui);
|
||||
},
|
||||
drop: function(event, ui) {
|
||||
logMsg("droppable - drop", event, ui);
|
||||
},
|
||||
out: function(event, ui) {
|
||||
logMsg("droppable - out", event, ui);
|
||||
},
|
||||
over: function(event, ui) {
|
||||
logMsg("droppable - over", event, ui);
|
||||
}
|
||||
*/
|
||||
}, tree.options.dnd.droppable));
|
||||
}
|
||||
}
|
||||
|
||||
//--- Extend ui.draggable event handling --------------------------------------
|
||||
|
||||
function _registerDnd() {
|
||||
if(didRegisterDnd){
|
||||
return;
|
||||
}
|
||||
|
||||
// Register proxy-functions for draggable.start/drag/stop
|
||||
|
||||
$.ui.plugin.add("draggable", "connectToFancytree", {
|
||||
start: function(event, ui) {
|
||||
// 'draggable' was renamed to 'ui-draggable' since jQueryUI 1.10
|
||||
var draggable = $(this).data("ui-draggable") || $(this).data("draggable"),
|
||||
sourceNode = ui.helper.data("ftSourceNode") || null;
|
||||
|
||||
if(sourceNode) {
|
||||
// Adjust helper offset, so cursor is slightly outside top/left corner
|
||||
draggable.offset.click.top = -2;
|
||||
draggable.offset.click.left = + 16;
|
||||
// Trigger dragStart event
|
||||
// TODO: when called as connectTo..., the return value is ignored(?)
|
||||
return sourceNode.tree.ext.dnd._onDragEvent("start", sourceNode, null, event, ui, draggable);
|
||||
}
|
||||
},
|
||||
drag: function(event, ui) {
|
||||
var isHelper,
|
||||
// 'draggable' was renamed to 'ui-draggable' since jQueryUI 1.10
|
||||
draggable = $(this).data("ui-draggable") || $(this).data("draggable"),
|
||||
sourceNode = ui.helper.data("ftSourceNode") || null,
|
||||
prevTargetNode = ui.helper.data("ftTargetNode") || null,
|
||||
targetNode = $.ui.fancytree.getNode(event.target);
|
||||
|
||||
if(event.target && !targetNode){
|
||||
// We got a drag event, but the targetNode could not be found
|
||||
// at the event location. This may happen,
|
||||
// 1. if the mouse jumped over the drag helper,
|
||||
// 2. or if a non-fancytree element is dragged
|
||||
// We ignore it:
|
||||
isHelper = $(event.target).closest("div.fancytree-drag-helper,#fancytree-drop-marker").length > 0;
|
||||
if(isHelper){
|
||||
logMsg("Drag event over helper: ignored.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
ui.helper.data("ftTargetNode", targetNode);
|
||||
// Leaving a tree node
|
||||
if(prevTargetNode && prevTargetNode !== targetNode ) {
|
||||
prevTargetNode.tree.ext.dnd._onDragEvent("leave", prevTargetNode, sourceNode, event, ui, draggable);
|
||||
}
|
||||
if(targetNode){
|
||||
if(!targetNode.tree.options.dnd.dragDrop) {
|
||||
// not enabled as drop target
|
||||
} else if(targetNode === prevTargetNode) {
|
||||
// Moving over same node
|
||||
targetNode.tree.ext.dnd._onDragEvent("over", targetNode, sourceNode, event, ui, draggable);
|
||||
}else{
|
||||
// Entering this node first time
|
||||
targetNode.tree.ext.dnd._onDragEvent("enter", targetNode, sourceNode, event, ui, draggable);
|
||||
}
|
||||
}
|
||||
// else go ahead with standard event handling
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
// 'draggable' was renamed to 'ui-draggable' since jQueryUI 1.10
|
||||
var draggable = $(this).data("ui-draggable") || $(this).data("draggable"),
|
||||
sourceNode = ui.helper.data("ftSourceNode") || null,
|
||||
targetNode = ui.helper.data("ftTargetNode") || null,
|
||||
// mouseDownEvent = draggable._mouseDownEvent,
|
||||
eventType = event.type,
|
||||
dropped = (eventType === "mouseup" && event.which === 1);
|
||||
|
||||
if(!dropped){
|
||||
logMsg("Drag was cancelled");
|
||||
}
|
||||
if(targetNode) {
|
||||
if(dropped){
|
||||
targetNode.tree.ext.dnd._onDragEvent("drop", targetNode, sourceNode, event, ui, draggable);
|
||||
}
|
||||
targetNode.tree.ext.dnd._onDragEvent("leave", targetNode, sourceNode, event, ui, draggable);
|
||||
}
|
||||
if(sourceNode){
|
||||
sourceNode.tree.ext.dnd._onDragEvent("stop", sourceNode, null, event, ui, draggable);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
didRegisterDnd = true;
|
||||
}
|
||||
|
||||
|
||||
/* *****************************************************************************
|
||||
*
|
||||
*/
|
||||
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "dnd",
|
||||
version: "0.1.0",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
// Make tree nodes draggable:
|
||||
dragStart: null, // Callback(sourceNode, data), return true, to enable dnd
|
||||
dragStop: null, // Callback(sourceNode, data)
|
||||
// helper: null,
|
||||
// Make tree nodes accept draggables
|
||||
autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
|
||||
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
|
||||
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
|
||||
dragEnter: null, // Callback(targetNode, data)
|
||||
dragOver: null, // Callback(targetNode, data)
|
||||
dragDrop: null, // Callback(targetNode, data)
|
||||
dragLeave: null, // Callback(targetNode, data)
|
||||
//
|
||||
draggable: null, // Additional options passed to jQuery draggable
|
||||
droppable: null // Additional options passed to jQuery droppable
|
||||
},
|
||||
|
||||
treeInit: function(ctx){
|
||||
var tree = ctx.tree;
|
||||
this._super(ctx);
|
||||
_initDragAndDrop(tree);
|
||||
},
|
||||
/* Override key handler in order to cancel dnd on escape.*/
|
||||
nodeKeydown: function(ctx) {
|
||||
var event = ctx.originalEvent;
|
||||
if( event.which === $.ui.keyCode.ESCAPE) {
|
||||
this._local._cancelDrag();
|
||||
}
|
||||
return this._super(ctx);
|
||||
},
|
||||
/* Display drop marker according to hitMode ('after', 'before', 'over', 'out', 'start', 'stop'). */
|
||||
_setDndStatus: function(sourceNode, targetNode, helper, hitMode, accept) {
|
||||
var posOpts,
|
||||
markerOffsetX = 0,
|
||||
markerAt = "center",
|
||||
instData = this._local,
|
||||
$source = sourceNode ? $(sourceNode.span) : null,
|
||||
$target = $(targetNode.span);
|
||||
|
||||
if( !instData.$dropMarker ) {
|
||||
instData.$dropMarker = $("<div id='fancytree-drop-marker'></div>")
|
||||
.hide()
|
||||
.css({"z-index": 1000})
|
||||
.prependTo($(this.$div).parent());
|
||||
// .prependTo("body");
|
||||
}
|
||||
// this.$dropMarker.attr("class", hitMode);
|
||||
if(hitMode === "after" || hitMode === "before" || hitMode === "over"){
|
||||
// $source && $source.addClass("fancytree-drag-source");
|
||||
|
||||
// $target.addClass("fancytree-drop-target");
|
||||
|
||||
switch(hitMode){
|
||||
case "before":
|
||||
instData
|
||||
.$dropMarker.removeClass("fancytree-drop-after fancytree-drop-over")
|
||||
.addClass("fancytree-drop-before");
|
||||
markerAt = "top";
|
||||
break;
|
||||
case "after":
|
||||
instData.$dropMarker.removeClass("fancytree-drop-before fancytree-drop-over")
|
||||
.addClass("fancytree-drop-after");
|
||||
markerAt = "bottom";
|
||||
break;
|
||||
default:
|
||||
instData.$dropMarker.removeClass("fancytree-drop-after fancytree-drop-before")
|
||||
.addClass("fancytree-drop-over");
|
||||
$target.addClass("fancytree-drop-target");
|
||||
markerOffsetX = 8;
|
||||
}
|
||||
|
||||
if( $.ui.fancytree.jquerySupports.positionMyOfs ){
|
||||
posOpts = {
|
||||
my: "left" + offsetString(markerOffsetX) + " center",
|
||||
at: "left " + markerAt,
|
||||
of: $target
|
||||
};
|
||||
} else {
|
||||
posOpts = {
|
||||
my: "left center",
|
||||
at: "left " + markerAt,
|
||||
of: $target,
|
||||
offset: "" + markerOffsetX + " 0"
|
||||
};
|
||||
}
|
||||
instData.$dropMarker
|
||||
.show()
|
||||
.position(posOpts);
|
||||
// helper.addClass("fancytree-drop-hover");
|
||||
} else {
|
||||
// $source && $source.removeClass("fancytree-drag-source");
|
||||
$target.removeClass("fancytree-drop-target");
|
||||
instData.$dropMarker.hide();
|
||||
// helper.removeClass("fancytree-drop-hover");
|
||||
}
|
||||
if(hitMode === "after"){
|
||||
$target.addClass("fancytree-drop-after");
|
||||
} else {
|
||||
$target.removeClass("fancytree-drop-after");
|
||||
}
|
||||
if(hitMode === "before"){
|
||||
$target.addClass("fancytree-drop-before");
|
||||
} else {
|
||||
$target.removeClass("fancytree-drop-before");
|
||||
}
|
||||
if(accept === true){
|
||||
if($source){
|
||||
$source.addClass("fancytree-drop-accept");
|
||||
}
|
||||
$target.addClass("fancytree-drop-accept");
|
||||
helper.addClass("fancytree-drop-accept");
|
||||
}else{
|
||||
if($source){
|
||||
$source.removeClass("fancytree-drop-accept");
|
||||
}
|
||||
$target.removeClass("fancytree-drop-accept");
|
||||
helper.removeClass("fancytree-drop-accept");
|
||||
}
|
||||
if(accept === false){
|
||||
if($source){
|
||||
$source.addClass("fancytree-drop-reject");
|
||||
}
|
||||
$target.addClass("fancytree-drop-reject");
|
||||
helper.addClass("fancytree-drop-reject");
|
||||
}else{
|
||||
if($source){
|
||||
$source.removeClass("fancytree-drop-reject");
|
||||
}
|
||||
$target.removeClass("fancytree-drop-reject");
|
||||
helper.removeClass("fancytree-drop-reject");
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Handles drag'n'drop functionality.
|
||||
*
|
||||
* A standard jQuery drag-and-drop process may generate these calls:
|
||||
*
|
||||
* draggable helper():
|
||||
* _onDragEvent("helper", sourceNode, null, event, null, null);
|
||||
* start:
|
||||
* _onDragEvent("start", sourceNode, null, event, ui, draggable);
|
||||
* drag:
|
||||
* _onDragEvent("leave", prevTargetNode, sourceNode, event, ui, draggable);
|
||||
* _onDragEvent("over", targetNode, sourceNode, event, ui, draggable);
|
||||
* _onDragEvent("enter", targetNode, sourceNode, event, ui, draggable);
|
||||
* stop:
|
||||
* _onDragEvent("drop", targetNode, sourceNode, event, ui, draggable);
|
||||
* _onDragEvent("leave", targetNode, sourceNode, event, ui, draggable);
|
||||
* _onDragEvent("stop", sourceNode, null, event, ui, draggable);
|
||||
*/
|
||||
_onDragEvent: function(eventName, node, otherNode, event, ui, draggable) {
|
||||
if(eventName !== "over"){
|
||||
logMsg("tree.ext.dnd._onDragEvent(%s, %o, %o) - %o", eventName, node, otherNode, this);
|
||||
}
|
||||
var $helper, nodeOfs, relPos, relPos2,
|
||||
enterResponse, hitMode, r,
|
||||
opts = this.options,
|
||||
dnd = opts.dnd,
|
||||
ctx = this._makeHookContext(node, event, {otherNode: otherNode, ui: ui, draggable: draggable}),
|
||||
res = null,
|
||||
$nodeTag = $(node.span);
|
||||
|
||||
switch (eventName) {
|
||||
case "helper":
|
||||
// Only event and node argument is available
|
||||
$helper = $("<div class='fancytree-drag-helper'><span class='fancytree-drag-helper-img' /></div>")
|
||||
.css({zIndex: 3, position: "relative"}) // so it appears above ext-wide selection bar
|
||||
.append($nodeTag.find("span.fancytree-title").clone());
|
||||
// DT issue 244: helper should be child of scrollParent
|
||||
$("ul.fancytree-container", node.tree.$div).append($helper);
|
||||
// Attach node reference to helper object
|
||||
$helper.data("ftSourceNode", node);
|
||||
// logMsg("helper=%o", $helper);
|
||||
// logMsg("helper.sourceNode=%o", $helper.data("ftSourceNode"));
|
||||
res = $helper;
|
||||
break;
|
||||
|
||||
case "start":
|
||||
if( node.isStatusNode() ) {
|
||||
res = false;
|
||||
} else if(dnd.dragStart) {
|
||||
res = dnd.dragStart(node, ctx);
|
||||
}
|
||||
if(res === false) {
|
||||
this.debug("tree.dragStart() cancelled");
|
||||
//draggable._clear();
|
||||
// NOTE: the return value seems to be ignored (drag is not canceled, when false is returned)
|
||||
// TODO: call this._cancelDrag()?
|
||||
ui.helper.trigger("mouseup")
|
||||
.hide();
|
||||
} else {
|
||||
$nodeTag.addClass("fancytree-drag-source");
|
||||
}
|
||||
break;
|
||||
|
||||
case "enter":
|
||||
if(dnd.preventRecursiveMoves && node.isDescendantOf(otherNode)){
|
||||
r = false;
|
||||
}else{
|
||||
r = dnd.dragEnter ? dnd.dragEnter(node, ctx) : null;
|
||||
}
|
||||
if(!r){
|
||||
// convert null, undefined, false to false
|
||||
res = false;
|
||||
}else if ( $.isArray(r) ) {
|
||||
// TODO: also accept passing an object of this format directly
|
||||
res = {
|
||||
over: ($.inArray("over", r) >= 0),
|
||||
before: ($.inArray("before", r) >= 0),
|
||||
after: ($.inArray("after", r) >= 0)
|
||||
};
|
||||
}else{
|
||||
res = {
|
||||
over: ((r === true) || (r === "over")),
|
||||
before: ((r === true) || (r === "before")),
|
||||
after: ((r === true) || (r === "after"))
|
||||
};
|
||||
}
|
||||
ui.helper.data("enterResponse", res);
|
||||
logMsg("helper.enterResponse: %o", res);
|
||||
break;
|
||||
|
||||
case "over":
|
||||
enterResponse = ui.helper.data("enterResponse");
|
||||
hitMode = null;
|
||||
if(enterResponse === false){
|
||||
// Don't call dragOver if onEnter returned false.
|
||||
// break;
|
||||
} else if(typeof enterResponse === "string") {
|
||||
// Use hitMode from onEnter if provided.
|
||||
hitMode = enterResponse;
|
||||
} else {
|
||||
// Calculate hitMode from relative cursor position.
|
||||
nodeOfs = $nodeTag.offset();
|
||||
relPos = { x: event.pageX - nodeOfs.left,
|
||||
y: event.pageY - nodeOfs.top };
|
||||
relPos2 = { x: relPos.x / $nodeTag.width(),
|
||||
y: relPos.y / $nodeTag.height() };
|
||||
|
||||
if( enterResponse.after && relPos2.y > 0.75 ){
|
||||
hitMode = "after";
|
||||
} else if(!enterResponse.over && enterResponse.after && relPos2.y > 0.5 ){
|
||||
hitMode = "after";
|
||||
} else if(enterResponse.before && relPos2.y <= 0.25) {
|
||||
hitMode = "before";
|
||||
} else if(!enterResponse.over && enterResponse.before && relPos2.y <= 0.5) {
|
||||
hitMode = "before";
|
||||
} else if(enterResponse.over) {
|
||||
hitMode = "over";
|
||||
}
|
||||
// Prevent no-ops like 'before source node'
|
||||
// TODO: these are no-ops when moving nodes, but not in copy mode
|
||||
if( dnd.preventVoidMoves ){
|
||||
if(node === otherNode){
|
||||
logMsg(" drop over source node prevented");
|
||||
hitMode = null;
|
||||
}else if(hitMode === "before" && otherNode && node === otherNode.getNextSibling()){
|
||||
logMsg(" drop after source node prevented");
|
||||
hitMode = null;
|
||||
}else if(hitMode === "after" && otherNode && node === otherNode.getPrevSibling()){
|
||||
logMsg(" drop before source node prevented");
|
||||
hitMode = null;
|
||||
}else if(hitMode === "over" && otherNode && otherNode.parent === node && otherNode.isLastSibling() ){
|
||||
logMsg(" drop last child over own parent prevented");
|
||||
hitMode = null;
|
||||
}
|
||||
}
|
||||
// logMsg("hitMode: %s - %s - %s", hitMode, (node.parent === otherNode), node.isLastSibling());
|
||||
ui.helper.data("hitMode", hitMode);
|
||||
}
|
||||
// Auto-expand node (only when 'over' the node, not 'before', or 'after')
|
||||
if(hitMode === "over" && dnd.autoExpandMS && node.hasChildren() !== false && !node.expanded) {
|
||||
node.scheduleAction("expand", dnd.autoExpandMS);
|
||||
}
|
||||
if(hitMode && dnd.dragOver){
|
||||
// TODO: http://code.google.com/p/dynatree/source/detail?r=625
|
||||
ctx.hitMode = hitMode;
|
||||
res = dnd.dragOver(node, ctx);
|
||||
}
|
||||
// DT issue 332
|
||||
// this._setDndStatus(otherNode, node, ui.helper, hitMode, res!==false);
|
||||
this._local._setDndStatus(otherNode, node, ui.helper, hitMode, res!==false && hitMode !== null);
|
||||
break;
|
||||
|
||||
case "drop":
|
||||
hitMode = ui.helper.data("hitMode");
|
||||
if(hitMode && dnd.dragDrop){
|
||||
ctx.hitMode = hitMode;
|
||||
dnd.dragDrop(node, ctx);
|
||||
}
|
||||
break;
|
||||
|
||||
case "leave":
|
||||
// Cancel pending expand request
|
||||
node.scheduleAction("cancel");
|
||||
ui.helper.data("enterResponse", null);
|
||||
ui.helper.data("hitMode", null);
|
||||
this._local._setDndStatus(otherNode, node, ui.helper, "out", undefined);
|
||||
if(dnd.dragLeave){
|
||||
dnd.dragLeave(node, ctx);
|
||||
}
|
||||
break;
|
||||
|
||||
case "stop":
|
||||
$nodeTag.removeClass("fancytree-drag-source");
|
||||
if(dnd.dragStop){
|
||||
dnd.dragStop(node, ctx);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
$.error("Unsupported drag event: " + eventName);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
|
||||
_cancelDrag: function() {
|
||||
var dd = $.ui.ddmanager.current;
|
||||
if(dd){
|
||||
dd.cancel();
|
||||
}
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
314
assets/src/jquery.fancytree.edit.js
Normal file
314
assets/src/jquery.fancytree.edit.js
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
/*!
|
||||
* jquery.fancytree.edit.js
|
||||
*
|
||||
* Make node titles editable.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
|
||||
var isMac = /Mac/.test(navigator.platform),
|
||||
escapeHtml = $.ui.fancytree.escapeHtml,
|
||||
unescapeHtml = $.ui.fancytree.unescapeHtml;
|
||||
// modifiers = {shift: "shiftKey", ctrl: "ctrlKey", alt: "altKey", meta: "metaKey"},
|
||||
// specialKeys = {
|
||||
// 8: "backspace", 9: "tab", 10: "return", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
|
||||
// 20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
|
||||
// 37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
|
||||
// 96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
|
||||
// 104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
|
||||
// 112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
|
||||
// 120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
|
||||
// 220: "\\", 222: "'", 224: "meta"
|
||||
// },
|
||||
// shiftNums = {
|
||||
// "`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
|
||||
// "8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
|
||||
// ".": ">", "/": "?", "\\": "|"
|
||||
// };
|
||||
|
||||
|
||||
// $.ui.fancytree.isKeydownEvent = function(e, code){
|
||||
// var i, part, partmap, partlist = code.split("+"), len = parts.length;
|
||||
// var c = String.fromCharCode(e.which).toLowerCase();
|
||||
// for( i = 0; i < len; i++ ) {
|
||||
// }
|
||||
// alert (parts.unshift());
|
||||
// alert (parts.unshift());
|
||||
// alert (parts.unshift());
|
||||
// };
|
||||
|
||||
|
||||
/**
|
||||
* [ext-edit] Start inline editing of current node title.
|
||||
*
|
||||
* @alias FancytreeNode#editStart
|
||||
* @requires Fancytree
|
||||
*/
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.editStart = function(){
|
||||
var $input,
|
||||
node = this,
|
||||
tree = this.tree,
|
||||
local = tree.ext.edit,
|
||||
prevTitle = node.title,
|
||||
instOpts = tree.options.edit,
|
||||
$title = $(".fancytree-title", node.span),
|
||||
eventData = {node: node, tree: tree, options: tree.options};
|
||||
|
||||
if( instOpts.beforeEdit.call(node, {type: "beforeEdit"}, eventData) === false){
|
||||
return false;
|
||||
}
|
||||
// beforeEdit may want to modify the title before editing
|
||||
prevTitle = node.title;
|
||||
|
||||
node.debug("editStart");
|
||||
// Disable standard Fancytree mouse- and key handling
|
||||
tree.widget._unbind();
|
||||
// #116: ext-dnd prevents the blur event, so we have to catch outer clicks
|
||||
$(document).on("mousedown.fancytree-edit", function(event){
|
||||
if( ! $(event.target).hasClass("fancytree-edit-input") ){
|
||||
node.editEnd(true, event);
|
||||
}
|
||||
});
|
||||
|
||||
// Replace node with <input>
|
||||
$input = $("<input />", {
|
||||
"class": "fancytree-edit-input",
|
||||
value: unescapeHtml(prevTitle)
|
||||
});
|
||||
if ( instOpts.adjustWidthOfs != null ) {
|
||||
$input.width($title.width() + instOpts.adjustWidthOfs);
|
||||
}
|
||||
if ( instOpts.inputCss != null ) {
|
||||
$input.css(instOpts.inputCss);
|
||||
}
|
||||
eventData.input = $input;
|
||||
|
||||
$title.html($input);
|
||||
|
||||
$.ui.fancytree.assert(!local.currentNode, "recursive edit");
|
||||
local.currentNode = this;
|
||||
// Focus <input> and bind keyboard handler
|
||||
$input
|
||||
.focus()
|
||||
.change(function(event){
|
||||
$input.addClass("fancytree-edit-dirty");
|
||||
}).keydown(function(event){
|
||||
switch( event.which ) {
|
||||
case $.ui.keyCode.ESCAPE:
|
||||
node.editEnd(false, event);
|
||||
break;
|
||||
case $.ui.keyCode.ENTER:
|
||||
node.editEnd(true, event);
|
||||
return false; // so we don't start editmode on Mac
|
||||
}
|
||||
}).blur(function(event){
|
||||
return node.editEnd(true, event);
|
||||
});
|
||||
|
||||
instOpts.edit.call(node, {type: "edit"}, eventData);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-edit] Stop inline editing.
|
||||
* @param {Boolean} [applyChanges=false]
|
||||
* @alias FancytreeNode#editEnd
|
||||
* @requires jquery.fancytree.edit.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.editEnd = function(applyChanges, _event){
|
||||
var node = this,
|
||||
tree = this.tree,
|
||||
local = tree.ext.edit,
|
||||
instOpts = tree.options.edit,
|
||||
$title = $(".fancytree-title", node.span),
|
||||
$input = $title.find("input.fancytree-edit-input"),
|
||||
newVal = $input.val(),
|
||||
dirty = $input.hasClass("fancytree-edit-dirty"),
|
||||
doSave = (applyChanges || (dirty && applyChanges !== false)) && (newVal !== node.title),
|
||||
eventData = {
|
||||
node: node, tree: tree, options: tree.options, originalEvent: _event,
|
||||
dirty: dirty,
|
||||
save: doSave,
|
||||
input: $input,
|
||||
value: newVal
|
||||
};
|
||||
|
||||
if( instOpts.beforeClose.call(node, {type: "beforeClose"}, eventData) === false){
|
||||
return false;
|
||||
}
|
||||
if( doSave && instOpts.save.call(node, {type: "save"}, eventData) === false){
|
||||
return false;
|
||||
}
|
||||
$input
|
||||
.removeClass("fancytree-edit-dirty")
|
||||
.unbind();
|
||||
// Unbind outer-click handler
|
||||
$(document).off(".fancytree-edit");
|
||||
|
||||
if( doSave ) {
|
||||
node.setTitle( escapeHtml(newVal) );
|
||||
}else{
|
||||
node.renderTitle();
|
||||
}
|
||||
// Re-enable mouse and keyboard handling
|
||||
tree.widget._bind();
|
||||
local.currentNode = null;
|
||||
node.setFocus();
|
||||
// Set keyboard focus, even if setFocus() claims 'nothing to do'
|
||||
$(tree.$container).focus();
|
||||
eventData.input = null;
|
||||
instOpts.close.call(node, {type: "close"}, eventData);
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.startEdit = function(){
|
||||
this.warn("FancytreeNode.startEdit() is deprecated since 2014-01-04. Use .editStart() instead.");
|
||||
return this.editStart.apply(this, arguments);
|
||||
};
|
||||
|
||||
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.endEdit = function(){
|
||||
this.warn("FancytreeNode.endEdit() is deprecated since 2014-01-04. Use .editEnd() instead.");
|
||||
return this.editEnd.apply(this, arguments);
|
||||
};
|
||||
|
||||
|
||||
///**
|
||||
// * Create a new child or sibling node.
|
||||
// *
|
||||
// * @param {String} [mode] 'before', 'after', or 'child'
|
||||
// * @lends FancytreeNode.prototype
|
||||
// * @requires jquery.fancytree.edit.js
|
||||
// */
|
||||
//$.ui.fancytree._FancytreeNodeClass.prototype.editCreateNode = function(mode){
|
||||
// var newNode,
|
||||
// node = this,
|
||||
// tree = this.tree,
|
||||
// local = tree.ext.edit,
|
||||
// instOpts = tree.options.edit,
|
||||
// $title = $(".fancytree-title", node.span),
|
||||
// $input = $title.find("input.fancytree-edit-input"),
|
||||
// newVal = $input.val(),
|
||||
// dirty = $input.hasClass("fancytree-edit-dirty"),
|
||||
// doSave = (applyChanges || (dirty && applyChanges !== false)) && (newVal !== node.title),
|
||||
// eventData = {
|
||||
// node: node, tree: tree, options: tree.options, originalEvent: _event,
|
||||
// dirty: dirty,
|
||||
// save: doSave,
|
||||
// input: $input,
|
||||
// value: newVal
|
||||
// };
|
||||
//
|
||||
// node.debug("editCreate");
|
||||
//
|
||||
// if( instOpts.beforeEdit.call(node, {type: "beforeCreateNode"}, eventData) === false){
|
||||
// return false;
|
||||
// }
|
||||
// newNode = this.addNode({title: "Neuer Knoten"}, mode);
|
||||
//
|
||||
// newNode.editStart();
|
||||
//};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-edit] Check if any node in this tree in edit mode.
|
||||
*
|
||||
* @returns {FancytreeNode | null}
|
||||
* @alias Fancytree#isEditing
|
||||
* @requires jquery.fancytree.edit.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.isEditing = function(){
|
||||
return this.ext.edit.currentNode;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-edit] Check if this node is in edit mode.
|
||||
* @returns {Boolean} true if node is currently beeing edited
|
||||
* @alias FancytreeNode#isEditing
|
||||
* @requires jquery.fancytree.edit.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeNodeClass.prototype.isEditing = function(){
|
||||
return this.tree.ext.edit.currentNode === this;
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "edit",
|
||||
version: "0.1.0",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
adjustWidthOfs: 4, // null: don't adjust input size to content
|
||||
inputCss: {minWidth: "3em"},
|
||||
triggerCancel: ["esc", "tab", "click"],
|
||||
// triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
|
||||
triggerStart: ["f2", "shift+click", "mac+enter"],
|
||||
beforeClose: $.noop, // Return false to prevent cancel/save (data.input is available)
|
||||
beforeEdit: $.noop, // Return false to prevent edit mode
|
||||
close: $.noop, // Editor was removed
|
||||
edit: $.noop, // Editor was opened (available as data.input)
|
||||
// keypress: $.noop, // Not yet implemented
|
||||
save: $.noop // Save data.input.val() or return false to keep editor open
|
||||
},
|
||||
// Local attributes
|
||||
currentNode: null,
|
||||
|
||||
treeInit: function(ctx){
|
||||
this._super(ctx);
|
||||
this.$container.addClass("fancytree-ext-edit");
|
||||
},
|
||||
nodeClick: function(ctx) {
|
||||
if( $.inArray("shift+click", ctx.options.edit.triggerStart) >= 0 ){
|
||||
if( ctx.originalEvent.shiftKey ){
|
||||
ctx.node.editStart();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return this._super(ctx);
|
||||
},
|
||||
nodeDblclick: function(ctx) {
|
||||
if( $.inArray("dblclick", ctx.options.edit.triggerStart) >= 0 ){
|
||||
ctx.node.editStart();
|
||||
return false;
|
||||
}
|
||||
return this._super(ctx);
|
||||
},
|
||||
nodeKeydown: function(ctx) {
|
||||
switch( ctx.originalEvent.which ) {
|
||||
case 113: // [F2]
|
||||
if( $.inArray("f2", ctx.options.edit.triggerStart) >= 0 ){
|
||||
ctx.node.editStart();
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
case $.ui.keyCode.ENTER:
|
||||
if( $.inArray("mac+enter", ctx.options.edit.triggerStart) >= 0 && isMac ){
|
||||
ctx.node.editStart();
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
return this._super(ctx);
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
161
assets/src/jquery.fancytree.filter.js
Normal file
161
assets/src/jquery.fancytree.filter.js
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
/*!
|
||||
* jquery.fancytree.filter.js
|
||||
*
|
||||
* Remove or highlight tree nodes, based on a filter.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
|
||||
function _escapeRegex(str){
|
||||
/*jshint regexdash:true */
|
||||
return (str + "").replace(/([.?*+\^\$\[\]\\(){}|-])/g, "\\$1");
|
||||
}
|
||||
|
||||
$.ui.fancytree._FancytreeClass.prototype._applyFilterImpl = function(filter, branchMode, leavesOnly){
|
||||
var match, re,
|
||||
count = 0,
|
||||
hideMode = this.options.filter.mode === "hide";
|
||||
// leavesOnly = !branchMode && this.options.filter.leavesOnly;
|
||||
leavesOnly = !!leavesOnly && !branchMode;
|
||||
|
||||
// Default to 'match title substring (not case sensitive)'
|
||||
if(typeof filter === "string"){
|
||||
match = _escapeRegex(filter); // make sure a '.' is treated literally
|
||||
re = new RegExp(".*" + match + ".*", "i");
|
||||
filter = function(node){
|
||||
return !!re.exec(node.title);
|
||||
};
|
||||
}
|
||||
|
||||
this.enableFilter = true;
|
||||
this.$div.addClass("fancytree-ext-filter");
|
||||
if( hideMode ){
|
||||
this.$div.addClass("fancytree-ext-filter-hide");
|
||||
} else {
|
||||
this.$div.addClass("fancytree-ext-filter-dimm");
|
||||
}
|
||||
// Reset current filter
|
||||
this.visit(function(node){
|
||||
delete node.match;
|
||||
delete node.subMatch;
|
||||
});
|
||||
// Adjust node.hide, .match, .subMatch flags
|
||||
this.visit(function(node){
|
||||
if ((!leavesOnly || node.children == null) && filter(node)) {
|
||||
count++;
|
||||
node.match = true;
|
||||
node.visitParents(function(p){
|
||||
p.subMatch = true;
|
||||
});
|
||||
if( branchMode ) {
|
||||
node.visit(function(p){
|
||||
p.match = true;
|
||||
});
|
||||
return "skip";
|
||||
}
|
||||
}
|
||||
});
|
||||
// Redraw
|
||||
this.render();
|
||||
return count;
|
||||
};
|
||||
|
||||
/**
|
||||
* [ext-filter] Dimm or hide nodes.
|
||||
*
|
||||
* @param {function | string} filter
|
||||
* @param {boolean} [leavesOnly=false]
|
||||
* @returns {integer} count
|
||||
* @alias Fancytree#filterNodes
|
||||
* @requires jquery.fancytree.filter.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.filterNodes = function(filter, leavesOnly){
|
||||
return this._applyFilterImpl(filter, false, leavesOnly);
|
||||
};
|
||||
|
||||
$.ui.fancytree._FancytreeClass.prototype.applyFilter = function(filter){
|
||||
this.warn("Fancytree.applyFilter() is deprecated since 2014-05-10. Use .filterNodes() instead.");
|
||||
return this.filterNodes.apply(this, arguments);
|
||||
};
|
||||
|
||||
/**
|
||||
* [ext-filter] Dimm or hide whole branches.
|
||||
*
|
||||
* @param {function | string} filter
|
||||
* @returns {integer} count
|
||||
* @alias Fancytree#filterBranches
|
||||
* @requires jquery.fancytree.filter.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.filterBranches = function(filter){
|
||||
return this._applyFilterImpl(filter, true, null);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-filter] Reset the filter.
|
||||
*
|
||||
* @alias Fancytree#clearFilter
|
||||
* @requires jquery.fancytree.filter.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.clearFilter = function(){
|
||||
this.visit(function(node){
|
||||
delete node.match;
|
||||
delete node.subMatch;
|
||||
});
|
||||
this.enableFilter = false;
|
||||
this.$div.removeClass("fancytree-ext-filter fancytree-ext-filter-dimm fancytree-ext-filter-hide");
|
||||
this.render();
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "filter",
|
||||
version: "0.2.0",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
mode: "dimm"
|
||||
// leavesOnly: false
|
||||
},
|
||||
treeInit: function(ctx){
|
||||
this._super(ctx);
|
||||
},
|
||||
nodeRenderStatus: function(ctx) {
|
||||
// Set classes for current status
|
||||
var res,
|
||||
node = ctx.node,
|
||||
tree = ctx.tree,
|
||||
$span = $(node[tree.statusClassPropName]);
|
||||
|
||||
res = this._super(ctx);
|
||||
// nothing to do, if node was not yet rendered
|
||||
if( !$span.length || !tree.enableFilter ) {
|
||||
return res;
|
||||
}
|
||||
$span
|
||||
.toggleClass("fancytree-match", !!node.match)
|
||||
.toggleClass("fancytree-submatch", !!node.subMatch)
|
||||
.toggleClass("fancytree-hide", !(node.match || node.subMatch));
|
||||
|
||||
return res;
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
127
assets/src/jquery.fancytree.glyph.js
Normal file
127
assets/src/jquery.fancytree.glyph.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/*!
|
||||
* jquery.fancytree.glyph.js
|
||||
*
|
||||
* Use glyph fonts as instead of icon sprites.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/* *****************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
|
||||
function _getIcon(opts, type){
|
||||
return opts.map[type];
|
||||
}
|
||||
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "glyph",
|
||||
version: "0.1.0",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
prefix: "icon-",
|
||||
extra: null,
|
||||
map: {
|
||||
doc: "icon-file-alt",
|
||||
docOpen: "icon-file-alt",
|
||||
checkbox: "icon-check-empty",
|
||||
checkboxSelected: "icon-check",
|
||||
checkboxUnknown: "icon-check icon-muted",
|
||||
error: "icon-exclamation-sign",
|
||||
expanderClosed: "icon-caret-right",
|
||||
expanderLazy: "icon-angle-right",
|
||||
expanderOpen: "icon-caret-down",
|
||||
folder: "icon-folder-close-alt",
|
||||
folderOpen: "icon-folder-open-alt",
|
||||
loading: "icon-refresh icon-spin",
|
||||
noExpander: ""
|
||||
},
|
||||
icon: null // TODO: allow callback here
|
||||
},
|
||||
|
||||
treeInit: function(ctx){
|
||||
var tree = ctx.tree;
|
||||
this._super(ctx);
|
||||
tree.$container.addClass("fancytree-ext-glyph");
|
||||
},
|
||||
nodeRenderStatus: function(ctx) {
|
||||
var icon, span,
|
||||
node = ctx.node,
|
||||
opts = ctx.options.glyph,
|
||||
// callback = opts.icon,
|
||||
map = opts.map
|
||||
// prefix = opts.prefix
|
||||
// $span = $(node.span)
|
||||
;
|
||||
|
||||
this._super(ctx);
|
||||
|
||||
if( node.isRoot() ){
|
||||
return;
|
||||
}
|
||||
|
||||
span = $("span.fancytree-expander", node.span).get(0);
|
||||
if( span ){
|
||||
if( node.isLoading() ){
|
||||
icon = "loading";
|
||||
}else if( node.expanded ){
|
||||
icon = "expanderOpen";
|
||||
}else if( node.isUndefined() ){
|
||||
icon = "expanderLazy";
|
||||
}else if( node.hasChildren() ){
|
||||
icon = "expanderClosed";
|
||||
}else{
|
||||
icon = "noExpander";
|
||||
}
|
||||
span.className = "fancytree-expander " + map[icon];
|
||||
}
|
||||
|
||||
span = $("span.fancytree-checkbox", node.tr || node.span).get(0);
|
||||
if( span ){
|
||||
icon = node.selected ? "checkboxSelected" : (node.partsel ? "checkboxUnknown" : "checkbox");
|
||||
span.className = "fancytree-checkbox " + map[icon];
|
||||
}
|
||||
|
||||
span = $("span.fancytree-icon", node.span).get(0);
|
||||
if( span ){
|
||||
if( node.folder ){
|
||||
icon = node.expanded ? _getIcon(opts, "folderOpen") : _getIcon(opts, "folder");
|
||||
}else{
|
||||
icon = node.expanded ? _getIcon(opts, "docOpen") : _getIcon(opts, "doc");
|
||||
}
|
||||
span.className = "fancytree-icon " + icon;
|
||||
}
|
||||
},
|
||||
nodeSetStatus: function(ctx, status, message, details) {
|
||||
var span,
|
||||
opts = ctx.options.glyph,
|
||||
node = ctx.node;
|
||||
|
||||
this._super(ctx, status, message, details);
|
||||
|
||||
if(node.parent){
|
||||
span = $("span.fancytree-expander", node.span).get(0);
|
||||
}else{
|
||||
span = $(".fancytree-statusnode-wait, .fancytree-statusnode-error", node[this.nodeContainerAttrName])
|
||||
.find("span.fancytree-expander").get(0);
|
||||
}
|
||||
if( status === "loading"){
|
||||
// $("span.fancytree-expander", ctx.node.span).addClass(_getIcon(opts, "loading"));
|
||||
span.className = "fancytree-expander " + _getIcon(opts, "loading");
|
||||
}else if( status === "error"){
|
||||
span.className = "fancytree-expander " + _getIcon(opts, "error");
|
||||
}
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
199
assets/src/jquery.fancytree.gridnav.js
Normal file
199
assets/src/jquery.fancytree.gridnav.js
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
/*!
|
||||
* jquery.fancytree.gridnav.js
|
||||
*
|
||||
* Support keyboard navigation for trees with embedded input controls.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
|
||||
// Allow these navigation keys even when input controls are focused
|
||||
|
||||
var KC = $.ui.keyCode,
|
||||
// which keys are *not* handled by embedded control, but passed to tree
|
||||
// navigation handler:
|
||||
NAV_KEYS = {
|
||||
"text": [KC.UP, KC.DOWN],
|
||||
"checkbox": [KC.UP, KC.DOWN, KC.LEFT, KC.RIGHT],
|
||||
"radiobutton": [KC.UP, KC.DOWN, KC.LEFT, KC.RIGHT],
|
||||
"select-one": [KC.LEFT, KC.RIGHT],
|
||||
"select-multiple": [KC.LEFT, KC.RIGHT]
|
||||
};
|
||||
|
||||
|
||||
/* Calculate TD column index (considering colspans).*/
|
||||
function getColIdx($tr, $td) {
|
||||
var colspan,
|
||||
td = $td.get(0),
|
||||
idx = 0;
|
||||
|
||||
$tr.children().each(function () {
|
||||
if( this === td ) {
|
||||
return false;
|
||||
}
|
||||
colspan = $(this).prop("colspan");
|
||||
idx += colspan ? colspan : 1;
|
||||
});
|
||||
return idx;
|
||||
}
|
||||
|
||||
|
||||
/* Find TD at given column index (considering colspans).*/
|
||||
function findTdAtColIdx($tr, colIdx) {
|
||||
var colspan,
|
||||
res = null,
|
||||
idx = 0;
|
||||
|
||||
$tr.children().each(function () {
|
||||
if( idx >= colIdx ) {
|
||||
res = $(this);
|
||||
return false;
|
||||
}
|
||||
colspan = $(this).prop("colspan");
|
||||
idx += colspan ? colspan : 1;
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
|
||||
/* Find adjacent cell for a given direction. Skip empty cells and consider merged cells */
|
||||
function findNeighbourTd($target, keyCode){
|
||||
var $tr, colIdx,
|
||||
$td = $target.closest("td"),
|
||||
$tdNext = null;
|
||||
|
||||
switch( keyCode ){
|
||||
case KC.LEFT:
|
||||
$tdNext = $td.prev();
|
||||
break;
|
||||
case KC.RIGHT:
|
||||
$tdNext = $td.next();
|
||||
break;
|
||||
case KC.UP:
|
||||
case KC.DOWN:
|
||||
$tr = $td.parent();
|
||||
colIdx = getColIdx($tr, $td);
|
||||
while( true ) {
|
||||
$tr = (keyCode === KC.UP) ? $tr.prev() : $tr.next();
|
||||
if( !$tr.length ) {
|
||||
break;
|
||||
}
|
||||
// Skip hidden rows
|
||||
if( $tr.is(":hidden") ) {
|
||||
continue;
|
||||
}
|
||||
// Find adjacent cell in the same column
|
||||
$tdNext = findTdAtColIdx($tr, colIdx);
|
||||
// Skip cells that don't conatain a focusable element
|
||||
if( $tdNext && $tdNext.find(":input").length ) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
return $tdNext;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "gridnav",
|
||||
version: "0.0.1",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
autofocusInput: false, // Focus first embedded input if node gets activated
|
||||
handleCursorKeys: true // Allow UP/DOWN in inputs to move to prev/next node
|
||||
},
|
||||
|
||||
treeInit: function(ctx){
|
||||
// gridnav requires the table extension to be loaded before itself
|
||||
this._requireExtension("table", true, true);
|
||||
this._super(ctx);
|
||||
|
||||
this.$container.addClass("fancytree-ext-gridnav");
|
||||
|
||||
// Activate node if embedded input gets focus (due to a click)
|
||||
this.$container.on("focusin", function(event){
|
||||
var ctx2,
|
||||
node = $.ui.fancytree.getNode(event.target);
|
||||
|
||||
if( node && !node.isActive() ){
|
||||
// Call node.setActive(), but also pass the event
|
||||
ctx2 = ctx.tree._makeHookContext(node, event);
|
||||
ctx.tree._callHook("nodeSetActive", ctx2, true);
|
||||
}
|
||||
});
|
||||
},
|
||||
nodeSetActive: function(ctx, flag) {
|
||||
var $outer,
|
||||
opts = ctx.options.gridnav,
|
||||
node = ctx.node,
|
||||
event = ctx.originalEvent || {},
|
||||
triggeredByInput = $(event.target).is(":input");
|
||||
|
||||
flag = (flag !== false);
|
||||
|
||||
this._super(ctx, flag);
|
||||
|
||||
if( flag ){
|
||||
if( ctx.options.titlesTabbable ){
|
||||
if( !triggeredByInput ) {
|
||||
$(node.span).find("span.fancytree-title").focus();
|
||||
node.setFocus();
|
||||
}
|
||||
// If one node is tabbable, the container no longer needs to be
|
||||
ctx.tree.$container.attr("tabindex", "-1");
|
||||
// ctx.tree.$container.removeAttr("tabindex");
|
||||
} else if( opts.autofocusInput && !triggeredByInput ){
|
||||
// Set focus to input sub input (if node was clicked, but not
|
||||
// when TAB was pressed )
|
||||
$outer = $(node.tr || node.span);
|
||||
$outer.find(":input:enabled:first").focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeKeydown: function(ctx) {
|
||||
var inputType, handleKeys, $td,
|
||||
opts = ctx.options.gridnav,
|
||||
event = ctx.originalEvent,
|
||||
$target = $(event.target);
|
||||
|
||||
// jQuery
|
||||
inputType = $target.is(":input:enabled") ? $target.prop("type") : null;
|
||||
// ctx.tree.debug("ext-gridnav nodeKeydown", event, inputType);
|
||||
|
||||
if( inputType && opts.handleCursorKeys ){
|
||||
handleKeys = NAV_KEYS[inputType];
|
||||
if( handleKeys && $.inArray(event.which, handleKeys) >= 0 ){
|
||||
$td = findNeighbourTd($target, event.which);
|
||||
// ctx.node.debug("ignore keydown in input", event.which, handleKeys);
|
||||
if( $td && $td.length ) {
|
||||
$td.find(":input:enabled").focus();
|
||||
// Prevent Fancytree default navigation
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
ctx.tree.debug("ext-gridnav NOT HANDLED", event, inputType);
|
||||
return this._super(ctx);
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
4070
assets/src/jquery.fancytree.js
Normal file
4070
assets/src/jquery.fancytree.js
Normal file
File diff suppressed because it is too large
Load diff
155
assets/src/jquery.fancytree.menu.js
Normal file
155
assets/src/jquery.fancytree.menu.js
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
/*!
|
||||
* jquery.fancytree.menu.js
|
||||
*
|
||||
* Enable jQuery UI Menu as context menu for tree nodes.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* @see http://api.jqueryui.com/menu/
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// prevent duplicate loading
|
||||
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
|
||||
// $.ui.fancytree.warn("Fancytree: duplicate include");
|
||||
// return;
|
||||
// }
|
||||
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "menu",
|
||||
version: "0.0.1",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
enable: true,
|
||||
selector: null, //
|
||||
position: {}, //
|
||||
// Events:
|
||||
create: $.noop, //
|
||||
beforeOpen: $.noop, //
|
||||
open: $.noop, //
|
||||
focus: $.noop, //
|
||||
select: $.noop, //
|
||||
close: $.noop //
|
||||
},
|
||||
// Override virtual methods for this extension.
|
||||
// `this` : is this extension object
|
||||
// `this._base` : the Fancytree instance
|
||||
// `this._super`: the virtual function that was overridden (member of prev. extension or Fancytree)
|
||||
treeInit: function(ctx){
|
||||
var opts = ctx.options,
|
||||
tree = ctx.tree;
|
||||
|
||||
this._super(ctx);
|
||||
|
||||
// Prepare an object that will be passed with menu events
|
||||
tree.ext.menu.data = {
|
||||
tree: tree,
|
||||
node: null,
|
||||
$menu: null,
|
||||
menuId: null
|
||||
};
|
||||
|
||||
// tree.$container[0].oncontextmenu = function() {return false;};
|
||||
// Replace the standard browser context menu with out own
|
||||
tree.$container.delegate("span.fancytree-node", "contextmenu", function(event) {
|
||||
var node = $.ui.fancytree.getNode(event),
|
||||
ctx = {node: node, tree: node.tree, originalEvent: event, options: tree.options};
|
||||
tree.ext.menu._openMenu(ctx);
|
||||
return false;
|
||||
});
|
||||
|
||||
// Use jquery.ui.menu
|
||||
$(opts.menu.selector).menu({
|
||||
create: function(event, ui){
|
||||
tree.ext.menu.data.$menu = $(this).menu("widget");
|
||||
var data = $.extend({}, tree.ext.menu.data);
|
||||
opts.menu.create.call(tree, event, data);
|
||||
},
|
||||
focus: function(event, ui){
|
||||
var data = $.extend({}, tree.ext.menu.data, {
|
||||
menuItem: ui.item,
|
||||
menuId: ui.item.find(">a").attr("href")
|
||||
});
|
||||
opts.menu.focus.call(tree, event, data);
|
||||
},
|
||||
select: function(event, ui){
|
||||
var data = $.extend({}, tree.ext.menu.data, {
|
||||
menuItem: ui.item,
|
||||
menuId: ui.item.find(">a").attr("href")
|
||||
});
|
||||
if( opts.menu.select.call(tree, event, data) !== false){
|
||||
tree.ext.menu._closeMenu(ctx);
|
||||
}
|
||||
}
|
||||
}).hide();
|
||||
},
|
||||
treeDestroy: function(ctx){
|
||||
this._super(ctx);
|
||||
},
|
||||
_openMenu: function(ctx){
|
||||
var data,
|
||||
tree = ctx.tree,
|
||||
opts = ctx.options,
|
||||
$menu = $(opts.menu.selector);
|
||||
|
||||
tree.ext.menu.data.node = ctx.node;
|
||||
data = $.extend({}, tree.ext.menu.data);
|
||||
|
||||
if( opts.menu.beforeOpen.call(tree, ctx.originalEvent, data) === false){
|
||||
return;
|
||||
}
|
||||
|
||||
$(document).bind("keydown.fancytree", function(event){
|
||||
if( event.which === $.ui.keyCode.ESCAPE ){
|
||||
tree.ext.menu._closeMenu(ctx);
|
||||
}
|
||||
}).bind("mousedown.fancytree", function(event){
|
||||
// Close menu when clicked outside menu
|
||||
if( $(event.target).closest(".ui-menu-item").length === 0 ){
|
||||
tree.ext.menu._closeMenu(ctx);
|
||||
}
|
||||
});
|
||||
// $menu.position($.extend({my: "left top", at: "left bottom", of: event}, opts.menu.position));
|
||||
$menu
|
||||
.css("position", "absolute")
|
||||
.show()
|
||||
.position({my: "left top", at: "right top", of: ctx.originalEvent, collision: "fit"})
|
||||
.focus();
|
||||
|
||||
opts.menu.open.call(tree, ctx.originalEvent, data);
|
||||
},
|
||||
_closeMenu: function(ctx){
|
||||
var $menu,
|
||||
tree = ctx.tree,
|
||||
opts = ctx.options,
|
||||
data = $.extend({}, tree.ext.menu.data);
|
||||
if( opts.menu.close.call(tree, ctx.originalEvent, data) === false){
|
||||
return;
|
||||
}
|
||||
$menu = $(opts.menu.selector);
|
||||
$(document).unbind("keydown.fancytree, mousedown.fancytree");
|
||||
$menu.hide();
|
||||
tree.ext.menu.data.node = null;
|
||||
}
|
||||
// ,
|
||||
// nodeClick: function(ctx) {
|
||||
// var event = ctx.originalEvent;
|
||||
// if(event.which === 2 || (event.which === 1 && event.ctrlKey)){
|
||||
// event.preventDefault();
|
||||
// ctx.tree.ext.menu._openMenu(ctx);
|
||||
// return false;
|
||||
// }
|
||||
// this._super(ctx);
|
||||
// }
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
339
assets/src/jquery.fancytree.persist.js
Normal file
339
assets/src/jquery.fancytree.persist.js
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
/*!
|
||||
* jquery.fancytree.persist.js
|
||||
*
|
||||
* Persist tree status in cookiesRemove or highlight tree nodes, based on a filter.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* @depends: jquery.cookie.js
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
function _assert(cond, msg){
|
||||
msg = msg || "";
|
||||
if(!cond){
|
||||
$.error("Assertion failed " + msg);
|
||||
}
|
||||
}
|
||||
|
||||
var ACTIVE = "active",
|
||||
EXPANDED = "expanded",
|
||||
FOCUS = "focus",
|
||||
SELECTED = "selected";
|
||||
|
||||
|
||||
/* Recursively load lazy nodes
|
||||
* @param {string} mode 'load', 'expand', false
|
||||
*/
|
||||
function _loadLazyNodes(tree, local, keyList, mode, dfd) {
|
||||
var i, key, l, node,
|
||||
foundOne = false,
|
||||
deferredList = [],
|
||||
missingKeyList = [];
|
||||
|
||||
keyList = keyList || [];
|
||||
dfd = dfd || $.Deferred();
|
||||
|
||||
for( i=0, l=keyList.length; i<l; i++ ) {
|
||||
key = keyList[i];
|
||||
node = tree.getNodeByKey(key);
|
||||
if( node ) {
|
||||
if( mode && node.isUndefined() ) {
|
||||
foundOne = true;
|
||||
tree.debug("_loadLazyNodes: " + node + " is lazy: loading...");
|
||||
if( mode === "expand" ) {
|
||||
deferredList.push(node.setExpanded());
|
||||
} else {
|
||||
deferredList.push(node.load());
|
||||
}
|
||||
} else {
|
||||
tree.debug("_loadLazyNodes: " + node + " already loaded.");
|
||||
node.setExpanded();
|
||||
}
|
||||
} else {
|
||||
missingKeyList.push(key);
|
||||
tree.debug("_loadLazyNodes: " + node + " was not yet found.");
|
||||
}
|
||||
}
|
||||
|
||||
$.when.apply($, deferredList).always(function(){
|
||||
// All lazy-expands have finished
|
||||
if( foundOne && missingKeyList.length > 0 ) {
|
||||
// If we read new nodes from server, try to resolve yet-missing keys
|
||||
_loadLazyNodes(tree, local, missingKeyList, mode, dfd);
|
||||
} else {
|
||||
if( missingKeyList.length ) {
|
||||
tree.warn("_loadLazyNodes: could not load those keys: ", missingKeyList);
|
||||
for( i=0, l=missingKeyList.length; i<l; i++ ) {
|
||||
key = keyList[i];
|
||||
local._appendKey(EXPANDED, keyList[i], false);
|
||||
}
|
||||
}
|
||||
dfd.resolve();
|
||||
}
|
||||
});
|
||||
return dfd;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* [ext-persist] Remove persistence cookies of the given type(s).
|
||||
* Called like
|
||||
* $("#tree").fancytree("getTree").clearCookies("active expanded focus selected");
|
||||
*
|
||||
* @alias Fancytree#clearCookies
|
||||
* @requires jquery.fancytree.persist.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.clearCookies = function(types){
|
||||
var local = this.ext.persist,
|
||||
prefix = local.cookiePrefix;
|
||||
|
||||
types = types || "active expanded focus selected";
|
||||
if(types.indexOf(ACTIVE) >= 0){
|
||||
local._data(prefix + ACTIVE, null);
|
||||
}
|
||||
if(types.indexOf(EXPANDED) >= 0){
|
||||
local._data(prefix + EXPANDED, null);
|
||||
}
|
||||
if(types.indexOf(FOCUS) >= 0){
|
||||
local._data(prefix + FOCUS, null);
|
||||
}
|
||||
if(types.indexOf(SELECTED) >= 0){
|
||||
local._data(prefix + SELECTED, null);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* [ext-persist] Return persistence information from cookies
|
||||
*
|
||||
* Called like
|
||||
* $("#tree").fancytree("getTree").getPersistData();
|
||||
*
|
||||
* @alias Fancytree#getPersistData
|
||||
* @requires jquery.fancytree.persist.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.getPersistData = function(){
|
||||
var local = this.ext.persist,
|
||||
prefix = local.cookiePrefix,
|
||||
delim = local.cookieDelimiter,
|
||||
res = {};
|
||||
|
||||
res[ACTIVE] = local._data(prefix + ACTIVE);
|
||||
res[EXPANDED] = (local._data(prefix + EXPANDED) || "").split(delim);
|
||||
res[SELECTED] = (local._data(prefix + SELECTED) || "").split(delim);
|
||||
res[FOCUS] = local._data(prefix + FOCUS);
|
||||
return res;
|
||||
};
|
||||
|
||||
|
||||
/* *****************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "persist",
|
||||
version: "0.3.0",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
cookieDelimiter: "~",
|
||||
cookiePrefix: undefined, // 'fancytree-<treeId>-' by default
|
||||
cookie: {
|
||||
raw: false,
|
||||
expires: "",
|
||||
path: "",
|
||||
domain: "",
|
||||
secure: false
|
||||
},
|
||||
expandLazy: false, // true: recursively expand and load lazy nodes
|
||||
overrideSource: false, // true: cookie takes precedence over `source` data attributes.
|
||||
store: "auto", // 'cookie': force cookie, 'local': force localStore, 'session': force sessionStore
|
||||
types: "active expanded focus selected"
|
||||
},
|
||||
|
||||
/* Generic read/write string data to cookie, sessionStorage or localStorage. */
|
||||
_data: function(key, value){
|
||||
var ls = this._local.localStorage; // null, sessionStorage, or localStorage
|
||||
|
||||
if( value === undefined ) {
|
||||
return ls ? ls.getItem(key) : $.cookie(key);
|
||||
} else if ( value === null ) {
|
||||
if( ls ) {
|
||||
ls.removeItem(key);
|
||||
} else {
|
||||
$.removeCookie(key);
|
||||
}
|
||||
} else {
|
||||
if( ls ) {
|
||||
ls.setItem(key, value);
|
||||
} else {
|
||||
$.cookie(key, value, this.options.persist.cookie);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/* Append `key` to a cookie. */
|
||||
_appendKey: function(type, key, flag){
|
||||
key = "" + key; // #90
|
||||
var local = this._local,
|
||||
instOpts = this.options.persist,
|
||||
delim = instOpts.cookieDelimiter,
|
||||
cookieName = local.cookiePrefix + type,
|
||||
data = local._data(cookieName),
|
||||
keyList = data ? data.split(delim) : [],
|
||||
idx = $.inArray(key, keyList);
|
||||
// Remove, even if we add a key, so the key is always the last entry
|
||||
if(idx >= 0){
|
||||
keyList.splice(idx, 1);
|
||||
}
|
||||
// Append key to cookie
|
||||
if(flag){
|
||||
keyList.push(key);
|
||||
}
|
||||
local._data(cookieName, keyList.join(delim));
|
||||
},
|
||||
|
||||
treeInit: function(ctx){
|
||||
var tree = ctx.tree,
|
||||
opts = ctx.options,
|
||||
local = this._local,
|
||||
instOpts = this.options.persist;
|
||||
|
||||
// For 'auto' or 'cookie' mode, the cookie plugin must be available
|
||||
_assert(instOpts.store === "localStore" || $.cookie, "Missing required plugin for 'persist' extension: jquery.cookie.js");
|
||||
|
||||
local.cookiePrefix = instOpts.cookiePrefix || ("fancytree-" + tree._id + "-");
|
||||
local.storeActive = instOpts.types.indexOf(ACTIVE) >= 0;
|
||||
local.storeExpanded = instOpts.types.indexOf(EXPANDED) >= 0;
|
||||
local.storeSelected = instOpts.types.indexOf(SELECTED) >= 0;
|
||||
local.storeFocus = instOpts.types.indexOf(FOCUS) >= 0;
|
||||
if( instOpts.store === "cookie" || !window.localStorage ) {
|
||||
local.localStorage = null;
|
||||
} else {
|
||||
local.localStorage = (instOpts.store === "local") ? window.localStorage : window.sessionStorage;
|
||||
}
|
||||
|
||||
// Bind init-handler to apply cookie state
|
||||
tree.$div.bind("fancytreeinit", function(event){
|
||||
var cookie, dfd, i, keyList, node,
|
||||
prevFocus = $.cookie(local.cookiePrefix + FOCUS); // record this before node.setActive() overrides it;
|
||||
|
||||
tree.debug("COOKIE " + document.cookie);
|
||||
|
||||
cookie = local._data(local.cookiePrefix + EXPANDED);
|
||||
keyList = cookie && cookie.split(instOpts.cookieDelimiter);
|
||||
|
||||
if( local.storeExpanded ) {
|
||||
// Recursively load nested lazy nodes if expandLazy is 'expand' or 'load'
|
||||
// Also remove expand-cookies for unmatched nodes
|
||||
dfd = _loadLazyNodes(tree, local, keyList, instOpts.expandLazy ? "expand" : false , null);
|
||||
} else {
|
||||
// nothing to do
|
||||
dfd = new $.Deferred().resolve();
|
||||
}
|
||||
|
||||
dfd.done(function(){
|
||||
if(local.storeSelected){
|
||||
cookie = local._data(local.cookiePrefix + SELECTED);
|
||||
if(cookie){
|
||||
keyList = cookie.split(instOpts.cookieDelimiter);
|
||||
for(i=0; i<keyList.length; i++){
|
||||
node = tree.getNodeByKey(keyList[i]);
|
||||
if(node){
|
||||
if(node.selected === undefined || instOpts.overrideSource && (node.selected === false)){
|
||||
// node.setSelected();
|
||||
node.selected = true;
|
||||
node.renderStatus();
|
||||
}
|
||||
}else{
|
||||
// node is no longer member of the tree: remove from cookie also
|
||||
local._appendKey(SELECTED, keyList[i], false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(local.storeActive){
|
||||
cookie = local._data(local.cookiePrefix + ACTIVE);
|
||||
if(cookie && (opts.persist.overrideSource || !tree.activeNode)){
|
||||
node = tree.getNodeByKey(cookie);
|
||||
if(node){
|
||||
node.setActive();
|
||||
}
|
||||
}
|
||||
}
|
||||
if(local.storeFocus && prevFocus){
|
||||
node = tree.getNodeByKey(prevFocus);
|
||||
if(node){
|
||||
node.setFocus();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
// Init the tree
|
||||
return this._super(ctx);
|
||||
},
|
||||
nodeSetActive: function(ctx, flag, opts) {
|
||||
var res,
|
||||
local = this._local;
|
||||
|
||||
flag = (flag !== false);
|
||||
res = this._super(ctx, flag, opts);
|
||||
|
||||
if(local.storeActive){
|
||||
local._data(local.cookiePrefix + ACTIVE, this.activeNode ? this.activeNode.key : null);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
nodeSetExpanded: function(ctx, flag, opts) {
|
||||
var res,
|
||||
node = ctx.node,
|
||||
local = this._local;
|
||||
|
||||
flag = (flag !== false);
|
||||
res = this._super(ctx, flag, opts);
|
||||
|
||||
if(local.storeExpanded){
|
||||
local._appendKey(EXPANDED, node.key, flag);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
nodeSetFocus: function(ctx, flag) {
|
||||
var res,
|
||||
local = this._local;
|
||||
|
||||
flag = (flag !== false);
|
||||
res = this._super(ctx, flag);
|
||||
|
||||
if(flag && local.storeFocus){
|
||||
local._data(local.cookiePrefix + FOCUS, this.focusNode ? this.focusNode.key : null);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
nodeSetSelected: function(ctx, flag) {
|
||||
var res,
|
||||
node = ctx.node,
|
||||
local = this._local;
|
||||
|
||||
flag = (flag !== false);
|
||||
res = this._super(ctx, flag);
|
||||
|
||||
if(local.storeSelected){
|
||||
local._appendKey(SELECTED, node.key, flag);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
359
assets/src/jquery.fancytree.table.js
Normal file
359
assets/src/jquery.fancytree.table.js
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
/*!
|
||||
* jquery.fancytree.table.js
|
||||
*
|
||||
* Render tree as table (aka 'treegrid', 'tabletree').
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/* *****************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
function _assert(cond, msg){
|
||||
msg = msg || "";
|
||||
if(!cond){
|
||||
$.error("Assertion failed " + msg);
|
||||
}
|
||||
}
|
||||
|
||||
function insertSiblingAfter(referenceNode, newNode) {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
||||
}
|
||||
|
||||
/* Show/hide all rows that are structural descendants of `parent`. */
|
||||
function setChildRowVisibility(parent, flag) {
|
||||
parent.visit(function(node){
|
||||
var tr = node.tr;
|
||||
// currentFlag = node.hide ? false : flag; // fix for ext-filter
|
||||
if(tr){
|
||||
tr.style.display = (node.hide || !flag) ? "none" : "";
|
||||
}
|
||||
if(!node.expanded){
|
||||
return "skip";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Find node that is rendered in previous row. */
|
||||
function findPrevRowNode(node){
|
||||
var i, last, prev,
|
||||
parent = node.parent,
|
||||
siblings = parent ? parent.children : null;
|
||||
|
||||
if(siblings && siblings.length > 1 && siblings[0] !== node){
|
||||
// use the lowest descendant of the preceeding sibling
|
||||
i = $.inArray(node, siblings);
|
||||
prev = siblings[i - 1];
|
||||
_assert(prev.tr);
|
||||
// descend to lowest child (with a <tr> tag)
|
||||
while(prev.children){
|
||||
last = prev.children[prev.children.length - 1];
|
||||
if(!last.tr){
|
||||
break;
|
||||
}
|
||||
prev = last;
|
||||
}
|
||||
}else{
|
||||
// if there is no preceding sibling, use the direct parent
|
||||
prev = parent;
|
||||
}
|
||||
return prev;
|
||||
}
|
||||
|
||||
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "table",
|
||||
version: "0.2.0",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
checkboxColumnIdx: null, // render the checkboxes into the this column index (default: nodeColumnIdx)
|
||||
customStatus: false, // true: generate renderColumns events for status nodes
|
||||
indentation: 16, // indent every node level by 16px
|
||||
nodeColumnIdx: 0 // render node expander, icon, and title to this column (default: #0)
|
||||
},
|
||||
// Overide virtual methods for this extension.
|
||||
// `this` : is this extension object
|
||||
// `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
|
||||
treeInit: function(ctx){
|
||||
var i, $row, tdRole,
|
||||
tree = ctx.tree,
|
||||
$table = tree.widget.element;
|
||||
|
||||
$table.addClass("fancytree-container fancytree-ext-table");
|
||||
tree.tbody = $table.find("> tbody")[0];
|
||||
tree.columnCount = $("thead >tr >th", $table).length;
|
||||
$(tree.tbody).empty();
|
||||
|
||||
tree.rowFragment = document.createDocumentFragment();
|
||||
$row = $("<tr />");
|
||||
tdRole = "";
|
||||
if(ctx.options.aria){
|
||||
$row.attr("role", "row");
|
||||
tdRole = " role='gridcell'";
|
||||
}
|
||||
for(i=0; i<tree.columnCount; i++) {
|
||||
if(ctx.options.table.nodeColumnIdx === i){
|
||||
$row.append("<td" + tdRole + "><span class='fancytree-node' /></td>");
|
||||
}else{
|
||||
$row.append("<td" + tdRole + " />");
|
||||
}
|
||||
}
|
||||
tree.rowFragment.appendChild($row.get(0));
|
||||
|
||||
// Make sure that status classes are set on the node's <tr> elements
|
||||
tree.statusClassPropName = "tr";
|
||||
tree.ariaPropName = "tr";
|
||||
this.nodeContainerAttrName = "tr";
|
||||
|
||||
this._super(ctx);
|
||||
|
||||
// standard Fancytree created a root UL
|
||||
$(tree.rootNode.ul).remove();
|
||||
tree.rootNode.ul = null;
|
||||
tree.$container = $table;
|
||||
// Add container to the TAB chain
|
||||
this.$container.attr("tabindex", this.options.tabbable ? "0" : "-1");
|
||||
if(this.options.aria){
|
||||
tree.$container
|
||||
.attr("role", "treegrid")
|
||||
.attr("aria-readonly", true);
|
||||
}
|
||||
},
|
||||
/* Called by nodeRender to sync node order with tag order.*/
|
||||
// nodeFixOrder: function(ctx) {
|
||||
// },
|
||||
nodeRemoveChildMarkup: function(ctx) {
|
||||
var node = ctx.node;
|
||||
// DT.debug("nodeRemoveChildMarkup()", node.toString());
|
||||
node.visit(function(n){
|
||||
if(n.tr){
|
||||
$(n.tr).remove();
|
||||
n.tr = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
nodeRemoveMarkup: function(ctx) {
|
||||
var node = ctx.node;
|
||||
// DT.debug("nodeRemoveMarkup()", node.toString());
|
||||
if(node.tr){
|
||||
$(node.tr).remove();
|
||||
node.tr = null;
|
||||
}
|
||||
this.nodeRemoveChildMarkup(ctx);
|
||||
},
|
||||
/* Override standard render. */
|
||||
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
|
||||
var children, firstTr, i, l, newRow, prevNode, prevTr, subCtx,
|
||||
tree = ctx.tree,
|
||||
node = ctx.node,
|
||||
opts = ctx.options,
|
||||
isRootNode = !node.parent;
|
||||
|
||||
if( !_recursive ){
|
||||
ctx.hasCollapsedParents = node.parent && !node.parent.expanded;
|
||||
}
|
||||
// $.ui.fancytree.debug("*** nodeRender " + node + ", isRoot=" + isRootNode, "tr=" + node.tr, "hcp=" + ctx.hasCollapsedParents, "parent.tr=" + (node.parent && node.parent.tr));
|
||||
if( !isRootNode ){
|
||||
if(!node.tr){
|
||||
if( ctx.hasCollapsedParents /*&& !node.parent.tr*/ ) {
|
||||
// #166: we assume that the parent will be (recursively) rendered
|
||||
// later anyway.
|
||||
node.debug("nodeRender ignored due to unrendered parent");
|
||||
return;
|
||||
}
|
||||
// Create new <tr> after previous row
|
||||
newRow = tree.rowFragment.firstChild.cloneNode(true);
|
||||
prevNode = findPrevRowNode(node);
|
||||
// $.ui.fancytree.debug("*** nodeRender " + node + ": prev: " + prevNode.key);
|
||||
_assert(prevNode);
|
||||
if(collapsed === true && _recursive){
|
||||
// hide all child rows, so we can use an animation to show it later
|
||||
newRow.style.display = "none";
|
||||
}else if(deep && ctx.hasCollapsedParents){
|
||||
// also hide this row if deep === true but any parent is collapsed
|
||||
newRow.style.display = "none";
|
||||
// newRow.style.color = "red";
|
||||
}
|
||||
if(!prevNode.tr){
|
||||
_assert(!prevNode.parent, "prev. row must have a tr, or is system root");
|
||||
tree.tbody.appendChild(newRow);
|
||||
}else{
|
||||
insertSiblingAfter(prevNode.tr, newRow);
|
||||
}
|
||||
node.tr = newRow;
|
||||
if( node.key && opts.generateIds ){
|
||||
node.tr.id = opts.idPrefix + node.key;
|
||||
}
|
||||
node.tr.ftnode = node;
|
||||
if(opts.aria){
|
||||
// TODO: why doesn't this work:
|
||||
// node.li.role = "treeitem";
|
||||
$(node.tr).attr("aria-labelledby", "ftal_" + node.key);
|
||||
}
|
||||
node.span = $("span.fancytree-node", node.tr).get(0);
|
||||
// Set icon, link, and title (normally this is only required on initial render)
|
||||
this.nodeRenderTitle(ctx);
|
||||
// Allow tweaking, binding, after node was created for the first time
|
||||
// tree._triggerNodeEvent("createNode", ctx);
|
||||
if ( opts.createNode ){
|
||||
opts.createNode.call(tree, {type: "createNode"}, ctx);
|
||||
}
|
||||
} else {
|
||||
if( force ) {
|
||||
// Set icon, link, and title (normally this is only required on initial render)
|
||||
this.nodeRenderTitle(ctx); // triggers renderColumns()
|
||||
} else {
|
||||
// Update element classes according to node state
|
||||
this.nodeRenderStatus(ctx);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Allow tweaking after node state was rendered
|
||||
// tree._triggerNodeEvent("renderNode", ctx);
|
||||
if ( opts.renderNode ){
|
||||
opts.renderNode.call(tree, {type: "renderNode"}, ctx);
|
||||
}
|
||||
// Visit child nodes
|
||||
// Add child markup
|
||||
children = node.children;
|
||||
if(children && (isRootNode || deep || node.expanded)){
|
||||
for(i=0, l=children.length; i<l; i++) {
|
||||
subCtx = $.extend({}, ctx, {node: children[i]});
|
||||
subCtx.hasCollapsedParents = subCtx.hasCollapsedParents || !node.expanded;
|
||||
this.nodeRender(subCtx, force, deep, collapsed, true);
|
||||
}
|
||||
}
|
||||
// Make sure, that <tr> order matches node.children order.
|
||||
if(children && !_recursive){ // we only have to do it once, for the root branch
|
||||
prevTr = node.tr || null;
|
||||
firstTr = tree.tbody.firstChild;
|
||||
// Iterate over all descendants
|
||||
node.visit(function(n){
|
||||
if(n.tr){
|
||||
if(!n.parent.expanded && n.tr.style.display !== "none"){
|
||||
// fix after a node was dropped over a collapsed
|
||||
n.tr.style.display = "none";
|
||||
setChildRowVisibility(n, false);
|
||||
}
|
||||
if(n.tr.previousSibling !== prevTr){
|
||||
node.debug("_fixOrder: mismatch at node: " + n);
|
||||
var nextTr = prevTr ? prevTr.nextSibling : firstTr;
|
||||
tree.tbody.insertBefore(n.tr, nextTr);
|
||||
}
|
||||
prevTr = n.tr;
|
||||
}
|
||||
});
|
||||
}
|
||||
// Update element classes according to node state
|
||||
// if(!isRootNode){
|
||||
// this.nodeRenderStatus(ctx);
|
||||
// }
|
||||
},
|
||||
nodeRenderTitle: function(ctx, title) {
|
||||
var $cb,
|
||||
node = ctx.node,
|
||||
opts = ctx.options;
|
||||
|
||||
this._super(ctx);
|
||||
// Move checkbox to custom column
|
||||
if(opts.checkbox && opts.table.checkboxColumnIdx != null ){
|
||||
$cb = $("span.fancytree-checkbox", node.span).detach();
|
||||
$(node.tr).find("td:first").html($cb);
|
||||
}
|
||||
// Let user code write column content
|
||||
// ctx.tree._triggerNodeEvent("renderColumns", node);
|
||||
// Update element classes according to node state
|
||||
if( ! node.isRoot() ){
|
||||
this.nodeRenderStatus(ctx);
|
||||
}
|
||||
if( !opts.table.customStatus && node.isStatusNode() ) {
|
||||
// default rendering for status node: leave other cells empty
|
||||
} else if ( opts.renderColumns ) {
|
||||
opts.renderColumns.call(ctx.tree, {type: "renderColumns"}, ctx);
|
||||
}
|
||||
},
|
||||
nodeRenderStatus: function(ctx) {
|
||||
var indent,
|
||||
node = ctx.node,
|
||||
opts = ctx.options;
|
||||
|
||||
this._super(ctx);
|
||||
|
||||
$(node.tr).removeClass("fancytree-node");
|
||||
// indent
|
||||
indent = (node.getLevel() - 1) * opts.table.indentation;
|
||||
$(node.span).css({marginLeft: indent + "px"});
|
||||
},
|
||||
/* Expand node, return Deferred.promise. */
|
||||
nodeSetExpanded: function(ctx, flag, opts) {
|
||||
var dfd = new $.Deferred(),
|
||||
subOpts = $.extend({}, opts, {noEvents: true, noAnimation: true});
|
||||
|
||||
opts = opts || {};
|
||||
|
||||
function _afterExpand(ok) {
|
||||
flag = (flag !== false);
|
||||
setChildRowVisibility(ctx.node, flag);
|
||||
if( ok ) {
|
||||
if( flag && ctx.options.autoScroll && !opts.noAnimation && ctx.node.hasChildren() ) {
|
||||
// Scroll down to last child, but keep current node visible
|
||||
ctx.node.getLastChild().scrollIntoView(true, {topNode: ctx.node}).always(function(){
|
||||
if( !opts.noEvents ) {
|
||||
ctx.tree._triggerNodeEvent(flag ? "expand" : "collapse", ctx);
|
||||
}
|
||||
dfd.resolveWith(ctx.node);
|
||||
});
|
||||
} else {
|
||||
if( !opts.noEvents ) {
|
||||
ctx.tree._triggerNodeEvent(flag ? "expand" : "collapse", ctx);
|
||||
}
|
||||
dfd.resolveWith(ctx.node);
|
||||
}
|
||||
} else {
|
||||
if( !opts.noEvents ) {
|
||||
ctx.tree._triggerNodeEvent(flag ? "expand" : "collapse", ctx);
|
||||
}
|
||||
dfd.rejectWith(ctx.node);
|
||||
}
|
||||
}
|
||||
// Call base-expand with disabled events and animation
|
||||
this._super(ctx, flag, subOpts).done(function () {
|
||||
_afterExpand(true);
|
||||
}).fail(function () {
|
||||
_afterExpand(false);
|
||||
});
|
||||
return dfd.promise();
|
||||
},
|
||||
nodeSetStatus: function(ctx, status, message, details) {
|
||||
if(status === "ok"){
|
||||
var node = ctx.node,
|
||||
firstChild = ( node.children ? node.children[0] : null );
|
||||
if ( firstChild && firstChild.isStatusNode() ) {
|
||||
$(firstChild.tr).remove();
|
||||
}
|
||||
}
|
||||
this._super(ctx, status, message, details);
|
||||
},
|
||||
treeClear: function(ctx) {
|
||||
this.nodeRemoveChildMarkup(this._makeHookContext(this.rootNode));
|
||||
return this._super(ctx);
|
||||
}
|
||||
/*,
|
||||
treeSetFocus: function(ctx, flag) {
|
||||
// alert("treeSetFocus" + ctx.tree.$container);
|
||||
ctx.tree.$container.focus();
|
||||
$.ui.fancytree.focusTree = ctx.tree;
|
||||
}*/
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
79
assets/src/jquery.fancytree.themeroller.js
Normal file
79
assets/src/jquery.fancytree.themeroller.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/*!
|
||||
* jquery.fancytree.themeroller.js
|
||||
*
|
||||
* Enable jQuery UI ThemeRoller styles.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* @see http://jqueryui.com/themeroller/
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "themeroller",
|
||||
version: "0.0.1",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
activeClass: "ui-state-active",
|
||||
foccusClass: "ui-state-focus",
|
||||
hoverClass: "ui-state-hover",
|
||||
selectedClass: "ui-state-highlight"
|
||||
},
|
||||
|
||||
treeInit: function(ctx){
|
||||
this._super(ctx);
|
||||
var $el = ctx.widget.element;
|
||||
|
||||
if($el[0].nodeName === "TABLE"){
|
||||
$el.addClass("ui-widget ui-corner-all");
|
||||
$el.find(">thead tr").addClass("ui-widget-header");
|
||||
$el.find(">tbody").addClass("ui-widget-conent");
|
||||
}else{
|
||||
$el.addClass("ui-widget ui-widget-content ui-corner-all");
|
||||
}
|
||||
|
||||
$el.delegate(".fancytree-node", "mouseenter mouseleave", function(event){
|
||||
var node = $.ui.fancytree.getNode(event.target),
|
||||
flag = (event.type === "mouseenter");
|
||||
node.debug("hover: " + flag);
|
||||
$(node.span).toggleClass("ui-state-hover ui-corner-all", flag);
|
||||
});
|
||||
},
|
||||
treeDestroy: function(ctx){
|
||||
this._super(ctx);
|
||||
ctx.widget.element.removeClass("ui-widget ui-widget-content ui-corner-all");
|
||||
},
|
||||
nodeRenderStatus: function(ctx){
|
||||
var node = ctx.node,
|
||||
$el = $(node.span);
|
||||
this._super(ctx);
|
||||
/*
|
||||
.ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
|
||||
.ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
|
||||
.ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
|
||||
|
||||
.ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
|
||||
.ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
|
||||
.ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
|
||||
.ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.
|
||||
*/
|
||||
$el.toggleClass("ui-state-active", node.isActive());
|
||||
$el.toggleClass("ui-state-focus", node.hasFocus());
|
||||
$el.toggleClass("ui-state-highlight", node.isSelected());
|
||||
// node.debug("ext-themeroller.nodeRenderStatus: ", node.span.className);
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
113
assets/src/jquery.fancytree.wide.js
Normal file
113
assets/src/jquery.fancytree.wide.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/*!
|
||||
*
|
||||
* jquery.fancytree.wide.js
|
||||
* Support for 100% wide selection bars.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.1.0
|
||||
* @date 2014-05-29T16:44
|
||||
*/
|
||||
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
// function _assert(cond, msg){
|
||||
// // TODO: see qunit.js extractStacktrace()
|
||||
// if(!cond){
|
||||
// msg = msg ? ": " + msg : "";
|
||||
// $.error("Assertion failed" + msg);
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* [ext-wide] Recalculate the width of the selection bar after the tree container
|
||||
* was resized.<br>
|
||||
* May be called explicitly on container resize, since there is no resize event
|
||||
* for DIV tags.
|
||||
*
|
||||
* @alias Fancytree#wideUpdate
|
||||
* @requires jquery.fancytree.wide.js
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.wideUpdate = function(){
|
||||
var inst = this.ext.wide,
|
||||
prevCw = inst.contWidth,
|
||||
prevLo = inst.lineOfs;
|
||||
// http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/
|
||||
inst.contWidth = parseFloat(this.$container.css("width"), 10);
|
||||
// Each title is precceeded by 2 or 3 icons (16px + 3 margin)
|
||||
// + 1px title border and 3px title padding
|
||||
inst.lineOfs = (this.options.checkbox ? 3 : 2) * 19;
|
||||
if( prevCw !== inst.contWidth || prevLo !== inst.lineOfs ) {
|
||||
this.debug("wideUpdate: " + inst.contWidth);
|
||||
this.visit(function(node){
|
||||
node.tree._callHook("nodeRenderTitle", node);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "wide",
|
||||
version: "0.0.2",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
autoResize: true, // call wideUpdate() on window.resize events
|
||||
cheap: false, // true: use static css only
|
||||
margin: {left: 3, right: 3} // free margins near the selection bar
|
||||
},
|
||||
|
||||
treeCreate: function(ctx){
|
||||
this.$container.addClass("fancytree-ext-wide");
|
||||
this._super(ctx);
|
||||
// http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/
|
||||
this._local.contWidth = parseFloat(ctx.tree.$container.css("width"), 10);
|
||||
// Every nested UL is indented by 16px
|
||||
// Each title is precceeded by 2 or 3 icons (16px + 3 margin)
|
||||
// + 1px title border and 3px title padding
|
||||
this._local.lineOfs = (ctx.options.checkbox ? 3 : 2) * 19;
|
||||
this._local.levelOfs = 16;
|
||||
this._local.titlePadding = 3;
|
||||
$(window).on("resize" + ctx.widget.eventNamespace, $.ui.fancytree.debounce(200, function(event){
|
||||
if( ctx.options.wide.autoResize && !ctx.options.wide.cheap ) {
|
||||
ctx.tree.wideUpdate();
|
||||
}
|
||||
}));
|
||||
},
|
||||
treeDestroy: function(ctx){
|
||||
$(window).off("resize" + ctx.widget.eventNamespace);
|
||||
this._super(ctx);
|
||||
},
|
||||
nodeRenderTitle: function(ctx) {
|
||||
var ofs, res, margin,
|
||||
instOpts = ctx.options.wide,
|
||||
inst = this._local,
|
||||
cw = inst.contWidth,
|
||||
node = ctx.node;
|
||||
|
||||
res = this._super(ctx);
|
||||
|
||||
if( !instOpts.cheap ) {
|
||||
margin = instOpts.margin;
|
||||
ofs = (node.getLevel() - 1) * inst.levelOfs + inst.lineOfs;
|
||||
$(node.span).find(".fancytree-title").css({
|
||||
width: cw - margin.left - margin.right - ofs,
|
||||
marginLeft: -ofs + margin.left,
|
||||
paddingLeft: +ofs - margin.left + inst.titlePadding,
|
||||
paddingRight: inst.titlePadding
|
||||
});
|
||||
}
|
||||
return res;
|
||||
}
|
||||
});
|
||||
}(jQuery, window, document));
|
||||
25
composer.json
Normal file
25
composer.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "wbraganca/yii2-fancytree-widget",
|
||||
"description": "The yii2-fancytree widget is a Yii 2 wrapper for the [Fancytree](https://github.com/mar10/fancytree). A JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading",
|
||||
"keywords": ["yii2", "extension", "widget", "fancytree", "treeview"],
|
||||
"type": "yii2-extension",
|
||||
"license": "BSD-3-Clause",
|
||||
"support": {
|
||||
"issues": "https://github.com/wbraganca/yii2-fancytree-widget/issues",
|
||||
"wiki": "https://github.com/wbraganca/yii2-fancytree-widget/wiki/",
|
||||
"source": "https://github.com/wbraganca/yii2-fancytree-widget"
|
||||
},
|
||||
"authors": [
|
||||
{
|
||||
"name": "Wanderson Bragança",
|
||||
"email": "wanderson.wbc@gmail.com"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"yiisoft/yii2": "*",
|
||||
"yiisoft/yii2-jui": "*"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": { "wbraganca\\": "" }
|
||||
}
|
||||
}
|
||||
63
fancytree/FancytreeAsset.php
Normal file
63
fancytree/FancytreeAsset.php
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<?php
|
||||
/**
|
||||
* @link https://github.com/wbraganca/yii2-fancytree-widget
|
||||
* @copyright Copyright (c) 2014 Wanderson Bragança
|
||||
* @license https://github.com/wbraganca/yii2-fancytree-widget/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
namespace wbraganca\fancytree;
|
||||
|
||||
/**
|
||||
* Asset bundle for fancytree Widget
|
||||
*
|
||||
* @author Wanderson Bragança <wanderson.wbc@gmail.com>
|
||||
*/
|
||||
class FancytreeAsset extends \yii\web\AssetBundle
|
||||
{
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
public $depends = [
|
||||
'yii\web\JqueryAsset',
|
||||
];
|
||||
|
||||
/**
|
||||
* Set up CSS and JS asset arrays based on the base-file names
|
||||
* @param string $type whether 'css' or 'js'
|
||||
* @param array $files the list of 'css' or 'js' basefile names
|
||||
*/
|
||||
protected function setupAssets($type, $files = [])
|
||||
{
|
||||
$srcFiles = [];
|
||||
$minFiles = [];
|
||||
foreach ($files as $file) {
|
||||
$srcFiles[] = "{$file}.{$type}";
|
||||
$minFiles[] = "{$file}.min.{$type}";
|
||||
}
|
||||
if (empty($this->$type)) {
|
||||
$this->$type = YII_DEBUG ? $srcFiles : $minFiles;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
public function init()
|
||||
{
|
||||
$this->setSourcePath(__DIR__ . '/../assets');
|
||||
$this->setupAssets('css', ['skin-lion/ui.fancytree']);
|
||||
$this->setupAssets('js', ['http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui', 'jquery.fancytree']);
|
||||
parent::init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the source path if empty
|
||||
* @param string $path the path to be set
|
||||
*/
|
||||
protected function setSourcePath($path)
|
||||
{
|
||||
if (empty($this->sourcePath)) {
|
||||
$this->sourcePath = $path;
|
||||
}
|
||||
}
|
||||
}
|
||||
79
fancytree/FancytreeWidget.php
Normal file
79
fancytree/FancytreeWidget.php
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<?php
|
||||
/**
|
||||
* @link https://github.com/wbraganca/yii2-fancytree-widget
|
||||
* @copyright Copyright (c) 2014 Wanderson Bragança
|
||||
* @license https://github.com/wbraganca/yii2-fancytree-widget/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
namespace wbraganca\fancytree;
|
||||
|
||||
use yii\helpers\Html;
|
||||
use yii\helpers\Json;
|
||||
|
||||
/**
|
||||
* The yii2-fancytree-widget is a Yii 2 wrapper for the fancytree.js
|
||||
* See more: https://github.com/mar10/fancytree
|
||||
*
|
||||
* @author Wanderson Bragança <wanderson.wbc@gmail.com>
|
||||
*/
|
||||
class FancytreeWidget extends \yii\base\Widget
|
||||
{
|
||||
/**
|
||||
* @var array
|
||||
*/
|
||||
public $options = [];
|
||||
/**
|
||||
* @var array
|
||||
*/
|
||||
private $extensions = [
|
||||
'childcounter' => 'src/jquery.fancytree.childcounter.js',
|
||||
'clones' => 'src/jquery.fancytree.clones.js',
|
||||
'columnview' => 'src/jquery.fancytree.columnview.js',
|
||||
'debug' => 'src/jquery.fancytree.debug.js',
|
||||
'dnd' => 'src/jquery.fancytree.dnd.js',
|
||||
'edit' => 'src/jquery.fancytree.edit.js',
|
||||
'filter' => 'src/jquery.fancytree.filter.js',
|
||||
'glyph' => 'src/jquery.fancytree.glyph.js',
|
||||
'gridnav' => 'src/jquery.fancytree.gridnav.js',
|
||||
'menu' => 'src/jquery.fancytree.menu.js',
|
||||
'persist' => 'src/jquery.fancytree.persist.js',
|
||||
'table' => 'src/jquery.fancytree.table.js',
|
||||
'themeroller' => 'src/jquery.fancytree.themeroller.js',
|
||||
'wide' => 'src/jquery.fancytree.wide.js'
|
||||
];
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
public function init()
|
||||
{
|
||||
parent::init();
|
||||
$this->registerAssets();
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the needed assets
|
||||
*/
|
||||
public function registerAssets()
|
||||
{
|
||||
$view = $this->getView();
|
||||
$obj = FancytreeAsset::register($view);
|
||||
if (isset($this->options['extensions']) && is_array($this->options['extensions'])) {
|
||||
foreach ($this->options['extensions'] as $extension) {
|
||||
if (isset($this->extensions[$extension])) {
|
||||
$obj->js[] = $this->extensions[$extension];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$id = 'fancyree_' . $this->id;
|
||||
if (isset($this->options['id'])) {
|
||||
$id = $this->options['id'];
|
||||
unset($this->options['id']);
|
||||
} else {
|
||||
echo Html::tag('div', '', ['id' => $id]);
|
||||
}
|
||||
$options = Json::encode($this->options);
|
||||
$view->registerJs('$("#' . $id . '").fancytree( ' .$options .')');
|
||||
}
|
||||
}
|
||||
Reference in a new issue