From 8d782f19318326d0efaf0d078163fe8a5b0d1217 Mon Sep 17 00:00:00 2001 From: aFarkas Date: Thu, 5 May 2016 19:01:18 +0200 Subject: [PATCH] object-fit --- plugins/object-fit/README.md | 8 +++---- plugins/object-fit/ls.object-fit.js | 30 +++++++++++++++++-------- plugins/object-fit/ls.object-fit.min.js | 2 +- plugins/parent-fit/ls.parent-fit.js | 12 +++++----- plugins/parent-fit/ls.parent-fit.min.js | 2 +- 5 files changed, 33 insertions(+), 21 deletions(-) diff --git a/plugins/object-fit/README.md b/plugins/object-fit/README.md index 9b5b28f9..71ae1f69 100644 --- 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 @@ -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 index 46d9e68e..b0072cfc 100644 --- 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 index 6e0d73a4..6294148f 100644 --- a/plugins/object-fit/ls.object-fit.min.js +++ b/plugins/object-fit/ls.object-fit.min.js @@ -1,2 +1,2 @@ /*! lazysizes - v1.0.0-alpha */ -!function(){"use strict";function a(a){var b=getComputedStyle(a,null)||{},c=b.content||b.fontFamily||"",f=c.match(d)||"",g=f&&c.match(e)||"";return{fit:f&&f[1]||"",container:g}}function b(a,b){var c=lazySizes.parentFit.getParent(b.container)||a.parentNode,d=c.style,e=function(){var b=a.currentSrc||a.src;b&&(d.backgroundImage="url("+b+")")};a._lazysizesParentFit=b.fit,b.container&&(a._lazysizesParentContainer=b.container),a.addEventListener("load",function(){lazySizes.rAF(e)},!0),lazySizes.rAF(function(){d.backgroundRepeat="no-repeat",d.backgroundPosition="center",d.backgroundSize=b.fit,a.style.display="none",a.setAttribute("data-parent-fit",b.fit),a._lazysizesParentFit&&delete a._lazysizesParentFit,b.container&&(a.setAttribute("data-parent-container",b.container),a._lazysizesParentContainer&&delete a._lazysizesParentContainer),a.complete&&e()})}var c="objectFit"in document.createElement("a").style,d=/object-fit["']*\s*:\s*["']*(contain|cover)/,e=/object-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/;c||addEventListener("lazybeforesizes",function(c){if(!c.defaultPrevented&&c.detail.dataAttr){var d=c.target,e=a(d);e.fit&&b(d,e)}},!0)}(); \ No newline at end of file +!function(){"use strict";function a(a){var b=getComputedStyle(a,null)||{},c=b.content||b.fontFamily||"",d=c.match(f)||"",e=d&&c.match(g)||"",j=d&&c.match(h)||"";return{fit:d&&d[1]||"",container:e,position:i[j]||j||"center"}}function b(a,b){var c=lazySizes.parentFit.getParent(a,b.container)||a.parentNode,d=c.style,e=function(){var b=a.currentSrc||a.src;b&&(d.backgroundImage="url("+b+")")};a._lazysizesParentFit=b.fit,b.container&&(a._lazysizesParentContainer=b.container),a.addEventListener("load",function(){lazySizes.rAF(e)},!0),lazySizes.rAF(function(){d.backgroundRepeat="no-repeat",d.backgroundPosition=b.position,d.backgroundSize=b.fit,a.style.display="none",a.setAttribute("data-parent-fit",b.fit),a._lazysizesParentFit&&delete a._lazysizesParentFit,b.container&&(a.setAttribute("data-parent-container",b.container),a._lazysizesParentContainer&&delete a._lazysizesParentContainer),a.complete&&e()})}var c=document.createElement("a").style,d="objectFit"in c,e="objectPosition"in c,f=/object-fit["']*\s*:\s*["']*(contain|cover)/,g=/object-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,h=/object-position["']*\s*:\s*["']*(.+?)(?=($|,|'|"|;))/,i={center:"center","50% 50%":"center"};d&&e||addEventListener("lazyunveilread",function(c){var e=c.target,f=a(e);f.fit&&(d&&"center"==f.position||b(e,f))},!0)}(); \ No newline at end of file diff --git a/plugins/parent-fit/ls.parent-fit.js b/plugins/parent-fit/ls.parent-fit.js index 4602f391..c72ec89b 100644 --- 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 index c133fd42..3e68fa85 100644 --- a/plugins/parent-fit/ls.parent-fit.min.js +++ b/plugins/parent-fit/ls.parent-fit.min.js @@ -1,2 +1,2 @@ /*! lazysizes - v1.0.0-alpha */ -!function(a,b){"use strict";if(a.addEventListener){var c=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,d=/parent-fit["']*\s*:\s*["']*(contain|cover|width)/,e=/parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,f=/^picture$/i,g=function(a){return getComputedStyle(a,null)||{}},h={getParent:function(b,c){var d,e=b.parentNode;return"self"!=c&&(d=c&&(e.closest||a.jQuery)?(e.closest?e.closest(c):jQuery(e).closest(c)[0])||e:e),d&&f.test(d.nodeName||"")&&(d=d.parentNode),d},getFit:function(a){var b,c,f=g(a),i=f.content||f.fontFamily,j={fit:a._lazysizesParentFit||a.getAttribute("data-parent-fit")};return!j.fit&&i&&(b=i.match(d))&&(j.fit=b[1]),j.fit?(c=a._lazysizesParentContainer||a.getAttribute("data-parent-container"),!c&&i&&(b=i.match(e))&&(c=b[1]),j.parent=h.getParent(a,c)):j.fit=f.objectFit,j},getImageRatio:function(b){var d,e,g,h,i=b.parentNode,j=i&&f.test(i.nodeName||"")?i.querySelectorAll("source, img"):[b];for(d=0;d40&&(c=b/d)&&("cover"==h&&e>c||"contain"==h&&c>e)&&(f=b*(e/c))),f):b}},i=function(){a.lazySizes&&(lazySizes.parentFit||(lazySizes.parentFit=h),a.removeEventListener("lazybeforesizes",i,!0))};a.addEventListener("lazybeforesizes",i,!0),b.addEventListener("lazybeforesizes",function(a){if(!a.defaultPrevented){var b=a.target;a.detail.width=h.calculateSize(b,a.detail.width)}}),setTimeout(i)}}(window,document); \ No newline at end of file +!function(a,b){"use strict";if(a.addEventListener){var c=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,d=/parent-fit["']*\s*:\s*["']*(contain|cover|width)/,e=/parent-container["']*\s*:\s*["']*(.+?)(?=(\s|$|,|'|"|;))/,f=/^picture$/i,g=function(a){return getComputedStyle(a,null)||{}},h={getParent:function(b,c){var d,e=b.parentNode;return"self"!=c&&(c&&(e.closest||a.jQuery)?d=(e.closest?e.closest(c):jQuery(e).closest(c)[0])||e:(d=e,d&&f.test(d.nodeName||"")&&(d=d.parentNode))),d},getFit:function(a){var b,c,f=g(a),i=f.content||f.fontFamily,j={fit:a._lazysizesParentFit||a.getAttribute("data-parent-fit")};return!j.fit&&i&&(b=i.match(d))&&(j.fit=b[1]),j.fit?(c=a._lazysizesParentContainer||a.getAttribute("data-parent-container"),!c&&i&&(b=i.match(e))&&(c=b[1]),j.parent=h.getParent(a,c)):j.fit=f.objectFit,j},getImageRatio:function(b){var d,e,g,h,i=b.parentNode,j=i&&f.test(i.nodeName||"")?i.querySelectorAll("source, img"):[b];for(d=0;d40&&(c=b/d)&&("cover"==h&&e>c||"contain"==h&&c>e)&&(f=b*(e/c))),f):b}},i=function(){a.lazySizes&&(lazySizes.parentFit||(lazySizes.parentFit=h),a.removeEventListener("lazyunveilread",i,!0))};a.addEventListener("lazyunveilread",i,!0),b.addEventListener("lazybeforesizes",function(a){if(!a.defaultPrevented){var b=a.target;a.detail.width=h.calculateSize(b,a.detail.width)}}),setTimeout(i)}}(window,document); \ No newline at end of file