diff --git a/CHANGELOG.md b/CHANGELOG.md
index 256df41f9..d2ce19e4e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,8 @@
- [#286](https://github.com/miguelcobain/ember-paper/pull/286) paper-radio no longer has the class `paper-radio`
- [#286](https://github.com/miguelcobain/ember-paper/pull/286) paper-radio now uses `groupValue` instead of `selected`
- [#286](https://github.com/miguelcobain/ember-paper/pull/286) paper-radio now sends the action `onchange` instead of `changed` and it is mandatory (see ddau)
-- [#303](https://github.com/miguelcobain/ember-paper/pull/303) paper-menu template may now specify `dense=true` to display menu items compactly
+- [#303](https://github.com/miguelcobain/ember-paper/pull/303) paper-menu template may now specify `dense=true` to display menu items compactly
+- [#313](https://github.com/miguelcobain/ember-paper/pull/313) paper-backdrop `tap` action renamed `onTap` and required action closure.
### 0.2.11
diff --git a/addon/components/paper-backdrop.js b/addon/components/paper-backdrop.js
index f020297f4..8aad63cdd 100644
--- a/addon/components/paper-backdrop.js
+++ b/addon/components/paper-backdrop.js
@@ -1,18 +1,24 @@
import Ember from 'ember';
import TransitionMixin from 'ember-css-transitions/mixins/transition-mixin';
-const { computed, run } = Ember;
+const { Component, computed, run, String: { htmlSafe } } = Ember;
/* global Hammer */
-export default Ember.Component.extend(TransitionMixin, {
+export default Component.extend(TransitionMixin, {
tagName: 'md-backdrop',
classNames: ['md-default-theme'],
classNameBindings: ['opaque:md-opaque', 'isLockedOpen:md-locked-open'],
+ attributeBindings: ['backdropStyle:style'],
// TransitionMixin:
transitionClass: 'ng',
shouldTransition: computed.bool('opaque'),
+ backdropStyle: computed('fixed', 'translateStyle', function() {
+ let style = this.get('translateStyle');
+ return this.get('fixed') ? htmlSafe(`position:fixed; ${style}`) : style;
+ }),
+
addDestroyedElementClone(parent, index, clone) {
parent.append(clone);
},
diff --git a/addon/components/paper-dialog-container.js b/addon/components/paper-dialog-container.js
new file mode 100644
index 000000000..cd6e4c661
--- /dev/null
+++ b/addon/components/paper-dialog-container.js
@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+ classNames: ['md-dialog-container'],
+
+ click() {
+ this.sendAction('outsideClicked');
+ }
+
+});
diff --git a/addon/components/paper-dialog-inner.js b/addon/components/paper-dialog-inner.js
index c9e0cbc3a..68730fe2f 100644
--- a/addon/components/paper-dialog-inner.js
+++ b/addon/components/paper-dialog-inner.js
@@ -4,20 +4,24 @@ import PaperDialog from './paper-dialog';
const { Component, computed } = Ember;
-export default Component.extend(Translate3dMixin, {
+export default Component.extend(/*Translate3dMixin, TODO */ {
tagName: 'md-dialog',
- classNames: ['md-default-theme'],
+ classNames: ['md-default-theme' , 'md-transition-in' /* TODO */ ],
classNameBindings: ['contentOverflow:md-content-overflow', 'fullscreen:md-dialog-fullscreen'],
- dialogComponent: computed(function() {
- return this.nearestOfType(PaperDialog);
- }),
+ translateFromOrigin: computed.reads('openFrom'),
- translateFromOrigin: computed.reads('dialogComponent.openFrom'),
-
- translateToParent: computed.reads('dialogComponent.closeTo'),
+ translateToParent: computed.reads('closeTo'),
onTranslateDestroy(origin) {
origin.focus();
+ },
+
+ click(ev) {
+ if (this.get('clickOutsideToClose')) {
+ ev.stopPropagation();
+ return false;
+ }
}
+
});
diff --git a/addon/components/paper-dialog-parent.js b/addon/components/paper-dialog-parent.js
deleted file mode 100644
index c82f1a401..000000000
--- a/addon/components/paper-dialog-parent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
-
-export default Component.extend({
- attributeBindings: ['containerStyles:style'],
-
- containerStyles: Ember.computed(function() {
- return new Ember.Handlebars.SafeString('position: relative;');
- }),
-
- actions: {
- onCancel() {
- this.get('dialogIsShowing').sendAction('onCancel');
- }
- }
-});
diff --git a/addon/components/paper-dialog.js b/addon/components/paper-dialog.js
index ae9fe225f..2f5a32924 100644
--- a/addon/components/paper-dialog.js
+++ b/addon/components/paper-dialog.js
@@ -1,5 +1,4 @@
import Ember from 'ember';
-import PaperDialogParent from './paper-dialog-parent';
const { Component, $ } = Ember;
export default Component.extend({
@@ -11,7 +10,7 @@ export default Component.extend({
didInsertElement() {
$(window).on('keyup', (e) => {
- if (27 === e.keyCode) {
+ if (27 === e.keyCode && this.get('onClose')) {
this.get('onClose')();
}
});
@@ -26,10 +25,6 @@ export default Component.extend({
if (this.get('clickOutsideToClose') && this.get('onClose')) {
return this.get('onClose')();
}
- },
-
- dialogClicked(ev) {
- // ev.stopPropagation();
}
}
});
diff --git a/app/components/paper-dialog-container.js b/app/components/paper-dialog-container.js
new file mode 100644
index 000000000..4a81e1348
--- /dev/null
+++ b/app/components/paper-dialog-container.js
@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-dialog-container';
diff --git a/app/components/paper-dialog-parent.js b/app/components/paper-dialog-parent.js
deleted file mode 100644
index 552a4035c..000000000
--- a/app/components/paper-dialog-parent.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-paper/components/paper-dialog-parent';
\ No newline at end of file
diff --git a/app/templates/components/paper-dialog-container.hbs b/app/templates/components/paper-dialog-container.hbs
new file mode 100644
index 000000000..889d9eead
--- /dev/null
+++ b/app/templates/components/paper-dialog-container.hbs
@@ -0,0 +1 @@
+{{yield}}
diff --git a/app/templates/components/paper-dialog-parent.hbs b/app/templates/components/paper-dialog-parent.hbs
deleted file mode 100644
index 04111eb86..000000000
--- a/app/templates/components/paper-dialog-parent.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-{{#if dialogIsShowing}}
- {{#if dialogIsShowing.backdrop}}
- {{#if dialogIsShowing.parent}}
- {{paper-backdrop class="md-dialog-backdrop" opaque=true tap="onCancel"}}
- {{else}}
- {{#ember-wormhole to="paper-wormhole"}}
- {{paper-backdrop class="md-dialog-backdrop" opaque=true tap="onCancel"}}
- {{/ember-wormhole}}
- {{/if}}
- {{/if}}
-{{/if}}
-{{yield}}
diff --git a/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs
index 9e15941ad..aeb35d888 100644
--- a/app/templates/components/paper-dialog.hbs
+++ b/app/templates/components/paper-dialog.hbs
@@ -2,11 +2,19 @@
{{paper-backdrop
locked-open=isLockedOpen
opaque=true
+ fixed=(unless parent true)
class="md-dialog-backdrop"
+ onTap=(action "outsideClicked")
}}
-
- {{#paper-dialog-inner parent=parent openFrom=openFrom closeTo=closeTo}}
+ {{#paper-dialog-container outsideClicked=(action "outsideClicked")}}
+ {{#paper-dialog-inner
+ parent=parent
+ openFrom=openFrom
+ closeTo=closeTo
+ fullscreen=fullscreen
+ clickOutsideToClose=clickOutsideToClose
+ }}
{{yield}}
{{/paper-dialog-inner}}
-
+ {{/paper-dialog-container}}
{{/ember-wormhole}}
diff --git a/app/templates/components/paper-menu-container.hbs b/app/templates/components/paper-menu-container.hbs
index d204c2105..d0c0a02ae 100644
--- a/app/templates/components/paper-menu-container.hbs
+++ b/app/templates/components/paper-menu-container.hbs
@@ -1,2 +1,2 @@
{{yield this}}
-{{paper-backdrop class="md-menu-backdrop" tap="toggleMenu"}}
+{{paper-backdrop class="md-menu-backdrop" onTap=(action "toggleMenu")}}
diff --git a/app/templates/components/paper-menu-content.hbs b/app/templates/components/paper-menu-content.hbs
index e36a689b6..ed848afab 100644
--- a/app/templates/components/paper-menu-content.hbs
+++ b/app/templates/components/paper-menu-content.hbs
@@ -2,5 +2,5 @@
{{yield this}}
{{/paper-menu-content-pane}}
{{#ember-wormhole to="paper-wormhole"}}
- {{paper-backdrop class="md-menu-backdrop" tap="toggleMenu"}}
+ {{paper-backdrop class="md-menu-backdrop" onTap=(action "toggleMenu")}}
{{/ember-wormhole}}
diff --git a/app/templates/components/paper-select-container.hbs b/app/templates/components/paper-select-container.hbs
index 075d81170..d52820f7a 100644
--- a/app/templates/components/paper-select-container.hbs
+++ b/app/templates/components/paper-select-container.hbs
@@ -1,4 +1,4 @@
{{yield this}}
{{#ember-wormhole to="paper-wormhole"}}
- {{paper-backdrop class="md-select-backdrop" tap="toggleMenu"}}
+ {{paper-backdrop class="md-select-backdrop" onTap=(action "toggleMenu")}}
{{/ember-wormhole}}
diff --git a/app/templates/components/paper-sidenav.hbs b/app/templates/components/paper-sidenav.hbs
index 029635493..897d55268 100644
--- a/app/templates/components/paper-sidenav.hbs
+++ b/app/templates/components/paper-sidenav.hbs
@@ -1,6 +1,6 @@
{{yield}}
{{#unless closed}}
{{#ember-wormhole to="paper-wormhole"}}
- {{paper-backdrop locked-open=isLockedOpen opaque=true class="md-sidenav-backdrop" tap="toggleMenu"}}
+ {{paper-backdrop locked-open=isLockedOpen opaque=true class="md-sidenav-backdrop" onTap=(action "toggleMenu")}}
{{/ember-wormhole}}
-{{/unless}}
\ No newline at end of file
+{{/unless}}
diff --git a/tests/dummy/app/controllers/dialog.js b/tests/dummy/app/controllers/dialog.js
index 02cd35ce9..a9b333e57 100644
--- a/tests/dummy/app/controllers/dialog.js
+++ b/tests/dummy/app/controllers/dialog.js
@@ -8,7 +8,8 @@ export default Ember.Controller.extend({
this.set('dialogWithParentOrigin', Ember.$(event.currentTarget));
this.set('showDialogWithParent', true);
},
- closeDialogWithParent() {
+ closeDialogWithParent(result) {
+ this.set('result', result);
this.set('showDialogWithParent', false);
},
@@ -17,10 +18,25 @@ export default Ember.Controller.extend({
this.set('dialogOrigin', Ember.$(event.currentTarget));
this.set('showDialog', true);
},
- closeDialog() {
+ closeDialog(result) {
+ this.set('result', result);
this.set('showDialog', false);
},
+ /* Prompt dialog */
+ dogName: '',
+ openPromptDialog(param, event) {
+ this.set('dialogOrigin', Ember.$(event.currentTarget));
+ this.set('showPromptDialog', true);
+ },
+ closePromptDialog(result, dogName) {
+ if (result === 'ok') {
+ result = `${result} and dog named ${dogName}`;
+ }
+ this.set('result', result);
+ this.set('showPromptDialog', false);
+ },
+
toggleSourceCode() {
this.toggleProperty('showSourceCode');
}
diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs
index 66d95fbd8..307eba75a 100644
--- a/tests/dummy/app/templates/dialog.hbs
+++ b/tests/dummy/app/templates/dialog.hbs
@@ -22,15 +22,16 @@
{{#code-block language="handlebars"}}\{{#if showDialogWithParent}}
\{{#paper-dialog
- onCancel="closeDialogWithParent"
+ onClose=(action "closeDialogWithParent" "cancel")
parent="paper-dialog-demo"
- origin=dialogOrigin as |dialog|}}
+ origin=dialogOrigin
+ clickOutsideToClose=true}}
<form>
\{{#paper-toolbar}}
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
- \{{#paper-button icon-button=true action="closeDialog"}}
+ \{{#paper-button icon-button=true action=(action "closeDialogWithParent" "cancel")}}
\{{paper-icon icon="close"}}
\{{/paper-button}}
</div>
@@ -39,27 +40,27 @@
\{{#paper-dialog-content}}
<div style="max-width:800px;max-height:810px;">
<p>
- This is a dialog rendered into a specific element.
+ This is a dialog rendered into a specific element. Clicking outside the dialog will close it.
</p>
</div>
\{{/paper-dialog-content}}
<div class="md-actions" layout="row">
<span flex></span>
- \{{#paper-button action="closeDialogWithParent"}}Cancel\{{/paper-button}}
- \{{#paper-button action="closeDialogWithParent"}}OK\{{/paper-button}}
+ \{{#paper-button primary=true action=(action "closeDialogWithParent" "cancel")}}Cancel\{{/paper-button}}
+ \{{#paper-button primary=true action=(action "closeDialogWithParent" "ok")}}OK\{{/paper-button}}
</div>
</form>
\{{/paper-dialog}}
\{{/if}}
\{{#if showDialog}}
- \{{#paper-dialog onCancel="closeDialog" origin=dialogOrigin as |dialog|}}
+ \{{#paper-dialog onClose=(action "closeDialog" "cancel") origin=dialogOrigin}}
\{{#paper-toolbar}}
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
- \{{#paper-button icon-button=true action="closeDialog"}}\{{paper-icon icon="close"}}\{{/paper-button}}
+ \{{#paper-button icon-button=true action=(action "closeDialog" "cancel")}}\{{paper-icon icon="close"}}\{{/paper-button}}
</div>
\{{/paper-toolbar}}
@@ -74,8 +75,28 @@
<div class="md-actions" layout="row">
<span flex></span>
- \{{#paper-button action="closeDialog"}}Cancel\{{/paper-button}}
- \{{#paper-button action="closeDialog"}}OK\{{/paper-button}}
+ \{{#paper-button primary=true action=(action "closeDialog" "cancel")}}Cancel\{{/paper-button}}
+ \{{#paper-button primary=true action=(action "closeDialog" "ok")}}OK\{{/paper-button}}
+ </div>
+ \{{/paper-dialog}}
+\{{/if}}
+
+\{{#if showPromptDialog}}
+ \{{#paper-dialog fullscreen=fullscreen onClose=(action "closePromptDialog" "cancel") origin=dialogOrigin}}
+
+ \{{#paper-dialog-content}}
+ <h2 class="md-title">What would you name your dog?</h2>
+ <p>Bowser is a common name.</p>
+ \{{paper-input placeholder="dog name" value=dogName}}
+ <div>
+ \{{#paper-checkbox checked=fullscreen onchange=(action (mut fullscreen))}}Display fullscreen at small window size breakpoints\{{/paper-checkbox}}
+ </div>
+ \{{/paper-dialog-content}}
+
+ <div class="md-actions" layout="row">
+ <span flex></span>
+ \{{#paper-button primary=true action=(action "closePromptDialog" "cancel")}}I'm a cat person\{{/paper-button}}
+ \{{#paper-button primary=true action=(action "closePromptDialog" "ok" dogName)}}Okay!\{{/paper-button}}
</div>
\{{/paper-dialog}}
\{{/if}}
@@ -88,11 +109,16 @@
Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering button.
- {{#paper-button raised=true primary=true action="openDialogWithParent"}}Open dialog with parent{{/paper-button}}
- {{#paper-button raised=true primary=true action="openDialog"}}Open full dialog{{/paper-button}}
+ {{#paper-button raised=true primary=true action="openDialogWithParent"}}Dialog with parent{{/paper-button}}
+ {{#paper-button raised=true primary=true action="openDialog"}}Custom dialog{{/paper-button}}
+ {{#paper-button raised=true primary=true action="openPromptDialog"}}Prompt dialog{{/paper-button}}
-
Advanced Usage
+ {{#if result}}
+
You dismissed the dialog with a result of "{{result}}".
+ {{/if}}
+
+
Usage
@@ -103,6 +129,11 @@
+
+ onClose |
+ action closure |
+ an action to be executed when the dialog is closed, e.g. by pressing escape |
+
parent |
id |
@@ -141,40 +172,40 @@
{{/paper-content}}
{{#if showDialogWithParent}}
- {{#paper-dialog onCancel="closeDialogWithParent" parent="paper-dialog-demo" origin=dialogOrigin as |dialog|}}
+ {{#paper-dialog onClose=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" origin=dialogOrigin clickOutsideToClose=true}}
{{/paper-dialog}}
{{/if}}
{{#if showDialog}}
- {{#paper-dialog onCancel="closeDialog" origin=dialogOrigin as |dialog|}}
+ {{#paper-dialog onClose=(action "closeDialog" "cancel") origin=dialogOrigin}}
{{#paper-toolbar}}
Mango (Fruit)
- {{#paper-button icon-button=true action="closeDialog"}}{{paper-icon icon="close"}}{{/paper-button}}
+ {{#paper-button icon-button=true action=(action "closeDialog" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
{{/paper-toolbar}}
@@ -189,8 +220,28 @@
- {{#paper-button action="closeDialog"}}Cancel{{/paper-button}}
- {{#paper-button action="closeDialog"}}OK{{/paper-button}}
+ {{#paper-button action=(action "closeDialog" "cancel")}}Cancel{{/paper-button}}
+ {{#paper-button action=(action "closeDialog" "ok")}}OK{{/paper-button}}
+
+ {{/paper-dialog}}
+{{/if}}
+
+{{#if showPromptDialog}}
+ {{#paper-dialog fullscreen=fullscreen onClose=(action "closePromptDialog" "cancel") origin=dialogOrigin}}
+
+ {{#paper-dialog-content}}
+ What would you name your dog?
+ Bowser is a common name.
+ {{paper-input placeholder="dog name" value=dogName}}
+
+ {{#paper-checkbox checked=fullscreen onchange=(action (mut fullscreen))}}Display fullscreen at small window size breakpoints{{/paper-checkbox}}
+
+ {{/paper-dialog-content}}
+
+
+
+ {{#paper-button primary=true action=(action "closePromptDialog" "cancel")}}I'm a cat person{{/paper-button}}
+ {{#paper-button primary=true action=(action "closePromptDialog" "ok" dogName)}}Okay!{{/paper-button}}
{{/paper-dialog}}
{{/if}}
diff --git a/tests/integration/components/paper-dialog-container-test.js b/tests/integration/components/paper-dialog-container-test.js
deleted file mode 100644
index 064f5bdbf..000000000
--- a/tests/integration/components/paper-dialog-container-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
-
-moduleForComponent('paper-dialog-parent', 'Integration | Component | paper dialog container', {
- integration: true
-});
-
-test('it renders', function(assert) {
- assert.expect(2);
-
- // Set any properties with this.set('myProperty', 'value');
- // Handle any actions with this.on('myAction', function(val) { ... });
-
- this.render(hbs`{{paper-dialog-parent}}`);
-
- assert.equal(this.$().text().trim(), '');
-
- // Template block usage:
- this.render(hbs`
- {{#paper-dialog-parent}}
- template block text
- {{/paper-dialog-parent}}
- `);
-
- assert.equal(this.$().text().trim(), 'template block text');
-});