Improved the breadcrumb to make it work on smaller displays

Fixes #108

3 files changed, 181 insertions, 43 deletions

diff --git a/js/breadcrumb.js b/js/breadcrumb.js
new file mode 100644
index 00000000..eccf8728
--- /dev/null
+++ b/js/breadcrumb.js
@@ -0,0 +1,176 @@
+/* global $, OC, t, Gallery */
+(function () {
+	/**
+	 * Breadcrumbs that represent the path to the current album
+	 *
+	 * @todo We could speed things up when the window is resized by caching the size of crumbs and
+	 *     resizing the breadcrumb based on those values instead of rebuilding it from scratch
+	 *
+	 * @param {string} albumPath
+	 * @constructor
+	 */
+	var Breadcrumb = function (albumPath) {
+		this.breadcrumbsElement = $('#breadcrumbs');
+		this.albumPath = albumPath;
+	};
+
+	Breadcrumb.prototype = {
+		breadcrumbsElement: null,
+		albumPath: null,
+		availableWidth: 0,
+
+		/**
+		 * Defines the maximum available width in which we can build the breadcrumb and builds it
+		 *
+		 * @param {int} availableWidth
+		 */
+		setMaxWidth: function (availableWidth) {
+			if (this.availableWidth !== availableWidth) {
+				this.availableWidth = availableWidth;
+				this._build();
+			}
+		},
+
+		/**
+		 * Builds the breadcrumb
+		 *
+		 * Shortens it when the path is too long
+		 * @private
+		 */
+		_build: function () {
+			var i, crumbs, path, currentAlbum, crumbElement;
+			var breadcrumbs = [];
+			this._clear();
+			var albumName = $('#content').data('albumname');
+			if (!albumName) {
+				albumName = t('gallery', 'Pictures');
+			}
+			path = '';
+			crumbs = this.albumPath.split('/');
+			currentAlbum = crumbs.pop();
+
+			if (currentAlbum) {
+				// We first push the current folder
+				crumbElement = this._push(currentAlbum, false);
+				crumbElement.addClass('last');
+
+				// This builds the breadcrumbs
+				var crumbsLength = crumbs.length;
+				if (crumbsLength > 0) {
+					for (i = 0; i < crumbsLength; i++) {
+						if (crumbs[i]) {
+							if (path) {
+								path += '/' + crumbs[i];
+							} else {
+								path += crumbs[i];
+							}
+							breadcrumbs.push({
+								name: crumbs[i],
+								path: path
+							});
+						}
+					}
+					this._addCrumbs(breadcrumbs);
+				}
+			}
+			// This adds the home button
+			this._addHome(albumName, currentAlbum);
+		},
+
+		/**
+		 * Clears the breadcrumbs and its tooltip
+		 */
+		_clear: function () {
+			$('.tipsy:last').remove();
+			this.breadcrumbsElement.children().remove();
+		},
+
+		/**
+		 * Adds an element to the breadcrumb
+		 *
+		 * @param {string} name
+		 * @param {string} link
+		 * @param img
+		 * @private
+		 */
+		_push: function (name, link, img) {
+			var crumb = $('<div/>');
+			crumb.addClass('crumb');
+			if (link !== false) {
+				link = '#' + encodeURIComponent(link);
+				var crumbLink = $('<a/>');
+				crumbLink.attr('href', link);
+				if (img) {
+					crumbLink.append(img);
+				} else {
+					crumbLink.text(name);
+				}
+				crumb.append(crumbLink);
+			} else {
+				crumb.html($('<span/>').text(name));
+			}
+			this.breadcrumbsElement.prepend(crumb);
+
+			return crumb;
+		},
+
+		/**
+		 * Adds the Home button
+		 *
+		 * @param {string} albumName
+		 * @param {string} currentAlbum
+		 * @private
+		 */
+		_addHome: function (albumName, currentAlbum) {
+			var crumbImg = $('<img/>');
+			crumbImg.attr('src', OC.imagePath('core', 'places/home'));
+			crumbImg.attr('title', albumName);
+			var crumbElement = this._push('', '', crumbImg);
+			if (!currentAlbum) {
+				crumbElement.addClass('last');
+			}
+		},
+
+		/**
+		 * Adds all the elements located in between the home button and the last folder
+		 *
+		 * Shrinks the breadcrumb if there is not enough room
+		 *
+		 * @param {Array} crumbs
+		 * @private
+		 */
+		_addCrumbs: function (crumbs) {
+			var i, crumbElement;
+			var shorten = false;
+			var ellipsisPath = '';
+
+			// We go through the array in reverse order
+			for (i = crumbs.length; i >= 0; i--) {
+				if (crumbs[i]) {
+					crumbElement =
+						this._push(crumbs[i].name, crumbs[i].path);
+					if (shorten) {
+						crumbElement.hide();
+					}
+					// If we've reached the maximum width, we start hiding crumbs
+					if (this.breadcrumbsElement.width() > this.availableWidth) {
+						shorten = true;
+						crumbElement.hide();
+						ellipsisPath = crumbs[i].path;
+					}
+				}
+			}
+			// If we had to hide crumbs, we'll add a pay to go to the parent folder
+			if (shorten) {
+				crumbElement = this._push('...', ellipsisPath);
+				crumbElement.attr('title', ellipsisPath).tipsy({
+					fade: true,
+					gravity: 'nw',
+					delayOut: 5
+				});
+			}
+		}
+	};
+
+	Gallery.Breadcrumb = Breadcrumb;
+})();
\ No newline at end of file
diff --git a/js/gallery.js b/js/gallery.js
index 59d97a15..07a9dba2 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -617,13 +617,14 @@ $(document).ready(function () {
 		$(window).resize(_.throttle(function () {
 			if (windowWidth !== $(window).width()) {
 				Gallery.view.viewAlbum(Gallery.currentAlbum);
+				Gallery.view.breadcrumb.setMaxWidth(windowWidth - 320);
 				var windowHeight = $(window).height();
 				$('#content').css("min-height", windowHeight);
 				var infoContentElement = $('.album-info-content');
 				infoContentElement.css('max-height', windowHeight - 150);
 				windowWidth = $(window).width();
 			}
-		}, 500));
+		}, 250));
 	}
 });
 
