diff options
Diffstat (limited to 'themes/elegant/js')
| -rw-r--r-- | themes/elegant/js/jquery.jBreadCrumb.js | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/themes/elegant/js/jquery.jBreadCrumb.js b/themes/elegant/js/jquery.jBreadCrumb.js new file mode 100644 index 000000000..bb722868e --- /dev/null +++ b/themes/elegant/js/jquery.jBreadCrumb.js @@ -0,0 +1,206 @@ +/** + * @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('<div style="overflow:hidden; position:relative; width: ' + jQuery(_container).css("width") + ';"><div>'); + //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('last'); + jQuery(_breadCrumbElements[0]).addClass('first'); + + //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('<span></span>').width(jQuery(listElement).find('a').width() + 10); + + // Add the overlay png. + // jQuery(listElement).append(jQuery('<div class="' + _options.overlayClass + '"></div>').css( + // { + // display: 'block' + // })).css( + // { + // background: 'none' + // }); + + 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; + }; + + // Public global variables + + jQuery.fn.jBreadCrumb.defaults = + { + maxFinalElementLength: 400, + minFinalElementLength: 200, + minimumCompressionElements: 4, + endElementsToLeaveOpen: 1, + beginingElementsToLeaveOpen: 1, + timeExpansionAnimation: 800, + timeCompressionAnimation: 500, + timeInitialCollapse: 600, + easing: _easingEquation, + overlayClass: 'chevronOverlay', + previewWidth: 40 + }; + +})(jQuery); |