Skip to content

Commit

Permalink
fix issues #1-2 add v 1.2.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zicrael
Zicrael committed Mar 26, 2018
1 parent abe0c85 commit ef31911
Show file tree
Hide file tree
Showing 18 changed files with 411 additions and 125 deletions.
33 changes: 28 additions & 5 deletions README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,19 @@ The interface accepts only the following structure:

```typescript
export interface TreeModel {
name: string;
id: number;
options?: {};
childrens: TreeModel[];
name: string; // name of item
id: number; // id of item
options?: TreeItemOptions; // options of item
childrens: TreeModel[]; // childrens list
}
export interface TreeItemOptions {
href?: string; // href for <a> tag if enable setTreeItemAsLinks on config
isHidden?: boolean; // hide childrens
currentlyDragging?: boolean; // enable only where element is drugging.
}
```

#### Example
#### example

in you template file:

Expand Down Expand Up @@ -146,6 +151,23 @@ in you component file:
}
```

### ondragend()
Trigger end of drag event
#### example

in you template file:

```xml
<ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> </ngx-tree-component>
```
in you component file:

```typescript
onDragEnd(event) {
console.log(event);
}
```

### onallowdrop()
Trigger start of dragging element

Expand Down Expand Up @@ -260,6 +282,7 @@ in you component file:
showDeleteButton: true, // enable / disable delete item button.
setErrorValidationText: "I can be change", // set error validate text.
setMinValidationCountChars: 3 // Set count of name min chars on tree.
setTreeItemAsLinks: true // set name of items as <a> and set link from item.options.href .
}
```

Expand Down
33 changes: 28 additions & 5 deletions dist/README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,19 @@ The interface accepts only the following structure:

```typescript
export interface TreeModel {
name: string;
id: number;
options?: {};
childrens: TreeModel[];
name: string; // name of item
id: number; // id of item
options?: TreeItemOptions; // options of item
childrens: TreeModel[]; // childrens list
}
export interface TreeItemOptions {
href?: string; // href for <a> tag if enable setTreeItemAsLinks on config
isHidden?: boolean; // hide childrens
currentlyDragging?: boolean; // enable only where element is drugging.
}
```

#### Example
#### example

in you template file:

Expand Down Expand Up @@ -146,6 +151,23 @@ in you component file:
}
```

### ondragend()
Trigger end of drag event
#### example

in you template file:

```xml
<ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> </ngx-tree-component>
```
in you component file:

```typescript
onDragEnd(event) {
console.log(event);
}
```

### onallowdrop()
Trigger start of dragging element

Expand Down Expand Up @@ -260,6 +282,7 @@ in you component file:
showDeleteButton: true, // enable / disable delete item button.
setErrorValidationText: "I can be change", // set error validate text.
setMinValidationCountChars: 3 // Set count of name min chars on tree.
setTreeItemAsLinks: true // set name of items as <a> and set link from item.options.href .
}
```

