Rewritten building and binding of sidebar

src/scripts/build.js

@@ -244,13 +244,11 @@ build.uploadModal = function(title, files) {
 
 }
 
-build.tags = function(tags, forView = false) {
+build.tags = function(tags) {
 
 	var html			= '',
 		editTagsHTML	= '';
 
-	if (forView===false&&lychee.publicMode===false) editTagsHTML = ' ' + build.editIcon('edit_tags');
-
 	if (tags!=='') {
 
 		tags = tags.split(',');
@@ -259,11 +257,9 @@ build.tags = function(tags, forView = false) {
 			html += `<a class='tag'>${ tag }<span data-index='${ index }'>${ build.iconic('x') }</span></a>`
 		});
 
-		html += editTagsHTML;
-
 	} else {
 
-		html = `<div class='empty'>No Tags${ editTagsHTML }</div>`;
+		html = `<div class='empty'>No Tags</div>`;
 
 	}
 
@@ -271,129 +267,6 @@ build.tags = function(tags, forView = false) {
 
 }
 
-build.sidebarPhoto = function(data, forView = false) {
-
-	var html				= '',
-		visible				= '',
-		editTitleHTML		= '',
-		editDescriptionHTML	= '',
-		exifHash			= '',
-		info				= [];
-
-	switch (data.public) {
-
-		case '0':	visible = 'No';
-					break;
-		case '1':	visible = 'Yes';
-					break;
-		case '2':	visible = 'Yes (Album)';
-					break;
-		default:	visible = '-';
-					break;
-
-	}
-
-	if (forView===false&&lychee.publicMode===false) {
-		editTitleHTML		= ' ' + build.editIcon('edit_title');
-		editDescriptionHTML	= ' ' + build.editIcon('edit_description');
-	}
-
-	infos = [
-		['', 'Basics'],
-		['Title', data.title + editTitleHTML],
-		['Uploaded', data.sysdate],
-		['Description', data.description + editDescriptionHTML],
-		['', 'Image'],
-		['Size', data.size],
-		['Format', data.type],
-		['Resolution', data.width + ' x ' + data.height],
-		['Tags', build.tags(data.tags, forView)]
-	]
-
-	exifHash = data.takestamp+data.make+data.model+data.shutter+data.aperture+data.focal+data.iso;
-
-	if (exifHash!=='0') {
-
-		infos = infos.concat([
-			['', 'Camera'],
-			['Captured', data.takedate],
-			['Make', data.make],
-			['Type/Model', data.model],
-			['Shutter Speed', data.shutter],
-			['Aperture', data.aperture],
-			['Focal Length', data.focal],
-			['ISO', data.iso]
-		]);
-
-	}
-
-	infos = infos.concat([
-		['', 'Share'],
-		['Public', visible]
-	]);
-
-	infos.forEach(function(info, i, items) {
-
-		// Set default for empty values
-		if (info[1]===''||info[1]===null||info[1]===undefined) info[1] = '-';
-
-		switch (info[0]) {
-
-			case '':
-
-				// Divider
-				html +=	`
-						</table>
-						<div class='divider'>
-							<h1>${ info[1] }</h1>
-						</div>
-						<table>
-						`
-
-				break;
-
-			case 'Tags':
-
-				// Tags
-				if (forView===false&&lychee.publicMode===false) {
-
-					html +=	`
-							</table>
-							<div class='divider'>
-								<h1>${ info[0] }</h1>
-							</div>
-							<div id='tags'>${ info[1] }</div>
-							`
-
-				}
-
-				break;
-
-			default:
-
-				// Item
-				html += `
-						<tr>
-							<td>${ info[0] }</td>
-							<td class='attr_${ info[0].toLowerCase() }'>${ info[1] }</td>
-						</tr>
-						`
-
-				break;
-
-		}
-
-
-	});
-
-	html +=	`
-			</table>
-			`
-
-	return html;
-
-}
-
 build.sidebarAlbum = function(data, forView = false) {
 
 	var html				= '',

src/scripts/sidebar.js

@@ -5,7 +5,12 @@
 
 sidebar = {
 
-	_dom: $('#sidebar')
+	_dom: $('#sidebar'),
+	types: {
+		DEFAULT: 0,
+		TAGS: 1
+	},
+	createStructure: {}
 
 }
 
@@ -19,23 +24,42 @@ sidebar.dom = function(selector) {
 sidebar.bind = function() {
 
 	// This function should be called after building and appending
-	// the sidebars content to the DOM
+	// the sidebars content to the DOM.
+	// This function can be called multiple times, therefore
+	// event handlers should be removed before binding a new one.
 
 	// Event Name
 	var eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click';
 
-	sidebar.dom('#edit_title').on(eventName, function() {
+	sidebar
+		.dom('#edit_title')
+		.off(eventName)
+		.on(eventName, function() {
 			if (visible.photo())		photo.setTitle([photo.getID()]);
 			else if (visible.album())	album.setTitle([album.getID()]);
 		});
 
-	sidebar.dom('#edit_description').on(eventName, function() {
+	sidebar
+		.dom('#edit_description')
+		.off(eventName)
+		.on(eventName, function() {
 			if (visible.photo())		photo.setDescription(photo.getID());
 			else if (visible.album())	album.setDescription(album.getID());
 		});
 
-	sidebar.dom('#edit_tags')		.on(eventName, function() { photo.editTags([photo.getID()]) });
+	sidebar
-	sidebar.dom('#tags .tag span')	.on(eventName, function() { photo.deleteTag(photo.getID(), $(this).data('index')) });
+		.dom('#edit_tags')
+		.off(eventName)
+		.on(eventName, function() {
+			photo.editTags([photo.getID()])
+		});
+
+	sidebar
+		.dom('#tags .tag span')
+		.off(eventName)
+		.on(eventName, function() {
+			photo.deleteTag(photo.getID(), $(this).data('index'))
+		});
 
 	return true;
 
@@ -69,20 +93,202 @@ sidebar.setSelectable = function(selectable = true) {
 
 }
 
-sidebar.changeAttr = function(attr, value, editable = false) {
+sidebar.changeAttr = function(attr, value = '-') {
 
 	if (attr===undefined||attr===null||attr==='') return false;
 
-	// This will add an edit-icon next to the value when editable is true.
+	// Set a default for the value
-	// The id of the edit-icon always starts with 'edit_' followed by the name of the attribute.
+	if (value===''||value===null) value = '-';
-	if (editable===true) value = value + ' ' + build.editIcon('edit_' + attr);
 
 	sidebar.dom('.attr_' + attr).html(value);
 
-	// The new edit-icon needs an event, therefore the binding function
-	// should be executed again after changing the value
-	if (editable===true) sidebar.bind();
-
 	return true;
 
 }
+
+sidebar.createStructure.photo = function(data) {
+
+	if (data===undefined||data===null||data==='') return false;
+
+	var editable	= false,
+		exifHash	= data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso,
+		structure	= {},
+		visible		= '';
+
+	// Enable editable when user logged in
+	if (lychee.publicMode===false) editable = true;
+
+	// Set value for public
+	switch (data.public) {
+
+		case '0':	visible = 'No';
+					break;
+		case '1':	visible = 'Yes';
+					break;
+		case '2':	visible = 'Yes (Album)';
+					break;
+		default:	visible = '-';
+					break;
+
+	}
+
+	structure.basics = {
+		title: 'Basics',
+		type: sidebar.types.DEFAULT,
+		rows: [
+			{ title: 'Title',		value: data.title,			editable },
+			{ title: 'Uploaded',	value: data.sysdate },
+			{ title: 'Description', value: data.description,	editable },
+		]
+	}
+
+	structure.image = {
+		title: 'Image',
+		type: sidebar.types.DEFAULT,
+		rows: [
+			{ title: 'Size',		value: data.size },
+			{ title: 'Format',		value: data.type },
+			{ title: 'Resolution',	value: data.width + ' x ' + data.height }
+		]
+	}
+
+	// Only create tags section when user logged in
+	if (lychee.publicMode===false) {
+
+		structure.tags = {
+			title: 'Tags',
+			type: sidebar.types.TAGS,
+			value: build.tags(data.tags),
+			editable
+		}
+
+	} else {
+
+		structure.tags = {}
+
+	}
+
+	// Only create EXIF section when EXIF data available
+	if (exifHash!=='0') {
+
+		structure.exif = {
+			title: 'Camera',
+			type: sidebar.types.DEFAULT,
+			rows: [
+				{ title: 'Captured',		value: data.takedate },
+				{ title: 'Make',			value: data.make },
+				{ title: 'Type/Model',		value: data.model },
+				{ title: 'Shutter Speed',	value: data.shutter },
+				{ title: 'Aperture',		value: data.aperture },
+				{ title: 'Focal Length',	value: data.focal },
+				{ title: 'ISO',				value: data.iso }
+			]
+		}
+
+	} else {
+
+		structure.exif = {}
+
+	}
+
+	structure.sharing = {
+		title: 'Sharing',
+		type: sidebar.types.DEFAULT,
+		rows: [
+			{ title: 'Public', value: visible },
+		]
+	}
+
+	// Construct all parts of the structure
+	structure = [
+		structure.basics,
+		structure.image,
+		structure.tags,
+		structure.exif,
+		structure.sharing
+	]
+
+	return structure;
+
+}
+
+sidebar.render = function(structure) {
+
+	if (structure===undefined||structure===null||structure==='') return false;
+
+	var html = '';
+
+	var renderDefault = function(section) {
+
+		let _html = '';
+
+		_html +=	`
+					<div class='divider'>
+						<h1>${ section.title }</h1>
+					</div>
+					<table>
+					`
+
+		section.rows.forEach(function(row) {
+
+			let value = row.value;
+
+			// Set a default for the value
+			if (value===''||value===null||value===undefined) value = '-';
+
+			// Wrap span-element around value for easier selecting on change
+			value = `<span class='attr_${ row.title.toLowerCase() }'>${ value }</span>`;
+
+			// Add edit-icon to the value when editable
+			if (row.editable===true) value += ' ' + build.editIcon('edit_' + row.title.toLowerCase());
+
+			_html +=	`
+						<tr>
+							<td>${ row.title }</td>
+							<td>${ value }</td>
+						</tr>
+						`
+
+		});
+
+		_html +=	`
+					</table>
+					`
+
+		return _html;
+
+	};
+
+	var renderTags = function(section) {
+
+		let _html = '';
+
+		_html +=	`
+					<div class='divider'>
+						<h1>${ section.title }</h1>
+					</div>
+					<div id='tags'>
+						<div class='attr_${ section.title.toLowerCase() }'>${ section.value }</div>
+					`
+
+		// Add edit-icon to the value when editable
+		if (section.editable===true) _html += build.editIcon('edit_tags');
+
+		_html +=	`
+					</div>
+					`
+
+		return _html;
+
+	}
+
+	structure.forEach(function(section) {
+
+		if (section.type===sidebar.types.DEFAULT)	html += renderDefault(section);
+		else if (section.type===sidebar.types.TAGS)	html += renderTags(section);
+
+	});
+
+	return html;
+
+}

src/scripts/view.js

@@ -137,7 +137,7 @@ view.album = {
 					lychee.setTitle('Unsorted', false);
 					break;
 				default:
-					if (album.json.init) sidebar.changeAttr('title', album.json.title, true);
+					if (album.json.init) sidebar.changeAttr('title', album.json.title);
 					lychee.setTitle(album.json.title, true);
 					break;
 			}
@@ -216,7 +216,7 @@ view.album = {
 
 	description: function() {
 
-		sidebar.changeAttr('description', album.json.description, true);
+		sidebar.changeAttr('description', album.json.description);
 
 	},
 
@@ -334,14 +334,14 @@ view.photo = {
 
 	title: function() {
 
-		if (photo.json.init) sidebar.changeAttr('title', photo.json.title, true);
+		if (photo.json.init) sidebar.changeAttr('title', photo.json.title);
 		lychee.setTitle(photo.json.title, true);
 
 	},
 
 	description: function() {
 
-		if (photo.json.init) sidebar.changeAttr('description', photo.json.description, true);
+		if (photo.json.init) sidebar.changeAttr('description', photo.json.description);
 
 	},
 
@@ -380,7 +380,7 @@ view.photo = {
 
 	tags: function() {
 
-		sidebar.dom('#tags').html(build.tags(photo.json.tags));
+		sidebar.changeAttr('tags', build.tags(photo.json.tags));
 		sidebar.bind();
 
 	},
@@ -418,7 +418,10 @@ view.photo = {
 
 	sidebar: function() {
 
-		sidebar.dom('.wrapper').html(build.sidebarPhoto(photo.json));
+		var structure	= sidebar.createStructure.photo(photo.json),
+			html		= sidebar.render(structure);
+
+		sidebar.dom('.wrapper').html(html);
 		sidebar.bind();
 
 	}

src/styles/_sidebar.scss

@@ -141,9 +141,13 @@
 		display: inline-block;
 	}
 
+	#tags > div {
+		display: inline-block;
+	}
+
 	#tags .empty {
 		font-size: 14px;
-		margin-bottom: 8px;
+		margin: 0 2px 8px 0;
 	}
 
 	#tags .edit { margin-top: 6px; }