dialog focus, tests and bugfixes

adopted-ember-addons · Mar 25, 2016 · 05608bf · 05608bf
1 parent ef4dedd
commit 05608bf
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 75 deletions.
diff --git a/addon/components/paper-dialog-inner.js b/addon/components/paper-dialog-inner.js
@@ -2,15 +2,25 @@ import Ember from 'ember';
 import Translate3dMixin from '../mixins/translate3d-mixin';
 import PaperDialog from './paper-dialog';
 
-const { Component, computed } = Ember;
+const { Component, computed, $ } = Ember;
 
 export default Component.extend(Translate3dMixin, {
   tagName: 'md-dialog',
   classNames: ['md-default-theme'],
   classNameBindings: ['contentOverflow:md-content-overflow', 'fullscreen:md-dialog-fullscreen'],
 
-  onTranslateDestroy(origin) {
-    origin.focus();
+  onTranslateFromEnd() {
+    if (this.get('focusOnOpen')) {
+      let toFocus = this.$('[autofocus]').last();
+      if (toFocus.length === 0) {
+        toFocus = this.$('md-dialog-actions button').last();
+      }
+      toFocus.focus();
+    }
+  },
+
+  onTranslateToEnd() {
+    $(this.get('origin')).focus();
   },
 
   click(ev) {

diff --git a/addon/components/paper-dialog.js b/addon/components/paper-dialog.js
@@ -1,29 +1,49 @@
 import Ember from 'ember';
-const { Component, computed, $ } = Ember;
+const { Component, computed, $, inject: { service } } = Ember;
 
 export default Component.extend({
   tagName: '',
 
+  escapeToClose: true,
+  focusOnOpen: true,
+
   destination: computed('parent', function() {
     return this.get('parent') ? this.get('parent') : 'paper-wormhole';
   }),
 
+  defaultParent: 'body',
+
+  hashedParent: computed('destination', function() {
+    let parent = this.get('destination');
+    return parent ? `#${parent}` : null;
+  }),
+
+  parentElementSelector: computed.or('hashedParent', 'defaultParent'),
+
+  constants: service(),
+
   didInsertElement() {
-    $(window).on('keyup', (e) => {
-      if (27 === e.keyCode && this.get('onClose')) {
-        this.get('onClose')();
-      }
-    });
+    if (this.get('escapeToClose')) {
+      let parent = this.get('parentElementSelector');
+      $(parent).on(`keydown.${this.elementId}`, (e) => {
+        if (e.keyCode === this.get('constants.KEYCODE.ESCAPE') && this.get('onClose')) {
+          this.get('onClose')();
+        }
+      });
+    }
   },
 
   willDestroyElement() {
-    $(window).off('keyup');
+    if (this.get('escapeToClose')) {
+      let parent = this.get('parentElementSelector');
+      $(parent).off(`keydown.${this.elementId}`);
+    }
   },
 
   actions: {
     outsideClicked() {
       if (this.get('clickOutsideToClose') && this.get('onClose')) {
-        return this.get('onClose')();
+        this.get('onClose')();
       }
     }
   }

diff --git a/addon/mixins/translate3d-mixin.js b/addon/mixins/translate3d-mixin.js
@@ -18,14 +18,6 @@ export default Mixin.create({
   attributeBindings: ['translateStyle:style'],
   classNameBindings: ['transformIn:md-transition-in'],
 
-  defaultParent: 'body',
-
-  parentElement: computed.or('hashedParent', 'defaultParent'),
-  hashedParent: computed('parent', function() {
-    let parent = this.get('parent');
-    return parent ? `#${parent}` : null;
-  }),
-
   fromElement: computed.or('openFrom', 'origin'),
 
   toElement: computed.or('closeTo', 'origin'),
@@ -50,6 +42,14 @@ export default Mixin.create({
     }
   }),
 
+  init() {
+    this._super(...arguments);
+    this.TRANSITIONEND = this.get('constants').get('CSS').TRANSITIONEND;
+  },
+
+  onTranslateFromEnd: K,
+  onTranslateToEnd: K,
+
   didInsertElement() {
     this._super(...arguments);
 
@@ -59,14 +59,17 @@ export default Mixin.create({
       // Wait while CSS takes affect
       // Set the `main` styles and run the transition-in styles
       window.requestAnimationFrame(() => {
-        this.set('transformStyleApply', 'main');
-        this.set('transformIn', true);
+        Ember.run(() => {
+          this.waitTransitionEnd(this.element).then(() => {
+            this.onTranslateFromEnd();
+          });
+          this.set('transformStyleApply', 'main');
+          this.set('transformIn', true);
+        });
       });
     });
   },
 
-  onTranslateDestroy: K,
-
   /**
    * Specific reversal of the request translate animation above...
    *
@@ -92,7 +95,7 @@ export default Mixin.create({
 
         this.waitTransitionEnd(dialogClone).then(() => {
           containerClone.remove();
-          this.onTranslateDestroy(toElement);
+          this.onTranslateToEnd(toElement);
         });
       });
 
@@ -112,7 +115,7 @@ export default Mixin.create({
 
       // Upon timeout or transitionEnd, reject or resolve (respectively) this promise.
       // NOTE: Make sure this transitionEnd didn't bubble up from a child
-      element.on(this.get('constants').get('CSS').TRANSITIONEND, function(ev) {
+      $(element).on(this.TRANSITIONEND, function(ev) {
         if (ev) {
           resolve();
         }

diff --git a/app/templates/components/paper-dialog-container.hbs b/app/templates/components/paper-dialog-container.hbs
diff --git a/app/templates/components/paper-dialog-content.hbs b/app/templates/components/paper-dialog-content.hbs
diff --git a/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs
@@ -8,12 +8,13 @@
   }}
   {{#paper-dialog-container outsideClicked=(action "outsideClicked")}}
     {{#paper-dialog-inner
-      parent=parent
+      parentElement=parentElementSelector
       origin=origin
       openFrom=openFrom
       closeTo=closeTo
       fullscreen=fullscreen
       clickOutsideToClose=clickOutsideToClose
+      focusOnOpen=focusOnOpen
     }}
       {{yield}}
     {{/paper-dialog-inner}}

diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs
@@ -45,11 +45,11 @@
         &lt;/div&gt;
       \{{/paper-dialog-content}}
 
-      &lt;div class="md-actions" layout="row"&gt;
+      \{{#paper-dialog-actions class="layout-row"}}
         &lt;span flex&gt;&lt;/span&gt;
         \{{#paper-button primary=true action=(action "closeDialogWithParent" "cancel")}}Cancel\{{/paper-button}}
         \{{#paper-button primary=true action=(action "closeDialogWithParent" "ok")}}OK\{{/paper-button}}
-      &lt;/div&gt;
+      \{{/paper-dialog-actions}}
     &lt;/form&gt;
   \{{/paper-dialog}}
 \{{/if}}
@@ -73,11 +73,11 @@
       &lt;/div&gt;
     \{{/paper-dialog-content}}
 
-    &lt;div class="md-actions" layout="row"&gt;
+    \{{#paper-dialog-actions class="layout-row"}}
       &lt;span flex&gt;&lt;/span&gt;
       \{{#paper-button primary=true action=(action "closeDialog" "cancel")}}Cancel\{{/paper-button}}
       \{{#paper-button primary=true action=(action "closeDialog" "ok")}}OK\{{/paper-button}}
-    &lt;/div&gt;
+    \{{/paper-dialog-actions}}
   \{{/paper-dialog}}
 \{{/if}}
 
@@ -93,11 +93,11 @@
       &lt;/div&gt;
     \{{/paper-dialog-content}}
 
-    &lt;div class="md-actions" layout="row"&gt;
+    \{{#paper-dialog-actions class="layout-row"}}
       &lt;span flex&gt;&lt;/span&gt;
       \{{#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}}
-    &lt;/div&gt;
+    \{{/paper-dialog-actions}}
   \{{/paper-dialog}}
 \{{/if}}
         {{/code-block}}
@@ -190,11 +190,11 @@
         </div>
       {{/paper-dialog-content}}
 
-      <div class="md-actions" layout="row">
+      {{#paper-dialog-actions class="layout-row"}}
         <span flex></span>
         {{#paper-button action=(action "closeDialogWithParent" "cancel")}}Cancel{{/paper-button}}
         {{#paper-button action=(action "closeDialogWithParent" "ok")}}OK{{/paper-button}}
-      </div>
+      {{/paper-dialog-actions}}
     </form>
   {{/paper-dialog}}
 {{/if}}
@@ -218,11 +218,11 @@
       </div>
     {{/paper-dialog-content}}
 
-    <div class="md-actions" layout="row">
+    {{#paper-dialog-actions class="layout-row"}}
       <span flex></span>
       {{#paper-button action=(action "closeDialog" "cancel")}}Cancel{{/paper-button}}
       {{#paper-button action=(action "closeDialog" "ok")}}OK{{/paper-button}}
-    </div>
+    {{/paper-dialog-actions}}
   {{/paper-dialog}}
 {{/if}}
 
@@ -232,7 +232,7 @@
     {{#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}}
+      {{paper-input placeholder="dog name" autofocus=true value=dogName}}
       <div>
         {{#paper-checkbox checked=fullscreen onchange=(action (mut fullscreen))}}Display fullscreen at small window size breakpoints{{/paper-checkbox}}
       </div>