spanning-css-polyfill - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

build/spanning-css-polyfill.js

@@ -1,2 +0,2 @@
-var e="spanning",n="single-fold-horizontal",t="single-fold-vertical",i="none",o="fold-top",r="fold-left",a="fold-height",d="fold-width",l="__foldables_env_vars__",s="(@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(s,"gi"),n)}function p(o){var r=function(e){var n,t=new RegExp(s,"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}(o),a={};return a[n]="",a[t]="",a[i]="",r.forEach(function(o){var r=o[1],d=o[2],l=i;r.indexOf(n)>-1&&(l=n),r.indexOf(t)>-1&&(l=t);var s=r.match(f)||[],u=r.match(c)||[];u=u.filter(function(n){return!n.includes(e)}).join(" and "),a[l]+="\n      "+s+" "+u+" {\n        "+d+"\n      }"}),a}var g,v=window.matchMedia("(spanning: single-fold-horizontal)").matches||window.matchMedia("(spanning: single-fold-vertical)").matches||window.matchMedia("(spanning: none)").matches||!1;if(console.info("CSS Spanning Media Queries are supported? "+v),!v){if(void 0===window[l]){var w=document.createDocumentFragment();Object.defineProperty(window,l,{value:{update:E,spanning:sessionStorage.getItem(l+"-spanning")||i,foldSize:+sessionStorage.getItem(l+"-foldSize")||0,browserShellSize:+sessionStorage.getItem(l+"-browserShellSize")||0,addEventListener:w.addEventListener.bind(w),dispatchEvent:w.dispatchEvent.bind(w)}}),window.addEventListener("message",function(e){"update"===(e.data.action||"")&&window[l].update(e.data.value||{})})}var m=Array.from(document.querySelectorAll('link[rel="stylesheet"], style'));(g=m,Promise.all(g.map(function(e){var n=e.href;return n?fetch(n).then(function(e){return e.text()}):e.textContent}))).then(function(e){if(v)return sheet;var n=new DocumentFragment;e.forEach(function(e,t){for(var i,o,r,a=h(e,""),d=p(e),l=m[t].href||"inline",s=0,c=Object.entries(d);s<c.length;s+=1){var f=c[s];y[f[0]]+="/* origin:  "+l+" */\n"+f[1]}n.appendChild((i={"data-css-origin":l},o=a,r=document.createElement("style"),Object.keys(i).forEach(function(e){r.setAttribute(e,i[e])}),void 0!==o&&(r.textContent=o),r))}),m.forEach(function(e){return null!=e.parentElement&&e.parentElement.removeChild(e)}),document.head.appendChild(n),z()})}var S=new Set(["foldSize","browserShellSize","spanning"]);function E(e){if(v)throw new DOMException("Failed updating; spanning is natively supported by the user agent.","NotSupportedError");Object.keys(e).forEach(function(n){S.has(n)&&(window[l][n]=e[n],sessionStorage.setItem(l+"-"+n,window[l][n]))}),window[l].dispatchEvent(new Event("update"))}var y={};function b(e,o){var r;if(v)return e;var a=h(e,""),d=p(e);o&&(y[o]=((r={})[n]="",r[t]="",r[i]="",r));for(var l=o?y[o]:y,s=o||"inline",c=0,f=Object.entries(d);c<f.length;c+=1){var u=f[c];l[u[0]]+="/* origin:  "+s+" */\n"+u[1]}return l["non-spanning"]=a,a}function z(e){v||(x(e),window.addEventListener("resize",function(){return n=x(e),function(){var e=arguments,i=this;clearTimeout(t),t=setTimeout(function(){return n.apply(i,e)},150)};var n,t}),window[l].addEventListener("update",function(){return x(e)}))}function x(e){for(var i,s,c,f,h,p,g,v=window[l],w=e?y[e.nodeName.toLowerCase()][v.spanning]:y[v.spanning],m=e?y[e.nodeName.toLowerCase()]["non-spanning"]:null,S=0,E=Object.entries((c=void 0,f=void 0,h=void 0,p=void 0,g=void 0,f=0,h=0,p=0,g=0,(s=v).spanning===t&&(p=s.foldSize,g=window.innerHeight,f=window.innerWidth/2-s.foldSize/2),s.spanning===n&&(p=window.innerWidth,g=s.foldSize,h=(window.innerHeight-s.browserShellSize)/2-s.foldSize/2),(c={})[o]=h,c[r]=f,c[a]=g,c[d]=p,c));S<E.length;S+=1){var b=E[S];i=b[1]+"px",w=w.replace(u(b[0]),i)}var z=function(e,n){for(var t=0,i=e.querySelectorAll("."+l);t<i.length;t+=1)i[t].remove();var o=document.createElement("style");o.className=l,o.textContent=n,e===document?document.head.appendChild(o):e.appendChild(o)};if(e){var x=e.shadowRoot;"adoptedStyleSheets"in x&&x.adoptedStyleSheets.length>0?x.adoptedStyleSheets[0].replace(m+w):z(x,w)}else z(document,w)}y[n]="",y[t]="",y[i]="";export{E as update,b as adjustCSS,z 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 CSSSpanningFeature,x as adjustCSS,C as observe};
 //# sourceMappingURL=spanning-css-polyfill.js.map

package.json

 {
   "name": "spanning-css-polyfill",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Polyfill for CSS spanning media query",
@@ -5,0 +5,0 @@ "module": "build/spanning-css-polyfill.js",

README.md

@@ -102,10 +102,24 @@ CSS Foldable Display polyfills
 
-You can update values such as `spanning`, `foldSize` and `browserShellSize` by calling the `update` method:
+You can update values such as `spanning`, `foldSize` and `browserShellSize` by importing the `CSSSpanningFeature` 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
-  update({
-    spanning: "single-fold-horizontal",
-    foldSize: 30,
-    browserShellSize: 20
-  });
+  import { CSSSpanningFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js';
+
+  const spanningFeat = new CSSSpanningFeature;
+
+  // Add an event listener.
+  spanningFeat.onchange = () => console.log("change");
+
+    // Add as many event listeners as you want.
+  spanningFeat.addEventListener('change', () => console.log("change"));
+
+  // Change a single value; results in one update (one 'change' event firing).
+  spanningFeat.foldSize = 20;
+
+  // Change multiple values by assignment; results in one update.
+  Object.assign(spanningFeat, { foldSize: 50, spanning: "none"});
+
+  // Change multiple values in one scope; results in one update
+  (function() { spanningFeat.foldSize = 100; spanningFeat = "single-fold-horizontal" })();
 ```
@@ -174,3 +188,3 @@
 ===
-Located [here](https://foldable-devices.github.io/spanning-css-polyfill/).
+Located [here](https://foldable-devices.github.io/spanning-css-polyfill/global.html).
 
@@ -177,0 +191,0 @@ Demos

No alert changes

Improved metrics

Total package byte prevSize

13390

increased by11.82%

Lines of code

19

increased by11.76%

Number of lines in readme file

206

increased by7.29%

No dependency changes