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");
|
$(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);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
109
test.html
109
test.html
|
|
@ -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
16
test.js
|
|
@ -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() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user