added panel draggable demo

added support for custom buttons on panel finisehd draggable
morrisjdev · Oct 30, 2019 · 20ef986 · 20ef986
1 parent 3cc46f8
commit 20ef986
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 592 deletions.
diff --git a/.idea/runConfigurations/Publish_Doc.xml b/.idea/runConfigurations/Publish_Doc.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/projects/ng-metro4/package.json b/projects/ng-metro4/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng-metro4",
   "description": "Angular components for Metro4 UI library in modern ui style.",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "peerDependencies": {
     "@angular/common": "~8.1.0",
     "@angular/core": "~8.1.0",

diff --git a/projects/ng-metro4/src/lib/controls/draggable/draggable.directive.ts b/projects/ng-metro4/src/lib/controls/draggable/draggable.directive.ts
@@ -1,45 +1,69 @@
 import {Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges} from '@angular/core';
+import {asapScheduler} from 'rxjs';
 
 declare var $: any;
 
+export interface DragPosition {
+  x: number;
+  y: number;
+}
+
 @Directive({
   selector: '[m4-draggable]'
 })
 export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
   @Input('m4-draggable') dragElement: string;
   @Input('drag-area') dragArea: string;
 
-  @Output() dragStart = new EventEmitter<{ x: number, y: number }>();
-  @Output() dragStop = new EventEmitter<{ x: number, y: number }>();
-  @Output() dragMove = new EventEmitter<{ x: number, y: number }>();
+  @Output() dragStart = new EventEmitter<DragPosition>();
+  @Output() dragStop = new EventEmitter<DragPosition>();
+  @Output() dragMove = new EventEmitter<DragPosition>();
 
   private draggableData;
 
   constructor(private element: ElementRef, private renderer: Renderer2) {}
 
-
-
   private createElement() {
-    const draggableOptions: any = {
-      onDragStart: (position, element) => {
-        console.log(position, element);
+    asapScheduler.schedule(() => {
+      if (this.draggableData) {
+        if (this.dragArea) {
+          this.draggableData.elem.remove();
+        }
+
+        this.draggableData.destroy();
       }
-    };
 
-    if (this.dragElement) {
-      draggableOptions.dragElement = this.dragElement;
-    }
+      const draggableOptions: any = {
+        onDragStart: (position: DragPosition) => {
+          this.dragStart.emit(position);
+        },
+        onDragStop: (position: DragPosition) => {
+          this.dragStop.emit(position);
+        },
+        onDragMove: (position: DragPosition) => {
+          this.dragMove.emit(position);
+        }
+      };
+
+      if (this.dragElement) {
+        draggableOptions.dragElement = this.dragElement;
+      }
 
-    if (this.dragArea) {
-      draggableOptions.dragArea = this.dragArea;
-    }
+      if (this.dragArea) {
+        draggableOptions.dragArea = this.dragArea;
+      }
 
-    this.draggableData = $(this.element.nativeElement).draggable(draggableOptions).data('draggable');
+      this.draggableData = $(this.element.nativeElement).draggable(draggableOptions).data('draggable');
+    });
+  }
 
-    console.log(this.draggableData);
-    // $(document).hotkey(this.hotkey, () => {
-    //   this.hotkeyClick.emit();
-    // });
+  public setPosition(position: DragPosition) {
+    if (this.draggableData) {
+      $(this.draggableData.elem).css({
+        left: position.x + 'px',
+        top: position.y + 'px'
+      });
+    }
   }
 
   ngOnInit(): void {
@@ -51,6 +75,6 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnDestroy(): void {
-
+    $(this.element.nativeElement).remove();
   }
 }
diff --git a/projects/ng-metro4/src/lib/controls/panel/panel.component.html b/projects/ng-metro4/src/lib/controls/panel/panel.component.html
@@ -5,7 +5,6 @@
      [attr.data-title-icon]="titleIcon"
      [attr.data-collapsible]="collapsible"
      [attr.data-collapsed]="collapsed"
-     [attr.data-draggable]="draggable"
 
      [attr.data-cls-panel]="clsPanel"
      [attr.data-cls-title]="clsTitle"

diff --git a/projects/ng-metro4/src/lib/controls/panel/panel.component.ts b/projects/ng-metro4/src/lib/controls/panel/panel.component.ts
@@ -27,7 +27,7 @@ export class PanelComponent implements OnInit, OnChanges {
   @Input('title-icon') titleIcon: string;
   @Input() collapsible: boolean;
   @Input() collapsed: boolean;
-  @Input() draggable: boolean;
+  @Input('custom-buttons') customButtons: { html: string, cls: string, onclick: string }[] = [];
 
   @Input('cls-panel') clsPanel: string;
   @Input('cls-title') clsTitle: string;
@@ -57,7 +57,9 @@ export class PanelComponent implements OnInit, OnChanges {
       ObjectHelper.show(this.clonedElement);
       originalElement.parent().append(this.clonedElement);
 
-      this.panelObj = this.clonedElement.panel().data('panel');
+      this.panelObj = this.clonedElement.panel({
+        customButtons: this.customButtons
+      }).data('panel');
     });
   }
 

diff --git a/src/app/controls/draggable/draggable.component.html b/src/app/controls/draggable/draggable.component.html
@@ -1,26 +1,55 @@
-<!--<div class="example" style="height: 300px ">-->
-<!--  <div data-role="draggable" style="width: 200px" data-drag-element=".drag-element">-->
-<!--    <div class="bg-cyan fg-white p-2 drag-element">Panel title</div>-->
-<!--    <div class="border bd-cyan p-2">-->
-<!--      Bursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.-->
-<!--    </div>-->
-<!--  </div>-->
-<!--</div>-->
+<h1>Draggable</h1>
+<a href="https://metroui.org.ua/draggable.html" target="_blank">Draggable in Metro 4 docs</a>
 
-<div style="height: 300px" class="border bd-blue">
-  <div style="width: 200px" m4-draggable=".drag-element">
-    <div class="bg-cyan fg-white p-2 drag-element">Panel title</div>
-    <div class="border bd-cyan p-2">
-      Bursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.
-    </div>
+<app-doc-component header="Basic usage">
+  <![CDATA[
+  \i<div style="height: 200px" class="border border-dashed bd-blue">\i
+  <div \istyle="width: 200px; height: 50px;" class="bg-green" \im4-draggable>Draggable</div>
+  \i</div>\i
+  ]]>
+</app-doc-component>
+
+<div class="remark info ml-2 mr-2">
+  Make sure to use a container around the draggable element
+</div>
+
+<app-doc-component header="Custom drag element">
+  <![CDATA[
+  \i<div style="height: 200px" class="border border-dashed bd-blue">\i
+  <div \istyle="width: 200px" \im4-draggable=".drag-element">\l
+    \t<div class="\ibg-cyan fg-white p-2 \idrag-element">Panel title</div>\l
+    \t<div\i class="border bd-cyan p-2"\i>\l
+      \t\tBursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.\l
+    \t</div>\l
   </div>
+  \i</div>\i
+  ]]>
+</app-doc-component>
+
+<app-doc-component header="Custom drag area">
+  <![CDATA[
+  \i<div style="height: 200px">\i
+  <div \istyle="width: 200px; top: 300px; left: 300px" \im4-draggable=".drag-element" drag-area="body">\l
+    \t<div class="\ibg-cyan fg-white p-2 \idrag-element">Panel title</div>\l
+    \t<div\i class="border bd-cyan p-2"\i>\l
+    \t\tBursas sunt fidess de peritus verpa. All parallel therapists handle each other, only unbiased explosion.\l
+    \t</div>\l
+  </div>
+  \i</div>\i
+  ]]>
+</app-doc-component>
+
+<div class="remark warning">
+  When setting the drag area, the element is copied to the area. Therefor changing the drag-area at runtime is not recommended.
 </div>
 
+<app-doc-component header="Set position of drag element">
+  <div lang>
+  <![CDATA[
+  \f:(ts)
+  @ViewChild(DraggableDirective, { static: true }) draggable: DraggableDirective;\n\n
 
-<!--<div data-role="draggable"-->
-<!--     data-drag-element=".drag-element" class="w-25">-->
-<!--  <div class="bg-cyan fg-white p-2 drag-element">Panel title</div>-->
-<!--  <div class="border bd-cyan p-2">-->
-<!--    Bursas sunt fidess de peritus verpa...-->
-<!--  </div>-->
-<!--</div>-->
+  this.draggable.setPosition({ x: 500, y: 300 });
+  ]]>
+  </div>
+</app-doc-component>
diff --git a/src/app/controls/draggable/draggable.component.ts b/src/app/controls/draggable/draggable.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import {AfterContentInit, Component, OnInit, ViewChild} from '@angular/core';
+import {DraggableDirective} from 'ng-metro4';
 
 @Component({
   selector: 'app-draggable',
@@ -7,9 +8,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DraggableComponent implements OnInit {
 
+  @ViewChild(DraggableDirective, { static: true }) draggable: DraggableDirective;
+
   constructor() { }
 
-  ngOnInit() {
+  ngOnInit(): void {
   }
 
 }
diff --git a/src/app/controls/panel/panel.component.html b/src/app/controls/panel/panel.component.html
@@ -39,10 +39,22 @@ <h1>Panel</h1>
   ]]>
 </app-doc-component>
 
+<app-doc-component header="Custom buttons">
+  <![CDATA[
+  \i<div style="height: 300px">\i
+  <m4-panel title="Custom buttons" [custom-buttons]="[{html: '<span class=\'mif-user\'></span>', cls: 'success', onclick: clickEvent }]">\l
+    \t<h1>Basic panel</h1>\l
+  </m4-panel>
+  \i</div>\i
+  ]]>
+</app-doc-component>
+
 <app-doc-component header="Draggable">
   <![CDATA[
-  <m4-panel [draggable]="true">\l
+  \i<div style="height: 300px">\i
+  <m4-panel title="Test Title" m4-draggable=".panel-title">\l
     \t<h1>Basic panel</h1>\l
   </m4-panel>
+  \i</div>\i
   ]]>
 </app-doc-component>