aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/css/000-controls.css89
-rw-r--r--web/css/000-main.css0
-rw-r--r--web/css/001-fonts.css24
-rw-r--r--web/fonts/lmroman10-bold.otfbin0 -> 111240 bytes
-rw-r--r--web/fonts/lmroman10-bolditalic.otfbin0 -> 118204 bytes
-rw-r--r--web/fonts/lmroman10-italic.otfbin0 -> 118828 bytes
-rw-r--r--web/fonts/lmroman10-regular.otfbin0 -> 111536 bytes
-rw-r--r--web/index.html22
-rw-r--r--web/js/010-control.js175
-rw-r--r--web/js/010-debugger.js102
10 files changed, 300 insertions, 112 deletions
diff --git a/web/css/000-controls.css b/web/css/000-controls.css
new file mode 100644
index 0000000..e43818e
--- /dev/null
+++ b/web/css/000-controls.css
@@ -0,0 +1,89 @@
+body {
+ margin: 0;
+ padding: 0;
+ background-color: #222222;
+ font-family: "LM Roman", "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", "Times", serif;
+ color: #FFFFFF;
+}
+a {
+ color: #88EE44;
+ text-decoration: none;
+}
+a:hover {
+ color: #DDDDDD;
+}
+#title {
+ position: absolute;
+ top: 0;
+ padding: 0.4em;
+ font-weight: bold;
+ font-size: 1.2em;
+}
+#loading {
+ display: none;
+}
+
+
+#album-view {
+ position: absolute;
+ top: 2.5em;
+ padding: 1em;
+}
+#thumbs {
+ line-height: 0;
+}
+
+#thumbs img {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+#subalbums {
+}
+.album-button {
+ float: left;
+ display: block;
+ width: 150px;
+ height: 150px;
+ margin-right: 10px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ text-align: center;
+ font-style: italic;
+ border: 1px #86A1B6 dotted;
+}
+
+
+#next, #back {
+ position: absolute;
+ width: auto;
+ font-size: 2.5em;
+ line-height: 0;
+ padding-top: 0.3em;
+}
+#back {
+ left: 0;
+}
+#next {
+ right: 0;
+}
+#photo {
+ border: 0;
+}
+#photo-view {
+ position: absolute;
+ bottom: 150px;
+ top: 2.5em;
+ margin: 0 auto;
+}
+.photo-view-container {
+ position: absolute;
+ height: 150px;
+ width: 100%;
+ bottom: 0;
+ top: auto !important;
+ overflow-x: auto;
+ overflow-y: hidden;
+ white-space: nowrap;
+ padding: 0 !important;
+}
diff --git a/web/css/000-main.css b/web/css/000-main.css
deleted file mode 100644
index e69de29..0000000
--- a/web/css/000-main.css
+++ /dev/null
diff --git a/web/css/001-fonts.css b/web/css/001-fonts.css
new file mode 100644
index 0000000..20f68e3
--- /dev/null
+++ b/web/css/001-fonts.css
@@ -0,0 +1,24 @@
+@font-face {
+ font-family: "LM Roman";
+ font-weight: bold;
+ font-style: normal;
+ src: url("/fonts/lmroman10-bold.otf");
+}
+@font-face {
+ font-family: "LM Roman";
+ font-weight: bold;
+ font-style: italic;
+ src: url("/fonts/lmroman10-bolditalic.otf");
+}
+@font-face {
+ font-family: "LM Roman";
+ font-weight: normal;
+ font-style: italic;
+ src: url("/fonts/lmroman10-italic.otf");
+}
+@font-face {
+ font-family: "LM Roman";
+ font-weight: normal;
+ font-style: normal;
+ src: url("/fonts/lmroman10-regular.otf");
+} \ No newline at end of file
diff --git a/web/fonts/lmroman10-bold.otf b/web/fonts/lmroman10-bold.otf
new file mode 100644
index 0000000..7d6afa7
--- /dev/null
+++ b/web/fonts/lmroman10-bold.otf
Binary files differ
diff --git a/web/fonts/lmroman10-bolditalic.otf b/web/fonts/lmroman10-bolditalic.otf
new file mode 100644
index 0000000..98297be
--- /dev/null
+++ b/web/fonts/lmroman10-bolditalic.otf
Binary files differ
diff --git a/web/fonts/lmroman10-italic.otf b/web/fonts/lmroman10-italic.otf
new file mode 100644
index 0000000..b369873
--- /dev/null
+++ b/web/fonts/lmroman10-italic.otf
Binary files differ
diff --git a/web/fonts/lmroman10-regular.otf b/web/fonts/lmroman10-regular.otf
new file mode 100644
index 0000000..6a96b46
--- /dev/null
+++ b/web/fonts/lmroman10-regular.otf
Binary files differ
diff --git a/web/index.html b/web/index.html
index 8e97590..c96bfaa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,21 +3,23 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <title>PhotoFloat</title>
+ <title>JasonDonenfeld.com &#8211; Colors</title>
<link href="css/styles.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/scripts.min.js"></script>
</head>
<body>
-<div id="album">
-<h2 id="title"></h2>
-
-<h3>Photos</h3>
-<div id="photos"></div>
-
-<h3 id="subalbums-title">Sub-albums</h3>
-<div id="subalbums"></div>
+<div id="title">Colors</div>
+<div id="album-view">
+ <div id="thumbs">
+ <div id="loading">Loading...</div>
+ </div>
+ <div id="subalbums"></div>
+</div>
+<div id="photo-view">
+ <a id="next-photo"><img id="photo" /></a>
+ <a id="back">&larr;</a>
+ <a id="next">&rarr;</a>
</div>
-<div id="photo"></div>
</body>
</html>
diff --git a/web/js/010-control.js b/web/js/010-control.js
new file mode 100644
index 0000000..37ca797
--- /dev/null
+++ b/web/js/010-control.js
@@ -0,0 +1,175 @@
+$(document).ready(function() {
+ function cachePath(path) {
+ if (path == "")
+ return "root";
+ if (path[0] == '/')
+ path = path.substring(1);
+ return path.replace(/ /g, "_").replace(/\//g, "-");
+ }
+ 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 loadAlbum() {
+ if (current_album_cache in album_cache) {
+ albumLoaded(album_cache[current_album_cache]);
+ return;
+ }
+ $("#loading").show();
+ $.ajax({
+ type: "GET",
+ url: "cache/" + current_album_cache + ".json",
+ error: function() { $(document.body).html("Couldn't fetch it."); },
+ success: albumLoaded
+ });
+ }
+ function albumLoaded(album) {
+ $("#loading").hide();
+ album_cache[cachePath(album.path)] = album;
+ current_album = album;
+ if (cachePath(album.path) == current_album_cache)
+ showAlbum();
+ if (current_photo_cache != null)
+ showPhoto();
+ setTitle();
+ }
+ function setTitle() {
+ var title = "";
+ var components;
+ if (current_album.path.length == 0)
+ components = [document.title];
+ else {
+ components = current_album.path.split("/");
+ components.unshift(document.title);
+ }
+ var last = "";
+ for (var i = 0; i < components.length; ++i) {
+ 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];
+ if (i < components.length - 1 || current_photo_cache != null) {
+ title += "</a>";
+ title += " &raquo; ";
+ }
+ }
+ if (current_photo_cache != null)
+ title += current_photo.name;
+ $("#title").html(title);
+ }
+ function showAlbum() {
+ $("html, body").animate({ scrollTop: 0 }, "slow");
+ 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 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);
+ if (current_album.albums.length)
+ $("#subalbums-title").show();
+ else
+ $("#subalbums-title").hide();
+ var subalbums = "";
+ for (var i = 0; i < current_album.albums.length; ++i)
+ subalbums += "<a href=\"#" + cachePath(current_album.path + "/" + current_album.albums[i].path) + "\"><div class=\"album-button\">" + current_album.albums[i].path + "</div></a>";
+ $("#subalbums").html(subalbums);
+
+ $("#album-view").removeClass("photo-view-container");
+ $("#subalbums").show();
+ $("#photo-view").hide();
+ }
+ function showPhoto() {
+ currentPhoto();
+ if (current_photo == null) {
+ $(document.body).html("Wrong picture.");
+ return;
+ }
+ var maxSize = 640;
+ 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;
+ }
+ $("#photo")
+ .attr("width", width).attr("height", height)
+ .attr("src", imagePath(current_photo.name, current_album.path, maxSize, false))
+ .attr("alt", current_photo.name)
+ .attr("title", current_photo.name);
+ var nextLink = "#" + current_album_cache + "/" + cachePath(current_album.photos[
+ (current_photo_index + 1 >= current_album.photos.length) ? 0 : (current_photo_index + 1)
+ ].name);
+ $("#next-photo").attr("href", nextLink);
+ $("#next").attr("href", nextLink);
+ $("#back").attr("href", "#" + current_album_cache + "/" + cachePath(current_album.photos[
+ (current_photo_index - 1 < 0) ? (current_album.photos.length - 1) : (current_photo_index - 1)
+ ].name));
+
+ $("#album-view").addClass("photo-view-container");
+ $("#subalbums").hide();
+ $("#photo-view").show();
+ var thumb = $("#thumb-" + current_photo_cache.replace(/\./g, "\\."));
+ var scroller = $("#album-view");
+ scroller.stop();
+ scroller.animate({ scrollLeft: thumb.position().left + scroller.scrollLeft() - scroller.width() / 2 + thumb.width() / 2 }, "slow");
+ }
+ 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];
+ }
+ var current_album_cache = null;
+ var current_photo_cache = null;
+ var current_album = null;
+ var current_photo = null;
+ var current_photo_index = -1;
+ var album_cache = new Array();
+ $(window).hashchange(function() {
+ var new_album_cache = location.hash.substring(1);
+ var index = new_album_cache.lastIndexOf("/");
+ if (index != -1 && index != new_album_cache.length - 1) {
+ current_photo_cache = new_album_cache.substring(index + 1);
+ new_album_cache = new_album_cache.substring(0, index);
+ } else
+ 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;
+ loadAlbum();
+ } else if (current_photo_cache != null) {
+ showAlbum();
+ showPhoto();
+ setTitle();
+ } else {
+ showAlbum();
+ 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;
+ });
+});
diff --git a/web/js/010-debugger.js b/web/js/010-debugger.js
deleted file mode 100644
index 31d3db8..0000000
--- a/web/js/010-debugger.js
+++ /dev/null
@@ -1,102 +0,0 @@
-$(document).ready(function() {
- function cachePath(path) {
- return path.replace(/ /g, "_").replace(/\//g, "-");
- }
- 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 loadAlbum(path) {
- if (path in album_cache) {
- albumLoaded(album_cache[path]);
- return;
- }
- $.ajax({
- type: "GET",
- url: "cache/" + path + ".json",
- error: function() { $(document.body).html("Couldn't fetch it."); },
- success: albumLoaded
- });
- }
- function albumLoaded(album) {
- album_cache[cachePath(album.path)] = album;
- current_album = album;
- if (current_image_cache != null)
- showPhoto();
- else if (cachePath(album.path) == current_album_cache)
- showAlbum();
- }
- function showAlbum() {
- $("html, body").animate({ scrollTop: 0 }, "slow");
- var title = "";
- var components = current_album.path.split("/");
- var last = "";
- for (var i = 0; i < components.length; ++i) {
- last += "/" + components[i];
- if (i < components.length - 1)
- title += "<a href=\"#" + cachePath(last.substring(1)) + "\">";
- title += components[i];
- if (i < components.length - 1) {
- title += "</a>";
- title += " &raquo; ";
- }
- }
- $("#title").html(title);
- 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 border=0 src=\"" + imagePath(current_album.photos[i].name, current_album.path, 150, true) + "\" height=150 width=150></a>";
- $("#photos").html(photos);
- if (current_album.albums.length)
- $("#subalbums-title").show();
- else
- $("#subalbums-title").hide();
- var subalbums = "";
- for (var i = 0; i < current_album.albums.length; ++i)
- subalbums += "<a href=\"#" + cachePath(current_album.path + "/" + current_album.albums[i].path) + "\"><li>" + current_album.albums[i].path + "</li></a>";
- $("#subalbums").html(subalbums);
-
- $("#album").fadeIn();
- $("#photo").fadeOut();
- }
- function showPhoto() {
- var index;
- for (index = 0; index < current_album.photos.length; ++index) {
- if (cachePath(current_album.photos[index].name) == current_image_cache)
- break;
- }
- if (index >= current_album.photos.length) {
- $(document.body).html("Wrong picture.");
- return;
- }
- $("#photo").html("<a href=\"#" + current_album_cache + "\"><img src=\"" + imagePath(current_album.photos[index].name, current_album.path, 640, false) + "\"></a>");
- $("#album").fadeOut();
- $("#photo").fadeIn();
- }
- var current_album_cache = "";
- var current_image_cache = "";
- var current_album = null;
- var album_cache = new Array();
- $(window).hashchange(function() {
- var new_album_cache = location.hash.substring(1);
- var index = new_album_cache.lastIndexOf("/");
- if (index != -1 && index != new_album_cache.length - 1) {
- current_image_cache = new_album_cache.substring(index + 1);
- new_album_cache = new_album_cache.substring(0, index);
- } else
- current_image_cache = null;
- if (!new_album_cache.length)
- new_album_cache = cachePath("New York Summer 2009"); //root
- if (new_album_cache != current_album_cache) {
- current_album_cache = new_album_cache;
- loadAlbum(current_album_cache);
- } else if (current_image_cache != null)
- showPhoto();
- else
- showAlbum();
- });
- $(window).hashchange();
-});
Copyright © 1996 – 2023 Jason A. Donenfeld. All Rights Reverse Engineered.