discourse/vendor/assets/javascripts/ember-cloaking.js

382 lines
12 KiB
JavaScript
Raw Normal View History

2013-12-04 13:23:00 -05:00
(function () {
/**
Display a list of cloaked items
@class CloakedCollectionView
@extends Ember.CollectionView
2013-12-04 13:23:00 -05:00
@namespace Ember
**/
Ember.CloakedCollectionView = Ember.CollectionView.extend({
topVisible: null,
bottomVisible: null,
offsetFixedTopElement: null,
offsetFixedBottomElement: null,
2013-12-04 13:23:00 -05:00
init: function() {
var cloakView = this.get('cloakView'),
idProperty = this.get('idProperty'),
uncloakDefault = !!this.get('uncloakDefault');
2013-12-04 13:23:00 -05:00
// Set the slack ratio differently to allow for more or less slack in preloading
var slackRatio = parseFloat(this.get('slackRatio'));
if (!slackRatio) { this.set('slackRatio', 1.0); }
this.set('itemViewClass', Ember.CloakedView.extend({
classNames: [cloakView + '-cloak'],
cloaks: cloakView,
preservesContext: this.get('preservesContext') === "true",
cloaksController: this.get('itemController'),
defaultHeight: this.get('defaultHeight'),
2013-12-04 13:23:00 -05:00
init: function() {
this._super();
if (idProperty) {
this.set('elementId', cloakView + '-cloak-' + this.get('content.' + idProperty));
}
if (uncloakDefault) {
this.uncloak();
} else {
this.cloak();
}
2013-12-04 13:23:00 -05:00
}
}));
this._super();
Ember.run.next(this, 'scrolled');
},
2013-12-04 13:23:00 -05:00
/**
If the topmost visible view changed, we will notify the controller if it has an appropriate hook.
@method _topVisibleChanged
@observes topVisible
**/
_topVisibleChanged: function() {
var controller = this.get('controller');
if (controller.topVisibleChanged) { controller.topVisibleChanged(this.get('topVisible')); }
}.observes('topVisible'),
/**
If the bottommost visible view changed, we will notify the controller if it has an appropriate hook.
@method _bottomVisible
@observes bottomVisible
**/
_bottomVisible: function() {
var controller = this.get('controller');
if (controller.bottomVisibleChanged) { controller.bottomVisibleChanged(this.get('bottomVisible')); }
}.observes('bottomVisible'),
/**
Binary search for finding the topmost view on screen.
@method findTopView
@param {Array} childViews the childViews to search through
@param {Number} windowTop The top of the viewport to search against
@param {Number} min The minimum index to search through of the child views
@param {Number} max The max index to search through of the child views
@returns {Number} the index into childViews of the topmost view
**/
findTopView: function(childViews, viewportTop, min, max) {
if (max < min) { return min; }
var mid = Math.floor((min + max) / 2),
// in case of not full-window scrolling
scrollOffset = this.get('wrapperTop') >> 0,
2013-12-04 13:23:00 -05:00
$view = childViews[mid].$(),
viewBottom = $view.position().top + scrollOffset + $view.height();
2013-12-04 13:23:00 -05:00
if (viewBottom > viewportTop) {
return this.findTopView(childViews, viewportTop, min, mid-1);
} else {
return this.findTopView(childViews, viewportTop, mid+1, max);
}
},
/**
Determine what views are onscreen and cloak/uncloak them as necessary.
@method scrolled
**/
scrolled: function() {
if (!this.get('scrollingEnabled')) { return; }
2013-12-04 13:23:00 -05:00
var childViews = this.get('childViews');
2013-12-04 13:28:56 -05:00
if ((!childViews) || (childViews.length === 0)) { return; }
2013-12-04 13:23:00 -05:00
var toUncloak = [],
onscreen = [],
// calculating viewport edges
2013-12-04 13:23:00 -05:00
$w = $(window),
windowHeight = this.get('wrapperHeight') || ( window.innerHeight ? window.innerHeight : $w.height() ),
windowTop = this.get('wrapperTop') || $w.scrollTop(),
2013-12-04 13:23:00 -05:00
slack = Math.round(windowHeight * this.get('slackRatio')),
viewportTop = windowTop - slack,
windowBottom = windowTop + windowHeight,
viewportBottom = windowBottom + slack,
topView = this.findTopView(childViews, viewportTop, 0, childViews.length-1),
bodyHeight = this.get('wrapperHeight') ? this.$().height() : $('body').height(),
2013-12-04 13:23:00 -05:00
bottomView = topView,
offsetFixedTopElement = this.get('offsetFixedTopElement'),
offsetFixedBottomElement = this.get('offsetFixedBottomElement');
2013-12-04 13:23:00 -05:00
if (windowBottom > bodyHeight) { windowBottom = bodyHeight; }
if (viewportBottom > bodyHeight) { viewportBottom = bodyHeight; }
if (offsetFixedTopElement) {
windowTop += (offsetFixedTopElement.outerHeight(true) || 0);
}
if (offsetFixedBottomElement) {
windowBottom -= (offsetFixedBottomElement.outerHeight(true) || 0);
}
2013-12-04 13:23:00 -05:00
// Find the bottom view and what's onscreen
while (bottomView < childViews.length) {
var view = childViews[bottomView],
$view = view.$(),
// in case of not full-window scrolling
scrollOffset = this.get('wrapperTop') || 0,
viewTop = $view.offset().top + scrollOffset,
2013-12-04 13:23:00 -05:00
viewBottom = viewTop + $view.height();
if (viewTop > viewportBottom) { break; }
toUncloak.push(view);
if (viewBottom > windowTop && viewTop <= windowBottom) {
onscreen.push(view.get('content'));
}
bottomView++;
}
if (bottomView >= childViews.length) { bottomView = childViews.length - 1; }
// If our controller has a `sawObjects` method, pass the on screen objects to it.
var controller = this.get('controller');
if (onscreen.length) {
this.setProperties({topVisible: onscreen[0], bottomVisible: onscreen[onscreen.length-1]});
if (controller && controller.sawObjects) {
Em.run.schedule('afterRender', function() {
controller.sawObjects(onscreen);
});
}
} else {
this.setProperties({topVisible: null, bottomVisible: null});
}
var toCloak = childViews.slice(0, topView).concat(childViews.slice(bottomView+1));
2013-12-04 13:23:00 -05:00
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._containedView) {
2013-12-04 13:23:00 -05:00
if (!checkView.get('loading')) {
checkView.$().html(this.get('loadingHTML') || "Loading...");
2013-12-04 13:23:00 -05:00
}
return;
}
}
},
scrollTriggered: function() {
Em.run.scheduleOnce('afterRender', this, 'scrolled');
},
_startEvents: function() {
if (this.get('offsetFixed')) {
Em.warn("Cloaked-collection's `offsetFixed` is deprecated. Use `offsetFixedTop` instead.");
}
2013-12-04 13:23:00 -05:00
var self = this,
offsetFixedTop = this.get('offsetFixedTop') || this.get('offsetFixed'),
offsetFixedBottom = this.get('offsetFixedBottom'),
2013-12-04 13:23:00 -05:00
onScrollMethod = function() {
Ember.run.debounce(self, 'scrollTriggered', 10);
};
if (offsetFixedTop) {
this.set('offsetFixedTopElement', $(offsetFixedTop));
}
if (offsetFixedBottom) {
this.set('offsetFixedBottomElement', $(offsetFixedBottom));
}
2013-12-04 13:23:00 -05:00
$(document).bind('touchmove.ember-cloak', onScrollMethod);
$(window).bind('scroll.ember-cloak', onScrollMethod);
this.addObserver('wrapperTop', self, onScrollMethod);
this.addObserver('wrapperHeight', self, onScrollMethod);
this.addObserver('content.@each', self, onScrollMethod);
this.scrollTriggered();
this.set('scrollingEnabled', true);
}.on('didInsertElement'),
2013-12-04 13:23:00 -05:00
cleanUp: function() {
$(document).unbind('touchmove.ember-cloak');
$(window).unbind('scroll.ember-cloak');
this.set('scrollingEnabled', false);
},
_endEvents: function() {
this.cleanUp();
}.on('willDestroyElement')
2013-12-04 13:23:00 -05:00
});
/**
A cloaked view is one that removes its content when scrolled off the screen
@class CloakedView
@extends Ember.View
@namespace Ember
**/
Ember.CloakedView = Ember.View.extend({
attributeBindings: ['style'],
/**
Triggers the set up for rendering a view that is cloaked.
@method uncloak
*/
uncloak: function() {
if (!this._containedView) {
var model = this.get('content'),
controller = null,
container = this.get('container');
// Wire up the itemController if necessary
var controllerName = this.get('cloaksController');
if (controllerName) {
var controllerFullName = 'controller:' + controllerName,
factory = container.lookupFactory(controllerFullName),
parentController = this.get('controller');
// let ember generate controller if needed
if (factory === undefined) {
factory = Ember.generateControllerFactory(container, controllerName, model);
// inform developer about typo
Ember.Logger.warn('ember-cloaking: can\'t lookup controller by name "' + controllerFullName + '".');
Ember.Logger.warn('ember-cloaking: using ' + factory.toString() + '.');
}
controller = factory.create({
model: model,
parentController: parentController,
target: parentController
});
}
var createArgs = {},
target = controller || model;
2013-12-04 13:23:00 -05:00
if (this.get('preservesContext')) {
createArgs.content = target;
} else {
createArgs.context = target;
}
if (controller) { createArgs.controller = controller; }
2013-12-04 13:23:00 -05:00
this.setProperties({
style: null,
loading: false
2013-12-04 13:23:00 -05:00
});
this._containedView = this.createChildView(this.get('cloaks'), createArgs);
2013-12-04 13:23:00 -05:00
this.rerender();
}
},
/**
Removes the view from the DOM and tears down all observers.
@method cloak
*/
cloak: function() {
var self = this;
2013-12-04 13:23:00 -05:00
2014-06-01 20:55:54 -04:00
if (this._containedView && (this._state || this.state) === 'inDOM') {
2013-12-04 13:23:00 -05:00
var style = 'height: ' + this.$().height() + 'px;';
this.set('style', style);
this.$().prop('style', style);
// We need to remove the container after the height of the element has taken
// effect.
Ember.run.schedule('afterRender', function() {
if(self._containedView){
self._containedView.remove();
self._containedView = null;
}
2013-12-04 13:23:00 -05:00
});
}
},
willDestroyElement: function(){
if(this._containedView){
this._containedView.remove();
this._containedView = null;
}
this._super();
},
2013-12-04 13:23:00 -05:00
didInsertElement: function(){
if (!this._containedView) {
// setting default height
// but do not touch if height already defined
if(!this.$().height()){
var defaultHeight = 100;
if(this.get('defaultHeight')) {
defaultHeight = this.get('defaultHeight');
}
this.$().css('height', defaultHeight);
}
}
},
2013-12-04 13:23:00 -05:00
/**
Render the cloaked view if applicable.
@method render
*/
render: function(buffer) {
var containedView = this._containedView, self = this;
2014-06-01 20:58:46 -04:00
if (containedView && (containedView._state || containedView.state) !== 'inDOM') {
containedView.triggerRecursively('willInsertElement');
2013-12-04 13:23:00 -05:00
containedView.renderToBuffer(buffer);
containedView.transitionTo('inDOM');
Em.run.schedule('afterRender', function() {
if(self._containedView) {
self._containedView.triggerRecursively('didInsertElement');
}
2013-12-04 13:23:00 -05:00
});
}
}
});
Ember.Handlebars.registerHelper('cloaked-collection', function(options) {
var hash = options.hash,
types = options.hashTypes;
for (var prop in hash) {
if (types[prop] === 'ID') {
hash[prop + 'Binding'] = hash[prop];
delete hash[prop];
}
}
return Ember.Handlebars.helpers.view.call(this, Ember.CloakedCollectionView, options);
});
})();