imgix-optimizer 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/Gemfile.lock +2 -2
- data/dist/crds.html +57 -0
- data/dist/imgix-optimizer-0.0.6.min.js +1 -0
- data/dist/imgix-optimizer.js +1063 -191
- data/dist/index.html +209 -85
- data/package-lock.json +328 -332
- data/package.json +2 -1
- data/src/{imgix_bg_image.js → background_image.js} +55 -16
- data/src/{imgix_image.js → image.js} +80 -10
- data/src/main.js +0 -4
- data/src/optimizer.js +15 -7
- data/src/polyfills/object_assign.js +32 -0
- metadata +7 -6
- data/dist/imgix-optimizer-0.0.5.min.js +0 -1
- data/vendor/assets/javascripts/imgix-optimizer.js +0 -695
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6630b32252b9019d7cdcb4b0652f7d2dcf2dd09176f624cbbdfa64f041b3dcbb
|
|
4
|
+
data.tar.gz: 9715b46c1e2520797153afdbbb1a679646417a8ea1876504cce8959009011455
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6c8152c7c744eb1e66a8a136330044e6a96ea75842622421904aa4709d9a5bdfc4e66c397e3a80e7f1cefb96b1ac052664d81e7fba875345e937c7e82b5cc624
|
|
7
|
+
data.tar.gz: 94fcbdfb69bc9c3fd5934bcd9a969982d9e3e0d7b6d2c3d43363c8d95c2d779b7b8b641a9793b71fc9d92f4064924f33422026d8462a6ad34bd094899af50b93
|
data/.gitignore
CHANGED
data/Gemfile.lock
CHANGED
data/dist/crds.html
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<title>IMGIX Optimizer</title>
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
+
|
|
9
|
+
<link rel="stylesheet" href="http://d1tmclqz61gqwd.cloudfront.net/styles/crds-styles-3.0.9.css">
|
|
10
|
+
<link rel="stylesheet" href="main.css" />
|
|
11
|
+
|
|
12
|
+
<script
|
|
13
|
+
src="https://code.jquery.com/jquery-2.2.4.js"
|
|
14
|
+
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
|
|
15
|
+
crossorigin="anonymous"
|
|
16
|
+
></script>
|
|
17
|
+
<script src="https://rawgit.com/imgix/imgix.js/master/dist/imgix.min.js"></script>
|
|
18
|
+
<script src="imgix-optimizer.js"></script>
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<div class="feature-cards card-deck--expanded-layout">
|
|
24
|
+
<div class="card">
|
|
25
|
+
<a href="/andover" class="block">
|
|
26
|
+
<img
|
|
27
|
+
src="https://crds-media-int.imgix.net/2cNdFxxlsIuY2Syw4UuioA/17449e3a1c91aa0cd4d09c91973526c3/crossroads-church-andover-bg.jpg?auto=format,compress&w=12&h=9&fit=crop"
|
|
28
|
+
data-optimize-img
|
|
29
|
+
/>
|
|
30
|
+
</a>
|
|
31
|
+
<div class="card-block">
|
|
32
|
+
<h4 class="card-title card-title--overlap text-uppercase"><a href="/andover">Andover</a></h4>
|
|
33
|
+
<div class="card-text">
|
|
34
|
+
<p>
|
|
35
|
+
123 Testing Lane<br />
|
|
36
|
+
Cincinnati, OH 45424
|
|
37
|
+
</p>
|
|
38
|
+
(<a target="_blank" href="https://map-url.com">Map</a>)
|
|
39
|
+
<p>
|
|
40
|
+
<strong>Service Times:</strong><br />
|
|
41
|
+
<p>
|
|
42
|
+
SUNDAY ALL DAY
|
|
43
|
+
<a href="https://www.crossroads.net/andover"><strong>See Christmas Service Times Here</strong></a>
|
|
44
|
+
</p>
|
|
45
|
+
</p>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
(function() {
|
|
53
|
+
new Imgix.Optimizer();
|
|
54
|
+
})();
|
|
55
|
+
</script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(){"use strict";var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}(),n=function(){function e(t){i(this,e),this.timeToFade=500,this.processingAttr="data-imgix-img-processed",this.placeholderImg=$(t),this.initPlaceholder(),this.initOptimization()}return t(e,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.listenForIntersection,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"listenForIntersection",value:function(){new IntersectionObserver($.proxy(this.onIntersection,this)).observe(this.placeholderImg[0])}},{key:"onIntersection",value:function(t,e){var i=$(t[0].target);t[0].isIntersecting&&!$(i).attr(this.processingAttr)&&(i.attr(this.processingAttr,!0),this.renderFullSizeImg())}},{key:"initPlaceholder",value:function(){this.setPlaceholderCss(),this.setPlaceholderParentTmpCss()}},{key:"setPlaceholderCss",value:function(){"absolute"!=this.placeholderImg.css("position")&&this.placeholderImg.css("position","relative")}},{key:"setPlaceholderParentTmpCss",value:function(){this.parentStyles={display:this.placeholderImg.parent().css("display"),position:this.placeholderImg.parent().css("position")},this.placeholderImg.parent().css({display:"block",position:"relative"})}},{key:"renderFullSizeImg",value:function(){this.initFullSizeImg(),this.setFullSizeImgTempCss(),this.setFullSizeImgSrc(),this.addFullSizeImgToDom(),this.initTransition()}},{key:"initFullSizeImg",value:function(){this.fullSizeImg=this.placeholderImg.clone()}},{key:"setFullSizeImgTempCss",value:function(){this.fullSizeImg.css({position:"absolute",top:this.placeholderImg.position().top,left:this.placeholderImg.position().left,width:"100%",height:"100%"})}},{key:"getPlaceholderImgRect",value:function(){return{width:this.placeholderImg[0].getBoundingClientRect().width,height:this.placeholderImg[0].getBoundingClientRect().height}}},{key:"setFullSizeImgSrc",value:function(){var t=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.getPlaceholderImgRect().width).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.getPlaceholderImgRect().height);t.search(/(\?|\&)(h=)(\d+)/i)<0&&(t=t+"&h="+this.getPlaceholderImgRect().height+"&fit=crop"),this.fullSizeImg.attr("ix-src",t),this.fullSizeImg.addClass("img-responsive imgix-optimizing"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var t=this;this.fullSizeImg.on("load",function(){return t.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var t=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){t.removeFullSizeImgProperties(),t.replacePlaceholderParentTmpCss(),t.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("imgix-optimizing")}},{key:"replacePlaceholderParentTmpCss",value:function(){this.placeholderImg.parent().css({display:this.parentStyles.display,position:this.parentStyles.position})}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}}]),e}(),o=function(){function e(t){i(this,e),this.timeToFade=500,this.processingAttr="data-imgix-bg-processed",this.dpr=window.devicePixelRatio||1,this.largestImageWidth=0,this.el=$(t),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return t(e,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.listenForIntersection,this)).attr("src",this.placeholderImgUrl)}},{key:"listenForIntersection",value:function(){new IntersectionObserver($.proxy(this.onIntersection,this)).observe(this.el[0])}},{key:"onIntersection",value:function(t,e){var i=$(t[0].target);t[0].isIntersecting&&!$(i).attr(this.processingAttr)&&($(i).attr(this.processingAttr,!0),this.renderTmpPlaceholderEl())}},{key:"initEl",value:function(){this.setPlaceholderImgUrl(),this.setContainerTmpCss(),this.setElTmpCss()}},{key:"setPlaceholderImgUrl",value:function(){this.placeholderImgUrl=this.el.css("background-image").replace("url(","").replace(")","").replace(/\"/gi,"").replace(/\'/gi,"").split(", ")[0]}},{key:"setContainerTmpCss",value:function(){this.parentStyles={display:this.el.parent().css("display"),position:this.el.parent().css("position")},this.el.parent().css({display:"block",position:"relative"})}},{key:"setElTmpCss",value:function(){"absolute"!=this.el.css("position")&&this.el.css("position","relative")}},{key:"renderTmpPlaceholderEl",value:function(){this.initTmpPlaceholderEl(),this.setTmpPlaceholderElCss(),this.addTmpPlaceholderElToDom(),this.renderFullSizeImg()}},{key:"initTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl=this.el.clone(),this.tmpPlaceholderEl.html("")}},{key:"setTmpPlaceholderElCss",value:function(){this.tmpPlaceholderEl.addClass("imgix-optimizing"),this.tmpPlaceholderEl.css({position:"absolute",top:this.el.position().top,left:this.el.position().left,width:this.el.outerWidth(),height:this.el.outerHeight(),backgroundColor:"transparent"})}},{key:"addTmpPlaceholderElToDom",value:function(){this.tmpPlaceholderEl.insertBefore(this.el)}},{key:"renderFullSizeImg",value:function(){this.removeElBgImg(),this.initTmpFullSizeEl(),this.setTmpFullSizeElImg(),this.addTmpFullSizeElToDom(),this.initTransition()}},{key:"removeElBgImg",value:function(){this.elBgColor=this.el.css("background-color"),this.el.css("background-color","transparent"),this.el.css("background-image","")}},{key:"initTmpFullSizeEl",value:function(){this.tmpFullSizeEl=this.tmpPlaceholderEl.clone()}},{key:"setFullSizeImgUrl",value:function(){if(!(this.fullSizeImgUrl&&this.el.outerWidth()*this.dpr<=this.largestImageWidth)){this.largestImageWidth=this.el.outerWidth()*this.dpr;var t=this.placeholderImgUrl.split("?"),e=t[t.length-1].split("&"),i={};for(var n in e.map(function(t){return i[t.split("=")[0]]=t.split("=")[1]}),this.el.outerWidth()>=this.el.outerHeight()?(i.w=this.largestImageWidth,delete i.h):(i.h=this.el.outerHeight()*this.dpr,delete i.w),e=[],i)e.push(n+"="+i[n]);return this.fullSizeImgUrl=t[0]+"?"+e.join("&")}}},{key:"setTmpFullSizeElImg",value:function(){this.setFullSizeImgUrl(),this.tmpFullSizeEl.css("background-image",'url("'+this.fullSizeImgUrl+'")')}},{key:"addTmpFullSizeElToDom",value:function(){this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl)}},{key:"initTransition",value:function(){$("<img>").on("load",$.proxy(this.transitionImg,this)).attr("src",this.fullSizeImgUrl)}},{key:"transitionImg",value:function(){var t=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){t.updateElImg(),t.replaceElTmpCss(),t.replaceContainerTmpCss(),t.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){var e=this;this.setFullSizeImgUrl(),$("<img>").on("load",function(t){return e.el.css("background-image","url('"+e.fullSizeImgUrl+"')")}).attr("src",this.placeholderImgUrl)}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"replaceContainerTmpCss",value:function(){this.el.parent().css({display:this.parentStyles.display,position:this.parentStyles.position})}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var e=this;this.initResizeEnd(),$(window).on("resizeEnd",function(t){return e.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),e}();!function(g,f){function a(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0},this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,i=e.width*e.height,n=this.intersectionRect,o=n.width*n.height;this.intersectionRatio=i?Number((o/i).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var i,n,o,r=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(r.root&&1!=r.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=(i=this._checkForIntersections.bind(this),n=this.THROTTLE_TIMEOUT,o=null,function(){o||(o=setTimeout(function(){i(),o=null},n))}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(r.rootMargin),this.thresholds=this._initThresholds(r.threshold),this.root=r.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function e(t,e,i,n){"function"==typeof t.addEventListener?t.addEventListener(e,i,n||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,i)}function i(t,e,i,n){"function"==typeof t.removeEventListener?t.removeEventListener(e,i,n||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,i)}function v(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function n(t,e){for(var i=e;i;){if(i==t)return!0;i=I(i)}return!1}function I(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e}"IntersectionObserver"in g&&"IntersectionObserverEntry"in g&&"intersectionRatio"in g.IntersectionObserverEntry.prototype?"isIntersecting"in g.IntersectionObserverEntry.prototype||Object.defineProperty(g.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(t.prototype.THROTTLE_TIMEOUT=100,t.prototype.POLL_INTERVAL=null,t.prototype.USE_MUTATION_OBSERVER=!0,t.prototype.observe=function(e){if(!this._observationTargets.some(function(t){return t.element==e})){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},t.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter(function(t){return t.element!=e}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},t.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},t.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},t.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,i){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==i[e-1]})},t.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},t.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(e(g,"resize",this._checkForIntersections,!0),e(f,"scroll",this._checkForIntersections,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in g&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(f,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},t.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,i(g,"resize",this._checkForIntersections,!0),i(f,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},t.prototype._checkForIntersections=function(){var l=this._rootIsInDom(),h=l?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach(function(t){var e=t.element,i=v(e),n=this._rootContainsTarget(e),o=t.entry,r=l&&n&&this._computeTargetAndRootIntersection(e,h),s=t.entry=new a({time:g.performance&&performance.now&&performance.now(),target:e,boundingClientRect:i,rootBounds:h,intersectionRect:r});o?l&&n?this._hasCrossedThreshold(o,s)&&this._queuedEntries.push(s):o&&o.isIntersecting&&this._queuedEntries.push(s):this._queuedEntries.push(s)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},t.prototype._computeTargetAndRootIntersection=function(t,e){if("none"!=g.getComputedStyle(t).display){for(var i,n,o,r,s,l,h,a,c=v(t),u=I(t),p=!1;!p;){var m=null,d=1==u.nodeType?g.getComputedStyle(u):{};if("none"==d.display)return;if(u==this.root||u==f?(p=!0,m=e):u!=f.body&&u!=f.documentElement&&"visible"!=d.overflow&&(m=v(u)),m&&(i=m,n=c,void 0,o=Math.max(i.top,n.top),r=Math.min(i.bottom,n.bottom),s=Math.max(i.left,n.left),l=Math.min(i.right,n.right),a=r-o,!(c=0<=(h=l-s)&&0<=a&&{top:o,bottom:r,left:s,right:l,width:h,height:a})))break;u=I(u)}return c}},t.prototype._getRootRect=function(){var t;if(this.root)t=v(this.root);else{var e=f.documentElement,i=f.body;t={top:0,left:0,right:e.clientWidth||i.clientWidth,width:e.clientWidth||i.clientWidth,bottom:e.clientHeight||i.clientHeight,height:e.clientHeight||i.clientHeight}}return this._expandRectByRootMargin(t)},t.prototype._expandRectByRootMargin=function(i){var t=this._rootMarginValues.map(function(t,e){return"px"==t.unit?t.value:t.value*(e%2?i.width:i.height)/100}),e={top:i.top-t[0],right:i.right+t[1],bottom:i.bottom+t[2],left:i.left-t[3]};return e.width=e.right-e.left,e.height=e.bottom-e.top,e},t.prototype._hasCrossedThreshold=function(t,e){var i=t&&t.isIntersecting?t.intersectionRatio||0:-1,n=e.isIntersecting?e.intersectionRatio||0:-1;if(i!==n)for(var o=0;o<this.thresholds.length;o++){var r=this.thresholds[o];if(r==i||r==n||r<i!=r<n)return!0}},t.prototype._rootIsInDom=function(){return!this.root||n(f,this.root)},t.prototype._rootContainsTarget=function(t){return n(this.root||f,t)},t.prototype._registerInstance=function(){},t.prototype._unregisterInstance=function(){},g.IntersectionObserver=t,g.IntersectionObserverEntry=a)}(window,document),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(t,e){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var i=Object(t),n=1;n<arguments.length;n++){var o=arguments[n];if(null!=o)for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(i[r]=o[r])}return i},writable:!0,configurable:!0});var e=function(){function e(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.initDependencies(),this.initOptions(t),this.optimizeImages(),this.optimizeBgImages()}return t(e,[{key:"initDependencies",value:function(){}},{key:"initOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=t;var e={parent:"body"};for(var i in e)e.hasOwnProperty(i)&&!this.options[i]&&(this.options[i]=e[i])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(t,e){new n(e)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(t,e){new o(e)}),!0}}]),e}();window.Imgix=window.Imgix||{},Imgix.Optimizer=e}();
|
data/dist/imgix-optimizer.js
CHANGED
|
@@ -25,14 +25,315 @@
|
|
|
25
25
|
};
|
|
26
26
|
}();
|
|
27
27
|
|
|
28
|
-
var
|
|
29
|
-
function
|
|
30
|
-
classCallCheck(this,
|
|
28
|
+
var Image = function () {
|
|
29
|
+
function Image(img) {
|
|
30
|
+
classCallCheck(this, Image);
|
|
31
|
+
|
|
32
|
+
// Length of crossfade transition.
|
|
33
|
+
this.timeToFade = 500;
|
|
34
|
+
// Data attribute applied before processing.
|
|
35
|
+
this.processingAttr = 'data-imgix-img-processed';
|
|
36
|
+
// The main image (pixelated placeholder).
|
|
37
|
+
this.placeholderImg = $(img);
|
|
38
|
+
// Configure the main placeholder image.
|
|
39
|
+
this.initPlaceholder();
|
|
40
|
+
// Kick off the optimization process.
|
|
41
|
+
this.initOptimization();
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Load an image in memory (not within the DOM) with the same source as the
|
|
46
|
+
* placeholder image. Once that has completed, we know we're safe to begin
|
|
47
|
+
* listening for the image to intersect the viewport.
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
createClass(Image, [{
|
|
52
|
+
key: 'initOptimization',
|
|
53
|
+
value: function initOptimization() {
|
|
54
|
+
$('<img>').on('load', $.proxy(this.listenForIntersection, this)).attr('src', this.placeholderImg.attr('src'));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* When the placeholder image intersects the viewport, begin processing.
|
|
59
|
+
* (IntersectionObserver and Object.assign() are not supported by IE, but the
|
|
60
|
+
* polyfills are loaded by Imgix.Optimizer.)
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
}, {
|
|
64
|
+
key: 'listenForIntersection',
|
|
65
|
+
value: function listenForIntersection() {
|
|
66
|
+
var observer = new IntersectionObserver($.proxy(this.onIntersection, this));
|
|
67
|
+
observer.observe(this.placeholderImg[0]);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* When the placeholder image intersects the viewport, check if it is in the
|
|
72
|
+
* viewport and has not yet been processed. If those conditions are true,
|
|
73
|
+
* begin rendering the full size image and the transition process.
|
|
74
|
+
*/
|
|
75
|
+
|
|
76
|
+
}, {
|
|
77
|
+
key: 'onIntersection',
|
|
78
|
+
value: function onIntersection(entries, observer) {
|
|
79
|
+
var img = $(entries[0].target);
|
|
80
|
+
if (!entries[0].isIntersecting || $(img).attr(this.processingAttr)) return;
|
|
81
|
+
img.attr(this.processingAttr, true);
|
|
82
|
+
this.renderFullSizeImg();
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// ---------------------------------------- | Placeholder Image
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Make necessary CSS adjustments to main placeholder image.
|
|
89
|
+
*/
|
|
90
|
+
|
|
91
|
+
}, {
|
|
92
|
+
key: 'initPlaceholder',
|
|
93
|
+
value: function initPlaceholder() {
|
|
94
|
+
this.setPlaceholderCss();
|
|
95
|
+
this.setPlaceholderParentTmpCss();
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* The main image must have a position set for it to remain in front of the
|
|
100
|
+
* full-size image. We assume that if the element is not explicitly positioned
|
|
101
|
+
* absolutely, then it can safely be positioned relatively.
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
}, {
|
|
105
|
+
key: 'setPlaceholderCss',
|
|
106
|
+
value: function setPlaceholderCss() {
|
|
107
|
+
if (this.placeholderImg.css('position') != 'absolute') {
|
|
108
|
+
this.placeholderImg.css('position', 'relative');
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* The parent of the image container should be relatively positioned
|
|
114
|
+
* (temporarily) so temp image can be absolutely positioned.
|
|
115
|
+
*/
|
|
116
|
+
|
|
117
|
+
}, {
|
|
118
|
+
key: 'setPlaceholderParentTmpCss',
|
|
119
|
+
value: function setPlaceholderParentTmpCss() {
|
|
120
|
+
this.parentStyles = {
|
|
121
|
+
display: this.placeholderImg.parent().css('display'),
|
|
122
|
+
position: this.placeholderImg.parent().css('position')
|
|
123
|
+
};
|
|
124
|
+
this.placeholderImg.parent().css({
|
|
125
|
+
display: 'block',
|
|
126
|
+
position: 'relative'
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// ---------------------------------------- | Full-Size Image
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Render the full-size image behind the placeholder image.
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
}, {
|
|
137
|
+
key: 'renderFullSizeImg',
|
|
138
|
+
value: function renderFullSizeImg() {
|
|
139
|
+
this.initFullSizeImg();
|
|
140
|
+
this.setFullSizeImgTempCss();
|
|
141
|
+
this.setFullSizeImgSrc();
|
|
142
|
+
this.addFullSizeImgToDom();
|
|
143
|
+
this.initTransition();
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* The full-size image is a clone of the placeholder image. This enables us to
|
|
148
|
+
* easily replace it without losing any necessary styles or attributes.
|
|
149
|
+
*/
|
|
150
|
+
|
|
151
|
+
}, {
|
|
152
|
+
key: 'initFullSizeImg',
|
|
153
|
+
value: function initFullSizeImg() {
|
|
154
|
+
this.fullSizeImg = this.placeholderImg.clone();
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* Give the full-size image a temporary set of CSS rules so that it can sit
|
|
159
|
+
* directly behind the placeholder image while loading.
|
|
160
|
+
*/
|
|
161
|
+
|
|
162
|
+
}, {
|
|
163
|
+
key: 'setFullSizeImgTempCss',
|
|
164
|
+
value: function setFullSizeImgTempCss() {
|
|
165
|
+
this.fullSizeImg.css({
|
|
166
|
+
position: 'absolute',
|
|
167
|
+
top: this.placeholderImg.position().top,
|
|
168
|
+
left: this.placeholderImg.position().left,
|
|
169
|
+
width: '100%',
|
|
170
|
+
height: '100%'
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Return the width and height of the placeholder image, including decimals.
|
|
176
|
+
* Uses precise measurements like this helps ensure the element doesn't slide
|
|
177
|
+
* when transitioning to the full size image.
|
|
178
|
+
*/
|
|
179
|
+
|
|
180
|
+
}, {
|
|
181
|
+
key: 'getPlaceholderImgRect',
|
|
182
|
+
value: function getPlaceholderImgRect() {
|
|
183
|
+
return {
|
|
184
|
+
width: this.placeholderImg[0].getBoundingClientRect().width,
|
|
185
|
+
height: this.placeholderImg[0].getBoundingClientRect().height
|
|
186
|
+
};
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/**
|
|
190
|
+
* Prep the full-size image with the attributes necessary to become its full
|
|
191
|
+
* size. Right now it is still just a replica of the placeholder, sitting
|
|
192
|
+
* right behind the placeholder.
|
|
193
|
+
*
|
|
194
|
+
* We set the src directly even though we're using imgix.js because older
|
|
195
|
+
* browsers don't support the srcset attribute which is what imgix.js relies
|
|
196
|
+
* upon.
|
|
197
|
+
*/
|
|
198
|
+
|
|
199
|
+
}, {
|
|
200
|
+
key: 'setFullSizeImgSrc',
|
|
201
|
+
value: function setFullSizeImgSrc() {
|
|
202
|
+
var newSrc = this.placeholderImg.attr('src').replace(/(\?|\&)(w=)(\d+)/i, '$1$2' + this.getPlaceholderImgRect().width).replace(/(\?|\&)(h=)(\d+)/i, '$1$2' + this.getPlaceholderImgRect().height);
|
|
203
|
+
// Add a height attribute if it is missing. This is the key to the image not
|
|
204
|
+
// jumping around after transitioning to the full-size image.
|
|
205
|
+
if (newSrc.search(/(\?|\&)(h=)(\d+)/i) < 0) {
|
|
206
|
+
newSrc = newSrc + '&h=' + this.getPlaceholderImgRect().height + '&fit=crop';
|
|
207
|
+
}
|
|
208
|
+
this.fullSizeImg.attr('ix-src', newSrc);
|
|
209
|
+
// TODO: Make this a configurable option or document it as a more semantic temporary class
|
|
210
|
+
this.fullSizeImg.addClass('img-responsive imgix-optimizing');
|
|
211
|
+
// TODO: This should respect the option from the Optimizer class for the select
|
|
212
|
+
this.fullSizeImg.removeAttr('data-optimize-img');
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/**
|
|
216
|
+
* Render the full-size image in the DOM.
|
|
217
|
+
*/
|
|
218
|
+
|
|
219
|
+
}, {
|
|
220
|
+
key: 'addFullSizeImgToDom',
|
|
221
|
+
value: function addFullSizeImgToDom() {
|
|
222
|
+
this.fullSizeImg.insertBefore(this.placeholderImg);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
// ---------------------------------------- | Image Transition
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* Once the full-size image is loaded, begin the transition. This is the
|
|
229
|
+
* critical piece of this process. Imgix.js uses the ix-src attribute to build
|
|
230
|
+
* out the srcset attribute. Then, based on the sizes attribute, the browser
|
|
231
|
+
* determines which source to render. Therefore we can't preload in memory
|
|
232
|
+
* because we need imgix to do its thing directly in the DOM.
|
|
233
|
+
*/
|
|
234
|
+
|
|
235
|
+
}, {
|
|
236
|
+
key: 'initTransition',
|
|
237
|
+
value: function initTransition() {
|
|
238
|
+
var _this = this;
|
|
239
|
+
|
|
240
|
+
this.fullSizeImg.on('load', function () {
|
|
241
|
+
return _this.transitionImg();
|
|
242
|
+
});
|
|
243
|
+
imgix.init();
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/**
|
|
247
|
+
* Fade out the placeholder image, effectively showing the image behind it.
|
|
248
|
+
*
|
|
249
|
+
* Once the fade out transition has completed, remove any temporary properties
|
|
250
|
+
* from the full-size image (so it gets back to being a clone of the
|
|
251
|
+
* placeholder, with the full-size src).
|
|
252
|
+
*
|
|
253
|
+
* Finally, remove the placeholder image from the DOM since we don't need it
|
|
254
|
+
* any more.
|
|
255
|
+
*/
|
|
256
|
+
|
|
257
|
+
}, {
|
|
258
|
+
key: 'transitionImg',
|
|
259
|
+
value: function transitionImg() {
|
|
260
|
+
var _this2 = this;
|
|
261
|
+
|
|
262
|
+
if (!this.placeholderImg) return true;
|
|
263
|
+
this.fadeOutPlaceholder();
|
|
264
|
+
setTimeout(function () {
|
|
265
|
+
_this2.removeFullSizeImgProperties();
|
|
266
|
+
_this2.replacePlaceholderParentTmpCss();
|
|
267
|
+
_this2.removeImg();
|
|
268
|
+
}, this.timeToFade);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* Fade out the placeholder image.
|
|
273
|
+
*/
|
|
274
|
+
|
|
275
|
+
}, {
|
|
276
|
+
key: 'fadeOutPlaceholder',
|
|
277
|
+
value: function fadeOutPlaceholder() {
|
|
278
|
+
this.placeholderImg.fadeTo(this.timeToFade, 0);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* Remove temporary styles and class from the full-size image, which
|
|
283
|
+
* effectively means it has replaced the placeholder image.
|
|
284
|
+
*/
|
|
285
|
+
|
|
286
|
+
}, {
|
|
287
|
+
key: 'removeFullSizeImgProperties',
|
|
288
|
+
value: function removeFullSizeImgProperties() {
|
|
289
|
+
this.fullSizeImg.removeAttr('style');
|
|
290
|
+
// TODO: Update this with how the class is handled above.
|
|
291
|
+
this.fullSizeImg.removeClass('imgix-optimizing');
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/**
|
|
295
|
+
* Reset the container's adjusted CSS properties.
|
|
296
|
+
*/
|
|
297
|
+
|
|
298
|
+
}, {
|
|
299
|
+
key: 'replacePlaceholderParentTmpCss',
|
|
300
|
+
value: function replacePlaceholderParentTmpCss() {
|
|
301
|
+
this.placeholderImg.parent().css({
|
|
302
|
+
display: this.parentStyles.display,
|
|
303
|
+
position: this.parentStyles.position
|
|
304
|
+
});
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/**
|
|
308
|
+
* Remove the placeholder image from the DOM since we no longer need it.
|
|
309
|
+
*/
|
|
310
|
+
|
|
311
|
+
}, {
|
|
312
|
+
key: 'removeImg',
|
|
313
|
+
value: function removeImg() {
|
|
314
|
+
if (!this.placeholderImg) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
this.placeholderImg.remove();
|
|
318
|
+
this.placeholderImg = undefined;
|
|
319
|
+
}
|
|
320
|
+
}]);
|
|
321
|
+
return Image;
|
|
322
|
+
}();
|
|
323
|
+
|
|
324
|
+
var BackgroundImage = function () {
|
|
325
|
+
function BackgroundImage(el) {
|
|
326
|
+
classCallCheck(this, BackgroundImage);
|
|
31
327
|
|
|
32
328
|
// Length of time to complete fade-in transition.
|
|
33
329
|
this.timeToFade = 500;
|
|
330
|
+
// Data attribute applied before processing.
|
|
331
|
+
this.processingAttr = 'data-imgix-bg-processed';
|
|
34
332
|
// Device pixel ratio assumes 1 if not set.
|
|
35
333
|
this.dpr = window['devicePixelRatio'] || 1;
|
|
334
|
+
// The largest image that has been loaded. This assumes the height of the
|
|
335
|
+
// container will not change.
|
|
336
|
+
this.largestImageWidth = 0;
|
|
36
337
|
// The primary element (i.e. the one with the background image).
|
|
37
338
|
this.el = $(el);
|
|
38
339
|
// Background image CSS property must be present.
|
|
@@ -54,14 +355,38 @@
|
|
|
54
355
|
*/
|
|
55
356
|
|
|
56
357
|
|
|
57
|
-
createClass(
|
|
358
|
+
createClass(BackgroundImage, [{
|
|
58
359
|
key: 'initOptimization',
|
|
59
360
|
value: function initOptimization() {
|
|
60
|
-
|
|
361
|
+
$('<img>').on('load', $.proxy(this.listenForIntersection, this)).attr('src', this.placeholderImgUrl);
|
|
362
|
+
}
|
|
61
363
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
364
|
+
/**
|
|
365
|
+
* When the element intersects the viewport, begin processing.
|
|
366
|
+
* (IntersectionObserver and Object.assign() are not supported by IE, but the
|
|
367
|
+
* polyfills are loaded by Imgix.Optimizer.)
|
|
368
|
+
*/
|
|
369
|
+
|
|
370
|
+
}, {
|
|
371
|
+
key: 'listenForIntersection',
|
|
372
|
+
value: function listenForIntersection() {
|
|
373
|
+
var observer = new IntersectionObserver($.proxy(this.onIntersection, this));
|
|
374
|
+
observer.observe(this.el[0]);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/**
|
|
378
|
+
* When the element intersects the viewport, check if it is in the viewport
|
|
379
|
+
* and has not yet been processed. If those conditions are true, begin
|
|
380
|
+
* rendering the full size image and the transition process.
|
|
381
|
+
*/
|
|
382
|
+
|
|
383
|
+
}, {
|
|
384
|
+
key: 'onIntersection',
|
|
385
|
+
value: function onIntersection(entries, observer) {
|
|
386
|
+
var el = $(entries[0].target);
|
|
387
|
+
if (!entries[0].isIntersecting || $(el).attr(this.processingAttr)) return;
|
|
388
|
+
$(el).attr(this.processingAttr, true);
|
|
389
|
+
this.renderTmpPlaceholderEl();
|
|
65
390
|
}
|
|
66
391
|
|
|
67
392
|
// ---------------------------------------- | Main Element
|
|
@@ -86,7 +411,7 @@
|
|
|
86
411
|
}, {
|
|
87
412
|
key: 'setPlaceholderImgUrl',
|
|
88
413
|
value: function setPlaceholderImgUrl() {
|
|
89
|
-
this.placeholderImgUrl = this.el.css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi,
|
|
414
|
+
this.placeholderImgUrl = this.el.css('background-image').replace('url(', '').replace(')', '').replace(/\"/gi, '').replace(/\'/gi, '').split(', ')[0];
|
|
90
415
|
}
|
|
91
416
|
|
|
92
417
|
/**
|
|
@@ -234,7 +559,13 @@
|
|
|
234
559
|
}, {
|
|
235
560
|
key: 'setFullSizeImgUrl',
|
|
236
561
|
value: function setFullSizeImgUrl() {
|
|
237
|
-
//
|
|
562
|
+
// If the full size image URL exists and if the new size is going to be
|
|
563
|
+
// smaller than the largest size loaded, then we stick with the largest size
|
|
564
|
+
// that has been used.
|
|
565
|
+
if (this.fullSizeImgUrl && this.el.outerWidth() * this.dpr <= this.largestImageWidth) return;
|
|
566
|
+
// Assume that the new width will be the largest size used.
|
|
567
|
+
this.largestImageWidth = this.el.outerWidth() * this.dpr;
|
|
568
|
+
// Work with the placeholder image URL, which has been pulled from the
|
|
238
569
|
// background-image css property of the main elements.
|
|
239
570
|
var url = this.placeholderImgUrl.split('?');
|
|
240
571
|
// q is an array of querystring parameters as ["k=v", "k=v", ...].
|
|
@@ -248,7 +579,7 @@
|
|
|
248
579
|
// If the image's container is wider than it is tall, we only set width and
|
|
249
580
|
// unset height, and vice versa.
|
|
250
581
|
if (this.el.outerWidth() >= this.el.outerHeight()) {
|
|
251
|
-
args['w'] = this.
|
|
582
|
+
args['w'] = this.largestImageWidth;
|
|
252
583
|
delete args['h'];
|
|
253
584
|
} else {
|
|
254
585
|
args['h'] = this.el.outerHeight() * this.dpr;
|
|
@@ -309,14 +640,14 @@
|
|
|
309
640
|
}, {
|
|
310
641
|
key: 'transitionImg',
|
|
311
642
|
value: function transitionImg() {
|
|
312
|
-
var
|
|
643
|
+
var _this = this;
|
|
313
644
|
|
|
314
645
|
this.fadeOutTmpPlaceholderEl();
|
|
315
646
|
setTimeout(function () {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
647
|
+
_this.updateElImg();
|
|
648
|
+
_this.replaceElTmpCss();
|
|
649
|
+
_this.replaceContainerTmpCss();
|
|
650
|
+
_this.removeTmpEls();
|
|
320
651
|
}, this.timeToFade);
|
|
321
652
|
}
|
|
322
653
|
|
|
@@ -343,8 +674,12 @@
|
|
|
343
674
|
}, {
|
|
344
675
|
key: 'updateElImg',
|
|
345
676
|
value: function updateElImg() {
|
|
677
|
+
var _this2 = this;
|
|
678
|
+
|
|
346
679
|
this.setFullSizeImgUrl();
|
|
347
|
-
|
|
680
|
+
$('<img>').on('load', function (event) {
|
|
681
|
+
return _this2.el.css('background-image', 'url(\'' + _this2.fullSizeImgUrl + '\')');
|
|
682
|
+
}).attr('src', this.placeholderImgUrl);
|
|
348
683
|
}
|
|
349
684
|
|
|
350
685
|
/**
|
|
@@ -418,235 +753,774 @@
|
|
|
418
753
|
});
|
|
419
754
|
}
|
|
420
755
|
}]);
|
|
421
|
-
return
|
|
756
|
+
return BackgroundImage;
|
|
422
757
|
}();
|
|
423
758
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
759
|
+
/**
|
|
760
|
+
* Copyright 2016 Google Inc. All Rights Reserved.
|
|
761
|
+
*
|
|
762
|
+
* Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
|
|
763
|
+
*
|
|
764
|
+
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
|
|
765
|
+
*
|
|
766
|
+
*/
|
|
767
|
+
|
|
768
|
+
(function(window, document) {
|
|
769
|
+
|
|
770
|
+
|
|
771
|
+
// Exits early if all IntersectionObserver and IntersectionObserverEntry
|
|
772
|
+
// features are natively supported.
|
|
773
|
+
if ('IntersectionObserver' in window &&
|
|
774
|
+
'IntersectionObserverEntry' in window &&
|
|
775
|
+
'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
|
|
776
|
+
|
|
777
|
+
// Minimal polyfill for Edge 15's lack of `isIntersecting`
|
|
778
|
+
// See: https://github.com/w3c/IntersectionObserver/issues/211
|
|
779
|
+
if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
|
|
780
|
+
Object.defineProperty(window.IntersectionObserverEntry.prototype,
|
|
781
|
+
'isIntersecting', {
|
|
782
|
+
get: function () {
|
|
783
|
+
return this.intersectionRatio > 0;
|
|
784
|
+
}
|
|
785
|
+
});
|
|
786
|
+
}
|
|
787
|
+
return;
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
|
|
791
|
+
/**
|
|
792
|
+
* Creates the global IntersectionObserverEntry constructor.
|
|
793
|
+
* https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
|
|
794
|
+
* @param {Object} entry A dictionary of instance properties.
|
|
795
|
+
* @constructor
|
|
796
|
+
*/
|
|
797
|
+
function IntersectionObserverEntry(entry) {
|
|
798
|
+
this.time = entry.time;
|
|
799
|
+
this.target = entry.target;
|
|
800
|
+
this.rootBounds = entry.rootBounds;
|
|
801
|
+
this.boundingClientRect = entry.boundingClientRect;
|
|
802
|
+
this.intersectionRect = entry.intersectionRect || getEmptyRect();
|
|
803
|
+
this.isIntersecting = !!entry.intersectionRect;
|
|
804
|
+
|
|
805
|
+
// Calculates the intersection ratio.
|
|
806
|
+
var targetRect = this.boundingClientRect;
|
|
807
|
+
var targetArea = targetRect.width * targetRect.height;
|
|
808
|
+
var intersectionRect = this.intersectionRect;
|
|
809
|
+
var intersectionArea = intersectionRect.width * intersectionRect.height;
|
|
810
|
+
|
|
811
|
+
// Sets intersection ratio.
|
|
812
|
+
if (targetArea) {
|
|
813
|
+
// Round the intersection ratio to avoid floating point math issues:
|
|
814
|
+
// https://github.com/w3c/IntersectionObserver/issues/324
|
|
815
|
+
this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
|
|
816
|
+
} else {
|
|
817
|
+
// If area is zero and is intersecting, sets to 1, otherwise to 0
|
|
818
|
+
this.intersectionRatio = this.isIntersecting ? 1 : 0;
|
|
819
|
+
}
|
|
820
|
+
}
|
|
427
821
|
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
822
|
+
|
|
823
|
+
/**
|
|
824
|
+
* Creates the global IntersectionObserver constructor.
|
|
825
|
+
* https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
|
|
826
|
+
* @param {Function} callback The function to be invoked after intersection
|
|
827
|
+
* changes have queued. The function is not invoked if the queue has
|
|
828
|
+
* been emptied by calling the `takeRecords` method.
|
|
829
|
+
* @param {Object=} opt_options Optional configuration options.
|
|
830
|
+
* @constructor
|
|
831
|
+
*/
|
|
832
|
+
function IntersectionObserver(callback, opt_options) {
|
|
833
|
+
|
|
834
|
+
var options = opt_options || {};
|
|
835
|
+
|
|
836
|
+
if (typeof callback != 'function') {
|
|
837
|
+
throw new Error('callback must be a function');
|
|
436
838
|
}
|
|
437
839
|
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
* processing.
|
|
442
|
-
*/
|
|
840
|
+
if (options.root && options.root.nodeType != 1) {
|
|
841
|
+
throw new Error('root must be an Element');
|
|
842
|
+
}
|
|
443
843
|
|
|
844
|
+
// Binds and throttles `this._checkForIntersections`.
|
|
845
|
+
this._checkForIntersections = throttle(
|
|
846
|
+
this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
|
|
847
|
+
|
|
848
|
+
// Private properties.
|
|
849
|
+
this._callback = callback;
|
|
850
|
+
this._observationTargets = [];
|
|
851
|
+
this._queuedEntries = [];
|
|
852
|
+
this._rootMarginValues = this._parseRootMargin(options.rootMargin);
|
|
853
|
+
|
|
854
|
+
// Public properties.
|
|
855
|
+
this.thresholds = this._initThresholds(options.threshold);
|
|
856
|
+
this.root = options.root || null;
|
|
857
|
+
this.rootMargin = this._rootMarginValues.map(function(margin) {
|
|
858
|
+
return margin.value + margin.unit;
|
|
859
|
+
}).join(' ');
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
|
|
863
|
+
/**
|
|
864
|
+
* The minimum interval within which the document will be checked for
|
|
865
|
+
* intersection changes.
|
|
866
|
+
*/
|
|
867
|
+
IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
|
|
868
|
+
|
|
869
|
+
|
|
870
|
+
/**
|
|
871
|
+
* The frequency in which the polyfill polls for intersection changes.
|
|
872
|
+
* this can be updated on a per instance basis and must be set prior to
|
|
873
|
+
* calling `observe` on the first target.
|
|
874
|
+
*/
|
|
875
|
+
IntersectionObserver.prototype.POLL_INTERVAL = null;
|
|
876
|
+
|
|
877
|
+
/**
|
|
878
|
+
* Use a mutation observer on the root element
|
|
879
|
+
* to detect intersection changes.
|
|
880
|
+
*/
|
|
881
|
+
IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
|
|
882
|
+
|
|
883
|
+
|
|
884
|
+
/**
|
|
885
|
+
* Starts observing a target element for intersection changes based on
|
|
886
|
+
* the thresholds values.
|
|
887
|
+
* @param {Element} target The DOM element to observe.
|
|
888
|
+
*/
|
|
889
|
+
IntersectionObserver.prototype.observe = function(target) {
|
|
890
|
+
var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
|
|
891
|
+
return item.element == target;
|
|
892
|
+
});
|
|
893
|
+
|
|
894
|
+
if (isTargetAlreadyObserved) {
|
|
895
|
+
return;
|
|
896
|
+
}
|
|
444
897
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
$('<img>').on('load', $.proxy(this.renderFullSizeImg, this)).attr('src', this.placeholderImg.attr('src'));
|
|
449
|
-
}
|
|
898
|
+
if (!(target && target.nodeType == 1)) {
|
|
899
|
+
throw new Error('target must be an Element');
|
|
900
|
+
}
|
|
450
901
|
|
|
451
|
-
|
|
902
|
+
this._registerInstance();
|
|
903
|
+
this._observationTargets.push({element: target, entry: null});
|
|
904
|
+
this._monitorIntersections();
|
|
905
|
+
this._checkForIntersections();
|
|
906
|
+
};
|
|
452
907
|
|
|
453
|
-
/**
|
|
454
|
-
* Make necessary CSS adjustments to main placeholder image.
|
|
455
|
-
*/
|
|
456
908
|
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
909
|
+
/**
|
|
910
|
+
* Stops observing a target element for intersection changes.
|
|
911
|
+
* @param {Element} target The DOM element to observe.
|
|
912
|
+
*/
|
|
913
|
+
IntersectionObserver.prototype.unobserve = function(target) {
|
|
914
|
+
this._observationTargets =
|
|
915
|
+
this._observationTargets.filter(function(item) {
|
|
916
|
+
|
|
917
|
+
return item.element != target;
|
|
918
|
+
});
|
|
919
|
+
if (!this._observationTargets.length) {
|
|
920
|
+
this._unmonitorIntersections();
|
|
921
|
+
this._unregisterInstance();
|
|
922
|
+
}
|
|
923
|
+
};
|
|
924
|
+
|
|
925
|
+
|
|
926
|
+
/**
|
|
927
|
+
* Stops observing all target elements for intersection changes.
|
|
928
|
+
*/
|
|
929
|
+
IntersectionObserver.prototype.disconnect = function() {
|
|
930
|
+
this._observationTargets = [];
|
|
931
|
+
this._unmonitorIntersections();
|
|
932
|
+
this._unregisterInstance();
|
|
933
|
+
};
|
|
934
|
+
|
|
935
|
+
|
|
936
|
+
/**
|
|
937
|
+
* Returns any queue entries that have not yet been reported to the
|
|
938
|
+
* callback and clears the queue. This can be used in conjunction with the
|
|
939
|
+
* callback to obtain the absolute most up-to-date intersection information.
|
|
940
|
+
* @return {Array} The currently queued entries.
|
|
941
|
+
*/
|
|
942
|
+
IntersectionObserver.prototype.takeRecords = function() {
|
|
943
|
+
var records = this._queuedEntries.slice();
|
|
944
|
+
this._queuedEntries = [];
|
|
945
|
+
return records;
|
|
946
|
+
};
|
|
947
|
+
|
|
948
|
+
|
|
949
|
+
/**
|
|
950
|
+
* Accepts the threshold value from the user configuration object and
|
|
951
|
+
* returns a sorted array of unique threshold values. If a value is not
|
|
952
|
+
* between 0 and 1 and error is thrown.
|
|
953
|
+
* @private
|
|
954
|
+
* @param {Array|number=} opt_threshold An optional threshold value or
|
|
955
|
+
* a list of threshold values, defaulting to [0].
|
|
956
|
+
* @return {Array} A sorted list of unique and valid threshold values.
|
|
957
|
+
*/
|
|
958
|
+
IntersectionObserver.prototype._initThresholds = function(opt_threshold) {
|
|
959
|
+
var threshold = opt_threshold || [0];
|
|
960
|
+
if (!Array.isArray(threshold)) threshold = [threshold];
|
|
961
|
+
|
|
962
|
+
return threshold.sort().filter(function(t, i, a) {
|
|
963
|
+
if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {
|
|
964
|
+
throw new Error('threshold must be a number between 0 and 1 inclusively');
|
|
461
965
|
}
|
|
966
|
+
return t !== a[i - 1];
|
|
967
|
+
});
|
|
968
|
+
};
|
|
462
969
|
|
|
463
|
-
/**
|
|
464
|
-
* The main image must have a position set for it to remain in front of the
|
|
465
|
-
* full-size image. We assume that if the element is not explicitly positioned
|
|
466
|
-
* absolutely, then it can safely be positioned relatively.
|
|
467
|
-
*/
|
|
468
970
|
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
971
|
+
/**
|
|
972
|
+
* Accepts the rootMargin value from the user configuration object
|
|
973
|
+
* and returns an array of the four margin values as an object containing
|
|
974
|
+
* the value and unit properties. If any of the values are not properly
|
|
975
|
+
* formatted or use a unit other than px or %, and error is thrown.
|
|
976
|
+
* @private
|
|
977
|
+
* @param {string=} opt_rootMargin An optional rootMargin value,
|
|
978
|
+
* defaulting to '0px'.
|
|
979
|
+
* @return {Array<Object>} An array of margin objects with the keys
|
|
980
|
+
* value and unit.
|
|
981
|
+
*/
|
|
982
|
+
IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
|
|
983
|
+
var marginString = opt_rootMargin || '0px';
|
|
984
|
+
var margins = marginString.split(/\s+/).map(function(margin) {
|
|
985
|
+
var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
|
|
986
|
+
if (!parts) {
|
|
987
|
+
throw new Error('rootMargin must be specified in pixels or percent');
|
|
475
988
|
}
|
|
989
|
+
return {value: parseFloat(parts[1]), unit: parts[2]};
|
|
990
|
+
});
|
|
476
991
|
|
|
477
|
-
|
|
992
|
+
// Handles shorthand.
|
|
993
|
+
margins[1] = margins[1] || margins[0];
|
|
994
|
+
margins[2] = margins[2] || margins[0];
|
|
995
|
+
margins[3] = margins[3] || margins[1];
|
|
478
996
|
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
*/
|
|
997
|
+
return margins;
|
|
998
|
+
};
|
|
482
999
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
1000
|
+
|
|
1001
|
+
/**
|
|
1002
|
+
* Starts polling for intersection changes if the polling is not already
|
|
1003
|
+
* happening, and if the page's visibility state is visible.
|
|
1004
|
+
* @private
|
|
1005
|
+
*/
|
|
1006
|
+
IntersectionObserver.prototype._monitorIntersections = function() {
|
|
1007
|
+
if (!this._monitoringIntersections) {
|
|
1008
|
+
this._monitoringIntersections = true;
|
|
1009
|
+
|
|
1010
|
+
// If a poll interval is set, use polling instead of listening to
|
|
1011
|
+
// resize and scroll events or DOM mutations.
|
|
1012
|
+
if (this.POLL_INTERVAL) {
|
|
1013
|
+
this._monitoringInterval = setInterval(
|
|
1014
|
+
this._checkForIntersections, this.POLL_INTERVAL);
|
|
1015
|
+
}
|
|
1016
|
+
else {
|
|
1017
|
+
addEvent(window, 'resize', this._checkForIntersections, true);
|
|
1018
|
+
addEvent(document, 'scroll', this._checkForIntersections, true);
|
|
1019
|
+
|
|
1020
|
+
if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
|
|
1021
|
+
this._domObserver = new MutationObserver(this._checkForIntersections);
|
|
1022
|
+
this._domObserver.observe(document, {
|
|
1023
|
+
attributes: true,
|
|
1024
|
+
childList: true,
|
|
1025
|
+
characterData: true,
|
|
1026
|
+
subtree: true
|
|
1027
|
+
});
|
|
1028
|
+
}
|
|
491
1029
|
}
|
|
1030
|
+
}
|
|
1031
|
+
};
|
|
492
1032
|
|
|
493
|
-
/**
|
|
494
|
-
* The full-size image is a clone of the placeholder image. This enables us to
|
|
495
|
-
* easily replace it without losing any necessary styles or attributes.
|
|
496
|
-
*/
|
|
497
1033
|
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
1034
|
+
/**
|
|
1035
|
+
* Stops polling for intersection changes.
|
|
1036
|
+
* @private
|
|
1037
|
+
*/
|
|
1038
|
+
IntersectionObserver.prototype._unmonitorIntersections = function() {
|
|
1039
|
+
if (this._monitoringIntersections) {
|
|
1040
|
+
this._monitoringIntersections = false;
|
|
1041
|
+
|
|
1042
|
+
clearInterval(this._monitoringInterval);
|
|
1043
|
+
this._monitoringInterval = null;
|
|
1044
|
+
|
|
1045
|
+
removeEvent(window, 'resize', this._checkForIntersections, true);
|
|
1046
|
+
removeEvent(document, 'scroll', this._checkForIntersections, true);
|
|
1047
|
+
|
|
1048
|
+
if (this._domObserver) {
|
|
1049
|
+
this._domObserver.disconnect();
|
|
1050
|
+
this._domObserver = null;
|
|
502
1051
|
}
|
|
1052
|
+
}
|
|
1053
|
+
};
|
|
503
1054
|
|
|
504
|
-
/**
|
|
505
|
-
* Give the full-size image a temporary set of CSS rules so that it can sit
|
|
506
|
-
* directly behind the placeholder image while loading.
|
|
507
|
-
*/
|
|
508
1055
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
1056
|
+
/**
|
|
1057
|
+
* Scans each observation target for intersection changes and adds them
|
|
1058
|
+
* to the internal entries queue. If new entries are found, it
|
|
1059
|
+
* schedules the callback to be invoked.
|
|
1060
|
+
* @private
|
|
1061
|
+
*/
|
|
1062
|
+
IntersectionObserver.prototype._checkForIntersections = function() {
|
|
1063
|
+
var rootIsInDom = this._rootIsInDom();
|
|
1064
|
+
var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
|
|
1065
|
+
|
|
1066
|
+
this._observationTargets.forEach(function(item) {
|
|
1067
|
+
var target = item.element;
|
|
1068
|
+
var targetRect = getBoundingClientRect(target);
|
|
1069
|
+
var rootContainsTarget = this._rootContainsTarget(target);
|
|
1070
|
+
var oldEntry = item.entry;
|
|
1071
|
+
var intersectionRect = rootIsInDom && rootContainsTarget &&
|
|
1072
|
+
this._computeTargetAndRootIntersection(target, rootRect);
|
|
1073
|
+
|
|
1074
|
+
var newEntry = item.entry = new IntersectionObserverEntry({
|
|
1075
|
+
time: now(),
|
|
1076
|
+
target: target,
|
|
1077
|
+
boundingClientRect: targetRect,
|
|
1078
|
+
rootBounds: rootRect,
|
|
1079
|
+
intersectionRect: intersectionRect
|
|
1080
|
+
});
|
|
1081
|
+
|
|
1082
|
+
if (!oldEntry) {
|
|
1083
|
+
this._queuedEntries.push(newEntry);
|
|
1084
|
+
} else if (rootIsInDom && rootContainsTarget) {
|
|
1085
|
+
// If the new entry intersection ratio has crossed any of the
|
|
1086
|
+
// thresholds, add a new entry.
|
|
1087
|
+
if (this._hasCrossedThreshold(oldEntry, newEntry)) {
|
|
1088
|
+
this._queuedEntries.push(newEntry);
|
|
1089
|
+
}
|
|
1090
|
+
} else {
|
|
1091
|
+
// If the root is not in the DOM or target is not contained within
|
|
1092
|
+
// root but the previous entry for this target had an intersection,
|
|
1093
|
+
// add a new record indicating removal.
|
|
1094
|
+
if (oldEntry && oldEntry.isIntersecting) {
|
|
1095
|
+
this._queuedEntries.push(newEntry);
|
|
1096
|
+
}
|
|
519
1097
|
}
|
|
1098
|
+
}, this);
|
|
520
1099
|
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
*
|
|
526
|
-
* We set the src directly even though we're using imgix.js because older
|
|
527
|
-
* browsers don't support the srcset attribute which is what imgix.js relies
|
|
528
|
-
* upon.
|
|
529
|
-
*/
|
|
1100
|
+
if (this._queuedEntries.length) {
|
|
1101
|
+
this._callback(this.takeRecords(), this);
|
|
1102
|
+
}
|
|
1103
|
+
};
|
|
530
1104
|
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
1105
|
+
|
|
1106
|
+
/**
|
|
1107
|
+
* Accepts a target and root rect computes the intersection between then
|
|
1108
|
+
* following the algorithm in the spec.
|
|
1109
|
+
* TODO(philipwalton): at this time clip-path is not considered.
|
|
1110
|
+
* https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
|
|
1111
|
+
* @param {Element} target The target DOM element
|
|
1112
|
+
* @param {Object} rootRect The bounding rect of the root after being
|
|
1113
|
+
* expanded by the rootMargin value.
|
|
1114
|
+
* @return {?Object} The final intersection rect object or undefined if no
|
|
1115
|
+
* intersection is found.
|
|
1116
|
+
* @private
|
|
1117
|
+
*/
|
|
1118
|
+
IntersectionObserver.prototype._computeTargetAndRootIntersection =
|
|
1119
|
+
function(target, rootRect) {
|
|
1120
|
+
|
|
1121
|
+
// If the element isn't displayed, an intersection can't happen.
|
|
1122
|
+
if (window.getComputedStyle(target).display == 'none') return;
|
|
1123
|
+
|
|
1124
|
+
var targetRect = getBoundingClientRect(target);
|
|
1125
|
+
var intersectionRect = targetRect;
|
|
1126
|
+
var parent = getParentNode(target);
|
|
1127
|
+
var atRoot = false;
|
|
1128
|
+
|
|
1129
|
+
while (!atRoot) {
|
|
1130
|
+
var parentRect = null;
|
|
1131
|
+
var parentComputedStyle = parent.nodeType == 1 ?
|
|
1132
|
+
window.getComputedStyle(parent) : {};
|
|
1133
|
+
|
|
1134
|
+
// If the parent isn't displayed, an intersection can't happen.
|
|
1135
|
+
if (parentComputedStyle.display == 'none') return;
|
|
1136
|
+
|
|
1137
|
+
if (parent == this.root || parent == document) {
|
|
1138
|
+
atRoot = true;
|
|
1139
|
+
parentRect = rootRect;
|
|
1140
|
+
} else {
|
|
1141
|
+
// If the element has a non-visible overflow, and it's not the <body>
|
|
1142
|
+
// or <html> element, update the intersection rect.
|
|
1143
|
+
// Note: <body> and <html> cannot be clipped to a rect that's not also
|
|
1144
|
+
// the document rect, so no need to compute a new intersection.
|
|
1145
|
+
if (parent != document.body &&
|
|
1146
|
+
parent != document.documentElement &&
|
|
1147
|
+
parentComputedStyle.overflow != 'visible') {
|
|
1148
|
+
parentRect = getBoundingClientRect(parent);
|
|
1149
|
+
}
|
|
540
1150
|
}
|
|
541
1151
|
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
1152
|
+
// If either of the above conditionals set a new parentRect,
|
|
1153
|
+
// calculate new intersection data.
|
|
1154
|
+
if (parentRect) {
|
|
1155
|
+
intersectionRect = computeRectIntersection(parentRect, intersectionRect);
|
|
545
1156
|
|
|
546
|
-
|
|
547
|
-
key: 'addFullSizeImgToDom',
|
|
548
|
-
value: function addFullSizeImgToDom() {
|
|
549
|
-
this.fullSizeImg.insertBefore(this.placeholderImg);
|
|
1157
|
+
if (!intersectionRect) break;
|
|
550
1158
|
}
|
|
1159
|
+
parent = getParentNode(parent);
|
|
1160
|
+
}
|
|
1161
|
+
return intersectionRect;
|
|
1162
|
+
};
|
|
551
1163
|
|
|
552
|
-
// ---------------------------------------- | Image Transition
|
|
553
1164
|
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
1165
|
+
/**
|
|
1166
|
+
* Returns the root rect after being expanded by the rootMargin value.
|
|
1167
|
+
* @return {Object} The expanded root rect.
|
|
1168
|
+
* @private
|
|
1169
|
+
*/
|
|
1170
|
+
IntersectionObserver.prototype._getRootRect = function() {
|
|
1171
|
+
var rootRect;
|
|
1172
|
+
if (this.root) {
|
|
1173
|
+
rootRect = getBoundingClientRect(this.root);
|
|
1174
|
+
} else {
|
|
1175
|
+
// Use <html>/<body> instead of window since scroll bars affect size.
|
|
1176
|
+
var html = document.documentElement;
|
|
1177
|
+
var body = document.body;
|
|
1178
|
+
rootRect = {
|
|
1179
|
+
top: 0,
|
|
1180
|
+
left: 0,
|
|
1181
|
+
right: html.clientWidth || body.clientWidth,
|
|
1182
|
+
width: html.clientWidth || body.clientWidth,
|
|
1183
|
+
bottom: html.clientHeight || body.clientHeight,
|
|
1184
|
+
height: html.clientHeight || body.clientHeight
|
|
1185
|
+
};
|
|
1186
|
+
}
|
|
1187
|
+
return this._expandRectByRootMargin(rootRect);
|
|
1188
|
+
};
|
|
561
1189
|
|
|
562
|
-
}, {
|
|
563
|
-
key: 'initTransition',
|
|
564
|
-
value: function initTransition() {
|
|
565
|
-
var _this = this;
|
|
566
1190
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
1191
|
+
/**
|
|
1192
|
+
* Accepts a rect and expands it by the rootMargin value.
|
|
1193
|
+
* @param {Object} rect The rect object to expand.
|
|
1194
|
+
* @return {Object} The expanded rect.
|
|
1195
|
+
* @private
|
|
1196
|
+
*/
|
|
1197
|
+
IntersectionObserver.prototype._expandRectByRootMargin = function(rect) {
|
|
1198
|
+
var margins = this._rootMarginValues.map(function(margin, i) {
|
|
1199
|
+
return margin.unit == 'px' ? margin.value :
|
|
1200
|
+
margin.value * (i % 2 ? rect.width : rect.height) / 100;
|
|
1201
|
+
});
|
|
1202
|
+
var newRect = {
|
|
1203
|
+
top: rect.top - margins[0],
|
|
1204
|
+
right: rect.right + margins[1],
|
|
1205
|
+
bottom: rect.bottom + margins[2],
|
|
1206
|
+
left: rect.left - margins[3]
|
|
1207
|
+
};
|
|
1208
|
+
newRect.width = newRect.right - newRect.left;
|
|
1209
|
+
newRect.height = newRect.bottom - newRect.top;
|
|
572
1210
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
*
|
|
576
|
-
* Once the fade out transition has completed, remove any temporary properties
|
|
577
|
-
* from the full-size image (so it gets back to being a clone of the
|
|
578
|
-
* placeholder, with the full-size src).
|
|
579
|
-
*
|
|
580
|
-
* Finally, remove the placeholder image from the DOM since we don't need it
|
|
581
|
-
* any more.
|
|
582
|
-
*/
|
|
1211
|
+
return newRect;
|
|
1212
|
+
};
|
|
583
1213
|
|
|
584
|
-
}, {
|
|
585
|
-
key: 'transitionImg',
|
|
586
|
-
value: function transitionImg() {
|
|
587
|
-
var _this2 = this;
|
|
588
1214
|
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
1215
|
+
/**
|
|
1216
|
+
* Accepts an old and new entry and returns true if at least one of the
|
|
1217
|
+
* threshold values has been crossed.
|
|
1218
|
+
* @param {?IntersectionObserverEntry} oldEntry The previous entry for a
|
|
1219
|
+
* particular target element or null if no previous entry exists.
|
|
1220
|
+
* @param {IntersectionObserverEntry} newEntry The current entry for a
|
|
1221
|
+
* particular target element.
|
|
1222
|
+
* @return {boolean} Returns true if a any threshold has been crossed.
|
|
1223
|
+
* @private
|
|
1224
|
+
*/
|
|
1225
|
+
IntersectionObserver.prototype._hasCrossedThreshold =
|
|
1226
|
+
function(oldEntry, newEntry) {
|
|
1227
|
+
|
|
1228
|
+
// To make comparing easier, an entry that has a ratio of 0
|
|
1229
|
+
// but does not actually intersect is given a value of -1
|
|
1230
|
+
var oldRatio = oldEntry && oldEntry.isIntersecting ?
|
|
1231
|
+
oldEntry.intersectionRatio || 0 : -1;
|
|
1232
|
+
var newRatio = newEntry.isIntersecting ?
|
|
1233
|
+
newEntry.intersectionRatio || 0 : -1;
|
|
1234
|
+
|
|
1235
|
+
// Ignore unchanged ratios
|
|
1236
|
+
if (oldRatio === newRatio) return;
|
|
1237
|
+
|
|
1238
|
+
for (var i = 0; i < this.thresholds.length; i++) {
|
|
1239
|
+
var threshold = this.thresholds[i];
|
|
1240
|
+
|
|
1241
|
+
// Return true if an entry matches a threshold or if the new ratio
|
|
1242
|
+
// and the old ratio are on the opposite sides of a threshold.
|
|
1243
|
+
if (threshold == oldRatio || threshold == newRatio ||
|
|
1244
|
+
threshold < oldRatio !== threshold < newRatio) {
|
|
1245
|
+
return true;
|
|
595
1246
|
}
|
|
1247
|
+
}
|
|
1248
|
+
};
|
|
596
1249
|
|
|
597
|
-
/**
|
|
598
|
-
* Fade out the placeholder image.
|
|
599
|
-
*/
|
|
600
1250
|
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
1251
|
+
/**
|
|
1252
|
+
* Returns whether or not the root element is an element and is in the DOM.
|
|
1253
|
+
* @return {boolean} True if the root element is an element and is in the DOM.
|
|
1254
|
+
* @private
|
|
1255
|
+
*/
|
|
1256
|
+
IntersectionObserver.prototype._rootIsInDom = function() {
|
|
1257
|
+
return !this.root || containsDeep(document, this.root);
|
|
1258
|
+
};
|
|
606
1259
|
|
|
607
|
-
/**
|
|
608
|
-
* Remove temporary styles and class from the full-size image, which
|
|
609
|
-
* effectively means it has replaced the placeholder image.
|
|
610
|
-
*/
|
|
611
1260
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
1261
|
+
/**
|
|
1262
|
+
* Returns whether or not the target element is a child of root.
|
|
1263
|
+
* @param {Element} target The target element to check.
|
|
1264
|
+
* @return {boolean} True if the target element is a child of root.
|
|
1265
|
+
* @private
|
|
1266
|
+
*/
|
|
1267
|
+
IntersectionObserver.prototype._rootContainsTarget = function(target) {
|
|
1268
|
+
return containsDeep(this.root || document, target);
|
|
1269
|
+
};
|
|
1270
|
+
|
|
1271
|
+
|
|
1272
|
+
/**
|
|
1273
|
+
* Adds the instance to the global IntersectionObserver registry if it isn't
|
|
1274
|
+
* already present.
|
|
1275
|
+
* @private
|
|
1276
|
+
*/
|
|
1277
|
+
IntersectionObserver.prototype._registerInstance = function() {
|
|
1278
|
+
};
|
|
1279
|
+
|
|
1280
|
+
|
|
1281
|
+
/**
|
|
1282
|
+
* Removes the instance from the global IntersectionObserver registry.
|
|
1283
|
+
* @private
|
|
1284
|
+
*/
|
|
1285
|
+
IntersectionObserver.prototype._unregisterInstance = function() {
|
|
1286
|
+
};
|
|
1287
|
+
|
|
1288
|
+
|
|
1289
|
+
/**
|
|
1290
|
+
* Returns the result of the performance.now() method or null in browsers
|
|
1291
|
+
* that don't support the API.
|
|
1292
|
+
* @return {number} The elapsed time since the page was requested.
|
|
1293
|
+
*/
|
|
1294
|
+
function now() {
|
|
1295
|
+
return window.performance && performance.now && performance.now();
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
|
|
1299
|
+
/**
|
|
1300
|
+
* Throttles a function and delays its execution, so it's only called at most
|
|
1301
|
+
* once within a given time period.
|
|
1302
|
+
* @param {Function} fn The function to throttle.
|
|
1303
|
+
* @param {number} timeout The amount of time that must pass before the
|
|
1304
|
+
* function can be called again.
|
|
1305
|
+
* @return {Function} The throttled function.
|
|
1306
|
+
*/
|
|
1307
|
+
function throttle(fn, timeout) {
|
|
1308
|
+
var timer = null;
|
|
1309
|
+
return function () {
|
|
1310
|
+
if (!timer) {
|
|
1311
|
+
timer = setTimeout(function() {
|
|
1312
|
+
fn();
|
|
1313
|
+
timer = null;
|
|
1314
|
+
}, timeout);
|
|
618
1315
|
}
|
|
1316
|
+
};
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
|
|
1320
|
+
/**
|
|
1321
|
+
* Adds an event handler to a DOM node ensuring cross-browser compatibility.
|
|
1322
|
+
* @param {Node} node The DOM node to add the event handler to.
|
|
1323
|
+
* @param {string} event The event name.
|
|
1324
|
+
* @param {Function} fn The event handler to add.
|
|
1325
|
+
* @param {boolean} opt_useCapture Optionally adds the even to the capture
|
|
1326
|
+
* phase. Note: this only works in modern browsers.
|
|
1327
|
+
*/
|
|
1328
|
+
function addEvent(node, event, fn, opt_useCapture) {
|
|
1329
|
+
if (typeof node.addEventListener == 'function') {
|
|
1330
|
+
node.addEventListener(event, fn, opt_useCapture || false);
|
|
1331
|
+
}
|
|
1332
|
+
else if (typeof node.attachEvent == 'function') {
|
|
1333
|
+
node.attachEvent('on' + event, fn);
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
|
|
1337
|
+
|
|
1338
|
+
/**
|
|
1339
|
+
* Removes a previously added event handler from a DOM node.
|
|
1340
|
+
* @param {Node} node The DOM node to remove the event handler from.
|
|
1341
|
+
* @param {string} event The event name.
|
|
1342
|
+
* @param {Function} fn The event handler to remove.
|
|
1343
|
+
* @param {boolean} opt_useCapture If the event handler was added with this
|
|
1344
|
+
* flag set to true, it should be set to true here in order to remove it.
|
|
1345
|
+
*/
|
|
1346
|
+
function removeEvent(node, event, fn, opt_useCapture) {
|
|
1347
|
+
if (typeof node.removeEventListener == 'function') {
|
|
1348
|
+
node.removeEventListener(event, fn, opt_useCapture || false);
|
|
1349
|
+
}
|
|
1350
|
+
else if (typeof node.detatchEvent == 'function') {
|
|
1351
|
+
node.detatchEvent('on' + event, fn);
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
|
|
1356
|
+
/**
|
|
1357
|
+
* Returns the intersection between two rect objects.
|
|
1358
|
+
* @param {Object} rect1 The first rect.
|
|
1359
|
+
* @param {Object} rect2 The second rect.
|
|
1360
|
+
* @return {?Object} The intersection rect or undefined if no intersection
|
|
1361
|
+
* is found.
|
|
1362
|
+
*/
|
|
1363
|
+
function computeRectIntersection(rect1, rect2) {
|
|
1364
|
+
var top = Math.max(rect1.top, rect2.top);
|
|
1365
|
+
var bottom = Math.min(rect1.bottom, rect2.bottom);
|
|
1366
|
+
var left = Math.max(rect1.left, rect2.left);
|
|
1367
|
+
var right = Math.min(rect1.right, rect2.right);
|
|
1368
|
+
var width = right - left;
|
|
1369
|
+
var height = bottom - top;
|
|
1370
|
+
|
|
1371
|
+
return (width >= 0 && height >= 0) && {
|
|
1372
|
+
top: top,
|
|
1373
|
+
bottom: bottom,
|
|
1374
|
+
left: left,
|
|
1375
|
+
right: right,
|
|
1376
|
+
width: width,
|
|
1377
|
+
height: height
|
|
1378
|
+
};
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
|
|
1382
|
+
/**
|
|
1383
|
+
* Shims the native getBoundingClientRect for compatibility with older IE.
|
|
1384
|
+
* @param {Element} el The element whose bounding rect to get.
|
|
1385
|
+
* @return {Object} The (possibly shimmed) rect of the element.
|
|
1386
|
+
*/
|
|
1387
|
+
function getBoundingClientRect(el) {
|
|
1388
|
+
var rect;
|
|
1389
|
+
|
|
1390
|
+
try {
|
|
1391
|
+
rect = el.getBoundingClientRect();
|
|
1392
|
+
} catch (err) {
|
|
1393
|
+
// Ignore Windows 7 IE11 "Unspecified error"
|
|
1394
|
+
// https://github.com/w3c/IntersectionObserver/pull/205
|
|
1395
|
+
}
|
|
619
1396
|
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
1397
|
+
if (!rect) return getEmptyRect();
|
|
1398
|
+
|
|
1399
|
+
// Older IE
|
|
1400
|
+
if (!(rect.width && rect.height)) {
|
|
1401
|
+
rect = {
|
|
1402
|
+
top: rect.top,
|
|
1403
|
+
right: rect.right,
|
|
1404
|
+
bottom: rect.bottom,
|
|
1405
|
+
left: rect.left,
|
|
1406
|
+
width: rect.right - rect.left,
|
|
1407
|
+
height: rect.bottom - rect.top
|
|
1408
|
+
};
|
|
1409
|
+
}
|
|
1410
|
+
return rect;
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
|
|
1414
|
+
/**
|
|
1415
|
+
* Returns an empty rect object. An empty rect is returned when an element
|
|
1416
|
+
* is not in the DOM.
|
|
1417
|
+
* @return {Object} The empty rect.
|
|
1418
|
+
*/
|
|
1419
|
+
function getEmptyRect() {
|
|
1420
|
+
return {
|
|
1421
|
+
top: 0,
|
|
1422
|
+
bottom: 0,
|
|
1423
|
+
left: 0,
|
|
1424
|
+
right: 0,
|
|
1425
|
+
width: 0,
|
|
1426
|
+
height: 0
|
|
1427
|
+
};
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
/**
|
|
1431
|
+
* Checks to see if a parent element contains a child element (including inside
|
|
1432
|
+
* shadow DOM).
|
|
1433
|
+
* @param {Node} parent The parent element.
|
|
1434
|
+
* @param {Node} child The child element.
|
|
1435
|
+
* @return {boolean} True if the parent node contains the child node.
|
|
1436
|
+
*/
|
|
1437
|
+
function containsDeep(parent, child) {
|
|
1438
|
+
var node = child;
|
|
1439
|
+
while (node) {
|
|
1440
|
+
if (node == parent) return true;
|
|
1441
|
+
|
|
1442
|
+
node = getParentNode(node);
|
|
1443
|
+
}
|
|
1444
|
+
return false;
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
|
|
1448
|
+
/**
|
|
1449
|
+
* Gets the parent node of an element or its host element if the parent node
|
|
1450
|
+
* is a shadow root.
|
|
1451
|
+
* @param {Node} node The node whose parent to get.
|
|
1452
|
+
* @return {Node|null} The parent node or null if no parent exists.
|
|
1453
|
+
*/
|
|
1454
|
+
function getParentNode(node) {
|
|
1455
|
+
var parent = node.parentNode;
|
|
1456
|
+
|
|
1457
|
+
if (parent && parent.nodeType == 11 && parent.host) {
|
|
1458
|
+
// If the parent is a shadow root, return the host element.
|
|
1459
|
+
return parent.host;
|
|
1460
|
+
}
|
|
1461
|
+
return parent;
|
|
1462
|
+
}
|
|
623
1463
|
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
1464
|
+
|
|
1465
|
+
// Exposes the constructors globally.
|
|
1466
|
+
window.IntersectionObserver = IntersectionObserver;
|
|
1467
|
+
window.IntersectionObserverEntry = IntersectionObserverEntry;
|
|
1468
|
+
|
|
1469
|
+
}(window, document));
|
|
1470
|
+
|
|
1471
|
+
if (typeof Object.assign != 'function') {
|
|
1472
|
+
// Must be writable: true, enumerable: false, configurable: true
|
|
1473
|
+
Object.defineProperty(Object, 'assign', {
|
|
1474
|
+
value: function assign(target, varArgs) {
|
|
1475
|
+
|
|
1476
|
+
if (target == null) {
|
|
1477
|
+
// TypeError if undefined or null
|
|
1478
|
+
throw new TypeError('Cannot convert undefined or null to object');
|
|
629
1479
|
}
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
1480
|
+
|
|
1481
|
+
var to = Object(target);
|
|
1482
|
+
|
|
1483
|
+
for (var index = 1; index < arguments.length; index++) {
|
|
1484
|
+
var nextSource = arguments[index];
|
|
1485
|
+
|
|
1486
|
+
if (nextSource != null) {
|
|
1487
|
+
// Skip over if undefined or null
|
|
1488
|
+
for (var nextKey in nextSource) {
|
|
1489
|
+
// Avoid bugs when hasOwnProperty is shadowed
|
|
1490
|
+
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
|
|
1491
|
+
to[nextKey] = nextSource[nextKey];
|
|
1492
|
+
}
|
|
1493
|
+
}
|
|
1494
|
+
}
|
|
1495
|
+
}
|
|
1496
|
+
return to;
|
|
1497
|
+
},
|
|
1498
|
+
writable: true,
|
|
1499
|
+
configurable: true
|
|
1500
|
+
});
|
|
1501
|
+
}
|
|
636
1502
|
|
|
637
1503
|
var Optimizer = function () {
|
|
638
1504
|
function Optimizer() {
|
|
639
1505
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
640
1506
|
classCallCheck(this, Optimizer);
|
|
641
1507
|
|
|
1508
|
+
this.initDependencies();
|
|
642
1509
|
this.initOptions(options);
|
|
643
1510
|
this.optimizeImages();
|
|
644
1511
|
this.optimizeBgImages();
|
|
645
1512
|
}
|
|
646
1513
|
|
|
647
|
-
// ---------------------------------------- |
|
|
1514
|
+
// ---------------------------------------- | Dependencies
|
|
648
1515
|
|
|
649
1516
|
createClass(Optimizer, [{
|
|
1517
|
+
key: 'initDependencies',
|
|
1518
|
+
value: function initDependencies() {
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
// ---------------------------------------- | Options
|
|
1522
|
+
|
|
1523
|
+
}, {
|
|
650
1524
|
key: 'initOptions',
|
|
651
1525
|
value: function initOptions() {
|
|
652
1526
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -668,7 +1542,7 @@
|
|
|
668
1542
|
key: 'optimizeImages',
|
|
669
1543
|
value: function optimizeImages() {
|
|
670
1544
|
$(this.options.parent + ' img[data-optimize-img]').each(function (idx, img) {
|
|
671
|
-
new
|
|
1545
|
+
new Image(img);
|
|
672
1546
|
});
|
|
673
1547
|
}
|
|
674
1548
|
|
|
@@ -678,7 +1552,7 @@
|
|
|
678
1552
|
key: 'optimizeBgImages',
|
|
679
1553
|
value: function optimizeBgImages() {
|
|
680
1554
|
$(this.options.parent + ' [data-optimize-bg-img]').each(function (idx, img) {
|
|
681
|
-
new
|
|
1555
|
+
new BackgroundImage(img);
|
|
682
1556
|
});
|
|
683
1557
|
return true;
|
|
684
1558
|
}
|
|
@@ -688,8 +1562,6 @@
|
|
|
688
1562
|
|
|
689
1563
|
window['Imgix'] = window['Imgix'] || {};
|
|
690
1564
|
|
|
691
|
-
Imgix.ImgixBgImage = ImgixBgImage;
|
|
692
|
-
Imgix.ImgixImage = ImgixImage;
|
|
693
1565
|
Imgix.Optimizer = Optimizer;
|
|
694
1566
|
|
|
695
1567
|
}());
|