Resizing autocomplete suggestion container to take up only required amount of

CHANGELOG.md

@@ -16,7 +16,13 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 - Flex and layout attributes are replaced by classes (see [the documentation](http://miguelcobain.github.io/ember-paper/#/layout/introduction)). `flex=true` on Ember Paper components has also been removed and replaced by classes.
 
 ### master
-- [#772](https://github.com/miguelcobain/ember-paper/pull/772) fix tabs ink-bar in dialogs
+- [68f4832](https://github.com/miguelcobain/ember-paper/commit/68f4832b67a3fd544164b1ace17d50d974b11ad2) add correct overflow class when dialog does not contain images (fixes [#807](https://github.com/miguelcobain/ember-paper/issues/807))
+
+### 1.0.0-beta.3
+- [#802](https://github.com/miguelcobain/ember-paper/pull/802) allow icons to have tooltips.
+- [#772](https://github.com/miguelcobain/ember-paper/pull/772) fix tabs ink-bar in dialogs.
+- [db3b46c](https://github.com/miguelcobain/ember-paper/commit/db3b46cb3f7c6090b1fb5707c841a855fd5a4de5) paper-tooltip is now a tagless component and proxies `class` attributes to the tooltip element class.
+- [81c4acd](https://github.com/miguelcobain/ember-paper/commit/81c4acd4f2658b895adbde5c91f5ceea1865e6d3) Speed dials are now available.
 
 ### 1.0.0-beta.2
 - [8544228](https://github.com/miguelcobain/ember-paper/commit/854422819791dfbda205f5ab437887129f699db1) fix going to tabs next page

README.md

@@ -46,6 +46,8 @@ You can find out more information on the CSP addon page [here](https://github.co
 
 Version 0.2 is a good choice if you need to use `ember-paper` now in your application, and you have tested the components you use and confirmed that they work to your satisfaction. If you encounter bugs, you'll likely need to fix them yourself, as the `ember-paper` team is focused on completing version 1.0. When version 1.0 is released, you will need to adapt to the the API changes as part of your update.
 
+Version 0.2 documentation can be found [here](https://forge512.github.io/ember-paper/).
+
 **1.0** All new development work is focused on the master branch, which will be released as version 1.0.0. This version uses the Angular Material style sheets, which are imported and processed automatically during the build process. This allows `ember-paper` to have excellent fidelity with regard to the Angular version.
 
 The master branch contains significant API changes relative to version 0.2 and earlier. Modern Ember coding style and naming conventions are used. These changes are detailed in the [change log](CHANGELOG.md).

addon/components/paper-dialog-inner.js

@@ -32,21 +32,24 @@ export default Component.extend(Translate3dMixin, {
     }
   },
 
-  imagesLoaded() {
-    let content = this.element.querySelector('md-dialog-content');
-    this.set('contentOverflow', content.scrollHeight > content.clientHeight);
-  },
-
   didInsertElement() {
     this._super(...arguments);
+    this.checkContentOverflow();
     // content overflow might change depending on load of images inside dialog.
     let images = this.$().find('img');
-    images.on(`load.${this.elementId}`, run.bind(this, this.imagesLoaded));
+    images.on(`load.${this.elementId}`, run.bind(this, this.checkContentOverflow));
   },
 
   willDestroyElement() {
     this._super(...arguments);
     let images = this.$().find('img');
     images.off(`load.${this.elementId}`);
+  },
+
+  checkContentOverflow() {
+    let content = this.element.querySelector('md-dialog-content');
+    if (content) {
+      this.set('contentOverflow', content.scrollHeight > content.clientHeight);
+    }
   }
 });

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/components/paper-tooltip.js

@@ -1,9 +1,11 @@
 import Ember from 'ember';
 import layout from '../templates/components/paper-tooltip';
 import $ from 'jquery';
+import getParent from 'ember-paper/utils/get-parent';
 const { Component, computed, testing, run, String: { htmlSafe } } = Ember;
 
 export default Component.extend({
+  tagName: '',
   layout,
 
   position: 'bottom',
@@ -45,7 +47,7 @@ export default Component.extend({
     if (attachTo) {
       return $(attachTo).get(0);
     } else {
-      return this.element.parentNode;
+      return getParent(this);
     }
   }),
 

addon/components/paper-virtual-repeat.js

@@ -22,6 +22,7 @@ const VirtualRepeatComponent = VirtualEachComponent.extend({
   classNameBindings: ['horizontal:md-orient-horizontal'],
   rawVisibleItems: computed.mapBy('visibleItems', 'raw'),
   containerSelector: undefined,
+  originalScrollHeight: 0,
 
   actions: {
     onScroll(e) {
@@ -37,12 +38,24 @@ const VirtualRepeatComponent = VirtualEachComponent.extend({
   size: computed('initialSize', 'items.[]', 'itemHeight', function() {
     let itemSize = this.get('itemHeight');
     let fullSize = this.get('items.length')  * itemSize;
+    let initSize = this.get('initialSize');
+    let originalScrollHeight = this.get('originalScrollHeight');
 
-    if (fullSize <= itemSize) {
-      return itemSize;
+    let minSize = itemSize;
+
+    // no options found. only default option is preloaded
+    if (initSize < originalScrollHeight) {
+      minSize = Math.max(itemSize, initSize);
+    }
+
+    if (fullSize <= minSize) {
+      return minSize;
     }
-    return Math.min(fullSize, this.get('initialSize'));
 
+    if (fullSize) {
+      return Math.min(fullSize, this.get('originalScrollHeight'));
+    }
+    return initSize;
   }),
 
   height: computed('size', 'horizontal', function() {
@@ -122,7 +135,14 @@ const VirtualRepeatComponent = VirtualEachComponent.extend({
 
     run.scheduleOnce('afterRender', this, function() {
       let element = this.$().get(0);
-      let initSize = this.get('horizontal') ? element.clientWidth : element.clientHeight;
+      let elemHeight = element.clientHeight;
+      this.originalScrollHeight = elemHeight;
+      // no options found. only default option is preloaded
+      if (this.$('.md-virtual-repeat-offsetter').get().length > 0
+      && this.$('.md-virtual-repeat-offsetter').get(0).firstElementChild.children.length > 0) {
+        elemHeight = this.$('.md-virtual-repeat-offsetter').get(0).offsetHeight;
+      }
+      let initSize = this.get('horizontal') ? element.clientWidth : elemHeight;
       this.set('initialSize', initSize);
     });
   },

addon/templates/components/paper-icon.hbs

@@ -1 +1,2 @@
-{{-paper-underscore iconClass}}
+{{-paper-underscore iconClass}}
+{{yield}}

addon/templates/components/paper-menu.hbs

@@ -1,4 +1,5 @@
 {{yield (hash
+  dropdown=(readonly publicAPI)
   isOpen=publicAPI.isOpen
   disabled=publicAPI.disabled
   actions=publicAPI.actions

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

addon/templates/components/paper-tooltip.hbs

@@ -1,7 +1,7 @@
 {{#if renderTooltip}}
   {{#ember-wormhole to=destinationId}}
     <div class="md-panel-outer-wrapper md-panel-is-showing" style={{containerStyle}}>
-      {{#paper-tooltip-inner position=position anchorElement=anchorElement hide=hideTooltip}}
+      {{#paper-tooltip-inner class=class position=position anchorElement=anchorElement hide=hideTooltip}}
         {{yield}}
       {{/paper-tooltip-inner}}
     </div>

addon/utils/get-parent.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+const { get, ViewUtils } = Ember;
+
+// taken from https://github.com/kaliber5/ember-bootstrap/blob/master/addon/utils/get-parent.js
+export default function getParent(view) {
+  if (get(view, 'tagName') === '') {
+    // Beware: use of private API! :(
+    if (ViewUtils && ViewUtils.getViewBounds) {
+      return ViewUtils.getViewBounds(view).parentElement;
+    } else {
+      return view._renderNode.contextualElement;
+    }
+  } else {
+    return get(view, 'element').parentNode;
+  }
+}

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'), {