fixing breadcrumbs on ajax loading of files

apps/files/js/filelist.js

@@ -218,8 +218,10 @@ var FileList={
 		if(typeof(result.data.breadcrumb) != 'undefined'){
 			$controls.find('.crumb').remove();
 			$controls.prepend(result.data.breadcrumb);
-			// TODO: might need refactor breadcrumb code into a new file
-			//resizeBreadcrumbs(true);
+
+			var width = $(window).width();
+			Files.initBreadCrumbs();
+			Files.resizeBreadcrumbs(width, true);
 
 			// in case svg is not supported by the browser we need to execute the fallback mechanism
 			if(!SVGSupport()) {

apps/files/js/files.js

@@ -111,6 +111,72 @@ Files={
 				$(e).droppable(folderDropOptions);
 			}
 		});
+	},
+
+	lastWidth: 0,
+
+	initBreadCrumbs: function () {
+		Files.lastWidth = 0;
+		Files.breadcrumbs = [];
+
+		// initialize with some extra space
+		Files.breadcrumbsWidth = 64;
+		if ( document.getElementById("navigation") ) {
+			Files.breadcrumbsWidth += $('#navigation').get(0).offsetWidth;
+		}
+		Files.hiddenBreadcrumbs = 0;
+
+		$.each($('.crumb'), function(index, breadcrumb) {
+			Files.breadcrumbs[index] = breadcrumb;
+			Files.breadcrumbsWidth += $(breadcrumb).get(0).offsetWidth;
+		});
+
+
+		$.each($('#controls .actions>div'), function(index, action) {
+			Files.breadcrumbsWidth += $(action).get(0).offsetWidth;
+		});
+	},
+
+	resizeBreadcrumbs: function (width, firstRun) {
+		if (width != Files.lastWidth) {
+			if ((width < Files.lastWidth || firstRun) && width < Files.breadcrumbsWidth) {
+				if (Files.hiddenBreadcrumbs == 0) {
+					Files.breadcrumbsWidth -= $(Files.breadcrumbs[1]).get(0).offsetWidth;
+					$(Files.breadcrumbs[1]).find('a').hide();
+					$(Files.breadcrumbs[1]).append('<span>...</span>');
+					Files.breadcrumbsWidth += $(Files.breadcrumbs[1]).get(0).offsetWidth;
+					Files.hiddenBreadcrumbs = 2;
+				}
+				var i = Files.hiddenBreadcrumbs;
+				while (width < Files.breadcrumbsWidth && i > 1 && i < Files.breadcrumbs.length - 1) {
+					Files.breadcrumbsWidth -= $(Files.breadcrumbs[i]).get(0).offsetWidth;
+					$(Files.breadcrumbs[i]).hide();
+					Files.hiddenBreadcrumbs = i;
+					i++
+				}
+			} else if (width > Files.lastWidth && Files.hiddenBreadcrumbs > 0) {
+				var i = Files.hiddenBreadcrumbs;
+				while (width > Files.breadcrumbsWidth && i > 0) {
+					if (Files.hiddenBreadcrumbs == 1) {
+						Files.breadcrumbsWidth -= $(Files.breadcrumbs[1]).get(0).offsetWidth;
+						$(Files.breadcrumbs[1]).find('span').remove();
+						$(Files.breadcrumbs[1]).find('a').show();
+						Files.breadcrumbsWidth += $(Files.breadcrumbs[1]).get(0).offsetWidth;
+					} else {
+						$(Files.breadcrumbs[i]).show();
+						Files.breadcrumbsWidth += $(Files.breadcrumbs[i]).get(0).offsetWidth;
+						if (Files.breadcrumbsWidth > width) {
+							Files.breadcrumbsWidth -= $(Files.breadcrumbs[i]).get(0).offsetWidth;
+							$(Files.breadcrumbs[i]).hide();
+							break;
+						}
+					}
+					i--;
+					Files.hiddenBreadcrumbs = i;
+				}
+			}
+			Files.lastWidth = width;
+		}
 	}
 };
 $(document).ready(function() {
@@ -273,72 +339,15 @@ $(document).ready(function() {
 	//do a background scan if needed
 	scanFiles();
 
-	var lastWidth = 0;
-	var breadcrumbs = [];
-	var breadcrumbsWidth = 0;
-	if ( document.getElementById("navigation") ) {
-		breadcrumbsWidth = $('#navigation').get(0).offsetWidth;
-	}
-	var hiddenBreadcrumbs = 0;
-
-	$.each($('.crumb'), function(index, breadcrumb) {
-		breadcrumbs[index] = breadcrumb;
-		breadcrumbsWidth += $(breadcrumb).get(0).offsetWidth;
-	});
-
-
-	$.each($('#controls .actions>div'), function(index, action) {
-		breadcrumbsWidth += $(action).get(0).offsetWidth;
-	});
-
-	function resizeBreadcrumbs(firstRun) {
-		var width = $(this).width();
-		if (width != lastWidth) {
-			if ((width < lastWidth || firstRun) && width < breadcrumbsWidth) {
-				if (hiddenBreadcrumbs == 0) {
-					breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth;
-					$(breadcrumbs[1]).find('a').hide();
-					$(breadcrumbs[1]).append('<span>...</span>');
-					breadcrumbsWidth += $(breadcrumbs[1]).get(0).offsetWidth;
-					hiddenBreadcrumbs = 2;
-				}
-				var i = hiddenBreadcrumbs;
-				while (width < breadcrumbsWidth && i > 1 && i < breadcrumbs.length - 1) {
-					breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth;
-					$(breadcrumbs[i]).hide();
-					hiddenBreadcrumbs = i;
-					i++
-				}
-			} else if (width > lastWidth && hiddenBreadcrumbs > 0) {
-				var i = hiddenBreadcrumbs;
-				while (width > breadcrumbsWidth && i > 0) {
-					if (hiddenBreadcrumbs == 1) {
-						breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth;
-						$(breadcrumbs[1]).find('span').remove();
-						$(breadcrumbs[1]).find('a').show();
-						breadcrumbsWidth += $(breadcrumbs[1]).get(0).offsetWidth;
-					} else {
-						$(breadcrumbs[i]).show();
-						breadcrumbsWidth += $(breadcrumbs[i]).get(0).offsetWidth;
-						if (breadcrumbsWidth > width) {
-							breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth;
-							$(breadcrumbs[i]).hide();
-							break;
-						}
-					}
-					i--;
-					hiddenBreadcrumbs = i;
-				}
-			}
-			lastWidth = width;
-		}
-	}
+	Files.initBreadCrumbs();
 
 	$(window).resize(function() {
-		resizeBreadcrumbs(false);
+		var width = $(this).width();
+		Files.resizeBreadcrumbs(width, false);
 	});
 
-	resizeBreadcrumbs(true);
+	var width = $(this).width();
+	Files.resizeBreadcrumbs(width, true);
 
 	// event handlers for breadcrumb items
 	$('#controls').delegate('.crumb a', 'click', onClickBreadcrumb);

apps/files/templates/index.php

@@ -38,7 +38,9 @@
 				</form>
 			</div>
 			<?php if ($_['trash'] ): ?>
-			<input id="trash" type="button" value="<?php p($l->t('Deleted files'));?>" class="button" <?php $_['trashEmpty'] ? p('disabled') : '' ?>></input>
+				<div id="trash" class="button" <?php $_['trashEmpty'] ? p('disabled') : '' ?>>
+					<a><?php p($l->t('Deleted files'));?></a>
+				</div>
 			<?php endif; ?>
 			<div id="uploadprogresswrapper">
 				<div id="uploadprogressbar"></div>