Skip to content

Commit dafd3b2

Browse files
authored
Improve ext-columnview (mar10#906)
Close mar10#900 Close mar10#899
1 parent 29e9470 commit dafd3b2

File tree

15 files changed

+152
-72
lines changed

15 files changed

+152
-72
lines changed

demo/sample-ext-columnview.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
<style type="text/css">
2222
table.fancytree-ext-columnview {
2323
border-collapse: collapse;
24-
width: 100%;
24+
width: 100%;
2525
}
26-
table.fancytree-container tbody tr td{
27-
max-width: 300px; /* width does not work */
26+
table.fancytree-container tbody tr:first-child td {
27+
height: 200px;
2828
}
2929
span.fancytree-node{
3030
white-space: nowrap; /* prevent long lines to wrap */
@@ -76,7 +76,7 @@
7676
extensions: ["columnview"],
7777
checkbox: true,
7878
source: {
79-
url: "ajax-tree-plain.json"
79+
url: "ajax-tree-products.json"
8080
},
8181
lazyLoad: function(event, data) {
8282
data.result = {url: "ajax-sub2.json"};
@@ -133,15 +133,16 @@ <h1>Example: 'columnview' extension</h1>
133133
<!-- Add a <table> element where the tree should appear: -->
134134
<table id="columnview">
135135
<colgroup>
136-
<col width="300px"></col>
137-
<col width="300px"></col>
138-
<col width="300px"></col>
136+
<col width="33%"></col>
137+
<col width="33%"></col>
138+
<col width="33%"></col>
139139
</colgroup>
140140
<thead>
141141
<tr> <th>1</th> <th>2</th> <th>3</th> </tr>
142142
</thead>
143143
<tbody>
144-
<tr> <td>?</td> <td>?</td> <td>?</td> </tr>
144+
<tr> <td>?</td> <td>?</td> <td>?</td> </tr>
145+
<!-- The following rows are only used for the custom select badge functionality: -->
145146
<tr> <td id="tags" colspan="3">Selected nodes: </td> </tr>
146147
<tr> <td id="preview" colspan="3">preview</td> </tr>
147148
</tbody>

src/jquery.fancytree.columnview.js

Lines changed: 77 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,11 @@
2828
})(function($) {
2929
"use strict";
3030

31-
// prevent duplicate loading
32-
// if ( $.ui.fancytree && $.ui.fancytree.version ) {
33-
// $.ui.fancytree.warn("Fancytree: duplicate include");
34-
// return;
35-
// }
36-
3731
/*******************************************************************************
3832
* Private functions and variables
3933
*/
40-
/*
41-
function _assert(cond, msg){
42-
msg = msg || "";
43-
if(!cond){
44-
$.error("Assertion failed " + msg);
45-
}
46-
}
47-
*/
34+
var _assert = $.ui.fancytree.assert,
35+
FT = $.ui.fancytree;
4836

4937
/*******************************************************************************
5038
* Private functions and variables
@@ -65,76 +53,116 @@ function _assert(cond, msg){
6553
$table = tree.widget.element;
6654

6755
tree.tr = $("tbody tr", $table)[0];
68-
tree.columnCount = $(">td", tree.tr).length;
56+
tree.$tdList = $(">td", tree.tr);
57+
tree.columnCount = tree.$tdList.length;
6958
// Perform default behavior
7059
this._superApply(arguments);
7160
// Standard Fancytree created a root <ul>. Now move this into first table cell
7261
$ul = $(tree.rootNode.ul);
73-
$tdFirst = $(">td", tree.tr).eq(0);
62+
$tdFirst = tree.$tdList.eq(0);
7463

75-
$ul.removeClass("fancytree-container");
76-
$ul.removeAttr("tabindex");
64+
_assert(
65+
$.inArray("table", this.options.extensions) < 0,
66+
"columnview extensions must not use ext-table"
67+
);
68+
_assert(
69+
tree.columnCount >= 2,
70+
"columnview target must be a table with at least two columns"
71+
);
72+
73+
$ul.removeClass("fancytree-container").removeAttr("tabindex");
7774
tree.$container = $table;
78-
$table.addClass("fancytree-container fancytree-ext-columnview");
79-
$table.attr("tabindex", "0");
75+
$table
76+
.addClass("fancytree-container fancytree-ext-columnview")
77+
.attr("tabindex", "0");
8078

8179
$tdFirst.empty();
8280
$ul.detach().appendTo($tdFirst);
8381

8482
// Force some required options
8583
tree.widget.options.autoCollapse = true;
86-
// tree.widget.options.autoActivate = true;
84+
// tree.widget.options.autoActivate = true;
8785
tree.widget.options.toggleEffect = false;
8886
tree.widget.options.clickFolderMode = 1;
8987

90-
// Make sure that only active path is expanded when a node is activated:
9188
$table
89+
// Make sure that only active path is expanded when a node is activated:
9290
.on("fancytreeactivate", function(event, data) {
93-
var i,
94-
tdList,
95-
node = data.node,
91+
var node = data.node,
9692
tree = data.tree,
9793
level = node.getLevel();
9894

9995
tree._callHook("nodeCollapseSiblings", node);
10096
// Clear right neighbours
101-
if (level <= tree.columnCount) {
102-
tdList = $(">td", tree.tr);
103-
for (i = level; i < tree.columnCount; i++) {
104-
tdList.eq(i).empty();
105-
}
97+
if (!node.expanded) {
98+
tree.$tdList
99+
.eq(level)
100+
.nextAll()
101+
.empty();
106102
}
107103
// Expand nodes on activate, so we populate the right neighbor cell
108104
if (!node.expanded && (node.children || node.lazy)) {
109105
node.setExpanded();
110106
}
111-
// Adjust keyboard behaviour:
112107
})
108+
// Adjust keyboard behaviour:
113109
.on("fancytreekeydown", function(event, data) {
114110
var next = null,
115111
node = data.node || data.tree.getFirstChild();
116-
switch (event.which) {
117-
case $.ui.keyCode.DOWN:
112+
113+
if (node.getLevel() >= tree.columnCount) {
114+
return;
115+
}
116+
switch (FT.eventToString(event)) {
117+
case "down":
118118
next = node.getNextSibling();
119-
if (next) {
120-
next.setFocus();
119+
break;
120+
case "left":
121+
if (!node.isTopLevel()) {
122+
next = node.getParent();
121123
}
122-
return false;
123-
case $.ui.keyCode.LEFT:
124-
next = node.getParent();
125-
if (next) {
126-
next.setFocus();
124+
break;
125+
case "right":
126+
next = node.getFirstChild();
127+
if (!next) {
128+
// default processing: expand or ignore
129+
return;
127130
}
128-
return false;
129-
case $.ui.keyCode.UP:
131+
// Prefer an expanded child if any
132+
next.visitSiblings(function(n) {
133+
if (n.expanded) {
134+
next = n;
135+
return false;
136+
}
137+
}, true);
138+
break;
139+
case "up":
130140
next = node.getPrevSibling();
131-
if (next) {
132-
next.setFocus();
133-
}
134-
return false;
141+
break;
142+
}
143+
if (next) {
144+
next.setActive();
135145
}
146+
return false;
136147
});
137148
},
149+
nodeSetExpanded: function(ctx, flag, callOpts) {
150+
var $wait,
151+
node = ctx.node,
152+
tree = ctx.tree,
153+
level = node.getLevel();
154+
155+
if (flag !== false && !node.expanded && node.isUndefined()) {
156+
$wait = $(
157+
"<span class='fancytree-icon fancytree-icon-loading'>"
158+
);
159+
tree.$tdList
160+
.eq(level)
161+
.empty()
162+
.append($wait);
163+
}
164+
return this._superApply(arguments);
165+
},
138166
nodeRender: function(ctx, force, deep, collapsed, _recursive) {
139167
// Render standard nested <ul> - <li> hierarchy
140168
this._super(ctx, force, deep, collapsed, _recursive);
@@ -156,11 +184,12 @@ function _assert(cond, msg){
156184
);
157185
}
158186
// Move <ul> with children into the appropriate <td>
159-
if (node.ul) {
187+
if (node.ul && node.expanded) {
160188
node.ul.style.display = ""; // might be hidden if RIGHT was pressed
161189
level = node.getLevel();
162190
if (level < tree.columnCount) {
163-
$tdChild = $(">td", tree.tr).eq(level);
191+
// only if we are not in the last column
192+
$tdChild = tree.$tdList.eq(level);
164193
$ul = $(node.ul).detach();
165194
$tdChild.empty().append($ul);
166195
}

src/skin-awesome/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,8 @@ span.fancytree-icon {
209209
.fancytree-loading span.fancytree-expander,
210210
.fancytree-loading span.fancytree-expander:hover,
211211
.fancytree-statusnode-loading span.fancytree-icon,
212-
.fancytree-statusnode-loading span.fancytree-icon:hover {
212+
.fancytree-statusnode-loading span.fancytree-icon:hover,
213+
span.fancytree-icon.fancytree-icon-loading {
213214
background-image: none;
214215
}
215216
/* Status node icons */
@@ -379,6 +380,9 @@ table.fancytree-ext-columnview span.fancytree-node {
379380
display: inline-block;
380381
}
381382
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
383+
background-color: #e0e0e0;
384+
}
385+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
382386
background-color: #CBE8F6;
383387
}
384388
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

src/skin-bootstrap-n/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,8 @@ span.fancytree-icon {
209209
.fancytree-loading span.fancytree-expander,
210210
.fancytree-loading span.fancytree-expander:hover,
211211
.fancytree-statusnode-loading span.fancytree-icon,
212-
.fancytree-statusnode-loading span.fancytree-icon:hover {
212+
.fancytree-statusnode-loading span.fancytree-icon:hover,
213+
span.fancytree-icon.fancytree-icon-loading {
213214
background-image: none;
214215
}
215216
/* Status node icons */
@@ -379,6 +380,9 @@ table.fancytree-ext-columnview span.fancytree-node {
379380
display: inline-block;
380381
}
381382
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
383+
background-color: #e0e0e0;
384+
}
385+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
382386
background-color: #CBE8F6;
383387
}
384388
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

src/skin-bootstrap/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,8 @@ span.fancytree-icon {
209209
.fancytree-loading span.fancytree-expander,
210210
.fancytree-loading span.fancytree-expander:hover,
211211
.fancytree-statusnode-loading span.fancytree-icon,
212-
.fancytree-statusnode-loading span.fancytree-icon:hover {
212+
.fancytree-statusnode-loading span.fancytree-icon:hover,
213+
span.fancytree-icon.fancytree-icon-loading {
213214
background-image: none;
214215
}
215216
/* Status node icons */
@@ -379,6 +380,9 @@ table.fancytree-ext-columnview span.fancytree-node {
379380
display: inline-block;
380381
}
381382
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
383+
background-color: #e0e0e0;
384+
}
385+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
382386
background-color: #CBE8F6;
383387
}
384388
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

src/skin-common.less

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -462,7 +462,8 @@ span.fancytree-icon { // Default icon
462462
.fancytree-loading span.fancytree-expander,
463463
.fancytree-loading span.fancytree-expander:hover,
464464
.fancytree-statusnode-loading span.fancytree-icon,
465-
.fancytree-statusnode-loading span.fancytree-icon:hover {
465+
.fancytree-statusnode-loading span.fancytree-icon:hover,
466+
span.fancytree-icon.fancytree-icon-loading {
466467
background-image: @fancy-loading-url;
467468
.useSprite(0, 0);
468469
}
@@ -721,11 +722,12 @@ table.fancytree-ext-columnview {
721722
display: inline-block; // #117
722723
}
723724
span.fancytree-node.fancytree-expanded {
725+
background-color: #e0e0e0;
726+
}
727+
span.fancytree-node.fancytree-active {
724728
background-color: #CBE8F6;
729+
// background-color: royalblue;
725730
}
726-
// table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
727-
// background-color: royalblue;
728-
// }
729731
.fancytree-has-children span.fancytree-cv-right {
730732
position: absolute;
731733
right: 3px;

src/skin-lion/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,8 @@ span.fancytree-icon {
342342
.fancytree-loading span.fancytree-expander,
343343
.fancytree-loading span.fancytree-expander:hover,
344344
.fancytree-statusnode-loading span.fancytree-icon,
345-
.fancytree-statusnode-loading span.fancytree-icon:hover {
345+
.fancytree-statusnode-loading span.fancytree-icon:hover,
346+
span.fancytree-icon.fancytree-icon-loading {
346347
background-image: url("../skin-lion/loading.gif");
347348
background-position: 0px 0px;
348349
}
@@ -544,6 +545,9 @@ table.fancytree-ext-columnview span.fancytree-node {
544545
display: inline-block;
545546
}
546547
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
548+
background-color: #e0e0e0;
549+
}
550+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
547551
background-color: #CBE8F6;
548552
}
549553
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

src/skin-material/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,8 @@ span.fancytree-icon {
209209
.fancytree-loading span.fancytree-expander,
210210
.fancytree-loading span.fancytree-expander:hover,
211211
.fancytree-statusnode-loading span.fancytree-icon,
212-
.fancytree-statusnode-loading span.fancytree-icon:hover {
212+
.fancytree-statusnode-loading span.fancytree-icon:hover,
213+
span.fancytree-icon.fancytree-icon-loading {
213214
background-image: none;
214215
}
215216
/* Status node icons */
@@ -379,6 +380,9 @@ table.fancytree-ext-columnview span.fancytree-node {
379380
display: inline-block;
380381
}
381382
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
383+
background-color: #e0e0e0;
384+
}
385+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
382386
background-color: #CBE8F6;
383387
}
384388
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

src/skin-themeroller/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,8 @@ span.fancytree-icon {
338338
.fancytree-loading span.fancytree-expander,
339339
.fancytree-loading span.fancytree-expander:hover,
340340
.fancytree-statusnode-loading span.fancytree-icon,
341-
.fancytree-statusnode-loading span.fancytree-icon:hover {
341+
.fancytree-statusnode-loading span.fancytree-icon:hover,
342+
span.fancytree-icon.fancytree-icon-loading {
342343
background-image: url("../skin-themeroller/loading.gif");
343344
background-position: 0px 0px;
344345
}
@@ -540,6 +541,9 @@ table.fancytree-ext-columnview span.fancytree-node {
540541
display: inline-block;
541542
}
542543
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
544+
background-color: #e0e0e0;
545+
}
546+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
543547
background-color: #CBE8F6;
544548
}
545549
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

src/skin-vista/ui.fancytree.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,8 @@ span.fancytree-icon {
352352
.fancytree-loading span.fancytree-expander,
353353
.fancytree-loading span.fancytree-expander:hover,
354354
.fancytree-statusnode-loading span.fancytree-icon,
355-
.fancytree-statusnode-loading span.fancytree-icon:hover {
355+
.fancytree-statusnode-loading span.fancytree-icon:hover,
356+
span.fancytree-icon.fancytree-icon-loading {
356357
background-image: url("../skin-vista/loading.gif");
357358
background-position: 0px 0px;
358359
}
@@ -554,6 +555,9 @@ table.fancytree-ext-columnview span.fancytree-node {
554555
display: inline-block;
555556
}
556557
table.fancytree-ext-columnview span.fancytree-node.fancytree-expanded {
558+
background-color: #e0e0e0;
559+
}
560+
table.fancytree-ext-columnview span.fancytree-node.fancytree-active {
557561
background-color: #CBE8F6;
558562
}
559563
table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right {

0 commit comments

Comments
 (0)