Proof of concept: Floating buttons and position storage

[David Karich]

I have opened a ticket on GitHub, in which I present a modification respectively a proof of concept, which significantly improves the editing of pages, especially with long contents.

The save buttons are always in view with this modification, and the scroll position when editing and saving is saved and restored after saving.

You can also find a screencast and code extensions on GitHub. What do you think of that?

Link: https://github.com/processwire/processwire-requests/issues/177

[szabesz]

Great!

I commented it at GitHub, and I would also like to add that maybe @tpr wants to add it to AdminOnSteroids? Maybe along with supporting Profields Page Table too? As that is also facing similar issues.

Edited April 12, 2018 by szabesz
typo

[tpr]

Not sure about adding to AOS, there is already ctrl+s there which is available every part of the screen

As for the JS part of the code, I see that too much is  happening on a scroll event (cloning, adding events, appending to dom). This may cause unnecssary cpu hickups so I would recommend solving it other ways. I would either clone the buttons on page load (outside the scroll event), or toggle a class on the body and position the buttons with CSS. As for the scroll event I would sure add debounce.

And perhaps I would use localStorage instead cookies, and save it only on window.unload (or beforeunload) event only.

[szabesz]

1 minute ago, tpr said:

there is already ctrl+s there which is available every part of the screen

Sure, but that only takes care of save although that is definitely the most important part as the other buttons are used a lot less frequently. Having to scroll back to where I have been is something that would be great to get rid of.

[David Karich]

6 minutes ago, tpr said:

Not sure about adding to AOS, there is already ctrl+s there which is available every part of the screen

As for the JS part of the code, I see that too much is  happening on a scroll event (cloning, adding events, appending to dom). This may cause unnecssary cpu hickups so I would recommend solving it other ways. I would either clone the buttons on page load (outside the scroll event), or toggle a class on the body and position the buttons with CSS. As for the scroll event I would sure add debounce.

The cloning is in the scrolling event, because PW also clones the buttons at the page load (for the head area). If I clone the original savebuttons during pageload, they will also be duplicated in the head.

However, it is ensured that this event is only executed once during scrolling as soon as the top threshold is reached. If a page is not long enough, no button needs to be cloned.

The position storage is also intercepted with a debounce. The position is not saved until 250 milliseconds after the end of the scrolling event.

It may look like this in the code, but any manipulation of the DOM is done only once.

[eydun]

I would love to have this as a module.