Eliminating Velocity rendering
This commit is contained in:
parent
42e1179aca
commit
053d532655
4 changed files with 263 additions and 4 deletions
|
|
@ -477,7 +477,7 @@ public class FlvMetadata {
|
||||||
}
|
}
|
||||||
|
|
||||||
public void setDurationFromLastTimestamp() {
|
public void setDurationFromLastTimestamp() {
|
||||||
if (duration.value == null || duration.value.doubleValue() <= 0) {
|
if ((duration.value == null || duration.value.doubleValue() <= 0) && lasttimestamp != null && lasttimestamp.value != null) {
|
||||||
setDuration(lasttimestamp.value / 1000d);
|
setDuration(lasttimestamp.value / 1000d);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import java.io.FileOutputStream;
|
||||||
import java.io.FileReader;
|
import java.io.FileReader;
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
import java.io.PrintWriter;
|
import java.io.PrintWriter;
|
||||||
|
import java.text.SimpleDateFormat;
|
||||||
import java.util.Calendar;
|
import java.util.Calendar;
|
||||||
import java.util.Date;
|
import java.util.Date;
|
||||||
import java.util.Properties;
|
import java.util.Properties;
|
||||||
|
|
@ -302,7 +303,7 @@ public class AlbumServlet
|
||||||
req.setAttribute("thmb", new Integer(250));
|
req.setAttribute("thmb", new Integer(250));
|
||||||
req.setAttribute("full", new Integer(800));
|
req.setAttribute("full", new Integer(800));
|
||||||
req.setAttribute("D", "$");
|
req.setAttribute("D", "$");
|
||||||
RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/dynamic.vm");
|
RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/ng.html");
|
||||||
rd.forward(req, res);
|
rd.forward(req, res);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -384,6 +385,18 @@ public class AlbumServlet
|
||||||
PrintWriter out = res.getWriter();
|
PrintWriter out = res.getWriter();
|
||||||
out.println("{");
|
out.println("{");
|
||||||
out.println(" \"name\": " + jsStr(entry.getName()) + ",");
|
out.println(" \"name\": " + jsStr(entry.getName()) + ",");
|
||||||
|
if (entry.parent() != null && "dir".equals(entry.parent().getType())) {
|
||||||
|
out.println(" \"parent\": " + jsStr(mapper.map(entry.parent().getPath())) + ",");
|
||||||
|
}
|
||||||
|
if (entry.prev() != null && "dir".equals(entry.prev().getType())) {
|
||||||
|
out.println(" \"prev\": " + jsStr(mapper.map(entry.prev().getPath())) + ",");
|
||||||
|
}
|
||||||
|
if (entry.next() != null && "dir".equals(entry.next().getType())) {
|
||||||
|
out.println(" \"next\": " + jsStr(mapper.map(entry.next().getPath())) + ",");
|
||||||
|
}
|
||||||
|
if (entry.groupByYear()) {
|
||||||
|
out.println(" \"groupPrefix\": 4,");
|
||||||
|
}
|
||||||
out.println(" \"contents\": [");
|
out.println(" \"contents\": [");
|
||||||
int n = 0;
|
int n = 0;
|
||||||
for (Entry e : entry.getContents()) {
|
for (Entry e : entry.getContents()) {
|
||||||
|
|
@ -392,14 +405,25 @@ public class AlbumServlet
|
||||||
out.println(" {");
|
out.println(" {");
|
||||||
out.println(" \"name\": " + jsStr(e.getName()) + ",");
|
out.println(" \"name\": " + jsStr(e.getName()) + ",");
|
||||||
out.println(" \"type\": " + jsStr(e.getType()) + ",");
|
out.println(" \"type\": " + jsStr(e.getType()) + ",");
|
||||||
|
if ("dir".equals(e.getType())) {
|
||||||
|
DirectoryEntry de = (DirectoryEntry)e;
|
||||||
|
if (de.getEarliest() != null) {
|
||||||
|
SimpleDateFormat sdf = new SimpleDateFormat("yyyy");
|
||||||
|
out.println(" \"earliest\": " + jsStr(sdf.format(de.getEarliest())) + ",");
|
||||||
|
}
|
||||||
|
}
|
||||||
Thumbnail thumb = e.getThumbnail();
|
Thumbnail thumb = e.getThumbnail();
|
||||||
if (thumb != null) {
|
if (thumb != null) {
|
||||||
out.println(" \"path\": " + jsStr(mapper.map(thumb.getPath())) + ",");
|
out.println(" \"path\": " + jsStr(mapper.map(thumb.getPath())) + ",");
|
||||||
out.println(" \"thumbtype\": " + jsStr(thumb.getType()) + ",");
|
out.println(" \"thumbtype\": " + jsStr(thumb.getType()) + ",");
|
||||||
out.println(" \"width\": " + thumb.getSize().getWidth() + ",");
|
out.println(" \"width\": " + thumb.getSize().getWidth() + ",");
|
||||||
out.println(" \"height\": " + thumb.getSize().getHeight() + ",");
|
out.print(" \"height\": " + thumb.getSize().getHeight());
|
||||||
|
}
|
||||||
|
if (e.getCaption() != null) {
|
||||||
|
out.println(",\n \"caption\": " + jsStr(e.getCaption()));
|
||||||
|
} else {
|
||||||
|
out.println();
|
||||||
}
|
}
|
||||||
out.println(" \"caption\": " + jsStr(e.getCaption()));
|
|
||||||
out.print(" }");
|
out.print(" }");
|
||||||
} catch (Exception ex) {
|
} catch (Exception ex) {
|
||||||
throw new Exception(e.toString(), ex);
|
throw new Exception(e.toString(), ex);
|
||||||
|
|
|
||||||
86
src/main/webapp/WEB-INF/ng.html
Normal file
86
src/main/webapp/WEB-INF/ng.html
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||||
|
<title>album</title>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="/photo/assets/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
|
||||||
|
<script type="text/javascript" src="/photo/assets/fancybox/jquery.easing-1.3.pack.js"></script>
|
||||||
|
<script type="text/javascript" src="/photo/assets/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
|
||||||
|
<script type="text/javascript" src="/photo/assets/flowplayer/flowplayer-3.0.3.min.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/photo/assets/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
|
||||||
|
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
body {
|
||||||
|
font-size: 11px;
|
||||||
|
font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
|
||||||
|
color: #6d6d6d;
|
||||||
|
background: #acc95f;
|
||||||
|
margin: 10px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
float: right;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-left: 30px;
|
||||||
|
text-align: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
a:link, a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #4c4c4c;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #6a6a6a;
|
||||||
|
}
|
||||||
|
div.photo {
|
||||||
|
align: center;
|
||||||
|
height: 200px;
|
||||||
|
margin 8px;
|
||||||
|
}
|
||||||
|
div.grid {
|
||||||
|
float: left;
|
||||||
|
height: 310px;
|
||||||
|
max-height: 310px;
|
||||||
|
max-width: 275px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
img.picture {
|
||||||
|
box-shadow: 5px 5px 5px #777;
|
||||||
|
-webkit-box-shadow: 5px 5px 5px #777;
|
||||||
|
-moz-box-shadow: 5px 5px 5px #777;
|
||||||
|
}
|
||||||
|
div.imgborder {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
border: 0 none;
|
||||||
|
padding: 0px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#fancybox-left, #fancybox-right {
|
||||||
|
bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" src="/photo/assets/render.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form 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>
|
||||||
|
<hr/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
149
src/main/webapp/assets/render.js
Normal file
149
src/main/webapp/assets/render.js
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
function formatTitle(title, currentArray, currentIndex, currentOpts) {
|
||||||
|
var captionElement = document.getElementById(title);
|
||||||
|
return captionElement.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
function scale(w, h, max) {
|
||||||
|
if (w > h) {
|
||||||
|
return { w : Math.floor(max), h: Math.floor((max * h + max / 2) / w) };
|
||||||
|
} else {
|
||||||
|
return { w: Math.floor((max * w + max / 2) / h), h: Math.floor(max) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json'), function(data, textStatus) {
|
||||||
|
|
||||||
|
$("#name").text(data.name);
|
||||||
|
$("title").text(data.name);
|
||||||
|
|
||||||
|
var thmb = 250;
|
||||||
|
var picSize = 800;
|
||||||
|
var movieSize = 640;
|
||||||
|
var prevName = null, thisName;
|
||||||
|
|
||||||
|
$.each(data.contents, function(idx, entry) {
|
||||||
|
|
||||||
|
if (data.groupPrefix && entry.type == "dir") {
|
||||||
|
thisName = entry.earliest;
|
||||||
|
if (prevName != null && prevName != thisName) {
|
||||||
|
$("<hr/>").appendTo("body");
|
||||||
|
prevName = null;
|
||||||
|
}
|
||||||
|
if (prevName == null) {
|
||||||
|
$("<h2></h2>").text(thisName).appendTo("body");
|
||||||
|
prevName = thisName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var dim = scale(entry.width, entry.height, thmb);
|
||||||
|
|
||||||
|
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" + entry.path + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
|
||||||
|
+ "<img class=\"picture\" src=\"/photo/album" + (entry.thumbtype == "movie" ? entry.path + ".frame" : 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");
|
||||||
|
if (entry.caption) {
|
||||||
|
captionP.text(entry.caption);
|
||||||
|
}
|
||||||
|
captionP.appendTo(gridDiv);
|
||||||
|
|
||||||
|
gridDiv.appendTo('body');
|
||||||
|
|
||||||
|
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' : formatTitle,
|
||||||
|
'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({
|
||||||
|
'titlePosition' : 'inside',
|
||||||
|
'transitionIn' : 'elastic',
|
||||||
|
'transitionOut' : 'elastic',
|
||||||
|
'easingIn' : 'easeInQuad',
|
||||||
|
'easingOut' : 'easeOutQuad',
|
||||||
|
'titleFormat' : formatTitle,
|
||||||
|
'width' : largeDim.w,
|
||||||
|
'height' : largeDim.h,
|
||||||
|
'type' : "image",
|
||||||
|
'href' : $("#ent" + idx).href
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "dir":
|
||||||
|
$("#ent" + idx).attr("href", location.pathname.replace(/\.album?($|\?)/, "/" + entry.name + ".album"));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue