discourse/app/assets/javascripts/ember-addons/list-view.js.es6

168 lines
4.2 KiB
Plaintext
Raw Normal View History

2015-05-11 13:16:44 -04:00
import Ember from 'ember';
import ListViewHelper from './list-view-helper';
import ListViewMixin from './list-view-mixin';
var get = Ember.get;
/**
The `Ember.ListView` view class renders a
[div](https://developer.mozilla.org/en/HTML/Element/div) HTML element,
with `ember-list-view` class.
The context of each item element within the `Ember.ListView` are populated
from the objects in the `ListView`'s `content` property.
### `content` as an Array of Objects
The simplest version of an `Ember.ListView` takes an array of object as its
`content` property. The object will be used as the `context` each item element
inside the rendered `div`.
Example:
```javascript
App.ContributorsRoute = Ember.Route.extend({
model: function () {
return [
{ name: 'Stefan Penner' },
{ name: 'Alex Navasardyan' },
{ name: 'Ray Cohen'}
];
}
});
```
```handlebars
{{#ember-list items=contributors height=500 rowHeight=50}}
{{name}}
{{/ember-list}}
```
Would result in the following HTML:
```html
<div id="ember181" class="ember-view ember-list-view" style="height:500px;width:500px;position:relative;overflow:scroll;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;">
<div class="ember-list-container">
<div id="ember186" class="ember-view ember-list-item-view" style="transform: translate(0px, 0px)">
Stefan Penner
</div>
<div id="ember187" class="ember-view ember-list-item-view" style="transform: translate(0px, 50px">
Alex Navasardyan
</div>
<div id="ember188" class="ember-view ember-list-item-view" style="transform: translate(0px, 100px)">
Ray Cohen
</div>
</div>
</div>
```
By default `Ember.ListView` provides support for `height`,
`rowHeight`, `width`, `elementWidth`, `scrollTop` parameters.
Note, that `height` and `rowHeight` are required parameters.
```handlebars
{{#ember-list items=this height=500 rowHeight=50}}
{{name}}
{{/ember-list}}
```
If you would like to have multiple columns in your view layout, you can
set `width` and `elementWidth` parameters respectively.
```handlebars
{{#ember-list items=this height=500 rowHeight=50 width=500 elementWidth=80}}
{{name}}
{{/ember-list}}
```
### Extending `Ember.ListView`
Example:
```handlebars
{{view 'list-view' content=content}}
<script type="text/x-handlebars" data-template-name="row_item">
{{name}}
</script>
```
```javascript
App.ListView = Ember.ListView.extend({
height: 500,
width: 500,
elementWidth: 80,
rowHeight: 20,
itemViewClass: Ember.ListItemView.extend({templateName: "row_item"})
});
```
@extends Ember.ContainerView
@class ListView
@namespace Ember
*/
export default Ember.ContainerView.extend(ListViewMixin, {
css: {
position: 'relative',
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch',
'overflow-scrolling': 'touch'
},
applyTransform: ListViewHelper.applyTransform,
_scrollTo: function(scrollTop) {
var element = this.element;
if (element) { element.scrollTop = scrollTop; }
},
didInsertElement: function() {
var that = this;
this._updateScrollableHeight();
this._scroll = function(e) { that.scroll(e); };
Ember.$(this.element).on('scroll', this._scroll);
},
willDestroyElement: function() {
Ember.$(this.element).off('scroll', this._scroll);
},
scroll: function(e) {
this.scrollTo(e.target.scrollTop);
},
scrollTo: function(y) {
this._scrollTo(y);
this._scrollContentTo(y);
},
totalHeightDidChange: Ember.observer(function () {
Ember.run.scheduleOnce('afterRender', this, this._updateScrollableHeight);
}, 'totalHeight'),
_updateScrollableHeight: function () {
var height, state;
// Support old and new Ember versions
state = this._state || this.state;
if (state === 'inDOM') {
// if the list is currently displaying the emptyView, remove the height
if (this._isChildEmptyView()) {
height = '';
} else {
height = get(this, 'totalHeight');
}
this.$('.ember-list-container').css({
height: height
});
}
}
});