ol reverse attribute polyfill
//a polyfill for the ordered-list reversed attribute | |
// http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ol-element | |
// http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#dom-li-value | |
//uses these awesomeness: | |
// Array.prototype.forEach | |
// Element.prototype.children | |
//if you want support for older browsers *cough*IE8-*cough*, then use the other | |
// file provided | |
(function () { | |
"use strict"; | |
if ( 'reversed' in document.createElement('ol') ) { | |
return; | |
} | |
[].forEach.call( document.getElementsByTagName('ol'), function ( list ) { | |
if ( list.getAttribute( 'reversed' ) !== null ) { | |
reverseList( list ); | |
} | |
}); | |
function reverseList ( list ) { | |
var children = list.children, count = list.getAttribute('start'); | |
//check to see if a start attribute is provided | |
if ( count !== null ) { | |
count = Number( count ); | |
if ( isNaN(count) ) { | |
count = null; | |
} | |
} | |
//no, this isn't duplication - start will be set to null | |
// in the previous if statement if an invalid start attribute | |
// is provided | |
if ( count === null ) { | |
count = children.length; | |
} | |
[].forEach.call( children, function ( child ) { | |
child.value = count--; | |
}); | |
} | |
}()); |
//use this if you want support for browsers which don't have ES5 goodies | |
(function () { | |
if ( 'reversed' in document.createElement('ol') ) { | |
return; | |
} | |
var lists = document.getElementsByTagName( 'ol' ); | |
for ( var i = 0, len = lists.length; i < len; i++ ) { | |
if ( lists[i].getAttribute( 'reversed' ) !== null ) { | |
reverseList( lists[i] ); | |
} | |
} | |
function reverseList ( list ) { | |
var children = [], childNodes = list.childNodes, | |
count = list.getAttribute('start'), i, len; | |
for ( i = 0, len = childNodes.length; i < len; i++ ) { | |
//Node.ELEMENT_NODE === 1 | |
if ( childNodes[i].nodeType === 1 ) { | |
children.push( childNodes[i] ); | |
} | |
} | |
//check to see if a start attribute is provided | |
if ( count !== null ) { | |
count = Number( count ); | |
if ( isNaN(count) ) { | |
count = null; | |
} | |
} | |
//no, this isn't duplication - start will be set to null | |
// in the previous if statement if an invalid start attribute | |
// is provided | |
if ( count === null ) { | |
count = children.length; | |
} | |
for ( i = 0, len = children.length; i < len; i++ ) { | |
children[ i ].value = count--; | |
} | |
} | |
}()); |
This comment has been minimized.
This comment has been minimized.
@mathiasbynens If you want older browsers support, there's the second file in this gist |
This comment has been minimized.
This comment has been minimized.
mathiasbynens
commented
Jan 26, 2012
Ah, duh. Perhaps give these files more obvious file names than |
This comment has been minimized.
This comment has been minimized.
I actually named them Edit: Actually, a file isn't necessary. Editing the comment at the top should suffice. |
This comment has been minimized.
This comment has been minimized.
jeffreybarke
commented
Feb 24, 2012
I added support for li value attributes: https://gist.github.com/1896721 |
This comment has been minimized.
This comment has been minimized.
joar
commented
Aug 28, 2012
What's the license for these code snippets? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
mathiasbynens commentedJan 26, 2012
This won’t work in browsers that don’t support
Array#forEach
, which rules out IE < 9. :'(