diff --git a/scripts/block.js b/scripts/block.js index 01860c2..f9cf833 100644 --- a/scripts/block.js +++ b/scripts/block.js @@ -86,6 +86,10 @@ type: 'boolean', default: false, }, + sort: { + type: 'string', + default: 'desc', + }, }, edit: withSelect( function( select ) { return { @@ -166,6 +170,26 @@ }, } ), + el( + wp.components.SelectControl, + { + label: __( 'Output direction', 'stklcode-liveticker' ), + value: props.attributes.sort, + options: [ + { + value: 'desc', + label: __( 'oldest first', 'stklcode-liveticker' ), + }, + { + value: 'asc', + label: __( 'newest first', 'stklcode-liveticker' ), + }, + ], + onChange: function( val ) { + props.setAttributes( { sort: val } ); + }, + } + ), ]; } @@ -183,6 +207,7 @@ 'data-sclt-ticker': props.attributes.ticker, 'data-sclt-limit': props.attributes.unlimited ? 0 : props.attributes.limit, 'data-sclt-last': 0, + 'data-sclt-sort': props.attributes.sort, } ); }, diff --git a/scripts/liveticker.js b/scripts/liveticker.js index 4187965..0c64218 100644 --- a/scripts/liveticker.js +++ b/scripts/liveticker.js @@ -1,5 +1,5 @@ /** - * Contructor of the scLiveticker object. + * Constructor of the scLiveticker object. * * @class */ @@ -73,6 +73,7 @@ var parseElement = function( elem, widget, n ) { var list = elem.querySelector( 'ul' ); var last = elem.getAttribute( 'data-sclt-last' ); + var sort = elem.getAttribute( 'data-sclt-sort' ); elem.id = 'sclt-' + n; @@ -92,11 +93,16 @@ ); } + if ( 'asc' !== sort && 'desc' !== 'sort' ) { + sort = 'desc'; + } + return { id: n, ticker: elem.getAttribute( 'data-sclt-ticker' ), limit: elem.getAttribute( 'data-sclt-limit' ), lastPoll: last, + sort: sort, ticks: list, isWidget: widget, updating: false, @@ -210,8 +216,11 @@ if ( old ) { // Replace entry, if it already exists (i.e. has been updated). t.ticks.replaceChild( li, old ); + } else if ( 'asc' === t.sort ) { + // Append new tick as last element to container. + t.ticks.appendChild( li ); } else { - // Prepend new tick to container. + // Prepend new tick as fist element to container. t.ticks.insertBefore( li, t.ticks.firstChild ); } @@ -221,7 +230,12 @@ // Remove tail, if limit is set. if ( 0 < t.limit ) { - [].slice.call( t.ticks.getElementsByTagName( 'li' ), t.limit ).forEach( + if ( 'asc' === t.sort ) { + old = [].slice.call( t.ticks.getElementsByTagName( 'li' ), 0, t.limit ); + } else { + old = [].slice.call( t.ticks.getElementsByTagName( 'li' ), t.limit ); + } + old.forEach( function( l ) { l.remove(); }