|
3
|
1 |
var myDir = new IriSP.Model.Directory(), |
|
|
2 |
myProject = myDir.remoteSource({ |
|
|
3 |
url: "data/rigoletto.json", |
|
|
4 |
serializer: IriSP.serializers.ldt |
|
|
5 |
}); |
|
|
6 |
|
|
|
7 |
myProject.onLoad(function() { |
|
|
8 |
|
|
|
9 |
$(".project-title").text(myProject.title); |
|
|
10 |
|
|
|
11 |
var myMedia = myProject.getCurrentMedia(); |
|
|
12 |
|
|
|
13 |
IriSP.htmlPlayer( |
|
|
14 |
myMedia, |
|
|
15 |
$(".video-container"), |
|
|
16 |
{ |
|
|
17 |
width: 1000, |
|
|
18 |
height: 560, |
|
|
19 |
autostart: true |
|
|
20 |
} |
|
|
21 |
); |
|
|
22 |
|
|
|
23 |
myMedia.on("timeupdate", function(t) { |
|
|
24 |
var progress = $(".progress-indicator"), |
|
|
25 |
pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration; |
|
|
26 |
progress.css("left",pos); |
|
|
27 |
}); |
|
|
28 |
myMedia.on("play", function() { |
|
|
29 |
$(".play-button").addClass("pause"); |
|
|
30 |
}); |
|
|
31 |
myMedia.on("pause", function() { |
|
|
32 |
$(".play-button").removeClass("pause"); |
|
|
33 |
}); |
|
|
34 |
|
|
|
35 |
var tags = myProject.getTags().sortBy(function(t) { |
|
|
36 |
return - t.getRelated("annotation").length; |
|
|
37 |
}).slice(0,12), |
|
|
38 |
tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'), |
|
|
39 |
clickedTag = null, |
|
|
40 |
lastTag = null; |
|
|
41 |
|
|
|
42 |
$(".tags-list").html(tags.map(tagTemplate).join("")); |
|
|
43 |
|
|
|
44 |
$("body").click(function() { |
|
|
45 |
if (clickedTag) { |
|
|
46 |
$(".chapter").removeClass("found"); |
|
|
47 |
clickedTag = null; |
|
|
48 |
} |
|
|
49 |
}); |
|
|
50 |
|
|
|
51 |
function showTag(tagId) { |
|
|
52 |
$(".chapter").removeClass("found"); |
|
|
53 |
var tag = myProject.getElement(tagId); |
|
|
54 |
if (tag) { |
|
|
55 |
tag.getRelated("annotation").forEach(function(a) { |
|
|
56 |
a.trigger("found-tags"); |
|
|
57 |
}); |
|
|
58 |
} |
|
|
59 |
lastTag = tagId; |
|
|
60 |
} |
|
|
61 |
|
|
|
62 |
$(".tag").hover(function() { |
|
|
63 |
showTag($(this).attr("data-tag-id")); |
|
|
64 |
}, function() { |
|
|
65 |
showTag(clickedTag); |
|
|
66 |
}).click(function() { |
|
|
67 |
clickedTag = lastTag; |
|
|
68 |
return false; |
|
|
69 |
}); |
|
|
70 |
|
|
|
71 |
|
|
|
72 |
var chapters = myProject.getAnnotationsByTypeTitle("chapitrage"), |
|
|
73 |
chapterTemplate = _.template( |
|
|
74 |
'<li class="chapter" style="left: <%- 100*begin/getMedia().duration %>%; width: <%- 100*getDuration()/getMedia().duration %>%;">' |
|
|
75 |
+ '<div class="chapter-block"></div><div class="chapter-title"><%- title %></div></li>' |
|
|
76 |
), |
|
|
77 |
chapterList = $(".chapters-list"), |
|
|
78 |
hoveredChapter = null, |
|
|
79 |
currentChapter = null, |
|
|
80 |
currentChapterI = 0; |
|
|
81 |
|
|
|
82 |
function highlightChapter() { |
|
|
83 |
$(".chapter").removeClass("active"); |
|
|
84 |
if (hoveredChapter || currentChapter) { |
|
|
85 |
(hoveredChapter || currentChapter).addClass("active"); |
|
|
86 |
} |
|
|
87 |
} |
|
|
88 |
|
|
|
89 |
chapters.forEach(function(chapter, i) { |
|
|
90 |
var element = $(chapterTemplate(chapter)); |
|
|
91 |
element.click(function() { |
|
|
92 |
myMedia.setCurrentTime(chapter.begin); |
|
|
93 |
}).hover(function() { |
|
|
94 |
hoveredChapter = element; |
|
|
95 |
highlightChapter(); |
|
|
96 |
}, function() { |
|
|
97 |
hoveredChapter = null; |
|
|
98 |
highlightChapter(); |
|
|
99 |
}); |
|
|
100 |
chapter.on("enter", function() { |
|
|
101 |
currentChapter = element; |
|
|
102 |
currentChapterI = i; |
|
|
103 |
if (i) { |
|
|
104 |
$(".prev-chapter").removeClass("inactive"); |
|
|
105 |
} else { |
|
|
106 |
$(".prev-chapter").addClass("inactive"); |
|
|
107 |
} |
|
|
108 |
if (i < chapters.length - 1) { |
|
|
109 |
$(".next-chapter").removeClass("inactive"); |
|
|
110 |
} else { |
|
|
111 |
$(".next-chapter").addClass("inactive"); |
|
|
112 |
} |
|
|
113 |
highlightChapter(); |
|
|
114 |
}); |
|
|
115 |
chapter.on("leave", function() { |
|
|
116 |
currentChapter = null; |
|
|
117 |
highlightChapter(); |
|
|
118 |
}); |
|
|
119 |
chapter.on("found-tags", function() { |
|
|
120 |
element.addClass("found"); |
|
|
121 |
}); |
|
|
122 |
chapterList.append(element); |
|
|
123 |
}); |
|
|
124 |
|
|
|
125 |
$(".prev-chapter").click(function() { |
|
|
126 |
if (i) { |
|
|
127 |
myMedia.setCurrentTime(chapters[currentChapterI - 1].begin); |
|
|
128 |
} |
|
|
129 |
}); |
|
|
130 |
$(".next-chapter").click(function() { |
|
|
131 |
if (i < chapters.length - 1) { |
|
|
132 |
myMedia.setCurrentTime(chapters[currentChapterI + 1].begin); |
|
|
133 |
} |
|
|
134 |
}); |
|
|
135 |
|
|
|
136 |
$(".play-button").click(function() { |
|
|
137 |
if (myMedia.paused) { |
|
|
138 |
myMedia.play(); |
|
|
139 |
} else { |
|
|
140 |
myMedia.pause(); |
|
|
141 |
} |
|
|
142 |
}); |
|
|
143 |
|
|
2
|
144 |
$(".progress-indicator").draggable({ |
|
|
145 |
axis: "x", |
|
3
|
146 |
containment: "parent", |
|
|
147 |
drag: function(e, ui) { |
|
|
148 |
var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() ); |
|
|
149 |
myMedia.setCurrentTime(t); |
|
|
150 |
} |
|
2
|
151 |
}); |
|
|
152 |
$(".chips-list").on( { |
|
|
153 |
mouseenter: function() { |
|
|
154 |
$(".chip").css("opacity",.3); |
|
|
155 |
$(this).css("opacity",1); |
|
|
156 |
}, |
|
|
157 |
mouseleave: function() { |
|
|
158 |
$(".chip").css("opacity",1); |
|
|
159 |
} |
|
|
160 |
}, ".chip"); |
|
|
161 |
$(".play-button").click(function() { |
|
|
162 |
$(this).toggleClass("pause"); |
|
|
163 |
}); |
|
|
164 |
|
|
|
165 |
var slideshowData = [ |
|
|
166 |
{ |
|
|
167 |
url: "http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg", |
|
|
168 |
title: "Waves at La Jolla", |
|
|
169 |
description: "The sea is the connected body of salt water that covers 70 percent of the Earth's surface. The sea is important in moderating the Earth's climate, in providing food and oxygen, in its enormous diversity of life, and for navigation. The study of the sea is called oceanography. The sea has been travelled and explored since ancient times, but its scientific study dates broadly from the voyages of Captain James Cook to explore the Pacific Ocean between 1768 and 1779.", |
|
|
170 |
credit: "CC0: Jon Sullivan" |
|
|
171 |
}, { |
|
|
172 |
url: "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg/1280px-Katsushika_Hokusai_-_Thirty-Six_Views_of_Mount_Fuji-_The_Great_Wave_Off_the_Coast_of_Kanagawa_-_Google_Art_Project.jpg", |
|
|
173 |
title: "冨嶽三十六景・神奈川沖浪裏", |
|
|
174 |
description: "La Grande Vague de Kanagawa (神奈川沖浪裏, Kanagawa-oki nami-ura, littéralement Sous la vague au large de Kanagawa), plus connue sous le nom de La Vague, est une célèbre estampe japonaise du peintre japonais spécialiste de l'ukiyo-e, Hokusai, publiée en 18302 ou en 1831 pendant l'époque d'Edo.\nCette estampe est l'œuvre la plus connue de Hokusai et la première de sa fameuse série « Trente-six vues du mont Fuji »Note 2, dans laquelle l'utilisation du bleu de Prusse renouvelait le langage de l'estampe japonaise. La composition de La Vague, synthèse de l'estampe japonaise traditionnelle et de la « perspective » occidentale, lui valut un succès immédiat au Japon, puis en Europe, où elle fut une des sources d'inspiration des Impressionnistes.", |
|
|
175 |
credit: "葛飾北斎" |
|
|
176 |
}, { |
|
|
177 |
url: "http://upload.wikimedia.org/wikipedia/commons/7/76/Blue_Linckia_Starfish.JPG", |
|
|
178 |
title: "Blue Starfish (Linckia laevigata)", |
|
|
179 |
description: "Linckia laevigata (sometimes called the blue Linckia or Blue Star) is a species of sea star (commonly known as a starfish) in the shallow waters of tropical Indo-Pacific (a biogeographic region of the Earth's seas, comprising the tropical waters of the Indian Ocean, the western and central Pacific Ocean, and the seas connecting the two in the general area of Indonesia). The variation (Polymorphism, in this case, a color morph) most commonly found is pure, dark or light blue, although observers find the aqua, purple or orange variation throughout the ocean. These sea stars may grow up to 30 cm in diameter, with rounded tips at each of the arms — some individuals may bear lighter or darker spots along each of their arms. Individual specimens are typically firm in texture, possessing the slightly tubular, elongated arms common to most of other members of the family Ophidiasteridae, and usually possessing short, yellowish tube feet. An inhabitant of coral reefs and sea grass beds, this species is relatively common and is typically found in sparse density throughout its range. Blue Stars live subtidally, or sometimes intertidally, on fine (sand) or hard substrata and move relatively slow (mean locomoation rate of 8.1 cm/min).", |
|
|
180 |
credit: "CC-SA: Richard Ling" |
|
|
181 |
}, { |
|
|
182 |
url: "http://upload.wikimedia.org/wikipedia/commons/0/06/Corrientes-oceanicas.gif", |
|
|
183 |
title: "Ocean currents", |
|
|
184 |
description: "An ocean current is a continuous, directed movement of ocean water generated by the forces acting upon this mean flow, such as breaking waves, wind, Coriolis effect, cabbeling, temperature and salinity differences and tides caused by the gravitational pull of the Moon and the Sun. Depth contours, shoreline configurations and interaction with other currents influence a current's direction and strength.\nA deep current is any ocean current at a depth of greater than 100m. Ocean currents can flow for great distances, and together they create the great flow of the global conveyor belt which plays a dominant part in determining the climate of many of the Earth’s regions. Perhaps the most striking example is the Gulf Stream, which makes northwest Europe much more temperate than any other region at the same latitude. Another example is Lima, Peru, where the climate is cooler (sub-tropical) than the tropical latitudes in which the area is located, due to the effect of the Humboldt Current.", |
|
|
185 |
credit: "Public domain" |
|
|
186 |
} |
|
|
187 |
]; |
|
|
188 |
|
|
|
189 |
function slideshow(data) { |
|
3
|
190 |
var currentslide = 0, slideInterval, playing = false, loaded = false; |
|
|
191 |
|
|
|
192 |
function checkloaded() { |
|
|
193 |
loaded = data.reduce(function(mem, slide) { |
|
|
194 |
return (mem && !!slide.image && !!slide.image.width); |
|
|
195 |
}, true); |
|
|
196 |
if (loaded) { |
|
|
197 |
showCurrentImage(); |
|
|
198 |
} |
|
|
199 |
} |
|
2
|
200 |
|
|
3
|
201 |
data.forEach(function(slide) { |
|
|
202 |
slide.image = new Image(); |
|
|
203 |
slide.image.onload = checkloaded; |
|
|
204 |
slide.image.src = slide.url; |
|
|
205 |
}); |
|
|
206 |
|
|
|
207 |
function resizeImage() { |
|
|
208 |
var imgel = $(".slideshow-image"); |
|
|
209 |
imgel.css("margin-top",""); |
|
|
210 |
var w = imgel.width(), |
|
|
211 |
h = imgel.height(); |
|
2
|
212 |
$(".slideshow-center").css("height",""); |
|
|
213 |
$(".slideshow-description").css("margin-left",w); |
|
3
|
214 |
var h2 = $(".slideshow-center").height(); |
|
|
215 |
if (h < h2) { |
|
|
216 |
imgel.css("margin-top",Math.floor((h2-h)/2)+"px"); |
|
|
217 |
} |
|
|
218 |
} |
|
|
219 |
|
|
|
220 |
function showCurrentImage() { |
|
|
221 |
var slide = data[currentslide]; |
|
|
222 |
$(".slideshow-image").attr({ |
|
|
223 |
src: slide.image.src, |
|
|
224 |
title: slide.title, |
|
|
225 |
alt: slide.title |
|
|
226 |
}); |
|
|
227 |
$(".slideshow-credits").text(slide.credit); |
|
|
228 |
$(".slideshow-title").text(slide.title); |
|
2
|
229 |
$(".slideshow-description").html( |
|
3
|
230 |
slide.description.split(/\n/gm).map(function(l) { |
|
2
|
231 |
return '<p>' + _.escape(l) + '</p>'; |
|
|
232 |
}).join("") |
|
|
233 |
); |
|
3
|
234 |
resizeImage(); |
|
|
235 |
} |
|
2
|
236 |
|
|
3
|
237 |
$(window).on("resize", resizeImage); |
|
2
|
238 |
|
|
|
239 |
function nextImage() { |
|
|
240 |
currentslide = (currentslide + 1) % data.length; |
|
|
241 |
showCurrentImage(); |
|
|
242 |
} |
|
|
243 |
|
|
|
244 |
function togglePlay() { |
|
|
245 |
playing = !playing; |
|
|
246 |
clearInterval(slideInterval); |
|
|
247 |
if (playing) { |
|
|
248 |
slideInterval = setInterval(nextImage,3000); |
|
|
249 |
$(".slideshow-play-pause").addClass("pause"); |
|
|
250 |
} else { |
|
|
251 |
$(".slideshow-play-pause").removeClass("pause"); |
|
|
252 |
} |
|
|
253 |
} |
|
|
254 |
|
|
|
255 |
$(".slideshow-next").click(nextImage); |
|
|
256 |
$(".slideshow-previous").click(function() { |
|
|
257 |
currentslide = (currentslide ? currentslide : data.length) - 1; |
|
|
258 |
showCurrentImage(); |
|
|
259 |
}); |
|
|
260 |
$(".slideshow-play-pause").click(togglePlay); |
|
|
261 |
|
|
|
262 |
} |
|
|
263 |
|
|
|
264 |
slideshow(slideshowData); |
|
|
265 |
|
|
3
|
266 |
$(".slideshow").click(function() { |
|
|
267 |
$(".slideshow-annotation").show(); |
|
|
268 |
}); |
|
|
269 |
|
|
|
270 |
$(".text").click(function() { |
|
|
271 |
$(".text-annotation").show(); |
|
|
272 |
}); |
|
|
273 |
|
|
|
274 |
$(".audio").click(function() { |
|
|
275 |
$(".audio-annotation").show(); |
|
|
276 |
}); |
|
|
277 |
|
|
|
278 |
$(".close-annotation").click(function() { |
|
|
279 |
$(".annotation").hide(); |
|
|
280 |
}) |
|
|
281 |
|
|
2
|
282 |
}); |