Fixed view.php

index.html

@@ -123,8 +123,7 @@
 		<div class='header'>
 			<h1>About</h1>
 		</div>
-		<div class='wrapper'>
+		<div class='wrapper'></div>
-		</div>
 	</div>
 
 	<!-- Upload -->

src/gulpfile.js

@@ -14,14 +14,25 @@ var catchError = function(err) {
 /* View ----------------------------------------- */
 
 paths.view = {
+	php: [
+		'../view.php'
+	],
 	js: [
-		'../src/scripts/_gup.js',
+		'./scripts/_gup.js',
-		'../src/scripts/build.js',
+		'./scripts/build.js',
-		'../src/scripts/view/main.js'
+		'./scripts/api.js',
+		'./scripts/header.js',
+		'./scripts/visible.js',
+		'./scripts/sidebar.js',
+		'./scripts/view/main.js'
 	],
 	scripts: [
 		'bower_components/jQuery/dist/jquery.min.js',
 		'../dist/_view--javascript.js'
+	],
+	svg: [
+		'./images/iconic.svg',
+		'./images/ionicons.svg'
 	]
 }
 
@@ -51,6 +62,18 @@ gulp.task('view--scripts', ['view--js'], function() {
 
 });
 
+gulp.task('view--svg', function() {
+
+	var stream =
+		gulp.src(paths.view.php)
+			.pipe(plugins.inject(gulp.src(paths.view.svg), {
+				starttag: '<!-- inject:svg -->',
+				transform: function(filePath, file) { return file.contents.toString('utf8') }
+			}))
+			.pipe(gulp.dest('../'));
+
+ });
+
 /* Main ----------------------------------------- */
 
 paths.main = {
@@ -58,7 +81,7 @@ paths.main = {
 		'../index.html'
 	],
 	js: [
-		'../src/scripts/*.js'
+		'./scripts/*.js'
 	],
 	scripts: [
 		'bower_components/jQuery/dist/jquery.min.js',
@@ -69,12 +92,12 @@ paths.main = {
 		'../dist/_main--javascript.js'
 	],
 	scss: [
-		'../src/styles/*.scss'
+		'./styles/*.scss'
 	],
 	styles: [
 		'bower_components/basicContext/src/styles/main.scss',
 		'bower_components/basicModal/src/styles/main.scss',
-		'../src/styles/main.scss'
+		'./styles/main.scss'
 	],
 	svg: [
 		'./images/iconic.svg',
@@ -150,7 +173,7 @@ gulp.task('clean', function() {
 
 /* Tasks ----------------------------------------- */
 
-gulp.task('default', ['view--scripts', 'main--svg', 'main--scripts', 'main--styles'], function() {
+gulp.task('default', ['view--svg', 'view--scripts', 'main--svg', 'main--scripts', 'main--styles'], function() {
 
 	gulp.start('clean');
 

src/scripts/api.js

@@ -5,7 +5,8 @@
 
 api = {
 
-	path: 'php/api.php'
+	path:		'php/api.php',
+	onError:	null
 
 }
 
@@ -25,7 +26,7 @@ api.post = function(fn, params, callback) {
 		// Catch errors
 		if (typeof data==='string'&&
 			data.substring(0, 7)==='Error: ') {
-				lychee.error(data.substring(7, data.length), params, data);
+				api.onError(data.substring(7, data.length), params, data);
 				return false;
 		}
 
@@ -47,7 +48,7 @@ api.post = function(fn, params, callback) {
 
 	error = function(jqXHR, textStatus, errorThrown) {
 
-		lychee.error('Server error or API not found.', params, errorThrown);
+		api.onError('Server error or API not found.', params, errorThrown);
 
 	}
 

src/scripts/init.js

@@ -8,6 +8,9 @@ $(document).ready(function() {
 	/* Event Name */
 	var eventName = ('ontouchend' in document.documentElement) ? 'touchend' : 'click';
 
+	/* Set API error handler */
+	api.onError = lychee.error;
+
 	/* Multiselect */
 	multiselect.bind();
 

src/scripts/view/main.js

@@ -3,28 +3,24 @@
  * @copyright	2015 by Tobias Reich
  */
 
-var header		= $('header'),
+var lychee		= { content: $('#content') },
-	headerTitle	= $('#title'),
+	loadingBar	= { show() {}, hide() {} }
-	imageview	= $('#imageview'),
+	imageview	= $('#imageview');
-	api_path	= 'php/api.php',
-	infobox		= $('#infobox');
 
-$(document).ready(function(){
+$(document).ready(function() {
 
 	/* Event Name */
 	if ('ontouchend' in document.documentElement)	eventName = 'touchend';
 	else											eventName = 'click';
 
-	/* Window */
+	/* Set API error handler */
-	$(window).keydown(key);
+	api.onError = error;
 
 	/* Infobox */
-	infobox.find('.header .close').on(eventName, hideInfobox);
+	header.dom('#button_info').on(eventName, sidebar.toggle);
-	$(document)			.on(eventName, '#infobox_overlay', hideInfobox);
-	$('#button_info')	.on(eventName, showInfobox);
 
 	/* Direct Link */
-	$('#button_direct').on(eventName, function() {
+	header.dom('#button_direct').on(eventName, function() {
 
 		var link = $('#imageview #image').css('background-image').replace(/"/g,'').replace(/url\(|\)$/ig, '');
 		window.open(link, '_newtab');
@@ -35,17 +31,6 @@ $(document).ready(function(){
 
 });
 
-key = function(e) {
-
-	var code = (e.keyCode ? e.keyCode : e.which);
-
-	if (code===27) {
-		hideInfobox();
-		e.preventDefault();
-	}
-
-}
-
 getPhotoSize = function(photo) {
 
 	// Size can be 'big', 'medium' or 'small'
@@ -86,50 +71,42 @@ getPhotoSize = function(photo) {
 
 }
 
-showInfobox = function() {
-
-	$('body').append("<div id='infobox_overlay' class='fadeIn'></div>");
-	infobox.addClass('active');
-
-}
-
-hideInfobox = function() {
-
-	$('#infobox_overlay').removeClass('fadeIn').addClass('fadeOut');
-	setTimeout(function() { $('#infobox_overlay').remove() }, 300);
-	infobox.removeClass('active');
-
-}
-
 loadPhotoInfo = function(photoID) {
 
-	var params = 'function=getPhoto&photoID=' + photoID + '&albumID=0&password=""';
+	var params = {
-	$.ajax({type: 'POST', url: api_path, data: params, dataType: 'json', success: function(data) {
+		photoID,
+		albumID: 0,
+		password: ''
+	}
 
-		var size = getPhotoSize(data);
+	api.post('Photo::get', params, function(data) {
+
+		/* Set title */
 
 		if (!data.title) data.title = 'Untitled';
 		document.title = 'Lychee - ' + data.title;
-		headerTitle.html(data.title);
+		header.dom('#title').html(data.title);
 
-		imageview.attr('data-id', photoID);
+		/* Render HTML */
 
-		if (size==='big')			imageview.html("<div id='image' style='background-image: url(" + data.url + ");'></div>");
+		var size = getPhotoSize(data);
-		else if (size==='medium')	imageview.html("<div id='image' style='background-image: url(" + data.medium + ");'></div>");
-		else						imageview.html("<div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt((data.height/2)-20) + "px; margin-left: -" + data.width/2 + "px;'></div>");
 
-		imageview
+		imageview.html(build.imageview(data, size, true));
-			.removeClass('fadeOut')
+		imageview.addClass('fadeIn').show();
-			.addClass('fadeIn')
-			.show();
 
-		infobox.find('.wrapper').html(build.infoboxPhoto(data, true));
+		/* Render Sidebar */
 
-	}, error: ajaxError });
+		var structure	= sidebar.createStructure.photo(data),
+			html		= sidebar.render(structure);
+
+		sidebar.dom('.wrapper').html(html);
+		sidebar.bind();
+
+	});
 
 }
 
-ajaxError = function(errorThrown, params, data) {
+error = function(errorThrown, params, data) {
 
 	console.error({
 		description:	errorThrown,
@@ -137,4 +114,6 @@ ajaxError = function(errorThrown, params, data) {
 		response:		data
 	});
 
+	loadingBar.show('error', errorThrown);
+
 }