bug:2700 implementation of jBreadCrumb

comments appreciated on the bugtracker git-svn-id: http://piwigo.org/svn/trunk@26971 68402e56-0260-453c-a942-63ccdbb3a9ee
Piwigo · Jan 25, 2014 · 948adde · 948adde
1 parent ed9bdd8
commit 948adde
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 2 deletions.
diff --git a/themes/elegant/js/jquery.jBreadCrumb.js 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);
diff --git 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}
-	<!--[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]-->
diff --git 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
@@ -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()
 {