Expand and contract resizable elements on triple click #317
Description
It would be nice if there was an easy way to resize elements with the resize property in their CSS (for example the <textarea> element.
We manually have this in the DWeb Scratchpad app, but it's annoying to have to add it to every other place with resizable elements. It should just happen automagically.
Here's how we can do it.
Add a new preload that listens on the click event on window. Check the detail field of the event and if it is not 3, do nothing.
If it is 3, check if the getComputedStyle(target).resize is unset or set to none, if it is do nothing.
If it is set to vertical, check if the target.style.height is set, if it is, set it to '', if it isn't set it to 100vh. Similar for horizontal but set width to 100%. Do both if it's set to both. For the both case, if either the height or width are set (but not both), clear them both.
This should toggle the resize functionality to make the element take as much space as it can.
If we can get this working with mouse and touch, I think it'd be good to figure out a keyboard action to do something similar since by default keyboards cannot use the browser-made resize functionality. Maybe find a way to trigger it if ctrl+shift+enter is pressed? Feedback appreciated.