jQuery: trasformare i widget degli archivi di WordPress in accordion

jQuery ci permette di trasformare strutture DOM semplici in strutture complesse con facilità, Questo è il caso dei widget degli archivi di WordPress.

La struttura di partenza di un widget degli archivi di WordPress è la seguente (semplificata):

<ul>
	<li><a href="http://sito.host/2015/04/">aprile 2015</a></li>
	<li><a href="http://sito.host/2015/03/">marzo 2015</a></li>
	<li><a href="http://sito.host/2015/02/">febbraio 2015</a></li>
	<!-- continua -->
</ul>

Vogliamo trasformarla nella seguente struttura:

<ul>
	<span class="year-toggle-wrapper">
		<span class="year-toggle">+</span>
		<span class="year-name">2015</span>
	</span>
	<div class="year">
		<div class="year-hidden">
			<li data-year="2015" data-month="aprile"><a href="http://sito.host/2015/04/">Aprile</a></li>
			<li data-year="2015" data-month="marzo"><a href="http://sito.host/2015/03/">Marzo</a></li>
			<li data-year="2015" data-month="febbraio"><a href="http://sito.host/2015/02/">Febbraio</a></li>
			<!-- continua -->	
		</div>
	</div>
	<!-- continua-->
</ul>

Il codice jQuery è il seguente:

(function( $ ) {

	$(function() {
	
		// Selettore dei widget e anno di inizio: da modificare
		
		
		var $widgetElements = $( ".widget" );
		var startYear = 2006;
		
		
		// Gestisce i toggle
		
		$( document ).on( "click", ".year-toggle", function() {
			var $t = $( this );
			var $c = $t.parent().next();
			if( $c.is( ":hidden" ) ) {
				$t.text( "-" );
				$c.slideDown();
			} else {
				$t.text( "+" );
				$c.slideUp();	
			}
		});
		
		$widgetElements.each(function() {
			var $block = $( this );
			var $a = $block.find( "a" );
			
			if( $a.length ) {
				var url = $a.eq( 0 ).attr( "href" );
				
				// È un link di un archivio?
				
				if( /\d{4}\/\d{2}\/$/.test( url ) ) {
				
					// Creiamo il range di anni partendo da quello attuale
				
					var currentDate = new Date();
					var currentYear = currentDate.getFullYear();
					var firstYear = startYear;
					var totalYears = currentYear - firstYear;
					var years = [];
					
					for( var i = 0; i < totalYears; ++i ) {
						var y = currentYear--;
						years.push( y );
					}
					
					years.push( firstYear );
					
					
					
					$a.each(function() {
					
						// Creiamo <li data-year="yyyy" data-month="nome">
					
						var text = $( this ).text(),
							parts = text.split( " " ),
							year = parts[1],
							month = parts[0];
							
							$( this ).parent().attr( "data-year", year );
							$( this ).parent().attr( "data-month", month );
					});
					
					// Raggruppiamo le voci che appartengono allo stesso anno
					
					for( var j = 0; j < years.length; j++ ) {
						var yr = years[j].toString();
						$widgetElements.find( "li[data-year='" + yr + "']" ).wrapAll( "<div class='year'></div>" );
					}
					
					
					// Creiamo i toggle
					
					$widgetElements.find( ".year" ).each(function() {
						var $year = $( this );
						var $item = $year.find( "> li:first" );
						var a = $item.data( "year" );
						$item.before( "<span class='year-toggle-wrapper'><span class='year-toggle'>+</span><span class='year-name'>" + a + "</span></span>");
						
						// Impostiamo il nome del mese
						
						$year.find( "li" ).each(function() {
							$i = $( this );
							$i.find( "a" ).css( "textTransform", "capitalize" ).
							text( $i.data( "month" ) );
						});
						
						// Mostriamo l'anno  e nascondiamo il resto
						
						$item.nextAll( "li" ).andSelf().wrapAll( "<div class='year-hidden'></div>" );
					});
					
				}
			}
			
		});
	
	
	});



})( jQuery );