UI improvements
Channeling more through ng.html, less through velocity templates.
This commit is contained in:
parent
9851784fde
commit
da75204ded
4 changed files with 103 additions and 70 deletions
|
|
@ -9,14 +9,7 @@ import java.util.HashMap;
|
|||
public class SearchResults extends EntryWithChildren<SearchEntry> {
|
||||
|
||||
protected HashMap<File, SearchEntry> dupes = new HashMap<File, SearchEntry>();
|
||||
Comparator<SearchEntry> sort = new Comparator<SearchEntry>() {
|
||||
|
||||
@Override
|
||||
public int compare(SearchEntry e1, SearchEntry e2) {
|
||||
|
||||
return Integer.valueOf(e2.score).compareTo(e1.score);
|
||||
}
|
||||
};
|
||||
Comparator<SearchEntry> sort = (e1, e2) -> Integer.valueOf(e2.score).compareTo(e1.score);
|
||||
|
||||
|
||||
protected SearchResults(DirectoryEntry root) {
|
||||
|
|
|
|||
|
|
@ -25,13 +25,7 @@ import org.forkalsrud.album.db.DirectoryDatabase;
|
|||
import org.forkalsrud.album.db.DirectoryProps;
|
||||
import org.forkalsrud.album.db.MovieDatabase;
|
||||
import org.forkalsrud.album.db.ThumbnailDatabase;
|
||||
import org.forkalsrud.album.exif.DirectoryEntry;
|
||||
import org.forkalsrud.album.exif.DirectoryEntryFactory;
|
||||
import org.forkalsrud.album.exif.Entry;
|
||||
import org.forkalsrud.album.exif.FileEntry;
|
||||
import org.forkalsrud.album.exif.SearchEngine;
|
||||
import org.forkalsrud.album.exif.SearchResults;
|
||||
import org.forkalsrud.album.exif.Thumbnail;
|
||||
import org.forkalsrud.album.exif.*;
|
||||
import org.forkalsrud.album.video.MovieCoder;
|
||||
import org.springframework.web.util.HtmlUtils;
|
||||
|
||||
|
|
@ -323,6 +317,19 @@ public class AlbumServlet
|
|||
|
||||
void handleJson(HttpServletRequest req, HttpServletResponse res, DirectoryEntry entry) {
|
||||
try {
|
||||
|
||||
|
||||
EntryWithChildren<?> contents;
|
||||
String query = req.getParameter("q");
|
||||
if (query != null && !"".equals(query.trim())) {
|
||||
SearchEngine search = new SearchEngine(entry);
|
||||
SearchResults results = search.search(query);
|
||||
contents = results;
|
||||
} else {
|
||||
contents = entry;
|
||||
}
|
||||
|
||||
|
||||
Mapper mapper = new Mapper(base);
|
||||
res.setContentType("application/json");
|
||||
res.setCharacterEncoding("UTF-8");
|
||||
|
|
@ -331,22 +338,17 @@ public class AlbumServlet
|
|||
ObjectNode root = json.createObjectNode();
|
||||
root.put("name", entry.getName());
|
||||
|
||||
if (entry.parent() != null && "dir".equals(entry.parent().getType())) {
|
||||
root.put("parent", mapper.map(entry.parent().getPath()));
|
||||
}
|
||||
if (entry.prev() != null && "dir".equals(entry.prev().getType())) {
|
||||
root.put("prev", mapper.map(entry.prev().getPath()));
|
||||
}
|
||||
if (entry.next() != null && "dir".equals(entry.next().getType())) {
|
||||
root.put("next", mapper.map(entry.next().getPath()));
|
||||
}
|
||||
addDir(root, entry.parent(), "parent", mapper);
|
||||
addDir(root, entry.prev(), "prev", mapper);
|
||||
addDir(root, entry.next(), "next", mapper);
|
||||
|
||||
if (entry.groupByYear()) {
|
||||
root.put("groupPrefix", 4);
|
||||
}
|
||||
ArrayNode contents = root.putArray("contents");
|
||||
for (Entry e : entry.getContents()) {
|
||||
ArrayNode list = root.putArray("contents");
|
||||
for (Entry e : contents.getContents()) {
|
||||
try {
|
||||
ObjectNode item = contents.addObject();
|
||||
ObjectNode item = list.addObject();
|
||||
item.put("name", e.getName());
|
||||
item.put("type", e.getType());
|
||||
if ("dir".equals(e.getType())) {
|
||||
|
|
@ -377,6 +379,14 @@ public class AlbumServlet
|
|||
}
|
||||
|
||||
|
||||
void addDir(ObjectNode root, Entry candidate, String label, Mapper mapper) {
|
||||
if (candidate != null && "dir".equals(candidate.getType())) {
|
||||
root.put(label, mapper.map(candidate.getPath()));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
void handleCache(HttpServletRequest req, HttpServletResponse res, DirectoryEntry entry) {
|
||||
if (entry == null) {
|
||||
res.setStatus(HttpServletResponse.SC_NOT_FOUND);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
text-align: left;
|
||||
}
|
||||
form {
|
||||
float: right;
|
||||
display: inline;
|
||||
}
|
||||
h2 {
|
||||
|
|
@ -83,15 +82,26 @@
|
|||
#fancybox-left, #fancybox-right {
|
||||
bottom: 30px;
|
||||
}
|
||||
input[type=search]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: searchfield-cancel-button;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="/photo/assets/render.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<form id="search" action="/photo/album/search" method="get"><input name="q" value=""></form>
|
||||
<h1 id="titleBar" style="height: 32;"><!--
|
||||
--><img class="nav" width="26" height="32" src="/photo/assets/left-inactive.png"><!--
|
||||
--><img class="nav" width="26" height="32" src="/photo/assets/up-inactive.png"><!--
|
||||
--><img class="nav" width="26" height="32" src="/photo/assets/right-inactive.png"> </h1>
|
||||
<form id="search" action="/photo/album/search" method="get"><!--
|
||||
--><h1 id="titleBar" style="height: 32;"><!--
|
||||
--><img id="arrowLeft" class="nav" width="26" height="32" src="/photo/assets/left-inactive.png"><!--
|
||||
--><img id="arrowUp" class="nav" width="26" height="32" src="/photo/assets/up-inactive.png"><!--
|
||||
--><img id="arrowRight" class="nav" width="26" height="32" src="/photo/assets/right-inactive.png"><!--
|
||||
--> <!--
|
||||
--><span id="entryName"></span><!--
|
||||
--> <!--
|
||||
--><input id="searchBox" type="search" name="q" value=""><!--
|
||||
--><input type="reset" value="X" alt="Clear the search form"><!--
|
||||
--><input type="submit" value="Search"><!--
|
||||
--></h1><!--
|
||||
--></form>
|
||||
<hr/>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
$(function() {
|
||||
|
||||
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
||||
function formatCaption(title, currentArray, currentIndex, currentOpts) {
|
||||
var captionElement = document.getElementById(title);
|
||||
return captionElement.innerHTML;
|
||||
}
|
||||
|
|
@ -25,6 +25,38 @@ $(function() {
|
|||
var movieSize = 640;
|
||||
var prevName = null, thisName;
|
||||
|
||||
function updateButton(selector, direction, destination) {
|
||||
var imgName = destination ? direction : direction + "-inactive",
|
||||
imgUrl = "/photo/assets/" + imgName + ".png",
|
||||
imgElement = $(selector),
|
||||
isWrapped = imgElement.parent().get()[0].tagName == "A",
|
||||
anchor = isWrapped ? imgElement.parent() : $("<a></a>");
|
||||
if (destination) {
|
||||
anchor.attr("href", encodeURI("/photo/album" + destination + ".album") + location.search);
|
||||
if (!isWrapped) {
|
||||
imgElement.wrap(anchor);
|
||||
}
|
||||
} else {
|
||||
if (isWrapped) {
|
||||
imgElement.unwrap();
|
||||
}
|
||||
}
|
||||
imgElement.attr("src", imgUrl);
|
||||
}
|
||||
|
||||
$("#entryName").text(data.name);
|
||||
$("#arrowLeft").attr(data.name);
|
||||
updateButton("#arrowLeft", "left", data.prev);
|
||||
updateButton("#arrowUp", "up", data.parent);
|
||||
updateButton("#arrowRight", "right", data.next);
|
||||
if (location.search) {
|
||||
let params = new URL(location.href).searchParams;
|
||||
if (params.has("q")) {
|
||||
$("#searchBox").val(params.get("q"));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$.each(data.contents, function(idx, entry) {
|
||||
|
||||
if (data.groupPrefix && entry.type == "dir") {
|
||||
|
|
@ -43,8 +75,8 @@ $(function() {
|
|||
|
||||
var gridDiv = $("<div class=\"grid\">\n"
|
||||
+ " <span class=\"name\">" + entry.name + "</span><br/>\n"
|
||||
+ " <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"/photo/album" + encodeURIComponent(entry.path) + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
|
||||
+ "<img class=\"" + entry.type + "pic\" src=\"/photo/album" + (entry.thumbtype == "movie" ? encodeURIComponent(entry.path) + ".frame" : encodeURIComponent(entry.path)) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
|
||||
+ " <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"/photo/album" + encodeURI(entry.path) + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
|
||||
+ "<img class=\"" + entry.type + "pic\" src=\"/photo/album" + (entry.thumbtype == "movie" ? encodeURI(entry.path) + ".frame" : encodeURI(entry.path)) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
|
||||
+ "</div>\n");
|
||||
|
||||
var captionP = $("<p id=\"" + entry.name + "\" class=\"caption\"></p>\n");
|
||||
|
|
@ -65,7 +97,7 @@ $(function() {
|
|||
'transitionOut' : 'elastic',
|
||||
'easingIn' : 'easeInQuad',
|
||||
'easingOut' : 'easeOutQuad',
|
||||
'titleFormat' : formatTitle,
|
||||
'titleFormat' : formatCaption,
|
||||
'padding' : 0,
|
||||
'href' : "/photo/assets/flowplayer/flowplayer-3.0.3.swf",
|
||||
'width' : size.w,
|
||||
|
|
@ -102,7 +134,7 @@ $(function() {
|
|||
'transitionOut' : 'elastic',
|
||||
'easingIn' : 'easeInQuad',
|
||||
'easingOut' : 'easeOutQuad',
|
||||
'titleFormat' : formatTitle,
|
||||
'titleFormat' : formatCaption,
|
||||
'width' : largeDim.w,
|
||||
'height' : largeDim.h,
|
||||
'type' : "image",
|
||||
|
|
@ -115,43 +147,31 @@ $(function() {
|
|||
}
|
||||
|
||||
|
||||
function buildButton(direction, destination, transform) {
|
||||
var imgName = destination ? direction : direction + "-inactive",
|
||||
imgElement = $("<img class=\"nav\" width=\"26\" height=\"32\" src=\"/photo/assets/" + imgName + ".png\"/>");
|
||||
if (destination) {
|
||||
return $("<a></a>").attr("href", "/photo/album" + destination + ".album").append(imgElement);
|
||||
} else {
|
||||
return imgElement;
|
||||
}
|
||||
}
|
||||
|
||||
$("#titleBar").html("").append(buildButton("left", data.prev)).append(buildButton("up", data.parent)).append(buildButton("right", data.next)).append(" " + data.name);
|
||||
|
||||
|
||||
|
||||
var selectedImg = window.location.search;
|
||||
var selectedPos = undefined;
|
||||
if (/^\?focus=/.test(selectedImg)) {
|
||||
selectedImg = selectedImg.substring('?focus='.length);
|
||||
$("a.ss").each(function(index) {
|
||||
if (selectedImg == $(this).attr("title")) {
|
||||
selectedPos = index;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selectedPos !== undefined) {
|
||||
$("#ent" + selectedPos).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var selectedImg = window.location.search;
|
||||
var selectedPos = undefined;
|
||||
if (/^\?focus=/.test(selectedImg)) {
|
||||
selectedImg = selectedImg.substring('?focus='.length);
|
||||
$("a.ss").each(function(index) {
|
||||
if (selectedImg == $(this).attr("title")) {
|
||||
selectedPos = index;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (selectedPos !== undefined) {
|
||||
$("#ent" + selectedPos).trigger('click');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$("#search").each(function (id, el) {
|
||||
el.action = location.pathname.replace(/\.album(\?|$)/, '.search');
|
||||
});
|
||||
|
||||
$.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json'), renderGrid);
|
||||
|
||||
$.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json') + location.search, renderGrid);
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue