Feature: Autocomplete

[peec]

Adds Autocomplete feature to ember-paper as of:

• https://material.angularjs.org/latest/#/demo/material.components.autocomplete

This is a rewrite of the angular autocomplete but with heavy usage of ember principles, which means cleaner code and a lot nicer code base ( i think ).

Current task list:

• Implement Progress Linear Component in separate pull request
• Basic Usage [ 100% done ]
• Custom Template [ 100% done ]
• Floating Label [ 100% done ]
• Feature: (ajax) Implement possibility to use a DS.store.filter for ajax requests ( currently only supports Ember.Array() statically array of data. ).
• Documentation
• Highlight support ( ref. md-highlight ).
• Refactoring / Bug fixing
  • Wait for progress-linear to be merged in ( Separate pull request ). When done, uncommet the progress component inside paper-autocomplete.hbs and update this PR. Progress bar will then show for promise sources that takes time to load from the autocomplete.
  • More documentation on the available options for the paper-autocomplete component.
  • Bug: clear button (X) does not align because paper-button has some class attributes that should not be set when using the autocomplete. The class that should not be there is "md-button". Might need to extend from paper-button component and remove the specific classes or make md-button configurable by a flag (?). Edit: fixed with flag in paper-button.
  • Sometimes clicking away from autocomplete does not close the suggestion pane. Figure out why.

[miguelcobain]

@peec Thanks for the initiative!

Looks like we have a dependency on the progress-linear component, right?

Suggestion:

• add it to your task list
• implement progress linear/circular first, in a separate PR/branch? ember-material-design has them here.

@mike1234 and I talked a bit, and we both agreed in merging both projects. So this means good news!

[peec]

Looks like we have a dependency on the progress-linear component, right?

Yep, you are correct, the autocomplete component uses progress linear for e.g. ajax requests in autocomplete to show loading of items

Suggestion:

add it to your task list
implement progress linear/circular first, in a separate PR/branch? ember-material-design has them here.

I will submit a separate branch based on ember-material-design's progress component

@mike1234 and I talked a bit, and we both agreed in merging both projects. So this means good news!

This is very good news! Glad you figured this one out! +1

[peec]

@miguelcobain Autocomplete is now done in terms of functionality based on angular's. I dumped a demo on http://jensb.home.pkj.no/paper-autocomplete/index.html#/autocomplete . The "Promise of data (Ember data)" section loading doesn't work because the component is commented until #134 is merged

[peec]

@miguelcobain I think I am quite happy with the autocomplete feature as it stands right now. You may take a look at this PR when you have time. The components have tests, and are all decoupled as much as possible which makes it really flexible for further enhancements or features if we wish so.

New components

The PR consist of these new compoenets:

• paper-autocomplete ( The main component )
• paper-autocomplete-list ( Logic for the list menu that appears if a user types something, also resposible to make the list responsive and stay in the correct position ).
• paper-autocomplete-item ( Logic for a single item in the list )
• paper-autocomplete-highlight ( Highlight component that can highlight the search text given per item, just like angular material has it.)

Dependencies

Furthermore, the paper-autocomplete component also take use of these components behind the scenes:

• Embers "input" component
• paper-input (floating input)
• paper-button: to clear selection of the input
• paper-icon ( inside paper-button ).
• paper-progress-linear

New service: util

There is also a new service (util) that is directly converted from angular material. We use two methods in the util service: disableScrollAround and enableScrolling. These prevents the user to mistakenly scroll when the user has suggestions opened. This is very nice for e.g. touch screens where the user can not mistakenly scroll away from the suggestion list.

Documentation

I wrote the documentation on the components page, there are plenty of examples and a table explaining all the possible attributes.

[peec]

@miguelcobain How is it going on the merge ?

[miguelcobain]

@peec Not really sure why github didn't close this. Your commits are there.