Home > OS >  Google apps script: shrink sidebar without creating dead space in docs
Google apps script: shrink sidebar without creating dead space in docs

Time:12-31

I'm using a sidebar in google apps script for docs to mimic onEdit() so text changes background color when a user highlights it. I want the sidebar itself to be as small as possible, and am using the bookmarks bar workaround in this answer to shrink it via JS:

javascript:void(window.top.document.getElementsByClassName("script-application-sidebar")[0].style.width='0px')

However, when I shrink the sidebar, the document editor frame doesn't fill the extra space. If I click inspect element in the dead space, then close the inspector window, the doc frame fills the space. I tried this bookmarklet to close the space automatically, but it doesn't work:

 javascript:void(window.top.document.getElementbyId("docs-editor-container")[0].style.width='927px')

Is there any Javascript I can add as a bookmarklet to get the editor frame to snap to the full screen?

CodePudding user response:

Ok this solution is a hacky one, since you mentioned that closing the dev tools will fix the editor frame, I had a hunch that I should just programmatically trigger window resize event, but after trying it, it didn't work. But then, I found out that if you toggle hide and show the side panel, it will trigger resize event and causes the editor frame to fill remaining space, so basically, you can change your bookmarklet to this:

javascript: (() => {window.top.document.getElementsByClassName("script-application-sidebar")[0].style.width='0px';const resizer = document.querySelectorAll('[aria-label*="side panel"]')[0];resizer.dispatchEvent(new MouseEvent('mousedown'));resizer.dispatchEvent(new MouseEvent('click'));resizer.dispatchEvent(new MouseEvent('mouseup'));resizer.dispatchEvent(new MouseEvent('mousedown'));resizer.dispatchEvent(new MouseEvent('click'));resizer.dispatchEvent(new MouseEvent('mouseup'));})();

What this does is basically it shrink the apps-script sidebar, then it clicks the toggle button of the side panel and clicks it again to hide it, this programmatical click will eventually cause the window resize to be triggered and cause the editor frame to fill.

  • Related