Skip to content

Commit

Permalink
fix #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zicrael
Zicrael committed Mar 27, 2018
1 parent ef31911 commit df3828c
Show file tree
Hide file tree
Showing 14 changed files with 229 additions and 59 deletions.
54 changes: 45 additions & 9 deletions README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ in you component file:
}
```

### 3.Config
### 3. Config

You can enable/disable and set some elements on tree by write simple config:

Expand All @@ -281,34 +281,70 @@ in you component file:
showRenameButton: true, // enable / disable rename item button.
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.
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 .
}
```

### 4.Styles
### 4. Items options

You can change items options by set 'options' key on item object :

#### example

in you component file:

```typescript
youTree = [
{
name: 'first elem',
id: 1234567890,
options: {
href: 'www.google.com', // set href to <a> title if config.setTreeItemAsLinks = true, you can style it by .tree-link class.
isHidden: true, // hide childrens list element as default, but you can open it if config.enableShowHideBtns = true
position: 1 // no effect. It will be used on feature versions.
}
childrens: []
},
{
name: 'second elem',
id: 0987654321,
options: {
href: 'www.apple.com', // set href to <a> title if config.setTreeItemAsLinks = true, you can style it by .tree-link class.
isHidden: false, // hide childrens list element as default, but you can open it if config.enableShowHideBtns = true
position: 2 // no effect. It will be used on feature versions. (But you can use it).
}
childrens: []
}
];
```

### 5. Styles

You can rewrite all styles like you want. Here some for example:

```css
.tree-child {
/* you styles */
/* change styles for child elements */
}
.tree-title {
/* you styles */
/* change styles for items title */
}
.tree-content {
/* you styles */
/* change styles for tree.childrens wrapper */
}
.tree-link {
/* change styles for links if config.setTreeItemAsLinks = true */
}
.btn-add-small, .btn-remove-small, .btn-edit-small, .btn-accept-edit-small {
/* you styles */
/* change styles for buttons if config.showItemActionBtns = true */
}
.input-rename {
/* you styles */
/* change styles for input name/rename */
}
```

### 5. Thank you for use my plug-in.
### Thank you for use my plug-in.

Made with love by Yaroslav Kikot.

Expand Down
54 changes: 45 additions & 9 deletions dist/README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ in you component file:
}
```

### 3.Config
### 3. Config

You can enable/disable and set some elements on tree by write simple config:

Expand All @@ -281,34 +281,70 @@ in you component file:
showRenameButton: true, // enable / disable rename item button.
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.
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 .
}
```

### 4.Styles
### 4. Items options

You can change items options by set 'options' key on item object :

#### example

in you component file:

```typescript
youTree = [
{
name: 'first elem',
id: 1234567890,
options: {
href: 'www.google.com', // set href to <a> title if config.setTreeItemAsLinks = true, you can style it by .tree-link class.
isHidden: true, // hide childrens list element as default, but you can open it if config.enableShowHideBtns = true
position: 1 // no effect. It will be used on feature versions.
}
childrens: []
},
{
name: 'first child elem',
id: 0987654321,
options: {
href: 'www.apple.com', // set href to <a> title if config.setTreeItemAsLinks = true, you can style it by .tree-link class.
isHidden: false, // hide childrens list element as default, but you can open it if config.enableShowHideBtns = true
position: 2 // no effect. It will be used on feature versions. (But you can use it).
}
childrens: []
}
];
```

### 5. Styles

You can rewrite all styles like you want. Here some for example:

```css
.tree-child {
/* you styles */
/* change styles for child elements */
}
.tree-title {
/* you styles */
/* change styles for items title */
}
.tree-content {
/* you styles */
/* change styles for tree.childrens wrapper */
}
.tree-link {
/* change styles for links if config.setTreeItemAsLinks = true */
}
.btn-add-small, .btn-remove-small, .btn-edit-small, .btn-accept-edit-small {
/* you styles */
/* change styles for buttons if config.showItemActionBtns = true */
}
.input-rename {
/* you styles */
/* change styles for input name/rename */
}
```

### 5. Thank you for use my plug-in.
### Thank you for use my plug-in.

Made with love by Yaroslav Kikot.

Expand Down
57 changes: 46 additions & 11 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,19 @@ var NgxTreeService = (function () {
this.onRenameItem = new Subject$1();
this.onRemoveItem = new Subject$1();
this._config = new BehaviorSubject$1(null);
this.globalPositionCounter = 0;
this.defaulConfig = {
showAddRootBtn: true,
showItemActionBtns: true,
showAddItemButton: true,
showRenameButton: true,
showDeleteButton: true,
enableShowHideBtns: true,
enableDragging: true,
setRootTitle: 'Root',
setErrorValidationText: 'Enter valid name',
setMinValidationCountChars: 1,
setTreeItemAsLinks: false
};
}
/**
* @param {?} item
Expand Down Expand Up @@ -241,15 +253,10 @@ var NgxTreeService = (function () {
*/
var NgxTreeChildrenComponent = (function () {
function NgxTreeChildrenComponent(treeService, fb) {
var _this = this;
this.treeService = treeService;
this.fb = fb;
this.type = 'children';
this.treeService._config.subscribe(function (config) {
_this._config = config;
_this.isDragable = _this._config.enableDragging;
_this.createForm();
});
this.enableSubscribers();
}
Object.defineProperty(NgxTreeChildrenComponent.prototype, "item", {
set: /**
Expand All @@ -276,6 +283,27 @@ var NgxTreeChildrenComponent = (function () {
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxTreeChildrenComponent.prototype.enableSubscribers = /**
* @return {?}
*/
function () {
var _this = this;
this.treeService._config.subscribe(function (config) {
if (config !== null) {
_this._config = config;
_this.isDragable = _this._config.enableDragging;
_this.createForm();
}
else {
_this._config = _this.treeService.defaulConfig;
_this.isDragable = _this._config.enableDragging;
_this.createForm();
}
});
};
/**
* @param {?} options
* @return {?}
Expand Down Expand Up @@ -327,7 +355,7 @@ var NgxTreeChildrenComponent = (function () {
this.renameForm = this.fb.group({
name: ['', [
Validators.required,
Validators.minLength(1)
Validators.minLength(this._config.setMinValidationCountChars)
]],
});
};
Expand Down Expand Up @@ -472,7 +500,7 @@ var NgxTreeChildrenComponent = (function () {
NgxTreeChildrenComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-tree-children',
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 "
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\" class='tree-link'>{{_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 @@ -523,7 +551,15 @@ var NgxTreeComponent = (function () {
* @return {?}
*/
function (config) {
this.setConfig(config);
Object.seal(this._config);
try {
this.setConfig(config);
this.treeService._config.next(this._config);
}
catch (/** @type {?} */ error) {
console.log('Config is invalid! Default configuragion will be appeared');
this.treeService._config.next(this.treeService.defaulConfig);
}
},
enumerable: true,
configurable: true
Expand Down Expand Up @@ -552,7 +588,6 @@ var NgxTreeComponent = (function () {
var key = _a[_i];
this.setValue(key, config);
}
this.treeService._config.next(this._config);
};
/**
* @param {?} item
Expand Down
1 change: 1 addition & 0 deletions dist/ngx-tree-dnd-children.component.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export declare class NgxTreeChildrenComponent implements OnInit {
itemOptions: TreeItemOptions;
item: TreeModel;
constructor(treeService: NgxTreeService, fb: FormBuilder);
enableSubscribers(): void;
setOptions(options: any): void;
setValue(item: any, options: any): void;
checkFloatItem(): void;
Expand Down
Loading

0 comments on commit df3828c

Please sign in to comment.