Skip to content

Commit 20ef986

Browse files
morrisjdevmorrisjdev
committed
added panel draggable demo
added support for custom buttons on panel finisehd draggable
1 parent 3cc46f8 commit 20ef986

File tree

9 files changed

+144
-592
lines changed

9 files changed

+144
-592
lines changed

‎.idea/runConfigurations/Publish_Doc.xml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml

Lines changed: 14 additions & 543 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/ng-metro4/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ng-metro4",
33
"description": "Angular components for Metro4 UI library in modern ui style.",
4-
"version": "1.0.5",
4+
"version": "1.0.6",
55
"peerDependencies": {
66
"@angular/common": "~8.1.0",
77
"@angular/core": "~8.1.0",

‎projects/ng-metro4/src/lib/controls/draggable/draggable.directive.ts

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,69 @@
11
import {Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges} from '@angular/core';
2+
import {asapScheduler} from 'rxjs';
23

34
declare var $: any;
45

6+
export interface DragPosition {
7+
x: number;
8+
y: number;
9+
}
10+
511
@Directive({
612
selector: '[m4-draggable]'
713
})
814
export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
915
@Input('m4-draggable') dragElement: string;
1016
@Input('drag-area') dragArea: string;
1117

12-
@Output() dragStart = new EventEmitter<{ x: number, y: number }>();
13-
@Output() dragStop = new EventEmitter<{ x: number, y: number }>();
14-
@Output() dragMove = new EventEmitter<{ x: number, y: number }>();
18+
@Output() dragStart = new EventEmitter<DragPosition>();
19+
@Output() dragStop = new EventEmitter<DragPosition>();
20+
@Output() dragMove = new EventEmitter<DragPosition>();
1521

1622
private draggableData;
1723

1824
constructor(private element: ElementRef, private renderer: Renderer2) {}
1925

20-
21-
2226
private createElement() {
23-
const draggableOptions: any = {
24-
onDragStart: (position, element) => {
25-
console.log(position, element);
27+
asapScheduler.schedule(() => {
28+
if (this.draggableData) {
29+
if (this.dragArea) {
30+
this.draggableData.elem.remove();
31+
}
32+
33+
this.draggableData.destroy();
2634
}
27-
};
2835

29-
if (this.dragElement) {
30-
draggableOptions.dragElement = this.dragElement;
31-
}
36+
const draggableOptions: any = {
37+
onDragStart: (position: DragPosition) => {
38+
this.dragStart.emit(position);
39+
},
40+
onDragStop: (position: DragPosition) => {
41+
this.dragStop.emit(position);
42+
},
43+
onDragMove: (position: DragPosition) => {
44+
this.dragMove.emit(position);
45+
}
46+
};
47+
48+
if (this.dragElement) {
49+
draggableOptions.dragElement = this.dragElement;
50+
}
3251

33-
if (this.dragArea) {
34-
draggableOptions.dragArea = this.dragArea;
35-
}
52+
if (this.dragArea) {
53+
draggableOptions.dragArea = this.dragArea;
54+
}
3655

37-
this.draggableData = $(this.element.nativeElement).draggable(draggableOptions).data('draggable');
56+
this.draggableData = $(this.element.nativeElement).draggable(draggableOptions).data('draggable');
57+
});
58+
}
3859

39-
console.log(this.draggableData);
40-
// $(document).hotkey(this.hotkey, () => {
41-
// this.hotkeyClick.emit();
42-
// });
60+
public setPosition(position: DragPosition) {
61+
if (this.draggableData) {
62+
$(this.draggableData.elem).css({
63+
left: position.x + 'px',
64+
top: position.y + 'px'
65+
});
66+
}
4367
}
4468

4569
ngOnInit(): void {
@@ -51,6 +75,6 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
5175
}
5276

5377
ngOnDestroy(): void {
54-
78+
$(this.element.nativeElement).remove();
5579
}
5680
}

‎projects/ng-metro4/src/lib/controls/panel/panel.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
[attr.data-title-icon]="titleIcon"
66
[attr.data-collapsible]="collapsible"
77
[attr.data-collapsed]="collapsed"
8-
[attr.data-draggable]="draggable"
98

109
[attr.data-cls-panel]="clsPanel"
1110
[attr.data-cls-title]="clsTitle"

‎projects/ng-metro4/src/lib/controls/panel/panel.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export class PanelComponent implements OnInit, OnChanges {
2727
@Input('title-icon') titleIcon: string;
2828
@Input() collapsible: boolean;
2929
@Input() collapsed: boolean;
30-
@Input() draggable: boolean;
30+
@Input('custom-buttons') customButtons: { html: string, cls: string, onclick: string }[] = [];
3131

3232
@Input('cls-panel') clsPanel: string;
3333
@Input('cls-title') clsTitle: string;
@@ -57,7 +57,9 @@ export class PanelComponent implements OnInit, OnChanges {
5757
ObjectHelper.show(this.clonedElement);
5858
originalElement.parent().append(this.clonedElement);
5959

60-
this.panelObj = this.clonedElement.panel().data('panel');
60+
this.panelObj = this.clonedElement.panel({
61+
customButtons: this.customButtons
62+
}).data('panel');
6163
});
6264
}
6365

