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

449 lines
14 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({
2014-12-04 08:48:25 -05:00
cloakView: Ember.computed.alias('itemViewClass'),
2013-12-04 13:23:00 -05:00
topVisible: null,
bottomVisible: null,
offsetFixedTopElement: null,
offsetFixedBottomElement: null,
2014-12-04 08:48:25 -05:00
loadingHTML: 'Loading...',
scrollDebounce: 10,
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,
2014-12-04 08:48:25 -05:00
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 wrapperTop = this.get('wrapperTop')>>0;
while(max>min){
var mid = Math.floor((min + max) / 2),
// in case of not full-window scrolling
$view = childViews[mid].$(),
viewBottom = $view.position().top + wrapperTop + $view.height();
if (viewBottom > viewportTop) {
max = mid-1;
} else {
min = mid+1;
}
2013-12-04 13:23:00 -05:00
}
return min;
2013-12-04 13:23:00 -05:00
},
2013-12-04 13:23:00 -05:00
/**
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 self = this,
toUncloak = [],
onscreen = [],
onscreenCloaks = [],
// 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'));
onscreenCloaks.push(view);
2013-12-04 13:23:00 -05:00
}
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));
this._uncloak = toUncloak;
if(this._nextUncloak){
Em.run.cancel(this._nextUncloak);
this._nextUncloak = null;
}
Em.run.schedule('afterRender', this, function() {
onscreenCloaks.forEach(function (v) {
if(v && v.uncloak) {
v.uncloak();
}
});
2013-12-04 13:23:00 -05:00
toCloak.forEach(function (v) { v.cloak(); });
if (self._nextUncloak) { Em.run.cancel(self._nextUncloak); }
self._nextUncloak = Em.run.later(self, self.uncloakQueue,50);
2013-12-04 13:23:00 -05:00
});
for (var j=bottomView; j<childViews.length; j++) {
var checkView = childViews[j];
if (!checkView._containedView) {
var loadingHTML = this.get('loadingHTML');
if (!Em.isEmpty(loadingHTML) && !checkView.get('loading')) {
checkView.$().html(loadingHTML);
2013-12-04 13:23:00 -05:00
}
return;
}
}
},
uncloakQueue: function(){
var maxPerRun = 3, delay = 50, processed = 0, self = this;
if(this._uncloak){
while(processed < maxPerRun && this._uncloak.length>0){
var view = this._uncloak.shift();
if(view && view.uncloak && !view._containedView){
Em.run.schedule('afterRender', view, view.uncloak);
processed++;
}
}
if(this._uncloak.length === 0){
this._uncloak = null;
} else {
Em.run.schedule('afterRender', self, function(){
if(self._nextUncloak){
Em.run.cancel(self._nextUncloak);
}
self._nextUncloak = Em.run.next(self, function(){
if(self._nextUncloak){
Em.run.cancel(self._nextUncloak);
}
self._nextUncloak = Em.run.later(self,self.uncloakQueue,delay);
});
});
}
}
},
2013-12-04 13:23:00 -05:00
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'),
2014-12-04 08:48:25 -05:00
scrollDebounce = this.get('scrollDebounce'),
2013-12-04 13:23:00 -05:00
onScrollMethod = function() {
2014-12-04 08:48:25 -05:00
Ember.run.debounce(self, 'scrollTriggered', scrollDebounce);
2013-12-04 13:23:00 -05:00
};
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'],
2014-12-01 12:54:59 -05:00
_containedView: null,
_scheduled: null,
init: function() {
this._super();
this._scheduled = false;
this._childViews = [];
},
setContainedView: function(cv) {
if (this._childViews[0]) {
this._childViews[0].destroy();
this._childViews[0] = cv;
}
if (cv) {
cv.set('_parentView', this);
cv.set('templateData', this.get('templateData'));
this._childViews[0] = cv;
} else {
this._childViews.clear();
2014-12-01 12:54:59 -05:00
}
if (!this._elementCreated || this._scheduled) return;
2014-12-01 12:54:59 -05:00
this._scheduled = true;
this.set('_containedView', cv);
Ember.run.schedule('render', this, this.updateChildView);
},
render: function (buffer) {
var el = buffer.element();
this._childViewsMorph = buffer.dom.createMorph(el, null, null, el);
},
updateChildView: function () {
this._scheduled = false;
if (!this._elementCreated || this.isDestroying || this.isDestroyed) { return; }
var childView = this._containedView;
if (childView && !childView._elementCreated) {
this._renderer.renderTree(childView, this, 0);
}
},
2013-12-04 13:23:00 -05:00
/**
Triggers the set up for rendering a view that is cloaked.
@method uncloak
*/
uncloak: function() {
var state = this._state || this.state;
if (state !== 'inDOM' && state !== 'preRender') { return; }
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
});
2014-12-04 08:48:25 -05:00
this.setContainedView(this.createChildView(this.get('cloaks'), createArgs));
2013-12-04 13:23:00 -05:00
}
},
/**
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);
2014-12-04 08:48:25 -05:00
2013-12-04 13:23:00 -05:00
// We need to remove the container after the height of the element has taken
// effect.
Ember.run.schedule('afterRender', function() {
2014-12-04 08:48:25 -05:00
self.setContainedView(null);
2013-12-04 13:23:00 -05:00
});
}
},
_setHeights: 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);
}
}
2014-12-04 08:48:25 -05:00
}.on('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);
});
})();