diff --git a/js/galleryview.js b/js/galleryview.js
index effe5785..3591457b 100644
--- a/js/galleryview.js
+++ b/js/galleryview.js
@@ -1,6 +1,7 @@
 /* global OC, $, _, t, Gallery, Album, GalleryImage, SlideShow */
 Gallery.view = {};
 Gallery.view.element = null;
+Gallery.view.breadcrumb = null;
 Gallery.view.requestId = -1;
 
 /**
@@ -29,7 +30,6 @@ Gallery.view.init = function (albumPath) {
 			$('#sort-name-button').click(Gallery.sorter);
 			$('#sort-date-button').click(Gallery.sorter);
 		}
-		OC.Breadcrumb.container = $('#breadcrumbs');
 		Gallery.view.viewAlbum(albumPath);
 	}
 };
@@ -64,7 +64,8 @@ Gallery.view.viewAlbum = function (albumPath) {
 		Gallery.currentAlbum = albumPath;
 		Gallery.view.shareButtonSetup(albumPath);
 		Gallery.view.infoButtonSetup();
-		Gallery.view.buildBreadCrumb(albumPath);
+		Gallery.view.breadcrumb = new Gallery.Breadcrumb(albumPath);
+		Gallery.view.breadcrumb.setMaxWidth($(window).width() - 320);
 	}
 
 	Gallery.albumMap[albumPath].viewedItems = 0;
@@ -232,43 +233,3 @@ Gallery.view.loadVisibleRows = function (album, path) {
 	}
 };
 Gallery.view.loadVisibleRows.loading = false;
-
-/**
- * Builds the breadcrumb
- *
- * @param {string} albumPath
- */
-Gallery.view.buildBreadCrumb = function (albumPath) {
-	var i, crumbs, path;
-	OC.Breadcrumb.clear();
-	var albumName = $('#content').data('albumname');
-	if (!albumName) {
-		albumName = t('gallery', 'Pictures');
-	}
-	Gallery.view.pushBreadCrumb(albumName, '');
-
-	path = '';
-	crumbs = albumPath.split('/');
-	for (i = 0; i < crumbs.length; i++) {
-		if (crumbs[i]) {
-			if (path) {
-				path += '/' + crumbs[i];
-			} else {
-				path += crumbs[i];
-			}
-			Gallery.view.pushBreadCrumb(crumbs[i], path);
-		}
-	}
-};
-
-/**
- * Adds a path to the breadcrumb
- *
- * @fixme Needs to shorten long paths like on the Files app
- *
- * @param {string} text
- * @param {string} path
- */
-Gallery.view.pushBreadCrumb = function (text, path) {
-	OC.Breadcrumb.push(text, '#' + encodeURIComponent(path));
-};
\ No newline at end of file