Different Slack ratio on Touch devices, show loading indicator

This commit is contained in:
Robin Ward 2013-11-28 14:17:58 -05:00
parent 47e1f1d1fe
commit 924a88b5c0
2 changed files with 20 additions and 5 deletions

View file

@ -6,9 +6,6 @@
@namespace Discourse
@module Discourse
**/
var SLACK_RATIO = 0.75;
Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrolling, {
topVisible: null,
bottomVisible: null,
@ -17,6 +14,10 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
var cloakView = this.get('cloakView'),
idProperty = this.get('idProperty') || 'id';
// Give ourselves more slack on touch devices
// this.set('slackRatio', Discourse.touch ? 1.5 : 0.75);
this.set('slackRatio', 1.0);
this.set('itemViewClass', Discourse.CloakedView.extend({
classNames: [cloakView + '-cloak'],
cloaks: Em.String.classify(cloakView) + 'View',
@ -89,7 +90,7 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
$w = $(window),
windowHeight = $w.height(),
windowTop = $w.scrollTop(),
slack = Math.round(windowHeight * SLACK_RATIO),
slack = Math.round(windowHeight * this.get('slackRatio')),
viewportTop = windowTop - slack,
windowBottom = windowTop + windowHeight,
viewportBottom = windowBottom + slack,
@ -132,12 +133,24 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
this.setProperties({topVisible: null, bottomVisible: null});
}
var toCloak = childViews.slice(0, topView).concat(childViews.slice(bottomView+1));
var toCloak = childViews.slice(0, topView).concat(childViews.slice(bottomView+1)),
loadingView = childViews[bottomView + 1];
Em.run.schedule('afterRender', function() {
toUncloak.forEach(function (v) { v.uncloak(); });
toCloak.forEach(function (v) { v.cloak(); });
});
// for (var j=bottomView; j<childViews.length; j++) {
// var checkView = childViews[j];
// if (!checkView.get('containedView')) {
// if (!checkView.get('loading')) {
// checkView.$().html("<div class='spinner'>" + I18n.t('loading') + "</div>");
// }
// return;
// }
// }
},
didInsertElement: function() {

View file

@ -14,6 +14,7 @@ Discourse.CloakedView = Discourse.View.extend({
this.uncloak();
},
/**
Triggers the set up for rendering a view that is cloaked.
@ -24,6 +25,7 @@ Discourse.CloakedView = Discourse.View.extend({
if (!containedView) {
this.setProperties({
style: null,
loading: false,
containedView: this.createChildView(Discourse[this.get('cloaks')], { content: this.get('content') })
});