Jump to content

Proof of concept: Floating buttons and position storage


David Karich
 Share

Recommended Posts

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

  • Like 6
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 6
Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...