Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
bug:2700 implementation of jBreadCrumb
comments appreciated on the bugtracker git-svn-id: http://piwigo.org/svn/trunk@26971 68402e56-0260-453c-a942-63ccdbb3a9ee
- Loading branch information
Showing
4 changed files
with
309 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,24 @@ | ||
{html_style} | ||
.browsePath ul li span a:before, .browsePath ul li.last:before | ||
{ldelim} | ||
content: "{$LEVEL_SEPARATOR}"; | ||
} | ||
{/html_style} | ||
{footer_script} | ||
var p_main_menu = "{$elegant.p_main_menu}", p_pict_descr = "{$elegant.p_pict_descr}", p_pict_comment = "{$elegant.p_pict_comment}"; | ||
jQuery(document).ready(function() | ||
{ | ||
jQuery(".browsePath").jBreadCrumb(); | ||
}) | ||
{/footer_script} | ||
{if $BODY_ID=='thePicturePage'} | ||
{combine_script id='elegant.scripts_pp' load='footer' require='jquery' path='themes/elegant/scripts_pp.js'} | ||
{else} | ||
{combine_script id='elegant.scripts' load='footer' require='jquery' path='themes/elegant/scripts.js'} | ||
{/if} | ||
<!--[if lt IE 8]> | ||
{combine_script id='jquery.jBreadCrumb' load='footer' require='jquery' path='themes/elegant/js/jquery.jBreadCrumb.js'} | ||
|
||
|
||
<!--[if lt IE 8]> | ||
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}themes/elegant/fix-ie7.css"> | ||
<![endif]--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters