$timeout(function() { var sidebar = document.getElementById('sidebar'); if (!sidebar || document.getElementById('sidebar-resizer')) { return; } var sidebarResizer = document.createElement('div'); var desktopSidebarMedia = window.matchMedia('(min-width: 969px)'); var activeSidebarPointer = null; var workingSidebarWidth = 0; sidebarResizer.id = 'sidebar-resizer'; sidebarResizer.tabIndex = 0; sidebarResizer.setAttribute('role', 'separator'); sidebarResizer.setAttribute('aria-orientation', 'vertical'); sidebarResizer.setAttribute('aria-controls', 'sidebar'); sidebarResizer.setAttribute('aria-label', 'Resize channel sidebar'); sidebarResizer.setAttribute('aria-valuemin', '120'); sidebarResizer.setAttribute('aria-valuemax', '480'); sidebar.parentNode.insertBefore(sidebarResizer, sidebar.nextSibling); var maximumSidebarWidth = function() { return Math.min(480, window.innerWidth * 0.4); }; var applySidebarWidth = function(value, limitToViewport) { var width = Number(value); if (!Number.isFinite(width) || width <= 0) { return; } width = Math.max(120, Math.min(limitToViewport ? maximumSidebarWidth() : 480, width)); width = Math.round(width); document.documentElement.style.setProperty('--neorelay-sidebar-preferred-width', width + 'px'); sidebarResizer.setAttribute('aria-valuenow', width); workingSidebarWidth = width; }; applySidebarWidth(settings.neorelaySidebarWidth, false); sidebarResizer.addEventListener('pointerdown', function(event) { if (!desktopSidebarMedia.matches || event.button !== 0) { return; } activeSidebarPointer = event.pointerId; workingSidebarWidth = Math.round(sidebar.getBoundingClientRect().width); sidebarResizer.setPointerCapture(event.pointerId); document.body.classList.add('neorelay-sidebar-resizing'); event.preventDefault(); }); sidebarResizer.addEventListener('pointermove', function(event) { if (event.pointerId === activeSidebarPointer && desktopSidebarMedia.matches) { applySidebarWidth(event.clientX, true); } }); var finishSidebarResize = function(event) { if (event.pointerId !== activeSidebarPointer) { return; } activeSidebarPointer = null; document.body.classList.remove('neorelay-sidebar-resizing'); if (workingSidebarWidth > 0) { settings.neorelaySidebarWidth = workingSidebarWidth; } }; sidebarResizer.addEventListener('pointerup', finishSidebarResize); sidebarResizer.addEventListener('pointercancel', finishSidebarResize); sidebarResizer.addEventListener('keydown', function(event) { if (!desktopSidebarMedia.matches || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) { return; } var direction = event.key === 'ArrowLeft' ? -1 : 1; var step = event.shiftKey ? 25 : 10; applySidebarWidth(sidebar.getBoundingClientRect().width + direction * step, true); settings.neorelaySidebarWidth = workingSidebarWidth; event.preventDefault(); }); }, 0);