File "front-optimize-images.js"

Full Path: /var/www/bvnghean.vn/wp-content/plugins/sneeit-framework/js/front-optimize-images.js
File size: 10.44 KB
MIME-type: text/plain
Charset: utf-8

// check if is firefox
var Sneeit_Img_Is_Firefox = typeof InstallTrigger !== 'undefined';
var Sneeit_Img_Is_IE = /*@cc_on!@*/false || !!document.documentMode;
var Sneeit_Img_Is_Retina = false;

function sneeit_img_is_high_density(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}

function sneeit_img_is_retina(){
    return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}

(function() {
    var root = (typeof exports === 'undefined' ? window : exports);
    
    function Retina() {}

    root.Retina = Retina;

    Retina.isRetina = function(){
        
    };
})();

// process retina images
Sneeit_Img_Is_Retina = (sneeit_img_is_high_density() || sneeit_img_is_retina());

if (Sneeit_Img_Is_Retina) {
	jQuery('img[data-retina!=""]').each(function(){
		jQuery(this).attr('src', jQuery(this).attr('data-retina'));
	});
}

function sneeit_img_srcset_parse(srcset) {
	
	var ret = srcset.split(', ');
	
	// colllect sets
	for (var i = 0; i < ret.length; i++) {
		ret[i] = ret[i].split(' ');
		if (ret[i].length == 2) {
			ret[i][1] = ret[i][1].replace('w', '');
			if (isNaN(ret[i][1])) {
				ret[i][1] = 0;
			}
			ret[i][1] = Number(ret[i][1]);
		}
	}
	
	// remove blank
	for (var i = ret.length - 1; i >= 0; i-=1) {
		if (ret[i].length != 2 || ret[i][1] == 0) {
			ret.splice(i, 1);
		}
	}

	// sort from low to high
	for (var i = 0; i < ret.length - 1; i++) {
		for (var j = i+1; j < ret.length; j++) {
			if (ret[i][1] > ret[j][1]) {
				var temp = ret[j];
				ret[j] = ret[i];
				ret[i] = temp;
			}
		}
	}

	return ret;
}
/*
You must make sure your image container has class name .item-thumbnail and add below css into your style sheet.

.item-thumbnail *, .item-thumbnail img {display:block;max-width: 9999px; max-height: 9999px; padding: 0!important;}
.item-thumbnail {overflow: hidden;display: block;z-index:9;}
*/
function sneeit_img_optimize_thumbnail_image(img) {
	var img = jQuery(img);
	var img_w = img.width();
	
	// this image may be in side a hidden container
	if (!img_w) {						
		img.removeClass('optimizing');
		return;		
	}
	
	// get the rest information		
	var thumb = img.parent().parent();
	var thumb_top = thumb.offset().top;
	var thumb_left = thumb.offset().left;
	var img_top = img.offset().top;
	var img_left = img.offset().left;
	
	var img_h = img.height();
	
	
	
	
	// very large width, may be browser slow when drawing image
	if ((img_w > img_h * 3 || Sneeit_Img_Is_Firefox) && (!img.is('.special'))) {
		img.addClass('special');
		// we must delay a bit to wait it drawing image completely
		setTimeout(function() {
			sneeit_img_optimize_thumbnail_image(img)
		}, 50);
		
		return;
	}
	
	if (thumb_left < img_left && img.parent().is('.sneeit-thumb-landscape')) {
		img
			.parent()
				.removeClass('sneeit-thumb-landscape')
				.addClass('sneeit-thumb-portrait');
		img.css('bottom', '0');
		
		// magazine cover image which has height larger than width
		// so may be main content of image can be on the top of image
		// (must update image width and height each time we resize with classes)
		var img_w = img.width();
		var img_h = img.height();
		
		if (img_h > 1.3 * img_w) {
			// we must allow it go to top
			img.css('bottom','auto');
		}
		
		// fix bug for firefox
		if (Sneeit_Img_Is_Firefox) {		
			var img_h = img.height();
			var thumb_h = thumb.height();
			var img_top = ( img_h - thumb_h ) / 2;
			img.css('top', '-' + img_top + 'px').css('bottom', 'auto');				
		}
	} else if (thumb_top < img_top && img.parent().is('.sneeit-thumb-portrait')) {
		img
			.parent()
				.removeClass('sneeit-thumb-portrait')
				.addClass('sneeit-thumb-landscape');
	}
	
	img.parents('.sneeit-thumb').addClass('optimized');	
	img.removeClass('optimizing');
}
function sneeit_img_optimize_thumbnail(images) {
	if (typeof(images) == 'undefined') {
		images = jQuery('.sneeit-thumb img');	
	}	
	
	// replace small images first
	images.each(function(){
		var img = jQuery(this);
		
		// if some process is optimizing, we skip
		if (img.is('.optimizing')) {
			return;
		}
		img.addClass('optimizing');
		
		// we will polling "skip" images
		// until "skip" class was removed by theme scripts
		// we will poll 100 times
		if (jQuery(this).is('.skip')) {
			var skip_img = this;			
			skip_img.sneeit_img_optimize_skip_thumnail_counter = 0;
			skip_img.sneeit_img_optimize_skip_thumnail = setInterval(function(){				
				if (skip_img.sneeit_img_optimize_skip_thumnail_counter >= 100) {
					clearInterval(skip_img.sneeit_img_optimize_skip_thumnail);
					skip_img.sneeit_img_optimize_skip_thumnail = null;
					jQuery(skip_img).removeClass('optimizing');
					return;
				}
				if (jQuery(skip_img).is(':not(.skip)')) {
					clearInterval(skip_img.sneeit_img_optimize_skip_thumnail);
					skip_img.sneeit_img_optimize_skip_thumnail = null;
					jQuery(skip_img).removeClass('optimizing');
					skip_img.sneeit_img_optimize_skip_thumnail_counter = 0;
					
					// the order is import, place this before return
					sneeit_img_optimize_thumbnail(jQuery(skip_img));						
					return;
				}
				
				skip_img.sneeit_img_optimize_skip_thumnail_counter++;
				
			}, 100);
				
			return;
		}		
		
		var src = img.attr('src');		
		
		// if did not wrapped with resizer
		if (img.parent().is('.sneeit-thumb-f')) {
			img.wrap('<span class="sneeit-thumb-landscape"></span>');
		}

		// process with images from media library
		// to select the right image to display
		var srcset = img.attr('data-ss');
		var src_ds = img.attr('data-s');
		var wid = img.attr('width');
		var hei = img.attr('height');		
						
		// this is an image from library which has all needed data		
		if (typeof(srcset) != 'undefined' && typeof(wid) != 'undefined' && typeof(hei) != 'undefined') {
			src = src_ds;
			wid = Number(wid);
			hei = Number(hei);
			var ss = sneeit_img_srcset_parse(srcset);				
			if (ss.length && wid && hei) {
				// find desire width
				var thumb = img.parents('.sneeit-thumb');			
				var thumb_h = thumb.height();				
				var new_w = thumb.width(); // assume image width = thumb width				
				var new_h = hei * new_w / wid; // so image heigh must be
				
				if (new_h < thumb_h) {
					// but seem new height is smaller than need
					// so we just increase width a bit wider
					new_w = wid * thumb_h / hei;
					new_h = thumb_h;
				}				
								
				// search in srcset to find appropriate src
				var new_src = '';
				
				// just select the largest image, if retina
				if (Sneeit_Img_Is_Retina) {
					new_w = new_w * 2;
				}
								
				
				// find for exactly first
				for (var i = 0; i < ss.length; i++) {
					if (ss[i][1] == new_w) {
						new_src = ss[i][0];
						break;
					}
				}
								
				// still can not found the exactly
				// then we need to scan the nearest (bigger)
				if (!new_src) {
					for (var i = 0; i < ss.length; i++) {
						if (ss[i][1] > new_w) {							
							new_src = ss[i][0];
							break;
						}
					}
					
					// found an image
					if (i < ss.length) {
						if (0 == i)	 { 
							new_src = ss[i][0]; // can not find lower image, choos the smallest
						} else if (ss[i-1][1] >= new_w * 0.9 || sneeit_optimize_img.use_smaller_thumbnails) {
							new_src = ss[i-1][0]; // if the lower not lower than 90%
						} else {
							new_src = ss[i][0]; // just pick the nearest bigger
						}
					}
					// not found any image, choose the biggest
					else {
						new_src = ss[ss.length-1][0]; // just pick the nearest bigger
					}
				}
				
				if (!new_src) {
					new_src = src; // not found, get adta from src
				} else {
					src = new_src; // update src for next processes
				}
				img.attr('src', new_src);
			}
		} else if ((typeof(src) == 'undefined' || !src || src == 'data:image/gif;base64,') && typeof(src_ds) != 'undefined') {			
			src = src_ds;
			img.attr('src', src);
		}
		
		// replace youtube thumbnail to largest image
		if (src.indexOf('youtube.com') != -1 && src.indexOf('/default.') != -1) {			
			img.attr('src', src.replace('/default.', '/mqdefault.'));			
		}		
		
		if (img.parent().is('.sneeit-thumb-a')) {
			img.parent().addClass('optimized');
			img.removeClass('optimizing');
			return;		
		}
		
		// immediately optimize if this was cached
		if (this.complete) {
			sneeit_img_optimize_thumbnail_image(this);
		} 
		// or we must waiting until they loaded
		else {
			img.on('load', function(){
				sneeit_img_optimize_thumbnail_image(this);
			});
		}		
	});
}

