discourse/vendor/assets/javascripts/list-view.js

1828 lines
53 KiB
JavaScript

// ==========================================================================
// Project: Ember ListView
// Copyright: ©2012-2013 Erik Bryn, Yapp Inc., and contributors.
// License: Licensed under MIT license
// Version: 0.0.5
// ==========================================================================
(function(global){
var define, requireModule, require, requirejs;
(function() {
var _isArray;
if (!Array.isArray) {
_isArray = function (x) {
return Object.prototype.toString.call(x) === "[object Array]";
};
} else {
_isArray = Array.isArray;
}
var registry = {}, seen = {}, state = {};
var FAILED = false;
define = function(name, deps, callback) {
if (!_isArray(deps)) {
callback = deps;
deps = [];
}
registry[name] = {
deps: deps,
callback: callback
};
};
function reify(deps, name, seen) {
var length = deps.length;
var reified = new Array(length);
var dep;
var exports;
for (var i = 0, l = length; i < l; i++) {
dep = deps[i];
if (dep === 'exports') {
exports = reified[i] = seen;
} else {
reified[i] = require(resolve(dep, name));
}
}
return {
deps: reified,
exports: exports
};
}
requirejs = require = requireModule = function(name) {
if (state[name] !== FAILED &&
seen.hasOwnProperty(name)) {
return seen[name];
}
if (!registry[name]) {
throw new Error('Could not find module ' + name);
}
var mod = registry[name];
var reified;
var module;
var loaded = false;
seen[name] = { }; // placeholder for run-time cycles
try {
reified = reify(mod.deps, name, seen[name]);
module = mod.callback.apply(this, reified.deps);
loaded = true;
} finally {
if (!loaded) {
state[name] = FAILED;
}
}
return reified.exports ? seen[name] : (seen[name] = module);
};
function resolve(child, name) {
if (child.charAt(0) !== '.') { return child; }
var parts = child.split('/');
var nameParts = name.split('/');
var parentBase;
if (nameParts.length === 1) {
parentBase = nameParts;
} else {
parentBase = nameParts.slice(0, -1);
}
for (var i = 0, l = parts.length; i < l; i++) {
var part = parts[i];
if (part === '..') { parentBase.pop(); }
else if (part === '.') { continue; }
else { parentBase.push(part); }
}
return parentBase.join('/');
}
requirejs.entries = requirejs._eak_seen = registry;
requirejs.clear = function(){
requirejs.entries = requirejs._eak_seen = registry = {};
seen = state = {};
};
})();
define("list-view/helper",
["exports"],
function(__exports__) {
"use strict";
__exports__["default"] = function emberList(options) {
var hash = options.hash;
var types = options.hashTypes;
hash.content = hash.items;
delete hash.items;
types.content = types.items;
delete types.items;
if (!hash.content) {
hash.content = "this";
types.content = "ID";
}
for (var prop in hash) {
if (/-/.test(prop)) {
var camelized = Ember.String.camelize(prop);
hash[camelized] = hash[prop];
types[camelized] = types[prop];
delete hash[prop];
delete types[prop];
}
}
return Ember.Handlebars.helpers.collection.call(this, 'Ember.ListView', options);
};
});
define("list-view/list_item_view",
["list-view/list_item_view_mixin","exports"],
function(__dependency1__, __exports__) {
"use strict";
// jshint validthis: true
var ListItemViewMixin = __dependency1__["default"];
var get = Ember.get, set = Ember.set;
/**
The `Ember.ListItemView` view class renders a
[div](https://developer.mozilla.org/en/HTML/Element/div) HTML element
with `ember-list-item-view` class. It allows you to specify a custom item
handlebars template for `Ember.ListView`.
Example:
```handlebars
<script type="text/x-handlebars" data-template-name="row_item">
{{name}}
</script>
```
```javascript
App.ListView = Ember.ListView.extend({
height: 500,
rowHeight: 20,
itemViewClass: Ember.ListItemView.extend({templateName: "row_item"})
});
```
@extends Ember.View
@class ListItemView
@namespace Ember
*/
__exports__["default"] = Ember.View.extend(ListItemViewMixin, {
updateContext: function(newContext){
var context = get(this, 'context');
Ember.instrument('view.updateContext.render', this, function() {
if (context !== newContext) {
set(this, 'context', newContext);
if (newContext && newContext.isController) {
set(this, 'controller', newContext);
}
}
}, this);
},
rerender: function () {
// todo: work around for tests. investigate a real fix.
if(get(this, 'isDestroying') || get(this, 'isDestroyed')) {
return;
}
return this._super.apply(this, arguments);
},
_contextDidChange: Ember.observer(function () {
Ember.run.once(this, this.rerender);
}, 'context', 'controller')
});
});
define("list-view/list_item_view_mixin",
["exports"],
function(__exports__) {
"use strict";
// jshint validthis: true
var get = Ember.get;
function samePosition(a, b) {
return a && b && a.x === b.x && a.y === b.y;
}
function positionElement() {
var element, position, _position;
Ember.instrument('view.updateContext.positionElement', this, function() {
element = get(this, 'element');
position = this.position;
_position = this._position;
if (!position || !element) {
return;
}
// // TODO: avoid needing this by avoiding unnecessary
// // calls to this method in the first place
if (samePosition(position, _position)) {
return;
}
Ember.run.schedule('render', this, this._parentView.applyTransform, this, position.x, position.y);
this._position = position;
}, this);
}
var TransformMixin = Ember.Mixin.create({
style: '',
attributeBindings: ['style'],
});
__exports__.TransformMixin = TransformMixin;
__exports__["default"] = Ember.Mixin.create(TransformMixin, {
_position: null,
classNames: ['ember-list-item-view'],
_positionElement: positionElement,
init: function(){
this._super();
this.one('didInsertElement', positionElement);
},
updatePosition: function(position) {
this.position = position;
this._positionElement();
}
});
});
define("list-view/list_view",
["list-view/list_view_helper","list-view/list_view_mixin","exports"],
function(__dependency1__, __dependency2__, __exports__) {
"use strict";
var ListViewHelper = __dependency1__["default"];
var ListViewMixin = __dependency2__["default"];
var get = Ember.get, set = Ember.set;
/**
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 `Element.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="-webkit-transform: translate3d(0px, 0px, 0);">
<script id="metamorph-0-start" type="text/x-placeholder"></script>Stefan Penner<script id="metamorph-0-end" type="text/x-placeholder"></script>
</div>
<div id="ember187" class="ember-view ember-list-item-view" style="-webkit-transform: translate3d(0px, 50px, 0);">
<script id="metamorph-1-start" type="text/x-placeholder"></script>Alex Navasardyan<script id="metamorph-1-end" type="text/x-placeholder"></script>
</div>
<div id="ember188" class="ember-view ember-list-item-view" style="-webkit-transform: translate3d(0px, 100px, 0);">
<script id="metamorph-2-start" type="text/x-placeholder"></script>Rey Cohen<script id="metamorph-2-end" type="text/x-placeholder"></script>
</div>
<div id="ember189" class="ember-view ember-list-scrolling-view" style="height: 150px"></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 App.ListView contentBinding="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
*/
__exports__["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 = get(this, 'element');
if (element) { element.scrollTop = scrollTop; }
},
didInsertElement: function() {
var that = this;
var element = get(this, 'element');
this._updateScrollableHeight();
this._scroll = function(e) { that.scroll(e); };
Ember.$(element).on('scroll', this._scroll);
},
willDestroyElement: function() {
var element;
element = get(this, 'element');
Ember.$(element).off('scroll', this._scroll);
},
scroll: function(e) {
this.scrollTo(e.target.scrollTop);
},
scrollTo: function(y){
var element = get(this, 'element');
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
});
}
}
});
});
define("list-view/list_view_helper",
["exports"],
function(__exports__) {
"use strict";
// TODO - remove this!
var el = document.createElement('div'), style = el.style;
var set = Ember.set;
function testProp (prop) {
var uppercaseProp = prop.charAt(0).toUpperCase() + prop.slice(1);
var dic = {
webkit: '-webkit-' + prop,
moz: '-moz-' + prop,
ms: 'ms' + uppercaseProp
};
var props = [
prop,
'webkit' + prop,
'webkit' + uppercaseProp,
'Moz' + uppercaseProp,
'moz' + uppercaseProp,
'ms' + uppercaseProp,
'ms' + prop
];
for (var i=0; i < props.length; i++) {
var property = props[i];
var prefix;
if (property in style) {
prefix = property.toLowerCase().replace(prop, '');
if (prefix && dic[prefix]) {
return dic[prefix];
}
return property;
}
}
return null;
}
var transformProp = testProp('transform');
var perspectiveProp = testProp('perspective');
var supports2D = transformProp !== null;
var supports3D = perspectiveProp !== null;
__exports__["default"] = {
transformProp: transformProp,
applyTransform: (function(){
if (supports2D) {
return function(childView, x, y){
set(childView, 'style', transformProp + ': translate(' + x + 'px, ' + y + 'px);');
};
} else {
return function(childView, x, y){
set(childView, 'style', 'top: ' + y + 'px; left: ' + x + 'px;');
};
}
})(),
apply3DTransform: (function(){
if (supports3D) {
return function(childView, x, y){
set(childView, 'style', transformProp + ': translate3d(' + x + 'px, ' + y + 'px, 0);');
};
} else if (supports2D) {
return function(childView, x, y){
set(childView, 'style', transformProp + ': translate(' + x + 'px, ' + y + 'px);');
};
} else {
return function(childView, x, y){
set(childView, 'style', 'top: ' + y + 'px; left: ' + x + 'px;');
};
}
})()
};
});
define("list-view/list_view_mixin",
["list-view/reusable_list_item_view","exports"],
function(__dependency1__, __exports__) {
"use strict";
// jshint validthis: true
var ReusableListItemView = __dependency1__["default"];
var get = Ember.get, set = Ember.set,
min = Math.min, max = Math.max, floor = Math.floor,
ceil = Math.ceil,
forEach = Ember.ArrayPolyfills.forEach;
function addContentArrayObserver() {
var content = get(this, 'content');
if (content) {
content.addArrayObserver(this);
}
}
function removeAndDestroy(object) {
this.removeObject(object);
object.destroy();
}
function syncChildViews() {
Ember.run.once(this, '_syncChildViews');
}
function sortByContentIndex (viewOne, viewTwo) {
return get(viewOne, 'contentIndex') - get(viewTwo, 'contentIndex');
}
function notifyMutationListeners() {
if (Ember.View.notifyMutationListeners) {
Ember.run.once(Ember.View, 'notifyMutationListeners');
}
}
function removeEmptyView() {
var emptyView = get(this, 'emptyView');
if (emptyView && emptyView instanceof Ember.View) {
emptyView.removeFromParent();
if (this.totalHeightDidChange !== undefined) {
this.totalHeightDidChange();
}
}
}
function addEmptyView() {
var emptyView = get(this, 'emptyView');
if (!emptyView) {
return;
}
if ('string' === typeof emptyView) {
emptyView = get(emptyView) || emptyView;
}
emptyView = this.createChildView(emptyView);
set(this, 'emptyView', emptyView);
if (Ember.CoreView.detect(emptyView)) {
this._createdEmptyView = emptyView;
}
this.unshiftObject(emptyView);
}
function enableProfilingOutput() {
function before(name, time, payload) {
console.time(name);
}
function after (name, time, payload) {
console.timeEnd(name);
}
if (Ember.ENABLE_PROFILING) {
Ember.subscribe('view._scrollContentTo', {
before: before,
after: after
});
Ember.subscribe('view.updateContext', {
before: before,
after: after
});
}
}
/**
@class Ember.ListViewMixin
@namespace Ember
*/
__exports__["default"] = Ember.Mixin.create({
itemViewClass: ReusableListItemView,
emptyViewClass: Ember.View,
classNames: ['ember-list-view'],
attributeBindings: ['style'],
classNameBindings: ['_isGrid:ember-list-view-grid:ember-list-view-list'],
scrollTop: 0,
bottomPadding: 0, // TODO: maybe this can go away
_lastEndingIndex: 0,
paddingCount: 1,
_cachedPos: 0,
_isGrid: Ember.computed('columnCount', function() {
return this.get('columnCount') > 1;
}).readOnly(),
/**
@private
Setup a mixin.
- adding observer to content array
- creating child views based on height and length of the content array
@method init
*/
init: function() {
this._super();
this._cachedHeights = [0];
this.on('didInsertElement', this._syncListContainerWidth);
this.columnCountDidChange();
this._syncChildViews();
this._addContentArrayObserver();
},
_addContentArrayObserver: Ember.beforeObserver(function() {
addContentArrayObserver.call(this);
}, 'content'),
/**
Called on your view when it should push strings of HTML into a
`Ember.RenderBuffer`.
Adds a [div](https://developer.mozilla.org/en-US/docs/HTML/Element/div)
with a required `ember-list-container` class.
@method render
@param {Ember.RenderBuffer} buffer The render buffer
*/
render: function(buffer) {
buffer.push('<div class="ember-list-container"></div>');
this._super(buffer);
},
createChildViewsMorph: function (element) {
var children = element.children;
element = children[0];
this._childViewsMorph = this._renderer._dom.createMorph(element, children[children.length - 1], null);
return element;
},
willInsertElement: function() {
if (!this.get("height") || !this.get("rowHeight")) {
throw new Error("A ListView must be created with a height and a rowHeight.");
}
this._super();
},
/**
@private
Sets inline styles of the view:
- height
- width
- position
- overflow
- -webkit-overflow
- overflow-scrolling
Called while attributes binding.
@property {Ember.ComputedProperty} style
*/
style: Ember.computed('height', 'width', function() {
var height, width, style, css;
height = get(this, 'height');
width = get(this, 'width');
css = get(this, 'css');
style = '';
if (height) {
style += 'height:' + height + 'px;';
}
if (width) {
style += 'width:' + width + 'px;';
}
for ( var rule in css ) {
if (css.hasOwnProperty(rule)) {
style += rule + ':' + css[rule] + ';';
}
}
return style;
}),
/**
@private
Performs visual scrolling. Is overridden in Ember.ListView.
@method scrollTo
*/
scrollTo: function(y) {
throw new Error('must override to perform the visual scroll and effectively delegate to _scrollContentTo');
},
/**
@private
Internal method used to force scroll position
@method scrollTo
*/
_scrollTo: Ember.K,
/**
@private
@method _scrollContentTo
*/
_scrollContentTo: function(y) {
var startingIndex, endingIndex,
contentIndex, visibleEndingIndex, maxContentIndex,
contentIndexEnd, contentLength, scrollTop, content;
scrollTop = max(0, y);
if (this.scrollTop === scrollTop) {
return;
}
// allow a visual overscroll, but don't scroll the content. As we are doing needless
// recycyling, and adding unexpected nodes to the DOM.
var maxScrollTop = max(0, get(this, 'totalHeight') - get(this, 'height'));
scrollTop = min(scrollTop, maxScrollTop);
content = get(this, 'content');
contentLength = get(content, 'length');
startingIndex = this._startingIndex(contentLength);
Ember.instrument('view._scrollContentTo', {
scrollTop: scrollTop,
content: content,
startingIndex: startingIndex,
endingIndex: min(max(contentLength - 1, 0), startingIndex + this._numChildViewsForViewport())
}, function () {
this.scrollTop = scrollTop;
maxContentIndex = max(contentLength - 1, 0);
startingIndex = this._startingIndex();
visibleEndingIndex = startingIndex + this._numChildViewsForViewport();
endingIndex = min(maxContentIndex, visibleEndingIndex);
if (startingIndex === this._lastStartingIndex &&
endingIndex === this._lastEndingIndex) {
this.trigger('scrollYChanged', y);
return;
} else {
Ember.run(this, function() {
this._reuseChildren();
this._lastStartingIndex = startingIndex;
this._lastEndingIndex = endingIndex;
this.trigger('scrollYChanged', y);
});
}
}, this);
},
/**
@private
Computes the height for a `Ember.ListView` scrollable container div.
You must specify `rowHeight` parameter for the height to be computed properly.
@property {Ember.ComputedProperty} totalHeight
*/
totalHeight: Ember.computed('content.length',
'rowHeight',
'columnCount',
'bottomPadding', function() {
if (typeof this.heightForIndex === 'function') {
return this._totalHeightWithHeightForIndex();
} else {
return this._totalHeightWithStaticRowHeight();
}
}),
_doRowHeightDidChange: function() {
this._cachedHeights = [0];
this._cachedPos = 0;
this._syncChildViews();
},
_rowHeightDidChange: Ember.observer('rowHeight', function() {
Ember.run.once(this, this._doRowHeightDidChange);
}),
_totalHeightWithHeightForIndex: function() {
var length = this.get('content.length');
return this._cachedHeightLookup(length);
},
_totalHeightWithStaticRowHeight: function() {
var contentLength, rowHeight, columnCount, bottomPadding;
contentLength = get(this, 'content.length');
rowHeight = get(this, 'rowHeight');
columnCount = get(this, 'columnCount');
bottomPadding = get(this, 'bottomPadding');
return ((ceil(contentLength / columnCount)) * rowHeight) + bottomPadding;
},
/**
@private
@method _prepareChildForReuse
*/
_prepareChildForReuse: function(childView) {
childView.prepareForReuse();
},
/**
@private
@method _reuseChildForContentIndex
*/
_reuseChildForContentIndex: function(childView, contentIndex) {
var content, context, newContext, childsCurrentContentIndex, position, enableProfiling, oldChildView;
var contentViewClass = this.itemViewForIndex(contentIndex);
if (childView.constructor !== contentViewClass) {
// rather then associative arrays, lets move childView + contentEntry maping to a Map
var i = this._childViews.indexOf(childView);
childView.destroy();
childView = this.createChildView(contentViewClass);
this.insertAt(i, childView);
}
content = get(this, 'content');
enableProfiling = get(this, 'enableProfiling');
position = this.positionForIndex(contentIndex);
childView.updatePosition(position);
set(childView, 'contentIndex', contentIndex);
if (enableProfiling) {
Ember.instrument('view._reuseChildForContentIndex', position, function() {
}, this);
}
newContext = content.objectAt(contentIndex);
childView.updateContext(newContext);
},
/**
@private
@method positionForIndex
*/
positionForIndex: function(index) {
if (typeof this.heightForIndex !== 'function') {
return this._singleHeightPosForIndex(index);
}
else {
return this._multiHeightPosForIndex(index);
}
},
_singleHeightPosForIndex: function(index) {
var elementWidth, width, columnCount, rowHeight, y, x;
elementWidth = get(this, 'elementWidth') || 1;
width = get(this, 'width') || 1;
columnCount = get(this, 'columnCount');
rowHeight = get(this, 'rowHeight');
y = (rowHeight * floor(index/columnCount));
x = (index % columnCount) * elementWidth;
return {
y: y,
x: x
};
},
// 0 maps to 0, 1 maps to heightForIndex(i)
_multiHeightPosForIndex: function(index) {
var elementWidth, width, columnCount, rowHeight, y, x;
elementWidth = get(this, 'elementWidth') || 1;
width = get(this, 'width') || 1;
columnCount = get(this, 'columnCount');
x = (index % columnCount) * elementWidth;
y = this._cachedHeightLookup(index);
return {
x: x,
y: y
};
},
_cachedHeightLookup: function(index) {
for (var i = this._cachedPos; i < index; i++) {
this._cachedHeights[i + 1] = this._cachedHeights[i] + this.heightForIndex(i);
}
this._cachedPos = i;
return this._cachedHeights[index];
},
/**
@private
@method _childViewCount
*/
_childViewCount: function() {
var contentLength, childViewCountForHeight;
contentLength = get(this, 'content.length');
childViewCountForHeight = this._numChildViewsForViewport();
return min(contentLength, childViewCountForHeight);
},
/**
@private
Returns a number of columns in the Ember.ListView (for grid layout).
If you want to have a multi column layout, you need to specify both
`width` and `elementWidth`.
If no `elementWidth` is specified, it returns `1`. Otherwise, it will
try to fit as many columns as possible for a given `width`.
@property {Ember.ComputedProperty} columnCount
*/
columnCount: Ember.computed('width', 'elementWidth', function() {
var elementWidth, width, count;
elementWidth = get(this, 'elementWidth');
width = get(this, 'width');
if (elementWidth && width > elementWidth) {
count = floor(width / elementWidth);
} else {
count = 1;
}
return count;
}),
/**
@private
Fires every time column count is changed.
@event columnCountDidChange
*/
columnCountDidChange: Ember.observer(function() {
var ratio, currentScrollTop, proposedScrollTop, maxScrollTop,
scrollTop, lastColumnCount, newColumnCount, element;
lastColumnCount = this._lastColumnCount;
currentScrollTop = this.scrollTop;
newColumnCount = get(this, 'columnCount');
maxScrollTop = get(this, 'maxScrollTop');
element = get(this, 'element');
this._lastColumnCount = newColumnCount;
if (lastColumnCount) {
ratio = (lastColumnCount / newColumnCount);
proposedScrollTop = currentScrollTop * ratio;
scrollTop = min(maxScrollTop, proposedScrollTop);
this._scrollTo(scrollTop);
this.scrollTop = scrollTop;
}
if (arguments.length > 0) {
// invoked by observer
Ember.run.schedule('afterRender', this, this._syncListContainerWidth);
}
}, 'columnCount'),
/**
@private
Computes max possible scrollTop value given the visible viewport
and scrollable container div height.
@property {Ember.ComputedProperty} maxScrollTop
*/
maxScrollTop: Ember.computed('height', 'totalHeight', function(){
var totalHeight, viewportHeight;
totalHeight = get(this, 'totalHeight');
viewportHeight = get(this, 'height');
return max(0, totalHeight - viewportHeight);
}),
/**
@private
Determines whether the emptyView is the current childView.
@method _isChildEmptyView
*/
_isChildEmptyView: function() {
var emptyView = get(this, 'emptyView');
return emptyView && emptyView instanceof Ember.View &&
this._childViews.length === 1 && this._childViews.indexOf(emptyView) === 0;
},
/**
@private
Computes the number of views that would fit in the viewport area.
You must specify `height` and `rowHeight` parameters for the number of
views to be computed properly.
@method _numChildViewsForViewport
*/
_numChildViewsForViewport: function() {
if (this.heightForIndex) {
return this._numChildViewsForViewportWithMultiHeight();
} else {
return this._numChildViewsForViewportWithoutMultiHeight();
}
},
_numChildViewsForViewportWithoutMultiHeight: function() {
var height, rowHeight, paddingCount, columnCount;
height = get(this, 'height');
rowHeight = get(this, 'rowHeight');
paddingCount = get(this, 'paddingCount');
columnCount = get(this, 'columnCount');
return (ceil(height / rowHeight) * columnCount) + (paddingCount * columnCount);
},
_numChildViewsForViewportWithMultiHeight: function() {
var rowHeight, paddingCount, columnCount;
var scrollTop = this.scrollTop;
var viewportHeight = this.get('height');
var length = this.get('content.length');
var heightfromTop = 0;
var padding = get(this, 'paddingCount');
var startingIndex = this._calculatedStartingIndex();
var currentHeight = 0;
var offsetHeight = this._cachedHeightLookup(startingIndex);
for (var i = 0; i < length; i++) {
if (this._cachedHeightLookup(startingIndex + i + 1) - offsetHeight > viewportHeight) {
break;
}
}
return i + padding + 1;
},
/**
@private
Computes the starting index of the item views array.
Takes `scrollTop` property of the element into account.
Is used in `_syncChildViews`.
@method _startingIndex
*/
_startingIndex: function(_contentLength) {
var scrollTop, rowHeight, columnCount, calculatedStartingIndex,
contentLength;
if (_contentLength === undefined) {
contentLength = get(this, 'content.length');
} else {
contentLength = _contentLength;
}
scrollTop = this.scrollTop;
rowHeight = get(this, 'rowHeight');
columnCount = get(this, 'columnCount');
if (this.heightForIndex) {
calculatedStartingIndex = this._calculatedStartingIndex();
} else {
calculatedStartingIndex = floor(scrollTop / rowHeight) * columnCount;
}
var viewsNeededForViewport = this._numChildViewsForViewport();
var paddingCount = (1 * columnCount);
var largestStartingIndex = max(contentLength - viewsNeededForViewport, 0);
return min(calculatedStartingIndex, largestStartingIndex);
},
_calculatedStartingIndex: function() {
var rowHeight, paddingCount, columnCount;
var scrollTop = this.scrollTop;
var viewportHeight = this.get('height');
var length = this.get('content.length');
var heightfromTop = 0;
var padding = get(this, 'paddingCount');
for (var i = 0; i < length; i++) {
if (this._cachedHeightLookup(i + 1) >= scrollTop) {
break;
}
}
return i;
},
/**
@private
@event contentWillChange
*/
contentWillChange: Ember.beforeObserver(function() {
var content;
content = get(this, 'content');
if (content) {
content.removeArrayObserver(this);
}
}, 'content'),
/**),
@private
@event contentDidChange
*/
contentDidChange: Ember.observer(function() {
addContentArrayObserver.call(this);
syncChildViews.call(this);
}, 'content'),
/**
@private
@property {Function} needsSyncChildViews
*/
needsSyncChildViews: Ember.observer(syncChildViews, 'height', 'width', 'columnCount'),
/**
@private
Returns a new item view. Takes `contentIndex` to set the context
of the returned view properly.
@param {Number} contentIndex item index in the content array
@method _addItemView
*/
_addItemView: function(contentIndex){
var itemViewClass, childView;
itemViewClass = this.itemViewForIndex(contentIndex);
childView = this.createChildView(itemViewClass);
this.pushObject(childView);
},
/**
@public
Returns a view class for the provided contentIndex. If the view is
different then the one currently present it will remove the existing view
and replace it with an instance of the class provided
@param {Number} contentIndex item index in the content array
@method _addItemView
@returns {Ember.View} ember view class for this index
*/
itemViewForIndex: function(contentIndex) {
return get(this, 'itemViewClass');
},
/**
@public
Returns a view class for the provided contentIndex. If the view is
different then the one currently present it will remove the existing view
and replace it with an instance of the class provided
@param {Number} contentIndex item index in the content array
@method _addItemView
@returns {Ember.View} ember view class for this index
*/
heightForIndex: null,
/**
@private
Intelligently manages the number of childviews.
@method _syncChildViews
**/
_syncChildViews: function(){
var childViews, childViewCount,
numberOfChildViews, numberOfChildViewsNeeded,
contentIndex, startingIndex, endingIndex,
contentLength, emptyView, count, delta;
if (get(this, 'isDestroyed') || get(this, 'isDestroying')) {
return;
}
contentLength = get(this, 'content.length');
emptyView = get(this, 'emptyView');
childViewCount = this._childViewCount();
childViews = this.positionOrderedChildViews();
if (this._isChildEmptyView()) {
removeEmptyView.call(this);
}
startingIndex = this._startingIndex();
endingIndex = startingIndex + childViewCount;
numberOfChildViewsNeeded = childViewCount;
numberOfChildViews = childViews.length;
delta = numberOfChildViewsNeeded - numberOfChildViews;
if (delta === 0) {
// no change
} else if (delta > 0) {
// more views are needed
contentIndex = this._lastEndingIndex;
for (count = 0; count < delta; count++, contentIndex++) {
this._addItemView(contentIndex);
}
} else {
// less views are needed
forEach.call(
childViews.splice(numberOfChildViewsNeeded, numberOfChildViews),
removeAndDestroy,
this
);
}
this._reuseChildren();
this._lastStartingIndex = startingIndex;
this._lastEndingIndex = this._lastEndingIndex + delta;
if (contentLength === 0 || contentLength === undefined) {
addEmptyView.call(this);
}
},
/**
@private
Applies an inline width style to the list container.
@method _syncListContainerWidth
**/
_syncListContainerWidth: function() {
var elementWidth, columnCount, containerWidth, element;
elementWidth = get(this, 'elementWidth');
columnCount = get(this, 'columnCount');
containerWidth = elementWidth * columnCount;
element = this.$('.ember-list-container');
if (containerWidth && element) {
element.css('width', containerWidth);
}
},
/**
@private
@method _reuseChildren
*/
_reuseChildren: function(){
var contentLength, childViews, childViewsLength,
startingIndex, endingIndex, childView, attrs,
contentIndex, visibleEndingIndex, maxContentIndex,
contentIndexEnd, scrollTop;
scrollTop = this.scrollTop;
contentLength = get(this, 'content.length');
maxContentIndex = max(contentLength - 1, 0);
childViews = this.getReusableChildViews();
childViewsLength = childViews.length;
startingIndex = this._startingIndex();
visibleEndingIndex = startingIndex + this._numChildViewsForViewport();
endingIndex = min(maxContentIndex, visibleEndingIndex);
contentIndexEnd = min(visibleEndingIndex, startingIndex + childViewsLength);
for (contentIndex = startingIndex; contentIndex < contentIndexEnd; contentIndex++) {
childView = childViews[contentIndex % childViewsLength];
this._reuseChildForContentIndex(childView, contentIndex);
}
},
/**
@private
@method getReusableChildViews
*/
getReusableChildViews: function() {
return this._childViews;
},
/**
@private
@method positionOrderedChildViews
*/
positionOrderedChildViews: function() {
return this.getReusableChildViews().sort(sortByContentIndex);
},
arrayWillChange: Ember.K,
/**
@private
@event arrayDidChange
*/
// TODO: refactor
arrayDidChange: function(content, start, removedCount, addedCount) {
var index, contentIndex, state;
if (this._isChildEmptyView()) {
removeEmptyView.call(this);
}
// Support old and new Ember versions
state = this._state || this.state;
if (state === 'inDOM') {
// ignore if all changes are out of the visible change
if (start >= this._lastStartingIndex || start < this._lastEndingIndex) {
index = 0;
// ignore all changes not in the visible range
// this can re-position many, rather then causing a cascade of re-renders
forEach.call(
this.positionOrderedChildViews(),
function(childView) {
contentIndex = this._lastStartingIndex + index;
this._reuseChildForContentIndex(childView, contentIndex);
index++;
},
this
);
}
syncChildViews.call(this);
}
},
destroy: function () {
if (!this._super()) {
return;
}
if (this._createdEmptyView) {
this._createdEmptyView.destroy();
}
return this;
}
});
});
define("list-view/main",
["list-view/reusable_list_item_view","list-view/virtual_list_view","list-view/list_item_view","list-view/helper","list-view/list_view","list-view/list_view_helper"],
function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __dependency5__, __dependency6__) {
"use strict";
var ReusableListItemView = __dependency1__["default"];
var VirtualListView = __dependency2__["default"];
var ListItemView = __dependency3__["default"];
var EmberList = __dependency4__["default"];
var ListView = __dependency5__["default"];
var ListViewHelper = __dependency6__["default"];
Ember.ReusableListItemView = ReusableListItemView;
Ember.VirtualListView = VirtualListView;
Ember.ListItemView = ListItemView;
Ember.ListView = ListView;
Ember.ListViewHelper = ListViewHelper;
Ember.Handlebars.registerHelper('ember-list', EmberList);
});
define("list-view/reusable_list_item_view",
["list-view/list_item_view_mixin","exports"],
function(__dependency1__, __exports__) {
"use strict";
var ListItemViewMixin = __dependency1__["default"];
var get = Ember.get, set = Ember.set;
__exports__["default"] = Ember.View.extend(ListItemViewMixin, {
init: function(){
this._super();
var context = Ember.ObjectProxy.create();
this.set('context', context);
this._proxyContext = context;
},
isVisible: Ember.computed('context.content', function(){
return !!this.get('context.content');
}),
updateContext: function(newContext){
var context = get(this._proxyContext, 'content'), state;
// Support old and new Ember versions
state = this._state || this.state;
if (context !== newContext) {
if (state === 'inDOM') {
this.prepareForReuse(newContext);
}
set(this._proxyContext, 'content', newContext);
if (newContext && newContext.isController) {
set(this, 'controller', newContext);
}
}
},
prepareForReuse: Ember.K
});
});
define("list-view/virtual_list_scroller_events",
["exports"],
function(__exports__) {
"use strict";
// jshint validthis: true
var fieldRegex = /input|textarea|select/i,
hasTouch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch,
handleStart, handleMove, handleEnd, handleCancel,
startEvent, moveEvent, endEvent, cancelEvent;
if (hasTouch) {
startEvent = 'touchstart';
handleStart = function (e) {
var touch = e.touches[0],
target = touch && touch.target;
// avoid e.preventDefault() on fields
if (target && fieldRegex.test(target.tagName)) {
return;
}
bindWindow(this.scrollerEventHandlers);
this.willBeginScroll(e.touches, e.timeStamp);
e.preventDefault();
};
moveEvent = 'touchmove';
handleMove = function (e) {
this.continueScroll(e.touches, e.timeStamp);
};
endEvent = 'touchend';
handleEnd = function (e) {
// if we didn't end up scrolling we need to
// synthesize click since we did e.preventDefault()
// on touchstart
if (!this._isScrolling) {
synthesizeClick(e);
}
unbindWindow(this.scrollerEventHandlers);
this.endScroll(e.timeStamp);
};
cancelEvent = 'touchcancel';
handleCancel = function (e) {
unbindWindow(this.scrollerEventHandlers);
this.endScroll(e.timeStamp);
};
} else {
startEvent = 'mousedown';
handleStart = function (e) {
if (e.which !== 1) {
return;
}
var target = e.target;
// avoid e.preventDefault() on fields
if (target && fieldRegex.test(target.tagName)) {
return;
}
bindWindow(this.scrollerEventHandlers);
this.willBeginScroll([e], e.timeStamp);
e.preventDefault();
};
moveEvent = 'mousemove';
handleMove = function (e) {
this.continueScroll([e], e.timeStamp);
};
endEvent = 'mouseup';
handleEnd = function (e) {
unbindWindow(this.scrollerEventHandlers);
this.endScroll(e.timeStamp);
};
cancelEvent = 'mouseout';
handleCancel = function (e) {
if (e.relatedTarget) {
return;
}
unbindWindow(this.scrollerEventHandlers);
this.endScroll(e.timeStamp);
};
}
function handleWheel(e) {
this.mouseWheel(e);
e.preventDefault();
}
function bindElement(el, handlers) {
el.addEventListener(startEvent, handlers.start, false);
el.addEventListener('mousewheel', handlers.wheel, false);
}
function unbindElement(el, handlers) {
el.removeEventListener(startEvent, handlers.start, false);
el.removeEventListener('mousewheel', handlers.wheel, false);
}
function bindWindow(handlers) {
window.addEventListener(moveEvent, handlers.move, true);
window.addEventListener(endEvent, handlers.end, true);
window.addEventListener(cancelEvent, handlers.cancel, true);
}
function unbindWindow(handlers) {
window.removeEventListener(moveEvent, handlers.move, true);
window.removeEventListener(endEvent, handlers.end, true);
window.removeEventListener(cancelEvent, handlers.cancel, true);
}
__exports__["default"] = Ember.Mixin.create({
init: function() {
this.on('didInsertElement', this, 'bindScrollerEvents');
this.on('willDestroyElement', this, 'unbindScrollerEvents');
this.scrollerEventHandlers = {
start: bind(this, handleStart),
move: bind(this, handleMove),
end: bind(this, handleEnd),
cancel: bind(this, handleCancel),
wheel: bind(this, handleWheel)
};
return this._super();
},
scrollElement: Ember.computed.oneWay('element').readOnly(),
bindScrollerEvents: function() {
var el = this.get('scrollElement'),
handlers = this.scrollerEventHandlers;
bindElement(el, handlers);
},
unbindScrollerEvents: function() {
var el = this.get('scrollElement'),
handlers = this.scrollerEventHandlers;
unbindElement(el, handlers);
unbindWindow(handlers);
}
});
function bind(view, handler) {
return function (evt) {
handler.call(view, evt);
};
}
function synthesizeClick(e) {
var point = e.changedTouches[0],
target = point.target,
ev;
if (target && fieldRegex.test(target.tagName)) {
ev = document.createEvent('MouseEvents');
ev.initMouseEvent('click', true, true, e.view, 1, point.screenX, point.screenY, point.clientX, point.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null);
return target.dispatchEvent(ev);
}
}
});
define("list-view/virtual_list_view",
["list-view/list_view_mixin","list-view/list_item_view_mixin","list-view/list_view_helper","list-view/virtual_list_scroller_events","exports"],
function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __exports__) {
"use strict";
/*
global Scroller
*/
var ListViewMixin = __dependency1__["default"];
var TransformMixin = __dependency2__.TransformMixin;
var ListViewHelper = __dependency3__["default"];
var VirtualListScrollerEvents = __dependency4__["default"];
var max = Math.max, get = Ember.get, set = Ember.set;
function updateScrollerDimensions(target) {
var width, height, totalHeight;
target = target || this; // jshint ignore:line
width = get(target, 'width');
height = get(target, 'height');
totalHeight = get(target, 'totalHeight'); // jshint ignore:line
target.scroller.setDimensions(width, height, width, totalHeight);
target.trigger('scrollerDimensionsDidChange');
}
/**
VirtualListView
@class VirtualListView
@namespace Ember
*/
__exports__["default"] = Ember.ContainerView.extend(ListViewMixin, VirtualListScrollerEvents, {
_isScrolling: false,
_mouseWheel: null,
css: {
position: 'relative',
overflow: 'hidden'
},
init: function(){
this._super();
this.setupScroller();
this.setupPullToRefresh();
},
_scrollerTop: 0,
applyTransform: ListViewHelper.apply3DTransform,
setupScroller: function(){
var view, y;
view = this;
view.scroller = new Scroller(function(left, top, zoom) {
// Support old and new Ember versions
var state = view._state || view.state;
if (state !== 'inDOM') {
return;
}
if (view.listContainerElement) {
view._scrollerTop = top;
view._scrollContentTo(top);
view.applyTransform(view.listContainerElement, 0, -top);
}
}, {
scrollingX: false,
scrollingComplete: function(){
view.trigger('scrollingDidComplete');
}
});
view.trigger('didInitializeScroller');
updateScrollerDimensions(view);
},
setupPullToRefresh: function() {
if (!this.pullToRefreshViewClass) {
return;
}
this._insertPullToRefreshView();
this._activateScrollerPullToRefresh();
},
_insertPullToRefreshView: function(){
var pulldownClass = this.pullToRefreshViewClass.extend(TransformMixin);
this.pullToRefreshView = this.createChildView(pulldownClass);
this.insertAt(0, this.pullToRefreshView);
var view = this;
this.pullToRefreshView.on('didInsertElement', function(){
Ember.run.schedule('afterRender', this, function(){
view.applyTransform(this, 0, -1 * view.pullToRefreshViewHeight);
});
});
},
_activateScrollerPullToRefresh: function(){
var view = this;
function activatePullToRefresh(){
view.pullToRefreshView.set('active', true);
view.trigger('activatePullToRefresh');
}
function deactivatePullToRefresh() {
view.pullToRefreshView.set('active', false);
view.trigger('deactivatePullToRefresh');
}
function startPullToRefresh() {
Ember.run(function(){
view.pullToRefreshView.set('refreshing', true);
function finishRefresh(){
if (view && !view.get('isDestroyed') && !view.get('isDestroying')) {
view.scroller.finishPullToRefresh();
view.pullToRefreshView.set('refreshing', false);
}
}
view.startRefresh(finishRefresh);
});
}
this.scroller.activatePullToRefresh(
this.pullToRefreshViewHeight,
activatePullToRefresh,
deactivatePullToRefresh,
startPullToRefresh
);
},
getReusableChildViews: function(){
var firstView = this._childViews[0];
if (firstView && firstView === this.pullToRefreshView) {
return this._childViews.slice(1);
} else {
return this._childViews;
}
},
scrollerDimensionsNeedToChange: Ember.observer(function() {
Ember.run.once(this, updateScrollerDimensions);
}, 'width', 'height', 'totalHeight'),
didInsertElement: function() {
this.listContainerElement = this.$('> .ember-list-container')[0];
},
willBeginScroll: function(touches, timeStamp) {
this._isScrolling = false;
this.trigger('scrollingDidStart');
this.scroller.doTouchStart(touches, timeStamp);
},
continueScroll: function(touches, timeStamp) {
var startingScrollTop, endingScrollTop, event;
if (this._isScrolling) {
this.scroller.doTouchMove(touches, timeStamp);
} else {
startingScrollTop = this._scrollerTop;
this.scroller.doTouchMove(touches, timeStamp);
endingScrollTop = this._scrollerTop;
if (startingScrollTop !== endingScrollTop) {
event = Ember.$.Event("scrollerstart");
Ember.$(touches[0].target).trigger(event);
this._isScrolling = true;
}
}
},
endScroll: function(timeStamp) {
this.scroller.doTouchEnd(timeStamp);
},
// api
scrollTo: function(y, animate) {
if (animate === undefined) {
animate = true;
}
this.scroller.scrollTo(0, y, animate, 1);
},
// events
mouseWheel: function(e){
var inverted, delta, candidatePosition;
inverted = e.webkitDirectionInvertedFromDevice;
delta = e.wheelDeltaY * (inverted ? 0.8 : -0.8);
candidatePosition = this.scroller.__scrollTop + delta;
if ((candidatePosition >= 0) && (candidatePosition <= this.scroller.__maxScrollTop)) {
this.scroller.scrollBy(0, delta, true);
e.stopPropagation();
}
return false;
}
});
});
requireModule('list-view/main');
})(this);