Re: [whatwg/dom] Add convenient, ergonomic, performant API for sorting siblings (#586)

The reason I ask is because if it's handled that way, you could do sorting and similar reordering patterns as follows, deferring most of the real work to the layout engine and other things that consume styled DOMs:

- Let `itemList` be the list of items to display somehow and `nodeList` be the list of nodes corresponding to each item.
- Initially, set the `order` CSS property to each node's offset. Initially, this would look like 1, 2, 3, and so on.
- To sort:
    - Create an `orderList` to the list of offsets in `itemList`.
    - Sort `orderList` by the items in `itemList`, using `itemList[i]` instead of `orderList[i] === i` where applicable.
    - Set the `order` properties of each node in `nodeList` to the value of `orderList` at that corresponding offset.
- To change back to sequential, just set the `order` property of each node to their offset in `nodeList`. Changing to reverse sequential is as easy as using `nodeList.length - offset` instead.
- To reverse, one could either use the usual tricks with flexbox/grid/text direction/etc. or do the following:
    - Save all the `order` properties of each item in `nodeList` to a temporary variable `orderList`.
    - Reverse `orderList`.
    - Set the `order` properties of each node in `nodeList` to the value of `orderList` at that corresponding offset.
- For interactive reordering:
    - On drop before, increment all the `order` properties of each node by 1 that are both less than the node's old index and greater or equal to the target index, then set the node's `order` property to that target index.
    - On drop after, decrement all the `order` properties of each node by 1 that are both greater than the node's old index and less or equal to the target index, then set the node's `order` property to that target index.

This of course is pretty limited and only works for lists with a single shared ancestor, and custom elements that manage their own elements separately from their shadow roots and such would still have to implement it manually.

I wonder if this would work? Or would it be *too* hackish? Obviously it's not the most elegant, but it does use the CSS `order` property for more or less what it's there for. And of course, one could imagine a native utility to back this up as well.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/586#issuecomment-1420231217
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/586/1420231217@github.com>