Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: support dragging from a draggable node inside another shadow root #188

Merged
merged 2 commits into from
Sep 8, 2020
Merged

fix: support dragging from a draggable node inside another shadow root #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66ba012
fix: support dragging the overlay from a draggable node inside anothe…
tomivirkki Sep 3, 2020
d6c48cb
Add a private property for a custom drag handle class name
tomivirkki Sep 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/vaadin-dialog-draggable-mixin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
_touchDevice: {
type: Boolean,
value: TOUCH_DEVICE
},

/* TODO: Expose as a public property (check naming) */
__dragHandleClassName: {
type: String
}
};
}
Expand Down Expand Up @@ -53,7 +58,10 @@
const isResizerContainer = e.target === resizerContainer;
const isResizerContainerScrollbar = e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight;
const isContentPart = e.target === this.$.overlay.$.content;
const isDraggable = e.target.classList.contains('draggable');
const isDraggable = e.composedPath().some(node => {
return node.classList && node.classList.contains(this.__dragHandleClassName || 'draggable');
});

if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
!isDraggable && e.preventDefault();
this._originalBounds = this._getOverlayBounds();
Expand Down
1 change: 1 addition & 0 deletions test/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"WCT": false,
"describe": false,
"beforeEach": false,
"before": false,
"fixture": false,
"it": false,
"expect": false,
Expand Down
18 changes: 18 additions & 0 deletions test/vaadin-dialog_draggable-resizable-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
<link rel="import" href="../src/vaadin-dialog.html">
<link rel="import" href="../../vaadin-text-field/vaadin-text-area.html">
<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/utils/html-tag.html">
</head>

<body>
Expand Down Expand Up @@ -59,6 +61,7 @@
<template>
<div>Draggable dialog</div>
<div class="draggable">Draggable area</div>
<internally-draggable></internally-draggable>
<button>OK</button>
</template>
</vaadin-dialog>
Expand Down Expand Up @@ -436,6 +439,14 @@
dispatchMouseEvent(target, 'mouseup', toXY, mouseButton);
}

before(() => {
customElements.define('internally-draggable', class extends Polymer.Element {
static get template() {
return Polymer.html`<div class="draggable">draggable</div>`;
}
});
});

beforeEach(() => {
dialog = fixture('draggable');
container = dialog.$.overlay.$.resizerContainer;
Expand Down Expand Up @@ -466,6 +477,13 @@
expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
});

it('should drag and move dialog if mousedown on element with [class="draggable"] in another shadow root', () => {
drag(dialog.$.overlay.querySelector('internally-draggable').shadowRoot.querySelector('.draggable'));
const draggedBounds = container.getBoundingClientRect();
expect(Math.floor(draggedBounds.top)).to.be.eql(Math.floor(bounds.top + dx));
expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
});

it('should drag and move dialog after resizing', () => {
resize(container.querySelector('.s'), 0, dx);
const bounds = container.getBoundingClientRect();
Expand Down