Skip to content

Commit

Permalink
Merge branch 'tagPlugin' into 0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@annasob
annasob committed Feb 8, 2011
2 parents 6e72203 + c3033a4 commit d8bdb54
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 32 deletions.
3 changes: 2 additions & 1 deletion plugins/tagthisperson/popcorn.tagthisperson.html
View file
Expand Up @@ -14,6 +14,7 @@
start: 0, // seconds
end: 10, // seconds
person: 'Anna Sob',
image: 'http://newshour.s3.amazonaws.com/photos%2Fspeeches%2Fguests%2FRichardNSmith_thumbnail.jpg',
target: 'tagdiv'
} )
.tagthisperson({
Expand All @@ -35,7 +36,7 @@
<body>
<h1 id="qunit-header">Popcorn tagthisperson Plug-in Demo</h1>
<p> A tag displaying Scott will appear at 0 seconds and disappear at 15 seconds.</p>
<p> A separate tag displaying Anna Sob will appear at 0 seconds and disappear at 10 seconds. At 5 seconds Scott will be appended to this tag.</p>
<p> A separate tag displaying Anna Sob with an image will appear at 0 seconds and disappear at 10 seconds. At 5 seconds Scott will be appended to this tag.</p>
<div>
<video id='video'
controls preload='none'
Expand Down
52 changes: 30 additions & 22 deletions plugins/tagthisperson/popcorn.tagthisperson.js
View file
Expand Up @@ -5,10 +5,11 @@
/**
* tagthisperson popcorn plug-in
* Adds people's names to an element on the page.
* Options parameter will need a start, end, target and person.
* Options parameter will need a start, end, target, image and person.
* Start is the time that you want this plug-in to execute
* End is the time that you want this plug-in to stop executing
* Person is the name of the person who you want to tag
* Image is the url to the image of the person - optional
* Target is the id of the document element that the text needs to be
* attached to, this target element must exist on the DOM
*
Expand All @@ -24,17 +25,18 @@
} )
*
*/
Popcorn.plugin( "tagthisperson" , (function(){
Popcorn.plugin( "tagthisperson" , ( function() {

var peopleArray = [];
var People = function(){
// one People object per options.target
var People = function() {
this.name = "";
this.contains = {};
this.toString = function(target) {
this.contains = { };
this.toString = function() {
var r = [];
for ( var j in this.contains) {
if (this.contains.hasOwnProperty(j)) {
r.push(" " + this.contains[j]);
for ( var j in this.contains ) {
if ( this.contains.hasOwnProperty( j ) ) {
r.push( " " + this.contains[ j ] );
}
}
return r.toString();
Expand All @@ -53,24 +55,25 @@
start : {elem:'input', type:'text', label:'In'},
end : {elem:'input', type:'text', label:'Out'},
target : 'tag-container',
text : {elem:'input', type:'text', label:'Text'}
person : {elem:'input', type:'text', label:'Name'},
image : {elem:'input', type:'text', label:'Image Src'}
}
},
_setup: function(options) {
_setup: function( options ) {
var exists = false;
// loop through the existing objects to ensure no duplicates
// the idea here is to have one object per unique options.target
for (var i = 0; i< peopleArray.length; i++) {
if (peopleArray[i].name === options.target ) {
options._p = peopleArray[i];
for ( var i = 0; i< peopleArray.length; i++ ) {
if ( peopleArray[ i ].name === options.target ) {
options._p = peopleArray[ i ];
exists = true;
break;
}
}
if (!exists) {
if ( !exists ) {
options._p = new People();
options._p.name = options.target;
peopleArray.push(options._p );
peopleArray.push( options._p );
}
},
/**
Expand All @@ -79,10 +82,15 @@
* of the video reaches the start time provided by the
* options variable
*/
start: function(event, options){
options._p.contains[options.person] = options.person;
if (document.getElementById(options.target)) {
document.getElementById(options.target).innerHTML = options._p.toString();
start: function( event, options ){
if ( options.image ) {
options._p.contains[ options.person ] = " <img src='" + options.image + "'/> " + options.person;
} else {
options._p.contains[ options.person ] = options.person;
}
//options._p.contains[options.person] = options.person;
if ( document.getElementById( options.target ) ) {
document.getElementById( options.target ).innerHTML = options._p.toString();
}
},
/**
Expand All @@ -92,9 +100,9 @@
* options variable
*/
end: function(event, options){
delete options._p.contains[options.person];
if (document.getElementById(options.target)) {
document.getElementById(options.target).innerHTML = options._p.toString();
delete options._p.contains[ options.person ];
if ( document.getElementById( options.target ) ) {
document.getElementById( options.target ).innerHTML = options._p.toString();
}
}
};
Expand Down
21 changes: 12 additions & 9 deletions plugins/tagthisperson/popcorn.tagthisperson.unit.js
View file
@@ -1,24 +1,24 @@
test("Popcorn tagthisperson Plugin", function () {

var popped = Popcorn("#video"),
expects = 6,
var popped = Popcorn( "#video" ),
expects = 7,
count = 0,
interval,
interval2,
interval3,
tagdiv = document.getElementById('tagdiv');
tagdiv = document.getElementById( 'tagdiv' );

expect(expects);

function plus() {
if ( ++count===expects) {
if ( ++count===expects ) {
start();
}
}

stop();

ok ('tagthisperson' in popped, "tagthisperson is a method of the popped instance");
ok ( 'tagthisperson' in popped, "tagthisperson is a method of the popped instance" );
plus();

equals ( tagdiv.innerHTML, "", "initially, there is nothing inside the tagdiv" );
Expand All @@ -28,6 +28,7 @@ test("Popcorn tagthisperson Plugin", function () {
start: 0, // seconds
end: 5, // seconds
person: 'Anna Sob',
image: 'http://newshour.s3.amazonaws.com/photos%2Fspeeches%2Fguests%2FRichardNSmith_thumbnail.jpg',
target: 'tagdiv'
} )
.tagthisperson({
Expand All @@ -42,29 +43,31 @@ test("Popcorn tagthisperson Plugin", function () {

interval = setInterval( function() {
if( popped.currentTime() > 0 && popped.currentTime() <= 5 ) {
equals ( tagdiv.innerHTML.trim() , "Anna Sob" ,"tagdiv shows the first tag" );
equals ( tagdiv.childElementCount, 1, "tagdiv now contains one child elements" );
plus();
equals ( tagdiv.textContent.trim() , "Anna Sob" ,"tagdiv shows the first tag" );
plus();
clearInterval( interval );
}
}, 2000);

interval2 = setInterval( function() {
if( popped.currentTime() > 3 && popped.currentTime() < 5 ) {
equals ( tagdiv.innerHTML.trim() , "Anna Sob, Scott", "tagdiv shows the first & second tag" );
equals ( tagdiv.textContent.trim() , "Anna Sob, Scott", "tagdiv shows the first & second tag" );
plus();
clearInterval( interval2 );
}
}, 2000);

interval3 = setInterval( function() {
if( popped.currentTime() > 5) {
if( popped.currentTime() > 5 ) {
equals ( tagdiv.innerHTML.trim() , "Scott" ,"tagdiv shows the second tag only" );
plus();
clearInterval( interval3 );
}
}, 5000);
interval4 = setInterval( function() {
if( popped.currentTime() > 10) {
if( popped.currentTime() > 10 ) {
equals ( tagdiv.innerHTML , "" ,"tagdiv is now cleared" );
plus();
clearInterval( interval4 );
Expand Down

0 comments on commit d8bdb54

Please sign in to comment.