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

Задача — при возникновении события подсветить нужный пункт меню, показать по 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 ++;
				} );
		}
	}
//===========================================================================}}}

/**

* Показать и подсветить текущий элемент в меню

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 ++;

} );

}

//===========================================================================}}}

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

Similar Posts

LEAVE A COMMENT Отменить ответ