From bcad26a8d1903a9fe1f271f31468751c5aecdc43 Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Thu, 9 Jul 2015 14:33:34 +0200
Subject: [PATCH] Code adjustments and small performance improvements

---
 src/scripts/multiselect.js | 250 +++++++++++++++-------------
 src/scripts/sidebar.js     | 330 ++++++++++++++++++-------------------
 2 files changed, 297 insertions(+), 283 deletions(-)

diff --git a/src/scripts/multiselect.js b/src/scripts/multiselect.js
index 30afe41..37a85c2 100644
--- a/src/scripts/multiselect.js
+++ b/src/scripts/multiselect.js
@@ -1,217 +1,231 @@
 /**
- * @description	Select multiple albums or photos.
- * @copyright	2015 by Tobias Reich
+ * @description Select multiple albums or photos.
+ * @copyright   2015 by Tobias Reich
  */
 
 multiselect = {}
 
 multiselect.position = {
 
-	top:	null,
-	right:	null,
-	bottom:	null,
-	left:	null
+	top    : null,
+	right  : null,
+	bottom : null,
+	left   : null
 
 }
 
 multiselect.bind = function() {
 
-	$('#content')	.on('mousedown', 	function(e) { if (e.which===1) multiselect.show(e) });
-	$(document)		.on('mouseup',		function(e) { if (e.which===1) multiselect.getSelection(e) });
+	$('#content') .on('mousedown', (e) => { if (e.which===1) multiselect.show(e) })
+	$(document)   .on('mouseup',   (e) => { if (e.which===1) multiselect.getSelection(e) })
 
-	return true;
+	return true
 
 }
 
 multiselect.show = function(e) {
 
-	if (lychee.publicMode)	return false;
-	if (visible.search())	return false;
-	if (!visible.albums()&&!visible.album)			return false;
-	if ($('.album:hover, .photo:hover').length!==0)	return false;
-	if (visible.multiselect())						$('#multiselect').remove();
+	if (lychee.publicMode)                          return false
+	if (visible.search())                           return false
+	if (!visible.albums() && !visible.album)        return false
+	if ($('.album:hover, .photo:hover').length!==0) return false
+	if (visible.multiselect())                      $('#multiselect').remove()
 
-	sidebar.setSelectable(false);
+	sidebar.setSelectable(false)
 
-	multiselect.position.top	= e.pageY;
-	multiselect.position.right	= -1 * (e.pageX - $(document).width());
-	multiselect.position.bottom	= -1 * (multiselect.position.top - $(window).height());
-	multiselect.position.left	= e.pageX;
+	multiselect.position.top    = e.pageY
+	multiselect.position.right  = -1 * (e.pageX - $(document).width())
+	multiselect.position.bottom = -1 * (multiselect.position.top - $(window).height())
+	multiselect.position.left   = e.pageX
 
-	$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left));
-	$(document).on('mousemove', multiselect.resize);
+	$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left))
+	$(document).on('mousemove', multiselect.resize)
 
 }
 
 multiselect.selectAll = function() {
 
-	var e,
-		newWidth,
-		newHeight;
+	if (lychee.publicMode)                   return false
+	if (visible.search())                    return false
+	if (!visible.albums() && !visible.album) return false
+	if (visible.multiselect())               $('#multiselect').remove()
 
-	if (lychee.publicMode)		return false;
-	if (visible.search())		return false;
-	if (!visible.albums()&&!visible.album)	return false;
-	if (visible.multiselect())	$('#multiselect').remove();
+	sidebar.setSelectable(false)
 
-	sidebar.setSelectable(false);
+	multiselect.position.top    = 70
+	multiselect.position.right  = 40
+	multiselect.position.bottom = 90
+	multiselect.position.left   = 20
 
-	multiselect.position.top	= 70;
-	multiselect.position.right	= 40;
-	multiselect.position.bottom	= 90;
-	multiselect.position.left	= 20;
+	$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left))
 
