From 13383021005554a3770db67fe8cd733a4ed097e1 Mon Sep 17 00:00:00 2001 From: Alex Wendland Date: Tue, 8 Jan 2019 22:26:48 -0800 Subject: [PATCH] Release version 1.1.0 --- .npmignore | 6 ++++++ README.md | 19 ++++++++++++++++--- bower.json | 2 +- dist/angular-json-tree.js | 12 +++++++++++- dist/angular-json-tree.min.js | 2 +- package.json | 2 +- 6 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 .npmignore diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..8eb7397 --- /dev/null +++ b/.npmignore @@ -0,0 +1,6 @@ +* +!README.md +!package.json +!LICENSE +!bower.json +!dist/* diff --git a/README.md b/README.md index e2f7138..a8ca2ed 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,10 @@ A live implementation of this directive can be found at [https://awendland.githu **Requirements:** AngularJS 1.2+ -**File Size:** v1.0.1 +**File Size:** v1.1.0 - * **JS**: 8.3Kb raw, 2.3Kb minified, 982b gzipped - * **JS + CSS**: 9.6Kb raw, 3.3Kb minified, 1.42Kb gzipped + * **JS**: 9.15kB raw, 2.56kB minified, 1.04kB gzipped + * **JS + CSS**: 10.28kB raw, 3.69kB minified, 1.53kB gzipped ## Usage: @@ -72,6 +72,8 @@ This is an optional attribute that designates if the tree's root should display ``` +Besides `true` or `false`, you can also set it to `'recursive'` to cause the entire tree to be expanded initially (instead of just the top level if `true` was used). + ### root-name [optional, default='Object'] This is an optional attribute that sets the title displayed at the root node. This is useful when you are showing sub-portions of an object or want the object root node to have a different string than 'Object'. @@ -122,6 +124,8 @@ The expanded state is different and contains further subnodes that are generated ``` The `.expandable` class adds several features to the normal `json-node` element. Particularly, by the default looks CSS, a carrot-style toggle pseudo-element will be created. This `::before` element will rotate 90 deg downward when the element is expanded. +Furthermore, if an `.expandable` element does not have any children, then `.empty` will be added to the class list as well. This can be used to remove any expansion UI from nodes representing empty objects/arrays. + Additionally, `json-node` elements receive a class corresponding to their object type. For example, the `.array` class or `.object` may be placed on a `json-node`. These classes can be used for special stylings. ## Further Explanation: @@ -130,6 +134,15 @@ An example implementation of this project can be found at the [gh-pages branch]( ## Changelog +#### v1.1.0 + * Set *angular* as a peer dependency instead of as a normal dependency (allowing for better user control of the *angular* version) ([Issue #52](https://github.com/awendland/angular-json-tree/issues/52)) + * Add `start-expanded="'recursive'"` to cause the entire tree to be expanded initially (instead of just the top-level, which setting the value to `true` previously allowed) ([Issue #56](https://github.com/awendland/angular-json-tree/issues/56)) + * Add `track by` to remove `$$hashKey` attributes ([Issue #59](https://github.com/awendland/angular-json-tree/issues/59), [PR #60](https://github.com/awendland/angular-json-tree/pull/60)) + * Add `.empty` to the class list of nodes that are expandable but have no children ([Issue #63](https://github.com/awendland/angular-json-tree/issues/63)) + +#### v1.0.1 + * Remove css files from the `main` entry in package.json. + #### v1.0.0 * Update *npm* dev dependencies to latest (as of 2016-05-24) and remove unnecessary ones * Update *angular* dependency to accept all 1.x versions diff --git a/bower.json b/bower.json index f6cc94c..ddb74cf 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-json-tree", - "version": "1.0.1", + "version": "1.1.0", "description": "Angular directive for displaying a JSON object in an expandable tree structure", "main": [ "dist/angular-json-tree.js", diff --git a/dist/angular-json-tree.js b/dist/angular-json-tree.js index e5313b4..216e128 100644 --- a/dist/angular-json-tree.js +++ b/dist/angular-json-tree.js @@ -100,7 +100,7 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper']) ' {{value}}' + ' {{preview}}' + ' ', @@ -112,6 +112,10 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper']) scope.isExpandable = true; // Add expandable class for CSS usage elem.addClass('expandable'); + // Add a class indicating an empty Object/Array (for removing expandable UI, if desired) + if (Object.keys(scope.value).length < 1) { + elem.addClass('empty'); + } // Setup preview text var isArray = utils.is(scope.value, 'Array'); scope.preview = isArray ? '[ ' : '{ '; @@ -123,6 +127,11 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper']) } }); scope.preview = scope.preview.substring(0, scope.preview.length - (scope.preview.length > 2 ? 2 : 0)) + (isArray ? ' ]' : ' }'); + // If parent directive has startExpanded set to recursive, inherit startExpanded + if (scope.$parent && scope.$parent.startExpanded && + scope.$parent.startExpanded() == 'recursive') { + scope.startExpanded = scope.$parent.startExpanded; + } // If directive initially has isExpanded set, also set shouldRender to true if (scope.startExpanded && scope.startExpanded()) { scope.shouldRender = true; @@ -130,6 +139,7 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper']) } // Setup isExpanded state handling scope.isExpanded = scope.startExpanded ? scope.startExpanded() : false; + if (scope.isExpanded == 'recursive') scope.isExpanded = true; scope.toggleExpanded = function jsonNodeDirectiveToggleExpanded() { scope.isExpanded = !scope.isExpanded; if (scope.isExpanded) { diff --git a/dist/angular-json-tree.min.js b/dist/angular-json-tree.min.js index 44b53ee..ec61364 100644 --- a/dist/angular-json-tree.min.js +++ b/dist/angular-json-tree.min.js @@ -1,2 +1,2 @@ /*global angular */ -!function(){"use strict";var e={is:function(e,a){return Object.prototype.toString.call(e).slice(8,-1)===a},whatClass:function(e){return Object.prototype.toString.call(e).slice(8,-1)},forKeys:function(e,a){for(var n in e)if(e.hasOwnProperty(n)&&"function"!=typeof e[n]&&a(n,e[n]))break}};angular.module("angular-json-tree",["ajs.RecursiveDirectiveHelper"]).directive("jsonTree",[function(){return{restrict:"E",scope:{object:"=",startExpanded:"&?",rootName:"&?"},template:''}}]).directive("jsonNode",["ajsRecursiveDirectiveHelper",function(a){return{restrict:"E",scope:{key:"=",value:"=",startExpanded:"&?"},compile:function(e){return a.compile(e,this)},template:' {{key}} {{value}} {{preview}} ',pre:function(a,n,s){if(n.addClass(e.whatClass(a.value).toLowerCase()),e.is(a.value,"Object")||e.is(a.value,"Array")){a.isExpandable=!0,n.addClass("expandable");var t=e.is(a.value,"Array");a.preview=t?"[ ":"{ ",e.forKeys(a.value,function(e,n){t?a.preview+=n+", ":a.preview+=e+": "+n+", "}),a.preview=a.preview.substring(0,a.preview.length-(a.preview.length>2?2:0))+(t?" ]":" }"),a.startExpanded&&a.startExpanded()&&(a.shouldRender=!0,n.addClass("expanded")),a.isExpanded=a.startExpanded?a.startExpanded():!1,a.toggleExpanded=function(){a.isExpanded=!a.isExpanded,a.isExpanded?n.addClass("expanded"):n.removeClass("expanded"),a.shouldRender=!0}}else a.isExpandable=!1,n.addClass("not-expandable")}}}]),angular.module("ajs.RecursiveDirectiveHelper",[]).factory("ajsRecursiveDirectiveHelper",["$compile",function(e){return{compile:function(a,n){angular.isFunction(n)&&(n={post:n});var s,t=a.contents().remove();return{pre:n&&n.pre?n.pre:null,post:function(a,r){s||(s=e(t)),s(a,function(e){r.append(e)}),n&&n.post&&n.post.apply(null,arguments)}}}}}])}(); \ No newline at end of file +!function(){"use strict";var e={is:function(e,a){return Object.prototype.toString.call(e).slice(8,-1)===a},whatClass:function(e){return Object.prototype.toString.call(e).slice(8,-1)},forKeys:function(e,a){for(var n in e)if(e.hasOwnProperty(n)&&"function"!=typeof e[n]&&a(n,e[n]))break}};angular.module("angular-json-tree",["ajs.RecursiveDirectiveHelper"]).directive("jsonTree",[function(){return{restrict:"E",scope:{object:"=",startExpanded:"&?",rootName:"&?"},template:''}}]).directive("jsonNode",["ajsRecursiveDirectiveHelper",function(a){return{restrict:"E",scope:{key:"=",value:"=",startExpanded:"&?"},compile:function(e){return a.compile(e,this)},template:' {{key}} {{value}} {{preview}} ',pre:function(a,n,s){if(n.addClass(e.whatClass(a.value).toLowerCase()),e.is(a.value,"Object")||e.is(a.value,"Array")){a.isExpandable=!0,n.addClass("expandable"),Object.keys(a.value).length<1&&n.addClass("empty");var t=e.is(a.value,"Array");a.preview=t?"[ ":"{ ",e.forKeys(a.value,function(e,n){t?a.preview+=n+", ":a.preview+=e+": "+n+", "}),a.preview=a.preview.substring(0,a.preview.length-(a.preview.length>2?2:0))+(t?" ]":" }"),a.$parent&&a.$parent.startExpanded&&"recursive"==a.$parent.startExpanded()&&(a.startExpanded=a.$parent.startExpanded),a.startExpanded&&a.startExpanded()&&(a.shouldRender=!0,n.addClass("expanded")),a.isExpanded=!!a.startExpanded&&a.startExpanded(),"recursive"==a.isExpanded&&(a.isExpanded=!0),a.toggleExpanded=function(){a.isExpanded=!a.isExpanded,a.isExpanded?n.addClass("expanded"):n.removeClass("expanded"),a.shouldRender=!0}}else a.isExpandable=!1,n.addClass("not-expandable")}}}]),angular.module("ajs.RecursiveDirectiveHelper",[]).factory("ajsRecursiveDirectiveHelper",["$compile",function(e){return{compile:function(a,n){angular.isFunction(n)&&(n={post:n});var s,t=a.contents().remove();return{pre:n&&n.pre?n.pre:null,post:function(a,r){s||(s=e(t)),s(a,function(e){r.append(e)}),n&&n.post&&n.post.apply(null,arguments)}}}}}])}(); \ No newline at end of file diff --git a/package.json b/package.json index 8e7d65a..f016635 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-json-tree", - "version": "1.0.1", + "version": "1.1.0", "description": "Angular directive for displaying a JSON object in an expandable tree structure", "main": "dist/angular-json-tree.js", "directories": {