feat(*): add cssClasses setting for folding elements and html templates for node and left menu activation elements

Author: Zhivka Dimova

.gitignore

@@ -10,5 +10,6 @@ factories
 node_modules
 
 .DS_Store
+*.swp
 npm-debug.log
 yarn-error.log

.vimrc

@@ -0,0 +1,7 @@
+set tabstop=2
+set shiftwidth=2
+set softtabstop=2
+set expandtab
+set nosmarttab
+
+set textwidth=80

README.md

@@ -271,8 +271,18 @@ Here is an example of its usage:
   value: 'Prototype-based programming',
   settings: {
     'static': true,
-	'rightMenu': true,
-	'leftMenu': true
+    'rightMenu': true,
+    'leftMenu': true,
+    'cssClasses': {
+      'expanded': 'fa fa-caret-down fa-lg',
+      'collapsed': 'fa fa-caret-right fa-lg',
+      'leaf:': 'fa fa-lg'
+    },
+    'templates': {
+      'node': '<i class="fa fa-folder-o fa-lg"></i>',
+      'leaf': '<i class="fa fa-file-o fa-lg"></i>',
+      'leftMenu': '<i class="fa fa-navicon fa-lg"></i>'
+    }
   },
   children: [
     {value: 'JavaScript'},
@@ -282,9 +292,17 @@ Here is an example of its usage:
 }
 ```
 
-* `static` - This option makes it impossible to drag a tree or modify it in a some way, though you still can select nodes in the static tree and appropriate events will be generated.
-* `rightMenu` - This option allows you to activate (true, by default) or deactivate (false) right menu when clicking with right button of a mouse.
-* `leftMenu` - This option allows you to activate (true) or deactivate (false, by default) left menu.
+* `static` - Boolean - This option makes it impossible to drag a tree or modify it in a some way, though you still can select nodes in the static tree and appropriate events will be generated.
+* `rightMenu` - Boolan - This option allows you to activate (true, by default) or deactivate (false) right menu when clicking with right button of a mouse.
+* `leftMenu` - Boolean - This option allows you to activate (true) or deactivate (false, by default) left menu.
+* `cssClasses` - Object:
+  * `expanded` - String - It specifies a css class (or classes) for an item which represents expanded state of a node. The item is clickable and it transitions the node to the collapsed state
+  * `collapsed` - String - It specifies a css class (or classes) for an item which represents collapsed state of a node. The item is clickable and it transitions the node to the expanded state
+  * `leaf` - String - It specifies a css class (or classes) for an item which represents a node without an option to expand or collapse - in other words: a leaf node.
+* `templates` - Object:
+  * `node` - String - It specifies a html template which will be included to the left of the node's value.
+  * `leaf` - String - It specifies a html template which will be included to the left of the leaf's value.
+  * `leftMenu` - String - It specifies a html template to the right of the node's value. This template becomes clickable and shows a menu on node's click.
 
 All options that's defined on a `parent` are automatically applied to children. If you want you can override them by `settings` of the child node.
 

demo/app.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { NodeEvent, TreeModel, RenamableNode, Ng2TreeSettings } from '../index';
 
 require('../src/styles.css');
+require('../node_modules/font-awesome/css/font-awesome.min.css');
 
 declare const alertify: any;
 
@@ -140,6 +141,17 @@ export class AppComponent implements OnInit {
   public dfs: TreeModel = {
     value: '/',
     id: 1,
+    settings: {
+      cssClasses: {
+        expanded: 'fa fa-caret-down',
+        collapsed: 'fa fa-caret-right',
+        leaf: 'fa'
+      },
+      templates: {
+        node: '<i class="fa fa-folder-o"></i>',
+        leaf: '<i class="fa fa-file-o"></i>'
+      }
+    },
     children: [
       {
         value: 'bin',
@@ -265,13 +277,21 @@ export class AppComponent implements OnInit {
             ]
           },
           {
-            value: 'secondUser',
+            value: 'secondUser - left menu templates',
             id: 54,
+            settings: {
+              leftMenu: true
+            },
             children: [
               {value: 'Documents', id: 55, children: []},
               {
-                value: 'Downloads',
+                value: 'Downloads - custom left menu template',
                 id: 56,
+                settings: {
+                  templates: {
+                    leftMenu: '<i class="fa fa-navicon"></i>'
+                  }
+                },
                 children: [
                   {value: 'Actobat3', id: 57},
                   {value: 'Complib', id: 58},

demo/vendor.ts

@@ -3,3 +3,4 @@ import '@angular/common';
 import '@angular/core';
 import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
+import 'font-awesome/css/font-awesome.css';

package.json

@@ -73,12 +73,14 @@
     "conventional-github-releaser": "1.1.3",
     "core-js": "2.4.1",
     "css-loader": "0.26.1",
+    "font-awesome": "4.7.0",
     "gulp": "3.9.1",
     "gulp-gh-pages": "0.5.4",
     "istanbul-instrumenter-loader": "2.0.0",
     "jasmine-core": "2.5.2",
+    "jasmine-data-provider": "2.2.0",
     "jasmine-spec-reporter": "~3.2.0",
-    "karma": "1.4.0",
+    "karma-cli": "1.0.1",
     "karma-coverage-istanbul-reporter": "0.2.0",
     "karma-jasmine": "1.1.0",
     "karma-phantomjs-launcher": "github:karma-runner/karma-phantomjs-launcher",
@@ -100,6 +102,7 @@
     "tslint": "4.4.2",
     "tslint-config-valorsoft": "1.2.0",
     "typescript": "2.0.10",
+    "url-loader": "0.5.8",
     "webpack": "1.14.0",
     "webpack-dev-server": "1.16.2",
     "zone.js": "0.7.6"

src/styles.css

@@ -109,7 +109,7 @@ tree-internal .tree .node-left-menu {
   width: auto;
 }
 
-tree-internal .tree .node-left-menu:before {
+tree-internal .tree .node-left-menu span:before {
   content: '\2026';
   color: #757575;
 }

src/tree-internal.component.ts

@@ -20,21 +20,22 @@ import { Observable } from 'rxjs';
         [nodeDraggable]="element"
         [tree]="tree">
 
-        <div class="folding" (click)="onSwitchFoldingType()" [ngClass]="tree.foldingType.cssClass"></div>
+        <div class="folding" (click)="onSwitchFoldingType()" [ngClass]="tree.foldingCssClass"></div>
         <div class="node-value"
           *ngIf="!shouldShowInputForTreeValue()"
           [class.node-selected]="isSelected"
           (click)="onNodeSelected($event)">
-            {{tree.value}}<span class="loading-children" *ngIf="tree.childrenAreBeingLoaded()"></span>
+            <div *ngIf="tree.nodeTemplate" class="node-template" [innerHTML]="tree.nodeTemplate"></div>
+            {{ tree.value }}
+            <span class="loading-children" *ngIf="tree.childrenAreBeingLoaded()"></span>
         </div>
 
         <input type="text" class="node-value"
            *ngIf="shouldShowInputForTreeValue()"
            [nodeEditable]="tree.value"
            (valueChanged)="applyNewValue($event)"/>
 
-        <div class="node-left-menu" #leftMenuButton
-          *ngIf="tree.hasLeftMenu()" (click)="showLeftMenu($event)">
+        <div class="node-left-menu" *ngIf="tree.hasLeftMenu()" (click)="showLeftMenu($event)" [innerHTML]="tree.leftMenuTemplate">
         </div>
         <node-menu *ngIf="tree.hasLeftMenu() && isLeftMenuVisible"
           (menuItemSelected)="onMenuItemSelected($event)">
@@ -175,9 +176,9 @@ export class TreeInternalComponent implements OnInit {
     this.treeService.fireNodeRemoved(this.tree);
   }
 
-  private onSwitchFoldingType(): void {
+  public onSwitchFoldingType(): void {
     this.tree.switchFoldingType();
-	this.treeService.fireNodeSwitchFoldingType(this.tree);
+    this.treeService.fireNodeSwitchFoldingType(this.tree);
   }
 
   public applyNewValue(e: NodeEditableEvent): void {

src/tree.ts

@@ -206,15 +206,15 @@ export class Tree {
 
   /**
    * Check whether or not this tree has a left menu.
-   * @returns {boolean} A flag indicating whether or not this has a left menu.
+   * @returns {boolean} A flag indicating whether or not this tree has a left menu.
    */
   public hasLeftMenu(): boolean {
     return !_.get(this.node.settings, 'static', false) && _.get(this.node.settings, 'leftMenu', false);
   }
 
   /**
    * Check whether or not this tree has a right menu.
-   * @returns {boolean} A flag indicating whether or not this has a right menu.
+   * @returns {boolean} A flag indicating whether or not this tree has a right menu.
    */
   public hasRightMenu(): boolean {
     return !_.get(this.node.settings, 'static', false) && _.get(this.node.settings, 'rightMenu', false);
@@ -306,23 +306,79 @@ export class Tree {
     return this.foldingType === FoldingType.Expanded;
   }
 
+  /**
+   * Set a current folding type: expanded, collapsed or leaf.
+   */
+  private _setFoldingType(): void {
+    if (this.childrenShouldBeLoaded()) {
+      this.node._foldingType = FoldingType.Collapsed;
+    } else if (this._children) {
+      this.node._foldingType = FoldingType.Expanded;
+    } else {
+      this.node._foldingType = FoldingType.Leaf;
+    }
+  }
+
   /**
    * Get a current folding type: expanded, collapsed or leaf.
    * @returns {FoldingType} A folding type of the current tree.
    */
   public get foldingType(): FoldingType {
     if (!this.node._foldingType) {
-      if (this.childrenShouldBeLoaded()) {
-        this.node._foldingType = FoldingType.Collapsed;
-      } else if (this._children) {
-        this.node._foldingType = FoldingType.Expanded;
-      } else {
-        this.node._foldingType = FoldingType.Leaf;
-      }
+      this._setFoldingType();
     }
     return this.node._foldingType;
   }
 
+  /**
+   * Get a css class for element which displayes folding state - expanded, collapsed or leaf
+   * @returns {string} A string icontaining css class (classes)
+   */
+  public get foldingCssClass(): string {
+    return this.getCssClassesFromSettings() || this.foldingType.cssClass;
+  }
+
+  private getCssClassesFromSettings(): string {
+    if (!this.node._foldingType) {
+      this._setFoldingType();
+    }
+
+    if (this.node._foldingType === FoldingType.Collapsed) {
+       return _.get(this.node.settings, 'cssClasses.collapsed', null);
+    } else if (this.node._foldingType === FoldingType.Expanded) {
+       return _.get(this.node.settings, 'cssClasses.expanded', null);
+    }
+
+    return _.get(this.node.settings, 'cssClasses.leaf', null);
+  }
+
+  /**
+   * Get a html template to render before every node's name.
+   * @returns {string} A string representing a html template.
+   */
+  public get nodeTemplate(): string {
+    return this.getTemplateFromSettings();
+  }
+
+  private getTemplateFromSettings(): string {
+    if (this.isLeaf()) {
+      return _.get(this.node.settings, 'templates.leaf', '');
+    } else {
+      return _.get(this.node.settings, 'templates.node', '');
+    }
+  }
+
+  /**
+   * Get a html template to render for an element activatin left menu of a node.
+   * @returns {string} A string representing a html template.
+   */
+  public get leftMenuTemplate(): string {
+    if (this.hasLeftMenu()) {
+      return _.get(this.node.settings, 'templates.leftMenu', '<span></span>');
+    }
+    return '';
+  }
+
   /**
    * Check that current tree is newly created (added by user via menu for example). Tree that was built from the TreeModel is not marked as new.
    * @returns {boolean} A flag whether the tree is new.

src/tree.types.ts

@@ -25,7 +25,35 @@ export interface TreeModel {
   _foldingType?: FoldingType;
 }
 
+export interface CssClasses {
+  /* The class or classes that should be added to the expanded node */
+  expanded?: string;
+
+  /* The class or classes that should be added to the collapsed node */
+  collapsed?: string;
+
+  /* The class or classes that should be added to the expanded to the leaf */
+  leaf?: string;
+}
+
+export interface Templates {
+  /* A template for a node */
+  node?: string;
+
+  /* A template for a leaf node */
+  leaf?: string;
+
+  /* A template for left menu html element */
+  leftMenu?: string;
+}
+
 export class TreeModelSettings {
+  /* cssClasses - set custom css classes which will be used for a tree */
+  public cssClasses?: CssClasses;
+
+  /* Templates - set custom html templates to be used in a tree */
+  public templates?: Templates;
+
   /**
    * "leftMenu" property when set to true makes left menu available.
    * @name TreeModelSettings#leftMenu
@@ -51,7 +79,7 @@ export class TreeModelSettings {
   public static?: boolean;
 
   public static merge(sourceA: TreeModel, sourceB: TreeModel): TreeModelSettings {
-    return _.defaults({}, _.get(sourceA, 'settings'), _.get(sourceB, 'settings'), {static: false, leftMenu: false, rightMenu: true});
+    return _.defaultsDeep({}, _.get(sourceA, 'settings'), _.get(sourceB, 'settings'), {static: false, leftMenu: false, rightMenu: true});
   }
 }