forked from mozilla/popcorn-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
popcorn.image.js
executable file
·145 lines (129 loc) · 4.27 KB
/
popcorn.image.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// 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 anchor - 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",
version: "0.1",
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: "url",
label: "anchor URL",
optional: true
},
target: "image-container",
src: {
elem: "input",
type: "url",
label: "Source URL"
},
text: {
elem: "input",
type: "text",
label: "TEXT",
optional: true
}
}
},
_setup: function( options ) {
var img = document.createElement( "img" ),
target = document.getElementById( options.target );
options.anchor = document.createElement( "a" );
options.anchor.style.position = "relative";
options.anchor.style.textDecoration = "none";
options.anchor.style.display = "none";
if ( !target && Popcorn.plugin.debug ) {
throw new Error( "target container doesn't exist" );
}
// add the widget's div to the target div
target && target.appendChild( options.anchor );
img.addEventListener( "load", function() {
// borders look really bad, if someone wants it they can put it on their div target
img.style.borderStyle = "none";
options.anchor.href = options.href || options.src || "#";
options.anchor.target = "_blank";
var fontHeight, divText;
// If display text was provided, display it:
if ( options.text ) {
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 || "";
divText.style.top = ( img.height / 2 ) - ( divText.offsetHeight / 2 ) + "px";
options.anchor.appendChild( divText );
}
options.anchor.appendChild( img );
}, false );
img.src = options.src;
},
/**
* @member image
* 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.anchor.style.display = "inline";
},
/**
* @member image
* 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.anchor.style.display = "none";
},
_teardown: function( options ) {
document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.anchor );
}
});
})( Popcorn );