search

patrick-steele-idem / morphdom

Fast and lightweight DOM diffing/patching (no virtual DOM needed)
MIT License
3.21k stars 129 forks source link

Detect reorder of siblings #47

Closed shannonmoeller closed 8 years ago

shannonmoeller commented 8 years ago

Any way to detect the reorder of siblings? Perhaps optionally to avoid a performance penalty for this edge case. I have a list of videos. If video 2 is playing and video 1 is removed or reordered, video 2 is stopped because its source attribute is changes.

shannonmoeller commented 8 years ago

I'm thinking this could be used for a quick comparison:

https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode

patrick-steele-idem commented 8 years ago

Hey @shannonmoeller, the recommended solution is to assign an id attribute with a unique value for each <video> element and morphdom will match the elements up by the assigned ID.

If you don't like assigning an "id" attribute then you can provide your own getNodeKey(el) function:

var morphedNode = morphdom(fromNode, toNode, {
    getNodeKey: function(el) {
        return el.id;
    },
    ...
});

Let me know if that doesn't solve your problem.

shannonmoeller commented 8 years ago

Oh, awesome. I wasn't aware of that. Thanks!

shannonmoeller commented 8 years ago

This doesn't fully solve the issue. When an item is removed from the list, the other elements remain, so we're half way there. However, if an element is moved down the list, it's still getting overridden by the new element, even with the same id.

AutoSponge commented 8 years ago

It sounds like range.insertNode (or insertBefore) would do the trick. Instead of morphing, you would need to move the existing node to the new location in the DOM. @patrick-steele-idem does this sound correct?