优化 Gandi 编辑器在手机端的体验
目前为
// ==UserScript==
// @name Gandi 手机版
// @namespace http://tampermonkey.net/
// @version 2025-02-08
// @description 优化 Gandi 编辑器在手机端的体验
// @author 白猫
// @match https://www.ccw.site/gandi/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=ccw.site
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const eyesSVG = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_2_4"><rect x="0" y="0" width="24" height="24" rx="0"></rect></clipPath></defs><g clip-path="url(#master_svg0_2_4)"><g><path d="M12.075146484375,5.25Q4.875146484375,5.25,0.525146484375,12.6Q5.550146484375,19.725,12.075146484375,19.725Q18.600146484375,19.725,23.625146484375,12.6Q19.275146484375,5.25,12.075146484375,5.25ZM19.500146484375,15.3C17.100146484375,17.325,14.550146484375,18.6,12.000146484375,18.6C9.450146484375,18.6,6.900146484375,17.4,4.500146484375,15.3C3.675146484375,14.55,2.850146484375,13.8,2.175146484375,12.975C2.025146484375,12.825,1.950146484375,12.675,1.800146484375,12.525C1.875146484375,12.375,2.025146484375,12.225,2.100146484375,12.075C2.700146484375,11.25,3.450146484375,10.425,4.275146484375,9.675C6.600146484375,7.575,9.150146484375,6.3,12.000146484375,6.3C14.850146484375,6.3,17.400146484375,7.575,19.725146484375,9.675C20.550146484375,10.425,21.225146484375,11.25,21.900146484375,12.075C21.975146484375,12.225,22.125146484375,12.375,22.200146484375,12.525C22.125146484375,12.675,21.975146484375,12.825,21.825146484375,12.975C21.150146484375,13.725,20.400146484375,14.55,19.500146484375,15.3Z" fill="#000000" fill-opacity="0.3400000035762787" style="mix-blend-mode:passthrough"></path></g><g><path d="M12.000146484375,8.10003662109375C9.750146484375,8.10003662109375,8.025146484375,9.90003662109375,8.025146484375,12.07503662109375C8.025146484375,14.32503662109375,9.825146484375,16.05003662109375,12.000146484375,16.05003662109375C14.250146484375,16.05003662109375,15.975146484375,14.25003662109375,15.975146484375,12.07503662109375C15.975146484375,9.90003662109375,14.175146484375,8.10003662109375,12.000146484375,8.10003662109375ZM12.000146484375,15.00003662109375C10.425146484375,15.00003662109375,9.150146484375,13.72503662109375,9.150146484375,12.15003662109375C9.150146484375,10.57503662109375,10.425146484375,9.30003662109375,12.000146484375,9.30003662109375C13.575146484375,9.30003662109375,14.850146484375,10.57503662109375,14.850146484375,12.15003662109375C14.850146484375,13.65003662109375,13.575146484375,15.00003662109375,12.000146484375,15.00003662109375Z" fill="#000000" fill-opacity="0.3400000035762787" style="mix-blend-mode:passthrough"></path></g></g></svg>';
//计算屏幕缩放比例
function pluginCalculateScale() {
const bodyHeight = document.body.clientHeight;
const a = 0.00219;
const b = -0.13146;
const scale = a * bodyHeight + b;
return Math.min(scale, 1); // 确保结果不超过 1
}
function pageCalculateScale() {
const screenHeight = window.innerHeight;
const a = 0.00161;
const b = -0.091;
return Math.max(0.4, Math.min(0.7, a * screenHeight + b)); // 限制范围0.4 - 0.7
}
let pluginScale = pluginCalculateScale(),pageScale = pageCalculateScale(); //计算插件缩放
document.documentElement.style.setProperty('--plugin-scale', pluginScale);
document.documentElement.style.setProperty('--page-scale', pageScale);
window.addEventListener('resize', () => {
pluginScale = pluginCalculateScale();
pageScale = pageCalculateScale();
document.documentElement.style.setProperty('--plugin-scale', pluginScale);
document.documentElement.style.setProperty('--page-scale', pageScale);
});
//禁用自动放大
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no";
document.head.appendChild(meta);
// 修改所有输入框的样式，防止自动放大
var style = document.createElement("style");
style.innerHTML = `
input, textarea {
font-size: 16px !important; /* 避免 iOS 自动放大 */
touch-action: manipulation; /* 禁用双击放大 */
}
.react-draggable {
transform-origin: left top;
}
.MuiDialogTitle-root {
padding: 1vh !important;
}
.MuiDialogActions-root {
padding: 1vh !important;
}
.close-button-11FHp {
padding: 0px !important;
}
.title-3Gkc- {
margin: 0px !important;
}
.MuiDialogContent-root {
margin: 0px !important;
}
.gandi_setting-modal_scroller_2rlIe {
zoom: var(--page-scale) !important;
}
.gandi_bulletin-modal_modal-overlay_TBAhj {
zoom: var(--page-scale) !important;
}
.css-8ipe1d {
zoom: var(--page-scale) !important;
height: 100% !important;
}
.gandi_setting-modal_menu_2IwVr {
overflow: scroll;
zoom: var(--page-scale) !important;
}
`;
document.head.appendChild(style);
function ToolBar() {
const scratchCategoryMenu = document.querySelector('.scratchCategoryMenu');
const toolboxSwitchButton = document.querySelector('.toolboxSwitchButton');
if (scratchCategoryMenu && toolboxSwitchButton) {
let touchTimer = null;
scratchCategoryMenu.addEventListener('touchstart', (event) => {
touchTimer = setTimeout(() => {
touchTimer = null; // 超时不触发
}, 200);
});
scratchCategoryMenu.addEventListener('touchend', (event) => {
if (touchTimer) {
clearTimeout(touchTimer);
touchTimer = null;
const parent = toolboxSwitchButton?.parentElement?.parentElement;
if (parent && parent.classList.contains('collapsed')) {
toolboxSwitchButton.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
}
const observer = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) {
if ([...mutation.addedNodes].some(node => node.classList?.contains('blocklyInsertionMarker'))) {
toolboxSwitchButton.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
observer.disconnect();
break;
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
scratchCategoryMenu.addEventListener('touchmove', () => {
clearTimeout(touchTimer);
touchTimer = null; // 移动手指则取消触发
});
scratchCategoryMenu.addEventListener('touchcancel', () => {
clearTimeout(touchTimer);
touchTimer = null; // 取消触摸时也不触发
});
}
}
function waitForElement(selector, callback) {
const observer = new MutationObserver(() => {
const element = document.querySelector(selector);
if (element) {
observer.disconnect(); // 先停止观察，等待元素移除
waitForRemoval(element, ()=>{
const toolboxSwitchButton = document.querySelector('.toolboxSwitchButton');
const parent = toolboxSwitchButton?.parentElement?.parentElement;
if (parent && !parent.classList.contains('collapsed')) {
toolboxSwitchButton.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
}
setTimeout(() => ToolBar(), 1000);
setTimeout(() => ToolBar(), 2000);
setTimeout(() => ToolBar(), 3000);
setTimeout(() => ToolBar(), 4000);
setTimeout(() => ToolBar(), 5000);
//注入插件区域，兼容小屏手机
const pluginsRoot = document.querySelector('.gandi_plugins_plugins-root_xA3t3');
if (pluginsRoot) {
// 设置样式
Object.assign(pluginsRoot.style, {
height: 'calc(100% - 128px)',
overflowY: 'scroll',
width: '36px',
left: '-43px',
});
// 遍历所有一级子节点并添加缩放
pluginsRoot.childNodes.forEach(child => {
if (child.nodeType === 1) { // 确保是元素节点
console.log(child)
child.style.zoom = '0.7';
}
});
}
});
callback();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function waitForRemoval(element, callback) {
const observer = new MutationObserver(() => {
if (!document.body.contains(element)) {
observer.disconnect();
console.log("加载完成，开始执行注入逻辑");
callback();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
waitForElement('.gandi_loader_background_2DPrW', () => {
console.log("页面加载完成，执行初始化");
init();
});
function init() {
console.log("正在执行注入逻辑...");
function hideScrollbar(domElement) {
if (domElement) {
// 适用于一般浏览器
domElement.style.scrollbarWidth = 'none';
domElement.style.msOverflowStyle = 'none';
domElement.classList.add('hide-scrollbar');
// 适用于 WebKit（Chrome、Safari）
const style = document.createElement('style');
style.textContent = `
${domElement.className}::-webkit-scrollbar {
display: none;
}
`;
document.head.appendChild(style);
}
}
hideScrollbar(document.querySelector('.gandi_target-pane_target-list_10PNw'))
hideScrollbar(document.querySelector('.gandi_plugins_plugins-root_xA3t3'));
document.querySelector('.gandi_stage-header_stage-menu-wrapper_15JJt')?.style.setProperty('height', '100%', 'important');
const StageBar = document.querySelector('.xg-stage-menu-wrapper');
StageBar?.style.setProperty('min-height', '0px', 'important');
StageBar?.style.setProperty('max-height', '60px', 'important');
StageBar?.style.setProperty('flex', '1', 'important');
StageBar?.parentElement?.style.setProperty('height', '100%', 'important');
StageBar?.parentElement?.style.setProperty('display', 'flex', 'important');
StageBar?.parentElement?.style.setProperty('flex-direction', 'column', 'important');
const verticalBar = document.querySelector('.gandi_vertical-bar_bar_Tsvpu');
hideScrollbar(verticalBar);
verticalBar?.style.setProperty('height', 'calc(100vh - 60px)', 'important');
verticalBar?.style.setProperty('overflow-y', 'scroll', 'important');
let collapsibleBoxes = document.querySelectorAll('.gandi_collapsible-box_collapsible-box_1_329');
if (collapsibleBoxes.length > 1) {
collapsibleBoxes[0].style.top = '10px';
collapsibleBoxes[0].style.height = 'calc(100% - 15px)';
collapsibleBoxes[0].style.transition = 'all 0.2s ease-out';
collapsibleBoxes[0].style.transition = 'all 0.2s ease-out';
collapsibleBoxes[1].style.top = '10px';
collapsibleBoxes[1].style.height = 'calc(100% - 15px)';
collapsibleBoxes[1].style.transition = 'all 0.2s ease-out';
collapsibleBoxes[1].lastChild.style.overflow = 'hidden';
}
let switchButtons = document.querySelectorAll('.gandi_collapsible-box_switch-button_2A5kM');
switchButtons.forEach(button => {
let parent = button.parentElement?.parentElement;
if (parent && !parent.classList.contains('gandi_collapsible-box_collapsed_oQuU1')) {
setTimeout(() => button.click(), 100);
}
});
let headers = document.querySelectorAll('.gandi_collapsible-box_header_dc9Es');
if (headers.length > 1) {
let newButton = document.createElement('span');
newButton.className = 'gandi_collapsible-box_switch-button_2A5kM';
newButton.setAttribute('data-xg_idx', '4');
newButton.innerHTML = eyesSVG;
newButton.addEventListener('click', () => {
let target = collapsibleBoxes[1];
if(target.style.height === '28px'){
if (target) {
target.style.height = 'calc(100% - 15px)';
}
let addScript = document.querySelector('.gandi_action-menu_menu-container_3a6da');
if(addScript) {
addScript.style.transform = 'unset';
}
}else{
if (target) {
target.style.height = '28px';
}
let addScript = document.querySelector('.gandi_action-menu_menu-container_3a6da');
if(addScript) {
addScript.style.transform = 'scale(0)';
}
}
});
headers[1].appendChild(newButton);
}
function hideStage() {
const firstButton = document.querySelectorAll('.gandi_collapsible-box_switch-button_2A5kM');
const parent = firstButton[0]?.parentElement?.parentElement;
const parents = firstButton[1]?.parentElement?.parentElement;
if (parent && parents && (parent.classList.contains('gandi_collapsible-box_collapsed_oQuU1') === parents.classList.contains('gandi_collapsible-box_collapsed_oQuU1'))) {
firstButton[0]?.click();
}
}
function monitorFirstSwitchButton() {
const firstElement = document.querySelectorAll('.gandi_collapsible-box_switch-button_2A5kM');
if (firstElement[1]) {
firstElement[1].addEventListener('click', () => {
hideStage();
});
}
}
monitorFirstSwitchButton();
//删除影响点击的元素（我不知道为什么sb Gandi插件一旦被关闭窗口马上创建一个覆盖全页面的寄吧元素不让点击）
const blackBard = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.classList.contains('addons_interlayer_lVD80')) {
node.remove();
}
});
}
});
blackBard.observe(document.body, { childList: true, subtree: true });
//将所有的插件页面缩小
const plugin = new MutationObserver(mutationsList => {
mutationsList.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
const target = mutation.target;
if (target.classList.contains('react-draggable')) {
const transform = target.style.transform || '';
const scaleRegex = /scale\(?[^)]+\)/;
const newScale = `scale(${pluginScale})`;
if (scaleRegex.test(transform)) {
target.style.transform = transform.replace(scaleRegex, newScale);
} else {
target.style.transform = `${transform} ${newScale}`;
}
}
}
});
});
// 监听所有 react-draggable 元素
const observeDraggableElements = () => {
document.querySelectorAll('.react-draggable').forEach(el => {
const transform = el.style.transform || '';
const scaleRegex = /scale\(?[^)]+\)/;
const newScale = `scale(${pluginScale})`;
if (scaleRegex.test(transform)) {
el.style.transform = transform.replace(scaleRegex, newScale);
} else {
el.style.transform = `${transform} ${newScale}`;
}
plugin.observe(el, { attributes: true, attributeFilter: ['style'] });
});
};
// 初次运行
observeDraggableElements();
// 监听新元素的插入，确保后续添加的 react-draggable 也被监听
const domObserver = new MutationObserver(() => observeDraggableElements());
domObserver.observe(document.body, { childList: true, subtree: true });
//监听代码编辑器
const codeEditorObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
const target = document.querySelector('#codeEditor')?.firstElementChild?.firstElementChild;
if (target) {
target.style.width = '10vw';
}
}
});
codeEditorObserver.observe(document.body, { childList: true, subtree: true });
}
})();