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() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import java.io.FileOutputStream;
|
|||
import java.io.FileReader;
|
||||
import java.io.IOException;
|
||||
import java.io.PrintWriter;
|
||||
import java.text.SimpleDateFormat;
|
||||
import java.util.Calendar;
|
||||
import java.util.Date;
|
||||
import java.util.Properties;
|
||||
|
|
@ -302,7 +303,7 @@ public class AlbumServlet
|
|||
req.setAttribute("thmb", new Integer(250));
|
||||
req.setAttribute("full", new Integer(800));
|
||||
req.setAttribute("D", "$");
|
||||
RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/dynamic.vm");
|
||||
RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/ng.html");
|
||||
rd.forward(req, res);
|
||||
}
|
||||
|
||||
|
|
@ -384,6 +385,18 @@ public class AlbumServlet
|
|||
PrintWriter out = res.getWriter();
|
||||
out.println("{");
|
||||
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\": [");
|
||||
int n = 0;
|
||||
for (Entry e : entry.getContents()) {
|
||||
|
|
@ -392,14 +405,25 @@ public class AlbumServlet
|
|||
out.println(" {");
|
||||
out.println(" \"name\": " + jsStr(e.getName()) + ",");
|
||||
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();
|
||||
if (thumb != null) {
|
||||
out.println(" \"path\": " + jsStr(mapper.map(thumb.getPath())) + ",");
|
||||
out.println(" \"thumbtype\": " + jsStr(thumb.getType()) + ",");
|
||||
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(" }");
|
||||
} catch (Exception 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