Optimize breadcrumbs

Only hide/show elements instead of rebuilding the whole breadcrumbs every time it's being resized
(cherry picked from commit 3fd7885)
[ci skip]

3 files changed, 143 insertions, 92 deletions

diff --git a/js/breadcrumb.js b/js/breadcrumb.js
index 7e116a1a..bd26b87a 100644
--- a/js/breadcrumb.js
+++ b/js/breadcrumb.js
@@ -1,169 +1,219 @@
-/* global Gallery */
+/* global Handlebars, Gallery */
 (function ($, OC, t, Gallery) {
 	"use strict";
+
+	var TEMPLATE =
+		'{{#each crumbs}}' +
+		'	<div class="crumb {{cssClass}}" data-dir="{{dir}}">' +
+		'	{{#if link}}' +
+		'		<a href="{{link}}">' +
+		'		{{#if img}}' +
+		'			{{#with img}}' +
+		'			<img title="{{title}}" src="{{imageSrc}}">' +
+		'			{{/with}}' +
+		'		{{else}}' +
+		'			{{name}}' +
+		'		{{/if}}' +
+		'		</a>' +
+		'	{{else}}' +
+		'		<span>{{name}}</span>' +
+		'	{{/if}}' +
+		'	</div>' +
+		'{{/each}}';
+
 	/**
 	 * 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) {
+	var Breadcrumb = function () {
 		this.breadcrumbsElement = $('#breadcrumbs');
-		this.albumPath = albumPath;
 	};
 
 	Breadcrumb.prototype = {
+		breadcrumbs: [],
 		breadcrumbsElement: null,
+		ellipsis: null,
 		albumPath: null,
 		availableWidth: 0,
 
 		/**
-		 * Defines the maximum available width in which we can build the breadcrumb and builds it
+		 * Initialises the breadcrumbs for the current album
+		 *
+		 * @param {string} albumPath
+		 * @param {int} availableWidth
+		 */
+		init: function (albumPath, availableWidth) {
+			this.albumPath = albumPath;
+			this.availableWidth = availableWidth;
+			this.breadcrumbs = [];
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+			this._build();
+			this._resize(this.availableWidth);
+		},
+
+		/**
+		 * Defines the maximum available width in which we can build the breadcrumb and resizes it
 		 *
 		 * @param {int} availableWidth
 		 */
 		setMaxWidth: function (availableWidth) {
-			if (this.availableWidth !== availableWidth) {
+			if (this.availableWidth > availableWidth || this.ellipsis.is(":visible")) {
 				this.availableWidth = availableWidth;
-				this._build();
+				this._resize(this.availableWidth);
 			}
 		},
 
 		/**
-		 * Builds the breadcrumb
+		 * Builds the breadcrumbs array
 		 *
-		 * Shortens it when the path is too long
 		 * @private
 		 */
 		_build: function () {
-			var i, crumbs, path, currentAlbum, crumbElement;
-			var breadcrumbs = [];
-			this._clear();
+			var i, crumbs, name, path, currentAlbum;
 			var albumName = $('#content').data('albumname');
 			if (!albumName) {
-				albumName = t('gallery', 'Pictures');
+				albumName = t('gallery', 'Gallery');
 			}
 			path = '';
+			name = '';
 			crumbs = this.albumPath.split('/');
 			currentAlbum = crumbs.pop();
 
-			if (currentAlbum) {
-				// We first push the current folder
-				crumbElement = this._push(currentAlbum, false);
-				crumbElement.addClass('last');
+			// This adds the home button
+			this._addHome(albumName, currentAlbum);
+			// We always add a hidden ellipsis
+			this._pushCrumb('...', '', null, 'ellipsis');
 
-				// This builds the breadcrumbs
+			if (currentAlbum) {
+				// This builds the crumbs between home and the current folder
 				var crumbsLength = crumbs.length;
 				if (crumbsLength > 0) {
+					// We add all albums to the breadcrumbs array
 					for (i = 0; i < crumbsLength; i++) {
 						if (crumbs[i]) {
+							name = crumbs[i];
 							if (path) {
 								path += '/' + crumbs[i];
 							} else {
 								path += crumbs[i];
 							}
-							breadcrumbs.push({
-								name: crumbs[i],
-								path: path
-							});
+							this._pushCrumb(name, path, null, '');
 						}
 					}
-					this._addCrumbs(breadcrumbs);
 				}
+				// We finally push the current folder
+				this._pushCrumb(currentAlbum, '', null, 'last');
 			}
-			// This adds the home button
-			this._addHome(albumName, currentAlbum);
+
+			this._render();
 		},
 
 		/**
-		 * Clears the breadcrumbs and its tooltip
+		 * Adds the Home button
+		 *
+		 * @param {string} albumName
+		 * @param {string} currentAlbum
+		 * @private
 		 */
-		_clear: function () {
-			this.breadcrumbsElement.children().remove();
+		_addHome: function (albumName, currentAlbum) {
+			var crumbImg = {
+				imageSrc: OC.imagePath('core', 'places/home'),
+				title: albumName
+			};
+			var cssClass = 'home';
+			if (!currentAlbum) {
+				cssClass += ' last';
+			}
+
+			this._pushCrumb('', '', crumbImg, cssClass);
 		},
 
 		/**
-		 * Adds an element to the breadcrumb
+		 * Pushes crumb objects to the breadcrumbs array
 		 *
 		 * @param {string} name
-		 * @param {string|bool} link
-		 * @param img
+		 * @param {string|boolean} link
+		 * @param {Object} img
+		 * @param {string} cssClass
 		 * @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;
+		_pushCrumb: function (name, link, img, cssClass) {
+			this.breadcrumbs.push({
+				name: name,
+				dir: link,
+				link: '#' + encodeURIComponent(link),
+				img: img,
+				cssClass: cssClass
+			});
 		},
 
 		/**
-		 * Adds the Home button
+		 * Renders the full breadcrumb based on crumbs we have collected
 		 *
-		 * @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');
-			}
+		_render: function () {
+			this.breadcrumbsElement.children().remove();
+
+			var breadcrumbs = this._template({
+				crumbs: this.breadcrumbs
+			});
+
+			this.breadcrumbsElement.append(breadcrumbs);
 		},
 
 		/**
-		 * Adds all the elements located in between the home button and the last folder
+		 * Alters the breadcrumb to make it fit within the asked dimensions
 		 *
-		 * Shrinks the breadcrumb if there is not enough room
+		 * @param {int} availableWidth
 		 *
-		 * @param {Array} crumbs
 		 * @private
 		 */
-		_addCrumbs: function (crumbs) {
-			var i, crumbElement;
+		_resize: function (availableWidth) {
+			var crumbs = this.breadcrumbsElement.children();
 			var shorten = false;
 			var ellipsisPath = '';
+			var self = this;
+
+			// Hide everything first, so that we can check the width after adding each crumb
+			crumbs.hide();
 
 			// 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;
-					}
+			var crumbsElement = crumbs.get().reverse();
+			$(crumbsElement).each(function () {
+				if ($(this).hasClass('home')) {
+					$(this).show();
+					return;
 				}
-			}
-			// If we had to hide crumbs, we'll add a pay to go to the parent folder
+				if ($(this).hasClass('ellipsis')) {
+					self.ellipsis = $(this);
+					return;
+				}
+				if (!shorten) {
+					$(this).show();
+				}
+
+				// If we've reached the maximum width, we start hiding crumbs
+				if (self.breadcrumbsElement.width() > availableWidth) {
+					shorten = true;
+					$(this).hide();
+					ellipsisPath = $(this).data('dir');
+				}
+			});
+
+			// If we had to hide crumbs, we add a way to go to the parent folder
 			if (shorten) {
-				crumbElement = this._push('...', ellipsisPath);
-				crumbElement.attr('title', ellipsisPath).tooltip({
+				this.ellipsis.show();
+
+				if (!ellipsisPath) {
+					ellipsisPath = OC.dirname(this.albumPath);
+				}
+
+				this.ellipsis.children('a').attr('href', '#' + encodeURIComponent(ellipsisPath));
+				this.ellipsis.attr('data-original-title', ellipsisPath).tooltip({
 					fade: true,
 					placement: 'bottom',
 					delay: {
diff --git a/js/gallery.js b/js/gallery.js
index caea6031..c16b7062 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -11,7 +11,7 @@
 		appName: 'gallery',
 		token: undefined,
 		activeSlideShow: null,
-		buttonsWidth: 320,
+		buttonsWidth: 350,
 		browserToolbarHeight: 150,
 
 		/**
diff --git a/js/galleryview.js b/js/galleryview.js
index c57d1450..370a88e7 100644
--- a/js/galleryview.js
+++ b/js/galleryview.js
@@ -9,6 +9,7 @@
 	var View = function () {
 		this.element = $('#gallery');
 		this.loadVisibleRows.loading = false;
+		this.breadcrumb = new Gallery.Breadcrumb();
 	};
 
 	View.prototype = {
@@ -43,8 +44,8 @@
 					Gallery.showEmptyFolder();
 					this.hideButtons();
 					Gallery.currentAlbum = albumPath;
-					this.breadcrumb = new Gallery.Breadcrumb(albumPath);
-					this.breadcrumb.setMaxWidth($(window).width() - Gallery.buttonsWidth);
+					var availableWidth = $(window).width() - Gallery.buttonsWidth;
+					this.breadcrumb.init(albumPath, availableWidth);
 					Gallery.config.albumDesign = null;
 				}
 			} else {
@@ -229,7 +230,7 @@
 		},
 
 		/**
-		 * Sets up all the buttons of the interface
+		 * Sets up all the buttons of the interface and the breadcrumbs
 		 *
 		 * @param {string} albumPath
 		 * @private
@@ -238,8 +239,8 @@
 			this._shareButtonSetup(albumPath);
 			this._infoButtonSetup();
 
-			this.breadcrumb = new Gallery.Breadcrumb(albumPath);
-			this.breadcrumb.setMaxWidth($(window).width() - Gallery.buttonsWidth);
+			var availableWidth = $(window).width() - Gallery.buttonsWidth;
+			this.breadcrumb.init(albumPath, availableWidth);
 
 			$('#sort-name-button').show();
 			$('#sort-date-button').show();