Ok so I wasn't as smart as I thought I was. The stimulus controller knows when its element is added/removed from the DOM (and calls connect/disconnect appropriately). But if any child elements are added, they don't automatically have my new event handlers.
So I borrowed jQuery's event delegation concept, and listen for any events that 'bubble' up to the controller element, and delegate them as needed.
Alternatively, maybe I could have used a Mutation Observer, but I think it's best to avoid where possible.
Or of course, we could just revert my change and keep the 'data-action's in the HTML. I'm curious to hear opinions on this.."
We are already specifying the element's role ('all') in the HTML. Its behaviour should be predefined; there's no need to also specify in the HTML.
The eventhandler doesn't need to be cleand up on disconnect, because they are removed along with the DOM object.
Well, that made the JS way simpler.
Adds a lot of classes though. Maybe we could do it based on column index instead, but this will do for now.
table.hide-col0 { td:nth-child(0) { display: none; } }
Visibility was way simpler, but the table doesn't recalculate column widths until you use display:none;
This is now using the same method as the old products screen.
But we still need to update colspans..
The cols could have been a lot cleaner with simple classnames, but I preferred to mark up in a way that reveals the purpose (otherwise they could be used for styling).
It doesn't seem to be any faster comparing querySelector('[data]') vs class, or iterating through the dom nodes.
They were already counted as changed by the javascript, but didn't have a 'changed' class to indicate it.
The reason they are 'changed', is because the dropdown has no blank option, and is forced to select the first item in the list.
This is purely to cover the case of invalid data, but should help a lot when debugging data issues. I don't think it's any less efficient, because the extra 'classList.toggle' calls don't do anything on unchanged fields.
Yay, now it works. Not sure the best way to show loading yet.
- currently the Turbo loading indicator shows which is better than nothing (blue bar at top)
- ideally we could show a small spinner over the image thumbnail. need to write some stimulus to hook into turbo lifecycle I guess.
- or we could activate the frame-level loading overlay. refactor loading_controller a bit so that it's applied on the container, then hopefully we can just call change->loading#showLoading. the turbo_stream response could dectivate it.
