refactor(treeView): redisign

pull/3/head
alex 2016-01-12 12:50:01 +03:00
parent 531812d83c
commit 9332102a06
5 changed files with 383 additions and 277 deletions

View File

@ -47,12 +47,12 @@
"angular-chart.js": "~0.8.8", "angular-chart.js": "~0.8.8",
"angular-chartist.js": "~3.3.12", "angular-chartist.js": "~3.3.12",
"angular-morris-chart": "~1.1.0", "angular-morris-chart": "~1.1.0",
"angular-ui-tree": "~2.12.0",
"ionrangeslider": "~2.1.2", "ionrangeslider": "~2.1.2",
"angular-bootstrap": "~0.14.3", "angular-bootstrap": "~0.14.3",
"angular-animate": "~1.4.8", "angular-animate": "~1.4.8",
"textAngular": "~1.4.6", "textAngular": "~1.4.6",
"angular-xeditable": "~0.1.9" "angular-xeditable": "~0.1.9",
"ng-js-tree": "~0.0.7"
}, },
"overrides": { "overrides": {
"amcharts": { "amcharts": {

View File

@ -10,6 +10,7 @@ angular.module('BlurAdmin', [
'smart-table', 'smart-table',
"xeditable", "xeditable",
'ui.slimscroll', 'ui.slimscroll',
'ngJsTree',
'BlurAdmin.theme', 'BlurAdmin.theme',
'BlurAdmin.pages', 'BlurAdmin.pages',

View File

@ -1,72 +1,39 @@
<div> <div class="row" ng-controller="treeCtrl">
<div class="col-md-6">
<script type="text/ng-template" id="nodes_renderer.html"> <div ba-panel ba-panel-title="Basic Action" ba-panel-class="with-scroll tree-panel">
<div ui-tree-handle class="tree-node tree-node-content" ng-class="{'selected' : this.selected}" <div class="row">
ng-click="select(this)"> <div class="col-sm-4">
<a ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><i class="control" <div class="control-side text-center">
ng-class="{ <div>
'ion-chevron-right': collapsed, <button class="btn btn-primary" ng-click="addNewNode()">Add</button>
'ion-chevron-down': !collapsed
}"></i></a>
<i class="control ion-document" ng-if="!node.nodes || node.nodes.length < 1"></i>
{{node.title}}
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ng-show="visible(node)" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</script>
<div class="row">
<div class="col-md-6">
<div ba-panel ba-panel-title="Basic Action" ba-panel-class="with-scroll tree-panel">
<div class="row" ng-controller="treeCtrl">
<div class="col-sm-4">
<div class="control-side text-center">
<div>
<button class="btn btn-primary" ng-click="newSubItem()">Add</button>
</div>
<div>
<button class="btn btn-primary" ng-click="remove()">Remove</button>
</div>
<div>
<button class="btn btn-primary" ng-click="collapseAll()">Collapse All</button>
</div>
<div>
<button class="btn btn-primary" ng-click="expandAll()">Expand All</button>
</div>
<div>
<button class="btn btn-primary" ng-click="refresh()">Refresh</button>
</div>
<div>
<div class="form-group text-left search-container">
<label for="search">Filter</label>
<input id="search" type="text" class="form-control" ng-model="query" ng-change="find()">
</div>
</div>
</div> </div>
</div> <div>
<div class="col-sm-8"> <button class="btn btn-primary" ng-click="collapse()">Collapse All</button>
<div ui-tree data-drag-enabled="false" id="tree-root"> </div>
<ol ui-tree-nodes ng-model="basicData"> <div>
<li ng-repeat="node in basicData" ng-show="visible(node)" ui-tree-node <button class="btn btn-primary" ng-click="expand()">Expand All</button>
ng-include="'nodes_renderer.html'"></li> </div>
</ol> <div>
<button class="btn btn-primary" ng-click="refresh()">Refresh</button>
</div>
<div>
<div class="form-group text-left search-container">
<label for="search">Filter</label>
<input id="search" type="text" class="form-control" ng-model="query" ng-change="find()">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-sm-8">
</div> <div js-tree="basicConfig" ng-model="treeData" should-apply="applyModelChanges()" tree="basicTree" tree-events="ready:readyCB"></div>
<div class="col-md-6">
<div ba-panel ba-panel-title="Drag & Drop" ba-panel-class="with-scroll tree-panel">
<div data-ui-tree="treeOptions" data-drag-enabled="true" id="tree-root-drag" ng-controller="treeCtrl">
<ol data-ui-tree-nodes ng-model="dragData">
<li data-ng-repeat="node in dragData" data-ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6">
<div ba-panel ba-panel-title="Drag & Drop" ba-panel-class="with-scroll tree-panel">
<div js-tree="dragConfig" ng-model="dragData"></div>
</div>
</div> </div>
</div>
</div> </div>

View File

@ -11,239 +11,377 @@
/** @ngInject */ /** @ngInject */
function treeCtrl($scope, $timeout) { function treeCtrl($scope, $timeout) {
var getRootNodesScope = function () { $scope.ignoreChanges = false;
return angular.element(document.getElementById('tree-root')).scope(); var newId = 0;
$scope.ignoreChanges = false;
$scope.newNode = {};
$scope.basicConfig = {
core: {
multiple: false,
check_callback: true,
worker: true
},
'types': {
'folder': {
'icon': 'ion-ios-folder'
},
'default': {
'icon': 'ion-document-text'
}
},
'plugins': ['types'],
'version': 1
}; };
var getFirstNode = function () { $scope.dragConfig = {
return angular.element(document.getElementsByClassName("tree-node")[0]).scope(); 'core': {
'check_callback': true,
'themes': {
'responsive': false
}
},
'types': {
'folder': {
'icon': 'ion-ios-folder'
},
'default': {
'icon': 'ion-document-text'
}
},
"plugins": ["dnd", 'types']
}; };
$scope.select = function (item) { $scope.addNewNode = function () {
$scope.current.selected = false; $scope.ignoreChanges = true;
$scope.current = item; var selected = this.basicTree.jstree(true).get_selected()[0];
$scope.current.selected = true; if (selected)
$scope.treeData.push({
id: (newId++).toString(),
parent: selected,
text: "New node " + newId,
state: {opened: true}
});
$scope.basicConfig.version++;
}; };
$scope.remove = function () {
$scope.current.remove(); $scope.refresh = function () {
$scope.current = getFirstNode(); $scope.ignoreChanges = true;
$scope.current.selected = true; newId = 0;
$scope.treeData = getDefaultData();
$scope.basicConfig.version++;
}; };
$scope.toggle = function (scope) { $scope.expand = function () {
scope.toggle(); $scope.ignoreChanges = true;
$scope.treeData.forEach(function (n) {
n.state.opened = true;
});
$scope.basicConfig.version++;
}; };
$scope.newSubItem = function () { $scope.collapse = function () {
var nodeData = $scope.current.$modelValue; $scope.ignoreChanges = true;
nodeData.nodes.push({ $scope.treeData.forEach(function (n) {
id: nodeData.id * 10 + nodeData.nodes.length, n.state.opened = false;
title: nodeData.title + '.' + (nodeData.nodes.length + 1), });
nodes: [] $scope.basicConfig.version++;
};
$scope.readyCB = function() {
$timeout(function() {
$scope.ignoreChanges = false;
}); });
}; };
$scope.collapseAll = function () {
var scope = getRootNodesScope(); $scope.applyModelChanges = function() {
scope.collapseAll(); return !$scope.ignoreChanges;
}; };
$scope.expandAll = function () { $scope.treeData = getDefaultData();
var scope = getRootNodesScope(); $scope.dragData = [
scope.expandAll(); {
}; "id": "nd1",
"parent": "#",
$scope.visible = function (item) { "type": "folder",
return !($scope.query && $scope.query.length > 0 "text": "Node 1",
&& item.title.indexOf($scope.query) == -1); "state": {
}; "opened": true
}
$scope.basicData = getDefaultData(); },
{
$scope.refresh = function () { "id": "nd2",
$scope.basicData = getDefaultData(); "parent": "#",
$scope.current = getFirstNode(); "type": "folder",
if ($scope.current) $scope.current.selected = true; "text": "Node 2",
else $scope.current = {}; "state": {
}; "opened": true
}
$scope.treeOptions = { },
beforeDrop: function (e) { {
var sourceValue = e.source.nodeScope.$modelValue.value, "id": "nd3",
destValue = e.dest.nodesScope.node ? e.dest.nodesScope.node.value : undefined; "parent": "#",
return true; "type": "folder",
"text": "Node 3",
"state": {
"opened": true
}
},
{
"id": "nd4",
"parent": "#",
"type": "folder",
"text": "Node 4",
"state": {
"opened": true
}
},
{
"id": "nd5",
"parent": "nd1",
"text": "Node 1.1",
"state": {
"opened": true
}
},
{
"id": "nd6",
"parent": "nd1",
"text": "Node 1.2",
"state": {
"opened": true
}
},
{
"id": "nd7",
"parent": "nd1",
"text": "Node 1.3",
"state": {
"opened": true
}
},
{
"id": "nd8",
"parent": "nd2",
"text": "Node 2.1",
"state": {
"opened": true
}
},
{
"id": "nd9",
"parent": "nd2",
"text": "Node 2.2",
"state": {
"opened": true
}
},
{
"id": "nd10",
"parent": "nd2",
"text": "Node 2.3",
"state": {
"opened": true
}
},
{
"id": "nd11",
"parent": "nd3",
"text": "Node 3.1",
"state": {
"opened": true
}
},
{
"id": "nd12",
"parent": "nd3",
"text": "Node 3.2",
"state": {
"opened": true
}
},
{
"id": "nd13",
"parent": "nd3",
"text": "Node 3.3",
"state": {
"opened": true
}
},
{
"id": "nd14",
"parent": "nd4",
"text": "Node 4.1",
"state": {
"opened": true
}
},
{
"id": "nd15",
"parent": "nd4",
"text": "Node 4.2",
"state": {
"opened": true
}
},
{
"id": "nd16",
"parent": "nd4",
"text": "Node 4.3",
"state": {
"opened": true
}
} }
}; ];
function getDefaultData() { function getDefaultData() {
return [ return [
{
{ "id": "n1",
'id': 1, "parent": "#",
'title': 'Node 1', "type": "folder",
'nodes': [ "text": "Node 1",
{ "state": {
'id': 11, "opened": true
'title': 'Node 1.1', }
'nodes': [ },
{ {
'id': 111, "id": "n2",
'title': 'Node 1.1.1', "parent": "#",
'nodes': [] "type": "folder",
} "text": "Node 2",
] "state": {
}, "opened": true
{ }
'id': 12, },
'title': 'Node 1.2', {
'nodes': [] "id": "n3",
} "parent": "#",
] "type": "folder",
}, { "text": "Node 3",
'id': 2, "state": {
'title': 'Node 2', "opened": true
'nodes': [ }
{ },
'id': 21, {
'title': 'Node 2.1', "id": "n5",
'nodes': [] "parent": "n1",
}, "text": "Node 1.1",
{ "state": {
'id': 22, "opened": false
'title': 'Node 2.2', }
'nodes': [] },
} {
] "id": "n6",
}, { "parent": "n1",
'id': 3, "text": "Node 1.2",
'title': 'Node 3', "state": {
'nodes': [ "opened": true
{ }
'id': 31, },
'title': 'Node 3.1', {
'nodes': [] "id": "n7",
}, "parent": "n1",
{ "text": "Node 1.3",
'id': 32, "state": {
'title': 'Node 3.2', "opened": true
'nodes': [{ }
'id': 321, },
'title': 'Node 3.2.1', {
'nodes': [] "id": "n8",
}, "parent": "n1",
{ "text": "Node 1.4",
'id': 322, "state": {
'title': 'Node 3.2.2', "opened": true
'nodes': [] }
}, },
{ {
'id': 323, "id": "n9",
'title': 'Node 3.2.3', "parent": "n2",
'nodes': [] "text": "Node 2.1",
}] "state": {
} "opened": false
] }
}, },
{ {
'id': 4, "id": "n10",
'title': 'Node 4', "parent": "n2",
'nodes': [ "text": "Node 2.2 (Custom icon)",
{ "icon": "ion-help-buoy",
'id': 41, "state": {
'title': 'Node 4.1', "opened": false
'nodes': [] }
}] },
}] {
"id": "n12",
"parent": "n3",
"text": "Node 3.1",
"state": {
"opened": false
}
},
{
"id": "n13",
"parent": "n3",
"type": "folder",
"text": "Node 3.2",
"state": {
"opened": true
}
},
{
"id": "n14",
"parent": "n13",
"text": "Node 3.2.1",
"state": {
"opened": false
}
},
{
"id": "n15",
"parent": "n13",
"text": "Node 3.2.2",
"state": {
"opened": false
}
},
{
"id": "n16",
"parent": "n3",
"text": "Node 3.3",
"state": {
"opened": true
}
},
{
"id": "n17",
"parent": "n3",
"text": "Node 3.4",
"state": {
"opened": false
}
},
{
"id": "n18",
"parent": "n3",
"text": "Node 3.5",
"state": {
"opened": false
}
},
{
"id": "n19",
"parent": "n3",
"text": "Node 3.6",
"state": {
"opened": false
}
}
]
} }
$scope.dragData = [
{
"id": 1,
"title": "Node 1",
"nodes": [
{
"id": 11,
"title": "Node 1.1",
"nodes": []
},
{
"id": 12,
"title": "Node 1.2",
"nodes": []
},
{
"id": 12,
"title": "Node 1.3",
"nodes": []
},
{
"id": 13,
"title": "Node 1.4",
"nodes": []
}
]
},
{
"id": 2,
"title": "Node 2",
"nodes": [
{
"id": 21,
"title": "Node 2.1",
"nodes": []
},
{
"id": 22,
"title": "Node 2.2",
"nodes": []
},
{
"id": 22,
"title": "Node 2.3",
"nodes": []
},
{
"id": 23,
"title": "Node 2.4",
"nodes": []
}
]
},
{
"id": 3,
"title": "Node 3",
"nodes": [
{
"id": 31,
"title": "Node 3.1",
"nodes": []
},
{
"id": 31,
"title": "Node 3.2",
"nodes": []
},
{
"id": 32,
"title": "Node 3.3",
"nodes": []
},
{
"id": 33,
"title": "Node 3.4",
"nodes": []
}
]
}
];
$scope.find = function(){};
$timeout(function () {
$scope.current = getFirstNode();
if ($scope.current) $scope.current.selected = true;
else $scope.current = {};
}, 1000);
} }
})(); })();

View File