Skip to content

Commit

Permalink
V0.9.7 really improved perfs for big pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@molokoloco
molokoloco committed Jul 6, 2013
1 parent 5b94b9f commit c3373e2
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 47 deletions.
135 changes: 95 additions & 40 deletions jquery.plugins/jquery.colonizr.js
View file
@@ -1,6 +1,6 @@
/* =============================================================
*
* jQuery colonizr V0.9.6 - Molokoloco 2013 - Copyleft
* jQuery colonizr V0.9.7 - Molokoloco 2013 - Copyleft
* "In-between titles Multicols paragraphes" (Bootstrap-like plugin)
*
* Blog post : http://www.b2bweb.fr/molokoloco/jquery-colonize-plugin-in-between-titles-multicols-paragraphes-with-css3/
Expand Down Expand Up @@ -39,6 +39,27 @@
});
* ============================================================== */
// REQUEST ANIMATION FRAME
if (!('requestAnimationFrame' in window)) {
var lastTime = 0,
vendors = ['webkit', 'moz', 'ms', 'o'];

for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
}

if (!('requestAnimationFrame' in window)) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime(),
timeToCall = Math.max(0, 16 - (currTime - lastTime)),
id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
}


!function ($) {
Expand All @@ -52,18 +73,17 @@
this.options = $.extend(true, {}, $.fn.colonizr.defaults, typeof options == 'object' && options || {}); // Merge user options
this.$container = $(element);
this.wrapper = '<div class="'+this.options.css+'"/>';
this.cWidth, this.intentNextP, this.lineMinHeight, this.maxHeight;
this.cWidth, this.intentNextP, this.lineMinHeight, this.maxHeight, this.chaptersTotal;
this.refresh();
};
}

Colonizr.prototype = {

constructor: Colonizr,

colsExtractor: function (i, e) { // Cannot be done with $.wrapAll() || $.nextAll() // :-(
colsExtractor: function (i, $element) { // Cannot be done with $.wrapAll() || $.nextAll() // :-(

var $element = $(e),
$next = $element.next(),
var $next = $element.next(),
$collection = [],
jumpNext = false,
totalHeight = 0,
Expand All @@ -81,21 +101,21 @@
if ($next.length) $element = $next; // Move inserting after skipped elements...
$next = $next.next();
if ($next.length) jumpNext = true; // Continue wrapping ?
$next = null;
$next = null; // break
}
}

if ($collection.length) {
for (var j = 0, len = $collection.length; j < len; j++) {
estimateHeight += $collection[j].outerHeight(); // Work fine if "p" margin (2) == ".multiplecolumns > p" margin (2 * nb cols)
estimateHeight += $collection[j].data('h'); // Work fine if "p" margin (2) == ".multiplecolumns > p" margin (2 * nb cols)
}
}

if ($collection.length && estimateHeight > this.lineMinHeight) {
var $wrapper = $(this.wrapper);
for (var j = 0, len = $collection.length; j < len; j++) {
if (totalHeight == 0 && $collection[j].html() == '&nbsp;') continue; // first col element empty <p> ?
totalHeight += $collection[j].outerHeight(); // P height considered nearly the same as futur Col height
if (totalHeight < 1 && $collection[j].html() == '&nbsp;') continue; // first col element empty <p> ?
totalHeight += $collection[j].data('h'); // P height considered nearly the same as futur Col height
$wrapper.append($collection[j].detach()); // Extract P
if ($collection[(j + 1)] && this.maxHeight <= (totalHeight + $collection[(j + 1)].outerHeight())) { // Cut Cols if > screen height
$wrapper.insertAfter($element);
Expand All @@ -106,44 +126,79 @@
}
$wrapper.insertAfter($element); // Append new COL div container
}
if (jumpNext) {
this.colsExtractor(i, $element.next());
}
else if ((i+1) == this.chaptersTotal) {
this.$container.trigger('finish'); //.colonizr
}
},

if (jumpNext) this.colsExtractor(0, $element.next());
cleanColumns: function() {
var $exists = this.$container.find('.'+this.options.css);
if (!$exists.length) return;
// Existing this.wrappers ?
var $parent = that.$container.parent(),
$prev = this.$container.prev();
this.$container.detach(); // Detach DOM
$exists.each(function() {
var $this = $(this);
$($this.html()).insertBefore($this);
$this.remove();
});
if ($prev.length) this.$container.insertAfter($prev);
else this.$container.appendTo($parent);
},

refresh: function () {
this.cWidth = this.$container.width();
this.maxHeight = this.options.maxHeight;
this.intentNextP = 0;
this.lineMinHeight = 0;

if (this.options.maxHeight < 1)
this.maxHeight = Math.max(80, $(window).height() * 0.8); // (Min/) Max cols height ?
this.cleanColumns();

var that = this,
$chapters = that.$container.find(that.options.chapters),
$parent = that.$container.parent(),
$prev = that.$container.prev();

that.chaptersTotal = $chapters.length;
that.cWidth = that.$container.width();
that.maxHeight = that.options.maxHeight;
that.intentNextP = 0;
that.lineMinHeight = 0;

var $p = $('<p>A</p>').appendTo(this.$container);
this.lineMinHeight = $p.outerHeight() * this.options.minLine;
if (that.options.maxHeight < 1)
that.maxHeight = Math.max(80, $(window).height() * 0.8); // (Min/) Max cols height ?

var $p = $('<p>A</p>').appendTo(that.$container);
that.lineMinHeight = $p.outerHeight() * that.options.minLine;
$p.remove();

var $exists = this.$container.find('.'+this.options.css);
if ($exists.length) { // Existing this.wrappers ?
var exists = '',
$prev = this.$container.prev();
this.$container.detach(); // Detach DOM
$exists.each(function() {
var $this = $(this);
$($this.html()).insertBefore($this);
$this.remove();
that.$container.on('finish', function() {
if ($prev.length) that.$container.insertAfter($prev);
else that.$container.appendTo($parent);
});

$chapters // We cannot detach the container before operating because we need the height of some elements inside
.each(function(i, e) {
var $next = $(e).next();
while ($next.length) {
if ($next.is(that.options.chapters)) {
$next = []; // Break
}
else {
if ($next.length && $next.is(that.options.take)) $next.data('h', $next.outerHeight());
if ($next.length) $next = $next.next();
}
}
});
this.$container.insertAfter($prev);
}

var that = this;
this.$container
// .detach() // We cannot detach the container before operating because we need the height of some elements inside
.find(this.options.chapters)
//.each($.proxy(this.colsExtractor, this));
.each(function(i, e) {
setTimeout($.proxy(that.colsExtractor, that), 0, i, e); // Deferred for the so long #GuezNet page !
});
that.$container = that.$container.detach(); // Big optim for big page ;)

$chapters.each(function(i, e) {
//setTimeout($.proxy(that.colsExtractor, that), 0, i, $(e)); // Deferred for the so long #GuezNet page !
//window.requestAnimationFrame(that.colsExtractor.bind(that, i, $(e)));
that.colsExtractor(i, $(e));
});

}
};

Expand Down Expand Up @@ -186,7 +241,7 @@
$('[data-colonizr="true"]').each(function () {
var $spy = $(this);
$spy.colonizr($spy.data());
})
});
});

}(window.jQuery);
}(window.jQuery)
14 changes: 7 additions & 7 deletions jquery.plugins/jquery.colonizr.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit c3373e2

Please sign in to comment.