Seperate photofloat internals to javascript class.
This commit is contained in:
Jason A. Donenfeld
parent
3c7fc8cfdd
commit
79a9ce5983
@ -1,392 +0,0 @@
|
|||||||
$(document).ready(function() {
|
|
||||||
function cachePath(path) {
|
|
||||||
if (path == "")
|
|
||||||
return "root";
|
|
||||||
if (path[0] == '/')
|
|
||||||
path = path.substring(1);
|
|
||||||
path = path
|
|
||||||
.replace(/ /g, "_")
|
|
||||||
.replace(/\//g, "-")
|
|
||||||
.replace(/\(/g, "")
|
|
||||||
.replace(/\)/g, "")
|
|
||||||
.replace(/#/g, "")
|
|
||||||
.replace(/&/g, "")
|
|
||||||
.replace(/,/g, "")
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
function properId(path) {
|
|
||||||
if (!path[0].match(/[a-zA-Z]/))
|
|
||||||
path = "a" + path;
|
|
||||||
return path.replace(/[^a-zA-Z0-9_:.\-]/g, "-");
|
|
||||||
}
|
|
||||||
function escapeId(id) {
|
|
||||||
return id.replace(/\./g, "\\.").replace(/,/g, "\\,");
|
|
||||||
}
|
|
||||||
function loadAlbum() {
|
|
||||||
if (current_album_cache in album_cache) {
|
|
||||||
albumLoaded(album_cache[current_album_cache]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$("#loading").show();
|
|
||||||
$.ajax({
|
|
||||||
type: "GET",
|
|
||||||
dataType: "json",
|
|
||||||
url: "cache/" + current_album_cache + ".json",
|
|
||||||
error: die,
|
|
||||||
success: albumLoaded
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function albumLoaded(album) {
|
|
||||||
var albumCachePath = cachePath(album.path);
|
|
||||||
album_cache[albumCachePath] = album;
|
|
||||||
if (albumCachePath != current_album_cache)
|
|
||||||
return;
|
|
||||||
undie();
|
|
||||||
$("#loading").hide();
|
|
||||||
current_album = album;
|
|
||||||
if (current_photo_cache != null)
|
|
||||||
showPhoto();
|
|
||||||
showAlbum(true);
|
|
||||||
setTitle();
|
|
||||||
}
|
|
||||||
function trimExtension(title) {
|
|
||||||
var index = title.lastIndexOf(".");
|
|
||||||
if (index != -1)
|
|
||||||
return title.substring(0, index)
|
|
||||||
return title;
|
|
||||||
}
|
|
||||||
function setTitle() {
|
|
||||||
var title = "";
|
|
||||||
var documentTitle = "";
|
|
||||||
var components;
|
|
||||||
if (current_album.path.length == 0)
|
|
||||||
components = [original_title];
|
|
||||||
else {
|
|
||||||
components = current_album.path.split("/");
|
|
||||||
components.unshift(original_title);
|
|
||||||
}
|
|
||||||
if (current_photo_cache != null)
|
|
||||||
documentTitle += trimExtension(current_photo.name);
|
|
||||||
var last = "";
|
|
||||||
for (var i = 0; i < components.length; ++i) {
|
|
||||||
if (i || current_photo_cache != null)
|
|
||||||
documentTitle += " \u00ab ";
|
|
||||||
if (i)
|
|
||||||
last += "/" + components[i];
|
|
||||||
if (i < components.length - 1 || current_photo_cache != null)
|
|
||||||
title += "<a href=\"#!/" + (i == 0 ? "" : cachePath(last.substring(1))) + "\">";
|
|
||||||
title += components[i];
|
|
||||||
documentTitle += components[components.length - 1 - i];
|
|
||||||
if (i < components.length - 1 || current_photo_cache != null) {
|
|
||||||
title += "</a>";
|
|
||||||
title += " » ";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (current_photo_cache != null)
|
|
||||||
title += trimExtension(current_photo.name);
|
|
||||||
$("#title").html(title);
|
|
||||||
document.title = documentTitle;
|
|
||||||
}
|
|
||||||
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)
|
|
||||||
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>";
|
|
||||||
$("#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);
|
|
||||||
var id = properId("album-" + path);
|
|
||||||
subalbums += "<a href=\"#!/" + path + "\"><div title=\"" + current_album.albums[i].date + "\" id=\"" + id + "\" class=\"album-button\">" + current_album.albums[i].path + "</div></a>";
|
|
||||||
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]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (current_photo_cache == null) {
|
|
||||||
$("#thumbs img").removeClass("current-thumb");
|
|
||||||
$("#album-view").removeClass("photo-view-container");
|
|
||||||
$("#subalbums").show();
|
|
||||||
$("#photo-view").hide();
|
|
||||||
}
|
|
||||||
setTimeout(scrollToThumb, 1);
|
|
||||||
}
|
|
||||||
function getDecimal(fraction) {
|
|
||||||
if (fraction[0] < fraction[1])
|
|
||||||
return fraction[0] + "/" + fraction[1];
|
|
||||||
return (fraction[0] / fraction[1]).toString();
|
|
||||||
}
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
function showPhoto() {
|
|
||||||
currentPhoto();
|
|
||||||
if (current_photo == null) {
|
|
||||||
die();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
undie();
|
|
||||||
var maxSize = 800;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
$(window).unbind("resize", scaleImage);
|
|
||||||
var photoSrc = imagePath(current_photo.name, current_album.path, maxSize, false);
|
|
||||||
$("#photo")
|
|
||||||
.attr("width", width).attr("height", height)
|
|
||||||
.attr("src", photoSrc)
|
|
||||||
.attr("alt", current_photo.name)
|
|
||||||
.attr("title", current_photo.date)
|
|
||||||
.load(scaleImage);
|
|
||||||
$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");
|
|
||||||
|
|
||||||
var previousPhoto = current_album.photos[
|
|
||||||
(current_photo_index - 1 < 0) ? (current_album.photos.length - 1) : (current_photo_index - 1)
|
|
||||||
];
|
|
||||||
var nextPhoto = current_album.photos[
|
|
||||||
(current_photo_index + 1 >= current_album.photos.length) ? 0 : (current_photo_index + 1)
|
|
||||||
];
|
|
||||||
$.preloadImages(imagePath(nextPhoto.name, current_album.path, maxSize, false), imagePath(previousPhoto.name, current_album.path, maxSize, false));
|
|
||||||
|
|
||||||
var nextLink = "#!/" + current_album_cache + "/" + cachePath(nextPhoto.name);
|
|
||||||
$("#next-photo").attr("href", nextLink);
|
|
||||||
$("#next").attr("href", nextLink);
|
|
||||||
$("#back").attr("href", "#!/" + current_album_cache + "/" + cachePath(previousPhoto.name));
|
|
||||||
$("#original-link").attr("target", "_blank").attr("href", "albums/" + current_album.path + "/" + current_photo.name);
|
|
||||||
|
|
||||||
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>";
|
|
||||||
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>";
|
|
||||||
if (current_photo.iso != undefined) text += "<tr><td>ISO</td><td>" + current_photo.iso + "</td></tr>";
|
|
||||||
if (current_photo.exposureTime != undefined) text += "<tr><td>Exposure Time</td><td>" + getDecimal(current_photo.exposureTime) + " sec</td></tr>";
|
|
||||||
if (current_photo.exposureProgram != undefined) text += "<tr><td>Exposure Program</td><td>" + current_photo.exposureProgram + "</td></tr>";
|
|
||||||
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>";
|
|
||||||
if (current_photo.orientation != undefined) text += "<tr><td>Orientation</td><td>" + current_photo.orientation + "</td></tr>";
|
|
||||||
text += "</table>";
|
|
||||||
$("#metadata").html(text);
|
|
||||||
|
|
||||||
$("#album-view").addClass("photo-view-container");
|
|
||||||
$("#subalbums").hide();
|
|
||||||
$("#photo-view").show();
|
|
||||||
}
|
|
||||||
function scrollToThumb() {
|
|
||||||
var photo = current_photo_cache
|
|
||||||
if (photo == null) {
|
|
||||||
photo = previous_photo_cache;
|
|
||||||
if (photo == null)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var thumb = $("#thumb-" + escapeId(properId(photo)));
|
|
||||||
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");
|
|
||||||
|
|
||||||
if (current_photo_cache != null) {
|
|
||||||
$("#thumbs img").removeClass("current-thumb");
|
|
||||||
thumb.addClass("current-thumb");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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];
|
|
||||||
}
|
|
||||||
|
|
||||||
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",
|
|
||||||
dataType: "json",
|
|
||||||
url: "cache/" + album + ".json",
|
|
||||||
success: callback
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function albumThumbFinder(album, callback) {
|
|
||||||
fetchAlbumForThumb(album, function(fetchedAlbum) { albumForThumbIteration(fetchedAlbum, callback); });
|
|
||||||
}
|
|
||||||
|
|
||||||
function die() {
|
|
||||||
$("#error-overlay").fadeTo(500, 0.8);
|
|
||||||
$("#error-text").fadeIn(2500);
|
|
||||||
$("body, html").css("overflow", "hidden");
|
|
||||||
}
|
|
||||||
function undie() {
|
|
||||||
$("#error-text, #error-overlay").fadeOut(500);
|
|
||||||
$("body, html").css("overflow", "auto");
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
var current_album_cache = null;
|
|
||||||
var current_photo_cache = null;
|
|
||||||
var previous_photo_cache = null;
|
|
||||||
var current_album = null;
|
|
||||||
var current_photo = null;
|
|
||||||
var current_photo_index = -1;
|
|
||||||
var original_title = document.title;
|
|
||||||
var album_cache = new Array();
|
|
||||||
$(window).hashchange(function() {
|
|
||||||
$("link[rel=image_src]").remove();
|
|
||||||
var new_album_cache = window.hashUrl();
|
|
||||||
var index = new_album_cache.lastIndexOf("/");
|
|
||||||
if (index != -1 && index != new_album_cache.length - 1) {
|
|
||||||
previous_photo_cache = current_photo_cache;
|
|
||||||
current_photo_cache = new_album_cache.substring(index + 1);
|
|
||||||
new_album_cache = new_album_cache.substring(0, index);
|
|
||||||
} else {
|
|
||||||
previous_photo_cache = current_photo_cache;
|
|
||||||
current_photo_cache = null;
|
|
||||||
}
|
|
||||||
if (!new_album_cache.length)
|
|
||||||
new_album_cache = cachePath("root");
|
|
||||||
if (new_album_cache != current_album_cache) {
|
|
||||||
current_album_cache = new_album_cache;
|
|
||||||
previous_photo_cache = null;
|
|
||||||
loadAlbum();
|
|
||||||
} else if (current_photo_cache != null) {
|
|
||||||
showPhoto();
|
|
||||||
showAlbum(false);
|
|
||||||
setTitle();
|
|
||||||
} else {
|
|
||||||
showAlbum(false);
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
$(document).mousewheel(function(event, delta) {
|
|
||||||
if (current_photo_cache == null)
|
|
||||||
return true;
|
|
||||||
if (delta < 0) {
|
|
||||||
window.location.href = $("#next").attr("href");
|
|
||||||
return false;
|
|
||||||
} else if (delta > 0) {
|
|
||||||
window.location.href = $("#back").attr("href");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
$("#photo-box").mouseenter(function() {
|
|
||||||
$("#photo-links").stop().fadeTo("slow", 0.50).css("display", "inline");
|
|
||||||
});
|
|
||||||
$("#photo-box").mouseleave(function() {
|
|
||||||
$("#photo-links").stop().fadeOut("slow");
|
|
||||||
});
|
|
||||||
$("#next, #back").mouseenter(function() {
|
|
||||||
$(this).fadeTo("slow", 1);
|
|
||||||
});
|
|
||||||
$("#next, #back").mouseleave(function() {
|
|
||||||
$(this).fadeTo("slow", 0.35);
|
|
||||||
});
|
|
||||||
$("#metadata-link").click(function() {
|
|
||||||
if (!$("#metadata").is(":visible"))
|
|
||||||
$("#metadata").stop()
|
|
||||||
.css("height", 0)
|
|
||||||
.css("padding-top", 0)
|
|
||||||
.css("padding-bottom", 0)
|
|
||||||
.show()
|
|
||||||
.animate({ height: $("#metadata > table").height(), paddingTop: 3, paddingBottom: 3 }, "slow", function() {
|
|
||||||
$(this).css("height", "auto");
|
|
||||||
$("#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"));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
161
web/js/010-libphotofloat.js
Normal file
161
web/js/010-libphotofloat.js
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
(function() {
|
||||||
|
var PhotoFloat = (function() {
|
||||||
|
PhotoFloat.cachePath = function(path) {
|
||||||
|
if (path === "")
|
||||||
|
return "root";
|
||||||
|
if (path[0] === "/")
|
||||||
|
path = path.substring(1);
|
||||||
|
path = path
|
||||||
|
.replace(/ /g, "_")
|
||||||
|
.replace(/\//g, "-")
|
||||||
|
.replace(/\(/g, "")
|
||||||
|
.replace(/\)/g, "")
|
||||||
|
.replace(/#/g, "")
|
||||||
|
.replace(/&/g, "")
|
||||||
|
.replace(/,/g, "")
|
||||||
|
.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;
|
||||||
|
};
|
||||||
|
PhotoFloat.photoHash = function(album, photo) {
|
||||||
|
return PhotoFloat.albumHash(album) + "/" + PhotoFloat.cachePath(photo.name);
|
||||||
|
};
|
||||||
|
PhotoFloat.albumHash = function(album) {
|
||||||
|
if (typeof album.photos !== "undefined" && album.photos !== null)
|
||||||
|
return PhotoFloat.cachePath(album.path);
|
||||||
|
return PhotoFloat.cachePath(album.parent.path + "/" + album.path);
|
||||||
|
};
|
||||||
|
PhotoFloat.photoPath = function(album, photo, size, square) {
|
||||||
|
var suffix;
|
||||||
|
if (square)
|
||||||
|
suffix = size.toString() + "s";
|
||||||
|
else
|
||||||
|
suffix = size.toString();
|
||||||
|
return "cache/" + PhotoFloat.cachePath(PhotoFloat.photoHash(album, photo) + "_" + suffix + ".jpg");
|
||||||
|
};
|
||||||
|
PhotoFloat.originalPhotoPath = function(album, photo) {
|
||||||
|
return "albums/" + album.path + "/" + photo.name;
|
||||||
|
};
|
||||||
|
PhotoFloat.trimExtension = function(name) {
|
||||||
|
var index = name.lastIndexOf(".");
|
||||||
|
if (index != -1)
|
||||||
|
return name.substring(0, index)
|
||||||
|
return name;
|
||||||
|
};
|
||||||
|
PhotoFloat.cleanHash = function(hash) {
|
||||||
|
while (hash.length) {
|
||||||
|
if (hash[0] === "#")
|
||||||
|
hash = hash.substring(1);
|
||||||
|
else if (hash[0] === "!")
|
||||||
|
hash = hash.substring(1);
|
||||||
|
else if (hash[0] === "/")
|
||||||
|
hash = hash.substring(1);
|
||||||
|
else if (hash[hash.length - 1] === "/")
|
||||||
|
hash = hash.substring(0, hash.length - 1);
|
||||||
|
else
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return hash;
|
||||||
|
};
|
||||||
|
function PhotoFloat() {
|
||||||
|
this.albumCache = [];
|
||||||
|
}
|
||||||
|
PhotoFloat.prototype.cachePath = PhotoFloat.cachePath;
|
||||||
|
PhotoFloat.prototype.photoHash = PhotoFloat.photoHash;
|
||||||
|
PhotoFloat.prototype.albumHash = PhotoFloat.albumHash;
|
||||||
|
PhotoFloat.prototype.photoPath = PhotoFloat.photoPath;
|
||||||
|
PhotoFloat.prototype.originalPhotoPath = PhotoFloat.originalPhotoPath;
|
||||||
|
PhotoFloat.prototype.trimExtension = PhotoFloat.trimExtension;
|
||||||
|
PhotoFloat.prototype.cleanHash = PhotoFloat.cleanHash;
|
||||||
|
PhotoFloat.prototype.album = function(subalbum, callback, error) {
|
||||||
|
var cacheKey, ajaxOptions, self;
|
||||||
|
if (typeof subalbum.photos !== "undefined" && subalbum.photos !== null) {
|
||||||
|
callback(subalbum);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (Object.prototype.toString.call(subalbum).slice(8, -1) === "String")
|
||||||
|
cacheKey = subalbum;
|
||||||
|
else
|
||||||
|
cacheKey = PhotoFloat.cachePath(subalbum.parent.path + "/" + subalbum.path);
|
||||||
|
if (cacheKey in this.albumCache) {
|
||||||
|
callback(this.albumCache[cacheKey]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
self = this;
|
||||||
|
ajaxOptions = {
|
||||||
|
type: "GET",
|
||||||
|
dataType: "json",
|
||||||
|
url: "cache/" + cacheKey + ".json",
|
||||||
|
success: function(album) {
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < album.albums.length; ++i)
|
||||||
|
album.albums[i].parent = album;
|
||||||
|
for (i = 0; i < album.photos.length; ++i)
|
||||||
|
album.photos[i].parent = album;
|
||||||
|
self.albumCache[cacheKey] = album;
|
||||||
|
callback(album);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (typeof error !== "undefined" && error !== null)
|
||||||
|
ajaxOptions.error = error;
|
||||||
|
$.ajax(ajaxOptions);
|
||||||
|
};
|
||||||
|
PhotoFloat.prototype.albumPhoto = function(subalbum, callback, error) {
|
||||||
|
var nextAlbum, self;
|
||||||
|
self = this;
|
||||||
|
nextAlbum = function(album) {
|
||||||
|
var index = Math.floor(Math.random() * (album.photos.length + album.albums.length));
|
||||||
|
if (index >= album.photos.length) {
|
||||||
|
index -= album.photos.length;
|
||||||
|
self.album(album.albums[index], nextAlbum, error);
|
||||||
|
} else
|
||||||
|
callback(album, album.photos[index]);
|
||||||
|
};
|
||||||
|
if (typeof subalbum.photos !== "undefined" && subalbum.photos !== null)
|
||||||
|
nextAlbum(subalbum);
|
||||||
|
else
|
||||||
|
this.album(subalbum, nextAlbum, error);
|
||||||
|
};
|
||||||
|
PhotoFloat.prototype.parseHash = function(hash, callback, error) {
|
||||||
|
var index, album, photo;
|
||||||
|
hash = PhotoFloat.cleanHash(hash);
|
||||||
|
index = hash.lastIndexOf("/");
|
||||||
|
if (!hash.length) {
|
||||||
|
album = PhotoFloat.cachePath("root");
|
||||||
|
photo = null;
|
||||||
|
} else if (index != -1 && index != hash.length - 1) {
|
||||||
|
photo = hash.substring(index + 1);
|
||||||
|
album = hash.substring(0, index);
|
||||||
|
} else {
|
||||||
|
album = hash;
|
||||||
|
photo = null;
|
||||||
|
}
|
||||||
|
this.album(album, function(theAlbum) {
|
||||||
|
var i = -1;
|
||||||
|
if (photo != null) {
|
||||||
|
for (i = 0; i < theAlbum.photos.length; ++i) {
|
||||||
|
if (PhotoFloat.cachePath(theAlbum.photos[i].name) == photo) {
|
||||||
|
photo = theAlbum.photos[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (i >= theAlbum.photos.length) {
|
||||||
|
photo = null;
|
||||||
|
i = -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
callback(theAlbum, photo, i);
|
||||||
|
}, error);
|
||||||
|
};
|
||||||
|
return PhotoFloat;
|
||||||
|
})();
|
||||||
|
window.PhotoFloat = PhotoFloat;
|
||||||
|
}).call(this);
|
||||||
267
web/js/011-display.js
Normal file
267
web/js/011-display.js
Normal file
@ -0,0 +1,267 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
function setTitle() {
|
||||||
|
var title = "";
|
||||||
|
var documentTitle = "";
|
||||||
|
var components;
|
||||||
|
if (currentAlbum.path.length == 0)
|
||||||
|
components = [originalTitle];
|
||||||
|
else {
|
||||||
|
components = currentAlbum.path.split("/");
|
||||||
|
components.unshift(originalTitle);
|
||||||
|
}
|
||||||
|
if (currentPhoto != null)
|
||||||
|
documentTitle += photoFloat.trimExtension(currentPhoto.name);
|
||||||
|
var last = "";
|
||||||
|
for (var i = 0; i < components.length; ++i) {
|
||||||
|
if (i || currentPhoto != null)
|
||||||
|
documentTitle += " \u00ab ";
|
||||||
|
if (i)
|
||||||
|
last += "/" + components[i];
|
||||||
|
if (i < components.length - 1 || currentPhoto != null)
|
||||||
|
title += "<a href=\"#!/" + (i == 0 ? "" : photoFloat.cachePath(last.substring(1))) + "\">";
|
||||||
|
title += components[i];
|
||||||
|
documentTitle += components[components.length - 1 - i];
|
||||||
|
if (i < components.length - 1 || currentPhoto != null) {
|
||||||
|
title += "</a>";
|
||||||
|
title += " » ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (currentPhoto != null)
|
||||||
|
title += photoFloat.trimExtension(currentPhoto.name);
|
||||||
|
$("#title").html(title);
|
||||||
|
document.title = documentTitle;
|
||||||
|
}
|
||||||
|
function showAlbum(populate) {
|
||||||
|
if (currentPhoto == null && previousPhoto == null)
|
||||||
|
$("html, body").stop().animate({ scrollTop: 0 }, "slow");
|
||||||
|
|
||||||
|
if (populate) {
|
||||||
|
var photos = [];
|
||||||
|
for (var i = 0; i < currentAlbum.photos.length; ++i) {
|
||||||
|
var link = $("<a href=\"#!/" + photoFloat.photoHash(currentAlbum, currentAlbum.photos[i]) + "\"></a>");
|
||||||
|
var image = $("<img title=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" alt=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" src=\"" + photoFloat.photoPath(currentAlbum, currentAlbum.photos[i], 150, true) + "\" height=\"150\" width=\"150\" />");
|
||||||
|
link.append(image);
|
||||||
|
image.get(0).photo = currentAlbum.photos[i];
|
||||||
|
photos.push(link);
|
||||||
|
}
|
||||||
|
var thumbsElement = $("#thumbs");
|
||||||
|
thumbsElement.empty();
|
||||||
|
thumbsElement.append.apply(thumbsElement, photos);
|
||||||
|
|
||||||
|
var subalbums = [];
|
||||||
|
for (var i = currentAlbum.albums.length - 1; i >= 0; --i) {
|
||||||
|
var link = $("<a href=\"#!/" + photoFloat.albumHash(currentAlbum.albums[i]) + "\"></a>");
|
||||||
|
var image = $("<div title=\"" + currentAlbum.albums[i].date + "\" class=\"album-button\">" + currentAlbum.albums[i].path + "</div>");
|
||||||
|
link.append(image);
|
||||||
|
subalbums.push(link);
|
||||||
|
(function(theAlbum, theImage) {
|
||||||
|
photoFloat.albumPhoto(theAlbum, function(album, photo) {
|
||||||
|
theImage.css("background-image", "url(" + photoFloat.photoPath(album, photo, 150, true) + ")");
|
||||||
|
});
|
||||||
|
})(currentAlbum.albums[i], image);
|
||||||
|
}
|
||||||
|
var subalbumsElement = $("#subalbums");
|
||||||
|
subalbumsElement.empty();
|
||||||
|
subalbumsElement.append.apply(subalbumsElement, subalbums);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPhoto == null) {
|
||||||
|
$("#thumbs img").removeClass("current-thumb");
|
||||||
|
$("#album-view").removeClass("photo-view-container");
|
||||||
|
$("#subalbums").show();
|
||||||
|
$("#photo-view").hide();
|
||||||
|
}
|
||||||
|
setTimeout(scrollToThumb, 1);
|
||||||
|
}
|
||||||
|
function getDecimal(fraction) {
|
||||||
|
if (fraction[0] < fraction[1])
|
||||||
|
return fraction[0] + "/" + fraction[1];
|
||||||
|
return (fraction[0] / fraction[1]).toString();
|
||||||
|
}
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
function showPhoto() {
|
||||||
|
var maxSize = 800;
|
||||||
|
var width = currentPhoto.size[0];
|
||||||
|
var height = currentPhoto.size[1];
|
||||||
|
if (width > height) {
|
||||||
|
height = height / width * maxSize;
|
||||||
|
width = maxSize;
|
||||||
|
} else {
|
||||||
|
width = width / height * maxSize;
|
||||||
|
height = maxSize;
|
||||||
|
}
|
||||||
|
$(window).unbind("resize", scaleImage);
|
||||||
|
var photoSrc = photoFloat.photoPath(currentAlbum, currentPhoto, maxSize, false);
|
||||||
|
$("#photo")
|
||||||
|
.attr("width", width).attr("height", height)
|
||||||
|
.attr("src", photoSrc)
|
||||||
|
.attr("alt", currentPhoto.name)
|
||||||
|
.attr("title", currentPhoto.date)
|
||||||
|
.load(scaleImage);
|
||||||
|
$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");
|
||||||
|
|
||||||
|
var previousPhoto = currentAlbum.photos[
|
||||||
|
(currentPhotoIndex - 1 < 0) ? (currentAlbum.photos.length - 1) : (currentPhotoIndex - 1)
|
||||||
|
];
|
||||||
|
var nextPhoto = currentAlbum.photos[
|
||||||
|
(currentPhotoIndex + 1 >= currentAlbum.photos.length) ? 0 : (currentPhotoIndex + 1)
|
||||||
|
];
|
||||||
|
$.preloadImages(photoFloat.photoPath(currentAlbum, nextPhoto, maxSize, false), photoFloat.photoPath(currentAlbum, previousPhoto, maxSize, false));
|
||||||
|
|
||||||
|
var nextLink = "#!/" + photoFloat.photoHash(currentAlbum, nextPhoto);
|
||||||
|
$("#next-photo").attr("href", nextLink);
|
||||||
|
$("#next").attr("href", nextLink);
|
||||||
|
$("#back").attr("href", "#!/" + photoFloat.photoHash(currentAlbum, previousPhoto));
|
||||||
|
$("#original-link").attr("target", "_blank").attr("href", photoFloat.originalPhotoPath(currentAlbum, currentPhoto));
|
||||||
|
|
||||||
|
var text = "<table>";
|
||||||
|
if (currentPhoto.make != undefined) text += "<tr><td>Camera Maker</td><td>" + currentPhoto.make + "</td></tr>";
|
||||||
|
if (currentPhoto.model != undefined) text += "<tr><td>Camera Model</td><td>" + currentPhoto.model + "</td></tr>";
|
||||||
|
if (currentPhoto.date != undefined) text += "<tr><td>Time Taken</td><td>" + currentPhoto.date + "</td></tr>";
|
||||||
|
if (currentPhoto.size != undefined) text += "<tr><td>Resolution</td><td>" + currentPhoto.size[0] + " x " + currentPhoto.size[1] + "</td></tr>";
|
||||||
|
if (currentPhoto.aperture != undefined) text += "<tr><td>Aperture</td><td> f/" + getDecimal(currentPhoto.aperture) + "</td></tr>";
|
||||||
|
if (currentPhoto.focalLength != undefined) text += "<tr><td>Focal Length</td><td>" + getDecimal(currentPhoto.focalLength) + " mm</td></tr>";
|
||||||
|
if (currentPhoto.iso != undefined) text += "<tr><td>ISO</td><td>" + currentPhoto.iso + "</td></tr>";
|
||||||
|
if (currentPhoto.exposureTime != undefined) text += "<tr><td>Exposure Time</td><td>" + getDecimal(currentPhoto.exposureTime) + " sec</td></tr>";
|
||||||
|
if (currentPhoto.exposureProgram != undefined) text += "<tr><td>Exposure Program</td><td>" + currentPhoto.exposureProgram + "</td></tr>";
|
||||||
|
if (currentPhoto.exposureCompensation != undefined) text += "<tr><td>Exposure Compensation</td><td>" + getDecimal(currentPhoto.exposureCompensation) + "</td></tr>";
|
||||||
|
if (currentPhoto.spectralSensitivity != undefined) text += "<tr><td>Spectral Sensitivity</td><td>" + currentPhoto.spectralSensitivity + "</td></tr>";
|
||||||
|
if (currentPhoto.flash != undefined) text += "<tr><td>Flash</td><td>" + currentPhoto.flash + "</td></tr>";
|
||||||
|
if (currentPhoto.orientation != undefined) text += "<tr><td>Orientation</td><td>" + currentPhoto.orientation + "</td></tr>";
|
||||||
|
text += "</table>";
|
||||||
|
$("#metadata").html(text);
|
||||||
|
|
||||||
|
$("#album-view").addClass("photo-view-container");
|
||||||
|
$("#subalbums").hide();
|
||||||
|
$("#photo-view").show();
|
||||||
|
}
|
||||||
|
function scrollToThumb() {
|
||||||
|
var photo = currentPhoto
|
||||||
|
if (photo == null) {
|
||||||
|
photo = previousPhoto;
|
||||||
|
if (photo == null)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var thumb;
|
||||||
|
$("#thumbs img").each(function() {
|
||||||
|
if (this.photo == photo) {
|
||||||
|
thumb = $(this);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (typeof thumb === "undefined")
|
||||||
|
return;
|
||||||
|
if (currentPhoto != 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");
|
||||||
|
|
||||||
|
if (currentPhoto != null) {
|
||||||
|
$("#thumbs img").removeClass("current-thumb");
|
||||||
|
thumb.addClass("current-thumb");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function die() {
|
||||||
|
$("#error-overlay").fadeTo(500, 0.8);
|
||||||
|
$("#error-text").fadeIn(2500);
|
||||||
|
$("body, html").css("overflow", "hidden");
|
||||||
|
}
|
||||||
|
function undie() {
|
||||||
|
$("#error-text, #error-overlay").fadeOut(500);
|
||||||
|
$("body, html").css("overflow", "auto");
|
||||||
|
}
|
||||||
|
|
||||||
|
function hashParsed(album, photo, photoIndex) {
|
||||||
|
undie();
|
||||||
|
$("#loading").hide();
|
||||||
|
if (album == currentAlbum && photo == currentPhoto)
|
||||||
|
return;
|
||||||
|
previousAlbum = currentAlbum;
|
||||||
|
previousPhoto = currentPhoto;
|
||||||
|
currentAlbum = album;
|
||||||
|
currentPhoto = photo;
|
||||||
|
currentPhotoIndex = photoIndex;
|
||||||
|
setTitle();
|
||||||
|
showAlbum(previousAlbum != currentAlbum);
|
||||||
|
if (photo != null)
|
||||||
|
showPhoto();
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentAlbum = null;
|
||||||
|
var currentPhoto = null;
|
||||||
|
var currentPhotoIndex = -1;
|
||||||
|
var previousAlbum = null;
|
||||||
|
var previousPhoto = null;
|
||||||
|
var originalTitle = document.title;
|
||||||
|
var photoFloat = new PhotoFloat();
|
||||||
|
$(window).hashchange(function() {
|
||||||
|
$("#loading").show();
|
||||||
|
$("link[rel=image_src]").remove();
|
||||||
|
photoFloat.parseHash(location.hash, hashParsed, die);
|
||||||
|
});
|
||||||
|
$(window).hashchange();
|
||||||
|
$(document).keydown(function(e){
|
||||||
|
if (currentPhoto == 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;
|
||||||
|
});
|
||||||
|
$(document).mousewheel(function(event, delta) {
|
||||||
|
if (currentPhoto == null)
|
||||||
|
return true;
|
||||||
|
if (delta < 0) {
|
||||||
|
window.location.href = $("#next").attr("href");
|
||||||
|
return false;
|
||||||
|
} else if (delta > 0) {
|
||||||
|
window.location.href = $("#back").attr("href");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
$("#photo-box").mouseenter(function() {
|
||||||
|
$("#photo-links").stop().fadeTo("slow", 0.50).css("display", "inline");
|
||||||
|
});
|
||||||
|
$("#photo-box").mouseleave(function() {
|
||||||
|
$("#photo-links").stop().fadeOut("slow");
|
||||||
|
});
|
||||||
|
$("#next, #back").mouseenter(function() {
|
||||||
|
$(this).fadeTo("slow", 1);
|
||||||
|
});
|
||||||
|
$("#next, #back").mouseleave(function() {
|
||||||
|
$(this).fadeTo("slow", 0.35);
|
||||||
|
});
|
||||||
|
$("#metadata-link").click(function() {
|
||||||
|
if (!$("#metadata").is(":visible"))
|
||||||
|
$("#metadata").stop()
|
||||||
|
.css("height", 0)
|
||||||
|
.css("padding-top", 0)
|
||||||
|
.css("padding-bottom", 0)
|
||||||
|
.show()
|
||||||
|
.animate({ height: $("#metadata > table").height(), paddingTop: 3, paddingBottom: 3 }, "slow", function() {
|
||||||
|
$(this).css("height", "auto");
|
||||||
|
$("#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"));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -11,5 +11,5 @@ $(window).load(function () {
|
|||||||
$(window).hashchange(function() {
|
$(window).hashchange(function() {
|
||||||
window._gaq = window._gaq || [];
|
window._gaq = window._gaq || [];
|
||||||
window._gaq.push(['_trackPageview']);
|
window._gaq.push(['_trackPageview']);
|
||||||
window._gaq.push(['_trackPageview', window.hashUrl()]);
|
window._gaq.push(['_trackPageview', PhotoFloat.cleanHash(location.hash)]);
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user