Skip to content

Commit

Permalink
feat(modal): expose all options
Browse files Browse the repository at this point in the history
  • Loading branch information
fkm-adfinis committed May 8, 2019
1 parent 3b83f0d commit 5877dd4
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 7 deletions.
23 changes: 19 additions & 4 deletions addon/components/uk-modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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")
})
);

Expand Down
57 changes: 54 additions & 3 deletions tests/dummy/app/templates/components/modal.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"}}
Expand Down

0 comments on commit 5877dd4

Please sign in to comment.