Алгоритм динамического центрирования меню по нужному элементу

• 04, 20, 2012
•  bullgare
•  javascript
• No Comments.

Задача — при возникновении события подсветить нужный пункт меню, показать по 3 пункта сверху и снизу, остальные скрыть.
Это относится и к пагинация (paging).
Если, к примеру, это второй пункт меню, то снизу показать больше.
В общем, чтобы в сумме всегда было показано 7 пунктов.
Решил показать алгоритм, которым воспользовался, чтобы всегда быть уверенным, что показывается столько элементов, сколько нужно.

/**
 * Показать и подсветить текущий элемент в меню
 */
	function updateMenu( ItemId )
	{
		var selectorItemMenuPrefix = '.js-menu-item-',
			selectorItemMenu = '.js-menu-item',
			maxItemsToShow = 7,
			$itemsToShow,
			$items = $( selectorItemMenu );
		var $currentItem = $( selectorItemMenuPrefix + ItemId );

	// открываем пункты в меню так, чтобы текущий элемент была в центре
		if ( $currentItem.length )
		{
			var position = $items.index( $currentItem );
			var startFrom = position  > maxItemsToShow ? position - maxItemsToShow : 0,
				endAt = position < $items.length - maxItemsToShow ? position + maxItemsToShow : $items.length;

		// вычисляем, какие пункты меню показывать
			while ( ( endAt - startFrom ) > maxItemsToShow )
			{
				if ( position > ( Math.floor( ( endAt - startFrom ) / 2 ) + startFrom ) ) {
					startFrom ++;
				}
				else {
					endAt --;
				}
			}

			var itemCounter = 0;
			$items.
				each( function() {
					var $el = $( this );
					if ( itemCounter === position ) {
						$el.toggleClass( 'active', true );
					}
					else {
						$el.toggleClass( 'active', false );
					}

					if ( itemCounter >= startFrom && itemCounter <= endAt ) {
						$el.toggleClass( 'hidden', false );
					}
					else {
						$el.toggleClass( 'hidden', true );
					}

					itemCounter ++;
				} );
		}
	}
//===========================================================================}}}