Add ability to set HTML element and CSS selector of footnotes.

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;
 

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 );