Press This: Close sidebar when cursor clicks out of sidebar or tab focus leaves sidebar

[Michael Arestad]

The sidebar should probably close when clicking out of it or when it no longer has focus. (note, the sidebar visibility is only toggle-able on smaller viewports)

[abhishekfdd]

Patch to fix the issue

[abhishekfdd]

I bound a function to remove wp-responsive-open class on touchstart and click to #wpbody-content for hiding the menu.

[stephdau]

Replying to abhishekfdd:

I bound a function to remove wp-responsive-open class on touchstart and click to #wpbody-content for hiding the menu.

Unless I missed something, this patch is for wp-admin's sidebar, not Press This' sidebar, which is the target of this ticket.

On the other hand, I tried to inspire myself from it, and tried to detect clicks on the body, and their target element. Unfortunately, the issue we're having is that if the user happens to put the cursor inside the TinyMCE content iframe when clicking out of the sidebar, the local body click is not being registered, as it's happening inside that iframe's body instead... :(

We might have to wrap options-panel in a wrapper that'd take 100% of the width and height when the sidebar is expanded, and detect clicks on there, with event.target == self or not, to slide it back. This would have to only be the case if we're in responsive mode, since the sidebar is fixed if the window is wide enough.

@azaozz, @michaelarestad: alternative ideas/suggestions?

[Michael Arestad]

I mentioned an initial idea in slack involving another div: ​https://wordpress.slack.com/archives/feature-pressthis/p1425401216000571

Another thing we could try (instead of a fill-width wrapper on options panel which would wreck the layout), is a pseudo-element on options-panel.

[azaozz]

In 31457.2.patch:

• Close the sidebar on moving the focus outside of it (by clicking or by "tabbing").
• Clean up the JS a bit, use vars where possible.

Based on using .focusout and looking at the next focused element (.document.activeElement).

While working on it found a "strange" bug: when the sidebar is open, clicking on the background actually lets the clicks go through. Also hovering over TinyMCE buttons triggers the tooltips for them.

Caused by using box-shadow to stretch the element only visually. The actual element has 0 height. Used a "backdrop" to fix that and make clicking under the tags in an open sidebar work as expected.

[azaozz]

In 31651:

PressThis:

• Close the sidebar on moving the focus outside of it (by clicking or by "tabbing").
• Fix a (weird) structural CSS problem where clicks go through the sidebar when it is open.
• Clean up the JS a bit.

Fixes #31457.