function sneeit_bg_thumb() {
	jQuery('.sneeit-bg-thumb').each(function(){
		var bg = jQuery(this).attr('data-bg');
		if (typeof(bg) == 'undefined' || !bg) {
			return;
		}
		
		jQuery(this)
			.css('background-image', 'url('+bg+')')
			.css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"',sizingMethod='scale')")
			.css("-ms-filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"',sizingMethod='scale')")
			.removeAttr('data-bg');
	});
}


/* trigger optimization events*/
/* when start site */
setTimeout(function(){		
	Sneeit_Img_Is_Retina = (sneeit_img_is_high_density() || sneeit_img_is_retina());
	sneeit_img_optimize_thumbnail();	
	sneeit_bg_thumb();
}, 300);
/* when window resize */
jQuery(window).resize(function(){
	setTimeout(function(){		
		Sneeit_Img_Is_Retina = (sneeit_img_is_high_density() || sneeit_img_is_retina());
		sneeit_img_optimize_thumbnail();		
		sneeit_bg_thumb();
	}, 300);
});
/* when ajax complete*/
jQuery( document ).ajaxComplete(function( event, request, settings) {
	if ('responseText' in request && request.responseText.indexOf('sneeit-thumb') != -1) {
		setTimeout(function(){		
			Sneeit_Img_Is_Retina = (sneeit_img_is_high_density() || sneeit_img_is_retina());
			sneeit_img_optimize_thumbnail(jQuery('.sneeit-thumb:not(.optimized) img'));
			sneeit_bg_thumb();
		}, 300);
	}	
});