-	$('body').append(build.multiselect(multiselect.position.top, multiselect.position.left));
+	let documentSize = {
+		width  : $(document).width(),
+		height : $(document).height()
+	}
 
-	newWidth	= $(document).width() - multiselect.position.right + 2;
-	newHeight	= $(document).height() - multiselect.position.bottom;
+	let newSize = {
+		width  : documentSize.width - multiselect.position.right + 2,
+		height : documentSize.height - multiselect.position.bottom
+	}
 
-	$('#multiselect').css({
-		width: newWidth,
-		height: newHeight
-	});
+	let e = {
+		pageX : documentSize.width - (multiselect.position.right / 2),
+		pageY : documentSize.height - multiselect.position.bottom
+	}
 
-	e = {
-		pageX: $(document).width() - (multiselect.position.right / 2),
-		pageY: $(document).height() - multiselect.position.bottom
-	};
+	$('#multiselect').css(newSize)
 
-	multiselect.getSelection(e);
+	multiselect.getSelection(e)
 
 }
 
 multiselect.resize = function(e) {
 
-	var mouse_x = e.pageX,
-		mouse_y = e.pageY,
-		newHeight,
-		newWidth;
+	if (multiselect.position.top    === null ||
+	    multiselect.position.right  === null ||
+	    multiselect.position.bottom === null ||
+	    multiselect.position.left   === null) return false
 
-	if (multiselect.position.top===null||
-		multiselect.position.right===null||
-		multiselect.position.bottom===null||
-		multiselect.position.left===null) return false;
+	let newSize      = {},
+	    documentSize = {}
 
-	if (mouse_y>=multiselect.position.top) {
+	// Get the position of the mouse
+	let mousePos = {
+		x : e.pageX,
+		y : e.pageY
+	}
+
+	// Default CSS
+	let newCSS = {
+		top    : null,
+		bottom : null,
+		height : null,
+		left   : null,
+		right  : null,
+		width  : null
+	}
+
+	if (mousePos.y>=multiselect.position.top) {
+
+		documentSize.height = $(document).height()
 
 		// Do not leave the screen
-		newHeight = mouse_y - multiselect.position.top;
-		if ((multiselect.position.top+newHeight)>=$(document).height())
-			newHeight -= (multiselect.position.top + newHeight) - $(document).height() + 2;
+		newSize.height = mousePos.y - multiselect.position.top
+		if ((multiselect.position.top+newSize.height)>=documentSize.height) {
+			newSize.height -= (multiselect.position.top + newSize.height) - documentSize.height + 2
+		}
 
-		$('#multiselect').css({
-			top:	multiselect.position.top,
-			bottom:	'inherit',
-			height:	newHeight
-		});
+		newCSS.top    = multiselect.position.top
+		newCSS.bottom = 'inherit'
+		newCSS.height = newSize.height
 
 	} else {
 
-		$('#multiselect').css({
-			top:	'inherit',
-			bottom:	multiselect.position.bottom,
-			height:	multiselect.position.top - e.pageY
-		});
+		newCSS.top    = 'inherit'
+		newCSS.bottom = multiselect.position.bottom
+		newCSS.height = multiselect.position.top - e.pageY
 
 	}
 
-	if (mouse_x>=multiselect.position.left) {
+	if (mousePos.x>=multiselect.position.left) {
+
+		documentSize.width = $(document).width()
 
 		// Do not leave the screen
-		newWidth = mouse_x - multiselect.position.left;
-		if ((multiselect.position.left+newWidth)>=$(document).width())
-			newWidth -= (multiselect.position.left + newWidth) - $(document).width() + 2;
+		newSize.width = mousePos.x - multiselect.position.left
+		if ((multiselect.position.left+newSize.width)>=documentSize.width) {
+			newSize.width -= (multiselect.position.left + newSize.width) - documentSize.width + 2
+		}
 
-		$('#multiselect').css({
-			right:	'inherit',
-			left:	multiselect.position.left,
-			width:	newWidth
-		});
+		newCSS.right = 'inherit'
+		newCSS.left  = multiselect.position.left
+		newCSS.width = newSize.width
 
 	} else {
 
-		$('#multiselect').css({
-			right:	multiselect.position.right,
-			left:	'inherit',
-			width:	multiselect.position.left - e.pageX
-		});
+		newCSS.right = multiselect.position.right
+		newCSS.left  = 'inherit'
+		newCSS.width = multiselect.position.left - e.pageX
 
 	}
 
+	// Updated all CSS properties at once
+	$('#multiselect').css(newCSS)
+
 }
 
 multiselect.stopResize = function() {
 
-	$(document).off('mousemove');
+	$(document).off('mousemove')
 
 }
 
 multiselect.getSize = function() {
 
-	if (!visible.multiselect()) return false;
+	if (!visible.multiselect()) return false
+
+	let $elem  = $('#multiselect'),
+	    offset = $elem.offset()
 
 	return {
-		top:	$('#multiselect').offset().top,
-		left:	$('#multiselect').offset().left,
-		width:	parseInt($('#multiselect').css('width').replace('px', '')),
-		height:	parseInt($('#multiselect').css('height').replace('px', ''))
-	};
+		top    : offset.top,
+		left   : offset.left,
+		width  : parseInt($elem.css('width').replace('px', '')),
+		height : parseInt($elem.css('height').replace('px', ''))
+	}
 
 }
 
 multiselect.getSelection = function(e) {
 
-	var tolerance = 150,
-		id,
-		ids = [],
-		offset,
-		size = multiselect.getSize();
+	let tolerance = 150,
+	    ids       = [],
+	    size      = multiselect.getSize()
 
-	if (visible.contextMenu()) return false;
-	if (!visible.multiselect()) return false;
+	if (visible.contextMenu())  return false
+	if (!visible.multiselect()) return false
 
 	$('.photo, .album').each(function() {
 
-		offset = $(this).offset();
+		let offset = $(this).offset()
 
-		if (offset.top>=(size.top-tolerance)&&
-			offset.left>=(size.left-tolerance)&&
-			(offset.top+206)<=(size.top+size.height+tolerance)&&
+		if (offset.top>=(size.top-tolerance) &&
+			offset.left>=(size.left-tolerance) &&
+			(offset.top+206)<=(size.top+size.height+tolerance) &&
 			(offset.left+206)<=(size.left+size.width+tolerance)) {
 
-				id = $(this).data('id');
+				let id = $(this).data('id')
 
-				if (id!=='0'&&id!==0&&id!=='f'&&id!=='s'&&id!=='r'&&id!==null&&id!==undefined) {
+				if (id!=='0' && id!==0 && id!=='f' && id!=='s' && id!=='r' && id!==null) {
 
-					ids.push(id);
-					$(this).addClass('active');
+					ids.push(id)
+					$(this).addClass('active')
 
 				}
 
-			}
+		}
 
-	});
+	})
 
-	if (ids.length!==0&&visible.album()) contextMenu.photoMulti(ids, e);
-	else if (ids.length!==0&&visible.albums()) contextMenu.albumMulti(ids, e);
-	else multiselect.close();
+	if (ids.length!==0 && visible.album())       contextMenu.photoMulti(ids, e)
+	else if (ids.length!==0 && visible.albums()) contextMenu.albumMulti(ids, e)
+	else                                         multiselect.close()
 
 }
 
 multiselect.close = function() {
 
-	sidebar.setSelectable(true);
+	sidebar.setSelectable(true)
 
-	multiselect.stopResize();
+	multiselect.stopResize()
 
-	multiselect.position.top	= null;
-	multiselect.position.right	= null;
-	multiselect.position.bottom	= null;
-	multiselect.position.left	= null;
+	multiselect.position.top    = null
+	multiselect.position.right  = null
+	multiselect.position.bottom = null
+	multiselect.position.left   = null
 
-	lychee.animate('#multiselect', 'fadeOut');
-	setTimeout(function() {
-		$('#multiselect').remove();
-	}, 300);
+	lychee.animate('#multiselect', 'fadeOut')
+	setTimeout(() => $('#multiselect').remove(), 300)
 
 }
