lots of css
This commit is contained in:
sanj
parent
747d606928
commit
124db61fda
18
jquery.tooltip.css
Normal file
18
jquery.tooltip.css
Normal 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; }
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
$(this).attr("target", "_blank");
|
||||
var link = $(this).attr("href");
|
||||
if (link.indexOf(PADMA_URL) != -1) {
|
||||
$(that).addClass('padmaLink');
|
||||
var linkData = parsePadmaUrl(link, PADMA_URL);
|
||||
if (linkData) {
|
||||
// console.log(linkData);
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
<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></video>
|
||||
<video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls"></video>
|
||||
<!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
|
||||
<div class="annotation">
|
||||
Transcripts / annotations will appear here.
|
||||
|
|
@ -92,6 +92,9 @@
|
|||
<div id="padmaSidebarRelative"></div>
|
||||
</div>
|
||||
-->
|
||||
<h1>
|
||||
Lorem Ipsum
|
||||
</h1>
|
||||
<div id="essay">
|
||||
<div class="para">
|
||||
<h2>
|
||||
|
|
|
|||
107
test.html
107
test.html
|
|
@ -1,89 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/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="test.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.color.js"></script>
|
||||
|
|
@ -97,7 +15,7 @@
|
|||
<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></video>
|
||||
<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.
|
||||
|
|
@ -120,36 +38,40 @@
|
|||
|
||||
<script type="text/html" id="tmpl_tooltip">
|
||||
<div class="padmaTooltip">
|
||||
<div class="videoInfo">
|
||||
Click link to play
|
||||
</div>
|
||||
<img src="<%= thumbUrl %>" />
|
||||
<h4 class="padmaTitle">
|
||||
<%= video.video.title %>
|
||||
</h4>
|
||||
<img src="<%= thumbUrl %>" />
|
||||
<div class="videoInfo">
|
||||
Click to play from: <br />
|
||||
<%= linkData.tcIn %> - <%= linkData.tcOut %>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl_sidebar">
|
||||
<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="trackButtons" data-selected="transcript">
|
||||
<span class="trackButton" data-track="transcript">Transcript</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="annotationText">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="viewOnPadma">
|
||||
<a target="_blank" href="<%= linkData.url %>">View on Pad.ma</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<div id="wrapper">
|
||||
|
||||
<h1>
|
||||
Lorem Ipsum
|
||||
</h1>
|
||||
<div id="padmaSidebar">
|
||||
<div id="padmaSidebarWrapper"></div>
|
||||
</div>
|
||||
|
|
@ -278,6 +200,7 @@
|
|||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="para">
|
||||
<h2>
|
||||
11.
|
||||
|
|
|
|||
16
test.js
16
test.js
|
|
@ -15,7 +15,8 @@ function setupPadmaLink(video, data) {
|
|||
video.currentLayers = [];
|
||||
switch (linkData.type) {
|
||||
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);
|
||||
default:
|
||||
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});
|
||||
$('#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 />')
|
||||
.addClass("close")
|
||||
.click(function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user