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 <hallo+git@cpaier.com>

Author: Christian Paier

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,11 +83,35 @@
 			dir = dir.replace(/\\/g, '/');
 			dir = dir || '/';
 			if (dir !== this.dir) {
+				this._getMaxDepthDir(dir, this.maxDepthDir || "");
 				this.dir = dir;
 				this.render();
 			}
 		},
 
+		_getMaxDepthDir: function(dir1, dir2) {
+			var dir1array = dir1.split("/").filter(item => item.length > 0)
+			var dir2array = dir2.split("/").filter(item => item.length > 0)
+
+			this.activeItemIndex = dir1array.length-1;
+
+			let isSubDirectory = true;
+			for (let index=0; index<Math.min(dir1array.length, dir2array.length); index+=1) {
+				if (dir1array[index] !== dir2array[index]) {
+					isSubDirectory = false;
+					break;
+				}
+			}
+
+			if (isSubDirectory && dir1array.length < dir2array.length) {
+				this.maxDepthDir = dir2;
+				return;
+			}
+
+			this.maxDepthDir = dir1;
+		},
+
+
 		setDirectoryInfo: function(dirInfo) {
 			if (dirInfo !== this.dirInfo) {
 				this.dirInfo = dirInfo;
@@ -118,7 +144,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 +189,20 @@
 				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(parts[Math.max(this.activeItemIndex, 0)], 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);
+				this.breadcrumbs[this.activeItemIndex + 2].append(view.$el);
 				$menuItem.append(view.$el.clone(true));
 			}, this);
 
@@ -228,8 +255,14 @@
 			for (var i = 0; i < parts.length; i++) {
 				var part = parts[i];
 				pathToHere = pathToHere + '/' + part;
+
+				let classes = "";
+				if (i === this.activeItemIndex) {
+					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,14 @@ div.crumb {
 			order: 3;
 		}
 	}
+	&.active {
+		font-weight: bold;
+		margin-right: 10px;
+		// Allow multiple span next to the main 'a'
+		a ~ span {
+			padding-left: 0;
+		}
+	}
 	> a,
 	> span {
 		position: relative;
@@ -1226,14 +1234,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;