Expand Down
125 changes: 102 additions & 23 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ var NgxTreeService = (function () {
this.onDragStart = new Subject$1();
this.onDrop = new Subject$1();
this.onAllowDrop = new Subject$1();
this.onDragEnd = new Subject$1();
this.onAddItem = new Subject$1();
this.onRenameItem = new Subject$1();
this.onRemoveItem = new Subject$1();
this._config = new BehaviorSubject$1(null);
this.globalPositionCounter = 0;
}
/**
* @param {?} item
Expand Down Expand Up @@ -153,6 +155,16 @@ var NgxTreeService = (function () {
this.onRenameItem.next(eventEmit);
this.clearAction();
};
/**
* @return {?}
*/
NgxTreeService.prototype.startDragging = /**
* @return {?}
*/
function () {
this.elementFinder(this.treeStorage, this.isDragging.id);
this.selectedElement.options.currentlyDragging = true;
};
/**
* @param {?} el
* @param {?} to
Expand All @@ -165,30 +177,32 @@ var NgxTreeService = (function () {
*/
function (el, to) {
if (el !== to) {
if (el.childrens.length > 0) {
this.elementFinder(el.childrens, to.id);
if (this.selectedElement.id !== to.id) {
this.deleteItem(el.id);
this.elementFinder(this.treeStorage, to.id);
this.selectedElement.childrens.push(el);
this.clearAction();
}
else {
return false;
}
}
else {
this.deleteItem(el.id);
this.elementFinder(this.treeStorage, to.id);
this.selectedElement.childrens.push(el);
this.clearAction();
}
el.options.currentlyDragging = false;
this.deleteItem(el.id);
this.elementFinder(this.treeStorage, to.id);
this.selectedElement.childrens.push(el);
this.clearAction();
}
else {
this.clearAction();
el.options.currentlyDragging = false;
return false;
}
};
/**
* @param {?} el
* @return {?}
*/
NgxTreeService.prototype.dragEndAction = /**
* @param {?} el
* @return {?}
*/
function (el) {
if (el) {
el.options.currentlyDragging = false;
}
return false;
};
/**
* @param {?} el
* @return {?}
Expand All @@ -198,6 +212,7 @@ var NgxTreeService = (function () {
* @return {?}
*/
function (el) {
el.options.currentlyDragging = false;
this.deleteItem(el.id);
this.treeStorage.push(el);
this.clearAction();
Expand Down Expand Up @@ -230,9 +245,9 @@ var NgxTreeChildrenComponent = (function () {
this.treeService = treeService;
this.fb = fb;
this.type = 'children';
this.isHidden = false;
this.treeService._config.subscribe(function (config) {
_this._config = config;
_this.isDragable = _this._config.enableDragging;
_this.createForm();
});
}
Expand All @@ -242,12 +257,52 @@ var NgxTreeChildrenComponent = (function () {
* @return {?}
*/
function (item) {
this.itemOptions = {
href: '#',
isHidden: false,
currentlyDragging: false
};
if (item.options) {
this.setOptions(item.options);
item.options = this.itemOptions;
}
else {
item.options = this.itemOptions;
}
this._item = item;
this.isHidden = this._item.options.isHidden;
this.checkFloatItem();
},
enumerable: true,
configurable: true
});
/**
* @param {?} options
* @return {?}
*/
NgxTreeChildrenComponent.prototype.setOptions = /**
* @param {?} options
* @return {?}
*/
function (options) {
for (var _i = 0, _a = Object.keys(options); _i < _a.length; _i++) {
var key = _a[_i];
this.setValue(key, options);
}
};
/**
* @param {?} item
* @param {?} options
* @return {?}
*/
NgxTreeChildrenComponent.prototype.setValue = /**
* @param {?} item
* @param {?} options
* @return {?}
*/
function (item, options) {
this.itemOptions[item] = options[item];
};
/**
* @return {?}
*/
Expand Down Expand Up @@ -294,6 +349,7 @@ var NgxTreeChildrenComponent = (function () {
target: item
};
event.stopPropagation();
this.treeService.startDragging();
this.treeService.onDragStart.next(eventObj);
// const allowed = document.getElementsByClassName('tree-title');
// const arr = Array.prototype.slice.call( allowed );
Expand All @@ -302,6 +358,25 @@ var NgxTreeChildrenComponent = (function () {
// i.style.border = '1px dashed grey';
// }
};
/**
* @param {?} event
* @param {?} item
* @return {?}
*/
NgxTreeChildrenComponent.prototype.onDragEnd = /**
* @param {?} event
* @param {?} item
* @return {?}
*/
function (event, item) {
var /** @type {?} */ dragItem = this.treeService.isDragging;
this.treeService.dragEndAction(dragItem);
var /** @type {?} */ eventObj = {
event: event,
target: item
};
this.treeService.onDragEnd.next(eventObj);
};
/**
* @param {?} event
* @param {?} item
Expand Down Expand Up @@ -362,7 +437,6 @@ var NgxTreeChildrenComponent = (function () {
this.showError = false;
this.treeService.renameItem(this.renameForm.value.name, item.id);
this.isEdit = false;
console.log();
}
else {
this.showError = true;
Expand Down Expand Up @@ -398,7 +472,7 @@ var NgxTreeChildrenComponent = (function () {
NgxTreeChildrenComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-tree-children',
template: "\n <div class='tree-child' *ngIf=\"_item && _config\" [draggable]=\"_config.enableDragging\" (dragstart)=\"onDragStart($event, _item)\" >\n <div class='pos-relative'>\n <div [ngClass]=\"{inOpacity: isHidden}\">\n <div class='tree-title d-inline-flex' (drop)=\"onDrop($event, _item)\"\n (dragover)=\"allowDrop($event)\" *ngIf=\"!isEdit;else onEdit\">\n {{_item.name}}\n <div class='d-flex' *ngIf=\"_config.showItemActionBtns\">\n <button class='btn-add-small' *ngIf=\"_config.showAddItemButton\"\n (click)='submitAdd(null, type)'><span></span><span></span></button>\n <button class='btn-edit-small' *ngIf=\"_config.showRenameButton\"\n (click)='isEdit = true;'><span>&#x270E;</span></button>\n <button class='btn-remove-small' *ngIf=\"_config.showDeleteButton\"\n (click)='onSubmitDelete()'><span></span><span></span></button>\n </div>\n </div>\n <ng-template #onEdit>\n <div class='tree-title d-inline-flex'>\n <form [formGroup]=\"renameForm\">\n <input type=\"text\" class='input-rename' [ngModel]=\"_item.name\" formControlName=\"name\">\n </form>\n <div class='d-flex'>\n <button class='btn-accept-edit-small' (click)='submitRename(_item)'><span></span><span></span></button>\n <button class='btn-remove-small' (click)='onSubmitDelete()'><span></span><span></span></button>\n <div class='error-edit-wrap' *ngIf=\"showError\">\n {{_config.setErrorValidationText}}\n </div>\n </div>\n </div>\n </ng-template>\n <div class=\"tree-content\" *ngIf=\"_item.childrens && !isHidden\"> \n <ngx-tree-children *ngFor=\"let item of _item.childrens\" [item]=\"item\"></ngx-tree-children>\n </div>\n </div>\n <div class='show-hide-switch' *ngIf=\"_config.enableShowHideBtns\">\n <div *ngIf=\"isHidden; else visible\">\n <button class='btn-show-small' (click)='isHidden = false'><span></span><span></span></button>\n </div>\n <ng-template #visible>\n <button class='btn-hide-small' (click)='isHidden = true'><span></span></button>\n </ng-template>\n </div>\n </div>\n</div>\n\n "
template: "\n <div class='tree-child' *ngIf=\"_item && _config\" [draggable]=\"this.isDragable\" (dragstart)=\"onDragStart($event, _item)\" (dragend)=\"onDragEnd($event, _item)\">\n <div class='pos-relative'>\n <div>\n <div class='tree-title d-inline-flex' (drop)=\"onDrop($event, _item)\" (dragover)=\"allowDrop($event)\" *ngIf=\"!isEdit;else onEdit\">\n <div *ngIf=\"!_config.setTreeItemAsLinks; else link\">\n {{_item.name}}\n </div>\n <ng-template #link>\n <div>\n <a [href]=\"_item.options.href\">{{_item.name}}</a>\n </div>\n </ng-template>\n <div class='d-flex' *ngIf=\"_config.showItemActionBtns\">\n <button class='btn-add-small' *ngIf=\"_config.showAddItemButton\" (click)='submitAdd(null, type)'><span></span><span></span></button>\n <button class='btn-edit-small' *ngIf=\"_config.showRenameButton\" (click)='isEdit = true;'><span>&#x270E;</span></button>\n <button class='btn-remove-small' *ngIf=\"_config.showDeleteButton\" (click)='onSubmitDelete()'><span></span><span></span></button>\n </div>\n </div>\n <ng-template #onEdit>\n <div class='tree-title d-inline-flex'>\n <form [formGroup]=\"renameForm\">\n <input type=\"text\" class='input-rename' [ngModel]=\"_item.name\" formControlName=\"name\">\n </form>\n <div class='d-flex'>\n <button class='btn-accept-edit-small' (click)='submitRename(_item)'><span></span><span></span></button>\n <button class='btn-remove-small' (click)='onSubmitDelete()'><span></span><span></span></button>\n <div class='error-edit-wrap' *ngIf=\"showError\">\n {{_config.setErrorValidationText}}\n </div>\n </div>\n </div>\n </ng-template>\n <div class=\"tree-content\" *ngIf=\"_item.childrens && !isHidden\">\n <ngx-tree-children *ngFor=\"let item of _item.childrens\" [item]=\"item\"></ngx-tree-children>\n </div>\n </div>\n <div class='show-hide-switch' *ngIf=\"_config.enableShowHideBtns && _item.childrens.length > 0\">\n <div *ngIf=\"isHidden; else visible\">\n <button class='btn-show-small' (click)='isHidden = false'><span></span><span></span></button>\n </div>\n <ng-template #visible>\n <button class='btn-hide-small' (click)='isHidden = true'><span></span></button>\n </ng-template>\n </div>\n <div class='invisible-layer' [ngClass]= \"{blockThis : _item.options.currentlyDragging}\">\n </div>\n </div>\n</div>\n\n "
},] },
];
/** @nocollapse */
Expand Down Expand Up @@ -430,11 +504,13 @@ var NgxTreeComponent = (function () {
enableDragging: true,
setRootTitle: 'Root',
setErrorValidationText: 'Enter valid name',
setMinValidationCountChars: 1
setMinValidationCountChars: 1,
setTreeItemAsLinks: false
};
this.ondragstart = new EventEmitter();
this.ondrop = new EventEmitter();
this.onallowdrop = new EventEmitter();
this.ondragend = new EventEmitter();
this.onadditem = new EventEmitter();
this.onrenameitem = new EventEmitter();
this.onremoveitem = new EventEmitter();
Expand Down Expand Up @@ -508,6 +584,9 @@ var NgxTreeComponent = (function () {
this.treeService.onAllowDrop.subscribe(function (event) {
_this.onallowdrop.emit(event);
});
this.treeService.onDragEnd.subscribe(function (event) {
_this.ondragend.emit(event);
});
this.treeService.onAddItem.subscribe(function (event) {
_this.onadditem.emit(event);
});
Expand All @@ -530,7 +609,6 @@ var NgxTreeComponent = (function () {
var _this = this;
this.treeService.getLocalData(userTree).subscribe(function (tree) {
_this.treeView = tree;
console.log(_this.treeView);
}, function (error) {
console.log(error);
});
Expand Down Expand Up @@ -613,6 +691,7 @@ var NgxTreeComponent = (function () {
"ondragstart": [{ type: Output },],
"ondrop": [{ type: Output },],
"onallowdrop": [{ type: Output },],
"ondragend": [{ type: Output },],
"onadditem": [{ type: Output },],
"onrenameitem": [{ type: Output },],
"onremoveitem": [{ type: Output },],
Expand Down
6 changes: 5 additions & 1 deletion dist/ngx-tree-dnd-children.component.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { OnInit } from '@angular/core';
import { NgxTreeService } from './ngx-tree-dnd.service';
import { TreeModel, TreeConfig } from './tree-view.model';
import { TreeModel, TreeConfig, TreeItemOptions } from './tree-view.model';
import { FormGroup, FormBuilder } from '@angular/forms';
export declare class NgxTreeChildrenComponent implements OnInit {
private treeService;
Expand All @@ -13,11 +13,15 @@ export declare class NgxTreeChildrenComponent implements OnInit {
isDragable: boolean;
renameForm: FormGroup;
_config: TreeConfig;
itemOptions: TreeItemOptions;
item: TreeModel;
constructor(treeService: NgxTreeService, fb: FormBuilder);
setOptions(options: any): void;
setValue(item: any, options: any): void;
checkFloatItem(): void;
createForm(): void;
onDragStart(event: any, item: any): void;
onDragEnd(event: any, item: any): void;
onDrop(event: any, item: any): void;
allowDrop(event: any): void;
submitAdd(name: any, type: any): void;
Expand Down
1 change: 1 addition & 0 deletions dist/ngx-tree-dnd.component.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export declare class NgxTreeComponent implements OnInit {
ondragstart: EventEmitter<any>;
ondrop: EventEmitter<any>;
onallowdrop: EventEmitter<any>;
ondragend: EventEmitter<any>;
onadditem: EventEmitter<any>;
onrenameitem: EventEmitter<any>;
onremoveitem: EventEmitter<any>;
Expand Down
Loading

0 comments on commit ef31911

Please sign in to comment.