286 lines
10 KiB
JavaScript
286 lines
10 KiB
JavaScript
const DEFAULT_LANG = 'pt';
|
|
var data = {};
|
|
var prepared_data = {};
|
|
var language_name_matrix = {
|
|
'pt':{
|
|
'pt': 'Português',
|
|
'en': 'Portuguese',
|
|
'es': 'Portugués',
|
|
},
|
|
'en':{
|
|
'pt': 'Inglês',
|
|
'en': 'English',
|
|
'es': 'Inglés',
|
|
},
|
|
'es': {
|
|
'pt': 'Espanhol',
|
|
'en': 'Spanish',
|
|
'es': 'Español',
|
|
}
|
|
}
|
|
|
|
var language_textual_date_ranges = {
|
|
'pt': "{0} ({1}), das {2}:{3} às {4}:{5}",
|
|
'en': "{0} ({1}), from {2}:{3} to {4}:{5}",
|
|
'es': "{0} ({1}), de las {2}:{3} a las {4}:{5}",
|
|
}
|
|
|
|
function escapeHtml(unsafe) {
|
|
return String(unsafe)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
class TextualJoiner{
|
|
constructor(language){
|
|
this.middleconnector = ', ';
|
|
this.endconnector = ' e ';
|
|
if(language=='en'){
|
|
this.endconnector = ' and ';
|
|
}else if(language=='es'){
|
|
this.endconnector = ' y ';
|
|
}
|
|
}
|
|
join(list){
|
|
list = list.map(v=>String(v));
|
|
if(list.length<1) return '';
|
|
if(list.length==1) return list[0];
|
|
var last = list.pop();
|
|
var blast = list.pop();
|
|
list.push(blast+this.endconnector+last);
|
|
return list.join(this.middleconnector);
|
|
}
|
|
}
|
|
|
|
function LocalizeWeekdays(lang){
|
|
return {
|
|
'pt': ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
|
|
'en': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
'es': ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
|
|
}[lang]
|
|
}
|
|
|
|
function prepare_convention_series(data){
|
|
prepared_data[data.statute.uuid]={'kind': 'statute', ...data.statute};
|
|
prepare_string(data.name);
|
|
for(var edition of data.editions) prepare_convention_edition(edition);
|
|
}
|
|
|
|
function prepare_string(data){
|
|
prepared_data[data.uuid]={'kind': 'string', ...data};
|
|
}
|
|
|
|
function prepare_convention_edition(data){
|
|
prepared_data[data.uuid]={'kind': 'convention_edition', ...data};
|
|
prepare_string(data.name);
|
|
prepare_string(data.theme);
|
|
for(var rt of data.registration_tiers) prepare_registration_tier(rt);
|
|
for(var tag of data.tags) prepare_tag(tag);
|
|
for(var place of data.places) prepare_place(place);
|
|
for(var event of data.events) prepare_event(event, data.language);
|
|
}
|
|
|
|
function prepare_registration_tier(data){
|
|
prepared_data[data.uuid]={'kind': 'registration_tier', ...data};
|
|
prepare_string(data.tier);
|
|
}
|
|
|
|
function prepare_event(data, con_lang){
|
|
data = JSON.parse(JSON.stringify(data)) //deep copy, as we will change it
|
|
prepare_string(data.title);
|
|
if(data.subtitle.uuid) prepare_string(data.subtitle);
|
|
prepare_string(data.description);
|
|
if(data.picture.uuid) prepare_string(data.picture);
|
|
data.attendable_by = data.attendable_by.map(it => prepared_data[it]);
|
|
data.categories = data.categories.map(it => prepared_data[it]);
|
|
data.places = data.places.map(it => prepared_data[it]);
|
|
prepared_data[data.uuid]={'kind': 'event', 'con_lang': con_lang, ...data};
|
|
}
|
|
|
|
function prepare_place(data){
|
|
prepared_data[data.uuid]={'kind': 'place', ...data};
|
|
prepare_string(data.label);
|
|
prepare_color(data.color);
|
|
}
|
|
|
|
function prepare_tag(data){
|
|
prepared_data[data.uuid]={'kind': 'tag', ...data};
|
|
prepare_string(data.label);
|
|
prepare_color(data.color);
|
|
}
|
|
|
|
function prepare_color(data){
|
|
prepared_data[data.uuid]={'kind': 'color', ...data};
|
|
}
|
|
|
|
function re_render_everything(){
|
|
document.body.innerHTML = '';
|
|
document.title = data.name[get_language()];
|
|
document.body.innerHTML = ""+render_header()+render_page();
|
|
}
|
|
|
|
function render_header(){
|
|
var s = '';
|
|
s+='<nav class="langchgr">';
|
|
s+='<a class="btn blockybtn" href="'+generate_language_changer_link('pt')+'">PT</a>';
|
|
s+='<a class="btn blockybtn" href="'+generate_language_changer_link('en')+'">EN</a>';
|
|
s+='<a class="btn blockybtn" href="'+generate_language_changer_link('es')+'">ES</a>';
|
|
s+='</nav>';
|
|
return s;
|
|
}
|
|
|
|
function render_page_convention_eventrow(intent){
|
|
var s = '';
|
|
s+='<tr>';
|
|
s+='<td>';
|
|
s+='<a href="'+generate_page_changer_link(intent.uuid)+'">';
|
|
s+='<div>';
|
|
s+=escapeHtml(LocalizeWeekdays(get_language())[intent.time_start.wd]);
|
|
s+='</div>';
|
|
s+='<div>';
|
|
s+=('0'+escapeHtml(intent.time_start.hr)).slice(-2)+':'+('0'+escapeHtml(intent.time_start.mn)).slice(-2);
|
|
s+='</div>';
|
|
s+='<div>';
|
|
s+=('0'+escapeHtml(intent.time_end.hr)).slice(-2)+':'+('0'+escapeHtml(intent.time_end.mn)).slice(-2);
|
|
s+='</div>';
|
|
s+='</a>'
|
|
s+='</td>';
|
|
s+='<td>';
|
|
s+='<a href="'+generate_page_changer_link(intent.uuid)+'">';
|
|
s+='<div>';
|
|
s+=escapeHtml(intent.title[get_language()])
|
|
s+='</div>';
|
|
s+='<div>';
|
|
if(intent.subtitle.uuid){
|
|
s+=escapeHtml((intent.subtitle||{})[get_language()]||'')
|
|
}else{
|
|
s+=escapeHtml((new TextualJoiner(get_language())).join(intent.places.map(each=>each.label[get_language()])))
|
|
}
|
|
s+='</div>';
|
|
s+='</a>';
|
|
s+='</td>';
|
|
s+='</tr>';
|
|
return s;
|
|
}
|
|
|
|
function render_page_convention(intent){
|
|
var s='';
|
|
document.title = intent.theme[get_language()]+' | '+intent.name[get_language()];
|
|
s+='<h1>'+intent.name[get_language()]+'</h1>';
|
|
s+='<h2>'+intent.theme[get_language()]+'</h2>';
|
|
s+='<table class="eventstable">';
|
|
var events = JSON.parse(JSON.stringify(intent.events));
|
|
events.reverse();
|
|
for(var event of events) s+=render_page_convention_eventrow(prepared_data[event.uuid]);
|
|
s+='</table>';
|
|
return s;
|
|
}
|
|
|
|
function render_page_event_keypair(key, value){
|
|
s='';
|
|
s+='<div style="padding-top: 0.3em; padding-bottom: 0.3em;">';
|
|
s+='<span style="margin: 0.2em; padding: 0.2em; margin-left: 0.5em; border-radius: 0.2em; background-color: #BBBBBB; font-weight: bold; box-shadow: 0px 2px 3px #707070;">';
|
|
s+=escapeHtml(key);
|
|
s+='</span>';
|
|
s+='<div style="margin: 0.2em; padding: 0.2em; margin-top: -0.5em; padding-top: 1em; border-radius: 0.2em; background-color: #DDDDDD; box-shadow: 0px 2px 3px #909090;">';
|
|
s+=escapeHtml(value);
|
|
s+='</div>';
|
|
s+='</div>';
|
|
return s;
|
|
}
|
|
|
|
function render_page_event(intent){
|
|
console.log(intent);
|
|
var s = '';
|
|
s+='<div style="width: 100%; padding-top: 30%; padding-bottom: 2%; color: white; font-size: 2em; ';
|
|
if(intent.picture.uuid)
|
|
s+='background-size: cover; background-image: url(\'.'+intent.picture[get_language()]+'\');';
|
|
else
|
|
s+='background-image: linear-gradient(transparent, black);';
|
|
s+='">';
|
|
s+='<span style="display: block; padding-left: 2%; padding-right: 2%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">';
|
|
s+=escapeHtml(intent.title[get_language()]);
|
|
s+='</span>';
|
|
s+='</div>';
|
|
var lbl_atv = {'pt': 'Atividade',}[get_language()]
|
|
var lbl_dtl = {'pt': 'Detalhe',}[get_language()]
|
|
var lbl_qnd = {'pt': 'Quando',}[get_language()]
|
|
var lbl_plc = {'pt': 'Lugar',}[get_language()]
|
|
var lbl_lng = {'pt': 'Idioma',}[get_language()]
|
|
var lbl_dsc = {'pt': 'Descrição',}[get_language()]
|
|
var lbl_cat = {'pt': 'Categoria',}[get_language()]
|
|
var lbl_cbp = {'pt': 'Na página do conbook',}[get_language()]
|
|
var lbl_cbi = {'pt': 'Identificado no conbook como',}[get_language()]
|
|
var lbl_elg = {'pt': 'Inscrições elegíveis',}[get_language()]
|
|
s+=render_page_event_keypair(lbl_atv, intent.title[get_language()]);
|
|
if(intent.subtitle.uuid)s+=render_page_event_keypair(lbl_dtl, intent.subtitle[get_language()]);
|
|
s+=render_page_event_keypair(lbl_qnd, language_textual_date_ranges[get_language()]
|
|
.replace('{0}', LocalizeWeekdays(get_language())[intent.time_start.wd])
|
|
.replace('{1}', intent.time_start.dy)
|
|
.replace('{2}', ('0'+intent.time_start.hr).slice(-2))
|
|
.replace('{3}', ('0'+intent.time_start.mn).slice(-2))
|
|
.replace('{4}', ('0'+intent.time_end.hr).slice(-2))
|
|
.replace('{5}', ('0'+intent.time_end.mn).slice(-2))
|
|
);
|
|
if(intent.places.length>0)s+=render_page_event_keypair(lbl_plc, new TextualJoiner(get_language()).join(intent.places.map(v=>v.label[get_language()])));
|
|
if(intent.language!=intent.con_lang)s+=render_page_event_keypair(lbl_lng, language_name_matrix[intent.language][get_language()]);
|
|
s+=render_page_event_keypair(lbl_dsc, intent.description[get_language()]);
|
|
if(intent.categories.length>0)s+=render_page_event_keypair(lbl_cat, new TextualJoiner(get_language()).join(intent.categories.map(v=>v.label[get_language()])));
|
|
s+=render_page_event_keypair(lbl_cbp, new TextualJoiner(get_language()).join(intent.conbook_pages));
|
|
s+=render_page_event_keypair(lbl_cbi, intent.conbook_key);
|
|
s+=render_page_event_keypair(lbl_elg, new TextualJoiner(get_language()).join(intent.attendable_by.map(v=>v.tier[get_language()])));
|
|
return s;
|
|
}
|
|
|
|
function render_page(){
|
|
var intent = prepared_data[get_pageuuid()];
|
|
var s='';
|
|
s+='<main>';
|
|
if(false){}
|
|
else if(intent.kind === 'convention_edition') s+=render_page_convention(intent);
|
|
else if(intent.kind === 'event') s+=render_page_event(intent);
|
|
else s+='There is no view for this kind of content.';
|
|
s+='</main>';
|
|
return s;
|
|
}
|
|
|
|
var get_language = () => document.location.hash.split('#')[1] || "";
|
|
var get_pageuuid = () => document.location.hash.split('#')[2] || "";
|
|
var generate_language_changer_link = lang => "#"+lang+"#"+get_pageuuid()
|
|
var generate_page_changer_link = page => "#"+get_language()+"#"+page
|
|
var change_page = page => window.history.replaceState({}, "", generate_page_changer_link(page));
|
|
var change_language = lang => window.history.replaceState({}, "", generate_language_changer_link(lang));
|
|
|
|
function init(){
|
|
prepare_convention_series(data);
|
|
if(get_pageuuid()==='' || !(get_pageuuid() in prepared_data))
|
|
change_page(data.featured || data.editions[0]);
|
|
re_render_everything();
|
|
}
|
|
|
|
window.onpopstate = (event) => {
|
|
re_render_everything();
|
|
}
|
|
|
|
(() => {
|
|
if(
|
|
((document.location.hash.split('#')[0] || "") === "")
|
|
||
|
|
((document.location.hash.split('#')[1] || "") === "")
|
|
){
|
|
change_language(DEFAULT_LANG);
|
|
}
|
|
})();
|
|
|
|
jQuery.getJSON(
|
|
'./data.json',
|
|
(resp) => {
|
|
document.body.innerHTML = '';
|
|
data = resp;
|
|
init();
|
|
}
|
|
);
|