├── .mailmap ├── .gitignore ├── .travis.yml ├── test └── unit │ ├── bower.json │ ├── config │ └── karma.conf.js │ └── spec │ ├── .jshintrc │ └── angular-ui-tree-filter.spec.js ├── demo ├── bower.json ├── demo.css ├── .jshintrc ├── dist │ └── angular-ui-tree-filter.min.js ├── demo.js └── index.html ├── .jshintrc ├── src ├── .jshintrc └── angular-ui-tree-filter.js ├── dist ├── angular-ui-tree-filter.min.js └── angular-ui-tree-filter.js ├── bower.json ├── LICENSE ├── package.json ├── .jscs.json ├── README.md └── Gruntfile.js /.mailmap: -------------------------------------------------------------------------------- 1 | Michał Gołębiowski-Owczarek 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | *.xml 3 | 4 | npm-debug.log 5 | node_modules 6 | 7 | **/bower_components 8 | *.defs.js -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | 5 | before_script: 6 | - npm install -g bower 7 | - "cd test/unit/ && bower install --verbose && cd ../.." -------------------------------------------------------------------------------- /test/unit/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-tree-filter-tests", 3 | "private": true, 4 | "dependencies": { 5 | "angular": "v1.3.0-beta.9", 6 | "angular-mocks": "v1.3.0-beta.9" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /demo/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-tree-filter-demo", 3 | "private": true, 4 | "version": "0.0.1", 5 | "dependencies": { 6 | "angular": "~1.2.*", 7 | "angular-ui-tree": "~2.1.0", 8 | "angular-ui-utils": "https://github.com/angular-ui/ui-utils.git#highlight-0.1.1", 9 | "bootstrap": "~3.1.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | .tree-container { 2 | min-height: 500px; 3 | } 4 | .filtered-out .angular-ui-tree-handle { 5 | background-color: rgba(248, 250, 255, 0.3); 6 | border: 1px solid rgba(218, 226, 234, 0.3); 7 | color: rgba(124, 158, 178, 0.3); 8 | } 9 | .angular-ui-tree-node:not(.filtered-out) .ui-match { 10 | background: #ffdc0f; 11 | border-radius: 2px; 12 | box-shadow: 1px 1px 3px rgba(0,0,0,0.3); 13 | } 14 | 15 | .input-group { 16 | margin-bottom: 20px; 17 | } 18 | 19 | [ui-tree] small { 20 | color: #888888; 21 | font-weight: normal; 22 | } -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "devel": true, 3 | "node": true, 4 | 5 | "bitwise": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "eqnull": true, 9 | "forin": false, 10 | "immed": true, 11 | "indent": 4, 12 | "newcap": true, 13 | "noarg": true, 14 | "noempty": true, 15 | "nonew": true, 16 | "onevar": true, 17 | "strict": true, 18 | "trailing": true, 19 | "undef": true, 20 | "unused": true, 21 | "quotmark": "single", 22 | "maxcomplexity": 10, 23 | "maxerr": 50, 24 | "maxlen": 120, 25 | 26 | "globals": { 27 | "angular": false 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /demo/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "browser": true, 3 | "esnext": false, 4 | 5 | "bitwise": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "eqnull": true, 9 | "forin": false, 10 | "immed": true, 11 | "indent": 4, 12 | "newcap": true, 13 | "noarg": true, 14 | "noempty": true, 15 | "nonew": true, 16 | "onevar": true, 17 | "strict": true, 18 | "trailing": true, 19 | "undef": true, 20 | "unused": true, 21 | "quotmark": "single", 22 | "maxcomplexity": 10, 23 | "maxerr": 50, 24 | "maxlen": 120, 25 | 26 | "globals": { 27 | "angular": false 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": false, 3 | "browser": true, 4 | "esnext": true, 5 | 6 | "bitwise": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "eqnull": true, 10 | "forin": false, 11 | "immed": true, 12 | "indent": 4, 13 | "newcap": true, 14 | "noarg": true, 15 | "noempty": true, 16 | "nonew": true, 17 | "onevar": true, 18 | "strict": true, 19 | "trailing": true, 20 | "undef": true, 21 | "unused": true, 22 | 23 | "quotmark": "single", 24 | "maxcomplexity": 10, 25 | "maxerr": 50, 26 | "maxlen": 120, 27 | 28 | "globals": { 29 | "angular": false 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /test/unit/config/karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(config) { 4 | config.set({ 5 | frameworks: ['jasmine'], 6 | basePath: '../../../', 7 | files: [ 8 | 'test/unit/bower_components/angular/angular.min.js', 9 | 'test/unit/bower_components/angular-mocks/angular-mocks.js', 10 | 'src/angular-ui-tree-filter.defs.js', 11 | 'test/unit/spec/**/*.defs.js', 12 | ], 13 | port: 8080, 14 | runnerPort: 9100, 15 | logLevel: config.LOG_INFO, 16 | autoWatch: false, 17 | browsers: ['PhantomJS'], 18 | singleRun: true, 19 | reporters: ['progress'], 20 | colors: true, 21 | captureTimeout: 60000, 22 | reportSlowerThan: 10, 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /dist/angular-ui-tree-filter.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-ui-tree-filter 0.1.1, 01-10-2015 */ 2 | !function(a){"use strict";a.module("ui.tree-filter",[]).provider("uiTreeFilterSettings",function(){var a=this;this.addresses=["title"],this.regexFlags="gi",this.descendantCollection="items",this.$get=function(){return{addresses:a.addresses,regexFlags:a.regexFlags,descendantCollection:a.descendantCollection}}}).filter("uiTreeFilter",["uiTreeFilterSettings",function(a){function b(a,b,c){a=a||[];var e=!1;return a.forEach(function(a){e=e||d(a,b,c)}),e}function c(a,b){var d=b.split(".");if(void 0!==a)return d.length<2?a[d[0]]:c(a[d[0]],d.slice(1).join("."))}function d(d,e,f){var g=c(d,f),h="string"==typeof g?!!g.match(new RegExp(e,a.regexFlags)):!1;return h||b(d[a.descendantCollection],e,f)}return function(b,c,e){return e=e||a.addresses,void 0===c||e.reduce(function(a,e){return a||d(b,c,e)},!1)}}])}(angular); -------------------------------------------------------------------------------- /demo/dist/angular-ui-tree-filter.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-ui-tree-filter 0.1.1, 01-10-2015 */ 2 | !function(a){"use strict";a.module("ui.tree-filter",[]).provider("uiTreeFilterSettings",function(){var a=this;this.addresses=["title"],this.regexFlags="gi",this.descendantCollection="items",this.$get=function(){return{addresses:a.addresses,regexFlags:a.regexFlags,descendantCollection:a.descendantCollection}}}).filter("uiTreeFilter",["uiTreeFilterSettings",function(a){function b(a,b,c){a=a||[];var e=!1;return a.forEach(function(a){e=e||d(a,b,c)}),e}function c(a,b){var d=b.split(".");if(void 0!==a)return d.length<2?a[d[0]]:c(a[d[0]],d.slice(1).join("."))}function d(d,e,f){var g=c(d,f),h="string"==typeof g?!!g.match(new RegExp(e,a.regexFlags)):!1;return h||b(d[a.descendantCollection],e,f)}return function(b,c,e){return e=e||a.addresses,void 0===c||e.reduce(function(a,e){return a||d(b,c,e)},!1)}}])}(angular); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-tree-filter", 3 | "version": "0.1.1", 4 | "homepage": "https://github.com/ee/angular-ui-tree-filter", 5 | "authors": [ 6 | "Jarek Rencz", "Jarek Rencz " 7 | ], 8 | "license": "MIT", 9 | "description": "A module providing an AngularJS filter which can be used with angular-ui-tree to match tree nodes", 10 | "main": [ 11 | "dist/angular-ui-tree-filter.js" 12 | ], 13 | "keywords": [ 14 | "Angular", 15 | "AngularJS", 16 | "angular-ui", 17 | "angular-ui-tree", 18 | "filter" 19 | ], 20 | "dependencies": { 21 | "angular": ">= 1.2.0" 22 | }, 23 | "ignore": [ 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests", 28 | "demo", 29 | ".*" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /test/unit/spec/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "devel": true, 3 | "node": true, 4 | "esnext": true, 5 | 6 | "bitwise": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "eqnull": true, 10 | "forin": false, 11 | "immed": true, 12 | "indent": 4, 13 | "newcap": true, 14 | "noarg": true, 15 | "noempty": true, 16 | "nonew": true, 17 | "onevar": true, 18 | "strict": true, 19 | "trailing": true, 20 | "undef": true, 21 | "unused": true, 22 | "quotmark": "single", 23 | "maxcomplexity": 10, 24 | "maxerr": 50, 25 | "maxlen": 120, 26 | 27 | "globals": { 28 | "angular": false, 29 | 30 | // Jasmine API 31 | "jasmine": false, 32 | "module": false, 33 | "describe": false, 34 | "ddescribe": false, 35 | "xdescribe": false, 36 | "it": false, 37 | "iit": false, 38 | "xit": false, 39 | "expect": false, 40 | "beforeEach": false, 41 | "afterEach": false, 42 | "inject": false, 43 | "spyOn": false 44 | } 45 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Laboratorium EE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ui-tree-filter", 3 | "version": "0.1.1", 4 | "description": "A module providing an AngularJS filter which can be used with angular-ui-tree to match tree nodes", 5 | "scripts": { 6 | "test": "grunt test" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/ee/angular-ui-tree-filter.git" 11 | }, 12 | "keywords": [ 13 | "Angular", 14 | "AngularJS", 15 | "angular-ui", 16 | "angular-ui-tree", 17 | "filter" 18 | ], 19 | "author": "Jarek Rencz ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/ee/angular-ui-tree-filter/issues" 23 | }, 24 | "homepage": "https://github.com/ee/angular-ui-tree-filter", 25 | "devDependencies": { 26 | "grunt": "~0.4.0", 27 | "grunt-cli": "~0.1.0", 28 | "grunt-contrib-copy": "~0.5.0", 29 | "grunt-contrib-clean": "~0.6.0", 30 | "grunt-contrib-connect": "~0.8.0", 31 | "grunt-contrib-jshint": "~0.10.0", 32 | "grunt-contrib-uglify": "~0.5.0", 33 | "grunt-contrib-watch": "~0.6.0", 34 | "grunt-defs": "~0.7.0", 35 | "grunt-gh-pages": "~0.9.0", 36 | "grunt-jscs": "~0.6.0", 37 | "grunt-merge-conflict": "~0.0.2", 38 | "grunt-ng-annotate": "~0.3.0", 39 | "grunt-karma": "~0.8.2", 40 | "karma": "~0.12.0", 41 | "karma-chrome-launcher": "~0.1.0", 42 | "karma-firefox-launcher": "~0.1.0", 43 | "karma-phantomjs-launcher": "~0.1.0", 44 | "karma-jasmine": "~0.2.0", 45 | "jit-grunt": "~0.7.0", 46 | "jscs-trailing-comma": "~0.3.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /.jscs.json: -------------------------------------------------------------------------------- 1 | { 2 | "requireCurlyBraces": ["if", "else", "for", "while", "do"], 3 | "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch", "function"], 4 | 5 | "requireParenthesesAroundIIFE": true, 6 | "requireSpacesInFunctionExpression": { 7 | "beforeOpeningCurlyBrace": true 8 | }, 9 | "requireSpacesInAnonymousFunctionExpression": { 10 | "beforeOpeningRoundBrace": true 11 | }, 12 | "disallowSpacesInNamedFunctionExpression": { 13 | "beforeOpeningRoundBrace": true 14 | }, 15 | "requireSpacesInFunctionDeclaration": { 16 | "beforeOpeningCurlyBrace": true 17 | }, 18 | "disallowSpacesInFunctionDeclaration": { 19 | "beforeOpeningRoundBrace": true 20 | }, 21 | 22 | "requireBlocksOnNewline": true, 23 | "disallowEmptyBlocks": true, 24 | 25 | "disallowSpacesInsideObjectBrackets": true, 26 | "disallowSpacesInsideArrayBrackets": true, 27 | "disallowSpacesInsideParentheses": true, 28 | 29 | "disallowQuotedKeysInObjects": true, 30 | "disallowSpaceAfterObjectKeys": true, 31 | "requireCommaBeforeLineBreak": true, 32 | 33 | "requireOperatorBeforeLineBreak": ["?", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], 34 | 35 | "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], 36 | "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], 37 | "requireSpaceBeforeBinaryOperators": 38 | ["/", "+", "-", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=", "?"], 39 | "requireSpaceAfterBinaryOperators": 40 | ["/", "+", "-", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=", "?", ":", ","], 41 | "disallowSpaceBeforeBinaryOperators": [","], 42 | 43 | "disallowKeywords": ["with", "var"], 44 | 45 | "disallowMultipleLineStrings": true, 46 | "validateQuoteMarks": "'", 47 | "disallowMixedSpacesAndTabs": true, 48 | "disallowTrailingWhitespace": true, 49 | 50 | "disallowKeywordsOnNewLine": ["else", "catch"], 51 | "requireLineFeedAtFileEnd": true, 52 | "maximumLineLength": 120, 53 | 54 | "requireCapitalizedConstructors": true, 55 | "requireDotNotation": true, 56 | 57 | "excludeFiles": [ 58 | "node_modules/**", 59 | "dist/**" 60 | ], 61 | 62 | "additionalRules": ["node_modules/jscs-trailing-comma/rules/*.js"], 63 | 64 | "requireTrailingCommaInExpandedLiterals": true, 65 | "disallowTrailingCommaInCollapsedLiterals": true 66 | } 67 | -------------------------------------------------------------------------------- /demo/demo.js: -------------------------------------------------------------------------------- 1 | (function (angular) { 2 | 'use strict'; 3 | 4 | angular.module('demoApp', [ 5 | 'ui.tree', 6 | 'ui.tree-filter', 7 | 'ui.highlight' 8 | ]) 9 | .controller('MainCtrl', function ($filter, $scope) { 10 | $scope.treeFilter = $filter('uiTreeFilter'); 11 | 12 | $scope.availableFields = ['title', 'description']; 13 | $scope.supportedFields = ['title', 'description']; 14 | 15 | $scope.list = [ 16 | { 17 | id: 1, 18 | title: '1. dragon-breath', 19 | description: 'lorem ipsum dolor sit amet', 20 | items: [] 21 | }, 22 | { 23 | id: 2, 24 | title: '2. moiré-vision', 25 | description: 'Ut tempus magna id nibh', 26 | items: [ 27 | { 28 | id: 21, 29 | title: '2.1. tofu-animation', 30 | description: 'Sed nec diam laoreet, aliquam', 31 | items: [ 32 | { 33 | id: 211, 34 | title: '2.1.1. spooky-giraffe', 35 | description: 'In vel imperdiet justo. Ut', 36 | items: [] 37 | }, 38 | { 39 | id: 212, 40 | title: '2.1.2. bubble-burst', 41 | description: 'Maecenas sodales a ante at', 42 | items: [] 43 | } 44 | ] 45 | }, 46 | { 47 | id: 22, 48 | title: '2.2. barehand-atomsplitting', 49 | description: 'Fusce ut tellus posuere sapien', 50 | items: [] 51 | } 52 | ] 53 | }, 54 | { 55 | id: 3, 56 | title: '3. unicorn-zapper', 57 | description: 'Integer ullamcorper nibh eu ipsum', 58 | items: [] 59 | }, 60 | { 61 | id: 4, 62 | title: '4. romantic-transclusion', 63 | description: 'Nullam luctus velit eget enim', 64 | items: [] 65 | } 66 | ]; 67 | 68 | $scope.toggleSupport = function (propertyName) { 69 | return $scope.supportedFields.indexOf(propertyName) > -1 ? 70 | $scope.supportedFields.splice($scope.supportedFields.indexOf(propertyName), 1) : 71 | $scope.supportedFields.push(propertyName); 72 | }; 73 | }) 74 | /** 75 | * Ad-hoc $sce trusting to be used with ng-bind-html 76 | */ 77 | .filter('trust', function ($sce) { 78 | return function (val) { 79 | return $sce.trustAsHtml(val); 80 | }; 81 | }); 82 | })(angular); 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #ui.tree-filter [![Build Status](https://travis-ci.org/EE/angular-ui-tree-filter.svg?branch=master)](https://travis-ci.org/EE/angular-ui-tree-filter) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/) 2 | 3 | A module providing an [AngularJS](http://angularjs.org/) filter which can be used with [angular-ui-tree](http://github.com/JimLiu/angular-ui-tree) to match tree nodes. 4 | 5 | 6 | 7 | **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* 8 | 9 | - [How it works?](#how-it-works) 10 | - [How to use?](#how-to-use) 11 | - [Configuration reference](#configuration-reference) 12 | - [Performance](#performance) 13 | - [Support](#support) 14 | 15 | 16 | 17 | ## How it works? 18 | 19 | 1. It's is configurable: 20 | - you may provide default properties of your nodes that should matched against provided pattern: 21 | 22 | ``` 23 | angular.module('myApp') 24 | .config(function (uiTreeFilterSettingsProvider) { 25 | uiTreeFilterSettingsProvider.addresses = ['title', 'description', 'username']; 26 | }); 27 | ``` 28 | 29 | - or you may pass property list as an optional 3rd argument: 30 | 31 | ``` 32 | $filter('uiTreeFilter')(nodeObject, pattern, ['title', 'description', 'username']) 33 | ``` 34 | 35 | 2. It matches the whole path 36 | If a sub-node matches all its ancestors up to the tree root match as well: 37 | 38 | ``` 39 | Filtered string: "the matched string" 40 | 41 | 1. Foo 42 | 2. Bar # matches as one of its descendants matches 43 | 2.1 Baz # matches as one of its descendants matches 44 | 2.1.1 The matched string # matches exactly 45 | ``` 46 | 47 | ## How to use? 48 | 49 | Filter can be used in the template to as an argument of the `ng-show` or `ng-if`. 50 | 51 | ```html 52 | 53 | 61 |
62 |
    63 |
  1. 65 |
66 |
67 | ``` 68 | 69 | ## Configuration reference 70 | 71 | - `addresses` (default: `['title']`): properties of notes against which pattern will be matched. 72 | Deep filed access is supported: one can provide `foo.bar.baz` to match against item.foo.bar.baz value. 73 | - `regexFlags` (default: `'gi'`): [Regular expression flags](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Parameters) applied during he matching 74 | - `descendantCollection` (default: `'items'`): name of item property that holds item descendants 75 | 76 | ## Performance 77 | 78 | The filter is not provided with any performance improving mechanisms. It may turn out suboptimal for large trees with 79 | thousands of nodes and. If you need it to become perform better let us know what your case is by 80 | [filing an issue](https://github.com/ee/angular-ui-tree-filter/issues/new) 81 | 82 | ## Support 83 | 84 | Basically all the browsers down to Firefox 3.0, IE 9, Opera 10.5 and Safari 4.0 are supported. 85 | 86 | Potential support blockers: 87 | 88 | - `Array.reduce` [support](http://kangax.github.io/compat-table/es5/#Array.prototype.reduce): Fx 3, IE 9, Op 10.5, Sf4 89 | - `Array.forEach` [support](http://kangax.github.io/compat-table/es5/#Array.prototype.forEach) IE 9 90 | 91 | If you wish to support IE8 (as AngularJS 1.2.x do) you'd have to provide proper polyfills. 92 | But you [know it anyway](https://docs.angularjs.org/guide/ie) 93 | 94 | License 95 | ------- 96 | 97 | The module is available under the MIT license (see LICENSE for details). 98 | -------------------------------------------------------------------------------- /src/angular-ui-tree-filter.js: -------------------------------------------------------------------------------- 1 | (function (angular) { 2 | 'use strict'; 3 | 4 | angular.module('ui.tree-filter', []) 5 | /** 6 | * @ngdoc object 7 | * @name ui.tree-filter.provider:uiTreeFilterSettings 8 | */ 9 | .provider('uiTreeFilterSettings', function () { 10 | 11 | const uiTreeFilterSettings = this; 12 | 13 | this.addresses = ['title']; 14 | this.regexFlags = 'gi'; 15 | this.descendantCollection = 'items'; 16 | 17 | this.$get = function () { 18 | return { 19 | addresses: uiTreeFilterSettings.addresses, 20 | regexFlags: uiTreeFilterSettings.regexFlags, 21 | descendantCollection: uiTreeFilterSettings.descendantCollection, 22 | }; 23 | }; 24 | }) 25 | /** 26 | * @ngdoc function 27 | * @name ui.tree-filter.factory:uiTreeFilter 28 | */ 29 | .filter('uiTreeFilter', function (uiTreeFilterSettings) { 30 | /** 31 | * Iterates through given collection if flag is not true and sets a flag to true on first match. 32 | * 33 | * @param {Array} collection 34 | * @param {string} pattern 35 | * @param {string} address 36 | * 37 | * @returns {boolean} 38 | */ 39 | function visit(collection, pattern, address) { 40 | collection = collection || []; 41 | let foundSoFar = false; 42 | 43 | collection.forEach(function (collectionItem) { 44 | foundSoFar = foundSoFar || testForField(collectionItem, pattern, address); 45 | }); 46 | 47 | return foundSoFar; 48 | } 49 | 50 | /** 51 | * Resolves object value from dot-delimited address. 52 | * 53 | * @param object 54 | * @param path 55 | * @returns {*} 56 | */ 57 | function resolveAddress(object, path) { 58 | const parts = path.split('.'); 59 | 60 | if (object === undefined) { 61 | return; 62 | } 63 | 64 | return parts.length < 2 ? object[parts[0]] : resolveAddress(object[parts[0]], parts.slice(1).join('.')); 65 | } 66 | 67 | /** 68 | * Checks if object or its children matches a pattern on a given field 69 | * 70 | * First it resolves the property address and gets the value. 71 | * If the value is a string it matches it against provided pattern. 72 | * If item matches because its property matches it's children are not checked. 73 | * Otherwise all item descendants are checked as well 74 | * 75 | * @param {Object} item 76 | * @param {string} pattern 77 | * @param {string} address property name or dot-delimited path to property. 78 | * 79 | * @returns {boolean} 80 | */ 81 | function testForField(item, pattern, address) { 82 | const value = resolveAddress(item, address); 83 | const found = typeof value === 'string' ? 84 | !!value.match(new RegExp(pattern, uiTreeFilterSettings.regexFlags)) : 85 | false; 86 | return found || visit(item[uiTreeFilterSettings.descendantCollection], pattern, address); 87 | } 88 | 89 | /** 90 | * Checks if pattern matches any of addresses 91 | * 92 | * @param {object} item 93 | * @param {string} pattern 94 | * 95 | * @returns {boolean} 96 | */ 97 | return function (item, pattern, addresses) { 98 | addresses = addresses || uiTreeFilterSettings.addresses; 99 | return pattern === undefined || addresses.reduce(function (foundSoFar, fieldName) { 100 | return foundSoFar || testForField(item, pattern, fieldName); 101 | }, false); 102 | }; 103 | }); 104 | })(angular); 105 | -------------------------------------------------------------------------------- /dist/angular-ui-tree-filter.js: -------------------------------------------------------------------------------- 1 | (function (angular) { 2 | 'use strict'; 3 | 4 | angular.module('ui.tree-filter', []) 5 | /** 6 | * @ngdoc object 7 | * @name ui.tree-filter.provider:uiTreeFilterSettings 8 | */ 9 | .provider('uiTreeFilterSettings', function () { 10 | 11 | var uiTreeFilterSettings = this; 12 | 13 | this.addresses = ['title']; 14 | this.regexFlags = 'gi'; 15 | this.descendantCollection = 'items'; 16 | 17 | this.$get = function () { 18 | return { 19 | addresses: uiTreeFilterSettings.addresses, 20 | regexFlags: uiTreeFilterSettings.regexFlags, 21 | descendantCollection: uiTreeFilterSettings.descendantCollection, 22 | }; 23 | }; 24 | }) 25 | /** 26 | * @ngdoc function 27 | * @name ui.tree-filter.factory:uiTreeFilter 28 | */ 29 | .filter('uiTreeFilter', ["uiTreeFilterSettings", function (uiTreeFilterSettings) { 30 | /** 31 | * Iterates through given collection if flag is not true and sets a flag to true on first match. 32 | * 33 | * @param {Array} collection 34 | * @param {string} pattern 35 | * @param {string} address 36 | * 37 | * @returns {boolean} 38 | */ 39 | function visit(collection, pattern, address) { 40 | collection = collection || []; 41 | var foundSoFar = false; 42 | 43 | collection.forEach(function (collectionItem) { 44 | foundSoFar = foundSoFar || testForField(collectionItem, pattern, address); 45 | }); 46 | 47 | return foundSoFar; 48 | } 49 | 50 | /** 51 | * Resolves object value from dot-delimited address. 52 | * 53 | * @param object 54 | * @param path 55 | * @returns {*} 56 | */ 57 | function resolveAddress(object, path) { 58 | var parts = path.split('.'); 59 | 60 | if (object === undefined) { 61 | return; 62 | } 63 | 64 | return parts.length < 2 ? object[parts[0]] : resolveAddress(object[parts[0]], parts.slice(1).join('.')); 65 | } 66 | 67 | /** 68 | * Checks if object or its children matches a pattern on a given field 69 | * 70 | * First it resolves the property address and gets the value. 71 | * If the value is a string it matches it against provided pattern. 72 | * If item matches because its property matches it's children are not checked. 73 | * Otherwise all item descendants are checked as well 74 | * 75 | * @param {Object} item 76 | * @param {string} pattern 77 | * @param {string} address property name or dot-delimited path to property. 78 | * 79 | * @returns {boolean} 80 | */ 81 | function testForField(item, pattern, address) { 82 | var value = resolveAddress(item, address); 83 | var found = typeof value === 'string' ? 84 | !!value.match(new RegExp(pattern, uiTreeFilterSettings.regexFlags)) : 85 | false; 86 | return found || visit(item[uiTreeFilterSettings.descendantCollection], pattern, address); 87 | } 88 | 89 | /** 90 | * Checks if pattern matches any of addresses 91 | * 92 | * @param {object} item 93 | * @param {string} pattern 94 | * 95 | * @returns {boolean} 96 | */ 97 | return function (item, pattern, addresses) { 98 | addresses = addresses || uiTreeFilterSettings.addresses; 99 | return pattern === undefined || addresses.reduce(function (foundSoFar, fieldName) { 100 | return foundSoFar || testForField(item, pattern, fieldName); 101 | }, false); 102 | }; 103 | }]); 104 | })(angular); 105 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 'use strict'; 3 | 4 | // load all grunt tasks automatically and only necessary ones. 5 | // Those that doesn't match the pattern have to be provided here. 6 | require('jit-grunt')(grunt); 7 | 8 | function mountFolder(connect, dir) { 9 | return connect.static(require('path').resolve(dir)); 10 | } 11 | 12 | // Project configuration. 13 | grunt.initConfig({ 14 | pkg: grunt.file.readJSON('package.json'), 15 | defs: { 16 | options: { 17 | defsOptions: { 18 | disallowDuplicated: true, 19 | disallowUnknownReferences: false, 20 | disallowVars: true, 21 | }, 22 | }, 23 | src: { 24 | expand: true, 25 | extDot: 'last', 26 | ext: '.defs.js', 27 | src: [ 28 | 'src/<%= pkg.name %>.js', 29 | ], 30 | }, 31 | test: { 32 | expand: true, 33 | extDot: 'last', 34 | ext: '.defs.js', 35 | src: [ 36 | 'test/unit/spec/<%= pkg.name %>.spec.js', 37 | '!test/unit/spec/<%= pkg.name %>.spec.defs.js', 38 | ], 39 | }, 40 | }, 41 | ngAnnotate: { 42 | demo: { 43 | files: { 44 | '.tmp/<%= pkg.name %>.js': ['src/<%= pkg.name %>.defs.js'], 45 | }, 46 | }, 47 | }, 48 | uglify: { 49 | options: { 50 | banner: '/*! <%= pkg.name %> <%= pkg.version %>, <%= grunt.template.today("dd-mm-yyyy") %> */\n', 51 | }, 52 | build: { 53 | src: '.tmp/<%= pkg.name %>.js', 54 | dest: 'dist/<%= pkg.name %>.min.js', 55 | }, 56 | }, 57 | copy: { 58 | demo: { 59 | src: 'dist/<%= pkg.name %>.min.js', 60 | dest: 'demo/', 61 | }, 62 | dev: { 63 | src: '.tmp/<%= pkg.name %>.js', 64 | dest: 'dist/<%= pkg.name %>.js', 65 | }, 66 | }, 67 | clean: { 68 | defs: '**/*.defs.js', 69 | tmp: '.tmp', 70 | }, 71 | connect: { 72 | options: { 73 | port: 9000, 74 | livereload: 35729, 75 | hostname: '0.0.0.0', 76 | open: true, 77 | }, 78 | demo: { 79 | options: { 80 | middleware: function (connect) { 81 | return [ 82 | mountFolder(connect, 'demo'), 83 | ]; 84 | }, 85 | }, 86 | }, 87 | }, 88 | watch: { 89 | livereload: { 90 | files: [ 91 | 'src/<%= pkg.name %>.js', 92 | 'demo/*.js', 93 | 'demo/*.css', 94 | 'demo/*.html', 95 | '!demo/bower_components/**/*', 96 | ], 97 | options: { 98 | livereload: true, 99 | }, 100 | tasks: ['build'], 101 | }, 102 | }, 103 | jshint: { 104 | options: { 105 | jshintrc: true, 106 | }, 107 | all: { 108 | src: [ 109 | 'Gruntfile.js', 110 | 'src/<%= pkg.name %>.js', 111 | ], 112 | }, 113 | }, 114 | jscs: { 115 | all: { 116 | src: [ 117 | 'Gruntfile.js', 118 | 'src/<%= pkg.name %>.js', 119 | 'test/unit/spec/<%= pkg.name %>.spec.js', 120 | ], 121 | options: { 122 | config: '.jscs.json', 123 | }, 124 | }, 125 | }, 126 | 'merge-conflict': { 127 | files: '<%= jshint.all.src %>', 128 | }, 129 | karma: { 130 | options: { 131 | configFile: 'test/unit/config/karma.conf.js', 132 | }, 133 | unit: {}, 134 | live: { 135 | port: 8081, 136 | singleRun: false, 137 | background: true, 138 | }, 139 | }, 140 | 'gh-pages': { 141 | options: { 142 | base: 'demo', 143 | }, 144 | src: ['**'], 145 | }, 146 | }); 147 | 148 | 149 | grunt.registerTask('lint', [ 150 | 'jshint', 151 | 'jscs', 152 | 'merge-conflict', 153 | ]); 154 | 155 | grunt.registerTask('build', [ 156 | 'clean', 157 | 'lint', 158 | 'defs', 159 | 'ngAnnotate', 160 | 'copy:dev', 161 | 'uglify', 162 | 'copy:demo', 163 | 'clean:tmp', 164 | ]); 165 | 166 | grunt.registerTask('demo', [ 167 | 'build', 168 | 'connect:demo', 169 | 'watch', 170 | ]); 171 | 172 | grunt.registerTask('serve', [ 173 | 'build', 174 | 'watch', 175 | ]); 176 | 177 | grunt.registerTask('test', [ 178 | 'clean', 179 | 'lint', 180 | 'defs', 181 | 'karma:unit', 182 | ]); 183 | 184 | grunt.registerTask('default', [ 185 | 'serve', 186 | ]); 187 | }; 188 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularJS UI Tree Filter demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Fork me on GitHub 19 | 20 | 21 |
22 | 23 |
24 |

Tree filter

25 | 26 |

27 | Node filter for Tree - the AngularJS Tree component 28 | with drag and drop support. 29 |

30 | 31 |

32 | Code on GitHub

33 |
34 | 35 |
36 |
37 |

What?

38 | 39 |

40 | Angular Tree Filter is an AngularJS module that helps building a simple filter for the apps using 41 | Angular UI Tree. It may also be used as a generic tree structure filter for any app driven by Angular. 42 |

43 |
44 |
45 |

Why?

46 | 47 |

48 | Because at Laboratorium EE we care about usability and 49 | accessibility and we want you to deliver it to your users with zero effort. 50 |

51 |
52 |
53 |

Features

54 |
    55 |
  • 56 | Path matching: if sub-node matches than all its ancestors up to the root of the tree match as well 57 |
    • 58 |
  • RegExp enabled: allows matching regular expressions
    • 59 |
  • Configurable with providers. See the configuration reference
    • 60 |
  • Works great with UI.Utils highlight
    • 61 |
62 |
63 |
64 | 65 |
66 |
67 |

See it in action

68 |
69 |
70 | 71 |
74 |
75 |
76 | Filter 77 | 78 |
79 |
80 |
81 |
    82 |
  • 83 | 84 | Use 85 | UI.Utils highlight for exact matches 86 |
    • 87 |
  • 88 | Dim filtered out (instead of hiding) 89 |
    • 90 |
91 |
92 |
93 |
    94 |
  • 95 | 96 | Match {{ field }} 97 |
    • 98 |
99 |
100 |
101 | 102 | 103 | 115 |
116 |
    117 |
  1. 120 |
121 |
122 |
123 |
124 |
125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /test/unit/spec/angular-ui-tree-filter.spec.js: -------------------------------------------------------------------------------- 1 | describe('Module: ui.tree-filter', function () { 2 | 'use strict'; 3 | 4 | let sampleTree, uiTreeFilter; 5 | 6 | beforeEach(module('ui.tree-filter')); 7 | 8 | beforeEach(module(function (uiTreeFilterSettingsProvider) { 9 | uiTreeFilterSettingsProvider.addresses = ['title']; 10 | })); 11 | 12 | beforeEach(function () { 13 | sampleTree = [ 14 | { 15 | id: 1, 16 | title: '1. dragon-breath', 17 | items: [], 18 | }, 19 | { 20 | id: 2, 21 | title: '2. moire-vision', 22 | items: [ 23 | { 24 | id: 21, 25 | title: '2.1. tofu-animation', 26 | items: [ 27 | { 28 | id: 211, 29 | title: '2.1.1. spooky-giraffe', 30 | items: [ 31 | { 32 | id: 212, 33 | title: '2.1.1.1. bubble-burst', 34 | items: [], 35 | }, 36 | ], 37 | }, 38 | ], 39 | }, 40 | { 41 | id: 22, 42 | title: '2.2. barehand-atomsplitting', 43 | items: [], 44 | }, 45 | ], 46 | }, 47 | { 48 | id: 3, 49 | title: '3. unicorn-zapper', 50 | items: [], 51 | }, 52 | { 53 | id: 4, 54 | title: '4. romantic-transclusion', 55 | items: [], 56 | }, 57 | ]; 58 | }); 59 | 60 | beforeEach(inject(function ($filter) { 61 | uiTreeFilter = $filter('uiTreeFilter'); 62 | })); 63 | 64 | it('should match item on level 1', function () { 65 | const matchedString = 'romantic'; 66 | 67 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 68 | expect(uiTreeFilter(sampleTree[1], matchedString)).toBe(false); 69 | expect(uiTreeFilter(sampleTree[1].items[0], matchedString)).toBe(false); 70 | expect(uiTreeFilter(sampleTree[1].items[0].items[0], matchedString)).toBe(false); 71 | expect(uiTreeFilter(sampleTree[1].items[0].items[0].items[0], matchedString)).toBe(false); 72 | expect(uiTreeFilter(sampleTree[1].items[1], matchedString)).toBe(false); 73 | expect(uiTreeFilter(sampleTree[2], matchedString)).toBe(false); 74 | expect(uiTreeFilter(sampleTree[3], matchedString)).toBe(true); 75 | }); 76 | 77 | it('should match entire path to the first strict match', function () { 78 | const matchedString = 'bubble'; 79 | 80 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 81 | expect(uiTreeFilter(sampleTree[1], matchedString)).toBe(true); 82 | expect(uiTreeFilter(sampleTree[1].items[0], matchedString)).toBe(true); 83 | expect(uiTreeFilter(sampleTree[1].items[0].items[0], matchedString)).toBe(true); 84 | expect(uiTreeFilter(sampleTree[1].items[0].items[0].items[0], matchedString)).toBe(true); 85 | expect(uiTreeFilter(sampleTree[1].items[1], matchedString)).toBe(false); 86 | expect(uiTreeFilter(sampleTree[2], matchedString)).toBe(false); 87 | expect(uiTreeFilter(sampleTree[3], matchedString)).toBe(false); 88 | }); 89 | 90 | it('should match several items on the same level', function () { 91 | const matchedString = '-a'; 92 | 93 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 94 | expect(uiTreeFilter(sampleTree[1], matchedString)).toBe(true); 95 | expect(uiTreeFilter(sampleTree[1].items[0], matchedString)).toBe(true); 96 | expect(uiTreeFilter(sampleTree[1].items[0].items[0], matchedString)).toBe(false); 97 | expect(uiTreeFilter(sampleTree[1].items[0].items[0].items[0], matchedString)).toBe(false); 98 | expect(uiTreeFilter(sampleTree[1].items[1], matchedString)).toBe(true); 99 | expect(uiTreeFilter(sampleTree[2], matchedString)).toBe(false); 100 | expect(uiTreeFilter(sampleTree[3], matchedString)).toBe(false); 101 | }); 102 | 103 | it('should match case-insensitive', function () { 104 | const matchedString = 'ZAPPER'; 105 | 106 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 107 | expect(uiTreeFilter(sampleTree[1], matchedString)).toBe(false); 108 | expect(uiTreeFilter(sampleTree[1].items[0], matchedString)).toBe(false); 109 | expect(uiTreeFilter(sampleTree[1].items[0].items[0], matchedString)).toBe(false); 110 | expect(uiTreeFilter(sampleTree[1].items[0].items[0].items[0], matchedString)).toBe(false); 111 | expect(uiTreeFilter(sampleTree[1].items[1], matchedString)).toBe(false); 112 | expect(uiTreeFilter(sampleTree[2], matchedString)).toBe(true); 113 | expect(uiTreeFilter(sampleTree[3], matchedString)).toBe(false); 114 | }); 115 | 116 | it('should match regular expression (entire path)', function () { 117 | // 2.1, 2.1.1, 2.1.1.1 and 2 since it's part of the path, as well as 2.2 118 | const matchedString = '[0-9]\.[0-9]\..[a-z]'; 119 | 120 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 121 | expect(uiTreeFilter(sampleTree[1], matchedString)).toBe(true); 122 | expect(uiTreeFilter(sampleTree[1].items[0], matchedString)).toBe(true); 123 | expect(uiTreeFilter(sampleTree[1].items[0].items[0], matchedString)).toBe(true); 124 | expect(uiTreeFilter(sampleTree[1].items[0].items[0].items[0], matchedString)).toBe(true); 125 | expect(uiTreeFilter(sampleTree[1].items[1], matchedString)).toBe(true); 126 | expect(uiTreeFilter(sampleTree[2], matchedString)).toBe(false); 127 | expect(uiTreeFilter(sampleTree[3], matchedString)).toBe(false); 128 | }); 129 | 130 | it('should match with local configuration', function () { 131 | sampleTree[0].description = 'some sample description'; 132 | const matchedString = 'sample'; 133 | 134 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 135 | expect(uiTreeFilter(sampleTree[0], matchedString, ['title', 'description'])).toBe(true); 136 | }); 137 | 138 | it('should match dot-delimited paths to value', function () { 139 | sampleTree[0].nested = { 140 | property: 'nested property value', 141 | }; 142 | const matchedString = 'nested'; 143 | 144 | expect(uiTreeFilter(sampleTree[0], matchedString)).toBe(false); 145 | expect(uiTreeFilter(sampleTree[0], matchedString, ['title', 'description'])).toBe(false); 146 | expect(uiTreeFilter(sampleTree[0], matchedString, ['title', 'description', 'nested'])).toBe(false); 147 | expect(uiTreeFilter(sampleTree[0], matchedString, ['title', 'description', 'nested.property'])).toBe(true); 148 | }); 149 | 150 | it('should support objects that may not have all addresses', function () { 151 | const matchedString = 'nested'; 152 | 153 | inject(function (uiTreeFilterSettings) { 154 | uiTreeFilterSettings.addresses.push('nonexistent.property'); 155 | }); 156 | 157 | expect(function () { 158 | uiTreeFilter(sampleTree[0], matchedString); 159 | }).not.toThrow(); 160 | }); 161 | }); 162 | --------------------------------------------------------------------------------