Jump to content
David Karich

Proof of concept: Floating buttons and position storage

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 5

Share this post


Link to post
Share on other sites

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 by szabesz
typo
  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 5

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By elabx
      Hi everyone!
      I haven't seen a thread yet to talk about this aspect of development in which I have been reading on lately and I am very interested in this community's opinion/experience. 
      What are your perspectives/experiences on dealing with a UX/UI research process? Would you have resources/books/courses to recommend to learn about the topic?
    • By steveooo
      Hello guys,
      I am using some nested PageTables and with every PageTable field the user clicks on, a modal window appears. Because every modal window's width & height are not 100%, every nesting step shrinks the window.

      Does someone have any solution for this problem?
      Best wishes,
      steveooo
×
×
  • Create New...