diff options
Diffstat (limited to 'web/js/011-display.js')
| -rw-r--r-- | web/js/011-display.js | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/web/js/011-display.js b/web/js/011-display.js new file mode 100644 index 0000000..a8f6a02 --- /dev/null +++ b/web/js/011-display.js @@ -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")); + }); + }); +}); |