Merge pull request #313 from DanChadwick/dialogs-jj-abrams

Push paper-dialog forward. Still WIP.

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
 

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);
   },

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');
+  }
+
+});

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;
+    }
   }
+
 });

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();
     }
   }
 });

app/components/paper-dialog-container.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-dialog-container';

app/templates/components/paper-dialog-container.hbs

@@ -0,0 +1 @@
+{{yield}}

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")
   }}
-  <div class="md-dialog-container" onclick={{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}}
-  </div>
+  {{/paper-dialog-container}}
 {{/ember-wormhole}}

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")}}

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}}

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}}

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}}
+{{/unless}}

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');
     }