From 948adde84006257791e5e7239c2c159eeac0d872 Mon Sep 17 00:00:00 2001 From: flop25 Date: Sat, 25 Jan 2014 23:12:34 +0000 Subject: bug:2700 implementation of jBreadCrumb comments appreciated on the bugtracker git-svn-id: http://piwigo.org/svn/trunk@26971 68402e56-0260-453c-a942-63ccdbb3a9ee --- themes/elegant/js/jquery.jBreadCrumb.js | 206 ++++++++++++++++++++++++++++++++ themes/elegant/local_head.tpl | 15 ++- themes/elegant/theme.css | 83 +++++++++++++ themes/elegant/themeconf.inc.php | 7 +- 4 files changed, 309 insertions(+), 2 deletions(-) create mode 100644 themes/elegant/js/jquery.jBreadCrumb.js (limited to 'themes') 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('
'); + //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('').width(jQuery(listElement).find('a').width() + 10); + + // Add the overlay png. + // jQuery(listElement).append(jQuery('
').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); diff --git a/themes/elegant/local_head.tpl b/themes/elegant/local_head.tpl index 8c2b4045c..a342df6b8 100644 --- a/themes/elegant/local_head.tpl +++ b/themes/elegant/local_head.tpl @@ -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} - diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css index 83f130deb..2a37e54f4 100644 --- a/themes/elegant/theme.css +++ b/themes/elegant/theme.css @@ -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; +} diff --git a/themes/elegant/themeconf.inc.php b/themes/elegant/themeconf.inc.php index d5afc6f6e..e0611ffce 100644 --- a/themes/elegant/themeconf.inc.php +++ b/themes/elegant/themeconf.inc.php @@ -15,7 +15,12 @@ $themeconf = array( // 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() { -- cgit v1.2.3