diff --git a/plugins/footnote/popcorn.footnote.js b/plugins/footnote/popcorn.footnote.js index d4631fce3..6421f5ad9 100755 --- a/plugins/footnote/popcorn.footnote.js +++ b/plugins/footnote/popcorn.footnote.js @@ -11,6 +11,9 @@ * Text is the text that you want to appear in the target * Target is the id of the document element that the text needs to be * attached to, this target element must exist on the DOM + * Options parameter can take element or selector. + * Element will override the default div element and append a valid HTML element to the DOM + * Selector will add the CSS class of your choice to the appended footnotes * * @param {Object} options * @@ -20,6 +23,8 @@ * start: 5, // seconds * end: 15, // seconds * text: 'This video made exclusively for drumbeat.org', + * element: 'li', + * selector: 'footnote', * target: 'footnotediv' * }); **/ @@ -49,6 +54,16 @@ type: "text", label: "Text" }, + element: { + elem: "input", + type: "text", + label: "Element" + }, + selector: { + elem: "input", + type: "text", + label: "Selector" + }, target: "footnote-container" } }, @@ -57,7 +72,14 @@ var target = Popcorn.dom.find( options.target ); - options._container = document.createElement( "div" ); + if (options.element) { + options._container = document.createElement(options.element); + } else { + options._container = document.createElement("div"); + } + if (options.selector) { + options._container.classList.add(options.selector); + } options._container.style.display = "none"; options._container.innerHTML = options.text; diff --git a/plugins/footnote/popcorn.footnote.unit.js b/plugins/footnote/popcorn.footnote.unit.js index 272143100..88a08fe6f 100755 --- a/plugins/footnote/popcorn.footnote.unit.js +++ b/plugins/footnote/popcorn.footnote.unit.js @@ -1,7 +1,7 @@ test( "Popcorn Footnote Plugin", function() { var popped = Popcorn( "#video" ), - expects = 8, + expects = 12, count = 0, setupId, footnotediv = document.getElementById( "footnotediv" ); @@ -16,7 +16,7 @@ test( "Popcorn Footnote Plugin", function() { stop(); - ok( "footnote" in popped, "footnote is a mehtod of the popped instance" ); + ok( "footnote" in popped, "footnote is a method of the popped instance" ); plus(); equal( footnotediv.childElementCount, 0, "initially, there is nothing inside the footnotediv" ); @@ -28,6 +28,14 @@ test( "Popcorn Footnote Plugin", function() { text: "This video made exclusively for drumbeat.org", target: "footnotediv" }) + .footnote({ + start: 1, + end: 2, + text: "Element and selector test", + element: "li", + selector: "selector-test", + target: "footnotediv" + }) .footnote({ start: 2, end: 4, @@ -38,16 +46,27 @@ test( "Popcorn Footnote Plugin", function() { setupId = popped.getLastTrackEventId(); popped.exec( 0, function() { - equal( footnotediv.childElementCount, 2, "footnotediv now has two inner elements" ); + equal( footnotediv.childElementCount, 3, "footnotediv now has three inner elements" ); plus(); equal( footnotediv.children[ 0 ].innerHTML, "This video made exclusively for drumbeat.org", "footnote displaing correct information" ); plus(); equal( footnotediv.children[ 0 ].style.display, "inline", "footnote is visible on the page" ); plus(); + equal( footnotediv.children [ 0 ].nodeName, "DIV", "Default HTML element is a div"); + plus(); + equal ( footnotediv.children [ 0 ].className, "", "No CSS selector is set by default"); + plus(); + }); + + popped.exec( 1, function() { + equal( footnotediv.children[ 1 ].className, "selector-test", "CSS selector is set by selector options parameter"); + plus(); + equal( footnotediv.children[ 1 ].nodeName, "LI", "HTML element is set by element options parameter"); + plus(); }); popped.exec( 3, function() { - equal( footnotediv.children[ 1 ].style.display, "inline", "second footnote is visible on the page" ); + equal( footnotediv.children[ 2 ].style.display, "inline", "second footnote is visible on the page" ); plus(); }); @@ -56,7 +75,7 @@ test( "Popcorn Footnote Plugin", function() { plus(); popped.pause().removeTrackEvent( setupId ); - ok( !footnotediv.children[ 1 ], "removed footnote was properly destroyed" ); + ok( !footnotediv.children[ 2 ], "removed footnote was properly destroyed" ); plus(); }); popped.play().volume( 0 );