‎src/app/controls/draggable/draggable.component.html

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,55 @@
1-
<!--<div class="example" style="height: 300px ">-->
2-
<!-- <div data-role="draggable" style="width: 200px" data-drag-element=".drag-element">-->
3-
<!-- <div class="bg-cyan fg-white p-2 drag-element">Panel title</div>-->
4-
<!-- <div class="border bd-cyan p-2">-->
5-
<!-- Bursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.-->
6-
<!-- </div>-->
7-
<!-- </div>-->
8-
<!--</div>-->
1+
<h1>Draggable</h1>
2+
<a href="https://metroui.org.ua/draggable.html" target="_blank">Draggable in Metro 4 docs</a>
93

10-
<div style="height: 300px" class="border bd-blue">
11-
<div style="width: 200px" m4-draggable=".drag-element">
12-
<div class="bg-cyan fg-white p-2 drag-element">Panel title</div>
13-
<div class="border bd-cyan p-2">
14-
Bursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.
15-
</div>
4+
<app-doc-component header="Basic usage">
5+
<![CDATA[
6+
\i<div style="height: 200px" class="border border-dashed bd-blue">\i
7+
<div \istyle="width: 200px; height: 50px;" class="bg-green" \im4-draggable>Draggable</div>
8+
\i</div>\i
9+
]]>
10+
</app-doc-component>
11+
12+
<div class="remark info ml-2 mr-2">
13+
Make sure to use a container around the draggable element
14+
</div>
15+
16+
<app-doc-component header="Custom drag element">
17+
<![CDATA[
18+
\i<div style="height: 200px" class="border border-dashed bd-blue">\i
19+
<div \istyle="width: 200px" \im4-draggable=".drag-element">\l
20+
\t<div class="\ibg-cyan fg-white p-2 \idrag-element">Panel title</div>\l
21+
\t<div\i class="border bd-cyan p-2"\i>\l
22+
\t\tBursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.\l
23+
\t</div>\l
1624
</div>
25+
\i</div>\i
26+
]]>
27+
</app-doc-component>
28+
29+
<app-doc-component header="Custom drag area">
30+
<![CDATA[
31+
\i<div style="height: 200px">\i
32+
<div \istyle="width: 200px; top: 300px; left: 300px" \im4-draggable=".drag-element" drag-area="body">\l
33+
\t<div class="\ibg-cyan fg-white p-2 \idrag-element">Panel title</div>\l
34+
\t<div\i class="border bd-cyan p-2"\i>\l
35+
\t\tBursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.\l
36+
\t</div>\l
37+
</div>
38+
\i</div>\i
39+
]]>
40+
</app-doc-component>
41+
42+
<div class="remark warning">
43+
When setting the drag area, the element is copied to the area. Therefor changing the drag-area at runtime is not recommended.
1744
</div>
1845

46+
<app-doc-component header="Set position of drag element">
47+
<div lang>
48+
<![CDATA[
49+
\f:(ts)
50+
@ViewChild(DraggableDirective, { static: true }) draggable: DraggableDirective;\n\n
1951

20-
<!--<div data-role="draggable"-->
21-
<!-- data-drag-element=".drag-element" class="w-25">-->
22-
<!-- <div class="bg-cyan fg-white p-2 drag-element">Panel title</div>-->
23-
<!-- <div class="border bd-cyan p-2">-->
24-
<!-- Bursas sunt fidess de peritus verpa...-->
25-
<!-- </div>-->
26-
<!--</div>-->
52+
this.draggable.setPosition({ x: 500, y: 300 });
53+
]]>
54+
</div>
55+
</app-doc-component>

‎src/app/controls/draggable/draggable.component.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import {AfterContentInit, Component, OnInit, ViewChild} from '@angular/core';
2+
import {DraggableDirective} from 'ng-metro4';
23

34
@Component({
45
selector: 'app-draggable',
@@ -7,9 +8,11 @@ import { Component, OnInit } from '@angular/core';
78
})
89
export class DraggableComponent implements OnInit {
910

11+
@ViewChild(DraggableDirective, { static: true }) draggable: DraggableDirective;
12+
1013
constructor() { }
1114

12-
ngOnInit() {
15+
ngOnInit(): void {
1316
}
1417

1518
}

‎src/app/controls/panel/panel.component.html

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,22 @@ <h1>Panel</h1>
3939
]]>
4040
</app-doc-component>
4141

42+
<app-doc-component header="Custom buttons">
43+
<![CDATA[
44+
\i<div style="height: 300px">\i
45+
<m4-panel title="Custom buttons" [custom-buttons]="[{html: '<span class=\'mif-user\'></span>', cls: 'success', onclick: clickEvent }]">\l
46+
\t<h1>Basic panel</h1>\l
47+
</m4-panel>
48+
\i</div>\i
49+
]]>
50+
</app-doc-component>
51+
4252
<app-doc-component header="Draggable">
4353
<![CDATA[
44-
<m4-panel [draggable]="true">\l
54+
\i<div style="height: 300px">\i
55+
<m4-panel title="Test Title" m4-draggable=".panel-title">\l
4556
\t<h1>Basic panel</h1>\l
4657
</m4-panel>
58+
\i</div>\i
4759
]]>
4860
</app-doc-component>

0 commit comments

Comments
 (0)