Permalink
Browse files

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...
flop25 committed Jan 25, 2014
1 parent ed9bdd8 commit 948adde84006257791e5e7239c2c159eeac0d872
@@ -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);
@@ -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]-->
View
@@ -273,3 +273,86 @@ a:hover { border-bottom: none;}
#the_page .content .stuffs { margin: 0!important}
.categoryActions .theme_menuf { display: none;}
/* BreadCrumb */
.browsePath
{
margin: 0;
padding: 0;
float: left;
display: block;
height: 26px;
overflow: hidden;
width: 990px;
padding:5px;
}
.browsePath ul
{
margin: 0;
padding: 0;
height: 26px;
display: block;
}
.browsePath ul li
{
display: block;
float: left;
position: relative;
height: 26px;
overflow: hidden;
line-height: 26px;
margin: 0px;
font-size: .9167em;
}
.browsePath ul li a:before, .browsePath ul li.last:before
{
content: "/";
display: inline-block;
margin-left: 0.2em;
margin-right: 0.2em;
text-align: center;
text-decoration: inherit;
text-transform: none;
width: 1em;
}
.browsePath ul li div.chevronOverlay
{
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.browsePath ul li span
{
display: block;
overflow: hidden;
}
.browsePath ul li a
{
display: block;
position: relative;
height: 26px;
line-height: 26px;
overflow: hidden;
float: left;
}
.browsePath ul li.first a
{
height: 26px !important;
text-indent:-1000em;
width:26px;
padding: 0;
margin: 0;
overflow: hidden;
background:url(icon/icons_sprite.png) no-repeat -26px 0;
}
.browsePath ul li.first a:hover
{
background-image:url(icon/icons_sprite-hover.png);
}
.browsePath ul li.last
{
background: none;
margin-right: 0;
padding-right: 0;
}
@@ -15,7 +15,12 @@
// Need upgrade?
global $conf;
include(PHPWG_THEMES_PATH.'elegant/admin/upgrade.inc.php');
add_event_handler('loc_begin_picture', 'level_separator_elegant');
function level_separator_elegant()
{
global $template;
$template->assign( 'LEVEL_SEPARATOR', '#&$' );
}
add_event_handler('init', 'set_config_values_elegant');
function set_config_values_elegant()
{

0 comments on commit 948adde

Please sign in to comment.