scaler-js
Version:
Your best ally for easily building responsive web applications
1 lines • 7.2 kB
JavaScript
!function e(t,n,r){function o(s,a){if(!n[s]){if(!t[s]){var c="function"==typeof require&&require;if(!a&&c)return c(s,!0);if(i)return i(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var l=n[s]={exports:{}};t[s][0].call(l.exports,(function(e){return o(t[s][1][e]||e)}),l,l.exports,e,t,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),(0,e("./index").default)("runtime")},{"./index":3}],2:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.browserFontSizeDiffVarName=n.indexHtmlFile=n.bypassScalerTransformationClassName=n.htmlTagBaseFontSize=void 0,n.htmlTagBaseFontSize=16,n.bypassScalerTransformationClassName="bypass-scaler-js-transformation",n.indexHtmlFile="/index.html",n.browserFontSizeDiffVarName="--browser-font-size-diff"},{}],3:[function(e,t,n){"use strict";function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}var o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o.apply(this,arguments)};Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(e){function t(){var t,n=document.querySelector("html"),u=null==n?void 0:n.getAttribute("data-scaler-js-transform-pixels"),l="runtime"===e&&"false"!=u,f="object"===r(e),d=l||f||!0===e;t=l&&u&&(0,i.isValidJsonString)(u)?Object.assign(a.transformPixelsDefault,JSON.parse(u)):f?Object.assign(a.transformPixelsDefault,o({},e)):a.transformPixelsDefault,setTimeout((function(){!function(e,t){var n="";Array.from(document.styleSheets).forEach((function(r){try{var o=r.cssRules;Array.from(o).filter((function(e){return e instanceof CSSStyleRule})).forEach((function(r){var o=(0,s.default)(e,t,r);o&&(n+="\n"+o)}))}catch(e){console.warn("Scaler-js: Could not access a stylesheet rule. This might or might not affect your page responsiveness",e)}}));var r=document.createElement("style");r.setAttribute("type","text/css"),r.setAttribute("data-scaler-js-transformations","true"),r.textContent=n.replace(/\n/g,""),document.head.appendChild(r)}(d,t),function(e,t){var n=new MutationObserver((function(n){for(var r=0,o=n;r<o.length;r++){var i=o[r];"childList"===i.type&&i.addedNodes.forEach((function(n){var r;if(n.nodeType===Node.ELEMENT_NODE&&"style"===n.tagName.toLowerCase()){var o=n;if(o.sheet){var i="";if(Array.from(o.sheet.cssRules).filter((function(e){return e instanceof CSSStyleRule})).forEach((function(n){var r=(0,s.default)(e,t,n);r&&(i+="\n"+r)})),i){var a=null!==(r=o.textContent)&&void 0!==r?r:"";o.textContent=a+i}}}}))}}));n.observe(document.head,{childList:!0,subtree:!0})}(d,t)}));var m=(0,c.default)(),h=document.createElement("script");h.setAttribute("data-scaler-js-html-font-size-watcher","true"),h.textContent=m,document.head.appendChild(h)}"loading"!==window.document.readyState?t():window.document.addEventListener("DOMContentLoaded",(function(){t()}))};var i=e("./utils"),s=e("./transformCss"),a=e("./options"),c=e("./script")},{"./options":4,"./script":5,"./transformCss":6,"./utils":7}],4:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.transformPixelsDefault=void 0,n.transformPixelsDefault={excludeAttributes:[],excludeSelectors:[]}},{}],5:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=e("./constants");n.default=function(){return"\n if (typeof window !== 'undefined') {\n const baseFontSize = ".concat(r.htmlTagBaseFontSize,"\n const segments = { width: 80, height: 45 }\n const preciseBreakpoints = { width: 1320, height: 720 }\n\n function getVirtualRemFontSize(width, height) {\n const isLandscape = width > height\n const widthSegment = isLandscape ? segments.width : segments.height\n const heightSegment = isLandscape ? segments.height : segments.width\n const preciseWidthBreakpoint = isLandscape ? preciseBreakpoints.width : preciseBreakpoints.height\n const preciseHeightBreakpoint = isLandscape ? preciseBreakpoints.height : preciseBreakpoints.width\n let X = width > preciseWidthBreakpoint ? widthSegment : widthSegment - Math.floor((preciseWidthBreakpoint - width) / (widthSegment / 2))\n let Y = height > preciseHeightBreakpoint ? heightSegment : heightSegment - Math.floor((preciseHeightBreakpoint - height) / (heightSegment / 2))\n return Math.round(((width / X) + (height / Y)) / 2)\n }\n\n const setBrowserFontSizeDiff = function(htmlElement) {\n htmlElement.style.removeProperty('font-size');\n const browserFontSize = window.getComputedStyle(htmlElement).getPropertyValue('font-size');\n const browserDifference = Number(browserFontSize.replace('px', '')) - baseFontSize;\n document.documentElement.style.setProperty('").concat(r.browserFontSizeDiffVarName,"', browserDifference + 'px')\n }\n\n const setVirtualRemFontSize = function(htmlElement) {\n const vRem = getVirtualRemFontSize(window.innerWidth, window.innerHeight)\n htmlElement.style.setProperty('font-size', vRem + 'px')\n }\n\n const updateHtmlFontSize = function() {\n const htmlElement = document.querySelector('html');\n setBrowserFontSizeDiff(htmlElement)\n setVirtualRemFontSize(htmlElement)\n }\n\n const initHtmlFontSizeWatcher = function() {\n window.addEventListener('resize', updateHtmlFontSize)\n updateHtmlFontSize()\n }\n\n if (window.document.readyState !== 'loading') {\n initHtmlFontSizeWatcher();\n } else {\n window.document.addEventListener('DOMContentLoaded', function() {\n initHtmlFontSizeWatcher();\n });\n }\n }")}},{"./constants":2}],6:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=e("./constants");function o(e){return(e/r.htmlTagBaseFontSize).toFixed(4).replace(/[.,]0+$/,"")}n.default=function(e,t,n){var i=n.selectorText;if(!i)return"";var s=t.excludeSelectors.some((function(e){return i.includes(e)})),a=new Map;if(Array.from(n.styleMap).forEach((function(n){var i=n[0],c=n[1];if(c&&Array.isArray(c)&&c[0]instanceof CSSUnitValue){var u=c[0],l="px"===u.unit,f=t.excludeAttributes.some((function(e){return i.includes(e)}));if("font-size"===i){var d=l?"".concat(o(u.value),"rem"):"".concat(u.value).concat(u.unit);a.set(i,"calc(".concat(d," + var(").concat(r.browserFontSizeDiffVarName,"))"))}else e&&l&&!s&&!f&&a.set(i,"".concat(o(u.value),"rem"))}})),a.size){var c="".concat(i,":not(").concat(r.bypassScalerTransformationClassName,") {\n");return a.forEach((function(e,t){c+="".concat(t,": ").concat(e,";\n")})),c+="}"}return""}},{"./constants":2}],7:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.isValidJsonString=function(e){try{JSON.parse(e)}catch(e){return!1}return!0}},{}]},{},[1]);