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">
$(function() {
$('.padmaVideo').padmavideo({
'callback': function(video) { console.log(video); foo = video;}
});
$('#padmavideo').padmavideo();
});
</script>
</head>
<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>
</html>

24
padmavideo.js
View File

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