From f8a45f1a9b08df06fe43af67844d17cd662b5c57 Mon Sep 17 00:00:00 2001 From: Amardeep Date: Fri, 29 May 2026 23:40:08 +0530 Subject: [PATCH] toolbar posit --- web/plugin.head.html | 56 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 47 insertions(+), 9 deletions(-) diff --git a/web/plugin.head.html b/web/plugin.head.html index bdaa9d5..b5fcf99 100644 --- a/web/plugin.head.html +++ b/web/plugin.head.html @@ -10,9 +10,12 @@ background-size: cover !important; } + html:not(.politictalk-direct-access-blocked) { + --politictalk-toolbar-bottom-offset: 12px; + } + html:not(.politictalk-direct-access-blocked) body { min-height: 100vh; - --politictalk-toolbar-bottom-offset: 12px; } html:not(.politictalk-direct-access-blocked) .conference, @@ -611,6 +614,9 @@ function updateMobileToolbarViewportOffset() { if (!window.matchMedia || !window.matchMedia('(max-width: 640px)').matches) { document.documentElement.style.removeProperty('--politictalk-toolbar-bottom-offset'); + if (document.body) { + document.body.style.removeProperty('--politictalk-toolbar-bottom-offset'); + } return; } @@ -627,10 +633,7 @@ window.cancelAnimationFrame(window.politicTalkToolbarOffsetFrame); window.politicTalkToolbarOffsetFrame = window.requestAnimationFrame(function() { - var toolbar = document.querySelector('.toolbox-content') - || document.querySelector('.toolbox-content-wrapper') - || document.querySelector('#new-toolbox') - || document.querySelector('.toolbox'); + var toolbar = getVisiblePoliticTalkToolbar(); if (!toolbar) { return; @@ -649,10 +652,45 @@ } function setMobileToolbarBottomOffset(offset) { - document.documentElement.style.setProperty( - '--politictalk-toolbar-bottom-offset', - Math.max(12, offset) + 'px' - ); + var value = Math.max(12, offset) + 'px'; + + document.documentElement.style.setProperty('--politictalk-toolbar-bottom-offset', value); + + if (document.body) { + document.body.style.setProperty('--politictalk-toolbar-bottom-offset', value); + } + } + + function getVisiblePoliticTalkToolbar() { + var toolbars = Array.prototype.slice.call(document.querySelectorAll( + '.toolbox-content, .toolbox-content-wrapper, #new-toolbox, .toolbox' + )); + + return toolbars + .map(function(toolbar) { + var rect = toolbar.getBoundingClientRect(); + var style = window.getComputedStyle(toolbar); + + return { + element: toolbar, + rect: rect, + area: Math.max(0, rect.width) * Math.max(0, rect.height), + visible: style.display !== 'none' + && style.visibility !== 'hidden' + && Number(style.opacity || 1) > 0 + && rect.width > 0 + && rect.height > 0 + }; + }) + .filter(function(entry) { + return entry.visible; + }) + .sort(function(first, second) { + return second.rect.bottom - first.rect.bottom || second.area - first.area; + }) + .map(function(entry) { + return entry.element; + })[0] || null; } function mountMobileToolbarPositioning() {