Merge pull request #389 from concordnow/fix_in_place_dialog

Add splattibutes support and fix containerClassNames for rendered in place modals
yapplabs · Feb 23, 2023 · 1c23654 · 1c23654
2 parents ed4ba6d + d71d793
commit 1c23654
Show file tree

Hide file tree

Showing 10 changed files with 267 additions and 52 deletions.
diff --git a/addon/components/in-place-dialog.js b/addon/components/in-place-dialog.js
@@ -5,23 +5,18 @@ import layout from '../templates/components/in-place-dialog';
 @tagName('')
 @templateLayout(layout)
 export default class InPlaceDialog extends Component {
-  containerClass = null; // passed in
-
-  init() {
-    super.init(...arguments);
-
-    this.containerClassNames = [
+  get containerClassNamesString() {
+    const addonClassNamesString = [
       'ember-modal-dialog',
       'ember-modal-dialog-in-place',
       'emd-in-place',
-    ]; // set this in a subclass definition
-  }
+    ].join(' ');
 
-  get containerClassNamesString() {
-    return (
+    const containerClassNamesString =
       (this.containerClassNames?.join && this.containerClassNames?.join(' ')) ||
       this.containerClassNames ||
-      ''
-    );
+      '';
+
+    return `${addonClassNamesString} ${containerClassNamesString}`;
   }
 }
diff --git a/addon/templates/components/basic-dialog.hbs b/addon/templates/components/basic-dialog.hbs
@@ -1,37 +1,52 @@
 <EmberWormhole @to={{this.destinationElementId}}>
   {{#if this.isOverlaySibling}}
-    <div class="{{this.wrapperClassNamesString}} {{this.wrapperClass}}">
+    <div class='{{this.wrapperClassNamesString}} {{this.wrapperClass}}'>
       {{#if this.hasOverlay}}
         <div
           class={{this.overlayClassNamesString}}
           onclick={{action this.onClickOverlay}}
-          tabindex="-1"
+          tabindex='-1'
           data-emd-overlay
         >
         </div>
       {{/if}}
-      <EmberModalDialogPositionedContainer @class={{this.containerClassNamesString}} @targetAttachment={{this.targetAttachment}} @target={{this.legacyTarget}}>
+      <EmberModalDialogPositionedContainer
+        @class={{this.containerClassNamesString}}
+        @targetAttachment={{this.targetAttachment}}
+        @target={{this.legacyTarget}}
+        ...attributes
+      >
         {{yield}}
       </EmberModalDialogPositionedContainer>
     </div>
   {{else}}
-    <div class="{{this.wrapperClassNamesString}} {{this.wrapperClass}}">
+    <div class='{{this.wrapperClassNamesString}} {{this.wrapperClass}}'>
       {{#if this.hasOverlay}}
         <div
           class={{this.overlayClassNamesString}}
           onclick={{action (ignore-children this.onClickOverlay)}}
-          tabindex="-1"
+          tabindex='-1'
           data-emd-overlay
         >
-          <EmberModalDialogPositionedContainer @class={{this.containerClassNamesString}} @targetAttachment={{this.targetAttachment}} @target={{this.legacyTarget}}>
+          <EmberModalDialogPositionedContainer
+            @class={{this.containerClassNamesString}}
+            @targetAttachment={{this.targetAttachment}}
+            @target={{this.legacyTarget}}
+            ...attributes
+          >
             {{yield}}
           </EmberModalDialogPositionedContainer>
         </div>
       {{else}}
-        <EmberModalDialogPositionedContainer @class={{this.containerClassNamesString}} @targetAttachment={{this.targetAttachment}} @target={{this.legacyTarget}}>
+        <EmberModalDialogPositionedContainer
+          @class={{this.containerClassNamesString}}
+          @targetAttachment={{this.targetAttachment}}
+          @target={{this.legacyTarget}}
+          ...attributes
+        >
           {{yield}}
         </EmberModalDialogPositionedContainer>
       {{/if}}
     </div>
   {{/if}}
-</EmberWormhole>
+</EmberWormhole>
diff --git a/addon/templates/components/in-place-dialog.hbs b/addon/templates/components/in-place-dialog.hbs
@@ -1,5 +1,12 @@
 <div
-  class={{concat this.containerClassNamesString " " this.attachmentClass " " this.containerClass}}
+  class={{concat
+    this.containerClassNamesString
+    ' '
+    this.attachmentClass
+    ' '
+    this.containerClass
+  }}
+  ...attributes
 >
   {{yield}}
-</div>
+</div>
diff --git a/addon/templates/components/liquid-dialog.hbs b/addon/templates/components/liquid-dialog.hbs
@@ -1,37 +1,55 @@
 {{#if this.isOverlaySibling}}
-  <LiquidWormhole @stack={{this.stack}} @value={{this.value}} @class={{concat "liquid-dialog-container " this.wrapperClassNamesString " " this.wrapperClass}}>
-    <div class="{{this.wrapperClassNamesString}} {{this.wrapperClass}}">
+  <LiquidWormhole
+    @stack={{this.stack}}
+    @value={{this.value}}
+    @class={{concat
+      'liquid-dialog-container '
+      this.wrapperClassNamesString
+      ' '
+      this.wrapperClass
+    }}
+  >
+    <div class='{{this.wrapperClassNamesString}} {{this.wrapperClass}}'>
       {{#if this.hasOverlay}}
         <div
           class={{this.overlayClassNamesString}}
           onclick={{action this.onClickOverlay}}
-          tabindex="-1"
+          tabindex='-1'
           data-emd-overlay
         >
         </div>
       {{/if}}
-      <div class={{this.containerClassNamesString}}>
+      <div class={{this.containerClassNamesString}} ...attributes>
         {{yield}}
       </div>
     </div>
   </LiquidWormhole>
 {{else}}
-  <LiquidWormhole @stack={{this.stack}} @value={{this.value}} @class={{concat "liquid-dialog-container " this.wrapperClassNamesString " " this.wrapperClass}}>
+  <LiquidWormhole
+    @stack={{this.stack}}
+    @value={{this.value}}
+    @class={{concat
+      'liquid-dialog-container '
+      this.wrapperClassNamesString
+      ' '
+      this.wrapperClass
+    }}
+  >
     {{#if this.hasOverlay}}
       <div
         class={{this.overlayClassNamesString}}
         onclick={{action (ignore-children this.onClickOverlay)}}
-        tabindex="-1"
+        tabindex='-1'
         data-emd-overlay
       >
-        <div class={{this.containerClassNamesString}}>
+        <div class={{this.containerClassNamesString}} ...attributes>
           {{yield}}
         </div>
       </div>
     {{else}}
-      <div class={{this.containerClassNamesString}}>
+      <div class={{this.containerClassNamesString}} ...attributes>
         {{yield}}
       </div>
     {{/if}}
   </LiquidWormhole>
-{{/if}}
+{{/if}}
diff --git a/addon/templates/components/liquid-tether-dialog.hbs b/addon/templates/components/liquid-tether-dialog.hbs
@@ -1,14 +1,27 @@
 {{#if this.hasOverlay}}
-  <LiquidWormhole @stack="modal-overlay" @class="liquid-dialog-container">
+  <LiquidWormhole @stack='modal-overlay' @class='liquid-dialog-container'>
     <div
       class={{this.overlayClassNamesString}}
       onclick={{action this.onClickOverlay}}
-      tabindex="-1"
+      tabindex='-1'
       data-emd-overlay
     >
     </div>
   </LiquidWormhole>
 {{/if}}
-<LiquidTether @class={{this.containerClassNamesString}} @target={{this.tetherTarget}} @attachment={{this.attachment}} @targetAttachment={{this.targetAttachment}} @targetModifier={{this.targetModifier}} @classPrefix={{this.tetherClassPrefix}} @offset={{this.offset}} @targetOffset={{this.targetOffset}} @constraints={{this.constraints}} @stack={{this.stack}} @value={{this.value}}>
+<LiquidTether
+  @class={{this.containerClassNamesString}}
+  @target={{this.tetherTarget}}
+  @attachment={{this.attachment}}
+  @targetAttachment={{this.targetAttachment}}
+  @targetModifier={{this.targetModifier}}
+  @classPrefix={{this.tetherClassPrefix}}
+  @offset={{this.offset}}
+  @targetOffset={{this.targetOffset}}
+  @constraints={{this.constraints}}
+  @stack={{this.stack}}
+  @value={{this.value}}
+  ...attributes
+>
   {{yield}}
-</LiquidTether>
+</LiquidTether>
diff --git a/addon/templates/components/modal-dialog.hbs b/addon/templates/components/modal-dialog.hbs
@@ -24,6 +24,7 @@
   @value={{this.value}}
   @onClickOverlay={{this.onClickOverlayAction}}
   @onClose={{this.onCloseAction}}
+  ...attributes
 >
   {{yield}}
 </this.whichModalDialogComponent>
diff --git a/addon/templates/components/tether-dialog.hbs b/addon/templates/components/tether-dialog.hbs
@@ -3,12 +3,23 @@
     <div
       class={{this.overlayClassNamesString}}
       onclick={{action this.onClickOverlay}}
-      tabindex="-1"
+      tabindex='-1'
       data-emd-overlay
     >
     </div>
   </EmberWormhole>
 {{/if}}
-<EmberTether @class={{this.containerClassNamesString}} @target={{this.tetherTarget}} @attachment={{this.attachment}} @targetAttachment={{this.targetAttachment}} @targetModifier={{this.targetModifier}} @classPrefix={{this.tetherClassPrefix}} @offset={{this.offset}} @targetOffset={{this.targetOffset}} @constraints={{this.constraints}}>
+<EmberTether
+  @class={{this.containerClassNamesString}}
+  @target={{this.tetherTarget}}
+  @attachment={{this.attachment}}
+  @targetAttachment={{this.targetAttachment}}
+  @targetModifier={{this.targetModifier}}
+  @classPrefix={{this.tetherClassPrefix}}
+  @offset={{this.offset}}
+  @targetOffset={{this.targetOffset}}
+  @constraints={{this.constraints}}
+  ...attributes
+>
   {{yield}}
-</EmberTether>
+</EmberTether>