css-scroll-snap-polyfill
Version:
Polyfill for CSS scroll snapping draft.
3 lines (2 loc) • 17.5 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e["scroll-snap-polyfill"]=t()}(this,function(){"use strict";function e(e){e.each(function(e){var t=document.querySelectorAll(e.getSelectors()),r=e.getDeclaration();[].forEach.call(t,function(e){!function(e,t){if(void 0!==t["scroll-snap-align"])return e.scrollSnapAlignment=function(e){var t=e["scroll-snap-align"],n=v,r=v;if(void 0!==t){var o=t.split(" ");n=o[0],r=o.length>1?o[1]:n}return{x:n,y:r}}(t),function(e){for(var t=e;e&&e!==document;e=e.parentNode)void 0!==e.snapElements&&e.snapElements.push(t)}(e);var r=e.tagName;"body"!=r.toLowerCase()&&"html"!=r.toLowerCase()||(e=document);e.addEventListener("scroll",A,!1),e.scrollPadding=function(e){var t=e["scroll-padding"],r=e["scroll-padding-top"],o=e["scroll-padding-right"],i=e["scroll-padding-bottom"],s=e["scroll-padding-left"],a={value:0,unit:"px"},u={value:0,unit:"px"},l={value:0,unit:"px"},c={value:0,unit:"px"};if(void 0!==t){var f=t.split(" ");f.forEach(function(e,t){var r=n(e);switch(t){case 0:a=r,u=r,l=r,c=r;break;case 1:u=r,c=r;break;case 2:l=r;break;case 3:c=r}})}void 0!==r&&(a=n(r));void 0!==o&&(u=n(o));void 0!==i&&(l=n(i));void 0!==s&&(c=n(s));return{top:a,right:u,bottom:l,left:c}}(t),e.snapElements=[]}(e,r)})})}function t(e){e.each(function(e){var t=document.querySelectorAll(e.getSelectors());[].forEach.call(t,function(e){!function(e){var t=e.tagName;"body"!=t.toLowerCase()&&"html"!=t.toLowerCase()||(e=document);document.removeEventListener("scroll",A,!1),e.removeEventListener("scroll",A,!1),e.snapLengthUnit=null,e.snapElements=[]}(e)})})}function n(e){var t=x.exec(e);if(null===t)return{value:0,unit:"px"};var n=m(t,3),r=(n[0],n[1]),o=n[2];return{value:parseInt(r,10),unit:o}}function r(e,t,n){return t&&"vw"===t.toLowerCase()?f(document.documentElement)*(e/100):t&&"vh"===t.toLowerCase()?c(document.documentElement)*(e/100):t&&"%"===t?f(n)*(e/100):e}function o(e,t){return-1===e?Math.floor(t):Math.ceil(t)}function i(e,t,n){return Math.max(Math.min(n,t),e)}function s(e,t,n){return t===y?0:t===g?c(e):t===_?o(n,c(e)/2):0}function a(e,t,n){return t===y?0:t===g?f(e):t===_?o(n,f(e)/2):0}function u(e){return e.scrollHeight}function l(e){return e.scrollWidth}function c(e){return e.offsetHeight}function f(e){return e.offsetWidth}function d(e){return e.offsetLeft+e.clientLeft}function h(e){return e.offsetTop+e.clientTop}function p(e,t){var n=Math.abs(e-t),r=100/Math.max(document.documentElement.clientHeight,window.innerHeight||1)*n,o=100/M*r;return isNaN(o)?0:Math.max(M/1.5,Math.min(o,M))}!function(e,t,n){function r(e){return e.replace(/^\s+|\s+$/g,"")}function o(e,t){var n,r=0;if(!e||!t)return!1;for(;n=t[r++];)if(e===n)return!0;return!1}function i(e){var t,n=0;for(this._rules=[];t=e[n++];)this._rules.push(new s(t))}function s(e){this._rule=e}function a(e){return this instanceof a?(this._options=e,e.keywords||(this._options={keywords:e}),this._promise=[],this._getStylesheets(),this._downloadStylesheets(),this._parseStylesheets(),this._filterCSSByKeywords(),this._buildMediaQueryMap(),this._reportInitialMatches(),void this._addMediaListeners()):new a(e)}var u=RegExp("^"+String({}.valueOf).replace(/[.*+?\^${}()|\[\]\\]/g,"\\$&").replace(/valueOf|for [^\]]+/g,".+?")+"$"),l=function(){var e=t.getElementsByTagName("base")[0],n=/^([a-zA-Z:]*\/\/)/;return function(t){return!n.test(t)&&!e||t.replace(RegExp.$1,"").split("/")[0]===location.host}}(),c={matchMedia:e.matchMedia&&e.matchMedia("only all").matches,nativeMatchMedia:function(e){return u.test(e)}(e.matchMedia)},f=function(){function t(){if(0===u.readyState||4===u.readyState){var e;(e=i[0])&&function(e){a++,u.open("GET",e,!0),u.onreadystatechange=function(){4!=u.readyState||200!=u.status&&304!=u.status||(r[e]=u.responseText,i.shift(),t())},u.send(null)}(e),e||n()}}function n(){for(var e;e=s.shift();)!function(e,t){for(var n,o=[],i=0;n=e[i++];)o.push(r[n]);t.call(null,o)}(e.urls,e.fn)}var r={},i=[],s=[],a=0,u=function(){var t;try{t=new e.XMLHttpRequest}catch(n){t=new e.ActiveXObject("Microsoft.XMLHTTP")}return t}();return{request:function(e,a){s.push({urls:e,fn:a}),function(e){for(var t,n=0,o=0;t=e[n++];)r[t]&&o++;return o===e.length}(e)?n():(function(e){for(var t,n=0;t=e[n++];)r[t]||o(t,i)||i.push(t)}(e),t())},clearCache:function(){r={}},_getRequestCount:function(){return a}}}(),d={_cache:{},clearCache:function(){d._cache={}},parse:function(e,t){function n(){return s(/^\{\s*/)}function o(){return s(/^\}\s*/)}function i(){var t,d=[];for(a(),u(d);"}"!=e.charAt(0)&&(t=function(){if(t=s(/^@([\-\w]+)?keyframes */)){var e=t[1],t=s(/^([\-\w]+)\s*/);if(t){var r=t[1];if(n()){u();for(var i,a=[];i=f();)a.push(i),u();if(o()){var l={name:r,keyframes:a};return e&&(l.vendor=e),l}}}}}()||function(){var e=s(/^@media *([^{]+)/);if(e){var t=r(e[1]);if(n()){u();var a=i();if(o())return{media:t,rules:a}}}}()||function(){var e=s(/^@supports *([^{]+)/);if(e){var t=r(e[1]);if(n()){u();var a=i();if(o())return{supports:t,rules:a}}}}()||h("import")||h("charset")||h("namespace")||function(){if(s(/^@page */)){var e=l()||[],t=[];if(n()){u();for(var r;r=c()||function(){var e=s(/^@([a-z\-]+) */);if(e){var t=e[1];return{type:t,declarations:p()}}}();)t.push(r),u();if(o())return{type:"page",selectors:e,declarations:t}}}}()||function(){var e=l();if(e)return u(),{selectors:e,declarations:p()}}());)d.push(t),u(d);return d}function s(t){var n=t.exec(e);if(n)return e=e.slice(n[0].length),n}function a(){s(/^\s*/)}function u(t){t=t||[];for(var n;n=function(){if("/"==e[0]&&"*"==e[1]){for(var t=2;"*"!=e[t]||"/"!=e[t+1];)++t;t+=2;var n=e.slice(2,t-2);return e=e.slice(t),a(),{comment:n}}}();)t.push(n);return t}function l(){var e=s(/^([^{]+)/);if(e)return r(e[0]).split(/\s*,\s*/)}function c(){var e=s(/^(\*?[\-\w]+)\s*/);if(e&&(e=e[0],s(/^:\s*/))){var t=s(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)\s*/);if(t)return t=r(t[0]),s(/^[;\s]*/),{property:e,value:t}}}function f(){for(var e,t=[];e=s(/^(from|to|\d+%|\.\d+%|\d+\.\d+%)\s*/);)t.push(e[1]),s(/^,\s*/);return t.length?{values:t,declarations:p()}:void 0}function h(e){var t=s(new RegExp("^@"+e+" *([^;\\n]+);\\s*"));if(t){var n={};return n[e]=r(t[1]),n}}function p(){var e=[];if(n()){u();for(var t;t=c();)e.push(t),u();if(o())return e}}return t&&d._cache[t]?d._cache[t]:(e=e.replace(/\/\*[\s\S]*?\*\//g,""),d._cache[t]=i())},filter:function(e,t){function n(e,t){return e||t?e?e.concat(t):[t]:void 0}function o(e){null==e.media&&delete e.media,null==e.supports&&delete e.supports,l.push(e)}function i(e,t){for(var n,o,i,s,a=/\*/,u=0;n=t[u++];)if(o=n.split(":"),i=new RegExp("^"+r(o[0]).replace(a,".*")+"$"),s=new RegExp("^"+r(o[1]).replace(a,".*")+"$"),i.test(e.property)&&s.test(e.value))return!0}function s(e,n,r){return t.selectors&&function(e,t){if(t)for(var n=t.length;n--;)if(e.indexOf(t[n])>=0)return!0}(e.selectors.join(","),t.selectors)?(o({media:n,supports:r,selectors:e.selectors,declarations:e.declarations}),!0):void 0}function a(e,n,r){if(t.declarations)for(var s,a=0;s=e.declarations[a++];)if(i(s,t.declarations))return o({media:n,supports:r,selectors:e.selectors,declarations:e.declarations}),!0}function u(e,t,r){for(var o,i=0;o=e[i++];)o.declarations?s(o,t,r)||a(o,t,r):o.rules&&o.media?u(o.rules,n(t,o.media),r):o.rules&&o.supports&&u(o.rules,t,n(r,o.supports))}var l=[];return u(e),l}},h=function(){function n(){if(r)return r;var e=t.documentElement,n=t.body,o=e.style.fontSize,i=n.style.fontSize,s=t.createElement("div");return e.style.fontSize="1em",n.style.fontSize="1em",n.appendChild(s),s.style.width="1em",s.style.position="absolute",r=s.offsetWidth,n.removeChild(s),n.style.fontSize=i,e.style.fontSize=o,r}var r,o,i=/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,s=/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/;return{matchMedia:function(r){return c.matchMedia?function(t){return e.matchMedia(t)}(r):function(e){var r,a,u=!1;return o=t.documentElement.clientWidth,i.test(e)&&(r="em"===RegExp.$2?parseFloat(RegExp.$1)*n():parseFloat(RegExp.$1)),s.test(e)&&(a="em"===RegExp.$2?parseFloat(RegExp.$1)*n():parseFloat(RegExp.$1)),r&&a?u=o>=r&&a>=o:(r&&o>=r&&(u=!0),a&&a>=o&&(u=!0)),{matches:u,media:e}}(r)},clearCache:function(){c.nativeMatchMedia||(o=null,{})}}}(),p=function(){var t=function(){var e=[];return{add:function(t,n,r){for(var o,i=0;o=e[i++];)if(o.polyfill==t&&o.mql===n&&o.fn===r)return!1;n.addListener(r),e.push({polyfill:t,mql:n,fn:r})},remove:function(t){for(var n,r=0;n=e[r++];)n.polyfill===t&&(n.mql.removeListener(n.fn),e.splice(--r,1))}}}(),n=function(t){function n(){for(var e,n=0;e=t[n++];)e.fn()}return{add:function(r,o){t.length||(e.addEventListener?e.addEventListener("resize",n,!1):e.attachEvent("onresize",n)),t.push({polyfill:r,fn:o})},remove:function(r){for(var o,i=0;o=t[i++];)o.polyfill===r&&t.splice(--i,1);t.length||(e.removeEventListener?e.removeEventListener("resize",n,!1):e.detachEvent&&e.detachEvent("onresize",n))}}}([]);return{removeListeners:function(e){c.nativeMatchMedia?t.remove(e):n.remove(e)},addListeners:function(e,r){var o=e._mediaQueryMap,i={};!function(){for(var e in o)o.hasOwnProperty(e)&&(i[e]=h.matchMedia(e).matches)}(),function(){if(c.nativeMatchMedia)for(var s in o)o.hasOwnProperty(s)&&function(n,o){t.add(e,n,function(){r.call(e,o,n.matches)})}(o[s],s);else{var a=function(e,t){var n;return function(){clearTimeout(n),n=setTimeout(e,t)}}(function(e,t){return function(){!function(e,t){var n,o={};h.clearCache();for(n in t)t.hasOwnProperty(n)&&(o[n]=h.matchMedia(n).matches,o[n]!=i[n]&&r.call(e,n,h.matchMedia(n).matches));i=o}(e,t)}}(e,o),e._options.debounceTimeout||100);n.add(e,a)}}()}}}();i.prototype.each=function(e,t){var n,r=0;for(t||(t=this);n=this._rules[r++];)e.call(t,n)},i.prototype.size=function(){return this._rules.length},i.prototype.at=function(e){return this._rules[e]},s.prototype.getDeclaration=function(){for(var e,t={},n=0,r=this._rule.declarations;e=r[n++];)t[e.property]=e.value;return t},s.prototype.getSelectors=function(){return this._rule.selectors.join(", ")},s.prototype.getMedia=function(){return this._rule.media.join(" and ")},a.prototype.doMatched=function(e){return this._doMatched=e,this._resolve(),this},a.prototype.undoUnmatched=function(e){return this._undoUnmatched=e,this._resolve(),this},a.prototype.getCurrentMatches=function(){for(var e,t,n=0,r=[];e=this._filteredRules[n++];)(!(t=e.media&&e.media.join(" and "))||h.matchMedia(t).matches)&&r.push(e);return new i(r)},a.prototype.destroy=function(){this._undoUnmatched&&(this._undoUnmatched(this.getCurrentMatches()),p.removeListeners(this))},a.prototype._defer=function(e,t){e.call(this)?t.call(this):this._promise.push({condition:e,callback:t})},a.prototype._resolve=function(){for(var e,t=0;e=this._promise[t];)e.condition.call(this)?(this._promise.splice(t,1),e.callback.call(this)):t++},a.prototype._getStylesheets=function(){var e,n,r,i,s,a,u,c=0,f=[];if(this._options.include){for(n=this._options.include;e=n[c++];)if(r=t.getElementById(e)){if("STYLE"===r.nodeName){u={text:r.textContent},f.push(u);continue}if(r.media&&"print"==r.media)continue;if(!l(r.href))continue;u={href:r.href},r.media&&(u.media=r.media),f.push(u)}}else{for(n=this._options.exclude,i=t.getElementsByTagName("link");r=i[c++];)r.rel&&"stylesheet"==r.rel&&"print"!=r.media&&l(r.href)&&!o(r.id,n)&&(u={href:r.href},r.media&&(u.media=r.media),f.push(u));for(a=t.getElementsByTagName("style"),c=0;s=a[c++];)u={text:s.textContent},f.push(u)}return this._stylesheets=f},a.prototype._downloadStylesheets=function(){for(var e,t=this,n=[],r=0;e=this._stylesheets[r++];)n.push(e.href);f.request(n,function(e){for(var n,r=0;n=e[r];)t._stylesheets[r++].text=n;t._resolve()})},a.prototype._parseStylesheets=function(){this._defer(function(){return this._stylesheets&&this._stylesheets.length&&this._stylesheets[0].text},function(){for(var e,t=0;e=this._stylesheets[t++];)e.rules=d.parse(e.text,e.url)})},a.prototype._filterCSSByKeywords=function(){this._defer(function(){return this._stylesheets&&this._stylesheets.length&&this._stylesheets[0].rules},function(){for(var e,t,n=[],r=0;e=this._stylesheets[r++];)(t=e.media)&&"all"!=t&&"screen"!=t?n.push({rules:e.rules,media:e.media}):n=n.concat(e.rules);this._filteredRules=d.filter(n,this._options.keywords)})},a.prototype._buildMediaQueryMap=function(){this._defer(function(){return this._filteredRules},function(){var e,t,n=0;for(this._mediaQueryMap={};t=this._filteredRules[n++];)t.media&&(e=t.media.join(" and "),this._mediaQueryMap[e]=h.matchMedia(e))})},a.prototype._reportInitialMatches=function(){this._defer(function(){return this._filteredRules&&this._doMatched},function(){this._doMatched(this.getCurrentMatches())})},a.prototype._addMediaListeners=function(){this._defer(function(){return this._filteredRules&&this._doMatched&&this._undoUnmatched},function(){p.addListeners(this,function(e,t){for(var n,r=0,o=[],s=[];n=this._filteredRules[r++];)n.media&&n.media.join(" and ")==e&&(t?o:s).push(n);o.length&&this._doMatched(new i(o)),s.length&&this._undoUnmatched(new i(s))})})},a.modules={DownloadManager:f,StyleManager:d,MediaManager:h,EventManager:p},a.constructors={Ruleset:i,Rule:s},e.Polyfill=a}(window,document);!function(){function e(e){this.value=e}function t(t){function n(o,i){try{var s=t[o](i),a=s.value;a instanceof e?Promise.resolve(a.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(s.done?"return":"normal",s.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,s){var a={key:e,arg:t,resolve:r,reject:s,next:null};i?i=i.next=a:(o=i=a,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var m=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var s,a=e[Symbol.iterator]();!(r=(s=a.next()).done)&&(n.push(s.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{!r&&a.return&&a.return()}finally{if(o)throw i}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),v="none",y="start",g="end",_="center",x=/(\d+)(px|vh|vw|%)/g,w=.18,M=350,E=null,S=null,L=void 0,b=void 0,A=function(e){L=e.target,b=function(e){return e==document||e==window?document.documentElement.scrollTop>0||document.documentElement.scrollLeft>0?document.documentElement:document.querySelector("body"):e}(L),N&&(cancelAnimationFrame(N)||clearTimeout(N)),E?clearTimeout(E):S={y:b.scrollTop,x:b.scrollLeft},E=setTimeout(C,45)},C=function(){if(S.y!=b.scrollTop||S.x!=b.scrollLeft){var e={y:S.y-b.scrollTop>0?-1:1,x:S.x-b.scrollLeft>0?-1:1},t=void 0;void 0!==b.snapElements&&b.snapElements.length>0&&(t=function(e,t,n){function p(e,t){return 0===R||R===m-1?e:e-t}var m=t.snapElements.length,v=e.scrollTop,y=e.scrollLeft,g=Math.min(n.y,n.x),_={y:0,x:0},x=e.scrollPadding,M=x.top,E=x.right,S=x.bottom,L=x.left,b=o(n,r(M.value,M.unit,e)),A=(o(n,r(E.value,E.unit,e)),o(n,r(S.value,S.unit,e)),o(n,r(L.value,L.unit,e)));if(y>0&&y+f(e)===l(e)||v>0&&v+c(e)===u(e)){R=m-1;var C=t.snapElements[R],k={x:d(C)-d(e)+a(C,C.scrollSnapAlignment.x,n),y:h(C)-h(e)+s(C,C.scrollSnapAlignment.y,n)};return C.snapCoords=k,{y:i(0,u(e),k.y),x:i(0,l(e),k.x)}}var N=t.snapElements[R],z={x:0===R?0:d(N)-d(e)+a(N,N.scrollSnapAlignment.x,n)-a(e,N.scrollSnapAlignment.x,n),y:0===R?0:h(N)-h(e)+s(N,N.scrollSnapAlignment.y,n)-s(e,N.scrollSnapAlignment.y,n)};N.snapCoords=z;for(var q=z.x+n.x*f(N)*w,$=z.y+n.y*c(N)*w,j=R+g;j<m&&j>=0&&(T=t.snapElements[j],_={y:0===j?0:h(T)-h(e)+s(T,T.scrollSnapAlignment.y,n)-s(e,T.scrollSnapAlignment.y,n),x:0===j?0:d(T)-d(e)+a(T,T.scrollSnapAlignment.x,n)-a(e,T.scrollSnapAlignment.x,n)},T.snapCoords=_,!(1===n.x?y<q:y>q)||!(1===n.y?v<$:v>$));j+=g){var P=_.x+n.x*f(T)*w,F=_.y+n.y*c(T)*w;if(!(1===n.x?y>P:y<P)&&!(1===n.y?v>F:v<F))return R=j,{y:i(0,u(e),p(_.y,b)),x:i(0,l(e),p(_.x,A))}}return 1==g&&j===m-1?(R=m-1,{y:i(0,u(e),_.y),x:i(0,l(e),_.x)}):-1==g&&0===j?(R=0,{y:i(0,u(e),_.y),x:i(0,l(e),_.x)}):{y:i(0,u(e),p(t.snapElements[R].snapCoords.y,b)),x:i(0,l(e),p(t.snapElements[R].snapCoords.x,A))}}(b,L,e)),L.removeEventListener("scroll",A,!1),z(b,t,function(){L.addEventListener("scroll",A,!1)}),isNaN(t.x)&&isNaN(t.y)||(S=t)}},T=null,R=0,k=function(e,t,n,r){return n>r?t:e+(t-e)*function(e){return e*e*e}(n/r)},N=null,z=function(e,t,n){var r={y:e.scrollTop,x:e.scrollLeft},o=Date.now(),i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=Math.max(p(r.y,t.y),p(r.x,t.x));!function a(){var u=Date.now()-o;if(isNaN(t.y)||(e.scrollTop=k(r.y,t.y,u,s)),isNaN(t.x)||(e.scrollLeft=k(r.x,t.x,u,s)),u>s){if("function"==typeof n)return n(t)}else N=i(a)}()};return function(){"scrollSnapAlign"in document.documentElement.style||"webkitScrollSnapAlign"in document.documentElement.style||"msScrollSnapAlign"in document.documentElement.style||Polyfill({declarations:["scroll-snap-type:*","scroll-snap-align:*","scroll-snap-padding:*"]}).doMatched(e).undoUnmatched(t)}});
//# sourceMappingURL=css-scroll-snap-polyfill.umd.js.map