// ==UserScript== // @name SeaTable Custom Style (OnLine) // @name:zh-CN SeaTable自定义样式(在线版)qt // @description Custom SeaTable Style // @description:zh-cn SeaTable自定义样式 // @namespace http://tampermonkey.net/ // @version 0.7 // @author oraant // @grant none // @license MIT // @require http://code.jquery.com/jquery-3.4.1.min.js // @match *://*:4480* // @match *://*.192.168.1.2:4480/* // @match *://*.seatable.cn/* // @match *://*.table.everything.pub/* // @match *://*.biz.oraant.cc/* // @match *://*.generate.wiki/* // @downloadURL none // ==/UserScript== // === 基础工具方法 ================================================================================================================================================================================================== /*--- waitForKeyElements(): A utility function, for Greasemonkey scripts, that detects and handles AJAXed content. */ function waitForKeyElements ( /* IMPORTANT: This function requires your script to have loaded jQuery. */ selectorTxt, /* Required: The jQuery selector string that specifies the desired element(s). */ actionFunction, /* Required: The code to run when elements are found. It is passed a jNode to the matched element. */ bWaitOnce, /* Optional: If false, will continue to scan for new elements even after the first match is found. */ iframeSelector /* Optional: If set, identifies the iframe to search. */ ) { var targetNodes, btargetsFound; if (typeof iframeSelector == "undefined") targetNodes = $(selectorTxt); else targetNodes = $(iframeSelector).contents().find(selectorTxt); if (targetNodes && targetNodes.length > 0) { btargetsFound = true; /*--- Found target node(s). Go through each and act if they are new. */ targetNodes.each ( function () { var jThis = $(this); var alreadyFound = jThis.data ('alreadyFound') || false; if (!alreadyFound) { //--- Call the payload function. var cancelFound = actionFunction (jThis); if (cancelFound) btargetsFound = false; else jThis.data ('alreadyFound', true); } } ); } else { btargetsFound = false; } //--- Get the timer-control variable for this selector. var controlObj = waitForKeyElements.controlObj || {}; var controlKey = selectorTxt.replace (/[^\w]/g, "_"); var timeControl = controlObj [controlKey]; //--- Now set or clear the timer as appropriate. if (btargetsFound && bWaitOnce && timeControl) { //--- The only condition where we need to clear the timer. clearInterval (timeControl); delete controlObj [controlKey] } else { //--- Set a timer, if needed. if ( ! timeControl) { timeControl = setInterval ( function () { waitForKeyElements ( selectorTxt, actionFunction, bWaitOnce, iframeSelector ); }, 300 ); controlObj [controlKey] = timeControl; } } waitForKeyElements.controlObj = controlObj; } // === 全局样式修改 ================================================================================================================================================================================================== $("head").append(` `); // === 动态样式修改 ================================================================================================================================================================================================== // 使列描述中内容支持换行符号 let observer = new MutationObserver(mutations => { if (document.querySelector('div.tooltip-inner')) { $('div.tooltip-inner').each(function() { // 遍历所有
元素 var text = $(this).text(); // 获取当前元素中的文本内容 if(text.includes('==')) { // 如果文本内容包含 '==' var newText = text.replace(/==/g, '\n'); // 将所有 '==' 替换为换行符 $(this).text(newText); // 更新元素的文本内容 console.log('replace tip !!!') } }); $('div.tooltip-inner').css({'white-space':'pre', 'width':'fit-content', 'max-width':'800px', 'height':'fit-content', 'max-height':'800px'}) } }); observer.observe(document.body, {childList: true}); // 使长文本中的表格支持换行符号 waitForKeyElements ("div.longtext-modal-dialog table span", span_return); function span_return(){ console.log('span !!!') $('div.longtext-modal-dialog table span[data-slate-string="true"]').each(function() { // 遍历所有 元素 var text = $(this).text(); // 获取当前元素中的文本内容 if(text.includes('■')) { // 如果文本内容包含 '■' var newText = text.replace(/■/g, '\n'); // 将所有 '■' 替换为换行符 $(this).text(newText); // 更新元素的文本内容 console.log('replace span !!!') } }); } // 根据表格标题,将表格标签编译为特殊段落,比如空格或换行等 waitForKeyElements (".tab-link", tab_link_style); function tab_link_style(){ // 记得大的数放在前面,防止小数在前时,-5删掉无法识别-50的bug console.log('tab link style !!!') // 子表标签透明空格,逻辑更加清晰 $('.tab-link:contains("-")').each(function( index ) { let width_str = $(this).text().replace(/^-(\d+).*/, '$1') // 提取出标题中要调整的宽度 let style = {'opacity': 0.03, 'border-radius':0, 'cursor': 'inherit', 'width':width_str+'px'} let padding = parseInt(width_str) < 5 ? {'padding':0} : {'padding':'2px 1px !important'} $(this).css(Object.assign({}, style, padding)) $(this).children("span.tab-title").text('​') }); // 子表标签白色竖线,逻辑更加清晰 $('.tab-link:contains("|||")').css({'padding':0.3, 'margin':'0 5px', 'border-radius':0, 'cursor': 'inherit', 'width':'5px', 'background-color':'white'}) $('.tab-title:contains("|||")').text('​') $('.tab-link:contains("||")').css({'padding':0.3, 'margin':'0 2px', 'border-radius':0, 'cursor': 'inherit', 'width':'3px', 'background-color':'white'}) $('.tab-title:contains("||")').text('​') // 子表标签换行,多行展示逻辑清晰(命名时不让用\符号) $('.tabs-tab:contains("=n")').css({'flex-basis': '100%', 'height':'3px', 'width':'20px', 'overflow':'hidden', 'opacity':0.3}) $('.tab-title:contains("=n")').text('​') } // === 废旧代码 ================================================================================ /* waitForKeyElements (".react-grid-Cell", grid_cell_style); function grid_cell_style(){ console.log('grid cell style !!!') // 为单元格增加边框线 $('.react-grid-Cell:contains("世界")').css({'border-left':'solid 2px black;'}) // 人工竖直分割线 // $('.react-grid-HeaderCell:contains("---")').css({'border-bottom':0, 'background-color':'white'}) // $('.react-grid-HeaderCell:contains("---") > *').css({'opacity': 0}) // $('.react-grid-Cell:contains("---")').css({'border-bottom':0}) // $('.react-grid-Cell:contains("---") > *').css({'opacity': '0'}) } */ // /* 将列标题中的按钮,改为下方弹出式菜单(这是旧方案,不如新方案方便快捷) // .header-cell-container .header-icon { opacity:0; position:absolute; left:-5px; padding:4px!important; margin:0; line-height:15px; border-radius: 2px; background-color:rgb(249 249 249); box-shadow:1px 2px 3px 0px #b5b5b5; } /* 平常隐藏在角落 */ // .column-uneditable-tip { opacity:0; position:absolute; left:15px; padding:4px!important; margin:0 !important; line-height:15px; border-radius: 2px; background-color:rgb(249 249 249); box-shadow:1px 2px 3px 0px #b5b5b5; } // .dtable-dropdown-menu.dropdown { opacity:0; position:absolute; right:-5px;padding:4px!important; width:auto; line-height:15px; border-radius: 2px; background-color:rgb(249 249 249); box-shadow:1px 2px 3px 0px #b5b5b5; } // // .react-grid-HeaderCell:hover .header-cell-container .header-icon { opacity:1; top:30px; } /* 鼠标悬浮时显示 */ // .react-grid-HeaderCell:hover .column-uneditable-tip { opacity:1; top:30px; } // .react-grid-HeaderCell:hover .dtable-dropdown-menu.dropdown { opacity:1; top:28.5px; } // // .header-cell-container .header-icon:hover { background-color:rgb(233 233 233) } /* 悬浮在按钮上时变色 */ // .column-uneditable-tip:hover { background-color:rgb(233 233 233) } // .dtable-dropdown-menu.dropdown:hover { background-color:rgb(233 233 233) } // */ /* CSS样式 子表标签竖向排列,更加紧致,放的更多 div.tables-tabs-container div.tables-tabs-content { margin-left:0px; } div.tables-tabs-content div.tables-tabs { padding-right:0px; } div.tables-tabs-content li.tabs-tab { margin-right:0px; } div.tables-tabs-content div.tab-link { height:50px; padding:0px 0px 0px 0px!important; writing-mode:tb-rl; line-height:24px; } div.tables-tabs-content span.tab-title { font-size:14px } #header { height:30px; } #header .title { height:inherit; } .tables-tabs-container .tables-tabs-operations { width:100px; flex-wrap:wrap; margin-right:0px; } .tables-tabs-content .add-table { width:16px; margin-right:0px; } .tables-tabs-operations .tables-logs, .tables-tabs-operations .tables-plugins, .tables-tabs-operations .tables-rule, .tables-tabs-operations .tables-share, .tables-tabs-operations .tool-dropdown { margin-right:1px; } */ /*--- waitForElm: 等待某元素出现,只能一次性执行 https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists */ // function waitForElm(selector) { // return new Promise(resolve => { // if (document.querySelector(selector)) { // 直接能找到这个元素 // return resolve(document.querySelector(selector)); // } // // const observer = new MutationObserver(mutations => { // 找不到这个元素时,就等待其出现 // if (document.querySelector(selector)) { // observer.disconnect(); // resolve(document.querySelector(selector)); // } // }); // // // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336 // observer.observe(document.body, { // childList: true, // subtree: true // }); // }); // } // // await waitForElm('div.tooltip-inner').then((elm) => { // console.log('Element is ready'); // console.log(elm.textContent); // }); // 试图为只能填写单行数据的input增加一个textarea,填写多行内容后,将转化后的文本输入input(没有用,即使都改了,还是读不到input中的内容) // // if (document.querySelector('input.form-control') && !document.querySelector('textarea#popover-inner-textarea')) { // $('input.form-control').after(``) // $('textarea#popover-inner-textarea').on('change', function() { // let content = $('textarea#popover-inner-textarea').val() // $('input.form-control').attr('value', content) // $('input.form-control').val(content) // console.log(content, $('input.form-control').val()) // }); // } // 渲染表格内的元素 // // waitForKeyElements ("div.grid-cell-type-default", ttt); // function ttt(){ // console.log('111') // } // // waitForKeyElements ("div#dtable-row-height-popover", add_custom_btns); // function add_custom_btns(){ // 渲染表格内的元素 // let btn = $(` //
// // // 渲染 // //
// `)[0]; // btn.addEventListener("click", function() { // $('.grid-cell-type-default').each(function() { // $(this).html($(this).text()); // }); // }); // $('div#dtable-row-height-popover').after(btn); // } // 使列描述中内容支持换行符号(已改为响应更加及时的MO方案) // // waitForKeyElements ("div.tooltip-inner", tip_return); // .column-description-tip // function tip_return(){ // 使列描述中内容支持换行符号 // $('div.tooltip-inner').each(function() { // 遍历所有
元素 // var text = $(this).text(); // 获取当前元素中的文本内容 // if(text.includes('■')) { // 如果文本内容包含 '■' // var newText = text.replace(/■/g, '\n'); // 将所有 '■' 替换为换行符 // $(this).text(newText); // 更新元素的文本内容 // console.log('replace tip !!!') // } // }); // // $('div.tooltip-inner').css({'white-space':'pre', 'width':'fit-content', 'max-width':'800px', 'height':'fit-content', 'max-height':'800px'}) // }