mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(dialog)!: remove draggable
PiperOrigin-RevId: 551978266
This commit is contained in:
parent
8b896e0e63
commit
2568d4fbac
@ -32,7 +32,6 @@ const collection =
|
||||
new Knob('modeless', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('footerHidden', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('stacked', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('draggable', {defaultValue: false, ui: boolInput()}),
|
||||
new Knob('icon', {defaultValue: '', ui: textInput()}),
|
||||
new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}),
|
||||
new Knob(
|
||||
@ -40,7 +39,6 @@ const collection =
|
||||
{defaultValue: 'Just a simple dialog.', ui: textInput()}),
|
||||
]);
|
||||
|
||||
collection.addStories(
|
||||
...materialInitsToStoryInits(stories));
|
||||
collection.addStories(...materialInitsToStoryInits(stories));
|
||||
|
||||
setUpDemo(collection, {icons: 'material-symbols'});
|
||||
|
@ -24,7 +24,6 @@ export interface StoryKnobs {
|
||||
modeless: boolean;
|
||||
footerHidden: boolean;
|
||||
stacked: boolean;
|
||||
draggable: boolean;
|
||||
icon: string;
|
||||
headline: string;
|
||||
supportingText: string;
|
||||
@ -43,7 +42,6 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
modeless,
|
||||
footerHidden,
|
||||
stacked,
|
||||
draggable,
|
||||
icon,
|
||||
headline,
|
||||
supportingText
|
||||
@ -55,7 +53,6 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.modeless=${modeless}
|
||||
.footerHidden=${footerHidden}
|
||||
.stacked=${stacked}
|
||||
.draggable=${draggable}
|
||||
.transition=${transition!}
|
||||
>
|
||||
<md-icon slot="headline-prefix">${icon}</md-icon>
|
||||
@ -75,7 +72,6 @@ const alert: MaterialStoryInit<StoryKnobs> = {
|
||||
modeless,
|
||||
footerHidden,
|
||||
stacked,
|
||||
draggable,
|
||||
icon,
|
||||
headline,
|
||||
supportingText
|
||||
@ -87,7 +83,6 @@ const alert: MaterialStoryInit<StoryKnobs> = {
|
||||
.modeless=${modeless}
|
||||
.footerHidden=${footerHidden}
|
||||
.stacked=${stacked}
|
||||
.draggable=${draggable}
|
||||
.transition=${transition!}
|
||||
>
|
||||
<span slot="header">Alert dialog</span>
|
||||
@ -105,7 +100,6 @@ const confirm: MaterialStoryInit<StoryKnobs> = {
|
||||
modeless,
|
||||
footerHidden,
|
||||
stacked,
|
||||
draggable,
|
||||
icon,
|
||||
headline,
|
||||
supportingText
|
||||
@ -117,7 +111,6 @@ const confirm: MaterialStoryInit<StoryKnobs> = {
|
||||
.modeless=${modeless}
|
||||
.footerHidden=${footerHidden}
|
||||
.stacked=${stacked}
|
||||
.draggable=${draggable}
|
||||
.transition=${transition!}
|
||||
>
|
||||
<md-icon slot="headline-prefix">delete_outline</md-icon>
|
||||
@ -146,7 +139,6 @@ const choose: MaterialStoryInit<StoryKnobs> = {
|
||||
modeless,
|
||||
footerHidden,
|
||||
stacked,
|
||||
draggable,
|
||||
icon,
|
||||
headline,
|
||||
supportingText
|
||||
@ -158,7 +150,6 @@ const choose: MaterialStoryInit<StoryKnobs> = {
|
||||
.modeless=${modeless}
|
||||
.footerHidden=${footerHidden}
|
||||
.stacked=${stacked}
|
||||
.draggable=${draggable}
|
||||
.transition=${transition!}
|
||||
>
|
||||
<span slot="header">Choose your favorite pet</span>
|
||||
@ -214,7 +205,6 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
|
||||
modeless,
|
||||
footerHidden,
|
||||
stacked,
|
||||
draggable,
|
||||
icon,
|
||||
headline,
|
||||
supportingText
|
||||
@ -226,7 +216,6 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
|
||||
.modeless=${modeless}
|
||||
.footerHidden=${footerHidden}
|
||||
.stacked=${stacked}
|
||||
.draggable=${draggable}
|
||||
.transition=${transition!}
|
||||
>
|
||||
<span slot="header">
|
||||
@ -259,7 +248,6 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
|
||||
modeless,
|
||||
footerHidden,
|
||||
stacked,
|
||||
draggable,
|
||||
icon,
|
||||
headline,
|
||||
supportingText
|
||||
@ -271,7 +259,6 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
|
||||
.modeless=${modeless}
|
||||
.footerHidden=${footerHidden}
|
||||
.stacked=${stacked}
|
||||
.draggable=${draggable}
|
||||
.transition=${transition!}
|
||||
>
|
||||
<span slot="header">
|
||||
|
@ -22,10 +22,6 @@
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
}
|
||||
|
||||
// Private properties for drag data.
|
||||
--_container-drag-inline-start: initial;
|
||||
--_container-drag-block-start: initial;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@ -87,15 +83,9 @@
|
||||
.container {
|
||||
position: absolute;
|
||||
|
||||
inset-inline-start: var(
|
||||
--_container-drag-inline-start,
|
||||
var(--_container-inset-inline-start)
|
||||
);
|
||||
inset-inline-start: var(--_container-inset-inline-start);
|
||||
inset-inline-end: var(--_container-inset-inline-end);
|
||||
inset-block-start: var(
|
||||
--_container-drag-block-start,
|
||||
var(--_container-inset-block-start)
|
||||
);
|
||||
inset-block-start: var(--_container-inset-block-start);
|
||||
inset-block-end: var(--_container-inset-block-end);
|
||||
|
||||
background-color: var(--_container-color);
|
||||
@ -183,12 +173,6 @@
|
||||
border-block-end-color: var(--_with-divider-divider-color);
|
||||
}
|
||||
|
||||
.dragging {
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
// Transitions for open/closed states
|
||||
.container {
|
||||
will-change: transform, opacity;
|
||||
|
@ -160,11 +160,6 @@ export class Dialog extends LitElement {
|
||||
*/
|
||||
@property({type: Boolean, reflect: true}) modeless = false;
|
||||
|
||||
/**
|
||||
* Set to make the dialog position draggable.
|
||||
*/
|
||||
@property({type: Boolean}) override draggable = false;
|
||||
|
||||
private readonly throttle = createThrottle();
|
||||
|
||||
@query('.dialog', true)
|
||||
@ -178,11 +173,8 @@ export class Dialog extends LitElement {
|
||||
// for scrolling related styling
|
||||
@query(`.content`, true)
|
||||
private readonly contentElement!: HTMLDivElement|null;
|
||||
// used to determine container size for dragging
|
||||
@query(`.container`, true)
|
||||
private readonly containerElement!: HTMLDivElement|null;
|
||||
// used to determine where users can drag from.
|
||||
@query(`.header`, true) private readonly headerElement!: HTMLDivElement|null;
|
||||
|
||||
/**
|
||||
* Private properties that reflect for styling manually in `updated`.
|
||||
@ -202,10 +194,6 @@ export class Dialog extends LitElement {
|
||||
|
||||
private currentAction: string|undefined;
|
||||
|
||||
@state() private dragging = false;
|
||||
private readonly dragMargin = 8;
|
||||
private dragInfo?: [number, number, number, number]|undefined;
|
||||
|
||||
/**
|
||||
* Opens and shows the dialog. This is equivalent to setting the `open`
|
||||
* property to true.
|
||||
@ -266,12 +254,7 @@ export class Dialog extends LitElement {
|
||||
aria-labelledby="header"
|
||||
aria-describedby="content"
|
||||
>
|
||||
<div class="container ${classMap({
|
||||
'dragging': this.dragging
|
||||
})}"
|
||||
@pointermove=${this.handlePointerMove}
|
||||
@pointerup=${this.handleDragEnd}
|
||||
>
|
||||
<div class="container">
|
||||
<md-elevation></md-elevation>
|
||||
<header class="header">
|
||||
<slot name="header">
|
||||
@ -311,10 +294,6 @@ export class Dialog extends LitElement {
|
||||
}
|
||||
|
||||
protected override updated(changed: PropertyValues) {
|
||||
if (changed.get('draggable') && !this.draggable) {
|
||||
this.style.removeProperty('--_container-drag-inline-start');
|
||||
this.style.removeProperty('--_container-drag-block-start');
|
||||
}
|
||||
// Reflect internal state to facilitate styling.
|
||||
this.reflectStateProp(changed, 'opening', this.opening);
|
||||
this.reflectStateProp(changed, 'closing', this.closing);
|
||||
@ -511,45 +490,4 @@ export class Dialog extends LitElement {
|
||||
override blur() {
|
||||
this.getFocusElement()?.blur();
|
||||
}
|
||||
|
||||
private canStartDrag(event: PointerEvent) {
|
||||
if (this.draggable === false || event.defaultPrevented ||
|
||||
!(event.buttons & 1) || !this.headerElement ||
|
||||
!event.composedPath().includes(this.headerElement)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
private handlePointerMove(event: PointerEvent) {
|
||||
if (!this.dragging && !this.canStartDrag(event) || !this.containerElement) {
|
||||
return;
|
||||
}
|
||||
const {top, left, height, width} =
|
||||
this.containerElement.getBoundingClientRect();
|
||||
if (!this.dragging) {
|
||||
this.containerElement.setPointerCapture(event.pointerId);
|
||||
this.dragging = true;
|
||||
const {x, y} = event;
|
||||
this.dragInfo = [x, y, top, left];
|
||||
}
|
||||
const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];
|
||||
const dx = event.x - sx;
|
||||
const dy = event.y - sy;
|
||||
const ml = window.innerWidth - width - this.dragMargin;
|
||||
const mt = window.innerHeight - height - this.dragMargin;
|
||||
const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));
|
||||
const t = Math.max(this.dragMargin, Math.min(mt, dy + st));
|
||||
this.style.setProperty('--_container-drag-inline-start', `${l}px`);
|
||||
this.style.setProperty('--_container-drag-block-start', `${t}px`);
|
||||
}
|
||||
|
||||
private handleDragEnd(event: PointerEvent) {
|
||||
if (!this.dragging) {
|
||||
return;
|
||||
}
|
||||
this.containerElement?.releasePointerCapture(event.pointerId);
|
||||
this.dragging = false;
|
||||
this.dragInfo = undefined;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user