Clojurians Log v2
hyperfiddle
How to do (dom/On "click" ...) on js/document in an Electric way so I can run e/fn on events?
i.e. I want to do (.addEventListener js/document "click" (fn [e] (CallElectricFnHere)) but event handler is JS fn.
Grab a token. When to (spend!) the token is use-case specific but generally 👇
ah, I didn't realize dom/On could take an element as arg 🙂 thx
I'm trying out the Virtual Scroll from the https://gitlab.com/hyperfiddle/electric-fiddle/-/blob/main/src/electric_tutorial/explorer.cljc: when I use the TableScroll component and pass a record-count of 1000, all 1000 elements render in DOM and it continuously keeps adding more rows instead of just the records that would fit on screen.
Update: Fixed by adding max-height or height around TableScroll container div. Scroll-window could use some protection itself against unbounded container height.
Scroll-window intially returns an offset of 0 with limit that starts at 1000 and it keeps adding more limit until it halts around ~8000 rows.
explorer-css has the CSS from explorer example.
I assume the loop is happening because rendering grows the page height, which increases .- scrollTop, which causes limit to grow and more elements to be added => neverending render. I'm surprised it renders beyond the record-count, though. If I cap limit via (IndexRing (min limit record-count) offset), it stops at record-count, but it still renders more elements than are visible.
Am I missing a max-height somewhere?
to succeed here, start by replicating perfectly the actual example, css and all, and then incrementally modify to your use case
fixed with height or max-height 🙂
if your css isn't perfect, you're going to be back with more issues
I got it working 🙂 How can I make it play nice with a dom/thead & dom/tbody in a table? I imagine it's acout the placement of this :height setup:
(dom/div (dom/props {:style {:height (str (clamp-left ; row count can exceed record count
(* row-height (- record-count limit)) 0) "px")}}))your question is ambiguous
studying the css here might help: https://electric.hyperfiddle.net/dustingetz.datomic-browser!DatomicBrowser/
As Dustin said, we'd need to know more about what you're trying to achieve. But here is a rule of thumb: • One parent <table> with display:grid • <thead> as a subgrid • virtualscroll <tbody> as a subgrid too. This way head and body columns are consistent, and only the body is scrollable. display:content may help. Fixed height rows are good enough. Dynamic row height is certainly doable, but very hard.
Virtual Scroll: to persist the scroll offset between route navigations, what would I need to modify to pass in an initial scroll offset, scroll-state?
Edit: Ah, I see there is a ((fn [_] (set! (.-scrollTop dom/node) 0)) record-count) in Scroll-window, so I could store the previous scroll value and override that instead of 0, but scroll may fail if element not tall enough.
In Virtual Scroll-window, shouldn't this:
((fn [_] (set! (.-scrollTop dom/node) 0)) record-count)((fn [_] (set! (.-scrollTop node) 0)) record-count)You'd need to persist search and sort state as well. Even then db changes could make the offset obsolete
I’m good at Electric v3 now and it’s so freaking cool. Will do a demo of my double-entry accounting ledger soon that I’m busy porting to Electric v3 from v2. The performance with virtual scroll is insane.
i want to see your accounting UI for sure
tell us how the v2->v3 port goes as well, a lot of people have asked about that
With Electric v3, you might even be able to do triple entry.