New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

spanning-css-polyfill

Package Overview
Dependencies
Maintainers
2
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

spanning-css-polyfill - npm Package Compare versions

Comparing version 1.0.14 to 2.0.0

2

build/spanning-css-polyfill.js

@@ -1,2 +0,2 @@

function e(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,i=new Array(n);t<n;t++)i[t]=e[t];return i}var n=function(){try{var e=function(){if(!i)return i=!0,Promise.resolve(Promise.resolve(!1)).then(function(e){i=e,window[t].dispatchEvent(new Event("change"))})}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},t="__foldables__",i=!1,r=function(){function e(){var e=this;if(void 0!==window[t])return window[t];var i=document.createDocumentFragment();this.addEventListener=i.addEventListener.bind(i),this.removeEventListener=i.removeEventListener.bind(i),this.dispatchEvent=function(n){if("change"===n.type){var t="on"+n.type;return"function"==typeof e[t]&&e[t](n),i.dispatchEvent(n)}},window.addEventListener("message",function(n){"update"===n.data.action&&Object.assign(e,n.data.value)}),window.addEventListener("resize",function(){return function(e,n){var t;return function(){var n=arguments,i=this;clearTimeout(t),t=setTimeout(function(){return e.apply(i,n)},200)}}(n())})}var i;return e.prototype.getSegments=function(){if("none"===this.spanning)return[{left:0,top:0,width:window.innerWidth,height:window.innerHeight}];if("single-fold-horizontal"===this.spanning){var e=(window.innerHeight-this.browserShellSize)/2,n=window.innerWidth;return[{top:0,left:0,width:n,height:e-this.foldSize/2},{top:e-this.foldSize/2,height:this.foldSize,left:0,width:n},{top:e+this.foldSize/2,left:0,width:n,height:e-this.foldSize/2}]}if("single-fold-vertical"===this.spanning){var t=window.innerWidth/2-this.foldSize/2,i=window.innerHeight;return[{top:0,left:0,width:t,height:i},{top:0,height:i,left:t,width:this.foldSize},{top:0,left:window.innerWidth/2+this.foldSize/2,width:t,height:i}]}},(i=[{key:"spanning",get:function(){return sessionStorage.getItem(t+"-spanning")||"none"},set:function(e){if(!["none","single-fold-horizontal","single-fold-vertical"].includes(e))throw new TypeError(e);sessionStorage.setItem(t+"-spanning",e),n()}},{key:"foldSize",get:function(){return+sessionStorage.getItem(t+"-fold-size")||0},set:function(e){if(!(Number(e)>=0))throw new TypeError(e);sessionStorage.setItem(t+"-fold-size",e),n()}},{key:"browserShellSize",get:function(){return+sessionStorage.getItem(t+"-browser-shell-size")||0},set:function(e){if(!(Number(e)>=0))throw new TypeError(e);sessionStorage.setItem(t+"-browser-shell-size",e),n()}}])&&function(e,n){for(var t=0;t<n.length;t++){var i=n[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}(e.prototype,i),e}();window[t]=new r,void 0===window.getWindowSegments&&(window.getWindowSegments=function(){var e=window[t].getSegments();return 1===e.length?e:[e[0],e[2]]});var o=/\((.*?)\)/gi,a=/@media[^\(]+/gi;function l(e,n){return e.replace(new RegExp("(\\s*)(@media.*?\\bspanning\\b[^{]+)\\{([\\s\\S]+?\\})(\\s*)\\}","gi"),n)}function s(e){var n,t=function(e){var n,t=new RegExp("(\\s*)(@media.*?\\bspanning\\b[^{]+)\\{([\\s\\S]+?\\})(\\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}(e),i=((n={})["single-fold-horizontal"]="",n["single-fold-vertical"]="",n.none="",n);return t.forEach(function(e){var n=e[1],t=e[2],r=e[3],l=e[4],s="none";t.indexOf("single-fold-horizontal")>-1&&(s="single-fold-horizontal"),t.indexOf("single-fold-vertical")>-1&&(s="single-fold-vertical");var d=t.match(a)||[],f=function(e){return e.match(o)||[]}(t);f=f.filter(function(e){return!e.includes("spanning")}).join(" and "),i[s]+=""+n+d+f+"{"+r+l+"}"}),i}var d=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? "+d);var f,h=new r;if(!d){var c=Array.from(document.querySelectorAll('link[rel="stylesheet"], style'));(f=c,Promise.all(f.map(function(e){return e.href?fetch(e.href).then(function(e){return e.text()}):e.textContent}))).then(function(e){var n=new DocumentFragment;e.forEach(function(e,t){for(var i=l(e,""),r=s(e),o=c[t].href||"inline",a=0,d=Object.entries(r);a<d.length;a++){var f=d[a];u[f[0]]+="/* origin: "+o+" */"+f[1]}var h=document.createElement("style");h.setAttribute("data-css-origin",o),h.textContent=i,n.appendChild(h)}),c.forEach(function(e){return null!=e.parentElement&&e.parentElement.removeChild(e)}),document.head.appendChild(n),v()})}var u={"single-fold-horizontal":"","single-fold-vertical":"",none:""};function g(e,n){if(d)return e;var t=l(e,""),i=s(e);n&&(u[n]={"single-fold-horizontal":"","single-fold-vertical":"",none:""});for(var r=n?u[n]:u,o=n?"":"/* origin: inline */",a=0,f=Object.entries(i);a<f.length;a++){var h=f[a];r[h[0]]+=""+o+h[1]}return r["non-spanning"]=t,t}function v(e){d||(p(e),h.addEventListener("change",function(){return p(e)}))}function p(n){for(var t=h,i=n?u[n.nodeName.toLowerCase()][t.spanning]:u[t.spanning],r=n?u[n.nodeName.toLowerCase()]["non-spanning"]:null,o=h.getSegments(),a=0,l=Object.entries(1===o.length?{}:o[1]);a<l.length;a++){var s=l[a];d=s[1]+"px",i=i.replace(new RegExp("env\\(\\s*fold-"+s[0]+"\\s*\\)","gi"),d)}var d,f="__foldables_sheet__",c=function(n,t){for(var i,r=function(n,t){var i;if("undefined"==typeof Symbol||null==n[Symbol.iterator]){if(Array.isArray(n)||(i=function(n,t){if(n){if("string"==typeof n)return e(n,void 0);var i=Object.prototype.toString.call(n).slice(8,-1);return"Object"===i&&n.constructor&&(i=n.constructor.name),"Map"===i||"Set"===i?Array.from(n):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?e(n,void 0):void 0}}(n))){i&&(n=i);var r=0;return function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(i=n[Symbol.iterator]()).next.bind(i)}(n.querySelectorAll("."+f));!(i=r()).done;)i.value.remove();var o=document.createElement("style");o.className=f,o.textContent=t,n===document?document.head.appendChild(o):n.appendChild(o)};if(n){var g=n.shadowRoot;"adoptedStyleSheets"in g&&g.adoptedStyleSheets.length>0?g.adoptedStyleSheets[0].replace(r+i):c(g,i)}else c(document,i)}export{r as FoldablesFeature,g as adjustCSS,v as observe};
function e(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,i=new Array(n);t<n;t++)i[t]=e[t];return i}var n=function(){try{var e=function(){if(!i)return i=!0,Promise.resolve(Promise.resolve(!1)).then(function(e){i=e,window[t].dispatchEvent(new Event("change"))})}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}},t="__foldables__",i=!1,r=function(){function e(){var e=this;if(void 0!==window[t])return window[t];var i=document.createDocumentFragment();this.addEventListener=i.addEventListener.bind(i),this.removeEventListener=i.removeEventListener.bind(i),this.dispatchEvent=function(n){if("change"===n.type){var t="on"+n.type;return"function"==typeof e[t]&&e[t](n),i.dispatchEvent(n)}},window.addEventListener("message",function(n){"update"===n.data.action&&Object.assign(e,n.data.value)}),window.addEventListener("resize",function(){return function(e,n){var t;return function(){var n=arguments,i=this;clearTimeout(t),t=setTimeout(function(){return e.apply(i,n)},200)}}(n())})}var i;return e.prototype.getSegments=function(){if("none"===this.screenSpanning)return[{left:0,top:0,width:window.innerWidth,height:window.innerHeight}];if("single-fold-horizontal"===this.screenSpanning){var e=(window.innerHeight-this.browserShellSize)/2,n=window.innerWidth;return[{top:0,left:0,width:n,height:e-this.foldSize/2},{top:e-this.foldSize/2,height:this.foldSize,left:0,width:n},{top:e+this.foldSize/2,left:0,width:n,height:e-this.foldSize/2}]}if("single-fold-vertical"===this.screenSpanning){var t=window.innerWidth/2-this.foldSize/2,i=window.innerHeight;return[{top:0,left:0,width:t,height:i},{top:0,height:i,left:t,width:this.foldSize},{top:0,left:window.innerWidth/2+this.foldSize/2,width:t,height:i}]}},(i=[{key:"screenSpanning",get:function(){return sessionStorage.getItem(t+"-spanning")||"none"},set:function(e){if(!["none","single-fold-horizontal","single-fold-vertical"].includes(e))throw new TypeError(e);sessionStorage.setItem(t+"-spanning",e),n()}},{key:"foldSize",get:function(){return+sessionStorage.getItem(t+"-fold-size")||0},set:function(e){if(!(Number(e)>=0))throw new TypeError(e);sessionStorage.setItem(t+"-fold-size",e),n()}},{key:"browserShellSize",get:function(){return+sessionStorage.getItem(t+"-browser-shell-size")||0},set:function(e){if(!(Number(e)>=0))throw new TypeError(e);sessionStorage.setItem(t+"-browser-shell-size",e),n()}}])&&function(e,n){for(var t=0;t<n.length;t++){var i=n[t];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}(e.prototype,i),e}();window[t]=new r,void 0===window.getWindowSegments&&(window.getWindowSegments=function(){var e=window[t].getSegments();return 1===e.length?e:[e[0],e[2]]});var o=/\((.*?)\)/gi,a=/@media[^\(]+/gi;function l(e,n){return e.replace(new RegExp("(\\s*)(@media.*?\\bscreen-spanning\\b[^{]+)\\{([\\s\\S]+?\\})(\\s*)\\}","gi"),n)}function s(e){var n,t=function(e){var n,t=new RegExp("(\\s*)(@media.*?\\bscreen-spanning\\b[^{]+)\\{([\\s\\S]+?\\})(\\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}(e),i=((n={})["single-fold-horizontal"]="",n["single-fold-vertical"]="",n.none="",n);return t.forEach(function(e){var n=e[1],t=e[2],r=e[3],l=e[4],s="none";t.indexOf("single-fold-horizontal")>-1&&(s="single-fold-horizontal"),t.indexOf("single-fold-vertical")>-1&&(s="single-fold-vertical");var d=t.match(a)||[],c=function(e){return e.match(o)||[]}(t);c=c.filter(function(e){return!e.includes("screen-spanning")}).join(" and "),i[s]+=""+n+d+c+"{"+r+l+"}"}),i}var d=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? "+d);var c,f=new r;if(!d){var h=Array.from(document.querySelectorAll('link[rel="stylesheet"], style'));(c=h,Promise.all(c.map(function(e){return e.href?fetch(e.href).then(function(e){return e.text()}):e.textContent}))).then(function(e){var n=new DocumentFragment;e.forEach(function(e,t){for(var i=l(e,""),r=s(e),o=h[t].href||"inline",a=0,d=Object.entries(r);a<d.length;a++){var c=d[a];u[c[0]]+="/* origin: "+o+" */"+c[1]}var f=document.createElement("style");f.setAttribute("data-css-origin",o),f.textContent=i,n.appendChild(f)}),h.forEach(function(e){return null!=e.parentElement&&e.parentElement.removeChild(e)}),document.head.appendChild(n),v()})}var u={"single-fold-horizontal":"","single-fold-vertical":"",none:""};function g(e,n){if(d)return e;var t=l(e,""),i=s(e);n&&(u[n]={"single-fold-horizontal":"","single-fold-vertical":"",none:""});for(var r=n?u[n]:u,o=n?"":"/* origin: inline */",a=0,c=Object.entries(i);a<c.length;a++){var f=c[a];r[f[0]]+=""+o+f[1]}return r["non-spanning"]=t,t}function v(e){d||(p(e),f.addEventListener("change",function(){return p(e)}))}function p(n){for(var t=f,i=n?u[n.nodeName.toLowerCase()][t.screenSpanning]:u[t.screenSpanning],r=n?u[n.nodeName.toLowerCase()]["non-spanning"]:null,o=f.getSegments(),a=0,l=Object.entries(1===o.length?{}:o[1]);a<l.length;a++){var s=l[a];d=s[1]+"px",i=i.replace(new RegExp("env\\(\\s*fold-"+s[0]+"\\s*\\)","gi"),d)}var d,c="__foldables_sheet__",h=function(n,t){for(var i,r=function(n,t){var i;if("undefined"==typeof Symbol||null==n[Symbol.iterator]){if(Array.isArray(n)||(i=function(n,t){if(n){if("string"==typeof n)return e(n,void 0);var i=Object.prototype.toString.call(n).slice(8,-1);return"Object"===i&&n.constructor&&(i=n.constructor.name),"Map"===i||"Set"===i?Array.from(n):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?e(n,void 0):void 0}}(n))){i&&(n=i);var r=0;return function(){return r>=n.length?{done:!0}:{done:!1,value:n[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(i=n[Symbol.iterator]()).next.bind(i)}(n.querySelectorAll("."+c));!(i=r()).done;)i.value.remove();var o=document.createElement("style");o.className=c,o.textContent=t,n===document?document.head.appendChild(o):n.appendChild(o)};if(n){var g=n.shadowRoot;"adoptedStyleSheets"in g&&g.adoptedStyleSheets.length>0?g.adoptedStyleSheets[0].replace(r+i):h(g,i)}else h(document,i)}export{r as FoldablesFeature,g as adjustCSS,v as observe};
//# sourceMappingURL=spanning-css-polyfill.js.map

4

package.json
{
"name": "spanning-css-polyfill",
"version": "1.0.14",
"version": "2.0.0",
"description": "Polyfill for CSS spanning media query",

@@ -37,4 +37,4 @@ "module": "build/spanning-css-polyfill.js",

"dependencies": {
"windowsegments-polyfill": "^1.0.3"
"windowsegments-polyfill": "^2.0.0"
}
}

16

README.md

@@ -9,5 +9,5 @@ CSS Foldable Display polyfill

### The 'spanning' CSS media feature
### The 'screen-spanning' CSS media feature
The `spanning` CSS media feature can be used to test whether the browser window is spanning across multiple diplays.
The `screen-spanning` CSS media feature can be used to test whether the browser window is spanning across multiple diplays.

@@ -18,3 +18,3 @@ ![Figure showing 2 foldable devices with different hinge postures](https://raw.githubusercontent.com/foldable-devices/spanning-css-polyfill/master/images/spanning-media-query.svg?sanitize=true)

The `spanning` media feature value can be one of the following keywords:
The `screen-spanning` media feature value can be one of the following keywords:

@@ -40,3 +40,3 @@ - **single-fold-vertical**

```css
@media (spanning: single-fold-vertical) {
@media (screen-spanning: single-fold-vertical) {
body {

@@ -105,4 +105,4 @@ flex-direction: row;

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.
You can update values such as `screenSpanning`, `foldSize` and `browserShellSize` by importing the `FoldablesFeature` object. You can also subscribe to the 'change' event
to be notified whenever the `'screenSpanning'` media query feature or the environment variables change. That can happen due to window resizes or because the configuration values were changed programmatically.

@@ -124,3 +124,3 @@ ```js

// Change multiple values by assignment; results in one update.
Object.assign(foldablesFeat, { foldSize: 50, spanning: "none"});
Object.assign(foldablesFeat, { foldSize: 50, screenSpanning: "none"});

@@ -181,3 +181,3 @@ // Change multiple values in one scope; results in one update

sheet.insertRule(css`@media (spanning: single-fold-vertical) {
sheet.insertRule(css`@media (screen-spanning: single-fold-vertical) {
.div {

@@ -184,0 +184,0 @@ flex: 0 0 env(fold-left);

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc