object-fit

felthy · May 5, 2016 · 8d782f1 · 8d782f1
1 parent 38df01c
commit 8d782f1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/plugins/object-fit/README.md b/plugins/object-fit/README.md
@@ -1,11 +1,11 @@
 #lazySizes object fit extension
 
-This extension polyfill object-fit: cover and contain properties in not supporting browsers and is built on top of lazysizes `data-sizes="auto"` feature and the [parent-fit plugin](../parent-fit).
+This extension polyfills `object-fit`: `cover` and `contain` properties as also the `object-position` in non supporting browsers and is built on top of the [parent-fit plugin](../parent-fit).
 
 ##Usage
 
 ###Include JS files:
-Include lazysizes, lazysizes parent-fit, lazysizes object fit and lazysizes respimg plugin. Lazysizes object-fit and respimg plugin are only needed in browser that don't support object fit or responsive images.
+Include lazysizes, lazysizes parent-fit, lazysizes object fit and optionally lazysizes respimg plugin. Lazysizes object-fit and respimg plugin are only needed in browser that don't support object fit or responsive images.
 
 ```html
 <script src="../plugins/parent-fit/ls.parent-fit.min.js"></script>
@@ -39,7 +39,7 @@ It requires you to write an additional container, that has the same dimensions a
 
 ###CSS
 
-To
+To init the plugin on an image simply use the `font-family` property directly on your image.
 
 ```css
 .imagecontainer {
@@ -64,6 +64,6 @@ To
 	height: 100%;
 
 	object-fit: contain;
-	content: "object-fit: contain";
+	font-family: "object-fit: contain";
 }
 ```
diff --git a/plugins/object-fit/ls.object-fit.js b/plugins/object-fit/ls.object-fit.js
@@ -1,23 +1,36 @@
 (function(){
 	'use strict';
-	var support = 'objectFit' in document.createElement('a').style;
+	var style = document.createElement('a').style;
+	var fitSupport = 'objectFit' in style;
+	var positionSupport = 'objectPosition' in style;
 	var regCssFit = /object-fit["']*\s*:\s*["']*(contain|cover)/;
 	var regCssObject = /object-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/;
+	var regCssPosition = /object-position["']*\s*:\s*["']*(.+?)(?=($|,|'|"|;))/;
+	var positionDefaults = {
+		center: 'center',
+		'50% 50%': 'center',
+	};
 
 	function getObject(element){
 		var css = (getComputedStyle(element, null) || {});
-		var content = css.content || css.fontFamily || '';
+		var content = css.fontFamily || '';
 		var objectFit = content.match(regCssFit) || '';
 		var objectContainer = objectFit && content.match(regCssObject) || '';
+		var objectPosition = objectFit && content.match(regCssPosition) || '';
+
+		if(objectPosition){
+			objectPosition = objectPosition[1];
+		}
 
 		return {
 			fit: objectFit && objectFit[1] || '',
-			container: objectContainer,
+			container: objectContainer && objectContainer[1],
+			position: positionDefaults[objectPosition] || objectPosition || 'center',
 		};
 	}
 
 	function initFix(element, config){
-		var container = lazySizes.parentFit.getParent(config.container) || element.parentNode;
+		var container = lazySizes.parentFit.getParent(element, config.container) || element.parentNode;
 		var containerStyle = container.style;
 
 		var onChange = function(){
@@ -39,7 +52,7 @@
 
 		lazySizes.rAF(function(){
 			containerStyle.backgroundRepeat = 'no-repeat';
-			containerStyle.backgroundPosition = 'center';
+			containerStyle.backgroundPosition = config.position;
 			containerStyle.backgroundSize = config.fit;
 			element.style.display = 'none';
 
@@ -61,13 +74,12 @@
 		});
 	}
 
-	if(!support){
-		addEventListener('lazybeforesizes', function(e){
-			if(e.defaultPrevented || !e.detail.dataAttr){return;}
+	if(!fitSupport || !positionSupport){
+		addEventListener('lazyunveilread', function(e){
 			var element = e.target;
 			var obj = getObject(element);
 
-			if(obj.fit){
+			if(obj.fit && (!fitSupport || (obj.position != 'center'))){
 				initFix(element, obj);
 			}
 		}, true);

diff --git a/plugins/object-fit/ls.object-fit.min.js b/plugins/object-fit/ls.object-fit.min.js
diff --git a/plugins/parent-fit/ls.parent-fit.js b/plugins/parent-fit/ls.parent-fit.js
@@ -23,11 +23,11 @@
 					;
 				} else {
 					parent = parentNode;
-				}
-			}
 
-			if(parent && regPicture.test(parent.nodeName || '')){
-				parent = parent.parentNode;
+					if(parent && regPicture.test(parent.nodeName || '')){
+						parent = parent.parentNode;
+					}
+				}
 			}
 
 			return parent;
@@ -126,11 +126,11 @@
 			if(!lazySizes.parentFit){
 				lazySizes.parentFit = parentFit;
 			}
-			window.removeEventListener('lazybeforesizes', extend, true);
+			window.removeEventListener('lazyunveilread', extend, true);
 		}
 	};
 
-	window.addEventListener('lazybeforesizes', extend, true);
+	window.addEventListener('lazyunveilread', extend, true);
 
 	document.addEventListener('lazybeforesizes', function(e){
 		if(e.defaultPrevented){return;}

diff --git a/plugins/parent-fit/ls.parent-fit.min.js b/plugins/parent-fit/ls.parent-fit.min.js