Customizing the drag handler

[Langstra]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When making a dialog draggable it receives a default drag handler.

Expected behavior

Even though we can style it using css, it would be useful in certain situations (and semantically more correct) to have a custom drag handler specified in the Component or template itself.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Wanting the drag handler in a different place.

Having an overflowing/scrolling modal where the drag handler needs to be something fixed in the header of the dialog.

Solution direction

There is a dialogDragHandle on the DialogDraggableDirective, but I do not know how we could use that one. Since it is not accessible from the component or through the ref.

[NetanelBasal]

What about passing a selector or element when opening a dialog?

[Langstra]

That sounds alright to me, however then when opening a dialog there is a separation of concern. The component you pass as the first parameter needs to have the selector or element and you need to specify that element/selector in the component.
Is it possible to add a template reference in the component and define a viewchild or something on it?

@Component({
  selector: 'app-custom-drag-handler-dialog',
  template: `
    <div class="header" #dragHandler>
      <h2>Drag me using the header</h2>
    </div>

    <div class="content">
      <p>Some nice content over here</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomDragHandlerDialogComponent implements OnInit {
  @ViewChild('dragHandler', { static: true }) handle: ElementRef;

  constructor(public ref: DialogRef<DialogData>) {}

  ngOnInit(): void {
    console.log(this.ref);
  }
}

I have tried playing with this a little bit in the repository on my machine, but I had no idea how to get the handle property from the component.

[NetanelBasal]

Maybe we can register it via dialog ref

[Langstra]

Tried playing around with that a little yesterday. In the same way that the resetDrag works. I could not get it to work that easily, because the dragDirective needs initializing. However, I could play around a little with it and then create a PR. Would like feedback and ideas on it if you have time to think it through a little with me.

[NetanelBasal]

The dialogDraggable directive is isolated. Any reason we can't expose it and apply it to any element you want?

[Langstra]

The current dialogDraggable directive needs a reference to the dialog. Currently it gets this from the dialog component, since it is applied onto this directly this is easily done by a template reference like this #dialog on the html.

[NetanelBasal]

The current dialogDraggable directive needs a reference to the dialog

Where? https://github.com/ngneat/dialog/blob/master/projects/ngneat/dialog/src/lib/draggable.directive.ts

[Langstra]

The dialogDragTarget needs to be a reference of string selector to the element you want to drag.

In the dialog component it is specified here. The reference is created on line 29.

https://github.com/ngneat/dialog/blob/master/projects/ngneat/dialog/src/lib/dialog.component.ts#L35