How to define a client-side sort(...) function for document order

Question

I need to come up with a function which can be used with 'sort' ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort ) which can order items by document order.

Anyone have ideas for efficient implementations or known techniques?

BACKGROUND: I'm building a Greensock- JQuery- and CSS3- based animated presentation to deliver a report on my university work - like powerpoint on steroids. To determine the order of reveals (e.g. animated bullets) I can't always rely on the document order implicit in elements returned from JQuery matches so I need to make order explicit. Problems arise, for example, when the CSS presentation requires different document order (e.g. float right before float left, or a bottom right image before a top-left bullet). I'd like to generalise the functions used to order reveals anyway, so that it's easy to change where it's needed for animation purposes.

PROBLEM: For the reasons above I'd like to use an array of 'order by' functions as a definition of preferred sort of animations within the presentation, with the 'document order' sort function both as a default, and a fallback foundation for any exceptional implementations (presentations in which some reveals violate document order). [In the end, there will be a 'group-by' operator also, which determines which animations are coupled to each other (e.g. and need to share the same closure scope when constructing tweens), so the whole thing will look a bit like a SQL query]

I can't find any existing feature within client-side javascript which gives e.g. an ordinal number for position within the document, but there may something I haven't found, or some browser-specific ones (I'm mainly targeting Chrome).

I'd consider running through the document and caching a document-ordering value at every element, or perhaps every 'reveal' element but I don't know what sensible cross-browser strategies there are for adding properties to elements at runtime for later retrieval, and whether there are any design issues here.

Also I'm sure there are insights and angles on this problem which I haven't considered on the problem as a whole, and I'd welcome contributions. This stuff isn't proprietary BTW. If anyone cares there's experimental implementation going on at https://github.com/cefn/firmware-codesign-readinglog/tree/master/slides/upgrade

Answer 1

You can use compareDocumentPosition (DOM3) on browsers that support it. For browsers that don't, you can use the implementation that Sizzle (the selector engine in jQuery) uses to ensure it gives elements in order. In the source, look for where it defines its sortOrder function. There are branches there for both the version that uses compareDocumentPosition and the one that doesn't. (I'd copy it here, but it has other dependencies within Sizzle, the copy would be incomplete at best.)