knut/album
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Integrate search funtion in UI

Browse source
This commit is contained in:
Knut Forkalsrud 2024-09-16 17:11:10 -07:00
parent da75204ded
commit 2b8f7e474a
5 changed files with 41 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pom.xml
View file

@ -119,7 +119,7 @@
<dependency>
<groupId>com.drewnoakes</groupId>
<artifactId>metadata-extractor</artifactId>
<version>2.18.0</version>
<version>2.19.0</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>

9
src/main/java/org/forkalsrud/album/exif/Dimension.java
View file

@ -26,7 +26,14 @@ public class Dimension {
}
public Dimension(String s) {
String[] coords = s.split("x");
String[] coords;
if (s.contains("x")) {
coords = s.split("x");
} else if (s.contains(" ")) {
coords = s.split(" ");
} else {
throw new RuntimeException("Bad dimension: " + s);
}
this.w = Integer.parseInt(coords[0]);
this.h = Integer.parseInt(coords[1]);
}

3
src/main/java/org/forkalsrud/album/exif/DirectoryMetadataGenerator.java
View file

@ -143,6 +143,9 @@ public class DirectoryMetadataGenerator {
} catch (ImageProcessingException e) {
// not a JPEG file
return null;
} catch (RuntimeException e) {
log.error("Unexpected error processing file " + f.getAbsolutePath(), e);
return null;
}
try {
Directory exifDirectory = metadata.getFirstDirectoryOfType(ExifIFD0Directory.class);

8
src/main/webapp/WEB-INF/ng.html
View file

@ -82,9 +82,6 @@
#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>
@ -98,10 +95,11 @@
--><span id="entryName"></span><!--
-->&nbsp;<!--
--><input id="searchBox" type="search" name="q" value=""><!--
--><input type="reset" value="X" alt="Clear the search form"><!--
--><input type="submit" value="Search"><!--
--><input id="reset" type="reset" value="X" alt="Clear the search form"><!--
--><input id="submit" type="submit" value="Search"><!--
--></h1><!--
--></form>
<hr/>
<div id="container"></div>
</body>
</html>

66
src/main/webapp/assets/render.js
View file

@ -17,6 +17,8 @@ $(function() {
function renderGrid(data, textStatus) {
var container = $("#container");
container.empty();
$("#name").text(data.name);
document.title = data.name;
@ -62,11 +64,11 @@ $(function() {
if (data.groupPrefix && entry.type == "dir") {
thisName = entry.earliest;
if (prevName != null && prevName != thisName) {
$("<hr/>").appendTo("body");
$("<hr/>").appendTo(container);
prevName = null;
}
if (prevName == null) {
$("<h2></h2>").text(thisName).appendTo("body");
$("<h2></h2>").text(thisName).appendTo(container);
prevName = thisName;
}
}
@ -79,53 +81,17 @@ $(function() {
+ "<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");
var captionP = $("<p class=\"caption\"></p>\n");
captionP.attr("id", entry.name);
if (entry.caption) {
captionP.text(entry.caption);
}
captionP.appendTo(gridDiv);
gridDiv.appendTo('body');
gridDiv.appendTo(container);
switch (entry.type) {
case "movie":
var size = scale(entry.width, entry.height, movieSize);
var href = "/photo/album" + escape(entry.path) + ".movie?size=" + movieSize;
$("#ent" + idx).attr("rel", "album").attr("href", href).fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeInQuad',
'easingOut' : 'easeOutQuad',
'titleFormat' : formatCaption,
'padding' : 0,
'href' : "/photo/assets/flowplayer/flowplayer-3.0.3.swf",
'width' : size.w,
'height' : size.h,
'type' : 'swf',
'swf' : {
'allowfullscreen' : 'true',
'wmode' : 'transparent',
'flashvars':
"config={\
'clip': {\
'url': '" + href + "'\
},\
'plugins': {\
'controls': {\
'url': '/photo/assets/flowplayer/flowplayer.controls-3.0.3.swf',\
'backgroundColor': 'transparent',\
'progressColor': 'transparent',\
'bufferColor': 'transparent',\
'play':true,\
'fullscreen':true,\
'autoHide': 'always'\
}\
}\
}"
}
});
break;
case "image":
var largeDim = scale(entry.width, entry.height, picSize);
$("#ent" + idx).attr("rel", "album").fancybox({
@ -167,7 +133,25 @@ $(function() {
}
$("#search").on("submit", function () {
var searchStr = "?q=" + encodeURI($("#searchBox").val());
history.pushState({ }, null, searchStr);
$.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json') + searchStr, renderGrid);
return false;
});
function resetSearch() {
$("#searchBox").val("");
history.pushState({ }, null, location.pathname);
$.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json'), renderGrid);
return false;
}
$("#search").on("reset", resetSearch);
$("#searchBox").keyup(function (e) {
if (e.key === "Escape") {
resetSearch();
}
});
$.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json') + location.search, renderGrid);