\ No newline at end of file
diff --git a/src/scripts/sidebar.js b/src/scripts/sidebar.js
index e2ca668..0f66b28 100644
--- a/src/scripts/sidebar.js
+++ b/src/scripts/sidebar.js
@@ -7,8 +7,8 @@ sidebar = {
 
 	_dom: $('#sidebar'),
 	types: {
-		DEFAULT: 0,
-		TAGS: 1
+		DEFAULT : 0,
+		TAGS    : 1
 	},
 	createStructure: {}
 
@@ -16,8 +16,9 @@ sidebar = {
 
 sidebar.dom = function(selector) {
 
-	if (selector===undefined||selector===null||selector==='') return sidebar._dom;
-	return sidebar._dom.find(selector);
+	if (selector==null || selector==='') return sidebar._dom
+
+	return sidebar._dom.find(selector)
 
 }
 
@@ -29,56 +30,55 @@ sidebar.bind = function() {
 	// event handlers should be removed before binding a new one.
 
 	// Event Name
-	var eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click';
+	let eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click'
 
 	sidebar
 		.dom('#edit_title')
 		.off(eventName)
 		.on(eventName, function() {
-			if (visible.photo())		photo.setTitle([photo.getID()]);
-			else if (visible.album())	album.setTitle([album.getID()]);
-		});
+			if (visible.photo())      photo.setTitle([photo.getID()])
+			else if (visible.album()) album.setTitle([album.getID()])
+		})
 
 	sidebar
 		.dom('#edit_description')
 		.off(eventName)
 		.on(eventName, function() {
-			if (visible.photo())		photo.setDescription(photo.getID());
-			else if (visible.album())	album.setDescription(album.getID());
-		});
+			if (visible.photo())      photo.setDescription(photo.getID())
+			else if (visible.album()) album.setDescription(album.getID())
+		})
 
 	sidebar
 		.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;
