Permalink
Browse files

Fixed image plugin loading race condition [#960]

Conflicts between this and #231

Conflicts:
	plugins/image/popcorn.image.unit.js
  • Loading branch information...
2 parents 491f213 + 6af118b commit 8eafbe5636d83475528ed0bc59d1f7e84acb8d45 @jbuck jbuck committed Mar 8, 2012
Showing with 65 additions and 38 deletions.
  1. +32 −29 plugins/image/popcorn.image.js
  2. +1 −0 plugins/image/popcorn.image.unit.html
  3. +32 −9 plugins/image/popcorn.image.unit.js
@@ -8,7 +8,7 @@
* 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
+ * href is the url of the destination of a anchor - 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
@@ -50,7 +50,7 @@
href: {
elem: "input",
type: "url",
- label: "Link URL",
+ label: "anchor URL",
optional: true
},
target: "image-container",
@@ -71,47 +71,50 @@
var img = document.createElement( "img" ),
target = document.getElementById( options.target );
- options.link = document.createElement( "a" );
- options.link.style.position = "relative";
- options.link.style.textDecoration = "none";
+ options.anchor = document.createElement( "a" );
+ options.anchor.style.position = "relative";
+ options.anchor.style.textDecoration = "none";
+ options.anchor.style.display = "none";
if ( !target && Popcorn.plugin.debug ) {
throw new Error( "target container doesn't exist" );
}
// add the widget's div to the target div
- target && target.appendChild( options.link );
+ target && target.appendChild( options.anchor );
img.addEventListener( "load", function() {
// borders look really bad, if someone wants it they can put it on their div target
img.style.borderStyle = "none";
- if ( options.href ) {
- options.link.href = options.href;
- }
+ options.anchor.href = options.href || options.src || "#";
+ options.anchor.target = "_blank";
+
+ var fontHeight, divText;
- options.link.target = "_blank";
- var fontHeight = ( img.height / 12 ) + "px",
- divText = document.createElement( "div" );
+ // If display text was provided, display it:
+ if ( options.text ) {
+ fontHeight = ( img.height / 12 ) + "px";
+ divText = document.createElement( "div" );
- Popcorn.extend( divText.style, {
+ Popcorn.extend( divText.style, {
+ color: "black",
+ fontSize: fontHeight,
+ fontWeight: "bold",
+ position: "relative",
+ textAlign: "center",
+ width: img.width + "px",
+ zIndex: "10"
+ });
- color: "black",
- fontSize: fontHeight,
- fontWeight: "bold",
- position: "relative",
- textAlign: "center",
- width: img.width + "px",
- zIndex: "10"
- });
+ divText.innerHTML = options.text || "";
+ divText.style.top = ( img.height / 2 ) - ( divText.offsetHeight / 2 ) + "px";
+ options.anchor.appendChild( divText );
+ }
- 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";
+ options.anchor.appendChild( img );
}, false );
img.src = options.src;
@@ -124,7 +127,7 @@
* options variable
*/
start: function( event, options ) {
- options.link.style.display = "block";
+ options.anchor.style.display = "inline";
},
/**
* @member image
@@ -133,10 +136,10 @@
* options variable
*/
end: function( event, options ) {
- options.link.style.display = "none";
+ options.anchor.style.display = "none";
},
_teardown: function( options ) {
- document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.link );
+ document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.anchor );
}
});
})( Popcorn );
@@ -42,5 +42,6 @@ <h2 id="qunit-userAgent"></h2>
</video>
<div id="imagediv"></div>
+ <div id="zerostart"></div>
</body>
</html>
@@ -1,4 +1,4 @@
-test( "Popcorn Image Plugin", function() {
+asyncTest( "Popcorn Image Plugin", function() {
var popped = Popcorn( "#video" ),
expects = 9,
@@ -15,12 +15,11 @@ test( "Popcorn Image Plugin", function() {
function plus() {
if ( ++count === expects ) {
+ popped.destroy();
start();
}
}
- stop();
-
ok( "image" in popped, "image is a method of the popped instance" );
plus();
@@ -50,30 +49,54 @@ test( "Popcorn Image Plugin", function() {
setupId = popped.getLastTrackEventId();
- popped.exec( 2, function() {
- equal( imagediv.children[ 0 ].style.display, "block", "Div contents are displayed" );
+ popped.cue( 2, function() {
+ ok( imagediv.children[ 0 ].style.display !== "none", "inline", "Div contents are displayed" );
plus();
- equal( imagediv.children[ 0 ].children[ 1 ].nodeName, "IMG", "An image exists" );
+ equal( imagediv.querySelector("img").nodeName, "IMG", "An image exists" );
plus();
});
- popped.exec( 3, function() {
+ popped.cue( 3, function() {
equal( imagediv.children[ 0 ].style.display, "none", "Div contents are hidden again" );
plus();
});
- popped.exec( 5, function() {
+ popped.cue( 5, 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( 7, function() {
+ popped.cue( 7, function() {
popped.pause().removeTrackEvent( setupId );
ok( !imagediv.children[ 2 ], "removed image was properly destroyed" );
plus();
});
popped.volume( 0 ).play();
});
+
+
+asyncTest( "Zerostart doesn't rehide", 1, function() {
+ var popped = Popcorn( "#video" ),
+ zerostart = document.getElementById( "zerostart" );
+
+ popped.on( "canplayall", function() {
+ popped.currentTime(0);
+
+ popped.image({
+ start: 0,
+ end: 3,
+ src: "https://www.drumbeat.org/media/images/drumbeat-logo-splash.png",
+ target: "zerostart"
+ });
+
+ popped.cue( 1, function() {
+ ok( zerostart.children[ 0 ].style.display !== "none", "display area displayed at start: 0 without re-hiding" );
+ start();
+ });
+
+ popped.play();
+ });
+});

0 comments on commit 8eafbe5

Please sign in to comment.