photofloat/web/js/010-control.js

378 lines
13 KiB
JavaScript
Raw Normal View History

2011-05-06 13:55:47 +02:00
$(document).ready(function() {
function cachePath(path) {
if (path == "")
return "root";
if (path[0] == '/')
path = path.substring(1);
2011-05-07 00:55:02 +02:00
path = path
.replace(/ /g, "_")
.replace(/\//g, "-")
.replace(/\(/g, "")
.replace(/\)/g, "")
.replace(/#/g, "")
2011-05-07 04:48:09 +02:00
.replace(/&/g, "")
.replace(/,/g, "")
2011-05-07 00:55:02 +02:00
.replace(/\[/g, "")
.replace(/\]/g, "")
.replace(/"/g, "")
.replace(/'/g, "")
.replace(/_-_/g, "-")
.toLowerCase();
while (path.indexOf("--") != -1)
path = path.replace(/--/g, "-");
while (path.indexOf("__") != -1)
path = path.replace(/__/g, "_");
return path;
2011-05-06 13:55:47 +02:00
}
function imagePath(image, path, size, square) {
var suffix;
if (square)
suffix = size.toString() + "s";
else
suffix = size.toString();
return "cache/" + cachePath(path + "/" + image + "_" + suffix + ".jpg");
}
2011-05-13 10:51:49 +02:00
function properId(path) {
if (!path[0].match(/[a-zA-Z]/))
path = "a" + path;
return path.replace(/[^a-zA-Z0-9_:.\-]/g, "-");
}
2011-05-07 00:55:02 +02:00
function escapeId(id) {
return id.replace(/\./g, "\\.").replace(/,/g, "\\,");
}
2011-05-06 13:55:47 +02:00
function loadAlbum() {
if (current_album_cache in album_cache) {
albumLoaded(album_cache[current_album_cache]);
return;
}
$("#loading").show();
$.ajax({
type: "GET",
2011-05-13 09:53:07 +02:00
dataType: "json",
2011-05-06 13:55:47 +02:00
url: "cache/" + current_album_cache + ".json",
2011-05-07 04:48:09 +02:00
error: die,
2011-05-06 13:55:47 +02:00
success: albumLoaded
});
}
function albumLoaded(album) {
2011-05-13 09:54:10 +02:00
var albumCachePath = cachePath(album.path);
album_cache[albumCachePath] = album;
if (albumCachePath != current_album_cache)
return;
2011-05-09 11:01:24 +02:00
undie();
2011-05-06 13:55:47 +02:00
$("#loading").hide();
current_album = album;
if (current_photo_cache != null)
showPhoto();
showAlbum(true);
2011-05-06 13:55:47 +02:00
setTitle();
}
2011-05-07 03:12:51 +02:00
function trimExtension(title) {
var index = title.lastIndexOf(".");
if (index != -1)
return title.substring(0, index)
return title;
}
2011-05-06 13:55:47 +02:00
function setTitle() {
var title = "";
2011-05-09 14:22:52 +02:00
var documentTitle = "";
2011-05-06 13:55:47 +02:00
var components;
if (current_album.path.length == 0)
2011-05-09 14:22:52 +02:00
components = [original_title];
2011-05-06 13:55:47 +02:00
else {
components = current_album.path.split("/");
2011-05-09 14:22:52 +02:00
components.unshift(original_title);
2011-05-06 13:55:47 +02:00
}
2011-05-09 14:22:52 +02:00
if (current_photo_cache != null)
documentTitle += trimExtension(current_photo.name);
2011-05-06 13:55:47 +02:00
var last = "";
for (var i = 0; i < components.length; ++i) {
2011-05-09 14:22:52 +02:00
if (i || current_photo_cache != null)
documentTitle += " \u00ab ";
2011-05-06 13:55:47 +02:00
if (i)
last += "/" + components[i];
if (i < components.length - 1 || current_photo_cache != null)
2011-05-09 13:32:30 +02:00
title += "<a href=\"#!/" + (i == 0 ? "" : cachePath(last.substring(1))) + "\">";
2011-05-06 13:55:47 +02:00
title += components[i];
2011-05-09 14:22:52 +02:00
documentTitle += components[components.length - 1 - i];
2011-05-06 13:55:47 +02:00
if (i < components.length - 1 || current_photo_cache != null) {
title += "</a>";
title += " &raquo; ";
}
}
if (current_photo_cache != null)
2011-05-07 03:12:51 +02:00
title += trimExtension(current_photo.name);
2011-05-06 13:55:47 +02:00
$("#title").html(title);
2011-05-09 14:22:52 +02:00
document.title = documentTitle;
2011-05-06 13:55:47 +02:00
}
2011-05-08 00:14:21 +02:00
function showAlbum(populate) {
if (current_photo_cache == null && previous_photo_cache == null)
$("html, body").stop().animate({ scrollTop: 0 }, "slow");
if (populate) {
var photos = "";
for (var i = 0; i < current_album.photos.length; ++i)
2011-05-09 13:32:30 +02:00
photos += "<a href=\"#!/" + current_album_cache + "/" + cachePath(current_album.photos[i].name) + "\"><img title=\"" + trimExtension(current_album.photos[i].name) + "\" alt=\"" + trimExtension(current_album.photos[i].name) + "\" id=\"thumb-" + cachePath(current_album.photos[i].name) + "\" src=\"" + imagePath(current_album.photos[i].name, current_album.path, 150, true) + "\" height=\"150\" width=\"150\"></a>";
2011-05-08 00:14:21 +02:00
$("#thumbs").html(photos);
var subalbums = "";
var thumbFinderList = new Array();
for (var i = current_album.albums.length - 1; i >= 0; --i) {
var path = cachePath(current_album.path + "/" + current_album.albums[i].path);
2011-05-13 10:51:49 +02:00
var id = properId("album-" + path);
2011-05-09 13:32:30 +02:00
subalbums += "<a href=\"#!/" + path + "\"><div title=\"" + current_album.albums[i].date + "\" id=\"" + id + "\" class=\"album-button\">" + current_album.albums[i].path + "</div></a>";
2011-05-08 00:14:21 +02:00
thumbFinderList.push({ path: path, id: escapeId(id) });
}
$("#subalbums").html(subalbums);
for (var i = 0; i < thumbFinderList.length; ++i)
(function(thumb) {
albumThumbFinder(thumb.path, function(photo, album) {
$("#" + thumb.id).css("background-image", "url(" + imagePath(photo.name, album.path, 150, true) + ")");
});
})(thumbFinderList[i]);
2011-05-07 00:55:02 +02:00
}
2011-05-06 13:55:47 +02:00
2011-05-08 00:14:21 +02:00
if (current_photo_cache == null) {
2011-05-10 01:36:15 +02:00
$("#thumbs img").removeClass("current-thumb");
2011-05-08 00:14:21 +02:00
$("#album-view").removeClass("photo-view-container");
$("#subalbums").show();
$("#photo-view").hide();
}
2011-05-08 00:27:30 +02:00
setTimeout(scrollToThumb, 1);
2011-05-06 13:55:47 +02:00
}
2011-05-07 09:42:44 +02:00
function getDecimal(fraction) {
if (fraction[0] < fraction[1])
return fraction[0] + "/" + fraction[1];
return (fraction[0] / fraction[1]).toString();
}
2011-05-09 10:11:31 +02:00
function scaleImage() {
var image = $("#photo");
if (image.get(0) == this)
$(window).bind("resize", scaleImage);
var container = $("#photo-view");
if (image.css("width") != "100%" && container.height() * image.width() / image.height() > container.width())
image.css("width", "100%").css("height", "auto");
else if (image.css("height") != "100%")
image.css("height", "100%").css("width", "auto");
}
2011-05-06 13:55:47 +02:00
function showPhoto() {
currentPhoto();
if (current_photo == null) {
2011-05-09 11:01:24 +02:00
die();
2011-05-06 13:55:47 +02:00
return;
}
2011-05-09 11:01:24 +02:00
undie();
2011-05-06 14:52:46 +02:00
var maxSize = 800;
2011-05-06 13:55:47 +02:00
var width = current_photo.size[0];
var height = current_photo.size[1];
if (width > height) {
height = height / width * maxSize;
width = maxSize;
} else {
width = width / height * maxSize;
height = maxSize;
}
2011-05-09 10:11:31 +02:00
$(window).unbind("resize", scaleImage);
2011-05-06 13:55:47 +02:00
$("#photo")
.attr("width", width).attr("height", height)
.attr("src", imagePath(current_photo.name, current_album.path, maxSize, false))
.attr("alt", current_photo.name)
2011-05-07 03:12:51 +02:00
.attr("title", current_photo.date)
2011-05-09 10:11:31 +02:00
.load(scaleImage);
2011-05-08 00:23:57 +02:00
var previousPhoto = current_album.photos[
(current_photo_index - 1 < 0) ? (current_album.photos.length - 1) : (current_photo_index - 1)
];
var nextPhoto = current_album.photos[
2011-05-06 13:55:47 +02:00
(current_photo_index + 1 >= current_album.photos.length) ? 0 : (current_photo_index + 1)
2011-05-08 00:23:57 +02:00
];
$.preloadImages(imagePath(nextPhoto.name, current_album.path, maxSize, false), imagePath(previousPhoto.name, current_album.path, maxSize, false));
2011-05-09 13:32:30 +02:00
var nextLink = "#!/" + current_album_cache + "/" + cachePath(nextPhoto.name);
2011-05-06 13:55:47 +02:00
$("#next-photo").attr("href", nextLink);
$("#next").attr("href", nextLink);
2011-05-09 13:32:30 +02:00
$("#back").attr("href", "#!/" + current_album_cache + "/" + cachePath(previousPhoto.name));
2011-05-07 04:48:09 +02:00
$("#original-link").attr("target", "_blank").attr("href", "albums/" + current_album.path + "/" + current_photo.name);
2011-05-07 08:09:54 +02:00
var text = "<table>";
if (current_photo.make != undefined) text += "<tr><td>Camera Maker</td><td>" + current_photo.make + "</td></tr>";
if (current_photo.model != undefined) text += "<tr><td>Camera Model</td><td>" + current_photo.model + "</td></tr>";
if (current_photo.date != undefined) text += "<tr><td>Time Taken</td><td>" + current_photo.date + "</td></tr>";
if (current_photo.size != undefined) text += "<tr><td>Resolution</td><td>" + current_photo.size[0] + " x " + current_photo.size[1] + "</td></tr>";
2011-05-07 09:42:44 +02:00
if (current_photo.aperture != undefined) text += "<tr><td>Aperture</td><td> f/" + getDecimal(current_photo.aperture) + "</td></tr>";
if (current_photo.focalLength != undefined) text += "<tr><td>Focal Length</td><td>" + getDecimal(current_photo.focalLength) + " mm</td></tr>";
2011-05-07 08:56:54 +02:00
if (current_photo.iso != undefined) text += "<tr><td>ISO</td><td>" + current_photo.iso + "</td></tr>";
2011-05-07 09:42:44 +02:00
if (current_photo.exposureTime != undefined) text += "<tr><td>Exposure Time</td><td>" + getDecimal(current_photo.exposureTime) + " sec</td></tr>";
2011-05-07 08:56:54 +02:00
if (current_photo.exposureProgram != undefined) text += "<tr><td>Exposure Program</td><td>" + current_photo.exposureProgram + "</td></tr>";
2011-05-07 09:42:44 +02:00
if (current_photo.exposureCompensation != undefined) text += "<tr><td>Exposure Compensation</td><td>" + getDecimal(current_photo.exposureCompensation) + "</td></tr>";
if (current_photo.spectralSensitivity != undefined) text += "<tr><td>Spectral Sensitivity</td><td>" + current_photo.spectralSensitivity + "</td></tr>";
if (current_photo.flash != undefined) text += "<tr><td>Flash</td><td>" + current_photo.flash + "</td></tr>";
2011-05-07 08:09:54 +02:00
if (current_photo.orientation != undefined) text += "<tr><td>Orientation</td><td>" + current_photo.orientation + "</td></tr>";
text += "</table>";
$("#metadata").html(text);
2011-05-06 13:55:47 +02:00
$("#album-view").addClass("photo-view-container");
$("#subalbums").hide();
$("#photo-view").show();
2011-05-08 00:14:21 +02:00
}
function scrollToThumb() {
var photo = current_photo_cache
if (photo == null) {
photo = previous_photo_cache;
if (photo == null)
return;
}
2011-05-13 10:51:49 +02:00
var thumb = $("#thumb-" + escapeId(properId(photo)));
2011-05-08 00:14:21 +02:00
if (!thumb.length)
return;
if (current_photo_cache != null) {
var scroller = $("#album-view");
scroller.stop().animate({ scrollLeft: thumb.position().left + scroller.scrollLeft() - scroller.width() / 2 + thumb.width() / 2 }, "slow");
} else
$("html, body").stop().animate({ scrollTop: thumb.offset().top - $(window).height() / 2 + thumb.height() }, "slow");
2011-05-10 01:36:15 +02:00
if (current_photo_cache != null) {
$("#thumbs img").removeClass("current-thumb");
thumb.addClass("current-thumb");
}
2011-05-06 13:55:47 +02:00
}
function currentPhoto() {
for (current_photo_index = 0; current_photo_index < current_album.photos.length; ++current_photo_index) {
if (cachePath(current_album.photos[current_photo_index].name) == current_photo_cache)
break;
}
if (current_photo_index >= current_album.photos.length) {
current_photo = null;
current_photo_index = -1;
return;
}
current_photo = current_album.photos[current_photo_index];
}
2011-05-07 00:55:02 +02:00
function albumForThumbIteration(album, callback) {
album_cache[cachePath(album.path)] = album;
var index = Math.floor(Math.random() * (album.photos.length + album.albums.length));
if (index >= album.photos.length) {
index -= album.photos.length;
fetchAlbumForThumb(cachePath(album.path + "/" + album.albums[index].path), function(fetchedAlbum) {
albumForThumbIteration(fetchedAlbum, callback);
});
} else
callback(album.photos[index], album);
}
function fetchAlbumForThumb(album, callback) {
if (album in album_cache) {
callback(album_cache[album]);
return;
}
$.ajax({
type: "GET",
2011-05-13 09:53:07 +02:00
dataType: "json",
2011-05-07 00:55:02 +02:00
url: "cache/" + album + ".json",
success: callback
});
}
function albumThumbFinder(album, callback) {
fetchAlbumForThumb(album, function(fetchedAlbum) { albumForThumbIteration(fetchedAlbum, callback); });
}
2011-05-09 11:01:24 +02:00
2011-05-07 04:48:09 +02:00
function die() {
2011-05-09 11:15:57 +02:00
$("#error-overlay").fadeTo(500, 0.8);
2011-05-09 11:01:24 +02:00
$("#error-text").fadeIn(2500);
$("body, html").css("overflow", "hidden");
}
function undie() {
$("#error-text, #error-overlay").fadeOut(500);
$("body, html").css("overflow", "auto");
2011-05-07 04:48:09 +02:00
}
window.hashUrl = function() {
var new_album_cache = location.hash.substring(1);
if (new_album_cache.length) {
if (new_album_cache[0] == "!")
new_album_cache = new_album_cache.substring(1);
if (new_album_cache[0] == "/")
new_album_cache = new_album_cache.substring(1);
if (new_album_cache[new_album_cache.length - 1] == "/")
new_album_cache = new_album_cache.substring(0, new_album_cache.length - 1);
}
return new_album_cache;
}
2011-05-07 00:55:02 +02:00
2011-05-06 13:55:47 +02:00
var current_album_cache = null;
var current_photo_cache = null;
2011-05-08 00:14:21 +02:00
var previous_photo_cache = null;
2011-05-06 13:55:47 +02:00
var current_album = null;
var current_photo = null;
var current_photo_index = -1;
2011-05-09 14:22:52 +02:00
var original_title = document.title;
2011-05-06 13:55:47 +02:00
var album_cache = new Array();
$(window).hashchange(function() {
var new_album_cache = window.hashUrl();
2011-05-06 13:55:47 +02:00
var index = new_album_cache.lastIndexOf("/");
if (index != -1 && index != new_album_cache.length - 1) {
2011-05-08 00:14:21 +02:00
previous_photo_cache = current_photo_cache;
2011-05-06 13:55:47 +02:00
current_photo_cache = new_album_cache.substring(index + 1);
new_album_cache = new_album_cache.substring(0, index);
2011-05-08 00:14:21 +02:00
} else {
previous_photo_cache = current_photo_cache;
2011-05-06 13:55:47 +02:00
current_photo_cache = null;
2011-05-08 00:14:21 +02:00
}
2011-05-06 13:55:47 +02:00
if (!new_album_cache.length)
new_album_cache = cachePath("root");
if (new_album_cache != current_album_cache) {
current_album_cache = new_album_cache;
2011-05-08 00:14:21 +02:00
previous_photo_cache = null;
2011-05-06 13:55:47 +02:00
loadAlbum();
} else if (current_photo_cache != null) {
showPhoto();
2011-05-08 00:14:21 +02:00
showAlbum(false);
2011-05-06 13:55:47 +02:00
setTitle();
} else {
2011-05-08 00:14:21 +02:00
showAlbum(false);
2011-05-06 13:55:47 +02:00
setTitle();
}
});
$(window).hashchange();
$(document).keydown(function(e){
if (current_photo_cache == null)
return true;
if (e.keyCode == 39) {
window.location.href = $("#next").attr("href");
return false;
} else if (e.keyCode == 37) {
window.location.href = $("#back").attr("href");
return false;
}
return true;
});
2011-05-07 04:48:09 +02:00
$("#photo-box").mouseenter(function() {
$("#photo-links").stop().fadeTo("slow", 0.50).css("display", "inline");
});
$("#photo-box").mouseleave(function() {
$("#photo-links").stop().fadeOut("slow");
});
2011-05-08 08:57:27 +02:00
$("#next, #back").mouseenter(function() {
$(this).fadeTo("slow", 1);
});
$("#next, #back").mouseleave(function() {
$(this).fadeTo("slow", 0.35);
});
2011-05-07 08:09:54 +02:00
$("#metadata-link").click(function() {
if (!$("#metadata").is(":visible"))
$("#metadata").stop()
.css("height", 0)
.css("padding-top", 0)
.css("padding-bottom", 0)
.show()
2011-05-08 07:22:14 +02:00
.animate({ height: $("#metadata > table").height(), paddingTop: 3, paddingBottom: 3 }, "slow", function() {
$(this).css("height", "auto");
2011-05-07 08:09:54 +02:00
$("#metadata-link").text($("#metadata-link").text().replace("show", "hide"));
});
else
$("#metadata").stop().animate({ height: 0, paddingTop: 0, paddingBottom: 0 }, "slow", function() {
$(this).hide();
$("#metadata-link").text($("#metadata-link").text().replace("hide", "show"));
});
});
2011-05-06 13:55:47 +02:00
});