Merge master.

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Ember Paper Changelog
 
+### 0.2.7 (Aug 11, 2015)
+- [#132](https://github.com/miguelcobain/ember-paper/pull/132) Added autocomplete component.
+- [#144](https://github.com/miguelcobain/ember-paper/pull/144) Fixed paper-icon sizes and added new size md-sm (size="sm").
+- [#146](https://github.com/miguelcobain/ember-paper/pull/146) Upgrade to ember 1.13.7 and ember-cli 1.13.8.
+
 ### 0.2.6 (Jul 20, 2015)
 
 - [#135](https://github.com/miguelcobain/ember-paper/pull/135) Fix deprecation bug in linear progress indicator.

addon/components/paper-autocomplete-highlight.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'span',
+  flags: '',
+
+  highlight: Ember.computed('searchText', 'label', 'flags', function() {
+    var unsafeText = Ember.Handlebars.Utils.escapeExpression(this.get('label'));
+    var text = unsafeText;
+    var flags = this.get('flags');
+    var regex = this.getRegExp(this.get('searchText'), flags);
+    var html  = text.replace(regex, '<span class="highlight">$&</span>');
+    return new Ember.Handlebars.SafeString(html);
+  }),
+
+  sanitize(term) {
+    if (!term) {
+      return term;
+    }
+    return term.replace(/[\\\^\$\*\+\?\.\(\)\|\{}\[\]]/g, '\\$&');
+  },
+
+  getRegExp(text, flags) {
+    var str = '';
+    if (flags.indexOf('^') >= 1) {
+      str += '^';
+    }
+    str += text;
+    if (flags.indexOf('$') >= 1) {
+      str += '$';
+    }
+    return new RegExp(this.sanitize(str), flags.replace(/[\$\^]/g, ''));
+  }
+
+});

addon/components/paper-autocomplete-item.js

@@ -0,0 +1,25 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'li',
+  attributeBindings: ['tabindex', 'role'],
+  classNameBindings: ['isSelected:selected'],
+  tabindex: 0,
+  role: 'option',
+
+  label: Ember.computed('item', function() {
+    return this.lookupLabelOfItem(this.get('item'));
+  }),
+
+  isSelected: Ember.computed('selectedIndex', function() {
+    return this.get('selectedIndex') === this.get('index');
+  }),
+
+  lookupLabelOfItem(model) {
+    return this.get('lookupKey') ? Ember.get(model, this.get('lookupKey')) : model;
+  },
+
+  click() {
+    this.sendAction('pick', this.get('item'));
+  }
+});

addon/components/paper-autocomplete-list.js

@@ -0,0 +1,108 @@
+import Ember from 'ember';
+
+//TODO Move to constants?
+var ITEM_HEIGHT = 41,
+  MAX_HEIGHT = 5.5 * ITEM_HEIGHT,
+  MENU_PADDING = 8;
+
+export default Ember.Component.extend({
+  util: Ember.inject.service(),
+
+  tagName: 'ul',
+  classNames: ['md-default-theme', 'md-autocomplete-suggestions', 'md-whiteframe-z1'],
+  attributeNameBindings: ['role'],
+  role: 'presentation',
+  stickToElement: null,
+
+  mouseEnter() {
+    this.sendAction('mouse-enter');
+  },
+
+  mouseLeave() {
+    this.sendAction('mouse-leave');
+  },
+
+  mouseUp() {
+    this.sendAction('mouse-up');
+  },
+
+  //TODO reafactor into a computed property that binds directly to dropdown's `style`
+  positionDropdown() {
+    var hrect  = Ember.$('#' + this.get('wrapToElementId'))[0].getBoundingClientRect(),
+      vrect  = hrect,
+      root   = document.body.getBoundingClientRect(),
+      top    = vrect.bottom - root.top,
+      bot    = root.bottom - vrect.top,
+      left   = hrect.left - root.left,
+      width  = hrect.width,
+      styles = {
+        left: left + 'px',
+        minWidth: width + 'px',
+        maxWidth: Math.max(hrect.right - root.left, root.right - hrect.left) - MENU_PADDING + 'px'
+      },
+      ul = this.$();
+
+    if (top > bot && root.height - hrect.bottom - MENU_PADDING < MAX_HEIGHT) {
+      styles.top = 'auto';
+      styles.bottom = bot + 'px';
+      styles.maxHeight = Math.min(MAX_HEIGHT, hrect.top - root.top - MENU_PADDING) + 'px';
+    } else {
+      styles.top = top + 'px';
+      styles.bottom = 'auto';
+      styles.maxHeight = Math.min(MAX_HEIGHT, root.bottom - hrect.bottom - MENU_PADDING) + 'px';
+    }
+    ul.css(styles);
+    correctHorizontalAlignment();
+
+    /**
+     * Makes sure that the menu doesn't go off of the screen on either side.
+     */
+    function correctHorizontalAlignment () {
+      var dropdown = ul[0].getBoundingClientRect(),
+        styles = {};
+      if (dropdown.right > root.right - MENU_PADDING) {
+        styles.left = (hrect.right - dropdown.width) + 'px';
+      }
+      ul.css(styles);
+    }
+  },
+
+  observeIndex: Ember.observer('selectedIndex', function() {
+    var suggestions = this.get('suggestions');
+    if (!suggestions || !suggestions.objectAt(this.get('selectedIndex'))) {
+      return;
+    }
+
+    var ul = this.$(),
+      li  = ul.find('li:eq('+this.get('selectedIndex')+')')[0],
+      top = li.offsetTop,
+      bot = top + li.offsetHeight,
+      hgt = ul[0].clientHeight;
+    if (top < ul[0].scrollTop) {
+      ul[0].scrollTop = top;
+    } else if (bot > ul[0].scrollTop + hgt) {
+      ul[0].scrollTop = bot - hgt;
+    }
+  }),
+
+  resizeWindowEvent() {
+    this.positionDropdown();
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    //TODO refactor using ember-wormhole?
+    var ul = this.$().detach();
+    Ember.$('body').append(ul);
+    Ember.$(window).on('resize', Ember.run.bind(this, this.resizeWindowEvent));
+    this.get('util').disableScrollAround(this.$());
+    this.positionDropdown();
+  },
+
+  willDestroyElement() {
+    Ember.$(window).off('resize');
+    this.get('util').enableScrolling();
+  }
+
+});