pandora_collectivecinema/static/js/home.collectivecinema.js
2020-10-21 17:22:30 +02:00

384 lines
12 KiB
JavaScript

'use strict';
pandora.ui.home = function() {
var self = {},
that = $('<div>')
.addClass('OxScreen')
.attr({id: 'home'})
.css({
backgroundColor: 'white',
height: '100%',
opacity: 0,
overflowY: 'auto',
position: 'absolute',
width: '100%',
zIndex: 1001
}),
$box = $('<div>')
.css({
left: 0,
margin: '0 auto',
position: 'absolute',
right: 0,
top: '32px',
width: '800px'
})
.appendTo(that),
homeMenuCenterCSS = {
height: 'auto',
left: 0,
margin: '0 auto',
position: 'absolute',
right: 0,
top: '300px',
width: '320px'
},
homeMenuLeftCSS = {
margin: '',
right: '',
left: '32px',
position: 'absolute',
top: '32px',
width: '148px'
},
$menu = $('<div>')
.attr({
id: 'homeMenu'
})
.css(homeMenuCenterCSS)
.appendTo(that),
$logo = Ox.Element({
element: '<img>'
})
.addClass('selected')
.attr({
id: 'homeLogo',
src: '/static/svg/logo.collectivecinema.svg'
})
.css({
height: 'auto',
left: 0,
margin: '0 auto',
position: 'absolute',
right: 0,
top: 0,
width: '320px'
})
.bind({
click: function() {
if (!$logo.hasClass('selected')) {
$logo.css({opacity: 1});
renderPage('home');
}
},
mouseenter: function() {
if (!$logo.hasClass('selected')) {
$logo.css({opacity: 0.5});
}
},
mouseleave: function() {
if (!$logo.hasClass('selected')) {
$logo.css({opacity: 1});
}
}
})
.appendTo($box),
$title = Ox.Element({
element: '<img>'
})
.css({
display: 'none',
height: '40px',
left: 0,
margin: '0 auto',
position: 'absolute',
right: 0,
top: '280px'
})
.appendTo($box),
$textBox = $('<div>').css({
display: 'none',
position: 'absolute',
top: '220px',
}).appendTo($box),
$textSubtitle = Ox.Element()
.html('Collective Cinema')
.addClass('subtitle')
.appendTo($textBox),
$text = $('<div>').css({
display: 'flex'
}).appendTo($textBox),
$text_es = $('<div>')
.addClass('text')
.addClass('es')
.css({
display: 'none',
fontSize: '13px',
lineHeight: '18px',
marginRight: '8px',
textAlign: 'right',
width: '392px'
})
.appendTo($text),
$text_en = $('<div>')
.addClass('text')
.addClass('en')
.css({
display: 'none',
fontSize: '12px',
left: '400px',
lineHeight: '17px',
marginLeft: '8px',
width: '392px'
})
.appendTo($text),
$footer = Ox.Element()
.html('<img src="/static/images/cultura_fonca_negro.png" width="300">')
.css({
textAlign: 'center',
marginBottom: '48px',
display: 'none',
})
.appendTo($textBox),
$subtitle = Ox.Element()
.html('Collective Cinema')
.addClass('subtitle')
.appendTo($menu),
$enterButton = Ox.Element()
.addClass('menu')
.html('<div class="en">Enter the archive</div><div class="es">Entra al archivo</div>')
.bind({
click: function() {
if ($siteSelection.css('height') == '0px') {
$siteSelection.animate({height: '125px'}, 800, function() {
})
} else {
$siteSelection.animate({height: '0px'}, 800)
}
},
mouseenter: function() {
$enterButton.css({opacity: 0.5});
},
mouseleave: function() {
$enterButton.css({opacity: 1});
}
})
.appendTo($menu),
$siteSelection = Ox.Element()
.addClass('submenu')
.html(`
<div class="sub">Capital</div>
<div class="sub">Orestiada/Oresteia</div>
<div class="sub">Sleepers</div>
<div class="sub">Decolonial</div>
`)
.css({height: 0})
.bind({
click: function(event) {
var sub = event.target.innerText
var target
if (sub == 'Capital') {
target = 'https://collective-cinema.net/grid'
} else if (sub == 'Orestiada/Oresteia') {
target = 'https://orestiada.collective-cinema.net/grid'
} else if (sub == 'Sleepers') {
target = 'https://sleepers.collective-cinema.net/grid'
} else if (sub == 'Decolonial') {
target = 'https://decolonial.collective-cinema.net/grid'
} else {
target = 'https://collective-cinema.net/grid'
}
if (document.location.href.split('/')[2] == target.split('/')[2]) {
var page = pandora.user.ui.page == 'home' ? '' : pandora.user.ui.page;
pandora.UI.set({
page: page,
section: 'items'
});
that.fadeOutScreen();
} else {
document.location.href = target
}
}
})
.appendTo($menu),
$aboutButton = Ox.Element()
.addClass('menu')
.html('<div class="en">About</div><div class="es">Acerca de</div>')
.bind({
click: function() {
renderPage('about');
},
mouseenter: function() {
$aboutButton.css({opacity: 0.5});
},
mouseleave: function() {
$aboutButton.css({opacity: 1});
}
})
.appendTo($menu),
$contactButton = Ox.Element()
.addClass('menu')
.html('<div class="en">Contact</div><div class="es">Contacto</div>')
.bind({
click: function() {
renderPage('contact');
},
mouseenter: function() {
$contactButton.css({opacity: 0.5});
},
mouseleave: function() {
$contactButton.css({opacity: 1});
}
})
.appendTo($menu),
text,
loadedCSS = false;
function getText(callback) {
var text = {};
Ox.getAsync([
'/static/txt/about.es.txt',
'/static/txt/about.en.txt',
'/static/txt/contact.es.txt',
'/static/txt/contact.en.txt'
], Ox.get, function(data) {
Object.keys(data).forEach(function(key) {
text[key.slice(12, -4)] = data[key].replace(/\n/g, '<br/>')
+ '<br/><br/><br/>';
})
pandora.api.find({}, function(result) {
var seconds = result.data.duration | (858 * 3600)
text.hours = Math.round(seconds / 3600).toString();
callback(text);
});
});
}
function renderPage(page) {
if (page == 'home') {
$logo.addClass('selected').css({cursor: 'default'});
$textBox.hide()
$title.css({display: 'none'});
$text_es.css({display: 'none'});
$text_en.css({display: 'none'});
$tutorials.html('').hide();
$menu.css(homeMenuCenterCSS);
} else {
$menu.css(homeMenuLeftCSS);
$logo.removeClass('selected').css({cursor: 'pointer'});
$textBox.show()
$text_es.css({
display: 'block'
}).html(
text[page + '.es']
);
$text_en.css({
display: 'block'
}).html(
text[page + '.en']
);
if (page == 'about') {
$footer.show()
} else {
$footer.hide()
}
if (page == 'contact') {
Ox.forEach(
document.querySelectorAll('a[href="/contact"]'),
function(link) {
link.addEventListener('click', function(e) {
pandora.UI.set({page: 'contact'});
that.fadeOutScreen();
e.preventDefault();
return false;
})
}
);
}
}
}
function loadCSS(callback) {
if (loadedCSS) {
callback()
} else {
Ox.getFile('/static/css/home.collectivecinema.css', function() {
loadedCSS = true
callback()
})
}
}
that.fadeInScreen = function() {
loadCSS(function() {
that.appendTo(Ox.$body).animate({opacity: 1}, 500, function() {
getText(function(data) {
text = data;
that.find('*').animate({opacity: 1}, 250, function() {
// ...
});
});
});
});
return that;
};
that.fadeOutScreen = function() {
$('.OxTooltip').remove();
that.animate({opacity: 0}, 500, function() {
that.remove();
});
pandora.$ui.tv && pandora.$ui.tv.unmute().find('.OxControls.OxVolume').hide();
self.keydown && Ox.$document.off({keydown: self.keydown});
return that;
};
that.showScreen = function(callback) {
var $elements = that.find('*'), count = 0;
$box.css({top: '80px'});
$menu.css({top: '80px'});
getText(function(data) {
text = data;
loadCSS(function() {
that.css({opacity: 1}).appendTo(Ox.$body);
$box.animate({top: '32px'}, 500, function() {
$elements.animate({opacity: 1}, 250, function() {
if (++count == $elements.length) {
// ...
// callback && callback();
}
});
});
//$menu.animate({top: '32px'}, 500);
$menu.animate({top: homeMenuCenterCSS.top}, 500);
callback && callback();
});
});
return that;
};
return that;
};