lychee/js/modules/build.js

/**
 * @name        build.js
 * @author      Philipp Maurer
 * @author      Tobias Reich
 * @copyright   2013 by Philipp Maurer, Tobias Reich
 *
 * Build Module
 * This module is used to generate HTML-Code.
 */

build = {

	divider: function(title) {

		return "<div class='divider fadeIn'><h1>" + title + "</h1></div>";

	},

	album: function(albumJSON) {

		if(!albumJSON) return "";
		if(!albumJSON.thumb0) albumJSON.thumb0 = "img/no_images.png";
		if(!albumJSON.thumb1) albumJSON.thumb1 = "img/no_images.png";
		if(!albumJSON.thumb2) albumJSON.thumb2 = "img/no_images.png";
		if(!albumJSON.title) albumJSON.title = "Untitled";
		if(albumJSON.title.length>18) albumJSON.title = albumJSON.title.substr(0, 18) + "...";

		var album = "";
		album += "<div class='album' data-id='" + albumJSON.id + "'>";
		album +=	"<img src='" + lychee.upload_path + albumJSON.thumb2 + "' width='200' height='200' alt='thumb'>";
		album +=	"<img src='" + lychee.upload_path + albumJSON.thumb1 + "' width='200' height='200' alt='thumb'>";
		album +=	"<img src='" + lychee.upload_path + albumJSON.thumb0 + "' width='200' height='200' alt='thumb'>";
		album += 	"<div class='overlay'>";
		album += 		"<h1>" + albumJSON.title + "</h1>";
		album += 		"<a>" + albumJSON.sysdate + "</a>";
		album += 	"</div>";

		if(albumJSON.star=="1") album += "<a class='badge red icon-star'></a>";
		if(albumJSON.public=="1") album += "<a class='badge red icon-rss'></a>";
		if(albumJSON.unsorted=="1") album += "<a class='badge red icon-reorder'></a>";

		album += "</div>";

		return album;

	},

	photo: function(photoJSON) {

		if(photoJSON=="") return "";
		if(!photoJSON.title) photoJSON.title = "";
		if(!photoJSON.thumbUrl) photoJSON.thumbUrl = "img/no_image.png";
		if(photoJSON.title.length>18) photoJSON.title = photoJSON.title.substr(0, 18) + "...";

		var photo = "";
		photo += "<div class='photo' data-album-id='" + photoJSON.album + "' data-id='" + photoJSON.id + "'>";
		photo +=	"<img src='" + lychee.upload_path + photoJSON.thumbUrl + "' width='200' height='200' alt='thumb'>";
		photo += 	"<div class='overlay'>";
		photo += 		"<h1>" + photoJSON.title + "</h1>";
		photo += 		"<a>" + photoJSON.sysdate + "</a>";
		photo += 	"</div>";

		if(photoJSON.star=="1") photo += "<a class='badge red icon-star'></a>";
		if(photoJSON.public=="1") photo += "<a class='badge red icon-rss'></a>";

		photo += "</div>";

		return photo;

	},

	modal: function(title, text, button, func) {

		var modal = "";
		modal += "<div class='message_overlay fadeIn'>";
		modal += 	"<div class='message center'>";
		modal += 		"<h1>" + title + "</h1>";
		modal += 		"<a class='close icon-remove-sign'></a>";
		modal += 		"<p>" + text + "</p>";

		$.each(button, function(index) {

		if (index==0) modal += "<a onclick='message_click(" + index + ")' class='button active'>" + this + "</a>";
		else modal += "<a onclick='message_click(" + index + ")' class='button'>" + this + "</a>";

		});

		modal += 	"</div>";

		modal += 	"<script>";
		modal += 		"function message_click(action) {";
		modal += 		"switch (action) {";

		$.each(func, function(index) {

		modal +=			"case " + index + ":";
		modal +=			this.toString();
		modal +=			"break;";

		});

		modal +=		"} lychee.closeModal(); }";
		modal += 	"</script>";

		modal += "</div>";

		return modal;

	},

	addModal: function() {

		var modal = "";
		modal += "<div class='message_overlay fadeIn'>";
		modal += 	"<div class='message center add'>";
		modal += 		"<h1>Add Album or Photo</h1>";
		modal += 		"<a class='close icon-remove-sign'></a>";
		modal +=		"<div id='add_album' class='add_album'>";
		modal +=			"<div class='icon icon-folder-close'></div>";
		modal +=			"<a>Add new Album</a>";
		modal +=		"</div>";
		modal +=		"<div id='add_photo' class='add_album'>";
		modal +=			"<div class='icon icon-picture'></div>";
		modal +=			"<a>Upload new Photo</a>";
		modal +=		"</div>";
		modal += 	"</div>";
		modal += "</div>";

		return modal;

	},

	signInModal: function() {

		var modal = "";
		modal += "<div class='message_overlay'>";
		modal += 	"<div class='message center'>";
		modal += 		"<h1><a class='icon-lock'></a> Sign in</h1>";
		modal += 		"<div class='sign_in'>";
		modal += 			"<input id='username' type='text' name='' value='' placeholder='username'>";
		modal += 			"<input id='password' type='password' name='' value='' placeholder='password'>";
		modal += 		"</div>";
		modal +=	"<div id='version'>Version " + lychee.version + "</div>";
		modal += 	"<a onclick='lychee.login()' class='button active'>Sign in</a>";
		modal += 	"</div>";
		modal += "</div>";

		return modal;

	},

	uploadModal: function() {

		var modal = "";
		modal += "<div class='upload_overlay fadeIn'>";
		modal += 	"<div class='upload_message center'>";
		modal += 		"<a class='icon-upload'></a>";
		modal += 		"<div class='progressbar'><div></div></div>";
		modal += 	"</div>";
		modal += "</div>";

		return modal;

	},

	contextMenu: function(items) {

		var menu = "";
		menu += "<div class='contextmenu_bg'></div>";
		menu += "<div class='contextmenu'>";
		menu +=		"<table>";
		menu +=			"<tbody>";

		$.each(items, function(index) {

			if (items[index][1].length!=0) {
				menu += "<tr><td onclick='" + items[index][1] + "; contextMenu.close();'>" + items[index][0] + "</td></tr>";
			}

		});

		menu +=			"</tbody>";
		menu +=		"</table>";
		menu +=	"</div>";

		return menu;

	},

	infobox: function(photo, forView) {

		var infobox = "";
		infobox += "<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>";
		infobox += "<div class='wrapper'>";

		if (photo.public==1) photo.public = "Public"; else photo.public = "Private";
		if (forView==true) editTitleHTML = ""; else editTitleHTML = " <div id='edit_title'><a class='icon-pencil'></a></div>";
		if (forView==true) editDescriptionHTML = ""; else editDescriptionHTML = " <div id='edit_description'><a class='icon-pencil'></a></div>";

		infos = [
			["", "Basics"],
			["Name", photo.title + editTitleHTML],
			["Uploaded", photo.sysdate],
			["Description", photo.description + editDescriptionHTML],
			["", "Image"],
			["Size", photo.size],
			["Format", photo.type],
			["Resolution", photo.width + " x " + photo.height],
			["", "Camera"],
			["Captured", photo.takedate],
			["Make", photo.make],
			["Type/Model", photo.model],
			["Shutter Speed", photo.shutter],
			["Aperture", photo.aperture],
			["Focal Length", photo.focal],
			["ISO", photo.iso],
			["", "Share"],
			["Privacy", photo.public],
			["Short Link", photo.shortlink]
		];

		$.each(infos, function(index) {

			if (infos[index][1]==""||infos[index][1]==undefined||infos[index][1]==null) infos[index][1] = "-";

			if (infos[index][0]=="") {

				infobox += "</table>";
				infobox += "<div class='separater'><h1>" + infos[index][1] + "</h1></div>";
				infobox += "<table id='infos'>";

			} else {

				infobox += 	"<tr>";
				infobox +=  	"<td>" + infos[index][0] + "</td>";
				infobox +=  	"<td class='attr_" + infos[index][0].toLowerCase() + "'>" + infos[index][1] + "</td>";
				infobox += 	"</tr>";

			}

		});

		infobox += "</table>";
		infobox += "<div class='bumper'></div>";
		infobox += "</div>";

		return infobox;

	}

}