Added new JS module: header

src/scripts/album.js

@@ -80,7 +80,7 @@ album.load = function(albumID, refresh) {
 
 				if (!refresh) {
 					lychee.animate('.album, .photo', 'contentZoomIn');
-					view.header.mode('album');
+					header.setMode('album');
 				}
 
 			}, waitTime);

src/scripts/albums.js

@@ -77,7 +77,7 @@ albums.load = function() {
 			if (visible.album()&&lychee.content.html()==='')			waitTime = 0;
 
 			setTimeout(function() {
-				view.header.mode('albums');
+				header.setMode('albums');
 				view.albums.init();
 				lychee.animate('.album, .photo', 'contentZoomIn');
 			}, waitTime);
@@ -86,7 +86,7 @@ albums.load = function() {
 	} else {
 
 		setTimeout(function() {
-			view.header.mode('albums');
+			header.setMode('albums');
 			view.albums.init();
 			lychee.animate('.album, .photo', 'contentZoomIn');
 		}, 300);

src/scripts/build.coffee

@@ -18,7 +18,7 @@ build.divider = (title) ->
 
 build.editIcon = (id) ->
 
-	"<div id='#{ id }' class='edit'><a class='icon-pencil'></a></div>"
+	"<div id='#{ id }' class='edit'>#{ build.iconic('pencil') }</div>"
 
 build.multiselect = (top, left) ->
 

src/scripts/header.js

@@ -0,0 +1,108 @@
+/**
+ * @description	This module takes care of the header.
+ * @copyright	2014 by Tobias Reich
+ */
+
+header = {
+
+	_dom: $('header')
+
+}
+
+header.dom = function(selector) {
+
+	if (selector===undefined||selector===null||selector==='') return header._dom;
+	return header._dom.find(selector);
+
+}
+
+header.show = function() {
+
+	var newMargin = -1*($('#imageview #image').height()/2)+20;
+
+	clearTimeout($(window).data('timeout'));
+
+	lychee.imageview.removeClass('full');
+	header.dom().removeClass('hidden');
+	lychee.loadingBar.css('opacity', 1);
+
+	// Adjust position or size of photo
+	if ($('#imageview #image.small').length>0)	$('#imageview #image').css('margin-top', newMargin);
+	else										$('#imageview #image').removeClass('full');
+
+}
+
+header.hide = function(e, delay) {
+
+	var newMargin = -1*($('#imageview #image').height()/2);
+
+	if (delay===undefined) delay = 500;
+
+	if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) {
+
+		clearTimeout($(window).data('timeout'));
+
+		$(window).data('timeout', setTimeout(function() {
+
+			lychee.imageview.addClass('full');
+			header.dom().addClass('hidden');
+			lychee.loadingBar.css('opacity', 0);
+
+			// Adjust position or size of photo
+			if ($('#imageview #image.small').length>0)	$('#imageview #image').css('margin-top', newMargin);
+			else										$('#imageview #image').addClass('full');
+
+		}, delay));
+
+	}
+
+}
+
+header.setMode = function(mode) {
+
+	var albumID = album.getID();
+
+	switch (mode) {
+
+		case 'albums':
+
+			header.dom().removeClass('view');
+			$('#tools_album, #tools_photo').hide();
+			$('#tools_albums').show();
+
+			break;
+
+		case 'album':
+
+			header.dom().removeClass('view');
+			$('#tools_albums, #tools_photo').hide();
+			$('#tools_album').show();
+
+			// Hide download button when album empty
+			album.json.content === false ? $('#button_archive').hide() : $('#button_archive').show();
+
+			// Hide download button when not logged in and album not downloadable
+			if (lychee.publicMode&&album.json.downloadable==='0') $('#button_archive').hide();
+
+			if (albumID==='s'||albumID==='f'||albumID==='r') {
+				$('#button_info_album, #button_trash_album, #button_share_album').hide();
+			} else if (albumID==='0') {
+				$('#button_info_album, #button_share_album').hide();
+				$('#button_trash_album').show();
+			} else {
+				$('#button_info_album, #button_trash_album, #button_share_album').show();
+			}
+
+			break;
+
+		case 'photo':
+
+			header.dom().addClass('view');
+			$('#tools_albums, #tools_album').hide();
+			$('#tools_photo').show();
+
+			break;
+
+	}
+
+}

src/scripts/init.js

@@ -16,40 +16,40 @@ $(document).ready(function() {
 	$(document)		.on('mouseup',		multiselect.getSelection);
 
 	/* Header */
-	lychee.header.find('#title').on(eventName, function(e) {
+	header.dom('#title').on(eventName, function(e) {
 		if (!$(this).hasClass('editable'))	return false;
 		if (visible.photo())				photo.setTitle([photo.getID()]);
 		else								contextMenu.albumTitle([album.getID()], e);
 	});
-	lychee.header.find('#button_share').on(eventName, function(e) {
+	header.dom('#button_share').on(eventName, function(e) {
 		if (photo.json.public==1||photo.json.public==2)	contextMenu.sharePhoto(photo.getID(), e);
 		else											photo.setPublic(photo.getID(), e);
 	});
-	lychee.header.find('#button_share_album').on(eventName, function(e) {
+	header.dom('#button_share_album').on(eventName, function(e) {
 		if (album.json.public==1)	contextMenu.shareAlbum(album.getID(), e);
 		else						album.setPublic(album.getID(), e);
 	});
-	lychee.header.find('#button_signin')		.on(eventName, lychee.loginDialog);
-	lychee.header.find('#button_settings')		.on(eventName, contextMenu.settings);
-	lychee.header.find('#button_info_album')	.on(eventName, view.infobox.show);
-	lychee.header.find('#button_info')			.on(eventName, view.infobox.show);
-	lychee.header.find('.button_add')			.on(eventName, contextMenu.add);
-	lychee.header.find('#button_more')			.on(eventName, function(e) { contextMenu.photoMore(photo.getID(), e) });
-	lychee.header.find('#button_move')			.on(eventName, function(e) { contextMenu.move([photo.getID()], e) });
-	lychee.header.find('#hostedwith')			.on(eventName, function() { window.open(lychee.website) });
-	lychee.header.find('#button_trash_album')	.on(eventName, function() { album.delete([album.getID()]) });
-	lychee.header.find('#button_trash')			.on(eventName, function() { photo.delete([photo.getID()]) });
-	lychee.header.find('#button_archive')		.on(eventName, function() { album.getArchive(album.getID()) });
-	lychee.header.find('#button_star')			.on(eventName, function() { photo.setStar([photo.getID()]) });
-	lychee.header.find('#button_back_home')		.on(eventName, function() { lychee.goto('') });
-	lychee.header.find('#button_back')			.on(eventName, function() { lychee.goto(album.getID()) });
+	header.dom('#button_signin')		.on(eventName, lychee.loginDialog);
+	header.dom('#button_settings')		.on(eventName, contextMenu.settings);
+	header.dom('#button_info_album')	.on(eventName, view.infobox.show);
+	header.dom('#button_info')			.on(eventName, view.infobox.show);
+	header.dom('.button_add')			.on(eventName, contextMenu.add);
+	header.dom('#button_more')			.on(eventName, function(e) { contextMenu.photoMore(photo.getID(), e) });
+	header.dom('#button_move')			.on(eventName, function(e) { contextMenu.move([photo.getID()], e) });
+	header.dom('#hostedwith')			.on(eventName, function() { window.open(lychee.website) });
+	header.dom('#button_trash_album')	.on(eventName, function() { album.delete([album.getID()]) });
+	header.dom('#button_trash')			.on(eventName, function() { photo.delete([photo.getID()]) });
+	header.dom('#button_archive')		.on(eventName, function() { album.getArchive(album.getID()) });
+	header.dom('#button_star')			.on(eventName, function() { photo.setStar([photo.getID()]) });
+	header.dom('#button_back_home')		.on(eventName, function() { lychee.goto('') });
+	header.dom('#button_back')			.on(eventName, function() { lychee.goto(album.getID()) });
 
 	/* Search */
-	lychee.header.find('#search').on('keyup click', function() { search.find($(this).val()) });
+	header.dom('#search').on('keyup click', function() { search.find($(this).val()) });
 
 	/* Clear Search */
-	lychee.header.find('#clearSearch').on(eventName, function () {
-		lychee.header.find('#search').focus();
+	header.dom('#clearSearch').on(eventName, function () {
+		header.dom('#search').focus();
 		search.reset();
 	});
 
@@ -63,10 +63,10 @@ $(document).ready(function() {
 
 	/* Infobox */
 	lychee.infobox
-		.on(eventName, '#edit_title_album',		function() { album.setTitle([album.getID()]) })
+		.on(eventName, '#edit_title_album',			function() { album.setTitle([album.getID()]) })
 		.on(eventName, '#edit_description_album',	function() { album.setDescription(album.getID()) })
 		.on(eventName, '#edit_title',				function() { photo.setTitle([photo.getID()]) })
-		.on(eventName, '#edit_description',		function() { photo.setDescription(photo.getID()) })
+		.on(eventName, '#edit_description',			function() { photo.setDescription(photo.getID()) })
 		.on(eventName, '#edit_tags',				function() { photo.editTags([photo.getID()]) })
 		.on(eventName, '#tags .tag span',			function() { photo.deleteTag(photo.getID(), $(this).data('index')) });
 
@@ -77,10 +77,10 @@ $(document).ready(function() {
 		.bind(['u', 'ctrl+u'],	function() { $('#upload_files').click() })
 		.bind(['s', 'ctrl+s', 'f', 'ctrl+f'], function(e) {
 			if (visible.photo()) {
-				lychee.header.find('#button_star').click();
+				header.dom('#button_star').click();
 			} else if (visible.albums()) {
 				e.preventDefault();
-				lychee.header.find('#search').focus();
+				header.dom('#search').focus();
 			}
 		})
 		.bind(['r', 'ctrl+r'], function(e) {
@@ -135,8 +135,8 @@ $(document).ready(function() {
 			/* Fullscreen on mobile */
 			.on('touchend', '#image', function(e) {
 				if (swipe.obj===null||(swipe.offset>=-5&&swipe.offset<=5)) {
-					if (visible.controls())	view.header.hide(e, 0);
-					else					view.header.show();
+					if (visible.controls())	header.hide(e, 0);
+					else					header.show();
 				}
 			})
 

src/scripts/loadingBar.js

@@ -21,7 +21,7 @@ loadingBar.show = function(status, errorText) {
 		if (!errorText)	errorText = 'Whoops, it looks like something went wrong. Please reload the site and try again!';
 
 		// Move header down
-		if (visible.controls()) lychee.header.addClass('error');
+		if (visible.controls()) header.dom().addClass('error');
 
 		// Modify loading
 		lychee.loadingBar
@@ -49,7 +49,7 @@ loadingBar.show = function(status, errorText) {
 		lychee.loadingBar.data('timeout', setTimeout(function() {
 
 			// Move header down
-			if (visible.controls()) lychee.header.addClass('loading');
+			if (visible.controls()) header.dom().addClass('loading');
 
 			// Modify loading
 			lychee.loadingBar
@@ -73,7 +73,7 @@ loadingBar.hide = function(force) {
 		loadingBar.status = null;
 
 		// Move header up
-		if (visible.controls()) lychee.header.removeClass('error loading');
+		if (visible.controls()) header.dom().removeClass('error loading');
 
 		// Modify loading
 		lychee.loadingBar

src/scripts/lychee.js

@@ -27,7 +27,6 @@ lychee = {
 	dropboxKey:		'',
 
 	loadingBar:		$('#loading'),
-	header:			$('header'),
 	content:		$('#content'),
 	imageview:		$('#imageview'),
 	infobox:		$('#infobox')
@@ -52,7 +51,7 @@ lychee.init = function() {
 
 		// No configuration
 		if (data==='Warning: No configuration!') {
-			lychee.header.hide();
+			header.dom().hide();
 			lychee.content.hide();
 			$('body').append(build.no_content('cog'));
 			settings.createConfig();
@@ -250,7 +249,7 @@ lychee.getUpdate = function() {
 
 lychee.setTitle = function(title, editable) {
 
-	var $title = lychee.header.find('#title');
+	var $title = header.dom('#title');
 
 	document.title = lychee.title + ' - ' + title;
 
@@ -286,7 +285,7 @@ lychee.setMode = function(mode) {
 
 	if (mode==='public') {
 
-		$('header #button_signin, header #hostedwith').show();
+		header.dom('#button_signin, #hostedwith').show();
 		lychee.publicMode = true;
 
 	} else if (mode==='view') {

src/scripts/view.js

@@ -5,101 +5,6 @@
 
 view = {}
 
-view.header = {
-
-	show: function() {
-
-		var newMargin = -1*($('#imageview #image').height()/2)+20;
-
-		clearTimeout($(window).data('timeout'));
-
-		lychee.imageview.removeClass('full');
-		lychee.header.removeClass('hidden');
-		lychee.loadingBar.css('opacity', 1);
-
-		// Adjust position or size of photo
-		if ($('#imageview #image.small').length>0)	$('#imageview #image').css('margin-top', newMargin);
-		else										$('#imageview #image').removeClass('full');
-
-	},
-
-	hide: function(e, delay) {
-
-		var newMargin = -1*($('#imageview #image').height()/2);
-
-		if (delay===undefined) delay = 500;
-
-		if (visible.photo()&&!visible.infobox()&&!visible.contextMenu()&&!visible.message()) {
-
-			clearTimeout($(window).data('timeout'));
-
-			$(window).data('timeout', setTimeout(function() {
-
-				lychee.imageview.addClass('full');
-				lychee.header.addClass('hidden');
-				lychee.loadingBar.css('opacity', 0);
-
-				// Adjust position or size of photo
-				if ($('#imageview #image.small').length>0)	$('#imageview #image').css('margin-top', newMargin);
-				else										$('#imageview #image').addClass('full');
-
-			}, delay));
-
-		}
-
-	},
-
-	mode: function(mode) {
-
-		var albumID = album.getID();
-
-		switch (mode) {
-
-			case 'albums':
-
-				lychee.header.removeClass('view');
-				$('#tools_album, #tools_photo').hide();
-				$('#tools_albums').show();
-
-				break;
-
-			case 'album':
-
-				lychee.header.removeClass('view');
-				$('#tools_albums, #tools_photo').hide();
-				$('#tools_album').show();
-
-				// Hide download button when album empty
-				album.json.content === false ? $('#button_archive').hide() : $('#button_archive').show();
-
-				// Hide download button when not logged in and album not downloadable
-				if (lychee.publicMode&&album.json.downloadable==='0') $('#button_archive').hide();
-
-				if (albumID==='s'||albumID==='f'||albumID==='r') {
-					$('#button_info_album, #button_trash_album, #button_share_album').hide();
-				} else if (albumID==='0') {
-					$('#button_info_album, #button_share_album').hide();
-					$('#button_trash_album').show();
-				} else {
-					$('#button_info_album, #button_trash_album, #button_share_album').show();
-				}
-
-				break;
-
-			case 'photo':
-
-				lychee.header.addClass('view');
-				$('#tools_albums, #tools_album').hide();
-				$('#tools_photo').show();
-
-				break;
-
-		}
-
-	}
-
-}
-
 view.infobox = {
 
 	show: function() {
@@ -393,15 +298,15 @@ view.photo = {
 
 		// Change header
 		lychee.content.addClass('view');
-		view.header.mode('photo');
+		header.setMode('photo');
 
 		// Make body not scrollable
 		$('body').css('overflow', 'hidden');
 
 		// Fullscreen
 		$(document)
-			.bind('mouseenter', view.header.show)
-			.bind('mouseleave', view.header.hide);
+			.bind('mouseenter', header.show)
+			.bind('mouseleave', header.hide);
 
 		lychee.animate(lychee.imageview, 'fadeIn');
 
@@ -409,11 +314,11 @@ view.photo = {
 
 	hide: function() {
 
-		view.header.show();
+		header.show();
 		if (visible.infobox) view.infobox.hide();
 
 		lychee.content.removeClass('view');
-		view.header.mode('album');
+		header.setMode('album');
 
 		// Make body scrollable
 		$('body').css('overflow', 'auto');

src/styles/_infobox.scss

@@ -36,11 +36,18 @@
 	}
 
 	.edit {
-		display: inline;
+		display: inline-block;
 		margin-left: 3px;
-		width: 20px;
-		height: 5px;
+		width: 10px;
 		cursor: pointer;
+
+		.iconic {
+			fill: white(.5);
+			filter: drop-shadow(0 -1px 0 black(.2));
+			transition: fill .2s ease-out;
+		}
+
+		&:hover .iconic { fill: white(1); }
 	}
 
 	.bumper {
@@ -82,7 +89,6 @@
 		}
 
 		&:hover .iconic { fill: #fff; }
-
 	}
 
 	/* Divider ------------------------------------------------*/
@@ -135,13 +141,9 @@
 		margin-bottom: 8px;
 	}
 
-	#tags .edit {
-		display: inline-block;
-	}
+	#tags .edit { margin-top: 6px; }
 
-	#tags .empty .edit {
-		display: inline;
-	}
+	#tags .empty .edit { margin-top: 0; }
 
 	#tags .tag {
 		float: left;