Merge pull request #135 from fkm/feature/modal-expose-options

feat(modal): expose all options
adfinis · May 8, 2019 · 0829b81 · 0829b81
2 parents df4a987 + 5877dd4
commit 0829b81
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 7 deletions.
diff --git a/addon/components/uk-modal.js b/addon/components/uk-modal.js
@@ -7,7 +7,18 @@ import { getOwner } from "@ember/application";
 export default Component.extend({
   layout,
 
-  closable: true,
+  escClose: true,
+  bgClose: true,
+  stack: false,
+  container: true,
+  clsPage: "uk-modal-page",
+  clsPanel: "uk-modal-dialog",
+  selClose: [
+    ".uk-modal-close",
+    ".uk-modal-close-default",
+    ".uk-modal-close-outside",
+    ".uk-modal-close-full"
+  ].join(", "),
 
   init() {
     this._super(...arguments);
@@ -31,9 +42,13 @@ export default Component.extend({
     this.set(
       "modal",
       UIkit.modal(id, {
-        container: false,
-        bgClose: this.get("closable"),
-        escClose: this.get("closable")
+        escClose: this.get("escClose"),
+        bgClose: this.get("bgClose"),
+        stack: this.get("stack"),
+        container: this.get("container"),
+        clsPage: this.get("clsPage"),
+        clsPanel: this.get("clsPanel"),
+        selClose: this.get("selClose")
       })
     );
 

diff --git a/tests/dummy/app/templates/components/modal.hbs b/tests/dummy/app/templates/components/modal.hbs
@@ -3,7 +3,6 @@
 <div class="uk-padding uk-box-shadow-medium uk-margin">
   {{#uk-modal
     visible=visible
-    closable=closable
     on-submit=(action "submit")
   }}
     <h2 class="uk-modal-title">Test</h2>
@@ -48,15 +47,67 @@
               </td>
             </tr>
             <tr>
-              <td><code>closable</code></td>
+              <td><code>escClose</code></td>
               <td><code>Boolean</code></td>
               <td><code>true</code></td>
-              <td>Whether the modal can be closed (only read during initialization)</td>
+              <td>Close the modal when the <em>Esc</em> key is pressed.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>bgClose</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>true</code></td>
+              <td>Close the modal when the background is clicked.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>stack</code></td>
+              <td><code>Boolean</code></td>
+              <td><code>true</code></td>
+              <td>Stack modals, when more than one is open. By default, the previous modal will be hidden.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>container</code></td>
+              <td><code>String</code></td>
+              <td><code>true</code></td>
+              <td>Define a target container via a selector to specify where the modal should be appended in the DOM. Setting it to <code>false</code> will prevent this behavior.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>clsPage</code></td>
+              <td><code>String</code></td>
+              <td><code>"uk-modal-page"</code></td>
+              <td>Class to add to <code>&lt;body&gt;</code> when modal is active.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>clsPanel</code></td>
+              <td><code>String</code></td>
+              <td><code>"uk-modal-dialog"</code></td>
+              <td>Class of the element to be considered the panel of the modal.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td><code>selClose</code></td>
+              <td><code>String</code></td>
+              <td>
+                <code>".uk-modal-close,</code>
+                <code>.uk-modal-close-default,</code>
+                <code>.uk-modal-close-outside,</code>
+                <code>.uk-modal-close-full"</code>
+              </td>
+              <td>CSS selector for all elements that should trigger the closing of the modal.</td>
               <td></td>
             </tr>
           </tbody>
         </table>
       </div>
+
+      <p>
+        <span class="uk-label">Note</span>
+        Most of the settings are only read during initialization and can thus not be changed in the demo.
+      </p>
     {{/content.item}}
     {{#content.item}}
       {{code-snippet name="modal.hbs"}}