PF.fn.listing.columnizer = function(forced, animation_time, hard_forced) {
var device_to_columns = { // default
phone: 2,
phablet: 2,
tablet: 4,
laptop: 5,
desktop: 6
};
if(typeof forced !== "boolean") var forced = false;
if(typeof PF.obj.listing.mode == "undefined") forced = true;
if(typeof hard_forced !== "boolean") {
var hard_forced = false,
default_hard_forced = true;
} else {
var default_hard_forced = false;
}
if(!hard_forced && default_hard_forced) {
if(width !== $(window).width() || forced) {
hard_forced = true;
}
}
if(typeof animation_time == "undefined") var animation_time = 600;
var $container = $("#content-listing-tabs").exists() ? $(PF.obj.listing.selectors.content_listing_visible, "#content-listing-tabs") : $(PF.obj.listing.selectors.content_listing),
$pad_content_listing = $(PF.obj.listing.selectors.pad_content, $container),
list_mode = "responsive",
$list_item = $(forced || hard_forced ? PF.obj.listing.selectors.list_item : PF.obj.listing.selectors.list_item+":not(.jsly)", $container);
$container.addClass("jsly");
// Get the device colums from global config
if(typeof PF.obj.config.device_to_columns !== "undefined") {
device_to_columns = $.extend({}, device_to_columns, PF.obj.config.device_to_columns);
}
// Get the device columns from the dom
if($container.data("device-columns")) {
device_to_columns = $.extend({}, device_to_columns, $container.data("device-columns"));
}
console.log(device_to_columns);
PF.obj.listing.mode = list_mode;
PF.obj.listing.device = PF.fn.getDeviceName();
if(!$list_item.exists()) return;
if(typeof $container.data("columns") !== "undefined" && !forced && !hard_forced){
PF.obj.listing.columns = $container.data("columns");
PF.obj.listing.columns_number = $container.data("columns").length - 1;
PF.obj.listing.current_column = $container.data("current_column");
} else {
var $list_item_1st = $list_item.first();
$list_item_1st.css("width", "");
PF.obj.listing.columns = new Array();
PF.obj.listing.columns_number = device_to_columns[PF.fn.getDeviceName()];
for(i=0; i<PF.obj.listing.columns_number; i++){
PF.obj.listing.columns[i+1] = 0;
}
PF.obj.listing.current_column = 1;
}
$pad_content_listing.css("width", "100%");
$list_item.each(function(index){
$(this).addClass("jsly");
var $list_item_img = $(".list-item-image", this),
$list_item_src = $(".list-item-image img", this),
$list_item_thumbs = $(".list-item-thumbs", this),
isJslyLoaded = $list_item_src.hasClass("jsly-loaded");
$list_item_src.show();
if(hard_forced) {
$(this).css({top: "", left: "", height: "", position: ""});
$list_item_img.css({maxHeight: "", height: ""});
$list_item_src.removeClass("jsly").css({width: "", height: ""}).parent().css({
marginLeft: "",
marginTop: ""
});
$("li", $list_item_thumbs).css({width: "", height: ""});
}
var width_responsive = PF.obj.listing.columns_number == 1 ? "100%" : parseInt((1/PF.obj.listing.columns_number)*($container.width() - (10 * (PF.obj.listing.columns_number - 1))) + "px");
$(this).css("width", width_responsive);
if(PF.obj.listing.current_column > PF.obj.listing.columns_number){
PF.obj.listing.current_column = 1
}
$(this).attr("data-col", PF.obj.listing.current_column);
if(!$list_item_src.exists()){
var empty = true;
$list_item_src = $(".image-container .empty", this);
}
var already_shown = $(this).is(":visible");
$list_item.show();
var image = {
w: parseInt($list_item_src.attr("width")),
h: parseInt($list_item_src.attr("height"))
};
image.ratio = image.w / image.h;
//$list_item_src.removeAttr("width height"); // para fixed
if(hard_forced && PF.obj.listing.columns_number > 1) {
$list_item_src.css({width: "auto", height: "auto"});
$(".image-container", this).css({width: ""});
} else {
if(PF.obj.listing.columns_number == 1) {
$(".image-container:not(.list-item-avatar-cover)", this).css($list_item_img.hasClass("fixed-size") ? (image.ratio < 1 ? {width: "100%"} : {height: "100%"}) : {width: "100%"});
$list_item_src.css($list_item_img.hasClass("fixed-size") ? (image.ratio < 1 ? {width: "100%", height: "auto"} : {height: "100%", width: "auto"}) : {width: "100%", height: "auto"});
}
}
// Meet the minHeight?
if(empty || ($list_item_img.css("min-height") && !$list_item_src.hasClass("jsly"))) {
var isFixed = $list_item_img.hasClass("fixed-size"),
list_item_img_min_height = parseInt($(".list-item-image", this).css("height")),
col = {
w: $(this).width(),
h: isFixed ? $(this).width() : null
},
magicWidth = Math.min(image.w, image.w < col.w ? image.w : col.w);
if(PF.obj.listing.columns_number !== 1) {
if(isFixed){
$list_item_img.css({height: col.w}); // Sets the item container height
if(image.ratio <= 3 && (image.ratio > 1 || image.ratio==1)) { // Landscape or square
image.h = Math.min(image.h, image.w < col.w ? image.w : col.w);
image.w = image.h * image.ratio;
} else { // Portrait
image.w = magicWidth;
image.h = image.w / image.ratio;
}
} else { // Fluid height
image.w = magicWidth;
if(image.ratio >= 3 || image.ratio < 1 || image.ratio==1){ // Portrait or square
image.h = image.w / image.ratio;
} else { // Landscape
image.h = Math.min(image.h, image.w);
image.w = image.h * image.ratio;
}
}
$list_item_src.css({width: image.w, height: image.h});
}
if($(".image-container", this).is(".list-item-avatar-cover")) {
$list_item_src.css(isFixed ? {width: "auto", height: "100%"} : {width: "100%", height: "auto"});
}
if($list_item_src.height() != 0 && ($list_item_src.height() !== "0" && $list_item_img.height() > $list_item_src.height() || $list_item_img.hasClass("fixed-size"))){
$list_item_src.parent().css({
"marginTop": ($list_item_img.outerHeight() - $list_item_src.height())/2
});
}
if($list_item_img.width() < $list_item_src.width()){
$list_item_src.parent().css({
"marginLeft": - (($list_item_src.outerWidth()-$list_item_img.width())/2)
});
}
var list_item_src_pitfall_x = Math.max($list_item_src.position().left * 2, 0),
list_item_src_pitfall_y = Math.max($list_item_src.position().top * 2, 0);
// Do we need upscale and is safe to upscale the image?
/*if(list_item_src_pitfall_x > 0 || list_item_src_pitfall_y > 0){
var pitfall_ratio_x = list_item_src_pitfall_x/$list_item_img.width(),
pitfall_ratio_y = list_item_src_pitfall_y/$list_item_img.height(),
pitfall = {};
if(pitfall_ratio_x <= .25 && pitfall_ratio_y <= .25){
if(pitfall_ratio_x > pitfall_ratio_y){
pitfall.width = list_item_src_pitfall_x + $list_item_img.width();
pitfall.height = pitfall.width / image.ratio;
} else {
pitfall.height = list_item_src_pitfall_y + $list_item_src.height();
pitfall.width = pitfall.height * image.ratio;
}
$list_item_src.css(pitfall);
$list_item_src.parent().css({
"marginLeft": -(($list_item_src.width()-$list_item_img.width())/2),
"marginTop": 0
});
}
}*/
if($list_item_thumbs.exists()) {
$("li", $list_item_thumbs).css({width: 100/$("li", $list_item_thumbs).length + "%"}).css({height: $("li", $list_item_thumbs).width()});
}
if(!already_shown) {
$list_item.hide();
}
}
$pad_content_listing.css("visibility", "visible");
if(!$list_item_src.hasClass("jsly") && $(this).is(":hidden")) {
$(this).css('top', "100%");
}
PF.obj.listing.columns[PF.obj.listing.current_column] += $(this).outerHeight(true);
if(PF.obj.listing.columns_number == 1) {
$(this).removeClass("position-absolute");
} else {
if($(this).is(":animated")) {
animation_time = 0;
}
$(this).addClass("position-absolute").animate({
left: $(this).outerWidth(true)*(PF.obj.listing.current_column - 1)
}, animation_time);
$(this).animate({
top: PF.obj.listing.columns[PF.obj.listing.current_column] - $(this).outerHeight(true)
}, animation_time);
}
if(already_shown) {
$list_item.show();
}
if(!isJslyLoaded) {
$list_item_src.addClass("jsly").hide().imagesLoaded(function(){
$(this).fadeIn(250).addClass("jsly-loaded");
});
}
PF.obj.listing.current_column++
});
$container.data({"columns": PF.obj.listing.columns, "current_column": PF.obj.listing.current_column});
var content_listing_height = 0;
if(PF.obj.listing.columns_number == 1) {
content_listing_height = "auto";
} else {
content_listing_height = 0;
$.each(PF.obj.listing.columns, function(i, v){
if(v>content_listing_height) {
content_listing_height = v;
}
});
}
$pad_content_listing.height(content_listing_height);
PF.obj.listing.width = $container.width();
PF.fn.list_fluid_width();
$container.data("list-mode", PF.obj.listing.mode);
$(PF.obj.listing.selectors.content_listing_visible).data("queued", false);
}