angular-segment-tree - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/angular-segment-tree.js

 'use strict';
 
+var _template = "<style>\r\n    .st-nodes .st-node {\r\n        border-radius: 4px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .st-nodes .st-node h4 {\r\n        border: 1px solid #eee;\r\n        border-left-width: 6px;\r\n        padding: 10px;\r\n        margin: 0;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .st-nodes .st-node-container h4 {\r\n        border-top: none;\r\n    }\r\n\r\n    .st-node .st-node-container {\r\n        margin-left: 5px;\r\n        display: none;\r\n    }\r\n    \r\n    .st-node .st-node-content {\r\n        border-left: 1px solid #eee;\r\n        border-right: 1px solid #eee;\r\n        border-bottom: 1px solid #eee;\r\n        padding: 10px;\r\n    }\r\n\r\n    .st-node.in > .st-node-container {\r\n        display: block;\r\n    }\r\n\r\n    .st-node .st-node-icon {\r\n        color: #808080;\r\n    }\r\n\r\n    .st-node .st-node-info {\r\n        border-left-color: #1b809e !important;\r\n    }\r\n\r\n    .st-node .st-node-segment {\r\n    }\r\n</style>\r\n\r\n<div class=\"st-nodes\">\r\n    <i>teste</i>\r\n    <div class=\"st-node in\" ng-repeat=\"node in [1, 2, 3]\">\r\n        <h4 class=\"st-node-info\">\r\n            <i class=\"fa fa-balance-scale st-node-icon\"></i>\r\n            Atos Normativos\r\n        </h4>\r\n        <div class=\"st-node-container\">\r\n            <div class=\"st-node-content\">\r\n                <p>\r\n                    Lorem ipsum dolor sit amet.\r\n                </p>\r\n                <a href=\"\" class=\"btn btn-default\">\r\n                    <i class=\"fa fa-file-o\"></i> Material didático 1\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</div>";
+
 var classCallCheck = function (instance, Constructor) {
@@ -9,19 +11,50 @@ if (!(instance instanceof Constructor)) {
 
-var _template = '\n        <ul>\n            <li data-ng-repeat="node in nodes">\n                <i class="collapsed" data-ng-show="node.nodeChildren.length && node.collapsed" data-ng-click="treeId.selectNodeHead(node)"></i>\n                <i class="expanded" data-ng-show="node.nodeChildren.length && !node.collapsed" data-ng-click="treeId.selectNodeHead(node)"></i>\n                <i class="normal" data-ng-hide="node.nodeChildren.length"></i>\n                <span data-ng-class="node.selected" data-ng-click="treeId.selectNodeLabel(node)">{{node.nodeLabel}}</span>\n                <div data-ng-hide="node.collapsed" data-tree-id="treeId" data-tree-model="node.nodeChildren" data-node-id="nodeId" data-node-label="nodeLabel" data-node-children="nodeChildren"></div>\n            </li>\n        </ul>\n';
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
 
-var Segment = function Segment($scope, $compile) {
-    classCallCheck(this, Segment);
-};
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
 
-var segment = ['segment', {
+var SegmentCtrl = function () {
+    function SegmentCtrl() {
+        classCallCheck(this, SegmentCtrl);
+
+        console.log('constructor', this);
+    }
+
+    createClass(SegmentCtrl, [{
+        key: '$onInit',
+        value: function $onInit() {
+            console.log('$oninit', this.nodes);
+        }
+    }]);
+    return SegmentCtrl;
+}();
+
+var segment = ['segmentTree', {
     bindings: {
-        nodes: '=',
+        nodes: '<',
         nodeId: '=',
         nodeLabel: '=',
-        nodeChildren: '='
+        nodeChildren: '=',
+        nodeContent: '=',
+        nodeLinks: '='
     },
-    controller: ['$scope', '$compile', Segment],
+    controller: SegmentCtrl,
     template: _template
 }];
 
-angular.module('angular-segment-tree').component.apply(angular, segment);
+angular.module('ngSegmentTree', []).component.apply(angular, segment);
+//# sourceMappingURL=angular-segment-tree.js.map

index.js

@@ -1,5 +0,6 @@
-import segment from './src/segment';
+import segment from './src/segment.js';
+import compileHtml from './src/compileHtml.js';
 
-    
-angular.module('angular-segment-tree')
-    .component.apply(angular, segment);
+angular.module('ngSegmentTree', [])
+    .component.apply(angular, segment)
+    .directive.apply(angular, compileHtml);

package.json

 {
   "name": "angular-segment-tree",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Segment tree with angularjs",
   "main": "index.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c --watch",
     "prepublish": "npm run build",
@@ -17,4 +17,6 @@ "test": "echo \"Error: no test specified\" && exit 1"
     "rollup": "^0.41.4",
-    "rollup-plugin-babel": "^2.7.1"
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-template": "^1.0.9",
+    "rollup-watch": "^3.2.2"
   }
 }

rollup.config.js

 import path from 'path';
 import babel from 'rollup-plugin-babel';
+import template from 'rollup-plugin-template';
 
@@ -7,4 +8,9 @@ export default {
   format: 'cjs',
-  dest: path.resolve(__dirname, 'dist/angular-segment-tree.js'),
-  plugins: [ babel() ]
+  //dest: path.resolve(__dirname, 'dist/angular-segment-tree.js'),
+  dest: 'C:/Projetos/PCF/PCF/PCF/Scripts/AngularJs/angular-segment-tree.js',
+  plugins: [ 
+      template({include: 'src/templates/*.html'}),
+      babel() 
+  ],
+  sourceMap: true
 };

src/segment.js

@@ -1,29 +0,36 @@
-var _template = `
-        <ul>
-            <li data-ng-repeat="node in nodes">
-                <i class="collapsed" data-ng-show="node.nodeChildren.length && node.collapsed" data-ng-click="treeId.selectNodeHead(node)"></i>
-                <i class="expanded" data-ng-show="node.nodeChildren.length && !node.collapsed" data-ng-click="treeId.selectNodeHead(node)"></i>
-                <i class="normal" data-ng-hide="node.nodeChildren.length"></i>
-                <span data-ng-class="node.selected" data-ng-click="treeId.selectNodeLabel(node)">{{node.nodeLabel}}</span>
-                <div data-ng-hide="node.collapsed" data-tree-id="treeId" data-tree-model="node.nodeChildren" data-node-id="nodeId" data-node-label="nodeLabel" data-node-children="nodeChildren"></div>
-            </li>
-        </ul>
-`;
+import _template from './templates/node.html';
 
-class Segment 
+class SegmentCtrl
 {
-    constructor($scope, $compile){
-
+    constructor() {
     }
+    
+    $onInit() {
+      
+        this.nodeLabel = this.nodeLabel || 'label';
+        this.nodeContent = this.nodeContent || 'content';
+        this.nodeIcon = this.nodeIcon || 'icon';
+        this.nodeChildren = this.nodeChildren || 'children';
+        
+    }
+    
+    selectNode(node){
+        this.nodes.map(( n ) => {
+            n.selected = (node[this.nodeLabel] == n[this.nodeLabel]) && !node.selected;
+        });
+    }
 }
 
-export default ['segment', {
+export default ['segmentTree', {
     bindings: {
-        nodes: '=',
-        nodeId: '=',
-        nodeLabel: '=',
-        nodeChildren: '='        
+        nodes: '<',
+        nodeId: '@?',
+        nodeLabel: '@?',
+        nodeChildren: '@?',
+        nodeContent: '@?',
+        nodeIcon: '@?',
+        nodeLinks: '<?'   
     },
-    controller: ['$scope', '$compile', Segment],
+    controller: SegmentCtrl,
     template: _template
 }];

No alert changes

Improved metrics

Total package byte prevSize

9016

increased by169.62%

Number of package files

10

increased by66.67%

Lines of code

114

increased by96.55%

Worsened metrics

Dev dependency count

5

increased by66.67%

No dependency changes