https://anvil.works/build#clone:7R3RNR37JTENAM7A=TBL2A62OK3XBWOWAYT3KWHKY
Adding items to a repeating panel requires the assignment of a new list to its items, which clears its content and regenerates everything, including what was already there.
Using a linear panel instead of a repeating panel allows to add a few components at a time. Each component will be rendered as it is added.
This AutoScroll class adds a listener to the mousewheel event of the linear panel and calls a function that adds a few rows when the scroll bar is close to the bottom.
def form_show(self, **event_args):
AutoScroll(self.linear_panel, self.load_next_page)
All you need to do is creating an instance of the class. You don’t need to store it in a variable, because it will store itself in the component’s tag. (Actually it does store itself in the tag, but it would work even if it didn’t, the magics of closures! Why does it store itself in there then? I don’t really know, I thought it would be useful one day).
The object must be created in the form_show event, after the html elements are created.
The arguments are:
class AutoScroll:
def __init__(
self,
component_with_scrollbar, # the linear panel (or any other container)
loader_function, # a function that adds a few rows to the linear
# panel
*, # (the following arguments must be named)
scrollbar_load_threshold=300, # call the loader_function when the scrollbar
# is this far from the bottom of the page
start_loading=True, # call the loader_function immediately, without
# waiting for the mousewheel event
debugging=False # print what's going on
):
You can start_loading=False if you want to pre-load the first page.
You can increase the scrollbar_load_threshold if you want it to be more aggressive and call the loader_function sooner.
I was not able to manage other events. For example it doesn’t work when you scroll down by dragging the scrollbar, the way you did before the mouse wheel was invented. If anyone out there can crack the code for this, please let me know and I will update the app.
I really don’t like how it’s looking for the scrollbar, there has to be a better way. My old apps know where the scrollbar is because they have the control over the html and the css, but here I wanted to do everything contained in one class, so, yeah, let me know if you can figure out a better way.
I just created this module with a little copy and paste from old apps that do something similar. In the old apps I was using javascript, css, customized html page template… it was a mess. So I tried to create one class that does the job in a cleaner way, and… well, it works, but I’m not really happy.
Using custom html and javascript and css it was possible to target a specific DOM element, while using Anvil + Anvil Extras I had to do some acrobatics to find the scrollbar and get its position. So I’m not really happy, but it works on the simple test form it comes with. It may break in a more complex form, I haven’t done much testing. Try and let me know how it goes.
