spanning-css-polyfill
Advanced tools
Comparing version 1.0.9 to 1.0.10
@@ -1,2 +0,2 @@ | ||
var e="spanning",n="single-fold-horizontal",t="single-fold-vertical",i="none",r="fold-top",o="fold-left",a="fold-height",s="fold-width",l="__foldables_env_vars__",d="(@media.*?\\b"+e+"\\b[^{]+)\\{([\\s\\S]+?\\})\\s*\\}",c=/\((.*?)\)/gi,f=/@media[^\(]+/gi,u=function(e){return new RegExp("env\\(\\s*"+e+"\\s*\\)","gi")};function h(e,n){return e.replace(new RegExp(d,"gi"),n)}function g(r){var o=function(e){var n,t=new RegExp(d,"gi");if("function"==typeof e.matchAll)n=Array.from(e.matchAll(t));else{for(n=[];n[n.length]=t.exec(e););n.length--}return n}(r),a={};return a[n]="",a[t]="",a[i]="",o.forEach(function(r){var o=r[1],s=r[2],l=i;o.indexOf(n)>-1&&(l=n),o.indexOf(t)>-1&&(l=t);var d=o.match(f)||[],u=o.match(c)||[];u=u.filter(function(n){return!n.includes(e)}).join(" and "),a[l]+="\n "+d+" "+u+" {\n "+s+"\n }"}),a}var v,p=function(){try{var e=function(){if(!w)return w=!0,Promise.resolve(Promise.resolve(!1)).then(function(e){w=e,v.dispatchEvent(new Event("change"))})}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},m=window.matchMedia("(spanning: single-fold-horizontal)").matches||window.matchMedia("(spanning: single-fold-vertical)").matches||window.matchMedia("(spanning: none)").matches||!1;console.info("CSS Spanning Media Queries are supported? "+m);var S,w=!1,E=function(){var e=this;if(void 0!==v)return v;var n=document.createDocumentFragment();this.addEventListener=n.addEventListener.bind(n),this.removeEventListener=n.removeEventListener.bind(n),this.dispatchEvent=function(t){if("change"===t.type){var i="on"+t.type;return"function"==typeof e[i]&&e[i](t),n.dispatchEvent(t)}},window.addEventListener("message",function(n){"update"===n.data.action&&Object.assign(e,n.data.value)})},b={spanning:{configurable:!0},foldSize:{configurable:!0},browserShellSize:{configurable:!0}};if(b.spanning.get=function(){return sessionStorage.getItem(l+"-spanning")||i},b.spanning.set=function(e){sessionStorage.setItem(l+"-spanning",e),p()},b.foldSize.get=function(){return+sessionStorage.getItem(l+"-foldSize")||0},b.foldSize.set=function(e){sessionStorage.setItem(l+"-foldSize",e),p()},b.browserShellSize.get=function(){return+sessionStorage.getItem(l+"-browserShellSize")||0},b.browserShellSize.set=function(e){sessionStorage.setItem(l+"-browserShellSize",e),p()},Object.defineProperties(E.prototype,b),v=new E,console.log(v),!m){var y=Array.from(document.querySelectorAll('link[rel="stylesheet"], style'));(S=y,Promise.all(S.map(function(e){var n=e.href;return n?fetch(n).then(function(e){return e.text()}):e.textContent}))).then(function(e){if(m)return sheet;var n=new DocumentFragment;e.forEach(function(e,t){for(var i,r,o,a=h(e,""),s=g(e),l=y[t].href||"inline",d=0,c=Object.entries(s);d<c.length;d+=1){var f=c[d];z[f[0]]+="/* origin: "+l+" */\n"+f[1]}n.appendChild((i={"data-css-origin":l},r=a,o=document.createElement("style"),Object.keys(i).forEach(function(e){o.setAttribute(e,i[e])}),void 0!==r&&(o.textContent=r),o))}),y.forEach(function(e){return null!=e.parentElement&&e.parentElement.removeChild(e)}),document.head.appendChild(n),C()})}var z={};function x(e,r){var o;if(m)return e;var a=h(e,""),s=g(e);r&&(z[r]=((o={})[n]="",o[t]="",o[i]="",o));for(var l=r?z[r]:z,d=r||"inline",c=0,f=Object.entries(s);c<f.length;c+=1){var u=f[c];l[u[0]]+="/* origin: "+d+" */\n"+u[1]}return l["non-spanning"]=a,a}function C(e){m||(L(e),window.addEventListener("resize",function(){return n=L(e),function(){var e=arguments,i=this;clearTimeout(t),t=setTimeout(function(){return n.apply(i,e)},150)};var n,t}),v.addEventListener("change",function(){return L(e)}))}function L(e){for(var i,d,c,f,h,g,p,m=v,S=e?z[e.nodeName.toLowerCase()][m.spanning]:z[m.spanning],w=e?z[e.nodeName.toLowerCase()]["non-spanning"]:null,E=0,b=Object.entries((c=void 0,f=void 0,h=void 0,g=void 0,p=void 0,f=0,h=0,g=0,p=0,(d=m).spanning===t&&(g=d.foldSize,p=window.innerHeight,f=window.innerWidth/2-d.foldSize/2),d.spanning===n&&(g=window.innerWidth,p=d.foldSize,h=(window.innerHeight-d.browserShellSize)/2-d.foldSize/2),(c={})[r]=h,c[o]=f,c[a]=p,c[s]=g,c));E<b.length;E+=1){var y=b[E];i=y[1]+"px",S=S.replace(u(y[0]),i)}var x=function(e,n){for(var t=0,i=e.querySelectorAll("."+l);t<i.length;t+=1)i[t].remove();var r=document.createElement("style");r.className=l,r.textContent=n,e===document?document.head.appendChild(r):e.appendChild(r)};if(e){var C=e.shadowRoot;"adoptedStyleSheets"in C&&C.adoptedStyleSheets.length>0?C.adoptedStyleSheets[0].replace(w+S):x(C,S)}else x(document,S)}z[n]="",z[t]="",z[i]="";export{E as CSSSpanningFeature,x as adjustCSS,C as observe}; | ||
var e="spanning",n="single-fold-horizontal",t="single-fold-vertical",i="none",r="fold-top",o="fold-left",a="fold-height",s="fold-width",l="__foldables_env_vars__",d="(@media.*?\\b"+e+"\\b[^{]+)\\{([\\s\\S]+?\\})\\s*\\}",c=/\((.*?)\)/gi,f=/@media[^\(]+/gi,u=function(e){return new RegExp("env\\(\\s*"+e+"\\s*\\)","gi")};function h(e,n){return e.replace(new RegExp(d,"gi"),n)}function g(r){var o=function(e){var n,t=new RegExp(d,"gi");if("function"==typeof e.matchAll)n=Array.from(e.matchAll(t));else{for(n=[];n[n.length]=t.exec(e););n.length--}return n}(r),a={};return a[n]="",a[t]="",a[i]="",o.forEach(function(r){var o=r[1],s=r[2],l=i;o.indexOf(n)>-1&&(l=n),o.indexOf(t)>-1&&(l=t);var d=o.match(f)||[],u=o.match(c)||[];u=u.filter(function(n){return!n.includes(e)}).join(" and "),a[l]+="\n "+d+" "+u+" {\n "+s+"\n }"}),a}var v,p=function(){try{var e=function(){if(!w)return w=!0,Promise.resolve(Promise.resolve(!1)).then(function(e){w=e,v.dispatchEvent(new Event("change"))})}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},m=window.matchMedia("(spanning: single-fold-horizontal)").matches||window.matchMedia("(spanning: single-fold-vertical)").matches||window.matchMedia("(spanning: none)").matches||!1;console.info("CSS Spanning Media Queries are supported? "+m);var S,w=!1,E=function(){var e=this;if(void 0!==v)return v;var n=document.createDocumentFragment();this.addEventListener=n.addEventListener.bind(n),this.removeEventListener=n.removeEventListener.bind(n),this.dispatchEvent=function(t){if("change"===t.type){var i="on"+t.type;return"function"==typeof e[i]&&e[i](t),n.dispatchEvent(t)}},window.addEventListener("message",function(n){"update"===n.data.action&&Object.assign(e,n.data.value)})},b={spanning:{configurable:!0},foldSize:{configurable:!0},browserShellSize:{configurable:!0}};if(b.spanning.get=function(){return sessionStorage.getItem(l+"-spanning")||i},b.spanning.set=function(e){sessionStorage.setItem(l+"-spanning",e),p()},b.foldSize.get=function(){return+sessionStorage.getItem(l+"-foldSize")||0},b.foldSize.set=function(e){sessionStorage.setItem(l+"-foldSize",e),p()},b.browserShellSize.get=function(){return+sessionStorage.getItem(l+"-browserShellSize")||0},b.browserShellSize.set=function(e){sessionStorage.setItem(l+"-browserShellSize",e),p()},Object.defineProperties(E.prototype,b),v=new E,console.log(v),!m){var y=Array.from(document.querySelectorAll('link[rel="stylesheet"], style'));(S=y,Promise.all(S.map(function(e){var n=e.href;return n?fetch(n).then(function(e){return e.text()}):e.textContent}))).then(function(e){if(m)return sheet;var n=new DocumentFragment;e.forEach(function(e,t){for(var i,r,o,a=h(e,""),s=g(e),l=y[t].href||"inline",d=0,c=Object.entries(s);d<c.length;d+=1){var f=c[d];z[f[0]]+="/* origin: "+l+" */\n"+f[1]}n.appendChild((i={"data-css-origin":l},r=a,o=document.createElement("style"),Object.keys(i).forEach(function(e){o.setAttribute(e,i[e])}),void 0!==r&&(o.textContent=r),o))}),y.forEach(function(e){return null!=e.parentElement&&e.parentElement.removeChild(e)}),document.head.appendChild(n),C()})}var z={};function x(e,r){var o;if(m)return e;var a=h(e,""),s=g(e);r&&(z[r]=((o={})[n]="",o[t]="",o[i]="",o));for(var l=r?z[r]:z,d=r||"inline",c=0,f=Object.entries(s);c<f.length;c+=1){var u=f[c];l[u[0]]+="/* origin: "+d+" */\n"+u[1]}return l["non-spanning"]=a,a}function C(e){m||(L(e),window.addEventListener("resize",function(){return n=L(e),function(){var e=arguments,i=this;clearTimeout(t),t=setTimeout(function(){return n.apply(i,e)},150)};var n,t}),v.addEventListener("change",function(){return L(e)}))}function L(e){for(var i,d,c,f,h,g,p,m=v,S=e?z[e.nodeName.toLowerCase()][m.spanning]:z[m.spanning],w=e?z[e.nodeName.toLowerCase()]["non-spanning"]:null,E=0,b=Object.entries((c=void 0,f=void 0,h=void 0,g=void 0,p=void 0,f=0,h=0,g=0,p=0,(d=m).spanning===t&&(g=d.foldSize,p=window.innerHeight,f=window.innerWidth/2-d.foldSize/2),d.spanning===n&&(g=window.innerWidth,p=d.foldSize,h=(window.innerHeight-d.browserShellSize)/2-d.foldSize/2),(c={})[r]=h,c[o]=f,c[a]=p,c[s]=g,c));E<b.length;E+=1){var y=b[E];i=y[1]+"px",S=S.replace(u(y[0]),i)}var x=function(e,n){for(var t=0,i=e.querySelectorAll("."+l);t<i.length;t+=1)i[t].remove();var r=document.createElement("style");r.className=l,r.textContent=n,e===document?document.head.appendChild(r):e.appendChild(r)};if(e){var C=e.shadowRoot;"adoptedStyleSheets"in C&&C.adoptedStyleSheets.length>0?C.adoptedStyleSheets[0].replace(w+S):x(C,S)}else x(document,S)}z[n]="",z[t]="",z[i]="";export{E as FoldablesFeature,x as adjustCSS,C as observe}; | ||
//# sourceMappingURL=spanning-css-polyfill.js.map |
{ | ||
"name": "spanning-css-polyfill", | ||
"version": "1.0.9", | ||
"version": "1.0.10", | ||
"description": "Polyfill for CSS spanning media query", | ||
@@ -5,0 +5,0 @@ "module": "build/spanning-css-polyfill.js", |
@@ -1,2 +0,2 @@ | ||
CSS Foldable Display polyfills | ||
CSS Foldable Display polyfill | ||
=== | ||
@@ -102,24 +102,24 @@ | ||
You can update values such as `spanning`, `foldSize` and `browserShellSize` by importing the `CSSSpanningFeature` object. You can also subscribe to the 'change' event | ||
You can update values such as `spanning`, `foldSize` and `browserShellSize` by importing the `FoldablesFeature` object. You can also subscribe to the 'change' event | ||
to be notified whenever the `'spanning'` media query feature or the environment variables change. That can happen due to window resizes or because the configuration values were changed programmatically. | ||
```js | ||
import { CSSSpanningFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js'; | ||
import { FoldablesFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js'; | ||
const spanningFeat = new CSSSpanningFeature; | ||
const foldablesFeat = new FoldablesFeature; | ||
// Add an event listener. | ||
spanningFeat.onchange = () => console.log("change"); | ||
foldablesFeat.onchange = () => console.log("change"); | ||
// Add as many event listeners as you want. | ||
spanningFeat.addEventListener('change', () => console.log("change")); | ||
foldablesFeat.addEventListener('change', () => console.log("change")); | ||
// Change a single value; results in one update (one 'change' event firing). | ||
spanningFeat.foldSize = 20; | ||
foldablesFeat.foldSize = 20; | ||
// Change multiple values by assignment; results in one update. | ||
Object.assign(spanningFeat, { foldSize: 50, spanning: "none"}); | ||
Object.assign(foldablesFeat, { foldSize: 50, spanning: "none"}); | ||
// Change multiple values in one scope; results in one update | ||
(function() { spanningFeat.foldSize = 100; spanningFeat = "single-fold-horizontal" })(); | ||
(function() { foldablesFeat.foldSize = 100; foldablesFeat = "single-fold-horizontal" })(); | ||
``` | ||
@@ -126,0 +126,0 @@ |
13389