Integrate search funtion in UI

pom.xml

@@ -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>

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

@@ -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]);
     }

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

@@ -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);

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

@@ -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 id="reset" type="reset" value="X" alt="Clear the search form"><!--
- --><input type="submit" value="Search"><!--
+ --><input id="submit" type="submit" value="Search"><!--
  --></h1><!--
  --></form>
 <hr/>
+<div id="container"></div>
 </body>
 </html>

src/main/webapp/assets/render.js

@@ -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);