mozilla
/
popcorn-js
зеркало из https://github.com/mozilla/popcorn-js.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

updated flickr [#248]

This commit is contained in:
Anna Sobiepanek 2011-04-05 15:19:52 -04:00
Родитель a79f2af651
Коммит d4f4b4e2ff
4 изменённых файлов: 159 добавлений и 102 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

12
plugins/flickr/popcorn.flickr.html
Просмотреть файл

@ -4,11 +4,17 @@
<title>Popcorn Flickr Plug-in Demo</title> <title>Popcorn Flickr Plug-in Demo</title>
<script src="../../popcorn.js"></script> <script src="../../popcorn.js"></script>
<script src="../../test/jquery.js"></script>
<script src="popcorn.flickr.js"></script> <script src="popcorn.flickr.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var p = Popcorn('#video') var p = Popcorn('#video')
.flickr({
start: 0, // seconds
end: 5, // seconds
username: 'AniaSob',
api_key: 'd1d249260dd1673ec8810c8ce5150ae1',
target: 'flickrdiv'
} )
.flickr({ .flickr({
start: 5, // seconds start: 5, // seconds
end: 15, // seconds end: 15, // seconds
@ -37,8 +43,8 @@
</head> </head>
<body> <body>
<h1 id="qunit-header">Popcorn Flickr Plug-in Demo</h1> <h1 id="qunit-header">Popcorn Flickr Plug-in Demo</h1>
<p>This plugin requires jquery</p> <p>Flickr images by 'AniaSob' will appear at 0 seconds and disappear at 5 seconds.
<p>Flickr images by '35034346917@N01' will appear at 5 seconds and disappear at 15 seconds. <br />Flickr images by '35034346917@N01' will appear at 5 seconds and disappear at 15 seconds.
<br />Flickr images tagged 'georgia' will appear at 20 seconds and disappear at 30 seconds. <br />Flickr images tagged 'georgia' will appear at 20 seconds and disappear at 30 seconds.
<br />Flickr images by '35034346917@N01' and tagged 'georgia' will appear at 35 seconds and disappear at 45 seconds.</p> <br />Flickr images by '35034346917@N01' and tagged 'georgia' will appear at 35 seconds and disappear at 45 seconds.</p>
<div> <div>

226
plugins/flickr/popcorn.flickr.js
Просмотреть файл

@ -1,20 +1,24 @@
// PLUGIN: FLICKR // PLUGIN: Flickr
(function (Popcorn) { (function (Popcorn) {
/** /**
* Flickr popcorn plug-in * Flickr popcorn plug-in
* Appends a users Flickr images to an element on the page. * Appends a users Flickr images to an element on the page.
* Options parameter will need a start, end, target and userid. * Options parameter will need a start, end, target and userid or username and api_key.
* Optional parameters are numberofimages, height, width, padding, and border * Optional parameters are numberofimages, height, width, padding, and border
* Start is the time that you want this plug-in to execute * 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 * 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 * Userid is the id of who's Flickr images you wish to show
* Tags is a mutually exclusive list of image descriptor tags * Tags is a mutually exclusive list of image descriptor tags
* Username is the username of who's Flickr images you wish to show
* using both userid and username is redundant
* an api_key is required when using username
* Api_key is your own api key provided by Flickr
* Target is the id of the document element that the images are * Target is the id of the document element that the images are
* appended to, this target element must exist on the DOM * appended to, this target element must exist on the DOM
* Numberofimages specify the number of images to retreive from flickr, defaults to 8 * Numberofimages specify the number of images to retreive from flickr, defaults to 4
* Height the height of the component, defaults to '50px' * Height the height of the image, defaults to '50px'
* Width the width of the component, defaults to '50px' * Width the width of the image, defaults to '50px'
* Padding number of pixels between images, defaults to '5px' * Padding number of pixels between images, defaults to '5px'
* Border border size in pixels around images, defaults to '0px' * Border border size in pixels around images, defaults to '0px'
* *
@ -36,96 +40,128 @@
} ) } )
* *
*/ */
Popcorn.plugin( "flickr" , { Popcorn.plugin( "flickr" , function( options ) {
var containerDiv,
_userid,
_uri,
_link,
_image,
_count = options.numberofimages || 4 ,
_height = options.height || "50px",
_width = options.width || "50px",
_padding = options.padding || "5px",
_border = options.border || "0px",
i;
manifest: { // create a new div this way anything in the target div is left intact
about:{ // this is later populated with Flickr images
name: "Popcorn Flickr Plugin", containerDiv = document.createElement( "div" );
version: "0.1.1", containerDiv.id = "flickr"+ i;
author: "Scott Downe, Steven Weerdenburg", containerDiv.style.width = "100%";
website: "http://scottdowne.wordpress.com/" containerDiv.style.height = "100%";
}, containerDiv.style.display = "none";
options:{ i++;
start : {elem:'input', type:'number', label:'In'},
end : {elem:'input', type:'number', label:'Out'}, // ensure the target container the user chose exists
userid : {elem:'input', type:'text', label:'Source'}, if ( document.getElementById( options.target ) ) {
tags : {elem:'input', type:'text', label:'Tags'}, document.getElementById( options.target ).appendChild( containerDiv );
target : 'Flickr-container', } else {
height : {elem:'input', type:'text', label:'Height'}, throw ( "flickr target container doesn't exist" );
width : {elem:'input', type:'text', label:'Width'}, }
padding : {elem:'input', type:'text', label:'Padding'},
border : {elem:'input', type:'text', label:'Border'}, // get the userid from Flickr API by using the username and api_key
numberofimages : {elem:'input', type:'text', label:'Number of Images'} var isUserIDReady = function() {
} if ( !_userid ) {
}, _uri = "http://api.flickr.com/services/rest/?method=flickr.people.findByUsername&";
_uri += "username=" + options.username + "&api_key=" + options.api_key + "&format=json&jsoncallback=flickr";
_setup: function( options ) { Popcorn.xhr.getJSONP( _uri, function(data) {
options.container = document.createElement( 'div' ); _userid = data.user.nsid;
options.container.style.display = "none"; getFlickrData();
if ( document.getElementById( options.target ) ) {
document.getElementById( options.target ).appendChild( options.container );
}
var height = options.height || "50px",
width = options.width || "50px",
count = options.numberofimages || 4,
padding = options.padding || "5px",
tags = options.tags || "",
userid = options.userid || "",
border = options.border || "0px",
uri = "http://api.flickr.com/services/feeds/photos_public.gne?";
if ( userid ) {
uri += "id="+userid+"&";
}
if ( tags ) {
uri += "tags="+tags+"&";
}
uri += "lang=en-us&format=json&jsoncallback=flickr";
Popcorn.xhr.getJSONP( uri, function( data ) {
options.container.innerHTML = "<p style='padding:" + padding + ";'>" + data.title + "<p/>";
Popcorn.forEach( data.items, function ( item, i ) {
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;
}
});
}); });
}, } else {
/** setTimeout(function () {
* @member Flickr isUserIDReady();
* The start function will be executed when the currentTime }, 5);
* 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";
} }
}); };
// get the photos from Flickr API by using the user_id and/or tags
var getFlickrData = function() {
_uri = "http://api.flickr.com/services/feeds/photos_public.gne?";
_uri += "id=" + _userid + "&";
if ( options.tags ) {
_uri += "tags=" + options.tags + "&";
}
_uri += "lang=en-us&format=json&jsoncallback=flickr";
Popcorn.xhr.getJSONP( _uri, function( data ) {
containerDiv.innerHTML = "<p style='padding:" + _padding + ";'>" + data.title + "<p/>";
Popcorn.forEach( data.items, function ( item, i ) {
if ( i < _count ) {
_link = document.createElement( 'a' );
_link.setAttribute( 'href', item.link );
_link.setAttribute( "target", "_blank" );
_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 );
containerDiv.appendChild( _link );
} else {
return false;
}
});
});
};
if ( options.userid ) {
_userid = options.userid;
getFlickrData();
} else if ( options.username && options.api_key ) {
isUserIDReady();
}
return {
/**
* @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 ){
containerDiv.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 ){
containerDiv.style.display = "none";
}
};
},
{
about:{
name: "Popcorn Flickr Plugin",
version: "0.1.1",
author: "Scott Downe, Steven Weerdenburg, Annasob",
website: "http://scottdowne.wordpress.com/"
},
options:{
start : {elem:'input', type:'number', label:'In'},
end : {elem:'input', type:'number', label:'Out'},
userid : {elem:'input', type:'text', label:'UserID'},
tags : {elem:'input', type:'text', label:'Tags'},
username : {elem:'input', type:'text', label:'Username'},
api_key : {elem:'input', type:'text', label:'Api_key'},
target : 'Flickr-container',
height : {elem:'input', type:'text', label:'Height'},
width : {elem:'input', type:'text', label:'Width'},
padding : {elem:'input', type:'text', label:'Padding'},
border : {elem:'input', type:'text', label:'Border'},
numberofimages : {elem:'input', type:'text', label:'Number of Images'}
}
});
})( Popcorn ); })( Popcorn );

2
plugins/flickr/popcorn.flickr.unit.html
Просмотреть файл

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Popcorn API</title> <title>Popcorn Flickr</title>
<link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen"> <link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
<script src="../../test/qunit/qunit.js"></script> <script src="../../test/qunit/qunit.js"></script>
<!-- <!--

21
plugins/flickr/popcorn.flickr.unit.js
Просмотреть файл

@ -1,7 +1,7 @@
test("Popcorn Flickr Plugin", function () { test("Popcorn Flickr Plugin", function () {
var popped = Popcorn("#video"), var popped = Popcorn("#video"),
expects = 5, expects = 6,
count = 0, count = 0,
flickrdiv = document.getElementById('flickrdiv'); flickrdiv = document.getElementById('flickrdiv');
@ -27,7 +27,15 @@ test("Popcorn Flickr Plugin", function () {
userid: '35034346917@N01', userid: '35034346917@N01',
numberofimages: '1', numberofimages: '1',
target: 'flickrdiv' target: 'flickrdiv'
} ); } )
.flickr({
start: 4, // seconds
end: 7, // seconds
username: 'AniaSob',
api_key: 'd1d249260dd1673ec8810c8ce5150ae1',
numberofimages: '1',
target: 'flickrdiv'
} );;
popped.exec( 2, function() { popped.exec( 2, function() {
ok( /display: inline;/.test( flickrdiv.innerHTML ), "Div contents are displayed" ); ok( /display: inline;/.test( flickrdiv.innerHTML ), "Div contents are displayed" );
@ -35,8 +43,15 @@ test("Popcorn Flickr Plugin", function () {
ok( /img/.test( flickrdiv.innerHTML ), "An image exists" ); ok( /img/.test( flickrdiv.innerHTML ), "An image exists" );
plus(); plus();
}); });
popped.exec( 5, function() {
ok( /display: inline;/.test( flickrdiv.innerHTML ), "Div contents are displayed" );
plus();
ok( /img/.test( flickrdiv.innerHTML ), "An image exists" );
plus();
});
popped.exec( 4, function() { popped.exec( 7, function() {
ok( /display: none;/.test( flickrdiv.innerHTML ), "Div contents are hidden again" ); ok( /display: none;/.test( flickrdiv.innerHTML ), "Div contents are hidden again" );
plus(); plus();
}); });