META-INF.resources.scripts.vendor.plugins.ui.jquery.breadcrumbs.js Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of lightadmin Show documentation
Pluggable data management solution for Java web applications developed in a "Rapid" manner
There is a newer version: 1.2.0.RC1
/**
 * @author Jason Roy for CompareNetworks Inc.
 * Thanks to mikejbond for suggested udaptes
 *
 * Version 1.1
 * Copyright (c) 2009 CompareNetworks Inc.
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */
(function ( $ ) {

	// Private variables

	var _options = {};
	var _container = {};
	var _breadCrumbElements = {};
	var _autoIntervalArray = [];
	var _easingEquation;

	// Public functions

	jQuery.fn.jBreadCrumb = function ( options ) {
		_options = $.extend( {}, $.fn.jBreadCrumb.defaults, options );

		return this.each( function () {
			_container = $( this );
			setupBreadCrumb();
		} );

	};

	// Private functions

	function setupBreadCrumb() {
		//Check if easing plugin exists. If it doesn't, use "swing"
		if ( typeof(jQuery.easing) == 'object' ) {
			_easingEquation = 'easeOutQuad'
		} else {
			_easingEquation = 'swing'
		}

		//The reference object containing all of the breadcrumb elements
		_breadCrumbElements = jQuery( _container ).find( 'li' );

		//Keep it from overflowing in ie6 & 7
		jQuery( _container ).find( 'ul' ).wrap( '' );
		//Set an arbitrary width width to avoid float drop on the animation
		jQuery( _container ).find( 'ul' ).width( 5000 );

		//If the breadcrumb contains nothing, don't do anything
		if ( _breadCrumbElements.length > 0 ) {
			jQuery( _breadCrumbElements[_breadCrumbElements.length - 1] ).addClass( 'lastB' );
			jQuery( _breadCrumbElements[0] ).addClass( 'firstB' );

			//If the breadcrumb object length is long enough, compress.

			if ( _breadCrumbElements.length > _options.minimumCompressionElements ) {
				compressBreadCrumb();
			}
			;
		}
		;
	};

	function compressBreadCrumb() {

		// Factor to determine if we should compress the element at all
		var finalElement = jQuery( _breadCrumbElements[_breadCrumbElements.length - 1] );


		// If the final element is really long, compress more elements
		if ( jQuery( finalElement ).width() > _options.maxFinalElementLength ) {
			if ( _options.beginingElementsToLeaveOpen > 0 ) {
				_options.beginingElementsToLeaveOpen--;

			}
			if ( _options.endElementsToLeaveOpen > 0 ) {
				_options.endElementsToLeaveOpen--;
			}
		}
		// If the final element is within the short and long range, compress to the default end elements and 1 less beginning elements
		if ( jQuery( finalElement ).width() < _options.maxFinalElementLength && jQuery( finalElement ).width() > _options.minFinalElementLength ) {
			if ( _options.beginingElementsToLeaveOpen > 0 ) {
				_options.beginingElementsToLeaveOpen--;

			}
		}

		var itemsToRemove = _breadCrumbElements.length - 1 - _options.endElementsToLeaveOpen;

		// We compress only elements determined by the formula setting below

		//TODO : Make this smarter, it's only checking the final elements length.  It could also check the amount of elements.
		jQuery( _breadCrumbElements[_breadCrumbElements.length - 1] ).css( {
																			   background: 'none'
																		   } );

		$( _breadCrumbElements ).each( function ( i, listElement ) {
			if ( i > _options.beginingElementsToLeaveOpen && i < itemsToRemove ) {

				jQuery( listElement ).find( 'a' ).wrap( '' ).width( jQuery( listElement ).find( 'a' ).width() + 5 );

				// Add the overlay png.
				jQuery( listElement ).append( jQuery( '' ).css( {
																													 display: 'block'
																												 } ) ).css( {
																																background: 'none'
																															} );
				if ( isIE6OrLess() ) {
					fixPNG( jQuery( listElement ).find( '.' + _options.overlayClass ).css( {
																							   width: '20px',
																							   right: "-1px"
																						   } ) );
				}
				var options = {
					id: i,
					width: jQuery( listElement ).width(),
					listElement: jQuery( listElement ).find( 'span' ),
					isAnimating: false,
					element: jQuery( listElement ).find( 'span' )

				};
				jQuery( listElement ).bind( 'mouseover', options, expandBreadCrumb ).bind( 'mouseout', options, shrinkBreadCrumb );
				jQuery( listElement ).find( 'a' ).unbind( 'mouseover', expandBreadCrumb ).unbind( 'mouseout', shrinkBreadCrumb );
				listElement.autoInterval = setInterval( function () {
					clearInterval( listElement.autoInterval );
					jQuery( listElement ).find( 'span' ).animate( {
																	  width: _options.previewWidth
																  }, _options.timeInitialCollapse, _options.easing );
				}, (150 * (i - 2)) );

			}
		} );

	};

	function expandBreadCrumb( e ) {
		var elementID = e.data.id;
		var originalWidth = e.data.width;
		jQuery( e.data.element ).stop();
		jQuery( e.data.element ).animate( {
											  width: originalWidth
										  }, {
											  duration: _options.timeExpansionAnimation,
											  easing: _options.easing,
											  queue: false
										  } );
		return false;

	};

	function shrinkBreadCrumb( e ) {
		var elementID = e.data.id;
		jQuery( e.data.element ).stop();
		jQuery( e.data.element ).animate( {
											  width: _options.previewWidth
										  }, {
											  duration: _options.timeCompressionAnimation,
											  easing: _options.easing,
											  queue: false
										  } );
		return false;
	};

	function isIE6OrLess() {
		var isIE6 = $.browser.msie && /MSIE\s(5\.5|6\.)/.test( navigator.userAgent );
		return isIE6;
	};
	// Fix The Overlay for IE6
	function fixPNG( element ) {
		var image;
		if ( jQuery( element ).is( 'img' ) ) {
			image = jQuery( element ).attr( 'src' );
		} else {
			image = $( element ).css( 'backgroundImage' );
			image.match( /^url\(["']?(.*\.png)["']?\)$/i );
			image = RegExp.$1;
			;
		}
		$( element ).css( {
							  'backgroundImage': 'none',
							  'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='" + image + "')"
						  } );
	};

	// Public global variables

	jQuery.fn.jBreadCrumb.defaults = {
		maxFinalElementLength: 400,
		minFinalElementLength: 200,
		minimumCompressionElements: 4,
		endElementsToLeaveOpen: 1,
		beginingElementsToLeaveOpen: 1,
		timeExpansionAnimation: 100,
		timeCompressionAnimation: 100,
		timeInitialCollapse: 200,
		easing: _easingEquation,
		overlayClass: 'chevronOverlay',
		previewWidth: 10
	};

})( jQuery );