diff --git a/plugins/footnote/popcorn.footnote.unit.js b/plugins/footnote/popcorn.footnote.unit.js
index bf672f4e..27214310 100755
--- a/plugins/footnote/popcorn.footnote.unit.js
+++ b/plugins/footnote/popcorn.footnote.unit.js
@@ -62,41 +62,3 @@ test( "Popcorn Footnote Plugin", function() {
popped.play().volume( 0 );
});
-
-
-test( "Popcorn Text Plugin", function() {
-
- var popped = Popcorn( "#video" ),
- expects = 2,
- count = 0,
- setupId,
- textdiv = document.getElementById( "textdiv" );
-
- expect( expects );
-
- function plus() {
- if ( ++count===expects ) {
- start();
- }
- }
-
- ok( "text" in popped, "text is a method of the popped instance" );
- plus();
-
- popped.text({
- start: 5,
- end: 6,
- text: "I am an alias",
- target: "textdiv"
- });
-
- stop();
-
- popped.exec( 5, function() {
-
- equal( textdiv.children[ 0 ].innerHTML, "I am an alias", "I am an alias set by Popcorn.p.text" );
- plus();
-
- popped.pause();
- }).currentTime( 5 ).play();
-});
diff --git a/plugins/text/popcorn.text.html b/plugins/text/popcorn.text.html
new file mode 100755
index 00000000..f907a17c
--- /dev/null
+++ b/plugins/text/popcorn.text.html
@@ -0,0 +1,87 @@
+
+
+
+ Popcorn text Plug-in Demo
+
+
+
+
+
+
+
+ Text displaying "This video made exclusively for drumbeat.org" will appear from 1 to 5.
+ Text displaying "This video made exclusively for drumbeat.org", with exclusively emphasized (e.g., inline html) will appear from 5 to 10.
+ Text displaying "This is an HTML p element: <p>paragraph</p>" (e.g., escaped html) will appear from 10 to 15.
+
+
+
+
+
+
diff --git a/plugins/text/popcorn.text.js b/plugins/text/popcorn.text.js
new file mode 100755
index 00000000..3fec06a8
--- /dev/null
+++ b/plugins/text/popcorn.text.js
@@ -0,0 +1,167 @@
+// PLUGIN: Text
+
+(function ( Popcorn ) {
+
+ /**
+ * Text Popcorn plug-in
+ *
+ * Places text in an element on the page. Plugin options include:
+ * Options parameter will need a start, end, target and text.
+ * 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
+ * Text: is the text that you want to appear in the target
+ * Escape: {true|false} whether to escape the text (e.g., html strings)
+ * Multiline: {true|false} whether newlines should be turned into
s
+ * Target: is the ID of the element where the text should be placed.
+ *
+ * @param {Object} options
+ *
+ * Example:
+ * var p = Popcorn('#video')
+ *
+ * // Simple text
+ * .text({
+ * start: 5, // seconds
+ * end: 15, // seconds
+ * text: 'This video made exclusively for drumbeat.org',
+ * target: 'textdiv'
+ * })
+ *
+ * // HTML text, rendered as HTML
+ * .text({
+ * start: 15, // seconds
+ * end: 20, // seconds
+ * text: 'This video made exclusively for drumbeat.org
',
+ * target: 'textdiv'
+ * })
+ *
+ * // HTML text, escaped and rendered as plain text
+ * .text({
+ * start: 20, // seconds
+ * end: 25, // seconds
+ * text: 'This is an HTML p element: paragraph
',
+ * escape: true,
+ * target: 'textdiv'
+ * })
+ *
+ * // Multi-Line HTML text, escaped and rendered as plain text
+ * .text({
+ * start: 25, // seconds
+ * end: 30, // seconds
+ * text: 'This is an HTML p element: paragraph
\nThis is an HTML b element: bold',
+ * escape: true,
+ * multiline: true,
+ * target: 'textdiv'
+ * });
+ **/
+
+ /**
+ * HTML escape code from mustache.js, used under MIT Licence
+ * https://github.com/janl/mustache.js/blob/master/mustache.js
+ **/
+ var escapeMap = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': '"',
+ "'": '''
+ };
+
+ function escapeHTML( string, multiline ) {
+ return String( string ).replace( /&(?!\w+;)|[<>"']/g, function ( s ) {
+ return escapeMap[ s ] || s;
+ });
+ }
+
+ function newlineToBreak( string ) {
+ // Deal with both \r\n and \n
+ return string.replace( /\r?\n/gm, "
" );
+ }
+
+ Popcorn.plugin( "text", {
+
+ manifest: {
+ about: {
+ name: "Popcorn Text Plugin",
+ version: "0.1",
+ author: "@humphd"
+ },
+ options: {
+ start: {
+ elem: "input",
+ type: "text",
+ label: "In"
+ },
+ end: {
+ elem: "input",
+ type: "text",
+ label: "Out"
+ },
+ text: {
+ elem: "input",
+ type: "text",
+ label: "Text"
+ },
+ escape: {
+ elem: "input",
+ type: "checkbox",
+ label: "Escape"
+ },
+ multiline: {
+ elem: "input",
+ type: "checkbox",
+ label: "Multiline"
+ },
+ target: "text-container"
+ }
+ },
+
+ _setup: function( options ) {
+ var target = Popcorn.dom.find( options.target );
+ var container = options._container = document.createElement( "div" );
+
+ container.style.display = "none";
+
+ // Escape HTML text if requested
+ var text = !!options.escape ? escapeHTML( options.text ) :
+ options.text;
+
+ // Swap newline for
if requested
+ text = !!options.multiline ? newlineToBreak ( text ) : text;
+ container.innerHTML = text;
+
+ if ( !target ) {
+ throw new Error( "target container doesn't exist" );
+ }
+
+ target.appendChild( container );
+ },
+
+ /**
+ * @member text
+ * The start function will be executed when the currentTime
+ * of the video reaches the start time provided by the
+ * options variable
+ */
+ start: function( event, options ) {
+ options._container.style.display = "inline";
+ },
+
+ /**
+ * @member text
+ * The end function will be executed when the currentTime
+ * of the video reaches the end time provided by the
+ * options variable
+ */
+ end: function( event, options ) {
+ options._container.style.display = "none";
+ },
+
+ _teardown: function( options ) {
+ var target = document.getElementById( options.target );
+ if ( target ) {
+ target.removeChild( options._container );
+ }
+ }
+ });
+})( Popcorn );
diff --git a/plugins/text/popcorn.text.unit.html b/plugins/text/popcorn.text.unit.html
new file mode 100755
index 00000000..e7d9838b
--- /dev/null
+++ b/plugins/text/popcorn.text.unit.html
@@ -0,0 +1,43 @@
+
+
+
+ Popcorn Text Plugin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/plugins/text/popcorn.text.unit.js b/plugins/text/popcorn.text.unit.js
new file mode 100755
index 00000000..00a11c25
--- /dev/null
+++ b/plugins/text/popcorn.text.unit.js
@@ -0,0 +1,144 @@
+test( "Popcorn text Plugin", function() {
+
+ var popped = Popcorn( "#video" ),
+ expects = 10,
+ count = 0,
+ setupId,
+ textdiv = document.getElementById( "textdiv" ),
+ childElem;
+
+ var strings = {
+ PLAIN: "This is plain text",
+ HTML: "This is HTML text
",
+ ESCAPED: "<p>This is <em>HTML</em> text</p>",
+ MULTILINE_NO_BREAKS: "a\nb\r\nc",
+ MULTILINE_BREAKS: "a
b
c"
+ };
+
+ expect( expects );
+
+ function plus() {
+ if ( ++count===expects ) {
+ start();
+ }
+ }
+
+ function injectString( s ) {
+ var elem = document.createElement( "div" );
+ elem.innerHTML = s;
+ return elem.innerHTML;
+ }
+
+ stop();
+
+ ok( "text" in popped, "text is a mehtod of the popped instance" );
+ plus();
+
+ equal( textdiv.childElementCount, 0, "initially, there is nothing inside textdiv" );
+ plus();
+
+ // Simple text
+ popped.text( {
+ start: 1,
+ end: 3,
+ text: strings.PLAIN,
+ target: 'textdiv'
+ } )
+ .cue( 2, function() {
+ equal( textdiv.childElementCount, 1, "textdiv now has two inner elements" );
+ plus();
+
+ childElem = textdiv.children[ 0 ];
+ equal( childElem.innerHTML, strings.PLAIN, "textdiv correctly displaying plain text" );
+ plus();
+ equal( childElem.style.display, "inline", "textdiv is visible on the page" );
+ plus();
+ } )
+ .cue( 4, function() {
+ equal( childElem && childElem.style.display, "none", "textdiv is hidden again" );
+ plus();
+
+ popped.pause();
+ } )
+
+ // Setup the rest of events (first tests only want 1 text event)
+ .on( "pause", function secondarySetup() {
+ popped.off( "pause", secondarySetup )
+
+ // HTML text, rendered as HTML
+ .text( {
+ start: 5,
+ end: 7,
+ text: strings.HTML,
+ target: 'textdiv'
+ } )
+ .cue( 6, function() {
+ equal(
+ textdiv.children[ 1 ].innerHTML,
+ injectString( strings.HTML ),
+ "textdiv correctly displaying HTML text"
+ );
+ plus();
+ } )
+
+ // HTML text, escaped and rendered as plain text
+ .text( {
+ start: 8,
+ end: 10,
+ text: strings.HTML,
+ escape: true,
+ target: 'textdiv'
+ } )
+ .cue( 9, function() {
+ equal(
+ textdiv.children[ 2 ].innerHTML,
+ injectString( strings.ESCAPED ),
+ "textdiv correctly displaying escaped HTML text"
+ );
+ plus();
+ } )
+
+ // Multi-Line HTML text, escaped and rendered as plain text without breaks
+ .text( {
+ start: 11,
+ end: 13,
+ text: strings.MULTILINE_NO_BREAKS,
+ target: 'textdiv'
+ } )
+ .cue( 12, function() {
+ equal(
+ textdiv.children[ 3 ].innerHTML,
+ injectString( strings.MULTILINE_NO_BREAKS ),
+ "textdiv correctly displaying multiline with no breaks"
+ );
+ plus();
+ } )
+
+ // Multi-Line HTML text, escaped and rendered as plain text with breaks
+ .text( {
+ start: 14,
+ end: 16,
+ text: strings.MULTILINE_NO_BREAKS,
+ multiline: true,
+ target: 'textdiv'
+ } )
+ .cue( 15, function() {
+ equal(
+ textdiv.children[ 4 ].innerHTML,
+ injectString( strings.MULTILINE_BREAKS ),
+ "textdiv correctly displaying multiline with breaks"
+ );
+ plus();
+
+ // Test is done
+ popped.pause();
+ } );
+
+ // Continue tests
+ popped.play();
+ } );
+
+ // Start tests
+ popped.play().volume( 0 );
+
+});