Adds dragable border for google docs outline in order to view long headings.
// ==UserScript==
// @name Google Docs Outline Expander
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Adds dragable border for google docs outline in order to view long headings.
// @match https://docs.google.com/document/*
// @license MIT
// @grant none
// ==/UserScript==
(function() {
'use strict';
const HANDLE_WIDTH = 10;
const VISIBILITY_THRESHOLD = 20;
// Observe DOM until sidebar content ("Document tabs") appears
const observer = new MutationObserver((mutations, obs) => {
const readyIndicator = document.querySelector('#kix-outlines-widget-header-text-chaptered');
if (readyIndicator) {
obs.disconnect();
initResizer();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
function initResizer() {
const sidebar = document.querySelector('.left-sidebar-container');
if (!sidebar) {
console.error('Sidebar container not found.');
return;
}
let handle = sidebar.querySelector('.left-sidebar-resizer-drag-handle');
if (!handle) {
handle = document.createElement('div');
handle.className = 'left-sidebar-resizer-drag-handle';
sidebar.appendChild(handle);
}
Object.assign(handle.style, {
display: 'block',
position: 'absolute',
top: '0',
width: HANDLE_WIDTH + 'px',
height: '100%',
cursor: 'ew-resize',
zIndex: '1000',
background: 'rgba(0,0,0,0.1)',
opacity: '0',
transition: 'opacity 0.2s',
pointerEvents: 'none'
});
const initialWidth = sidebar.offsetWidth;
handle.style.left = (initialWidth - HANDLE_WIDTH) + 'px';
let isResizing = false;
let startX, startWidth;
handle.addEventListener('mousedown', function(e) {
isResizing = true;
startX = e.clientX;
startWidth = sidebar.offsetWidth;
handle.style.opacity = '1';
handle.style.pointerEvents = 'auto';
e.preventDefault();
});
document.addEventListener('mousemove', function(e) {
if (isResizing) {
const diffX = e.clientX - startX;
const newWidth = startWidth + diffX;
if (newWidth > 100) {
sidebar.style.width = newWidth + 'px';
handle.style.left = (newWidth - HANDLE_WIDTH) + 'px';
const content = sidebar.querySelector('.left-sidebar-container-content');
if (content) {
content.style.width = (newWidth - HANDLE_WIDTH) + 'px';
}
}
} else {
const rect = sidebar.getBoundingClientRect();
if (e.clientX >= rect.right - VISIBILITY_THRESHOLD && e.clientX <= rect.right + 50) {
handle.style.opacity = '1';
handle.style.pointerEvents = 'auto';
} else {
handle.style.opacity = '0';
handle.style.pointerEvents = 'none';
}
}
});
document.addEventListener('mouseup', function() {
if (isResizing) {
isResizing = false;
}
});
handle.addEventListener('mouseenter', function() {
handle.style.opacity = '1';
handle.style.pointerEvents = 'auto';
});
handle.addEventListener('mouseleave', function() {
if (!isResizing) {
handle.style.opacity = '0';
handle.style.pointerEvents = 'none';
}
});
}
})();