mirroring
/
autofit.js
mirror of https://github.com/LarryZhu-dev/autofit.js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new param limit & scale toFixed(2)

This commit is contained in:
Larry 2023-12-05 12:25:44 +08:00
parent 336ba26dad
commit 0ce7e5e187
5 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
autofit.js
View File

@ -9,7 +9,7 @@ const autofit = {
isAutofitRunnig: false,
init(options = {}, isShowInitTip = true) {
if (isShowInitTip) {
console.log( `autofit.js is running`);
console.log(`autofit.js is running`);
}
const {
dw = 1920,
@ -19,6 +19,7 @@ const autofit = {
ignore = [],
transition = "none",
delay = 0,
limit = 0.1,
} = options;
currRenderDom = el;
let dom = document.querySelector(el);
@ -40,17 +41,17 @@ const autofit = {
dom.style.width = `${dw}px`;
dom.style.transformOrigin = `0 0`;
dom.style.overflow = "hidden";
keepFit(dw, dh, dom, ignore);
keepFit(dw, dh, dom, ignore, limit);
resizeListener = () => {
clearTimeout(timer);
if (delay != 0)
timer = setTimeout(() => {
keepFit(dw, dh, dom, ignore);
keepFit(dw, dh, dom, ignore, limit);
isElRectification &&
elRectification(currelRectification, currelRectificationLevel);
}, delay);
else {
keepFit(dw, dh, dom, ignore);
keepFit(dw, dh, dom, ignore, limit);
isElRectification &&
elRectification(currelRectification, currelRectificationLevel);
}
@ -74,8 +75,7 @@ const autofit = {
console.error(`autofit: Failed to remove normally`, error);
this.isAutofitRunnig = false;
}
this.isAutofitRunnig &&
console.log(`autofit.js is off`);
this.isAutofitRunnig && console.log(`autofit.js is off`);
},
};
function elRectification(el, level = 1) {
@ -111,13 +111,16 @@ function offelRectification() {
item.style.transform = ``;
}
}
function keepFit(dw, dh, dom, ignore) {
function keepFit(dw, dh, dom, ignore, limit) {
let clientHeight = document.documentElement.clientHeight;
let clientWidth = document.documentElement.clientWidth;
currScale =
clientWidth / clientHeight < dw / dh ? clientWidth / dw : clientHeight / dh;
dom.style.height = `${clientHeight / currScale}px`;
dom.style.width = `${clientWidth / currScale}px`;
currScale = Math.abs(1 - currScale) > limit ? currScale.toFixed(2) : 1;
let height = Math.round(clientHeight / currScale);
let width = Math.round(clientWidth / currScale);
dom.style.height = `${height}px`;
dom.style.width = `${width}px`;
dom.style.transform = `scale(${currScale})`;
const ignoreStyleDOM = document.querySelector("#ignoreStyle");
ignoreStyleDOM.innerHTML = "";

2
autofit.min.js vendored
View File

@ -1 +1 @@
let currRenderDom=null;let currelRectification="";let currelRectificationLevel="";let resizeListener=null;let timer=null;let currScale=1;let isElRectification=false;const autofit={isAutofitRunnig:false,init(options={},isShowInitTip=true){if(isShowInitTip){console.log(`autofit.js is running`)}const{dw=1920,dh=1080,el=typeof options==="string"?options:"body",resize=true,ignore=[],transition="none",delay=0,}=options;currRenderDom=el;let dom=document.querySelector(el);if(!dom){console.error(`autofit:'${el}'is not exist`);return}const style=document.createElement("style");const ignoreStyle=document.createElement("style");style.lang="text/css";ignoreStyle.lang="text/css";style.id="autofit-style";ignoreStyle.id="ignoreStyle";style.innerHTML=`body{overflow:hidden}`;const bodyEl=document.querySelector("body");bodyEl.appendChild(style);bodyEl.appendChild(ignoreStyle);dom.style.height=`${dh}px`;dom.style.width=`${dw}px`;dom.style.transformOrigin=`0 0`;dom.style.overflow="hidden";keepFit(dw,dh,dom,ignore);resizeListener=()=>{clearTimeout(timer);if(delay!=0)timer=setTimeout(()=>{keepFit(dw,dh,dom,ignore);isElRectification&&elRectification(currelRectification,currelRectificationLevel)},delay);else{keepFit(dw,dh,dom,ignore);isElRectification&&elRectification(currelRectification,currelRectificationLevel)}};resize&&window.addEventListener("resize",resizeListener);this.isAutofitRunnig=true;setTimeout(()=>{dom.style.transition=`${transition}s`})},off(el="body"){try{isElRectification=false;window.removeEventListener("resize",resizeListener);document.querySelector("#autofit-style").remove();const ignoreStyleDOM=document.querySelector("#ignoreStyle");ignoreStyleDOM&&ignoreStyleDOM.remove();document.querySelector(currRenderDom?currRenderDom:el).style="";isElRectification&&offelRectification()}catch(error){console.error(`autofit:Failed to remove normally`,error);this.isAutofitRunnig=false}this.isAutofitRunnig&&console.log(`autofit.js is off`)},};function elRectification(el,level=1){if(!autofit.isAutofitRunnig){console.error("autofit.js：autofit has not been initialized yet")}!el&&console.error(`autofit.js：bad selector:${el}`);currelRectification=el;currelRectificationLevel=level;const currEl=document.querySelectorAll(el);if(currEl.length==0){console.error("autofit.js：elRectification found no element");return}for(let item of currEl){if(!isElRectification){item.originalWidth=item.clientWidth;item.originalHeight=item.clientHeight}let rectification=currScale==1?1:currScale*level;item.style.width=`${item.originalWidth*rectification}px`;item.style.height=`${item.originalHeight*rectification}px`;item.style.transform=`scale(${1/currScale})`;item.style.transformOrigin=`0 0`}isElRectification=true}function offelRectification(){if(!currelRectification)return;for(let item of document.querySelectorAll(currelRectification)){item.style.width=``;item.style.height=``;item.style.transform=``}}function keepFit(dw,dh,dom,ignore){let clientHeight=document.documentElement.clientHeight;let clientWidth=document.documentElement.clientWidth;currScale=clientWidth/clientHeight<dw/dh?clientWidth/dw:clientHeight/dh;dom.style.height=`${clientHeight/currScale}px`;dom.style.width=`${clientWidth/currScale}px`;dom.style.transform=`scale(${currScale})`;const ignoreStyleDOM=document.querySelector("#ignoreStyle");ignoreStyleDOM.innerHTML="";for(let item of ignore){let itemEl=item.el||item.dom;typeof item=="string"&&(itemEl=item);if(!itemEl){console.error(`autofit:bad selector:${itemEl}`);continue}let realScale=item.scale?item.scale:1/currScale;let realFontSize=realScale!=currScale?item.fontSize:"autofit";let realWidth=realScale!=currScale?item.width:"autofit";let realHeight=realScale!=currScale?item.height:"autofit";let regex=new RegExp(`${itemEl}(\x20|{)`,"gm");let isIgnored=regex.test(ignoreStyleDOM.innerHTML);if(isIgnored){continue}ignoreStyleDOM.innerHTML+=`\n${itemEl}{transform:scale(${realScale})!important;transform-origin:0 0;width:${realWidth}!important;height:${realHeight}!important}`;if(realFontSize){ignoreStyleDOM.innerHTML+=`\n${itemEl}div,${itemEl}span,${itemEl}a,${itemEl}*{font-size:${realFontSize}px}`}}}
let currRenderDom=null;let currelRectification="";let currelRectificationLevel="";let resizeListener=null;let timer=null;let currScale=1;let isElRectification=false;const autofit={isAutofitRunnig:false,init(options={},isShowInitTip=true){if(isShowInitTip){console.log(`autofit.js is running`)}const{dw=1920,dh=1080,el=typeof options==="string"?options:"body",resize=true,ignore=[],transition="none",delay=0,limit=0.1,}=options;currRenderDom=el;let dom=document.querySelector(el);if(!dom){console.error(`autofit:'${el}'is not exist`);return}const style=document.createElement("style");const ignoreStyle=document.createElement("style");style.lang="text/css";ignoreStyle.lang="text/css";style.id="autofit-style";ignoreStyle.id="ignoreStyle";style.innerHTML=`body{overflow:hidden}`;const bodyEl=document.querySelector("body");bodyEl.appendChild(style);bodyEl.appendChild(ignoreStyle);dom.style.height=`${dh}px`;dom.style.width=`${dw}px`;dom.style.transformOrigin=`0 0`;dom.style.overflow="hidden";keepFit(dw,dh,dom,ignore,limit);resizeListener=()=>{clearTimeout(timer);if(delay!=0)timer=setTimeout(()=>{keepFit(dw,dh,dom,ignore,limit);isElRectification&&elRectification(currelRectification,currelRectificationLevel)},delay);else{keepFit(dw,dh,dom,ignore,limit);isElRectification&&elRectification(currelRectification,currelRectificationLevel)}};resize&&window.addEventListener("resize",resizeListener);this.isAutofitRunnig=true;setTimeout(()=>{dom.style.transition=`${transition}s`})},off(el="body"){try{isElRectification=false;window.removeEventListener("resize",resizeListener);document.querySelector("#autofit-style").remove();const ignoreStyleDOM=document.querySelector("#ignoreStyle");ignoreStyleDOM&&ignoreStyleDOM.remove();document.querySelector(currRenderDom?currRenderDom:el).style="";isElRectification&&offelRectification()}catch(error){console.error(`autofit:Failed to remove normally`,error);this.isAutofitRunnig=false}this.isAutofitRunnig&&console.log(`autofit.js is off`)},};function elRectification(el,level=1){if(!autofit.isAutofitRunnig){console.error("autofit.js：autofit has not been initialized yet")}!el&&console.error(`autofit.js：bad selector:${el}`);currelRectification=el;currelRectificationLevel=level;const currEl=document.querySelectorAll(el);if(currEl.length==0){console.error("autofit.js：elRectification found no element");return}for(let item of currEl){if(!isElRectification){item.originalWidth=item.clientWidth;item.originalHeight=item.clientHeight}let rectification=currScale==1?1:currScale*level;item.style.width=`${item.originalWidth*rectification}px`;item.style.height=`${item.originalHeight*rectification}px`;item.style.transform=`scale(${1/currScale})`;item.style.transformOrigin=`0 0`}isElRectification=true}function offelRectification(){if(!currelRectification)return;for(let item of document.querySelectorAll(currelRectification)){item.style.width=``;item.style.height=``;item.style.transform=``}}function keepFit(dw,dh,dom,ignore,limit){let clientHeight=document.documentElement.clientHeight;let clientWidth=document.documentElement.clientWidth;currScale=clientWidth/clientHeight<dw/dh?clientWidth/dw:clientHeight/dh;currScale=Math.abs(1-currScale)>limit?currScale.toFixed(2):1;let height=Math.round(clientHeight/currScale);let width=Math.round(clientWidth/currScale);dom.style.height=`${height}px`;dom.style.width=`${width}px`;dom.style.transform=`scale(${currScale})`;const ignoreStyleDOM=document.querySelector("#ignoreStyle");ignoreStyleDOM.innerHTML="";for(let item of ignore){let itemEl=item.el||item.dom;typeof item=="string"&&(itemEl=item);if(!itemEl){console.error(`autofit:bad selector:${itemEl}`);continue}let realScale=item.scale?item.scale:1/currScale;let realFontSize=realScale!=currScale?item.fontSize:"autofit";let realWidth=realScale!=currScale?item.width:"autofit";let realHeight=realScale!=currScale?item.height:"autofit";let regex=new RegExp(`${itemEl}(\x20|{)`,"gm");let isIgnored=regex.test(ignoreStyleDOM.innerHTML);if(isIgnored){continue}ignoreStyleDOM.innerHTML+=`\n${itemEl}{transform:scale(${realScale})!important;transform-origin:0 0;width:${realWidth}!important;height:${realHeight}!important}`;if(realFontSize){ignoreStyleDOM.innerHTML+=`\n${itemEl}div,${itemEl}span,${itemEl}a,${itemEl}*{font-size:${realFontSize}px}`}}}

1
index.d.ts vendored
View File

@ -13,6 +13,7 @@ export interface AutofitOption {
ignore?: (IgnoreOption | string)[];
transition?: number;
delay?: number;
limit?: number;
}
declare interface autofit {
/**

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "autofit.js",
"version": "3.0.6",
"version": "3.0.7",
"description": "autofit.js 是迄今为止最易用的自适应工具",
"main": "autofit.js",
"types": "./index.d.ts",

2
readme.md
View File

@ -35,6 +35,7 @@ autofit.js是一个可以让你的PC项目自适应屏幕的工具，其原理
| 2023-07-04 | v2.0.6 | 未发布-修复无法正常off的问题，新增ts参数undefined |
| 2023-07-11 | v3.0.0 | 提升稳定性，提升易用性 |
| 2023-11-14 | v3.0.6 | 新增 isAutofitRunnig 布尔值，可用于判断 autofit.js 是否正常运行、新增chrome 117+ 适配 |
| 2023-12-05 | v3.0.7 | 新增 limit 参数，缩放保留两位小数 |
@ -75,6 +76,7 @@ export default {
> * - ignore：忽略缩放的元素（该元素将反向缩放），参数见readme.md
> * - transition：过渡时间，默认是 0
> * - delay：默认是 0
> * - limit：默认是 0.1,当缩放阈值不大于此值时不缩放，比如设置为0.1时，0.9-1.1的范围会被重置为1
> ```
### 忽略某些元素