зеркало из https://github.com/mozilla/popcorn-js.git
[#166] initial flickr plugin without unit tests
This commit is contained in:
ScottDowne
Родитель
1868b6e7a4
Коммит
3072f46a2c
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popcorn Flickr Plug-in Demo</title>
|
||||
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="../../test/jquery.js"></script>
|
||||
<script src="popcorn.flickr.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var p = Popcorn('#video')
|
||||
.flickr({
|
||||
start: 5, // seconds
|
||||
end: 15, // seconds
|
||||
userid: '35034346917@N01',
|
||||
numberofimages: '8',
|
||||
target: 'flickrdiv'
|
||||
} )
|
||||
.flickr({
|
||||
start: 20, // seconds
|
||||
end: 45, // seconds
|
||||
userid: '78868639@N00',
|
||||
target: 'flickrdiv'
|
||||
} )
|
||||
.play();
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">Popcorn Flickr Plug-in Demo</h1>
|
||||
<p>Flickr images will appear at 5 seconds and disappear at 15 seconds.</p>
|
||||
<p>More Flickr images will appear at 20 seconds and disappear at 45 seconds.</p>
|
||||
<div>
|
||||
<video id='video'
|
||||
controls
|
||||
width= '250px'
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id='mp4'
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id='ogv'
|
||||
src="../../test/trailer.ogv"
|
||||
type='video/ogg; codecs="theora, vorbis"'>
|
||||
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
|
||||
</video>
|
||||
</div>
|
||||
<div id="flickrdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
// PLUGIN: FLICKR
|
||||
|
||||
(function (Popcorn) {
|
||||
|
||||
/**
|
||||
* Flickr popcorn plug-in
|
||||
* Appends a users Flickr images to an element on the page.
|
||||
* Options parameter will need a start, end, target and userid.
|
||||
* 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
|
||||
* Userid is the id of who's Flickr images you wish to show
|
||||
* Target is the id of the document element that the images are
|
||||
* appended to, this target element must exist on the DOM
|
||||
*
|
||||
* @param {Object} options
|
||||
*
|
||||
* Example:
|
||||
var p = Popcorn('#video')
|
||||
.footnote({
|
||||
start: 5, // seconds, mandatory
|
||||
end: 15, // seconds, mandatory
|
||||
userid: '35034346917@N01', // mandatory
|
||||
numberofimages: '8', // optional
|
||||
height: '50px', // optional
|
||||
width: '50px', // optional
|
||||
padding: '5px', // optional
|
||||
border: '0px', // optional
|
||||
target: 'flickrdiv' // mandatory
|
||||
} )
|
||||
*
|
||||
*/
|
||||
Popcorn.plugin( "flickr" , {
|
||||
_setup: function( options ) {
|
||||
options.container = document.createElement( 'div' );
|
||||
options.container.style.display = "none";
|
||||
document.getElementById( options.target ).appendChild( options.container );
|
||||
var height = options.height || "50px",
|
||||
width = options.width || "50px",
|
||||
count = options.numberofimages || 4,
|
||||
padding = options.padding || "5px",
|
||||
border = options.border || "0px";
|
||||
|
||||
$.getJSON( "http://api.flickr.com/services/feeds/photos_public.gne?id=" + options.userid + "&lang=en-us&format=json&jsoncallback=?", function( data ){
|
||||
options.container.innerHTML = "<p style='padding:" + padding + ";'>" + data.title + "<p/>";
|
||||
$.each( data.items, function( i, item ) {
|
||||
if ( i < count ) {
|
||||
var link = document.createElement('a');
|
||||
link.setAttribute( 'href', item.link );
|
||||
link.setAttribute( "target", "_blank" );
|
||||
var image = document.createElement( 'img' );
|
||||
image.setAttribute( 'src', item.media.m );
|
||||
image.setAttribute( 'height', height );
|
||||
image.setAttribute( 'width', width );
|
||||
image.setAttribute( 'style', 'border:' + border + ';padding:' + padding );
|
||||
link.appendChild( image );
|
||||
options.container.appendChild( link );
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @member Flickr
|
||||
* 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 Flickr
|
||||
* 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";
|
||||
}
|
||||
});
|
||||
|
||||
})( Popcorn );
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popcorn API</title>
|
||||
<link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
|
||||
<script src="../../test/qunit/qunit.js"></script>
|
||||
<!--
|
||||
do not move - this must be called immediately prior to
|
||||
popcorn-api-draft.js
|
||||
-->
|
||||
|
||||
<script src="../../popcorn.js"></script>
|
||||
<script src="../../test/jquery.js"></script>
|
||||
<script src="popcorn.flickr.js"></script>
|
||||
|
||||
<script src="popcorn.flickr.unit.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">Popcorn Flickr Plugin</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'
|
||||
controls
|
||||
width= '250px'
|
||||
poster="../../test/poster.png">
|
||||
|
||||
<source id='mp4'
|
||||
src="../../test/trailer.mp4"
|
||||
type='video/mp4; codecs="avc1, mp4a"'>
|
||||
|
||||
<source id='ogv'
|
||||
src="../../test/trailer.ogv"
|
||||
type='video/ogg; codecs="theora, vorbis"'>
|
||||
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
|
||||
</video>
|
||||
<div id="flickrdiv"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
test("Popcorn Flickr Plugin", function () {
|
||||
|
||||
var popped = Popcorn("#video"),
|
||||
expects = 6,
|
||||
count = 0,
|
||||
interval,
|
||||
interval2,
|
||||
interval3,
|
||||
flickrdiv = document.getElementById('flickrdiv');
|
||||
|
||||
var images = document.getElementsByTagName('img');
|
||||
|
||||
expect(expects);
|
||||
|
||||
function plus() {
|
||||
if ( ++count===expects) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
|
||||
stop();
|
||||
|
||||
ok('flickr' in popped, "flickr is a method of the popped instance");
|
||||
plus();
|
||||
|
||||
equals ( flickrdiv.innerHTML, "", "initially, there is nothing inside the flickrdiv" );
|
||||
plus();
|
||||
|
||||
popped.flickr({
|
||||
start: 5, // seconds
|
||||
end: 15, // seconds
|
||||
userid: '35034346917@N01',
|
||||
numberofimages: '1',
|
||||
target: 'flickrdiv'
|
||||
} );
|
||||
|
||||
console.log(images);
|
||||
|
||||
/*interval = setInterval( function() {
|
||||
if( popped.currentTime() > 5 && popped.currentTime() <= 15 ) {
|
||||
console.log(images[0].style);
|
||||
ok( images[0].style.display === "inline" && images[1].style.display === "none", "first image is displayed, second is not" );
|
||||
plus();
|
||||
clearInterval( interval );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
interval2 = setInterval( function() {
|
||||
if( popped.currentTime() > 15 && popped.currentTime() < 35 ) {
|
||||
console.log(images);
|
||||
ok( images[0].style.display === "none" && images[1].style.display === "none", "neither image is displayed" );
|
||||
plus();
|
||||
clearInterval( interval2 );
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
interval3 = setInterval( function() {
|
||||
if( popped.currentTime() > 35 && popped.currentTime() < 45 ) {
|
||||
console.log(images);
|
||||
ok( images[0].style.display === "none" && images[1].style.display === "inline", "second image is displayed, first is not" );
|
||||
plus();
|
||||
clearInterval( interval3 );
|
||||
}
|
||||
}, 5000);*/
|
||||
|
||||
popped.play();
|
||||
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче