Merge pull request #60 from IndustriaTech/feature/settings-menu

Right menu and left menu

Author: Georgii Rychko

README.md

@@ -265,7 +265,9 @@ Here is an example of its usage:
 {
   value: 'Prototype-based programming',
   settings: {
-    'static': true
+    'static': true,
+	'rightMenu': true,
+	'leftMenu': true
   },
   children: [
     {value: 'JavaScript'},
@@ -275,8 +277,11 @@ Here is an example of its usage:
 }
 ```
 
-Right now only one option is supported - `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.
-`static` option that's defined on a `parent` is automatically applied to its children. If you don't want to make `static` all the children, then you can override `settings` of the child node.
+* `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.
+
+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.
 
 ### [settings]
 

demo/app.component.ts

@@ -33,6 +33,18 @@ declare const alertify: any;
           (nodeCreated)="onNodeCreated($event)">
         </tree>
       </div>
+      <div class="tree-container">
+        <p class="tree-title">Directory/File structure</p>
+        <p class="notice">this tree has advanced configurations</p>
+        <tree
+          [tree]="dfs"
+          (nodeRemoved)="onNodeRemoved($event)"
+          (nodeRenamed)="onNodeRenamed($event)"
+          (nodeSelected)="onNodeSelected($event)"
+          (nodeMoved)="onNodeMoved($event)"
+          (nodeCreated)="onNodeCreated($event)">
+        </tree>
+    </div>
     </div>
     `,
   styles: [`
@@ -121,6 +133,23 @@ export class AppComponent implements OnInit {
 
   public pls: TreeModel;
 
+  public dfs: TreeModel = {
+    value: '/',
+    settings: {
+      leftMenu: true,
+      rightMenu: false
+    },
+    children: [
+      {
+         value: 'bin',
+         children: [
+           {value: 'bash'},
+		   {value: 'umount'}
+         ]
+      }
+    ]
+  };
+
   public ngOnInit(): void {
     setTimeout(() => {
       this.pls = {

src/menu/node-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, Renderer, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output, Renderer, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { NodeMenuService } from './node-menu.service';
 import { NodeMenuItemSelectedEvent, NodeMenuItemAction, NodeMenuAction } from './menu.events';
 import { isLeftButtonClicked, isEscapePressed } from '../utils/event.utils';
@@ -7,9 +7,9 @@ import { isLeftButtonClicked, isEscapePressed } from '../utils/event.utils';
   selector: 'node-menu',
   template: `
     <div class="node-menu">
-      <ul class="node-menu-content">
+      <ul class="node-menu-content" #menuContainer>
         <li class="node-menu-item" *ngFor="let menuItem of availableMenuItems"
-            (click)="onMenuItemSelected($event, menuItem)">
+          (click)="onMenuItemSelected($event, menuItem)">
           <div class="node-menu-item-icon {{menuItem.cssClass}}"></div>
           <span class="node-menu-item-value">{{menuItem.name}}</span>
         </li>
@@ -21,6 +21,8 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
   @Output()
   public menuItemSelected: EventEmitter<NodeMenuItemSelectedEvent> = new EventEmitter<NodeMenuItemSelectedEvent>();
 
+  @ViewChild('menuContainer') public menuContainer: any;
+
   public availableMenuItems: NodeMenuItem[] = [
     {
       name: 'New tag',
@@ -52,7 +54,7 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
 
   public ngOnInit(): void {
     this.disposersForGlobalListeners.push(this.renderer.listenGlobal('document', 'keyup', this.closeMenu.bind(this)));
-    this.disposersForGlobalListeners.push(this.renderer.listenGlobal('document', 'click', this.closeMenu.bind(this)));
+    this.disposersForGlobalListeners.push(this.renderer.listenGlobal('document', 'mousedown', this.closeMenu.bind(this)));
   }
 
   public ngOnDestroy(): void {
@@ -62,12 +64,16 @@ export class NodeMenuComponent implements OnInit, OnDestroy {
   public onMenuItemSelected(e: MouseEvent, selectedMenuItem: NodeMenuItem): void {
     if (isLeftButtonClicked(e)) {
       this.menuItemSelected.emit({nodeMenuItemAction: selectedMenuItem.action});
+      this.nodeMenuService.fireMenuEvent(e.target as HTMLElement, NodeMenuAction.Close);
     }
   }
 
   private closeMenu(e: MouseEvent | KeyboardEvent): void {
     const mouseClicked = e instanceof MouseEvent;
-    if (mouseClicked || isEscapePressed(e as KeyboardEvent)) {
+    // Check if the click is fired on an element inside a menu
+    const containingTarget = (this.menuContainer.nativeElement !== e.target && this.menuContainer.nativeElement.contains(e.target));
+
+    if (mouseClicked && !containingTarget || isEscapePressed(e as KeyboardEvent)) {
       this.nodeMenuService.fireMenuEvent(e.target as HTMLElement, NodeMenuAction.Close);
     }
   }

src/styles.css

@@ -103,6 +103,17 @@ tree-internal .tree .node-value:hover:after {
   width: 100%;
 }
 
+tree-internal .tree .node-left-menu {
+  display: inline-block;
+  height: 100%;
+  width: auto;
+}
+
+tree-internal .tree .node-left-menu:before {
+  content: '\2026';
+  color: #757575;
+}
+
 tree-internal .tree .node-selected:after {
   width: 100%;
 }

src/tree-internal.component.ts

@@ -16,7 +16,7 @@ import { Observable } from 'rxjs';
     <li>
       <div class="value-container"
         [ngClass]="{rootless: isRootHidden()}"
-        (contextmenu)="showMenu($event)"
+        (contextmenu)="showRightMenu($event)"
         [nodeDraggable]="element"
         [tree]="tree">
 
@@ -32,9 +32,16 @@ import { Observable } from 'rxjs';
            *ngIf="shouldShowInputForTreeValue()"
            [nodeEditable]="tree.value"
            (valueChanged)="applyNewValue($event)"/>
+
+        <div class="node-left-menu" #leftMenuButton
+          *ngIf="tree.hasLeftMenu()" (click)="showLeftMenu($event)">
+        </div>
+        <node-menu *ngIf="tree.hasLeftMenu() && isLeftMenuVisible"
+          (menuItemSelected)="onMenuItemSelected($event)">
+        </node-menu>
       </div>
 
-      <node-menu *ngIf="isMenuVisible" (menuItemSelected)="onMenuItemSelected($event)"></node-menu>
+      <node-menu *ngIf="isRightMenuVisible" (menuItemSelected)="onMenuItemSelected($event)"></node-menu>
 
       <template [ngIf]="tree.isNodeExpanded()">
         <tree-internal *ngFor="let child of tree.childrenAsync | async" [tree]="child"></tree-internal>
@@ -51,7 +58,8 @@ export class TreeInternalComponent implements OnInit {
   public settings: Ng2TreeSettings;
 
   public isSelected: boolean = false;
-  public isMenuVisible: boolean = false;
+  public isRightMenuVisible: boolean = false;
+  public isLeftMenuVisible: boolean = false;
 
   public constructor(@Inject(NodeMenuService) private nodeMenuService: NodeMenuService,
                      @Inject(TreeService) private treeService: TreeService,
@@ -62,7 +70,10 @@ export class TreeInternalComponent implements OnInit {
     this.settings = this.settings || { rootIsVisible: true };
 
     this.nodeMenuService.hideMenuStream(this.element)
-      .subscribe(() => this.isMenuVisible = false);
+      .subscribe(() => {
+        this.isRightMenuVisible = false;
+        this.isLeftMenuVisible = false;
+      });
 
     this.treeService.unselectStream(this.tree)
       .subscribe(() => this.isSelected = false);
@@ -103,18 +114,32 @@ export class TreeInternalComponent implements OnInit {
     }
   }
 
-  public showMenu(e: MouseEvent): void {
-    if (this.tree.isStatic()) {
+  public showRightMenu(e: MouseEvent): void {
+    if (!this.tree.hasRightMenu()) {
       return;
     }
 
     if (EventUtils.isRightButtonClicked(e)) {
-      this.isMenuVisible = !this.isMenuVisible;
+      this.isRightMenuVisible = !this.isRightMenuVisible;
       this.nodeMenuService.hideMenuForAllNodesExcept(this.element);
     }
     e.preventDefault();
   }
 
+  public showLeftMenu(e: MouseEvent): void {
+    if (!this.tree.hasLeftMenu()) {
+      return;
+    }
+
+    if (EventUtils.isLeftButtonClicked(e)) {
+      this.isLeftMenuVisible = !this.isLeftMenuVisible;
+      this.nodeMenuService.hideMenuForAllNodesExcept(this.element);
+      if (this.isLeftMenuVisible) {
+        e.preventDefault();
+      }
+    }
+  }
+
   public onMenuItemSelected(e: NodeMenuItemSelectedEvent): void {
     switch (e.nodeMenuItemAction) {
       case NodeMenuItemAction.NewTag:
@@ -136,12 +161,14 @@ export class TreeInternalComponent implements OnInit {
 
   private onNewSelected(e: NodeMenuItemSelectedEvent): void {
     this.tree.createNode(e.nodeMenuItemAction === NodeMenuItemAction.NewFolder);
-    this.isMenuVisible = false;
+    this.isRightMenuVisible = false;
+    this.isLeftMenuVisible = false;
   }
 
   private onRenameSelected(): void {
     this.tree.markAsBeingRenamed();
-    this.isMenuVisible = false;
+    this.isRightMenuVisible = false;
+    this.isLeftMenuVisible = false;
   }
 
   private onRemoveSelected(): void {

src/tree.ts

@@ -204,6 +204,22 @@ export class Tree {
     return _.get(this.node.settings, 'static', false);
   }
 
+  /**
+   * Check whether or not this tree has a left menu.
+   * @returns {boolean} A flag indicating whether or not this 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.
+   */
+  public hasRightMenu(): boolean {
+    return !_.get(this.node.settings, 'static', false) && _.get(this.node.settings, 'rightMenu', false);
+  }
+
   /**
    * Check whether this tree is "Leaf" or not.
    * @returns {boolean} A flag indicating whether or not this tree is a "Leaf".

src/tree.types.ts

@@ -25,6 +25,22 @@ export interface TreeModel {
 }
 
 export class TreeModelSettings {
+  /**
+   * "leftMenu" property when set to true makes left menu available.
+   * @name TreeModelSettings#leftMenu
+   * @type boolean
+   * @default false
+   */
+  public leftMenu?: boolean;
+
+  /**
+   * "rightMenu" property when set to true makes right menu available.
+   * @name TreeModelSettings#rightMenu
+   * @type boolean
+   * @default true
+   */
+  public rightMenu?: boolean;
+
   /**
    * "static" property when set to true makes it impossible to drag'n'drop tree or call a menu on it.
    * @name TreeModelSettings#static
@@ -34,7 +50,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});
+    return _.defaults({}, _.get(sourceA, 'settings'), _.get(sourceB, 'settings'), {static: false, leftMenu: false, rightMenu: true});
   }
 }