CAMP/padmaEssay
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lots of css

Browse Source
This commit is contained in:
sanj 2010-11-06 06:06:13 +05:30
parent 747d606928
commit 124db61fda
5 changed files with 55 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
jquery.tooltip.css Normal file
View File

@ -0,0 +1,18 @@
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: rgb(187,187,87);
background-color: rgba(187,187,87,0.7);
padding: 5px;
opacity: 1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
-moz-box-shadow: 0px 0px 1em;
-webkit-box-shadow: 0px 0px 1em;
box-shadow: 0px 0px 1em;
}
#tooltip h4, #tooltip div { margin: 0; }

1
padma.links.js
View File

@ -8,6 +8,7 @@
$(this).attr("target", "_blank"); $(this).attr("target", "_blank");
var link = $(this).attr("href"); var link = $(this).attr("href");
if (link.indexOf(PADMA_URL) != -1) { if (link.indexOf(PADMA_URL) != -1) {
$(that).addClass('padmaLink');
var linkData = parsePadmaUrl(link, PADMA_URL); var linkData = parsePadmaUrl(link, PADMA_URL);
if (linkData) { if (linkData) {
// console.log(linkData); // console.log(linkData);

5
taha.html
View File

@ -66,7 +66,7 @@
<script type="text/html" id="tmpl_tcRange"> <script type="text/html" id="tmpl_tcRange">
<div class="padmaWrapper"> <div class="padmaWrapper">
<!-- <img src="<%= video.getFrame(linkData.tcIn) %>" /> --> <!-- <img src="<%= video.getFrame(linkData.tcIn) %>" /> -->
<video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls></video> <video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls"></video>
<!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> --> <!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
<div class="annotation"> <div class="annotation">
Transcripts / annotations will appear here. Transcripts / annotations will appear here.
@ -92,6 +92,9 @@
<div id="padmaSidebarRelative"></div> <div id="padmaSidebarRelative"></div>
</div> </div>
--> -->
<h1>
Lorem Ipsum
</h1>
<div id="essay"> <div id="essay">
<div class="para"> <div class="para">
<h2> <h2>

111
test.html
View File

@ -1,89 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="test.css" />
.padmaWrapper {
width: 100%;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10%;
border: 1px solid #333;
background: #000;
padding: 4px;
}
.closeButton {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
color: #fff;
}
.closeButton:hover {
color: red;
}
.annotation {
position: absolute;
left: 450px;
top: 20px;
height: 220px;
width: 400px;
overflow-y: auto;
color: white;
}
#essay {
width: 100%;
}
#padmaSidebar {
width: 0px;
position: fixed;
top: 0px;
right: 0px;
background: #ffffff;
bottom: 0px;
}
#padmaSidebarRelative {
position: relative;
}
.padmaVideo {
}
.annotationText {
margin-top: 15px;
margin-bottom: 15px;
}
.padmaViewer {
position: relative;
width: 400px;
padding: 6px;
color: #fff;
}
.padmaViewer video {
width: 320px;
margin-left: 46px;
}
.padmaViewer .close {
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
font-size: 10px;
color: #f00;
cursor: pointer;
}
</style>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" /> <link rel="stylesheet" type="text/css" href="jquery.tooltip.css" />
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.js"></script> <script type="text/javascript" src="jquery.color.js"></script>
@ -97,7 +15,7 @@
<script type="text/html" id="tmpl_tcRange"> <script type="text/html" id="tmpl_tcRange">
<div class="padmaWrapper"> <div class="padmaWrapper">
<!-- <img src="<%= video.getFrame(linkData.tcIn) %>" /> --> <!-- <img src="<%= video.getFrame(linkData.tcIn) %>" /> -->
<video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls></video> <video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls" autoplay="autoplay"></video>
<!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> --> <!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
<div class="annotation"> <div class="annotation">
Transcripts / annotations will appear here. Transcripts / annotations will appear here.
@ -120,36 +38,40 @@
<script type="text/html" id="tmpl_tooltip"> <script type="text/html" id="tmpl_tooltip">
<div class="padmaTooltip"> <div class="padmaTooltip">
<div class="videoInfo">
Click link to play
</div>
<img src="<%= thumbUrl %>" />
<h4 class="padmaTitle"> <h4 class="padmaTitle">
<%= video.video.title %> <%= video.video.title %>
</h4> </h4>
<img src="<%= thumbUrl %>" />
<div class="videoInfo">
Click to play from: <br />
<%= linkData.tcIn %> - <%= linkData.tcOut %>
</div>
</div> </div>
</script> </script>
<script type="text/html" id="tmpl_sidebar"> <script type="text/html" id="tmpl_sidebar">
<div class="padmaViewer"> <div class="padmaViewer">
<video src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" width="320" controls="controls"></video> <video src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" width="320" controls="controls" autoplay="autoplay"></video>
<div class="annotationWrapper"> <div class="annotationWrapper">
<!--
<div class="trackButtons" data-selected="transcript"> <div class="trackButtons" data-selected="transcript">
<span class="trackButton" data-track="transcript">Transcript</span> <span class="trackButton" data-track="transcript">Transcript</span>
</div> </div>
-->
<div class="annotationText"> <div class="annotationText">
</div> </div>
<div class="viewOnPadma">
<a target="_blank" href="<%= linkData.url %>"> View on Pad.ma </a> </div>
</div> <div class="viewOnPadma">
<a target="_blank" href="<%= linkData.url %>">View on Pad.ma</a>
</div> </div>
</div> </div>
</script> </script>
<div id="wrapper"> <div id="wrapper">
<h1>
Lorem Ipsum
</h1>
<div id="padmaSidebar"> <div id="padmaSidebar">
<div id="padmaSidebarWrapper"></div> <div id="padmaSidebarWrapper"></div>
</div> </div>
@ -278,6 +200,7 @@
<p> <p>
An event can appear as a link between what was and what will be. Certain events may have occurred by our perceived sense of past but they all have a potential to signify our future. A big event could have a big impact on our collective future. The bomb blast which ripped off the city centre on 15/06 at Manchester in England was a big event. A new city centre with comprehensive CCTV observation system might be imagined as a significant result of that event. Similarly, a terrorist attack on Bombay on 26/11 in India was a big event. The scheme for a roll out of, till then bureaucratically and politically stalled, National Identity Card program in India was a consequence of that event. Specific reasons might have triggered these events yet responses to these events are designed to cover every body on a generalized spatial and social scale. The grammar of policy responses to these big events are often punctuated with a language of risk. An event can appear as a link between what was and what will be. Certain events may have occurred by our perceived sense of past but they all have a potential to signify our future. A big event could have a big impact on our collective future. The bomb blast which ripped off the city centre on 15/06 at Manchester in England was a big event. A new city centre with comprehensive CCTV observation system might be imagined as a significant result of that event. Similarly, a terrorist attack on Bombay on 26/11 in India was a big event. The scheme for a roll out of, till then bureaucratically and politically stalled, National Identity Card program in India was a consequence of that event. Specific reasons might have triggered these events yet responses to these events are designed to cover every body on a generalized spatial and social scale. The grammar of policy responses to these big events are often punctuated with a language of risk.
</p> </p>
</div>
<div class="para"> <div class="para">
<h2> <h2>
11. 11.

16
test.js
View File

@ -15,7 +15,8 @@ function setupPadmaLink(video, data) {
video.currentLayers = []; video.currentLayers = [];
switch (linkData.type) { switch (linkData.type) {
case "tcRange": case "tcRange":
var mid_frame_npt = ms2npt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2); var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
console.log(mid_frame_npt);
var thumbUrl = video.getFrame(mid_frame_npt); var thumbUrl = video.getFrame(mid_frame_npt);
default: default:
var frame_npt = ms2npt(video.video.poster_frame); var frame_npt = ms2npt(video.video.poster_frame);
@ -75,6 +76,19 @@ function setupPadmaLink(video, data) {
} }
var html = tmpl("tmpl_sidebar", {'video': video, 'linkData': linkData}); var html = tmpl("tmpl_sidebar", {'video': video, 'linkData': linkData});
$('#padmaSidebarWrapper').html(html); $('#padmaSidebarWrapper').html(html);
//FIXME: should be a better way to deal with displaying default layer.
var currentLayers = video.getLayersAtTimecode(npt2ms(linkData.tcIn));
var transcripts = filterLayersByTracks(currentLayers, ['transcript']);
// console.log(transcripts);
if (transcripts.length > 0) {
var annotHtml = transcripts[0].value_html;
} else {
var annotHtml = '';
}
$('.annotationText').html(annotHtml);
var closeBtn = $('<div />') var closeBtn = $('<div />')
.addClass("close") .addClass("close")
.click(function() { .click(function() {