Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge remote branch 'mo/t485' into 0.6

  • Loading branch information...
commit fc43b188da92075e81ddf84720b4fdd39e337305 2 parents 7947fe4 + e4eb188
Anna Sobiepanek authored
View
44 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"'>
View
133 plugins/image/popcorn.image.js
@@ -1,35 +1,34 @@
// 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",
@@ -37,23 +36,47 @@
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 );
View
12 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"'>
View
66 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();
});
Please sign in to comment.
Something went wrong with that request. Please try again.