finished plugin and testing [#158 state:peer-review-requested]

This commit is contained in:
Anna Sobiepanek 2010-12-20 14:28:30 -05:00
Родитель 1e4db584e2
Коммит b848db6678
3 изменённых файлов: 76 добавлений и 60 удалений

Просмотреть файл

@ -17,10 +17,10 @@
target: 'wikidiv'
} )
.wikipedia({
start: 12, // seconds
start: 7, // seconds
end: 20, // seconds
src: 'http://en.wikipedia.org/wiki/S%C3%A3o_Paulo',
target: 'wikidiv2'
target: 'wikidiv'
} );
}, false);
@ -30,7 +30,7 @@
<body>
<h1 id="qunit-header">Popcorn WebPage Plug-in Demo</h1>
<p> A Wiki article about Cape Town will appear at 5 seconds and disappear at 10 seconds.</p>
<p> A Wiki article about Sao Paolo will appear at 12 seconds and disappear at 20 seconds.</p>
<p> A Wiki article about Sao Paolo will appear at 7 seconds and disappear at 20 seconds.</p>
<div>
<video id='video'
controls
@ -49,10 +49,6 @@
</video>
</div>
<div id="wikidiv" width="50%" height="50%">
</div>
<div id="wikidiv2" width="50%" height="50%"></div>
<div id="wikidiv"> </div>
</body>
</html>

Просмотреть файл

@ -7,16 +7,17 @@ var wikiCallback;
/**
* Wikipedia popcorn plug-in
* Displays a wikipedia aricle in the target specified by the user
* Displays a wikipedia aricle in the target specified by the user by using
* new DOM element instead overwriting them
* Options parameter will need a start, end, target, lang, src, and numOfWords.
* 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
* Target is the id of the document element that the iframe needs to be attached to,
* -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
* -Target is the id of the document element that the iframe needs to be attached to,
* this target element must exist on the DOM
* Lang (optional, defaults to english)is the language in which the article is in.
* Src is the url of the article
* Title (optional) is the title of the article
* NumOfWords (optional, defaults to 200) is the number of words you want displaid.
* -Lang (optional, defaults to english) is the language in which the article is in.
* -Src is the url of the article
* -Title (optional) is the title of the article
* -NumOfWords (optional, defaults to 200) is the number of words you want displaid.
*
* @param {Object} options
*
@ -30,48 +31,59 @@ var wikiCallback;
} )
*
*/
Popcorn.plugin( "wikipedia" , (function(){
var temp, length, link, p, desc, text;
return {
/**
* @member wikipedia
* The setup function will get all of the needed
* items in place before the start function is called
* items in place before the start function is called.
* This includes getting data from wikipedia, if the data
* is not received and processed before start is called start
* will not do anything
*/
_setup : function( options ) {
// if no language was specified default to english
if (typeof options.lang === 'undefined') { options.lang ="en"; }
temp = document.getElementById( options.target );
length = options.numOfWords || 200;
// declare needed variables
// get a guid to use for the global wikicallback function
var _text, _guid = Popcorn.guid();
//get the wiki article on a separate thread
// if the user didn't specify a language default to english
if (typeof options.lang === 'undefined') { options.lang ="en"; }
// if the user didn't specify number of words to use default to 200
options.numOfWords = options.numOfWords || 200;
// replace the user specified target with the actual DOM element
options.target = document.getElementById( options.target );
// wiki global callback function with a unique id
// function gets the needed information from wikipedia
// and stores it by appending values to the options object
window["wikiCallback"+ _guid] = function (data) {
options._link = document.createElement('a');
options._link.setAttribute('href', options.src);
options._link.setAttribute('target', '_blank');
// add the title of the article to the link
options._link.innerHTML = data.parse.displaytitle;
// get the content of the wiki article
options._desc = document.createElement('p');
// get the article text and remove any special characters
_text = data.parse.text["*"].substr(data.parse.text["*"].indexOf('<p>'));
_text = _text.replace(/((<(.|\n)+?>)|(\((.*?)\) )|(\[(.*?)\]))/g, "");
options._desc.innerHTML = _text.substr(0, options.numOfWords ) + " ...";
};
// get the wiki article on a separate thread
// call the wikiCallback function above once the script is loaded
setTimeout(function() {
getJson("http://"+options.lang+".wikipedia.org/w/api.php?action=parse&props=text&page=" + ( options.title || options.src.slice(options.src.lastIndexOf("/")+1)) + "&format=json&callback=wikiCallback");
}, 1000);
getJson("http://"+options.lang+".wikipedia.org/w/api.php?action=parse&props=text&page=" + ( options.title || options.src.slice(options.src.lastIndexOf("/")+1)) + "&format=json&callback=wikiCallback"+ _guid);
}, 500);
// add the script to the DOM
var getJson = function(url) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
head.insertBefore( script, head.firstChild );
};
wikiCallback = function (data) {
wikidatastring = data;
link = document.createElement('a');
link.setAttribute('href', options.src);
link.setAttribute('target', '_blank');
// add the title of the article to the link
link.innerHTML = wikidatastring.parse.displaytitle;
// get the content of the wiki article
desc = document.createElement('p');
text = wikidatastring.parse.text["*"].substr(wikidatastring.parse.text["*"].indexOf('<p>'));
text = text.replace(/((<(.|\n)+?>)|(\((.*?)\) )|(\[(.*?)\]))/g, "");
desc.innerHTML = text.substr(0, length ) + " ...";
};
};
},
/**
* @member wikipedia
@ -80,8 +92,12 @@ var wikiCallback;
* options variable
*/
start: function(event, options){
temp.appendChild(link);
temp.appendChild(desc);
// dont do anything if the information didn't come back from wiki
if (options._link && options._desc) {
options.target.appendChild(options._link);
options.target.appendChild(options._desc);
options._added = true;
}
},
/**
* @member wikipedia
@ -90,8 +106,10 @@ var wikiCallback;
* options variable
*/
end: function(event, options){
temp.removeChild(link);
temp.removeChild(desc);
if (options._added) {
options.target.removeChild(options._link);
options.target.removeChild(options._desc);
}
}
};

Просмотреть файл

@ -1,13 +1,14 @@
test("Popcorn wikipedia Plugin", function () {
var popped = Popcorn("#video"),
expects = 5,
count = 0,
var popped = Popcorn("#video"),
expects = 7,
count = 0,
theArticle = document.getElementById('wikidiv'),
wikiInterval,
wikiInterval2,
wikiInterval3,
wikiInterval4;
theArticle = document.getElementById('wikidiv');
expect(expects);
@ -37,19 +38,21 @@ test("Popcorn wikipedia Plugin", function () {
src: 'http://en.wikipedia.org/wiki/S%C3%A3o_Paulo',
target: 'wikidiv'
} )
.volume(0)
.play();
wikiInterval = setInterval( function() {
if( popped.currentTime() > 7 && popped.currentTime() <= 10 ) {
if( popped.currentTime() > 5 && popped.currentTime() <= 10 ) {
ok (theArticle.innerHTML !== "", "wikidiv now contains information" );
plus();
equals (theArticle.childElementCount, 2, "wikidiv now contains two child elements" );
plus();
equals (theArticle.childElement[1].innerHTML, "Cape Town metropolitan municipality. It is the provincial capital and primate city ...", "wikidiv has the right content" );
plus();
clearInterval( wikiInterval );
}
}, 5000);
}, 3000);
wikiInterval2 = setInterval( function() {
if( popped.currentTime() > 10 && popped.currentTime() < 12 ) {
@ -57,7 +60,7 @@ test("Popcorn wikipedia Plugin", function () {
plus();
clearInterval( wikiInterval2 );
}
}, 5000);
}, 3000);
wikiInterval3 = setInterval( function() {
if( popped.currentTime() > 13 && popped.currentTime() <= 20 ) {
@ -65,11 +68,10 @@ test("Popcorn wikipedia Plugin", function () {
plus();
equals (theArticle.childElementCount, 2, "wikidiv now contains two child elements" );
plus();
equals (theArticle.childElement[1].innerHTML, "São Paulo is the largest city in Brazil, the largest city in the southern hemisphere, and the world's 7th largest metropolitan area. The city is the capital of the state of São Paulo, the most populou ...", "wikidiv has the right content" );
plus();
clearInterval( wikiInterval3 );
}
}, 5000);
}, 3000);
});