CAMP/jquery.pandoravideo.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

small changes + example change

Browse Source
This commit is contained in:
Sanj 2012-05-07 08:21:08 +05:30
parent 68e32c82d1
commit bc82722eb8
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -5,14 +5,14 @@
<script type="text/javascript" src="padmavideo.js"></script> <script type="text/javascript" src="padmavideo.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$('.padmaVideo').padmavideo({ $('#padmavideo').padmavideo();
'callback': function(video) { console.log(video); foo = video;}
});
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="padmaVideo" data-padma-id="ABC"></div> <div id="padmavideo" data-padma-id="DJ" data-padma-layers="transcripts, descriptions, keywords, places">
</div>
</body> </body>
</html> </html>

28
padmavideo.js
View File

@ -12,7 +12,8 @@
var optionTypes = { var optionTypes = {
'strings': ['api', 'base', 'resolution', 'action', 'id'], 'strings': ['api', 'base', 'resolution', 'action', 'id'],
'integers': ['in', 'out', 'width', 'interval'], 'integers': ['in', 'out', 'width', 'interval'],
'arrays': ['layers', 'keys'] 'arrays': ['layers', 'keys'],
'booleans': []
//'functions': ['callback'] FIXME: lets not. //'functions': ['callback'] FIXME: lets not.
}; };
@ -127,8 +128,8 @@
.bind("play", function() { .bind("play", function() {
that.interval = setInterval(function() { that.interval = setInterval(function() {
that.updatePlayer(); that.updatePlayer();
}, that.o.interval); }, that.o.interval)
}) })
.bind("pause", function() { .bind("pause", function() {
clearInterval(that.interval); clearInterval(that.interval);
}) })
@ -165,6 +166,7 @@
var layerNames = this.o.layers, var layerNames = this.o.layers,
matchedLayers = {}; matchedLayers = {};
$.each(layerNames, function(i, layerName) { $.each(layerNames, function(i, layerName) {
matchedLayers[layerName] = that.getLayersAtTimecode(layerName, currentTime) matchedLayers[layerName] = that.getLayersAtTimecode(layerName, currentTime)
}); });
@ -177,6 +179,7 @@
for (var layer in matchedLayers) { for (var layer in matchedLayers) {
if (matchedLayers.hasOwnProperty(layer)) { if (matchedLayers.hasOwnProperty(layer)) {
var theseLayers = matchedLayers[layer]; var theseLayers = matchedLayers[layer];
console.log(theseLayers);
if (theseLayers.length > 0) { if (theseLayers.length > 0) {
var $annotsForLayer = getElemForLayer(layer, theseLayers); var $annotsForLayer = getElemForLayer(layer, theseLayers);
$annotsForLayer.appendTo(that.$annotations); $annotsForLayer.appendTo(that.$annotations);
@ -216,9 +219,13 @@
Returns <jQuery element> for an annotation type - i.e. all 'transcripts', or all 'descriptions' Returns <jQuery element> for an annotation type - i.e. all 'transcripts', or all 'descriptions'
*/ */
function getElemForLayer(layerName, layers) { function getElemForLayer(layerName, layers) {
var $elem = $('<div />').addClass("padmaLayer"); if (layers.length === 0) {
return $('<div />'); //FIXME
}
var $elem = $('<div />').addClass("padmaLayer").addClass(layerName);
var title = layerName.substr(0,1).toUpperCase() + layerName.substr(1, layerName.length); var title = layerName.substr(0,1).toUpperCase() + layerName.substr(1, layerName.length);
var $title = $('<div />').addClass("padmaLayerTitle").text(title).appendTo($elem); var $title = $('<div />').addClass("padmaLayerTitle").text(title).appendTo($elem);
$.each(layers, function(i,v) { $.each(layers, function(i,v) {
var $annot = $('<div />').addClass("padmaAnnot"); var $annot = $('<div />').addClass("padmaAnnot");
//TODO: add time-code div //TODO: add time-code div
@ -273,7 +280,8 @@
example: { example: {
'strings': ['option1', 'option2', 'option3'], 'strings': ['option1', 'option2', 'option3'],
'integers': ['fooint', 'barint'], 'integers': ['fooint', 'barint'],
'arrays': ['list1', 'list2'] 'arrays': ['list1', 'list2'],
'booleans': ['bool1']
} }
namespace: <string> namespace: <string>
@ -281,7 +289,7 @@
namespace for data- attributes namespace for data- attributes
example html: example html:
<div id="blah" data-padma-option1="foobar" data-padma-fooint="23" data-padma-list2="apples, oranges"> <div id="blah" data-padma-option1="foobar" data-padma-fooint="23" data-padma-list2="apples, oranges" data-padma-bool1="true">
usage: usage:
var dataOptions = $('#blah').getDataOptions(optionTypes, namespace); var dataOptions = $('#blah').getDataOptions(optionTypes, namespace);
@ -300,8 +308,12 @@
}); });
$.each(optionTypes['arrays'], function(i,v) { $.each(optionTypes['arrays'], function(i,v) {
var attr = prefix + v; var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? $element.attr(attr).split(",") : undefined; options[v] = $element.hasAttr(attr) ? $.map($element.attr(attr).split(","), $.trim) : undefined;
}); });
$.each(optionTypes['booleans'], function(i,v) {
var attr = prefix + v;
options[v] = $element.hasAttr(attr) ? $element.attr(attr) == 'true' : false;
});
return options; return options;
} }