Merge remote branch 'mo/t485' into 0.6

plugins/image/popcorn.image.html

@@ -6,26 +6,30 @@
   <script src="../../popcorn.js"></script>
   <script src="popcorn.image.js"></script>
   <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      var p = Popcorn('#video')
-      .volume(0)
+    document.addEventListener( "DOMContentLoaded", function() {
+
+      var p = Popcorn( "#video" )
+      .volume( 0 )
       .play() 
       .image({
-        start: 5, // seconds
-        end: 15, // seconds
-        href: 'http://www.drumbeat.org/',
-        src: 'https://www.drumbeat.org/media//images/drumbeat-logo-splash.png',
-        text: 'DRUMBEAT',
-        target: 'imagediv'
-      } )
+      	// seconds
+        start: 5,
+        // seconds
+        end: 15,
+        href: "http://www.drumbeat.org/",
+        src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
+        text: "DRUMBEAT",
+        target: "imagediv"
+      })
       .image({
-        start: 5, // seconds
-        end: 45, // seconds
+      	// seconds
+        start: 5,
+        // seconds
+        end: 45,
         // no href
-        src: 'http://patriciabergeron.net/wp-content/uploads/web.made_.movie_marquee.gif',
-        target: 'imagediv'
-      } );
-
+        src: "http://patriciabergeron.net/wp-content/uploads/web.made_.movie_marquee.gif",
+        target: "imagediv"
+      });
     }, false);
 
   </script>
@@ -36,16 +40,16 @@ <h1 id="qunit-header">Popcorn Image Plug-in Demo</h1>
   <p> First one (with an overlayed text) will disappear at 15 seconds.</p>
   <p> Second one (without an overlayed text) will disappear at 45 seconds.</p>
   <div>
-    <video id='video' 
+    <video id="video" 
       controls
-      width= '250px'
+      width="250px"
       poster="../../test/poster.png"> 
 
-      <source id='mp4'
+      <source id="mp4"
         src="../../test/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'> 
 
-      <source id='ogv'
+      <source id="ogv"
         src="../../test/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'> 
 

plugins/image/popcorn.image.js

