Instagram 4K Screen UI

Improve the view of instagram on 4K screen
Wrap lines
// ==UserScript==
// @name        Instagram 4K Screen UI
// @license     MIT
// @namespace   https://gf.qytechs.cn/en/scripts/447896-instagram-4k-screen-ui
// @description Improve the view of instagram on 4K screen
// @icon        https://i.imgur.com/obCmlr9.png
// @match       https://www.instagram.com/*
// @grant       GM_registerMenuCommand
// @grant		GM_getValue
// @grant		GM_setValue
// @version     1.1
// ==/UserScript==
 
var mainUISize = {
   get() {
      return parseInt(GM_getValue("mainUISize", "1200"))
   },
   set(vl) {
      GM_setValue("mainUISize", vl + "")
   }
};
 
var subUISize={
   get() {
      return parseInt(GM_getValue("subUISize", "2000"))
   },
   set(vl) {
      GM_setValue("subUISize", vl + "")
   }
};
 
var applyNewStyle = () => {
	let m1=document.querySelectorAll("._a3gq ._aal-");
	let m2=document.querySelectorAll("._a3gq ._aam3");
	let s1=document.querySelectorAll("._a3gq ._aa_y");
	if(m1.length>0)m1[0].style.maxWidth=mainUISize.get()+"px";
	if(m2.length>0)m2[0].style.maxWidth=mainUISize.get()+"px";
	if(s1.length>0)s1[0].style.maxWidth=subUISize.get()+"px";
};
 
var setup = () => {
   let setupDiv = document.getElementById("instagram_4k_screen_ui_setup_div");
   if (!setupDiv) {
      setupDiv = document.createElement("div");
      setupDiv.id = "instagram_4k_screen_ui_setup_div";
      setupDiv.style.position = "fixed";
      setupDiv.style.zIndex = 999;
      setupDiv.style.left = "10%";
      setupDiv.style.top = "1%";
      setupDiv.style.backgroundColor = "#5f71a0";
      setupDiv.style.color = "White";
      setupDiv.style.borderRadius = "5px";
      setupDiv.innerHTML =`
		<p>
			<b>Main UI width (Unit:px):：</b><input type="text" maxlength="4" style="text-align:center;" id="i4su_main_ui_width" value="${mainUISize.get()}"/>
			<b>Sub UI width (Unit:px):：</b><input type="text" maxlength="4" style="text-align:center;" id="i4su_sub_ui_width" value="${subUISize.get()}"/>
			<button id="i4su_ok">Apply</button><button id="i4su_cancel">Cancel</button>
		</p>`;
      setupDiv.style.display = "none";
      document.body.appendChild(setupDiv);
      document.getElementById("i4su_ok").onclick = () => {
         let z = document.getElementById("i4su_main_ui_width").value.trim();
		 let z1= document.getElementById("i4su_sub_ui_width").value.trim();
         if (/[0-9]{3,4}/.test(z) && /[0-9]{3,4}/.test(z1)) {
            let n = parseInt(z);
			let n1= parseInt(z1);
            if (n >= 100 && n <= window.screen.width && n1>=100 && n1<=window.screen.width) {
				mainUISize.set(n);
				subUISize.set(n1);
				applyNewStyle();
            	document.getElementById("instagram_4k_screen_ui_setup_div").style.display = "none";
            	return;
            }
         }
         alert("Incorrect input! Please input numbers that between 100 to your screen width.");
      };
      document.getElementById("i4su_cancel").onclick = () => {
		document.getElementById("i4su_main_ui_width").value=mainUISize.get()+"";
		document.getElementById("i4su_sub_ui_width").value=subUISize.get()+"";
      	document.getElementById("instagram_4k_screen_ui_setup_div").style.display = "none";
      }
   }
   setupDiv.style.display = "block"
};
 
GM_registerMenuCommand("UI width settings", setup);
 
if(document.readyState=="interactive"){
	let t=0,tNow=-2;
	//reset tNow Timer
	setInterval(()=>{tNow=(new Date()).getSeconds();},3000);
	//main event
	window.addEventListener('DOMNodeInserted', (event)=> {
		t=(new Date()).getSeconds()
		if(t-tNow > 1){
			applyNewStyle();
			tNow=t;
		}
		else{
			if(tNow>57){
				if(t===0){
					tNow=-2;
				}
			}
		}
	},false);
};
欢迎访问Greasy Fork镜像