+	return true
 
 }
 
 sidebar.toggle = function() {
 
-	if (visible.sidebar()||
-		visible.sidebarbutton()) {
+	if (visible.sidebar() || visible.sidebarbutton()) {
 
-			header.dom('.button--info').toggleClass('active');
-			lychee.content.toggleClass('sidebar');
-			sidebar.dom().toggleClass('active');
+		header.dom('.button--info').toggleClass('active')
+		lychee.content.toggleClass('sidebar')
+		sidebar.dom().toggleClass('active')
 
-			return true;
+		return true
 
 	}
 
-	return false;
+	return false
 
 }
 
@@ -88,67 +88,67 @@ sidebar.setSelectable = function(selectable = true) {
 	// Selection needs to be deactivated to prevent an unwanted selection
 	// while using multiselect.
 
-	if (selectable===true)	sidebar.dom().removeClass('notSelectable');
-	else					sidebar.dom().addClass('notSelectable');
+	if (selectable===true) sidebar.dom().removeClass('notSelectable')
+	else                   sidebar.dom().addClass('notSelectable')
 
 }
 
 sidebar.changeAttr = function(attr, value = '-') {
 
-	if (attr===undefined||attr===null||attr==='') return false;
+	if (attr==null || attr==='') return false
 
 	// Set a default for the value
-	if (value===''||value===null) value = '-';
+	if (value==null || value==='') value = '-'
 
-	sidebar.dom('.attr_' + attr).html(value);
+	sidebar.dom('.attr_' + attr).html(value)
 
-	return true;
+	return true
 
 }
 
 sidebar.createStructure.photo = function(data) {
 
-	if (data===undefined||data===null||data==='') return false;
+	if (data==null || data==='') return false
 
-	var editable	= false,
-		exifHash	= data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso,
-		structure	= {},
-		_public		= '';
+	let editable  = false,
+	    exifHash  = data.takestamp + data.make + data.model + data.shutter + data.aperture + data.focal + data.iso,
+	    structure = {},
+	    _public   = ''
 
 	// Enable editable when user logged in
-	if (lychee.publicMode===false) editable = true;
+	if (lychee.publicMode===false) editable = true
 
 	// Set value for public
 	switch (data.public) {
 
-		case '0':	_public = 'No';
-					break;
-		case '1':	_public = 'Yes';
-					break;
-		case '2':	_public = 'Yes (Album)';
-					break;
-		default:	_public = '-';
-					break;
+		case '0' : _public = 'No'
+		           break
+		case '1' : _public = 'Yes'
+		           break
+		case '2' : _public = 'Yes (Album)'
+		           break
+		default :  _public = '-'
+		           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 },
+		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 }
+		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 }
 		]
 	}
 
