UI improvements

Channeling more through ng.html, less through
velocity templates.

src/main/java/org/forkalsrud/album/exif/SearchResults.java

@@ -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>() {
+    Comparator<SearchEntry> sort = (e1, e2) -> Integer.valueOf(e2.score).compareTo(e1.score);
-
-        @Override
-        public int compare(SearchEntry e1, SearchEntry e2) {
-
-            return Integer.valueOf(e2.score).compareTo(e1.score);
-        }
-     };
 
 
     protected SearchResults(DirectoryEntry root) {

src/main/java/org/forkalsrud/album/web/AlbumServlet.java

@@ -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.*;
-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.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())) {
+                addDir(root, entry.parent(), "parent", mapper);
-                    root.put("parent", mapper.map(entry.parent().getPath()));
+                addDir(root, entry.prev(), "prev", mapper);
-                }
+                addDir(root, entry.next(), "next", mapper);
-                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()));
-                }
                 if (entry.groupByYear()) {
                     root.put("groupPrefix", 4);
                 }
-                ArrayNode contents = root.putArray("contents");
+                ArrayNode list = root.putArray("contents");
-                for (Entry e : entry.getContents()) {
+                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);

src/main/webapp/WEB-INF/ng.html

@@ -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>
+<form id="search" action="/photo/album/search" method="get"><!--
-<h1 id="titleBar" style="height: 32;"><!--
+ --><h1 id="titleBar" style="height: 32;"><!--
- --><img class="nav" width="26" height="32" src="/photo/assets/left-inactive.png"><!--
+ --><img id="arrowLeft"  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 id="arrowUp"    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">&nbsp;</h1>
+ --><img id="arrowRight" class="nav" width="26" height="32" src="/photo/assets/right-inactive.png"><!--
+ -->&nbsp;<!--
+ --><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"><!--
+ --></h1><!--
+ --></form>
 <hr/>
 </body>
 </html>

src/main/webapp/assets/render.js

@@ -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 + "\">"
+                       		+ "   <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" ? encodeURIComponent(entry.path) + ".frame" : encodeURIComponent(entry.path)) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
+                       		+ "<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,18 +147,7 @@ $(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;
@@ -143,15 +164,14 @@ $(function() {
         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);
+
+
 
 });