// ==UserScript==
// @name Freetar: Adjustable columns + global Show Columns toggle
// @namespace https://example.com/
// @version 3.1
// @description 80vh columns, width from longest line, per-column ▲▼ controls, per-URL save; global "Show Columns" toggle.
// @match http://localhost:22000/*
// @run-at document-idle
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function () {
'use strict';
const SELECTOR = 'div.tab.font-monospace';
const STORAGE_KEY_PREFIX = 'ftColumns:';
const GLOBAL_ENABLE_KEY = 'ftEnabled';
const SAVE_DEBOUNCE = 150;
const EXTRA_CH = 3; // extra width beyond the longest line
const TOGGLE_ID = 'checkbox_show_columns';
let enabled = GM_getValue(GLOBAL_ENABLE_KEY, true);
let saveTimer = null;
let moEnhancer = null;
let moToolbar = null;
let enhanced = false;
let originalHTML = null;
let tabEl = null;
let onResizeHandler = null;
function storageKeyForPage() {
return STORAGE_KEY_PREFIX + location.pathname;
}
function saveCounts(root) {
if (saveTimer) clearTimeout(saveTimer);
saveTimer = setTimeout(() => {
const counts = Array.from(root.querySelectorAll('.ft-col-body'))
.map(b => b.children.length);
try {
GM_setValue(storageKeyForPage(), JSON.stringify({ counts, v: 2 }));
} catch {}
}, SAVE_DEBOUNCE);
}
function loadCounts() {
try {
const raw = GM_getValue(storageKeyForPage());
if (!raw) return null;
const parsed = JSON.parse(raw);
if (parsed && Array.isArray(parsed.counts)) return parsed.counts;
return null;
} catch {
return null;
}
}
// Convert original tab content into div.ft-line elements (one per visual line)
function extractLines(container) {
const lines = [];
let buffer = [];
const flush = () => {
const el = document.createElement('div');
el.className = 'ft-line';
if (buffer.length === 0) {
el.innerHTML = ' '; // keep blank line
} else {
buffer.forEach(n => el.appendChild(n));
}
lines.push(el);
buffer = [];
};
Array.from(container.childNodes).forEach(node => {
if (node.nodeName === 'BR') {
flush();
} else {
buffer.push(node.cloneNode(true));
}
});
if (buffer.length) flush();
return lines;
}
function computeLongestLineCh(lines) {
let maxLen = 0;
for (const line of lines) {
const t = line.textContent.replace(/\u00A0/g, ' ');
if (t.length > maxLen) maxLen = t.length;
}
return maxLen + EXTRA_CH;
}
function injectStyles() {
if (document.querySelector('style[data-ft-enhanced-style="1"]')) return;
const style = document.createElement('style');
style.setAttribute('data-ft-enhanced-style', '1');
style.textContent = `
:root { color-scheme: light dark; }
/* Make Bootstrap container full-width for more room */
.container {
max-width: 100% !important;
width: 100% !important;
}
${SELECTOR}.ft-enhanced {
display: flex;
align-items: stretch;
gap: 2rem;
height: 80vh;
max-height: 80vh;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-gutter: stable both-edges;
padding: 10px;
font-variant-ligatures: none;
}
${SELECTOR}.ft-enhanced .ft-col {
flex: 0 0 auto;
width: var(--ft-col-width, 60ch);
min-width: var(--ft-col-width, 60ch);
max-width: var(--ft-col-width, 60ch);
display: flex;
flex-direction: column;
position: relative;
padding: 0 10px; /* internal padding so columns don't crowd */
border-right: 1px solid rgba(128,128,128,0.35); /* vertical rule */
}
${SELECTOR}.ft-enhanced .ft-col:last-child { border-right: none; }
${SELECTOR}.ft-enhanced .ft-col-body {
flex: 1 1 auto;
overflow: hidden; /* no vertical scroll; we push lines to next col */
line-height: 1.45;
}
${SELECTOR}.ft-enhanced .ft-line {
white-space: pre; /* do not wrap; width is set from longest line */
padding-block: 2px;
}
${SELECTOR}.ft-enhanced .ft-col-controls {
flex: 0 0 auto;
display: flex;
gap: 6px;
justify-content: center;
padding: 6px 0 4px;
opacity: 0.8;
}
${SELECTOR}.ft-enhanced .ft-btn {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
background: color-mix(in oklab, currentColor 5%, transparent);
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
opacity: 0.55;
transition: opacity .15s ease, background-color .15s ease;
user-select: none;
}
${SELECTOR}.ft-enhanced .ft-btn:hover {
opacity: 0.95;
background: color-mix(in oklab, currentColor 10%, transparent);
}
/* Small screens: fall back to a single flowing block */
@media (max-width: 768px) {
${SELECTOR}.ft-enhanced {
height: auto;
max-height: none;
overflow: visible;
display: block;
padding: 10px 0;
}
${SELECTOR}.ft-enhanced .ft-col {
width: auto;
min-width: 0;
max-width: none;
border-right: none;
padding: 0;
}
${SELECTOR}.ft-enhanced .ft-col-body { overflow: visible; }
${SELECTOR}.ft-enhanced .ft-col-controls {
justify-content: flex-start;
padding-bottom: 0.75rem;
}
}
`;
document.head.appendChild(style);
}
function removeStyles() {
const el = document.querySelector('style[data-ft-enhanced-style="1"]');
if (el) el.remove();
}
function createColumn() {
const col = document.createElement('div');
col.className = 'ft-col';
const body = document.createElement('div');
body.className = 'ft-col-body';
const controls = document.createElement('div');
controls.className = 'ft-col-controls';
const btnUp = document.createElement('button');
btnUp.className = 'ft-btn';
btnUp.title = 'Pull one line from the next column';
btnUp.textContent = '▲';
const btnDown = document.createElement('button');
btnDown.className = 'ft-btn';
btnDown.title = 'Push one line to the next column';
btnDown.textContent = '▼';
controls.append(btnUp, btnDown);
col.append(body, controls);
return { col, body, btnUp, btnDown };
}
function getColumns(root) {
return Array.from(root.querySelectorAll('.ft-col'));
}
function getBodies(root) {
return Array.from(root.querySelectorAll('.ft-col-body'));
}
function ensureNoOverflow(root) {
let bodies = getBodies(root);
for (let i = 0; i < bodies.length; i++) {
const body = bodies[i];
while (body.scrollHeight > body.clientHeight && body.lastElementChild) {
const next = bodies[i + 1] || createColumnAndAttach(root).body;
bodies = getBodies(root);
const current = bodies[i];
const nextBody = bodies[i + 1];
nextBody.prepend(current.lastElementChild);
}
}
// Remove trailing empty columns (keep at least one)
const cols = getColumns(root);
for (let i = cols.length - 1; i > 0; i--) {
const b = cols[i].querySelector('.ft-col-body');
if (b && b.children.length === 0) cols[i].remove();
else break;
}
}
function createColumnAndAttach(root) {
const parts = createColumn();
root.appendChild(parts.col);
attachHandlers(root, parts);
return parts;
}
function attachHandlers(root, parts) {
parts.btnDown.addEventListener('click', () => {
const cols = getColumns(root);
const idx = cols.indexOf(parts.col);
const bodies = getBodies(root);
const body = bodies[idx];
if (!body || !body.lastElementChild) return;
const next = bodies[idx + 1] || createColumnAndAttach(root).body;
next.prepend(body.lastElementChild);
ensureNoOverflow(root);
saveCounts(root);
});
parts.btnUp.addEventListener('click', () => {
const cols = getColumns(root);
const idx = cols.indexOf(parts.col);
const bodies = getBodies(root);
const body = bodies[idx];
const next = bodies[idx + 1];
if (!body || !next || !next.firstElementChild) return;
const candidate = next.firstElementChild;
body.append(candidate);
if (body.scrollHeight > body.clientHeight) {
next.prepend(body.lastElementChild);
return;
}
ensureNoOverflow(root);
saveCounts(root);
});
}
function buildAuto(root, lines) {
let c = createColumnAndAttach(root);
for (let i = 0; i < lines.length; i++) {
c.body.append(lines[i]);
if (c.body.scrollHeight > c.body.clientHeight) {
const next = createColumnAndAttach(root);
next.body.prepend(c.body.lastElementChild);
c = next;
}
}
ensureNoOverflow(root);
}
function buildFromCounts(root, lines, counts) {
let i = 0;
for (let colIdx = 0; colIdx < counts.length; colIdx++) {
const { body } = createColumnAndAttach(root);
for (let put = 0; put < counts[colIdx] && i < lines.length; put++) {
body.append(lines[i++]);
}
}
while (i < lines.length) {
const { body } = createColumnAndAttach(root);
while (i < lines.length) {
body.append(lines[i++]);
if (body.scrollHeight > body.clientHeight) {
const next = createColumnAndAttach(root);
next.body.prepend(body.lastElementChild);
break;
}
}
}
ensureNoOverflow(root);
}
function enhance() {
if (enhanced) return;
const tab = document.querySelector(SELECTOR);
if (!tab) return;
// Save original content for restoration
tabEl = tab;
originalHTML = tabEl.innerHTML;
injectStyles();
// Build columns from lines
const lines = extractLines(tabEl);
const longestCh = computeLongestLineCh(lines);
tabEl.classList.add('ft-enhanced');
tabEl.style.setProperty('--ft-col-width', `${longestCh}ch`);
tabEl.innerHTML = '';
const saved = loadCounts();
if (saved && saved.length) {
buildFromCounts(tabEl, lines, saved);
} else {
buildAuto(tabEl, lines);
saveCounts(tabEl);
}
// keep columns safe after layout settles
setTimeout(() => {
ensureNoOverflow(tabEl);
saveCounts(tabEl);
}, 0);
onResizeHandler = () => {
ensureNoOverflow(tabEl);
saveCounts(tabEl);
};
window.addEventListener('resize', onResizeHandler, { passive: true });
// If page mutates, re-ensure (but do not re-extract/replace)
if (!moEnhancer) {
moEnhancer = new MutationObserver(() => {
if (!enabled) return;
ensureNoOverflow(tabEl);
});
moEnhancer.observe(document.documentElement, { childList: true, subtree: true });
}
enhanced = true;
}
function disableAndRestore() {
if (!enhanced) return;
// Remove resize handler
if (onResizeHandler) {
window.removeEventListener('resize', onResizeHandler);
onResizeHandler = null;
}
// Disconnect enhancer observer
if (moEnhancer) {
moEnhancer.disconnect();
moEnhancer = null;
}
// Restore original content
if (tabEl) {
tabEl.classList.remove('ft-enhanced');
tabEl.removeAttribute('style');
tabEl.innerHTML = originalHTML || tabEl.innerHTML;
}
// Remove injected styles so page returns to original layout
removeStyles();
enhanced = false;
}
// Insert the "Show Columns" toggle (global)
function insertToggle() {
if (document.getElementById(TOGGLE_ID)) return;
// Find the block that contains transpose controls
const transposeDown = document.getElementById('transpose_down');
if (!transposeDown) return;
const transposeBlock = transposeDown.closest('div');
const toolbar = transposeBlock?.parentElement;
if (!toolbar) return;
// Create switch styled like "Show chords"
const wrap = document.createElement('div');
wrap.className = 'form-check form-switch me-4';
const input = document.createElement('input');
input.className = 'form-check-input';
input.type = 'checkbox';
input.role = 'switch';
input.id = TOGGLE_ID;
input.checked = !!enabled;
const label = document.createElement('label');
label.className = 'form-check-label';
label.setAttribute('for', TOGGLE_ID);
label.textContent = 'Show Columns';
wrap.append(input, label);
// Insert right after the transpose block
if (transposeBlock.nextSibling) {
toolbar.insertBefore(wrap, transposeBlock.nextSibling);
} else {
toolbar.appendChild(wrap);
}
input.addEventListener('change', () => {
enabled = input.checked;
GM_setValue(GLOBAL_ENABLE_KEY, enabled);
if (enabled) {
// If previously disabled, re-enable columns
enhance();
} else {
// Turn off and restore original layout
disableAndRestore();
}
});
}
function ensureToggleInserted() {
insertToggle();
if (!moToolbar) {
moToolbar = new MutationObserver(() => insertToggle());
moToolbar.observe(document.documentElement, { childList: true, subtree: true });
}
}
function init() {
ensureToggleInserted();
if (enabled) {
enhance();
} else {
disableAndRestore();
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
