Overlay panels
-
It does seem like in 1.16 that it doesn't recognize the mouse over a web page. The only way I can get it to close is to mouseover another UI element.
-
@recnamoruen Just tested it on 1.16 and it works fine for me. Tried with a clean profile? is there another mod implemented ? (just guesses)
-
@masterleo29 Cool
How can I start in "Encaixe" ?
It still start in resize mode even changingvar mode = x
Guess I'm doing some wrong as it works changing via button.Could you repost the whole script with the "patch" for transition effect? (I'm really bad in editing js :P)
-
@hadden89 Here you go. Anything else give me a heads up !
(P.S: The tooltips are in portuguese. 'encaixe' = 'fitting' )/** * Author: Leonardo Domingues * * #Web panel display enhancer * Toggle between * - Resize (Original) * - Overlay -> Click * - Overlay -> Hover * * Transition included */ setTimeout(function wait() { var adr = document.querySelector(".toolbar-addressbar.toolbar"); if (adr != null) { // Panel Overlay Toggle var switchS = document.getElementById('switch'); var btnS = document.createElement('button'); var svgS = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var pathS = document.createElementNS("http://www.w3.org/2000/svg", "path"); var circTarget = "d: path('M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var circEye = "d: path('M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var cirdRing = "d: path('M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 0px; bottom: 0;}'+ '#panels-container.right {right: 0; }'+ '/* Overlay - Sides */'+ '#main.left #webview-container { margin-left: 0px;}'+ '#main.right #webview-container { margin-right: 0px;} '+ '/* Fullscreen */'+ '#browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } '+ '#browser.fullscreen #panels-container { position: relative; }'; btnS.classList.add('preferences'); btnS.id = 'toggle'; btnS.setAttribute("tabindex", "-1"); svgS.setAttributeNS(null, "width", "26"); svgS.setAttributeNS(null, "height", "26"); svgS.setAttributeNS(null, "viewBox", "0 0 26 26"); switchS.lastChild.style = "margin-top: 0px"; switchS.insertBefore(btnS,switchS.lastChild); btnS.appendChild(svgS); svgS.appendChild(pathS); styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Encaixe"); pathS.style = circTarget; mode = 2 var show_token; for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = function() { clearTimeout(show_token); show_token = setTimeout(function() { if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[index].click(); panel = index; } }, 100); }; } var hide_token; document.getElementById('panels-container').onmouseleave = function() { hide_token = setTimeout(function() { if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[panel].click() } }, 400); }; document.getElementById('panels-container').onmouseenter = function() { clearTimeout(hide_token); }; var panel = 0; // toggle logic document.getElementById('toggle').addEventListener('click', function() { /********************************************************/ var painel = document.getElementById('panels-container'); var curr_width = painel.style.width; if (curr_width != "34px") { //In painel.style.transition = 'width 0.3s'; painel.style.width = "34px"; //Out setTimeout(function() { painel.style.width = curr_width; }, 350); setTimeout(function() { painel.style.transition = ''; }, 700); } /********************************************************/ if (mode == 0) { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Sobreposição 2"); pathS.style = circEye; mode = 1; }else if (mode == 1) { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Encaixe"); pathS.style = circTarget; mode = 2 var show_token; for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = function() { clearTimeout(show_token); show_token = setTimeout(function() { if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[index].click(); panel = index; } }, 100); }; } var hide_token; document.getElementById('panels-container').onmouseleave = function() { hide_token = setTimeout(function() { if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[panel].click() } }, 400); }; document.getElementById('panels-container').onmouseenter = function() { clearTimeout(hide_token); }; }else { for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = ''; } document.getElementById('panels-container').onmouseleave = ''; document.getElementById('panels-container').onmouseenter = ''; styleS.innerHTML = ''; btnS.setAttribute("title", "Sobreposição"); pathS.style = cirdRing; mode = 0; } /********************************************************/ }); } else { setTimeout(wait, 300); } }, 300);
-
@hadden89 To be honest, this code can be optimized/simplified a little. I just made it work and forgot to clean it up a bit. Soon I might do it and post it here, so it can be adjusted more easily
-
@masterleo29
New code throw an error in dev tool and button is not shown
Uncaught ReferenceError: styleS is not defined at wait (overlay.js:54)
(exact copy of the one you posted, I'll keep both this and the "old" one)Kinda "fixed" with // at line 54
// styleS.innerHTML = csso_overlay;
Great mod, thanks again for this ^^
Some values are named
painel
. Shouldn't be all namedpanel
?
A transition delay - meant as "x" time before triggering the panel opening with hover/click will be the perfection but maybe isalready in the code -
@hadden89 I cleaned the code a bit so that it is easier to read. About the 'painel' variable, that's portuguese for 'panel'. I replaced the variables' names with english (kept the tooltips in portuguese for my usage).
And yes, there is already a transition delay on hover effect. You can change it if you want (on the overlay_hover function, look for the 'setTimeouts' and search for the number like '100' or '400')/** * Author: Leonardo Domingues * * #Web panel display enhancer * Toggle between * - Resize (Original) * - Overlay -> Click * - Overlay -> Hover * * Transition included */ setTimeout(function wait() { var adr = document.querySelector(".toolbar-addressbar.toolbar"); if (adr != null) { // Panel Overlay Toggle var switchS = document.getElementById('switch'); var btnS = document.createElement('button'); var svgS = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var pathS = document.createElementNS("http://www.w3.org/2000/svg", "path"); var circTarget = "d: path('M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var circEye = "d: path('M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var cirdRing = "d: path('M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0'); fill-rule: evenodd"; var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 0px; bottom: 0;}'+ '#panels-container.right {right: 0; }'+ '/* Overlay - Sides */'+ '#main.left #webview-container { margin-left: 0px;}'+ '#main.right #webview-container { margin-right: 0px;} '+ '/* Fullscreen */'+ '#browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } '+ '#browser.fullscreen #panels-container { position: relative; }'; btnS.classList.add('preferences'); btnS.id = 'toggle'; btnS.setAttribute("tabindex", "-1"); svgS.setAttributeNS(null, "width", "26"); svgS.setAttributeNS(null, "height", "26"); svgS.setAttributeNS(null, "viewBox", "0 0 26 26"); switchS.lastChild.style = "margin-top: 0px"; switchS.insertBefore(btnS,switchS.lastChild); btnS.appendChild(svgS); svgS.appendChild(pathS); var styleS = document.createElement('style'); styleS.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(styleS); var web_panel = document.getElementById('panels-container'); var mode = 0; var panel = 0; var show_token; var hide_token; function overlay_click () { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Sobreposição 2"); pathS.style = circEye; mode = 1; } function overlay_hover () { styleS.innerHTML = csso_overlay; btnS.setAttribute("title", "Encaixe"); pathS.style = circTarget; mode = 2 for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = function() { clearTimeout(show_token); show_token = setTimeout(function() { if (!switchS.getElementsByTagName('button')[index].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[index].click(); panel = index; } }, 100); }; } web_panel.onmouseleave = function() { hide_token = setTimeout(function() { if (switchS.getElementsByTagName('button')[panel].getAttribute('class').includes("active")) { switchS.getElementsByTagName('button')[panel].click() } }, 400); }; web_panel.onmouseenter = function() { clearTimeout(hide_token); }; } function original () { for (let index = 0; index < switchS.getElementsByTagName('button').length - 3; index++) { switchS.getElementsByTagName('button')[index].onmouseover = ''; } web_panel.onmouseleave = ''; web_panel.onmouseenter = ''; styleS.innerHTML = ''; btnS.setAttribute("title", "Sobreposição"); pathS.style = cirdRing; mode = 0; } // set startup (replace this function with 1 of the above) original ();/*overlay_click ();*/ /*overlay_hover ();*/ // toggle logic document.getElementById('toggle').addEventListener('click', function() { /********************************************************/ var curr_width = web_panel.style.width; if (curr_width != "34px") { //In web_panel.style.transition = 'width 0.3s'; web_panel.style.width = "34px"; //Out setTimeout(function() { web_panel.style.width = curr_width; }, 350); setTimeout(function() { web_panel.style.transition = ''; }, 700); } /********************************************************/ if (mode == 0) { overlay_click(); }else if (mode == 1) { overlay_hover(); }else { original (); } /********************************************************/ }); } else { setTimeout(wait, 300); } }, 300);
-
@masterleo29 Thanks alot.
Taken the improved version. I'll look the setTimeouts values. -
These are some details I would like to change from Leonardo's version. Any idea how to make the panel toggle colored and the panel edge to match the page border?
-
@kallon You gotta set the z-index to make the panel edge disappear behind the address bar. I did this fix on retoree's initial code on page 2, look it up.
-
@luetage said in Overlay panels:
@kallon You gotta set the z-index to make the panel edge disappear behind the address bar. I did this fix on retoree's initial code on page 2, look it up.
z-index: 1?
Where do I insert it? -
-
@kallon If you would like a fix using my version, I got it here (funny story: I made this fix for a friend; forgot to post)
Just override the 'csso_overlay' variable with this:
(differences: 1 line xD)var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 1px; bottom: 0px;}'+ '#panels-container.right {right: 0; }'+ '#panels-container.left {left: 0; }'+ '#panel_switch {background-color: var(--colorBgDark);}'+ '/* Overlay - Sides */'+ '#main.left #webview-container { margin-left: 0px;}'+ '#main.right #webview-container { margin-right: 0px;} '+ '/* Fullscreen */'+ '#browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } '+ '#browser.fullscreen #panels-container { position: relative; }';
EDIT: on the #panel_switch background color, you can use other css variable or even your own color
-
@masterleo29 said in Overlay panels:
@kallon If you would like a fix using my version, I got it here (funny story: I made this fix for a friend; forgot to post)
Just override the 'csso_overlay' variable with this:
(differences: 1 line xD)var csso_overlay = '/* Overlay */ '+ '#panels-container { position: absolute; z-index: 1; top: 1px; bottom: 0px;}'+ '#panels-container.right {right: 0; }'+ '#panels-container.left {left: 0; }'+ '#panel_switch {background-color: var(--colorBgDark);}'+ '/* Overlay - Sides */'+ '#main.left #webview-container { margin-left: 0px;}'+ '#main.right #webview-container { margin-right: 0px;} '+ '/* Fullscreen */'+ '#browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } '+ '#browser.fullscreen #panels-container { position: relative; }';
EDIT: on the #panel_switch background color, you can use other css variable or even your own color
You sir, ROCK!
-
@kallon Thanks, man. You can't imagine how much I appreciate it
Btw, if you (or anyone for that matter) have more suggestions for this mod (my favorite one) or other mods, msg me. I like to code (in work, in my spare time, ...). For example, I also made a mod for a custom button to open privacy window (posted it), another to have bookmarks bar on speed dial only (posted) and atm i'm working on a scrollable tab bar (instead of shinking, saw some request around) -
@masterleo29 said in Overlay panels:
@kallon Thanks, man. You can't imagine how much I appreciate it
Btw, if you (or anyone for that matter) have more suggestions for this mod (my favorite one) or other mods, msg me. I like to code (in work, in my spare time, ...). For example, I also made a mod for a custom button to open privacy window (posted it), another to have bookmarks bar on speed dial only (posted) and atm i'm working on a scrollable tab bar (instead of shinking, saw some request around)Are you from Portugal or Brazil? If the latter, we're neighbors. Cheers from Uruguay!
-
@kallon Portugal
-
@masterleo29 That's the wrong fix, since you don't set the z-index, but shift the panel by 1px. I know this because I tried to fix it like this at first too. As far as I can recall this introduces several new problems on the bottom of panels.
Hiding the edge of the panel behind the address bar is how Vivaldi does it without any modifications, shifting it down is problematic. The way that works best is to set a z-index of 3 for the address bar and a z-index of 2 for the panel. If you follow my link above it's all there in the csso variable. You should actually know this since you used most of my code for your revised modification
-
@luetage I personally don't like/I'm not used to work too much with z-index, so I just changed the panel one. The fix I posted was for the toggle transparency (by setting the same color background 'manually'). The 1px change was just a 'regression', since I noticed it when it was mencioned here. ( I remember that I tried to change multiple z-indexes when I tried to fix the toggle transparency but it didn't work at the time)
And yes, this code is a modificiation from the original one. It was what gave me the idea to start 'playing' with some vivaldi mods on my spare time. I think (will check to be sure) that the 1º time i posted i mencioned it was a "tentative of improvement" or something like that. If I did not, then is my fault. Good job with the original code. (so far I believe I tweaked the css, upgraded the toggle and made that animation stuff between modes with timeouts and stuff),
EDIT: yeah ... the 'author' thing in the begining of the mod might lead to some erros (i'm used to type stuff like this at the start for sharing purposes, specially when working w/ other people so that I can see fast who's writing what)
-
@masterleo29 You didn't change the z-index of the panel – retoree did. The z-index of 1 is the reason why the panel is visible in the first place. It enables the overlay of the panel. But setting this z-index also means that the z-index of the panel is now higher than that of the addressbar. While on default Vivaldi the addressbar hides the edge of the panel, in the original css mod you are using for your own code, the edge is visible because of that z-index. I fixed that by giving the addressbar a higher z-index than the panel. Well, use it or don't use it, it's your choice. But it's the "vanilla" way to go about it and doesn't introduce further regressions like the current "1px fix" you are applying. I hope this makes sense.