@@ -156,9 +156,9 @@ sidebar.createStructure.photo = function(data) {
 	if (lychee.publicMode===false) {
 
 		structure.tags = {
-			title: 'Tags',
-			type: sidebar.types.TAGS,
-			value: build.tags(data.tags),
+			title : 'Tags',
+			type  : sidebar.types.TAGS,
+			value : build.tags(data.tags),
 			editable
 		}
 
@@ -172,16 +172,16 @@ sidebar.createStructure.photo = function(data) {
 	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 }
+			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 }
 			]
 		}
 
@@ -192,10 +192,10 @@ sidebar.createStructure.photo = function(data) {
 	}
 
 	structure.sharing = {
-		title: 'Sharing',
-		type: sidebar.types.DEFAULT,
-		rows: [
-			{ title: 'Public', value: _public },
+		title : 'Sharing',
+		type  : sidebar.types.DEFAULT,
+		rows  : [
+			{ title: 'Public', value: _public }
 		]
 	}
 
@@ -208,98 +208,98 @@ sidebar.createStructure.photo = function(data) {
 		structure.sharing
 	]
 
-	return structure;
+	return structure
 
 }
 
 sidebar.createStructure.album = function(data) {
 
-	if (data===undefined||data===null||data==='') return false;
+	if (data==null || data==='') return false
 
-	var editable		= false,
-		structure		= {},
-		_public			= '',
-		visible			= '',
-		downloadable	= '',
-		password		= '';
+	let editable     = false,
+	    structure    = {},
+	    _public      = '',
+	    visible      = '',
+	    downloadable = '',
+	    password     = ''
 
 	// Enable editable when user logged in
-	if (lychee.publicMode===false) editable = true;
+	if (lychee.publicMode===false) editable = true
 
 	// Set value for public
 	switch (data.public) {
 
-		case '0':	_public = 'No';
-					break;
-		case '1':	_public = 'Yes';
-					break;
-		default:	_public = '-';
-					break;
+		case '0' : _public = 'No'
+		           break
+		case '1' : _public = 'Yes'
+		           break
+		default  : _public = '-'
+		           break
 
 	}
 
 	// Set value for visible
 	switch (data.visible) {
 
-		case '0':	visible = 'No';
-					break;
-		case '1':	visible = 'Yes';
-					break;
-		default:	visible = '-';
-					break;
+		case '0' : visible = 'No'
+		           break
+		case '1' : visible = 'Yes'
+		           break
+		default  : visible = '-'
+		           break
 
 	}
 
 	// Set value for downloadable
 	switch (data.downloadable) {
 
-		case '0':	downloadable = 'No';
-					break;
-		case '1':	downloadable = 'Yes';
-					break;
-		default:	downloadable = '-';
-					break;
+		case '0' : downloadable = 'No'
+		           break
+		case '1' : downloadable = 'Yes'
+		           break
+		default  : downloadable = '-'
+		           break
 
 	}
 
 	// Set value for password
 	switch (data.password) {
 
-		case '0':	password = 'No';
-					break;
-		case '1':	password = 'Yes';
-					break;
-		default:	password = '-';
-					break;
+		case '0' : password = 'No'
+		           break
+		case '1' : password = 'Yes'
+		           break
+		default  : password = '-'
+		           break
 
 	}
 
 	structure.basics = {
-		title: 'Basics',
-		type: sidebar.types.DEFAULT,
-		rows: [
-			{ title: 'Title',		value: data.title,			editable },
-			{ title: 'Description', value: data.description,	editable }
+		title : 'Basics',
+		type  : sidebar.types.DEFAULT,
+		rows  : [
+			{ title: 'Title',       value: data.title,       editable },
+			{ title: 'Description', value: data.description, editable }
 		]
 	}
 
 	structure.album = {
-		title: 'Album',
-		type: sidebar.types.DEFAULT,
-		rows: [
-			{ title: 'Created',		value: data.sysdate },
-			{ title: 'Images',		value: data.num }
+		title : 'Album',
+		type  : sidebar.types.DEFAULT,
+		rows  : [
+			{ title: 'Created', value: data.sysdate },
+			{ title: 'Images',  value: data.num }
 		]
 	}
 
 	structure.share = {
-		title: 'Share',
-		type: sidebar.types.DEFAULT,
-		rows: [
-			{ title: 'Public',			value: _public },
-			{ title: 'Visible',			value: visible },
-			{ title: 'Downloadable',	value: downloadable },
-			{ title: 'Password',		value: password }
+		title : 'Share',
+		type  : sidebar.types.DEFAULT,
+		rows  : [
+			{ title: 'Public',       value: _public },
+			{ title: 'Visible',      value: visible },
+			{ title: 'Downloadable', value: downloadable },
+			{ title: 'Password',     value: password }
 		]
 	}
 
@@ -310,87 +310,87 @@ sidebar.createStructure.album = function(data) {
 		structure.share
 	]
 
-	return structure;
+	return structure
 
 }
 
 sidebar.render = function(structure) {
 
-	if (structure===undefined||structure===null||structure==='') return false;
+	if (structure==null || structure==='') return false
 
-	var html = '';
+	let html = ''
 
-	var renderDefault = function(section) {
+	let renderDefault = function(section) {
 
-		let _html = '';
+		let _html = ''
 
-		_html +=	`
-					<div class='divider'>
-						<h1>${ section.title }</h1>
-					</div>
-					<table>
-					`
+		_html += `
+		         <div class='divider'>
+		             <h1>${ section.title }</h1>
+		         </div>
+		         <table>
+		         `
 
 		section.rows.forEach(function(row) {
 
-			let value = row.value;
+			let value = row.value
 
 			// Set a default for the value
-			if (value===''||value===null||value===undefined) value = '-';
+			if (value==='' || value==null) value = '-'
 
 			// Wrap span-element around value for easier selecting on change
-			value = `<span class='attr_${ row.title.toLowerCase() }'>${ value }</span>`;
+			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());
+			if (row.editable===true) value += ' ' + build.editIcon('edit_' + row.title.toLowerCase())
 
-			_html +=	`
-						<tr>
-							<td>${ row.title }</td>
-							<td>${ value }</td>
-						</tr>
-						`
+			_html += `
+			         <tr>
+			             <td>${ row.title }</td>
+			             <td>${ value }</td>
+			         </tr>
+			         `
 
-		});
+		})
 
-		_html +=	`
-					</table>
-					`
+		_html += `
+		         </table>
+		         `
 
-		return _html;
+		return _html
 
-	};
+	}
 
-	var renderTags = function(section) {
+	let renderTags = function(section) {
 
-		let _html = '';
+		let _html = ''
 
-		_html +=	`
-					<div class='divider'>
-						<h1>${ section.title }</h1>
-					</div>
-					<div id='tags'>
-						<div class='attr_${ section.title.toLowerCase() }'>${ section.value }</div>
-					`
+		_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');
+		if (section.editable===true) _html += build.editIcon('edit_tags')
 
-		_html +=	`
-					</div>
-					`
+		_html += `
+		         </div>
+		         `
 
-		return _html;
+		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);
+		if (section.type===sidebar.types.DEFAULT)   html += renderDefault(section)
+		else if (section.type===sidebar.types.TAGS) html += renderTags(section)
 
-	});
+	})
 
-	return html;
+	return html
 
 }
\ No newline at end of file