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

updated text position for image plugin, more than one image can be displayed now -#368

This commit is contained in:
unknown 2011-04-14 15:48:49 -04:00
Родитель 2fbe8d7326
Коммит 46927b7bb3
3 изменённых файлов: 16 добавлений и 21 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -19,11 +19,10 @@
target: 'imagediv'
} )
.image({
start: 20, // seconds
start: 5, // seconds
end: 45, // seconds
// no href
src: 'http://patriciabergeron.net/wp-content/uploads/web.made_.movie_marquee.gif',
text: 'WEB MADE MOVIES',
target: 'imagediv'
} );
@ -33,8 +32,9 @@
</head>
<body>
<h1 id="qunit-header">Popcorn Image Plug-in Demo</h1>
<p> An image will appear at 5 seconds and disappear at 15 seconds.</p>
<p> An image will appear at 20 seconds and disappear at 45 seconds.</p>
<p> Two images will appear at 5 seconds.</p>
<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'
controls

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

@ -49,11 +49,13 @@
_setup: function( options ) {
options.link = document.createElement( 'a' );
options.link.style.display = "none"; // display none by default
options.link.style.position = "relative";
options.link.style.height = "100%";
//options.link.style.width = "100%";
options.link.style.textDecoration = "none";
var img = document.createElement( 'img' );
img.src = options.src;
img.style.borderStyle = "none"; // borders look really bad, if someone wants it they can put it on their div target
if ( options.href ) {
options.link.href = options.href;
}
@ -62,22 +64,13 @@
document.getElementById( options.target ).appendChild( options.link ); // add the widget's div to the target div
}
var img = document.createElement( 'img' );
img.src = options.src;
img.style.position = "absolute";
img.style.height = "100%";
//img.style.width = "100%";
img.style.borderStyle = "none"; // borders look really bad, if someone wants it they can put it on their div target
var fontHeight = ((document.getElementById( options.target ).offsetHeight) / 12) + "px";
var fontHeight = ( img.height / 12 ) + "px";
var divText = document.createElement( 'div' );
divTextStyle = {
position: "absolute",
top: "50%",
position: "relative",
width: img.width + "px",
textAlign: "center",
left: 0,
right: 0,
fontSize: fontHeight,
color: "black",
fontWeight : "bold",
@ -86,10 +79,12 @@
for ( st in divTextStyle ) {
divText.style[ st ] = divTextStyle[ st ];
}
divText.innerHTML = options.text;
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";
},
/**

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

@ -34,7 +34,7 @@ test("Popcorn Image Plugin", function () {
interval = setInterval( function() {
if( popped.currentTime() > 1 && popped.currentTime() < 3 ) {
ok( /display: inline;/.test( imagediv.innerHTML ), "Div contents are displayed" );
ok( /display: block;/.test( imagediv.innerHTML ), "Div contents are displayed" );
plus();
ok( /img/.test( imagediv.innerHTML ), "An image exists" );
plus();