www/plugins/auto/ariane2/js/jquery.jBreadCrumb.1.1.js

   1 /**
   2  * @author Jason Roy for CompareNetworks Inc.
   3  * Thanks to mikejbond for suggested udaptes
   4  *
   5  * Version 1.1
   6  * Copyright (c) 2009 CompareNetworks Inc.
   7  *
   8  * Licensed under the MIT license:
   9  * http://www.opensource.org/licenses/mit-license.php
  10  *
  11  */
  12 (function($)
  13 {
  14
  15     // Private variables
  16
  17     var _options = {};
  18     var _container = {};
  19     var _breadCrumbElements = {};
  20     var _autoIntervalArray = [];
  21         var _easingEquation;
  22
  23     // Public functions
  24
  25     jQuery.fn.jBreadCrumb = function(options)
  26     {
  27         _options = $.extend({}, $.fn.jBreadCrumb.defaults, options);
  28
  29         return this.each(function()
  30         {
  31             _container = $(this);
  32             setupBreadCrumb();
  33         });
  34
  35     };
  36
  37     // Private functions
  38
  39     function setupBreadCrumb()
  40     {
  41                 //Check if easing plugin exists. If it doesn't, use "swing"
  42                 if(typeof(jQuery.easing) == 'object')
  43                 {
  44                         _easingEquation = 'easeOutQuad'
  45                 }
  46                 else
  47                 {
  48                         _easingEquation = 'swing'
  49                 }
  50
  51         //The reference object containing all of the breadcrumb elements
  52         _breadCrumbElements = jQuery(_container).find('li');
  53
  54         //Keep it from overflowing in ie6 & 7
  55         jQuery(_container).find('ul').wrap('<div style="overflow:hidden; position:relative;  width: ' + jQuery(_container).css("width") + ';"><div>');
  56         //Set an arbitrary width width to avoid float drop on the animation
  57         jQuery(_container).find('ul').width(5000);
  58
  59         //If the breadcrumb contains nothing, don't do anything
  60         if (_breadCrumbElements.length > 0)
  61         {
  62             jQuery(_breadCrumbElements[_breadCrumbElements.length - 1]).addClass('last');
  63             jQuery(_breadCrumbElements[0]).addClass('first');
  64
  65             //If the breadcrumb object length is long enough, compress.
  66
  67             if (_breadCrumbElements.length > _options.minimumCompressionElements)
  68             {
  69                 compressBreadCrumb();
  70             };
  71                     };
  72             };
  73
  74     function compressBreadCrumb()
  75     {
  76
  77         // Factor to determine if we should compress the element at all
  78         var finalElement = jQuery(_breadCrumbElements[_breadCrumbElements.length - 1]);
  79
  80
  81         // If the final element is really long, compress more elements
  82         if (jQuery(finalElement).width() > _options.maxFinalElementLength)
  83         {
  84             if (_options.beginingElementsToLeaveOpen > 0)
  85             {
  86                 _options.beginingElementsToLeaveOpen--;
  87
  88             }
  89             if (_options.endElementsToLeaveOpen > 0)
  90             {
  91                 _options.endElementsToLeaveOpen--;
  92             }
  93         }
  94         // If the final element is within the short and long range, compress to the default end elements and 1 less beginning elements
  95         if (jQuery(finalElement).width() < _options.maxFinalElementLength && jQuery(finalElement).width() > _options.minFinalElementLength)
  96         {
  97             if (_options.beginingElementsToLeaveOpen > 0)
  98             {
  99                 _options.beginingElementsToLeaveOpen--;
 100
 101             }
 102         }
 103
 104         var itemsToRemove = _breadCrumbElements.length - 1 - _options.endElementsToLeaveOpen;
 105
 106         // We compress only elements determined by the formula setting below
 107
 108         //TODO : Make this smarter, it's only checking the final elements length.  It could also check the amount of elements.
 109         jQuery(_breadCrumbElements[_breadCrumbElements.length - 1]).css(
 110         {
 111             background: 'none'
 112         });
 113
 114         $(_breadCrumbElements).each(function(i, listElement)
 115         {
 116             if (i > _options.beginingElementsToLeaveOpen && i < itemsToRemove)
 117             {
 118
 119                 jQuery(listElement).find('a').wrap('<span></span>').width(jQuery(listElement).find('a').width() + 10);
 120
 121                 // Add the overlay png.
 122                 jQuery(listElement).append(jQuery('<div class="' + _options.overlayClass + '"></div>').css(
 123                 {
 124                     display: 'block'
 125                 })).css(
 126                 {
 127                     background: 'none'
 128                 });
 129                 if (isIE6OrLess())
 130                 {
 131                     fixPNG(jQuery(listElement).find('.' + _options.overlayClass).css(
 132                     {
 133                         width: '20px',
 134                         right: "-1px"
 135                     }));
 136                 }
 137                 var options =
 138                 {
 139                     id: i,
 140                     width: jQuery(listElement).width(),
 141                     listElement: jQuery(listElement).find('span'),
 142                     isAnimating: false,
 143                     element: jQuery(listElement).find('span')
 144
 145                 };
 146                 jQuery(listElement).bind('mouseover', options, expandBreadCrumb).bind('mouseout', options, shrinkBreadCrumb);
 147                 jQuery(listElement).find('a').unbind('mouseover', expandBreadCrumb).unbind('mouseout', shrinkBreadCrumb);
 148                 listElement.autoInterval = setInterval(function()
 149                 {
 150                     clearInterval(listElement.autoInterval);
 151                     jQuery(listElement).find('span').animate(
 152                     {
 153                         width: _options.previewWidth
 154                     }, _options.timeInitialCollapse, _options.easing);
 155                 }, (150 * (i - 2)));
 156
 157             }
 158         });
 159
 160     };
 161
 162     function expandBreadCrumb(e)
 163     {
 164         var elementID = e.data.id;
 165         var originalWidth = e.data.width;
 166         jQuery(e.data.element).stop();
 167         jQuery(e.data.element).animate(
 168         {
 169             width: originalWidth
 170         },
 171         {
 172             duration: _options.timeExpansionAnimation,
 173             easing: _options.easing,
 174             queue: false
 175         });
 176         return false;
 177
 178     };
 179
 180     function shrinkBreadCrumb(e)
 181     {
 182         var elementID = e.data.id;
 183         jQuery(e.data.element).stop();
 184         jQuery(e.data.element).animate(
 185         {
 186             width: _options.previewWidth
 187         },
 188         {
 189             duration: _options.timeCompressionAnimation,
 190             easing: _options.easing,
 191             queue: false
 192         });
 193         return false;
 194     };
 195
 196     function isIE6OrLess()
 197     {
 198         var isIE6 = $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent);
 199         return isIE6;
 200     };
 201     // Fix The Overlay for IE6
 202     function fixPNG(element)
 203     {
 204         var image;
 205         if (jQuery(element).is('img'))
 206         {
 207             image = jQuery(element).attr('src');
 208         }
 209         else
 210         {
 211             image = $(element).css('backgroundImage');
 212             image.match(/^url\(["']?(.*\.png)["']?\)$/i);
 213             image = RegExp.$1;
 214             ;
 215         }
 216         $(element).css(
 217         {
 218             'backgroundImage': 'none',
 219             'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='" + image + "')"
 220         });
 221     };
 222
 223     // Public global variables
 224
 225     jQuery.fn.jBreadCrumb.defaults =
 226     {
 227         maxFinalElementLength: 400,
 228         minFinalElementLength: 200,
 229         minimumCompressionElements: 4,
 230         endElementsToLeaveOpen: 1,
 231         beginingElementsToLeaveOpen: 1,
 232         timeExpansionAnimation: 800,
 233         timeCompressionAnimation: 500,
 234         timeInitialCollapse: 600,
 235         easing: _easingEquation,
 236         overlayClass: 'chevronOverlay',
 237         previewWidth: 5
 238     };
 239
 240 })(jQuery);