fix(dialog)!: remove draggable

PiperOrigin-RevId: 551978266
material-components · Jul 28, 2023 · 2568d4f · 2568d4f
1 parent 8b896e0
commit 2568d4f
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 97 deletions.
diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts
@@ -32,15 +32,13 @@ 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(
           'supportingText',
           {defaultValue: 'Just a simple dialog.', ui: textInput()}),
     ]);
 
-collection.addStories(
-    ...materialInitsToStoryInits(stories));
+collection.addStories(...materialInitsToStoryInits(stories));
 
 setUpDemo(collection, {icons: 'material-symbols'});
diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts
@@ -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">

diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
@@ -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;

diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts
@@ -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;
-  }
 }