482 lines
10 KiB
JavaScript
482 lines
10 KiB
JavaScript
/*
|
|
This program is free software. It comes without any warranty, to
|
|
the extent permitted by applicable law. You can redistribute it
|
|
and/or modify it under the terms of the Do What The Fuck You Want
|
|
To Public License, Version 2, as published by Sam Hocevar. See
|
|
http://sam.zoy.org/wtfpl/COPYING for more details.
|
|
*/
|
|
|
|
/* I'm sorry I never got around to beautifying the code, but I was
|
|
* simply more focused on encoding and subbing my films.
|
|
*/
|
|
|
|
function empty(){}
|
|
|
|
|
|
HTMLElement.prototype.set_opacity = function(val) {
|
|
this.style.opacity = val
|
|
this.style.filter = 'alpha(opacity=' + val*100 + ')'
|
|
}
|
|
|
|
HTMLElement.prototype.fade = function(fade_in, increase, speed, afterfunc) {
|
|
if (increase == undefined || increase == -1)
|
|
var increase = 5
|
|
if (speed = undefined || speed == -1)
|
|
var speed = 50
|
|
if (afterfunc == undefined)
|
|
var afterfunc = empty
|
|
|
|
this.style.display = 'block'
|
|
if (fade_in) {
|
|
this.fade_opacity = 0
|
|
this.set_opacity(0)
|
|
}
|
|
else {
|
|
this.fade_opacity = 100
|
|
this.set_opacity(1)
|
|
}
|
|
this.fade_increase = increase
|
|
this.fade_afterfunc = afterfunc
|
|
this.fade_in = fade_in
|
|
this.fade_interval = setInterval(this.fade_run, speed, this)
|
|
}
|
|
|
|
HTMLElement.prototype.fade_in = function(increase, speed, afterfunc) {
|
|
this.fade(true, increase, speed, afterfunc)
|
|
}
|
|
|
|
HTMLElement.prototype.fade_out = function(increase, speed, afterfunc) {
|
|
this.fade(false, increase, speed, afterfunc)
|
|
}
|
|
|
|
HTMLElement.prototype.fade_run = function(obj) {
|
|
var end
|
|
if (obj.fade_in) {
|
|
obj.fade_opacity += obj.fade_increase
|
|
end = obj.fade_opacity >= 100
|
|
}
|
|
else {
|
|
obj.fade_opacity -= obj.fade_increase
|
|
end = obj.fade_opacity <= 0
|
|
}
|
|
if (!end)
|
|
obj.set_opacity(obj.fade_opacity/100)
|
|
else
|
|
obj.fade_end()
|
|
}
|
|
|
|
HTMLElement.prototype.fade_end = function() {
|
|
clearInterval(this.fade_interval)
|
|
if (this.fade_in)
|
|
this.set_opacity(1)
|
|
else {
|
|
this.set_opacity(0)
|
|
this.style.display = 'none'
|
|
}
|
|
delete this.fade_interval
|
|
delete this.fade_opacity
|
|
delete this.fade_increase
|
|
delete this.fade_in
|
|
var func = this.fade_afterfunc
|
|
delete this.fade_afterfunc
|
|
func()
|
|
}
|
|
|
|
|
|
function get_window_size() {
|
|
if (window.innerWidth) {
|
|
w = window.innerWidth
|
|
h = window.innerHeight
|
|
}
|
|
else if (document.body.clientWidth) {
|
|
w = document.body.clientWidth
|
|
h = document.body.clientHeight
|
|
}
|
|
}
|
|
|
|
function update_csssvg() {
|
|
get_window_size()
|
|
|
|
try {
|
|
// More logical resize
|
|
if (h < w * 0.45)
|
|
svg.setAttribute('preserveAspectRatio', 'xMidYMid slice')
|
|
else
|
|
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')
|
|
} catch (error) {}
|
|
// Just for looks
|
|
text_box.style.minHeight = h - 101 + 'px'
|
|
text_content.style.minHeight = h - 215 - menu_height + 'px'
|
|
}
|
|
|
|
function in_list(obj, lst) {
|
|
for (var x in lst) {
|
|
if (lst[x] == obj)
|
|
return x
|
|
}
|
|
|
|
return -1
|
|
}
|
|
|
|
function set_title_based_on_page(num) {
|
|
if (pages_titles[num])
|
|
document.title = root_title + ' :: ' + pages_titles[num]
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function pagescroll_start() {
|
|
if (page_scrolling)
|
|
return false
|
|
|
|
var newelem = pages_elems[new_num]
|
|
var oldelem = pages_elems[old_num]
|
|
|
|
newelem.style.position = 'absolute'
|
|
newelem.style.top = '6px'
|
|
newelem.style.marginLeft = '525px'
|
|
newelem.className = 'focus'
|
|
|
|
if (newelem.scrollHeight > oldelem.scrollHeight) {
|
|
newelem.style.position = ''
|
|
newelem.style.marginLeft = '525px'
|
|
oldelem.style.position = 'absolute'
|
|
oldelem.style.top = '6px'
|
|
}
|
|
|
|
page_moved = 0
|
|
|
|
increase = 10
|
|
page_change_increase = 400
|
|
|
|
page_scrolling = true
|
|
pagescroll()
|
|
}
|
|
|
|
function pagescroll() {
|
|
var tmp_increase = increase + 15
|
|
if (page_moved + tmp_increase < page_change_increase)
|
|
increase = tmp_increase
|
|
else
|
|
increase -= 25
|
|
mv = page_moved + increase
|
|
if (mv < PAGE_WIDTH) {
|
|
page_moved = mv
|
|
text_content.style.left = -mv + 'px'
|
|
setTimeout("pagescroll()", 50)
|
|
}
|
|
else
|
|
pagescroll_end()
|
|
}
|
|
|
|
function pagescroll_end() {
|
|
var newelem = pages_elems[new_num]
|
|
var oldelem = pages_elems[old_num]
|
|
|
|
current_page = pages_refs[new_num]
|
|
set_title_based_on_page(new_num)
|
|
|
|
text_content.removeAttribute('style')
|
|
newelem.removeAttribute('style')
|
|
oldelem.removeAttribute('style')
|
|
oldelem.className = 'hidden'
|
|
|
|
text_content.style.left = '0'
|
|
newelem.style.left = '0'
|
|
oldelem.style.left = '0'
|
|
|
|
pages_menu_elems[old_num].className = ''
|
|
pages_menu_elems[new_num].className = 'focus'
|
|
|
|
page_scrolling = false
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function cinema_start(num, subs_lang) {
|
|
if (video_playing) {
|
|
if (num != video_playing) {
|
|
video_playing = num
|
|
cininf.fade_out(10, -1, function() {cinema_set_description(); cininf.fade_in(10)})
|
|
cinema_play()
|
|
}
|
|
return
|
|
}
|
|
|
|
if (subs_lang) {
|
|
var ok = false
|
|
for (var x in subtitles) {
|
|
if (subtitles[x][0] == num) {
|
|
ok = true
|
|
subtitles[x][1].resume()
|
|
break
|
|
}
|
|
}
|
|
if (!ok)
|
|
subtitles.push([num, new subtitle(cinvid, 'vid/niels-natur'+num+'-'+subs_lang+'.srt', cinelm)])
|
|
}
|
|
video_playing = num
|
|
cinema_set_description()
|
|
cinelm.fade_in(7, -1, cinema_start_continue)
|
|
}
|
|
|
|
function cinema_set_description() {
|
|
cininf.innerHTML = root_title + ' ' + video_playing
|
|
}
|
|
|
|
function cinema_start_continue() {
|
|
cininf.fade_in(10)
|
|
cinelm_close.fade_in(10)
|
|
|
|
text_wrapper.style.display = 'none'
|
|
bgflow.style.display = 'none'
|
|
|
|
cinema_play()
|
|
}
|
|
|
|
function cinema_play() {
|
|
var url = 'vid/niels-natur' + video_playing + '-small.ogv'
|
|
|
|
if (cinvid.currentTime != undefined) {
|
|
cinvid.src = url
|
|
cinvid.play()
|
|
}
|
|
else {
|
|
add_cortado(url)
|
|
}
|
|
}
|
|
|
|
function cinema_end() {
|
|
text_wrapper.style.display = ''
|
|
bgflow.style.display = ''
|
|
|
|
if (cinvid.currentTime != undefined) {
|
|
cinvid.pause()
|
|
}
|
|
else {
|
|
remove_cortado()
|
|
}
|
|
for (var x in subtitles) {
|
|
if (subtitles[x][0] == video_playing) {
|
|
subtitles[x][1].stop()
|
|
break
|
|
}
|
|
}
|
|
video_playing = 0
|
|
|
|
cininf.fade_out(7)
|
|
cinelm_close.fade_out()
|
|
cinelm.fade_out(-1, -1, function(){})
|
|
}
|
|
|
|
|
|
|
|
|
|
function do_action(href) {
|
|
var action, x
|
|
action = href.substr(href.indexOf('#')+1)
|
|
if (!page_scrolling && action != current_page && in_list(action, pages_refs) != -1) {
|
|
// It is a hidden page (to be shown)
|
|
|
|
var name, elem, menu_elem, parent
|
|
for (x in pages_refs) {
|
|
name = pages_refs[x]
|
|
elem = pages_elems[x]
|
|
menu_elem = pages_menu_elems[x]
|
|
if (name == action) {
|
|
// Put element after other elements
|
|
parent = elem.parentNode
|
|
parent.removeChild(elem)
|
|
parent.appendChild(elem)
|
|
|
|
new_num = x
|
|
}
|
|
else if (name == current_page) {
|
|
old_num = x
|
|
}
|
|
}
|
|
|
|
pagescroll_start()
|
|
}
|
|
else if (action.indexOf('play') == 0) {
|
|
var play = action.substr(4)
|
|
var dot = play.indexOf('.')
|
|
var subs
|
|
if (dot != -1) {
|
|
subs = play.substr(dot+1)
|
|
play = play.substr(0, dot)
|
|
}
|
|
else
|
|
subs = false
|
|
play = play*1
|
|
if (play) {
|
|
do_action(pages_refs[1])
|
|
cinema_start(play, subs)
|
|
}
|
|
}
|
|
}
|
|
|
|
function remove_cortado(url) {
|
|
cinvid.removeChild(cinapp)
|
|
delete cinapp
|
|
}
|
|
|
|
function add_cortado(url) {
|
|
cinapp = document.createElement('applet')
|
|
cinapp.setAttribute('code', 'com.fluendo.player.Cortado.class')
|
|
cinapp.setAttribute('archive', 'http://theora.org/cortado.jar')
|
|
cinapp.width = '640'
|
|
cinapp.height = '360'
|
|
|
|
namval = {
|
|
'url': url,
|
|
'local': 'false',
|
|
'duration': '',
|
|
'bufferSize': '200',
|
|
'autoPlay': 'true',
|
|
'statusHeight': '16'
|
|
}
|
|
|
|
for (x in namval) {
|
|
elem = document.createElement('param')
|
|
elem.setAttribute('name', x)
|
|
elem.setAttribute('value', namval[x])
|
|
if (x == 'url')
|
|
cinapp_url = elem
|
|
cinapp.appendChild(elem)
|
|
}
|
|
|
|
cinvid.appendChild(cinapp)
|
|
}
|
|
|
|
|
|
window.onload = function() {
|
|
// Get elements
|
|
bgflow = document.getElementById('bgflow')
|
|
text_wrapper = document.getElementById('text_wrapper')
|
|
text_box = document.getElementById('text_box')
|
|
text_menu = document.getElementById('text_menu')
|
|
text_content = document.getElementById('text_content')
|
|
|
|
|
|
PAGE_WIDTH = 525
|
|
HALF_PAGE = Math.round(PAGE_WIDTH / 2) + 10 // With a little extra
|
|
|
|
// Set default values (also for debugging)
|
|
w = -1
|
|
h = -1
|
|
old_num = -1
|
|
new_num = -1
|
|
page_scrolling = false
|
|
video_playing = 0
|
|
|
|
// Get menu height if menu exists
|
|
try {
|
|
menu_height = text_menu.offsetHeight
|
|
} catch(err) {
|
|
menu_height = 0
|
|
}
|
|
|
|
// Get root element of background SVG
|
|
try {
|
|
svg = bgflow.getSVGDocument().rootElement
|
|
} catch (error) {}
|
|
|
|
root_title = document.title
|
|
|
|
var elems, elem, x, y, name, urlhash, hash_in_list, elem_num, menu_elem
|
|
var elems2, elem2
|
|
urlhash = window.location.hash.substr(1)
|
|
|
|
pages_refs = new Array()
|
|
pages_elems = new Array()
|
|
pages_menu_elems = new Array()
|
|
pages_titles = new Array()
|
|
|
|
elems = text_menu.childNodes
|
|
for (x in elems) {
|
|
elem = elems[x]
|
|
if (elem.nodeName && elem.nodeName.toLowerCase() == 'li') {
|
|
pages_menu_elems.push(elem)
|
|
elem = elem.childNodes[0]
|
|
pages_titles.push(elem.innerHTML)
|
|
pages_refs.push(elem.href.substr(elem.href.indexOf('#')+1))
|
|
}
|
|
}
|
|
|
|
hash_in_list = in_list(urlhash, pages_refs)
|
|
if (hash_in_list != -1) {
|
|
current_page = urlhash
|
|
elem_num = hash_in_list
|
|
}
|
|
else {
|
|
current_page = pages_refs[0]
|
|
elem_num = 0
|
|
}
|
|
|
|
// Hide non-current pages
|
|
for (x in pages_refs) {
|
|
name = pages_refs[x]
|
|
elem = document.getElementById('content_' + name)
|
|
menu_elem = pages_menu_elems[x]
|
|
pages_elems.push(elem)
|
|
if (name == current_page) {
|
|
elem.className = 'focus'
|
|
menu_elem.className = 'focus'
|
|
}
|
|
else {
|
|
elem.className = 'hidden'
|
|
menu_elem.className = ''
|
|
}
|
|
}
|
|
|
|
set_title_based_on_page(elem_num)
|
|
|
|
// Set up alternate handling of '#' links and prepare video shots
|
|
elems = document.getElementsByTagName('a')
|
|
for (x in elems) {
|
|
elem = elems[x]
|
|
if (elem.href != undefined && elem.href.indexOf('#') != -1)
|
|
elem.onclick = function() {do_action(this.href)}
|
|
}
|
|
|
|
// Prepare page for viewing video
|
|
cinelm = document.createElement('div')
|
|
cinelm.id = 'cinema'
|
|
|
|
cinelm_close = document.createElement('div')
|
|
cinelm_close.id = 'cinema-close'
|
|
cinelm_close.onclick = function() {cinema_end()}
|
|
cinelm.appendChild(cinelm_close)
|
|
|
|
cinvid = document.createElement('video')
|
|
cinvid.id = 'cinema-film'
|
|
cinvid.width = '640'
|
|
cinvid.height = '360'
|
|
cinvid.setAttribute('controls', 'controls')
|
|
cinvid.addEventListener('ended', function() {cinema_end()}, true)
|
|
|
|
cinelm.appendChild(cinvid)
|
|
|
|
cininf = document.createElement('div')
|
|
cininf.id = 'cinema-info'
|
|
cinelm.appendChild(cininf)
|
|
|
|
document.body.appendChild(cinelm)
|
|
|
|
// Prepare for loading of subtitles
|
|
subtitles = new Array()
|
|
|
|
// Do whatever the hash tells you to do
|
|
do_action(urlhash)
|
|
|
|
// Prepare to update css and svg (and do it)
|
|
window.onresize = function() {update_csssvg()}
|
|
update_csssvg()
|
|
}
|