add new paper-speed-dial

addon/components/paper-ink-bar.js

@@ -1,11 +1,8 @@
 import Ember from 'ember';
-import layout from '../templates/components/paper-nav-ink-bar';
 
 const { computed, Component, String: { htmlSafe } } = Ember;
 
 export default Component.extend({
-  layout,
-
   tagName: 'md-ink-bar',
 
   attributeBindings: ['style'],

addon/components/paper-speed-dial-actions-action.js

@@ -0,0 +1,90 @@
+import Ember from 'ember';
+const { Component, computed, String: { htmlSafe } } = Ember;
+
+function getElementIndex(node) {
+  let index = 0;
+  while ((node = node.previousElementSibling)) {
+    index++;
+  }
+
+  return index;
+}
+
+export default Component.extend({
+  classNames: ['md-fab-action-item'],
+  attributeBindings: ['style'],
+
+  style: computed('elementDidRender', 'speedDial.animation', 'speedDial.open', 'speedDial.direction', function() {
+    if (!this.get('elementDidRender')) {
+      return;
+    }
+
+    let animation = this.get('speedDial.animation');
+    let open = this.get('speedDial.open');
+    if (animation === 'fling') {
+      if (!open) {
+        return this.flingClosed();
+      }
+    } else if (animation === 'scale') {
+      return this.scaleClosed();
+    }
+  }),
+
+  didRender() {
+    this._super(...arguments);
+    this.set('elementDidRender', true);
+  },
+
+  scaleClosed() {
+    let items = this.get('speedDial.element').querySelectorAll('.md-fab-action-item');
+    let open = this.get('speedDial.open');
+    let index = getElementIndex(this.element);
+    let delay = 65;
+    let offsetDelay = index * delay;
+    let startZIndex = 0;
+
+    let opacity = open ? 1 : 0;
+    let transform = open ? 'scale(1)' : 'scale(0)';
+    let transitionDelay = `${open ? offsetDelay : items.length - offsetDelay}ms`;
+
+    // Make the items closest to the trigger have the highest z-index
+    let zIndex = (items.length - index) + startZIndex;
+
+    return htmlSafe(`opacity: ${opacity}; transform: ${transform}; transition-delay: ${transitionDelay}; z-index: ${zIndex};`);
+  },
+
+  flingClosed() {
+    let triggerElement = this.get('speedDial.element').querySelector('md-fab-trigger');
+    let direction = this.get('speedDial.direction');
+    let index = getElementIndex(this.element);
+
+    // Make sure to account for differences in the dimensions of the trigger verses the items
+    // so that we can properly center everything; this helps hide the el's shadows behind
+    // the trigger.
+    let triggerItemHeightOffset = (triggerElement.clientHeight - this.element.clientHeight) / 2;
+    let triggerItemWidthOffset = (triggerElement.clientWidth - this.element.clientWidth) / 2;
+
+    let newPosition, axis;
+
+    switch (direction) {
+      case 'up':
+        newPosition = (this.element.scrollHeight * (index + 1) + triggerItemHeightOffset);
+        axis = 'Y';
+        break;
+      case 'down':
+        newPosition = -(this.element.scrollHeight * (index + 1) + triggerItemHeightOffset);
+        axis = 'Y';
+        break;
+      case 'left':
+        newPosition = (this.element.scrollWidth * (index + 1) + triggerItemWidthOffset);
+        axis = 'X';
+        break;
+      case 'right':
+        newPosition = -(this.element.scrollWidth * (index + 1) + triggerItemWidthOffset);
+        axis = 'X';
+        break;
+    }
+
+    return htmlSafe(`transform: translate${axis}(${newPosition}px)`);
+  }
+});

addon/components/paper-speed-dial-actions.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import layout from '../templates/components/paper-speed-dial-actions';
+const { Component } = Ember;
+
+export default Component.extend({
+  layout,
+  tagName: 'md-fab-actions'
+});

addon/components/paper-speed-dial-trigger.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+const { Component } = Ember;
+
+export default Component.extend({
+  tagName: 'md-fab-trigger',
+
+  click() {
+    this.get('speedDial').toggle();
+  },
+
+  focusOut() {
+    this.get('speedDial').close();
+  }
+});

addon/components/paper-speed-dial.js

@@ -0,0 +1,63 @@
+import Ember from 'ember';
+import layout from '../templates/components/paper-speed-dial';
+const { Component, computed, run } = Ember;
+
+export default Component.extend({
+  layout,
+  tagName: 'md-fab-speed-dial',
+
+  classNameBindings: [
+    'directionClass', 'open:md-is-open', 'animationClass',
+    'shouldHideActions:md-animations-waiting', 'hoverFull:md-hover-full'
+  ],
+
+  open: false,
+
+  animation: 'fling',
+  animationClass: computed('animation', function() {
+    return `md-${this.get('animation')}`;
+  }),
+
+  direction: 'down',
+  directionClass: computed('direction', function() {
+    return `md-${this.get('direction')}`;
+  }),
+
+  shouldHideActions: computed('animation', 'elementDidRender', function() {
+    return this.get('animation') === 'fling' && !this.get('elementDidRender');
+  }),
+
+  didRender() {
+    this._super(...arguments);
+    run.next(() => {
+      if (!this.isDestroyed && !this.isDestroying) {
+        this.set('elementDidRender', true);
+      }
+    });
+  },
+
+  mouseEnter() {
+    this.sendAction('onMouseEnter');
+  },
+
+  mouseLeave() {
+    this.sendAction('onMouseLeave');
+  },
+
+  toggle() {
+    this.changeOpenValue(!this.get('open'));
+  },
+
+  close() {
+    this.changeOpenValue(false);
+  },
+
+  changeOpenValue(value) {
+    // support non DDAU scenario
+    if (this.get('onToggle')) {
+      this.sendAction('onToggle', value);
+    } else {
+      this.set('open', value);
+    }
+  }
+});

addon/templates/components/paper-speed-dial-actions.hbs

@@ -0,0 +1,3 @@
+{{yield (hash
+  action=(component "paper-speed-dial-actions-action" speedDial=speedDial)
+)}}

addon/templates/components/paper-speed-dial.hbs

@@ -0,0 +1,4 @@
+{{yield (hash
+  trigger=(component "paper-speed-dial-trigger" speedDial=this)
+  actions=(component "paper-speed-dial-actions" speedDial=this)
+)}}

app/components/paper-speed-dial-actions-action.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-speed-dial-actions-action';

app/components/paper-speed-dial-actions.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-speed-dial-actions';

app/components/paper-speed-dial-trigger.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-speed-dial-trigger';

app/components/paper-speed-dial.js

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

app/styles/ember-paper.scss

@@ -154,5 +154,7 @@
 @import './angular-material/components/tabs/tabs';
 @import './angular-material/components/tabs/tabs-theme';
 
+@import './angular-material/components/fabSpeedDial/fabSpeedDial';
+
 // some overrides that are needed for ember-paper (avoid if possible)
 @import './overrides/paper-autocomplete';

index.js

@@ -181,7 +181,9 @@ module.exports = {
       'components/toast/toast-theme.scss',
 
       'components/tabs/tabs.scss',
-      'components/tabs/tabs-theme.scss'
+      'components/tabs/tabs-theme.scss',
+
+      'components/fabSpeedDial/fabSpeedDial.scss'
     ];
 
     var angularScssFiles = new Funnel(this.pathBase('angular-material-source'), {

package.json

@@ -44,9 +44,10 @@
     "ember-export-application-global": "^2.0.0",
     "ember-href-to": "^1.13.0",
     "ember-load-initializers": "^1.0.0",
+    "ember-native-dom-helpers": "^0.5.4",
     "ember-resolver": "^4.3.0",
     "ember-router-service-polyfill": "^1.0.1",
-    "ember-source": "~2.14.0",
+    "ember-source": "~2.15.0",
     "ember-transition-helper": "0.0.6",
     "eslint-plugin-ember-suave": "^1.0.0",
     "liquid-fire": "0.27.3",

tests/dummy/app/controllers/demo/speed-dial.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+const { Controller } = Ember;
+
+export default Controller.extend({
+  animation: 'fling',
+  direction: 'down',
+
+  actions: {
+    toggle(propName) {
+      this.toggleProperty(propName);
+    },
+
+    dummy() {
+
+    }
+  }
+});

tests/dummy/app/router.js

@@ -38,6 +38,7 @@ Router.map(function() {
     this.route('select');
     this.route('sidenav');
     this.route('slider');
+    this.route('speed-dial');
     this.route('switch');
     this.route('toast');
     this.route('toolbar');

tests/dummy/app/templates/application.hbs

@@ -35,6 +35,7 @@
             {{#submenu-item active=(is-active "demo.select" currentRouteName) href=(href-to "demo.select")}}Select{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.sidenav" currentRouteName) href=(href-to "demo.sidenav")}}Sidenav{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.slider" currentRouteName) href=(href-to "demo.slider")}}Slider{{/submenu-item}}
+            {{#submenu-item active=(is-active "demo.speed-dial" currentRouteName) href=(href-to "demo.speed-dial")}}Speed Dial{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.switch" currentRouteName) href=(href-to "demo.switch")}}Switch{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.tabs.index" currentRouteName) href=(href-to "demo.tabs")}}Tabs{{/submenu-item}}
             {{#submenu-item active=(is-active "demo.toast" currentRouteName) href=(href-to "demo.toast")}}Toast{{/submenu-item}}