Show the parent folders in the breadcrumb menu when on a child entry.

Previously, clicking on an menu item in the breadcrumb menu removed the
parent entries of the path, i.e.:
Clicking on the "to" entry in "/path/to/some/folder" changed the
breadcrumb menu to show only the "/path/to" entries.
With this change the breadcrumb menu changes this behaviour as the full
path is still visible (and usable) but with the "to" entry beeing
highlighted.

Signed-off-by: Christian Paier <[email protected]>

apps/files/js/breadcrumb.js

@@ -58,7 +58,9 @@
 	BreadCrumb.prototype = {
 		$el: null,
 		dir: null,
+		maxDepthDir: null,
 		dirInfo: null,
+		activeItemIndex: 0,
 
 		/**
 		 * Total width of all breadcrumbs
@@ -81,6 +83,9 @@
 			dir = dir.replace(/\\/g, '/');
 			dir = dir || '/';
 			if (dir !== this.dir) {
+				if ((this.maxDepthDir || "").search(dir) !== 0) {
+					this.maxDepthDir = dir;
+				}
 				this.dir = dir;
 				this.render();
 			}
@@ -118,7 +123,7 @@
 			// Menu is destroyed on every change, we need to init it
 			OC.unregisterMenu($('.crumbmenu > .icon-more'), $('.crumbmenu > .popovermenu'));
 
-			var parts = this._makeCrumbs(this.dir || '/');
+			var parts = this._makeCrumbs(this.maxDepthDir || '/');
 			var $crumb;
 			var $menuItem;
 			this.$el.empty();
@@ -163,19 +168,24 @@
 				if(menuPart.dir) {
 					$menuItem = $('<li class="crumblist"><a><span class="icon-folder"></span><span></span></a></li>');
 					$menuItem.data('dir', menuPart.dir);
-					$menuItem.find('a').attr('href', this.getCrumbUrl(part, j));
+					$menuItem.find('a').attr('href', this.getCrumbUrl(menuPart, j));
 					$menuItem.find('span:eq(1)').text(menuPart.name);
 					this.$menu.children('ul').append($menuItem);
 					if (this.onClick) {
 						$menuItem.on('click', this.onClick);
 					}
 				}
 			}
+
 			_.each(this._detailViews, function(view) {
 				view.render({
 					dirInfo: this.dirInfo
 				});
-				$crumb.append(view.$el);
+
+				if (this.breadcrumbs.length > 2) {
+					this.breadcrumbs[this.activeItemIndex + 2].append(view.$el);
+				}
+
 				$menuItem.append(view.$el.clone(true));
 			}, this);
 
@@ -228,8 +238,15 @@
 			for (var i = 0; i < parts.length; i++) {
 				var part = parts[i];
 				pathToHere = pathToHere + '/' + part;
+
+				let classes = "";
+				if (pathToHere === this.dir) {
+					this.activeItemIndex = i;
+					classes = "active";
+				}
 				crumbs.push({
 					dir: pathToHere,
+					class: classes,
 					name: part
 				});
 			}

apps/files/tests/js/breadcrumbSpec.js

@@ -56,13 +56,15 @@ describe('OCA.Files.BreadCrumb tests', function() {
 			expect($crumbs.eq(1).find('a').hasClass('icon-home')).toEqual(true);
 			expect($crumbs.eq(1).data('dir')).toEqual('/');
 		});
-		it('Renders root when switching to root', function() {
+		it('Renders complete directory when switching to root', function() {
 			var $crumbs;
 			bc.setDirectory('/somedir');
 			bc.setDirectory('/');
 			$crumbs = bc.$el.find('.crumb');
-			expect($crumbs.length).toEqual(2);
+			expect($crumbs.length).toEqual(3);
 			expect($crumbs.eq(1).data('dir')).toEqual('/');
+			expect($crumbs.eq(2).data('dir')).toEqual('/somedir');
+			expect($crumbs.eq(2).attr('class').includes("active")).toEqual(false);
 		});
 		it('Renders single path section', function() {
 			var $crumbs;

core/css/styles.scss

@@ -1202,6 +1202,13 @@ div.crumb {
 			order: 3;
 		}
 	}
+	&.active {
+		font-weight: bold;
+		// Allow multiple span next to the main 'a'
+		a ~ span {
+			padding-left: 0;
+		}
+	}
 	> a,
 	> span {
 		position: relative;
@@ -1226,14 +1233,6 @@ div.crumb {
 	}
 	&:not(:first-child) a {
 	}
-	&:last-child {
-		font-weight: bold;
-		margin-right: 10px;
-		// Allow multiple span next to the main 'a'
-		a ~ span {
-			padding-left: 0;
-		}
-	}
 	&:hover, &:focus, a:focus, &:active {
 		opacity: 1;