@@ -1,59 +1,82 @@
 // PLUGIN: IMAGE
 
 (function (Popcorn) {
-
-  /**
-   * Images popcorn plug-in 
-   * Shows an image element
-   * Options parameter will need a start, end, href, target and src.
-   * 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 
-   * href is the url of the destination of a link - optional 
-   * Target is the id of the document element that the iframe needs to be attached to, 
-   * this target element must exist on the DOM
-   * Src is the url of the image that you want to display
-   * text is the overlayed text on the image - optional  
-   *
-   * @param {Object} options
-   * 
-   * Example:
-     var p = Popcorn('#video')
-        .image({
-          start: 5, // seconds
-          end: 15, // seconds
-          href: 'http://www.drumbeat.org/',
-          src: 'http://www.drumbeat.org/sites/default/files/domain-2/drumbeat_logo.png',
-          text: 'DRUMBEAT',
-          target: 'imagediv'
-        } )
-   *
-   */
-  Popcorn.plugin( "image", {
 
+/**
+ * Images popcorn plug-in 
+ * Shows an image element
+ * Options parameter will need a start, end, href, target and src.
+ * 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 
+ * href is the url of the destination of a link - optional 
+ * Target is the id of the document element that the iframe needs to be attached to, 
+ * this target element must exist on the DOM
+ * Src is the url of the image that you want to display
+ * text is the overlayed text on the image - optional  
+ *
+ * @param {Object} options
+ * 
+ * Example:
+   var p = Popcorn('#video')
+      .image({
+        start: 5, // seconds
+        end: 15, // seconds
+        href: 'http://www.drumbeat.org/',
+        src: 'http://www.drumbeat.org/sites/default/files/domain-2/drumbeat_logo.png',
+        text: 'DRUMBEAT',
+        target: 'imagediv'
+      } )
+ *
+ */
+  Popcorn.plugin( "image", {
       manifest: {
         about:{
           name: "Popcorn image Plugin",
           version: "0.1",
           author: "Scott Downe",
           website: "http://scottdowne.wordpress.com/"
         },
-        options:{
-          start :  {elem:'input', type:'number', label:'In'},
-          end :    {elem:'input', type:'number', label:'Out'},
-          href :   {elem:'input', type:'text',   label:'Link URL'},
-          target : 'Image-container',
-          src :    {elem:'input', type:'text',   label:'Source URL'},
-          text:    {elem:'input', type:'text',   label:'TEXT'}
+        options: {
+          start: {
+            elem: "input",
+            type: "number",
+            label: "In"
+          },
+          end: {
+            elem: "input",
+            type: "number",
+            label: "Out"
+          },
+          href: {
+            elem: "input",
+            type: "text",
+            label: "Link URL"
+          },
+          target: "Image-container",
+          src: {
+            elem: "input", 
+            type: "text",   
+            label: "Source URL"
+          },
+          text: {
+            elem: "input",
+            type: "text",
+            label: "TEXT"
+          }
         }
       },
-
       _setup: function( options ) {
+        var img = document.createElement( "img" );
 
-        options.link = document.createElement( 'a' );
+        options.link = document.createElement( "a" );
         options.link.style.position = "relative";
         options.link.style.textDecoration = "none";
 
-        var img = document.createElement( 'img' );
+        if ( document.getElementById( options.target ) ) {
+          // add the widget's div to the target div
+          document.getElementById( options.target ).appendChild( options.link );
+        }
+
         img.addEventListener( "load", function() {
 
           // borders look really bad, if someone wants it they can put it on their div target
@@ -62,33 +85,30 @@
           if ( options.href ) {
             options.link.href = options.href;
           }
+
           options.link.target = "_blank";
 
-          // add the widget's div to the target div
-          document.getElementById( options.target ) && document.getElementById( options.target ).appendChild( options.link );
-
-          var fontHeight = ( img.height / 12 ) + "px";
-
-          var divText = document.createElement( 'div' );
-          divTextStyle = {
-              position: "relative",
-              width: img.width + "px",
-              textAlign: "center",
-              fontSize: fontHeight,
-              color: "black",
-              fontWeight : "bold",
-              zIndex: "10"
-          };
-          for ( var st in divTextStyle ) {
-            divText.style[ st ] = divTextStyle[ st ];
-          }
+          var fontHeight = ( img.height / 12 ) + "px", 
+              divText = document.createElement( "div" );
 
+          Popcorn.extend( divText.style, {
+
+            color: "black",
+            fontSize: fontHeight,
+            fontWeight: "bold",
+            position: "relative",
+            textAlign: "center",
+            width: img.width + "px",
+            zIndex: "10"
+          });
+
           divText.innerHTML = options.text || "";
           options.link.appendChild( divText );
           options.link.appendChild( img );
           divText.style.top = ( img.height / 2 ) - ( divText.offsetHeight / 2 ) + "px"; 
           options.link.style.display = "none";
         }, false );
+
         img.src = options.src;
       },
 
@@ -114,5 +134,4 @@
         document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.link );
       }
   });
-
 })( Popcorn );

plugins/image/popcorn.image.unit.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Popcorn API</title>
+  <title>Popcorn Image Plug-in Test</title>
   <link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
   <script src="../../test/qunit/qunit.js"></script>
   <!-- 
@@ -15,23 +15,23 @@
   <script src="popcorn.image.unit.js"></script>
 </head>
 <body>
-  <h1 id="qunit-header">Popcorn Image Plugin</h1>
+  <h1 id="qunit-header">Popcorn Image Plug-in Test</h1>
   <h2 id="qunit-banner"></h2>
   <div id="qunit-testrunner-toolbar"></div>
   <h2 id="qunit-userAgent"></h2>
   <ol id="qunit-tests"></ol>
   <div id="qunit-fixture">  </div>
 
-  <video id='video' 
+  <video id="video" 
     controls
-    width= '250px'
+    width="250px"
     poster="../../test/poster.png"> 
 
-    <source id='mp4'
+    <source id="mp4"
       src="../../test/trailer.mp4"
       type='video/mp4; codecs="avc1, mp4a"'> 
 
-    <source id='ogv'
+    <source id="ogv"
       src="../../test/trailer.ogv"
       type='video/ogg; codecs="theora, vorbis"'> 
 

plugins/image/popcorn.image.unit.js

@@ -1,10 +1,15 @@
 test("Popcorn Image Plugin", function () {
-  
-  var popped = Popcorn("#video"),
-      expects = 6,
+
+  var popped = Popcorn( "#video" ),
+      expects = 9,
       count = 0,
       setupId,
-      imagediv = document.getElementById('imagediv');
+      imagediv = document.getElementById( "imagediv" ),
+      sources = [
+        "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
+        "http://www.petmountain.com/category/mini/organic-dog-supplies/520/organic-dog-supplies.jpg", 
+        "http://www.botskool.com/sites/default/files/images/javascript.png"
+      ];
 
   expect( expects );
 
@@ -16,19 +21,39 @@ test("Popcorn Image Plugin", function () {
 
   stop();
 
-  ok('image' in popped, "image is a method of the popped instance");
+  ok( "image" in popped, "image is a method of the popped instance" );
   plus();
 
-  equals ( imagediv.innerHTML, "", "initially, there is nothing inside the imagediv" );
+  equals( imagediv.innerHTML, "", "initially, there is nothing inside the imagediv" );
   plus();
 
   popped.image({
-    start: 1, // seconds
-    end: 3, // seconds
-    href: 'http://www.drumbeat.org/',
-    src: 'https://www.drumbeat.org/media//images/drumbeat-logo-splash.png',
-    text: 'DRUMBEAT',
-    target: 'imagediv'
+    // seconds
+    start: 1,
+    // seconds
+    end: 3,
+    href: "http://www.drumbeat.org/",
+    src: sources[0],
+    text: "DRUMBEAT",
+    target: "imagediv"
+  })
+  .image({
+    // seconds
+    start: 5,
+    // seconds
+    end: 7,
+    // no href
+    src: sources[1],
+    target: "imagediv"
+  })
+  .image({
+    // seconds
+    start: 5,
+    // seconds
+    end: 7,
+    // no href
+    src: sources[2],
+    target: "imagediv"  
   });
 
   setupId = popped.getLastTrackEventId();
@@ -43,11 +68,20 @@ test("Popcorn Image Plugin", function () {
   popped.exec( 4, function() {
     ok( /display: none;/.test( imagediv.innerHTML ), "Div contents are hidden again" );
     plus();
-
+  });
+
+  popped.exec( 6, function() {
+    [].forEach.call( document.querySelectorAll( "#imagediv a img" ), function( img, idx ) {
+      ok( img.src === sources[ idx ], "Image " + idx + " is in the right order" );
+      plus();
+    });
+  });
+
+  popped.exec( 8, function() {
     popped.pause().removeTrackEvent( setupId );
-    ok( !imagediv.children[0], "removed image was properly destroyed" );
+    ok( !imagediv.children[2], "removed image was properly destroyed" );
     plus();
   });
-  popped.volume(0).play();  
-
+
+  popped.volume( 0 ).play();  
 });