padmatexts/padmaTexts/templates/text_embed.html
2012-02-15 15:05:06 +05:30

140 lines
4.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> {{ text.title }} </title>
<link rel="shortcut icon" href="/static/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/static/css/text.css" />
<link rel="stylesheet" type="text/css" href="/static/css/jquery.tooltip.css" />
<link rel="stylesheet" type="text/css" href="/static/css/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/padma/jquery.tooltip.js"></script>
<script type="text/javascript" src="/static/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/static/js/padma/padma.layers.js"></script>
<script type="text/javascript" src="/static/js/padma/padma.links.js"></script>
<script type="text/javascript" src="/static/js/padma/padma.playlist.js"></script>
<script type="text/javascript" src="/static/js/views/{{ text.view }}.js?1"></script>
<script type="text/javascript" src="/static/js/padma/utils.js"></script>
<script type="text/javascript">
$(function() {
if ($('.imageGallery').length > 0) {
$('.imageGallery a').fancybox();
}
$('a').each(function() {
var t = $(this);
if (t.attr("href") != undefined) {
var href = t.attr("href");
if (href.indexOf("http://maps.google.com") != -1) {
if (t.data("mapLoaded")) {
return false;
}
var embedUrl = href + "&output=embed";
var iframe = $('<iframe />').attr("src", embedUrl).attr("width", "425").attr("height", "350");
var parentP = t.parents('p');
parentP.append("<br />").append(iframe);
t.data("mapLoaded", true);
t.toggle(function() {
iframe.slideUp();
}, function() {
iframe.slideDown();
});
}
}
});
});
</script>
</head>
<body>
<script type="text/html" id="tmpl_tcRange">
<div class="padmaWrapper">
<!-- <img src="<%= video.getFrame(linkData.tcIn) %>" /> -->
<video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls" autoplay="autoplay"></video>
<!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
<div class="annotation">
Transcripts / annotations will appear here.
</div>
<div class="closeButton">x</div>
</div>
</script>
<script type="text/html" id="tmpl_layers">
<div class="layersWrapper">
<% for (var i=0; i<layers.length; i++) { var layer = layers[i]; %>
<div class="layerWrapper">
<div class="layerTrack"><%= layer.track %></div>
<div class="layerText"><%= layer.value_html %></div>
</div>
<% } %>
</div>
</script>
<script type="text/html" id="tmpl_tooltip">
<div class="padmaTooltip">
<img src="<%= thumbUrl %>" />
<h4 class="padmaTitle">
<%= video.video.title %>
</h4>
</div>
</script>
<script type="text/html" id="tmpl_sidebar">
<div class="padmaViewer">
<div class="padmaButtons">
<span class="viewOnPadma">
<a title="Click to view clip on Pad.ma" target="_blank" href="<%= linkData.url %>">p</a>
</span>
<span class="videoInfo">
<a title="Click to get more info about video" target="_blank" href="<%= video.infoUrl %>">&#161;</a>
</span>
<span class="downloadVideo">
<a title="Right-click and Save Link As to download video" target="_blank" href="<%= video.getDownloadLink(linkData.tcIn, linkData.tcOut) %>">&darr;</a>
</span>
</div>
<video src="<%= video.getVideo(0, '240') %>" width="320" poster="<%= video.getFrame(linkData.tcIn) %>" controls="controls"></video>
<div class="annotationWrapper">
<div class="annotationText">
</div>
</div>
</div>
</script>
{% autoescape off %}
<div id="wrapper">
{% ifnotequal text.left_bar '' %}
<div id="leftBar">
{{ text.left_bar }}
</div>
{% endifnotequal %}
<div id="essayWrapper">
<h1>
{{ text.title }}
</h1>
<h4>
by <a class="authorLink" href="#bio">{{ text.author }}</a>, {{text.date|date:"F Y"}}
</h4>
<div id="essayAbstract">
<p>
{{ text.abstract }}
</p>
</div>
<div id="padmaSidebar">
<div id="padmaSidebarWrapper"></div>
</div>
<div id="essay">
{{ text.html }}
</div>
<div id="authorBio">
<a name="bio"></a>
<h3>{{ text.author }}</h3>
{{ text.author_bio }}
</div>
</div>
</div>
{% endautoescape %}
</body>
</html>