Skip to content

Commit 3d74afc

Browse files
author
Niels Dequeker
committed
Merge branch 'master' into replace-grunt-with-gulp
Conflicts: demo/dist/angular-ui-tree.js demo/dist/angular-ui-tree.min.js demo/index.html demo/test.html dist/angular-ui-tree.js dist/angular-ui-tree.min.js source/directives/uiTree.js source/directives/uiTreeNodes.js
2 parents b42afa5 + 2dbb5a6 commit 3d74afc

File tree

8 files changed

+493
-167
lines changed

8 files changed

+493
-167
lines changed

‎README.md

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,16 @@ Injecting `ui.tree`, `ui-tree-nodes`, `ui-tree-node`, `ui-tree-handle` to your h
131131
`ui-tree` is the root scope for a tree
132132

133133
#### Attributes
134+
##### data-drop-enabled
135+
Turn on the ability to prevent dropping of nodes into this tree.
136+
- `false` (default): turn off
137+
- `true`: turn on no drop
138+
139+
##### data-clone-enabled
140+
Turn on cloning of nodes. This will clone the source node to the destination when dragging between 2 trees.
141+
- `false` (default): turn off clone
142+
- `true`: turn on clone
143+
134144
##### data-drag-enabled
135145
Turn on dragging and dropping of nodes.
136146
- `true` (default): allow drag and drop
@@ -144,10 +154,10 @@ If you write your own [$callbacks.accept](#accept) method, you have to check `da
144154
##### data-drag-delay
145155
Number of milliseconds a click must be held to start a drag. (default 0)
146156

147-
##### data-empty-place-holder-enabled
148-
If a tree is empty, there will be an empty place hoder which is used to drop node from other trees by default.
149-
- `true` (default): display an empty place holder if the tree is empty
150-
- `false`: do not display an empty place hoder
157+
##### data-empty-placeholder-enabled
158+
If a tree is empty, there will be an empty placeholder which is used to drop node from other trees by default.
159+
- `true` (default): display an empty placeholder if the tree is empty
160+
- `false`: do not display an empty placeholder
151161

152162
##### Example
153163
- turn on/off drag and drop.
@@ -255,16 +265,16 @@ Same as [Parameters](#eventParam) of dropped.
255265
`ui-tree-nodes` is the container of nodes. Every `ui-tree-node` should have a `ui-tree-nodes` as it's container, a `ui-tree-nodes` can have multiple child nodes.
256266

257267
#### Attributes
258-
##### data-nodrop<a name="nodes_attrs_nodrop"></a>
268+
##### data-nodrop-enabled <a name="nodes_attrs_nodrop"></a>
259269
Turn off drop of nodes.
260-
##### data-max-depth<a name="nodes_attrs_maxDepth"></a>
270+
##### data-max-depth <a name="nodes_attrs_maxDepth"></a>
261271
Number of levels a nodes can be nested (default 0). 0 means no limit. It can override the `data-max-depth` in `ui-tree`.
262272
**Note**
263-
If you write your own [$callbacks.accept](#accept) method, you have to check `data-nodrop` and `data-max-depth` by yourself.
273+
If you write your own [$callbacks.accept](#accept) method, you have to check `data-nodrop-enabled` and `data-max-depth` by yourself.
264274

265275
Example: turn off drop.
266276
```html
267-
<ol ui-tree-nodes ng-model="nodes" data-nodrop>
277+
<ol ui-tree-nodes ng-model="nodes" data-nodrop-enabled="true">
268278
<li ng-repeat="node in nodes" ui-tree-node>{{node.title}}</li>
269279
</ol>
270280
```
@@ -295,8 +305,8 @@ The property `$nodeScope of` `nodes 1.1` is `node 1.1`. The property `$nodes` of
295305
##### maxDepth
296306
Number of levels a node can be nested. It bases on the attribute [data-max-depth](#nodes_attrs_maxDepth).
297307

298-
##### nodrop
299-
Turn off drop on nodes. It bases on the attribute [data-nodrag](#nodes_attrs_nodrop).
308+
##### nodropEnabled
309+
Turn off drop on nodes. It bases on the attribute [data-nodrop-enabled](#nodes_attrs_nodrop).
300310

301311
#### Methods of scope
302312
##### depth()

‎demo/clone-node-trees.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS Tree demo</title>
6+
7+
<!-- Stylesheets -->
8+
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="dist/angular-ui-tree.min.css">
10+
<link rel="stylesheet" href="css/tree.css">
11+
</head>
12+
<body ng-app="cloneNodesApp">
13+
14+
<!-- Nested node template -->
15+
<script type="text/ng-template" id="nodes_renderer1.html">
16+
<div ui-tree-handle class="tree-node">
17+
<div class="tree-node-content">
18+
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
19+
{{node.title}}
20+
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
21+
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
22+
</div>
23+
</div>
24+
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
25+
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer1.html'">
26+
</li>
27+
</ol>
28+
</script>
29+
<script type="text/ng-template" id="nodes_renderer2.html">
30+
<div class="tree-node">
31+
<div class="pull-left tree-handle" ui-tree-handle>
32+
<span class="glyphicon glyphicon-list"></span>
33+
</div>
34+
<div class="tree-node-content">
35+
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
36+
{{node.title}}
37+
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
38+
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
39+
</div>
40+
</div>
41+
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
42+
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer2.html'">
43+
</li>
44+
</ol>
45+
</script>
46+
<div class="container" ng-controller="cloneNodesCtrl">
47+
<h1 class="page-header">Clone Nodes - Connected lists</h1>
48+
<a href="index.html"><i class="glyphicon glyphicon-chevron-left"></i> Back to overview page</a>
49+
50+
<h3>Connected lists with clone the right tree nodes when dragging to the tree. The right also has No Drop enabled since it is the base for cloning.</h3>
51+
<sup>Depending on your tree model you may get a <i>[ngRepeat:dupes]</i> error. If you do you can use the <a href="https://docs.angularjs.org/error/ngRepeat/dupes" target="_blank">track by $index</a> in your ngRepeat expression</sup>
52+
<div class="row">
53+
<div class="col-sm-6">
54+
<h3>Tree 1 (Clone Tree 2 items here)</h3>
55+
<div ui-tree id="tree1-root">
56+
<ol ui-tree-nodes="" ng-model="tree1">
57+
<li ng-repeat="node in tree1 track by $index" ui-tree-node ng-include="'nodes_renderer1.html'"></li>
58+
</ol>
59+
</div>
60+
</div>
61+
62+
<div class="col-sm-6">
63+
<h3>Origin Tree 2 (No Drop)</h3>
64+
<div ui-tree id="tree2-root" data-nodrop-enabled="true" data-clone-enabled="true">
65+
<ol ui-tree-nodes="" ng-model="tree2">
66+
<li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
67+
</ol>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<h3>Data binding</h3>
73+
<div class="row">
74+
<div class="col-sm-6">
75+
<pre class="code">{{ tree1 | json }}</pre>
76+
</div>
77+
78+
<div class="col-sm-6">
79+
<pre class="code">{{ tree2 | json }}</pre>
80+
</div>
81+
</div>
82+
83+
</div>
84+
85+
<!--[if IE 8]>
86+
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
87+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.min.js"></script>
88+
<![endif]-->
89+
<script src="bower_components/angular/angular.min.js"></script>
90+
<script type="text/javascript" src="dist/angular-ui-tree.js"></script>
91+
<script type="text/javascript" src="js/clone-nodes.js"></script>
92+
</body>
93+
</html>

‎demo/index.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS UI Tree demo</title>
6+
7+
<!-- Stylesheets -->
8+
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="dist/angular-ui-tree.min.css">
10+
<link rel="stylesheet" href="css/demo.css">
11+
</head>
12+
<body ng-app="demoApp">
13+
14+
<div class="container">
15+
16+
<div class="jumbotron">
17+
<h1>Tree component</h1>
18+
<p class="lead">The AngularJS Tree component with drag and drop support.</p>
19+
<p><a class="btn btn-lg btn-success" href="https://github.com/JimLiu/angular-ui-tree" role="button">Code on GitHub</a></p>
20+
</div>
21+
22+
<div class="row">
23+
<div class="col-md-4">
24+
<h2>What?</h2>
25+
<p>
26+
Angular Tree is an AngularJS UI component that can sort nested lists, provides drag &amp; drop support and doesn't depend on jQuery.
27+
</p>
28+
</div>
29+
<div class="col-md-4">
30+
<h2>Features</h2>
31+
<ul>
32+
<li>Uses the native AngularJS scope for data binding</li>
33+
<li>Sorted and move items through the entire tree</li>
34+
<li>Prevent elements from accepting child nodes</li>
35+
</ul>
36+
</div>
37+
<div class="col-md-4">
38+
<h2>Examples</h2>
39+
<ol>
40+
<li><a href="tree.html">Unlimited nesting</a></li>
41+
<li><a href="tree-horizontal.html">Above with horizontal sorting</a></li>
42+
<li><a href="trees.html">Connected trees</a></li>
43+
<li><a href="groups.html">Groups &amp; Categories</a></li>
44+
<li><a href="filter.html">Filter</a></li>
45+
<li><a href="clone-node-trees.html">Clone nodes</a></li>
46+
</ol>
47+
</div>
48+
</div>
49+
50+
<div class="row">
51+
<div class="col-md-12">
52+
<h2>See it in action</h2>
53+
</div>
54+
</div>
55+
56+
<div class="row">
57+
<div class="col-md-12">
58+
<div class="row" ng-controller="MainCtrl">
59+
<div class="col-lg-6">
60+
<h3>Draggable Tree</h3>
61+
62+
<!-- Nested list template -->
63+
<script type="text/ng-template" id="items_renderer.html">
64+
<div ui-tree-handle>
65+
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
66+
{{item.title}}
67+
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
68+
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
69+
</div>
70+
<ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
71+
<li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'">
72+
</li>
73+
</ol>
74+
</script>
75+
<div ui-tree="options">
76+
<ol ui-tree-nodes ng-model="list" >
77+
<li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'"></li>
78+
</ol>
79+
</div>
80+
</div>
81+
82+
<div class="col-lg-6">
83+
<h3>Full tree</h3>
84+
<pre class="code">{{ list | json }}</pre>
85+
</div>
86+
</div>
87+
88+
</div>
89+
90+
</div>
91+
</div>
92+
93+
<!-- JavaScript -->
94+
<!--[if IE 8]>
95+
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
96+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.min.js"></script>
97+
<![endif]-->
98+
<script src="bower_components/angular/angular.min.js"></script>
99+
<script src="dist/angular-ui-tree.js"></script>
100+
<script src="js/demo.js"></script>
101+
</body>
102+
</html>

‎demo/js/clone-nodes.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('cloneNodesApp', ['ui.tree'])
5+
.controller('cloneNodesCtrl', function($scope) {
6+
7+
$scope.remove = function(scope) {
8+
scope.remove();
9+
};
10+
11+
$scope.toggle = function(scope) {
12+
scope.toggle();
13+
};
14+
15+
$scope.newSubItem = function(scope) {
16+
var nodeData = scope.$modelValue;
17+
nodeData.nodes.push({
18+
id: nodeData.id * 10 + nodeData.nodes.length,
19+
title: nodeData.title + '.' + (nodeData.nodes.length + 1),
20+
nodes: []
21+
});
22+
};
23+
24+
25+
$scope.tree1 = [{
26+
"id": 1,
27+
"title": "tree1 - item1",
28+
"nodes": []
29+
}, {
30+
"id": 2,
31+
"title": "tree1 - item2",
32+
"nodes": []
33+
}, {
34+
"id": 3,
35+
"title": "tree1 - item3",
36+
"nodes": []
37+
}, {
38+
"id": 4,
39+
"title": "tree1 - item4",
40+
"nodes": []
41+
}];
42+
$scope.tree2 = [{
43+
"id": 1,
44+
"title": "tree2 - item1",
45+
"nodes": []
46+
}, {
47+
"id": 2,
48+
"title": "tree2 - item2",
49+
"nodes": []
50+
}, {
51+
"id": 3,
52+
"title": "tree2 - item3",
53+
"nodes": []
54+
}, {
55+
"id": 4,
56+
"title": "tree2 - item4",
57+
"nodes": []
58+
}];
59+
});
60+
61+
})();

‎demo/test.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html><head>
3+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
4+
<title>Demo</title>
5+
<link rel="stylesheet" type="text/css" href="http://jimliu.github.io/angular-ui-tree/dist/angular-ui-tree.min.css">
6+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
7+
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
8+
<script type="text/javascript" src="dist/angular-ui-tree.js"></script>
9+
<script type="text/javascript">
10+
//<![CDATA[
11+
12+
angular.module('treeApp', ['ui.tree'])
13+
.controller('treeCtrl', function($scope, $timeout) {
14+
$timeout(function(){
15+
$scope.data = [
16+
{title: 'A'},
17+
{title: 'Abc'},
18+
{title: 'Ab'},
19+
{title: 'Ac'},
20+
{title: 'bc'},
21+
{title: 'B'},
22+
{title: 'C'}
23+
];
24+
},100);
25+
26+
$scope.treeOptions = {
27+
dragStart: function(event) {
28+
console.log('Start dragging', event);
29+
},
30+
dragStop: function(event) {
31+
// This will be never called :(
32+
console.log('Stop dragging', event);
33+
},
34+
dropped: function(event) {
35+
console.log('dropped', event);
36+
},
37+
};
38+
});
39+
40+
//]]>
41+
42+
</script>
43+
44+
45+
<style type="text/css"></style></head>
46+
<body ng-app="treeApp">
47+
<div ng-controller="treeCtrl">
48+
<input type="text" ng-model="search" placeholder="Search">
49+
<ol ui-tree="treeOptions" ui-tree-nodes ng-model="data">
50+
<li ng-repeat="item in data | filter:search" ui-tree-node>
51+
{{item.title}}
52+
</li>
53+
</ol>
54+
<pre>
55+
{{ data | json }}
56+
</pre>
57+
</div>
58+
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)