From a9c8ef5a0d8455427def0b35f4989fdd855b4fc5 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Tue, 24 Jun 2014 10:29:50 -0400 Subject: [PATCH 1/2] Filter to tree --- .bower.json | 14 +++++ LICENSE | 20 +++++++ README.md | 122 +++++++++++++++++++++++++++++++++++++++ angular.treeview.js | 105 +++++++++++++++++++++++++++++++++ angular.treeview.min.js | 9 +++ css/angular.treeview.css | 56 ++++++++++++++++++ img/file.png | Bin 0 -> 263 bytes img/folder-closed.png | Bin 0 -> 281 bytes img/folder.png | Bin 0 -> 289 bytes img/jsfiddle01.png | Bin 0 -> 82849 bytes img/jsfiddle02.png | Bin 0 -> 99886 bytes img/preview.png | Bin 0 -> 4265 bytes 12 files changed, 326 insertions(+) create mode 100644 .bower.json create mode 100644 LICENSE create mode 100644 README.md create mode 100644 angular.treeview.js create mode 100644 angular.treeview.min.js create mode 100644 css/angular.treeview.css create mode 100644 img/file.png create mode 100644 img/folder-closed.png create mode 100644 img/folder.png create mode 100644 img/jsfiddle01.png create mode 100644 img/jsfiddle02.png create mode 100644 img/preview.png diff --git a/.bower.json b/.bower.json new file mode 100644 index 0000000..bd9ef33 --- /dev/null +++ b/.bower.json @@ -0,0 +1,14 @@ +{ + "name": "angular.treeview", + "homepage": "https://github.com/luisalvarez/angular.treeview", + "_release": "e72dd58723", + "_resolution": { + "type": "branch", + "branch": "master", + "commit": "e72dd587233fa392e7da8e6e58622d61a100fa24" + }, + "_source": "https://github.com/luisalvarez/angular.treeview.git", + "_target": "*", + "_originalSource": "https://github.com/luisalvarez/angular.treeview.git", + "_direct": true +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..514acd3 --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2013 Steve + +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..3c2a7b5 --- /dev/null +++ b/README.md @@ -0,0 +1,122 @@ +Angular Treeview +================ + +Pure [AngularJS](http://www.angularjs.org) based tree menu directive. + +[![ScreenShot](https://github.com/eu81273/angular.treeview/raw/master/img/preview.png)](http://jsfiddle.net/eu81273/8LWUc/) + +## Installation + +Copy the script and css into your project and add a script and link tag to your page. + +```html + + +``` + +Add a dependency to your application module. + +```javascript +angular.module('myApp', ['angularTreeview']); +``` + +Add a tree to your application. See [Usage](#usage). + +## Usage + +Attributes of angular treeview are below. + +- angular-treeview: the treeview directive. +- tree-id : each tree's unique id. +- tree-model : the tree model on $scope. +- node-id : each node's id. +- node-label : each node's label. +- node-children: each node's children. + +Here is a simple example. + + +```html +
+
+``` + +Example model: + +```javascript +$scope.treedata = +[ + { "label" : "User", "id" : "role1", "children" : [ + { "label" : "subUser1", "id" : "role11", "children" : [] }, + { "label" : "subUser2", "id" : "role12", "children" : [ + { "label" : "subUser2-1", "id" : "role121", "children" : [ + { "label" : "subUser2-1-1", "id" : "role1211", "children" : [] }, + { "label" : "subUser2-1-2", "id" : "role1212", "children" : [] } + ]} + ]} + ]}, + { "label" : "Admin", "id" : "role2", "children" : [] }, + { "label" : "Guest", "id" : "role3", "children" : [] } +]; +``` + +## Selection + +If tree node is selected, then that selected tree node is saved to $scope."TREE ID".currentNode. By using $watch, the controller can recognize the tree selection. + + +```javascript +$scope.$watch( 'abc.currentNode', function( newObj, oldObj ) { + if( $scope.abc && angular.isObject($scope.abc.currentNode) ) { + console.log( 'Node Selected!!' ); + console.log( $scope.abc.currentNode ); + } +}, false); +``` + +## Examples + +#### Basic example +[![ScreenShot](https://github.com/eu81273/angular.treeview/raw/master/img/jsfiddle01.png)](http://jsfiddle.net/eu81273/8LWUc/) + +[jsFiddle - http://jsfiddle.net/eu81273/8LWUc/](http://jsfiddle.net/eu81273/8LWUc/) + +#### Multiple treeview example +[![ScreenShot](https://github.com/eu81273/angular.treeview/raw/master/img/jsfiddle02.png)](http://jsfiddle.net/eu81273/b9Pnw/) + +[jsFiddle - http://jsfiddle.net/eu81273/b9Pnw/](http://jsfiddle.net/eu81273/b9Pnw/) + +## Browser Compatibility + +Same with AngularJS. Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). + +## Changelogs + +#### version 0.1.6 +- Fixed the bug that 'null' string appears before each 'div' generated. (Thanks to Iaac) + +#### version 0.1.5 +- support multiple treeview. (Thanks to Axel Pesme) + +#### version 0.1.4 +- prevented memory leaks. + +#### version 0.1.3 +- removed unnecessary codes. + +#### version 0.1.2 +- removed some jQuery dependency. (Issue #2) + +## License + +The MIT License. + +Copyright ⓒ 2013 AHN JAE-HA. + +See [LICENSE](https://github.com/eu81273/angular.treeview/blob/master/LICENSE) diff --git a/angular.treeview.js b/angular.treeview.js new file mode 100644 index 0000000..e9a7911 --- /dev/null +++ b/angular.treeview.js @@ -0,0 +1,105 @@ +/* + @license Angular Treeview version 0.1.6 + ⓒ 2013 AHN JAE-HA http://github.com/eu81273/angular.treeview + License: MIT + + + [TREE attribute] + angular-treeview: the treeview directive + tree-id : each tree's unique id. + tree-model : the tree model on $scope. + node-id : each node's id + node-label : each node's label + node-children: each node's children + data-node-filter: filter to search +
+
+*/ + +(function ( angular ) { + 'use strict'; + + angular.module( 'angularTreeview', [] ).directive( 'treeModel', ['$compile', function( $compile ) { + return { + restrict: 'A', + link: function ( scope, element, attrs ) { + //tree id + var treeId = attrs.treeId; + + //tree model + var treeModel = attrs.treeModel; + + //node id + var nodeId = attrs.nodeId || 'id'; + + //node label + var nodeLabel = attrs.nodeLabel || 'label'; + + //children + var nodeChildren = attrs.nodeChildren || 'children'; + + //filter + var nodeFilter =attrs.nodeFilter || ''; + var filter=null; + if(nodeFilter!==''){ + filter=' | filter: ' + nodeFilter; + } + //tree template + var template = + ''; + + + //check tree id, tree model + if( treeId && treeModel ) { + + //root node + if( attrs.angularTreeview ) { + + //create tree object if not exists + scope[treeId] = scope[treeId] || {}; + + //if node head clicks, + scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function( selectedNode ){ + + //Collapse or Expand + selectedNode.collapsed = !selectedNode.collapsed; + }; + + //if node label clicks, + scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ){ + + //remove highlight from previous node + if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) { + scope[treeId].currentNode.selected = undefined; + } + + //set highlight to selected node + selectedNode.selected = 'selected'; + + //set currentNode + scope[treeId].currentNode = selectedNode; + }; + } + + //Rendering template. + element.html('').append( $compile( template )( scope ) ); + } + } + }; + }]); +})( angular ); diff --git a/angular.treeview.min.js b/angular.treeview.min.js new file mode 100644 index 0000000..e02a85b --- /dev/null +++ b/angular.treeview.min.js @@ -0,0 +1,9 @@ +/* + @license Angular Treeview version 0.1.6 + ⓒ 2013 AHN JAE-HA http://github.com/eu81273/angular.treeview + License: MIT +*/ + +(function(f){f.module("angularTreeview",[]).directive("treeModel",function($compile){return{restrict:"A",link:function(b,h,c){var a=c.treeId,g=c.treeModel,e=c.nodeLabel||"label",d=c.nodeChildren||"children",e='