forked from webmademovies/popcorn-js
/
popcorn.timeline.js
144 lines (121 loc) · 4.05 KB
/
popcorn.timeline.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
// PLUGIN: Timeline
(function ( Popcorn ) {
/**
* timeline popcorn plug-in
* Adds data associated with a certain time in the video, which creates a scrolling view of each item as the video progresses
* Options parameter will need a start, target, title, and text
* -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, tho for this plugin an end time may not be needed ( optional )
* -Target is the id of the DOM element that you want the timeline to appear in. This element must be in the DOM
* -Title is the title of the current timeline box
* -Text is text is simply related text that will be displayed
* -innerHTML gives the user the option to add things such as links, buttons and so on
* -direction specifies whether the timeline will grow from the top or the bottom, receives input as "UP" or "DOWN"
* @param {Object} options
*
* Example:
var p = Popcorn("#video")
.timeline( {
start: 5, // seconds
target: "timeline",
title: "Seneca",
text: "Welcome to seneca",
innerHTML: "Click this link <a href='http://www.google.ca'>Google</a>"
} )
*
*/
var i = 1;
Popcorn.plugin( "timeline" , function( options ) {
var target = document.getElementById( options.target ),
contentDiv = document.createElement( "div" ),
container,
goingUp = true;
if ( target && !target.firstChild ) {
target.appendChild ( container = document.createElement( "div" ) );
container.style.width = "inherit";
container.style.height = "inherit";
container.style.overflow = "auto";
} else {
container = target.firstChild;
}
contentDiv.style.display = "none";
contentDiv.id = "timelineDiv" + i;
// Default to up if options.direction is non-existant or not up or down
options.direction = options.direction || "up";
if ( options.direction.toLowerCase() === "down" ) {
goingUp = false;
}
if ( target && container ) {
// if this isnt the first div added to the target div
if( goingUp ){
// insert the current div before the previous div inserted
container.insertBefore( contentDiv, container.firstChild );
}
else {
container.appendChild( contentDiv );
}
} else if ( Popcorn.plugin.debug ) {
throw new Error( "target container doesn't exist" );
}
i++;
// Default to empty if not used
//options.innerHTML = options.innerHTML || "";
contentDiv.innerHTML = "<p><span id='big' style='font-size:24px; line-height: 130%;' >" + options.title + "</span><br />" +
"<span id='mid' style='font-size: 16px;'>" + options.text + "</span><br />" + options.innerHTML;
return {
start: function( event, options ) {
contentDiv.style.display = "block";
if( options.direction === "down" ) {
container.scrollTop = container.scrollHeight;
}
},
end: function( event, options ) {
contentDiv.style.display = "none";
},
_teardown: function( options ) {
( container && contentDiv ) && container.removeChild( contentDiv ) && !container.firstChild && target.removeChild( container );
}
};
},
{
about: {
name: "Popcorn Timeline Plugin",
version: "0.1",
author: "David Seifried @dcseifried",
website: "dseifried.wordpress.com"
},
options: {
start: {
elem: "input",
type: "text",
label: "In"
},
end: {
elem: "input",
type: "text",
label: "Out"
},
target: "feed-container",
title: {
elem: "input",
type: "text",
label: "title"
},
text: {
elem: "input",
type: "text",
label: "text"
},
innerHTML: {
elem: "input",
type: "text",
label: "innerHTML"
},
direction: {
elem: "input",
type: "text",
label: "direction"
}
}
});
})( Popcorn );