396 lines
14 KiB
JavaScript
396 lines
14 KiB
JavaScript
const DEFAULT_LANG = 'pt';
|
|
var longpress = 400;
|
|
var current = null
|
|
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': ['Domingo', 'Segunda', 'Terça', 'Quata', 'Quinta', 'Sexta', 'Sábado'],
|
|
'en': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
|
'es': ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
|
|
}[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="button blockybtn" href="'+generate_language_changer_link('pt')+'">PT</a>';
|
|
s+='<a class="button blockybtn" href="'+generate_language_changer_link('en')+'">EN</a>';
|
|
s+='<a class="button blockybtn" href="'+generate_language_changer_link('es')+'">ES</a>';
|
|
s+='</nav>';
|
|
return s;
|
|
}
|
|
|
|
function render_label_with_pill(place_or_category){
|
|
var v = place_or_category;
|
|
return escapeHtml(v.label[get_language()])+
|
|
' <span class="badge badge-pill" style="color: '+v.color.color+'; background-color: '+v.color.color+';">.</span>'
|
|
}
|
|
|
|
function render_page_convention_eventrow_popover(intent){
|
|
var s = '';
|
|
s+='<h5>'
|
|
s+=escapeHtml(intent.title[get_language()])
|
|
s+='</h5>'
|
|
s+='<div>'
|
|
s+=escapeHtml(intent.description[get_language()])
|
|
s+='</div>'
|
|
s+='<hr class="my-0 py-0 mt-1">'
|
|
s+=escapeHtml(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.categories.length){
|
|
s+='<hr class="my-0 py-0 mt-1">'
|
|
s+=intent.categories.map(v=>render_label_with_pill(v)).join(', ')
|
|
}
|
|
if(intent.places.length){
|
|
s+='<hr class="my-0 py-0 mt-1">'
|
|
s+=intent.places.map(v=>render_label_with_pill(v)).join(', ')
|
|
}
|
|
return s
|
|
}
|
|
|
|
function registerLongPressCallback(element, callback){
|
|
var timer;
|
|
element.addEventListener('mouseup', function (e) { clearTimeout(timer); });
|
|
element.addEventListener('mouseout', function (e) { clearTimeout(timer); });
|
|
element.addEventListener('mousedown', function (e) {
|
|
function trigger() {
|
|
e.preventDefault()
|
|
callback()
|
|
}
|
|
timer = setTimeout(trigger, longpress);
|
|
}, true);
|
|
}
|
|
|
|
function render_page_convention_eventrow_daychange(intent){
|
|
var s = ''
|
|
s+='<tr>'
|
|
s+='<td colspan="3" class="bg-dark text-light" style="padding: 0.45em;">'
|
|
s+=escapeHtml(LocalizeWeekdays(get_language())[intent.time_start.wd])
|
|
s+=', '
|
|
s+=escapeHtml(intent.time_start.dy)
|
|
s+='</td>'
|
|
s+='</tr>'
|
|
return s
|
|
}
|
|
|
|
function render_page_convention_eventrow(intent){
|
|
var s = '';
|
|
var color = null;
|
|
if(color===null) for(var cat of intent.categories){
|
|
color = cat.color.color;
|
|
break;
|
|
}
|
|
if(color===null) for(var plc of intent.places){
|
|
color = plc.color.color;
|
|
break;
|
|
}
|
|
if(color===null) color = '#CCCCCC';
|
|
s+='<tr id="uuid'+escapeHtml(intent.uuid)+'" style="background-image: linear-gradient(to right, '+color+'06, '+color+'44)">';
|
|
s+='<td class="hr_col">';
|
|
s+='<a href="'+generate_page_changer_link(intent.uuid)+'">';
|
|
s+='<div class="dy">';
|
|
s+=escapeHtml(LocalizeWeekdays(get_language())[intent.time_start.wd].slice(0, 3));
|
|
s+='</div>';
|
|
s+='<div class="tm tms">';
|
|
s+=('0'+escapeHtml(intent.time_start.hr)).slice(-2)+':'+('0'+escapeHtml(intent.time_start.mn)).slice(-2);
|
|
s+='</div>';
|
|
s+='<div class="tm tme">';
|
|
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 class="lb_col">';
|
|
s+='<a href="'+generate_page_changer_link(intent.uuid)+'">';
|
|
s+='<div data-toggle="popover" data-content="'+escapeHtml(
|
|
render_page_convention_eventrow_popover(intent)
|
|
)+'" data-trigger="hover" data-html="true" data-placement="bottom" data-delay="200">';
|
|
s+='<div class="prim">';
|
|
s+=escapeHtml(intent.title[get_language()])
|
|
s+='</div>';
|
|
s+='<div class="sec">';
|
|
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+='</div>';
|
|
s+='</a>';
|
|
s+='</td>';
|
|
s+='<td style="width: .4em; background-color: '+color+';">';
|
|
s+='</td>';
|
|
s+='</tr>';
|
|
// setTimeout(()=>{
|
|
// var element = document.getElementById('uuid'+intent.uuid)
|
|
// registerLongPressCallback(element, ()=>{
|
|
// $("#uuid"+intent.uuid+' [data-toggle="popover"]').popover('toggle')
|
|
// //document.querySelector("#uuid"+intent.uuid+" a").click()
|
|
// })
|
|
// }, 100);
|
|
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();
|
|
var previousEventDay = null
|
|
for(var event of events){
|
|
event = prepared_data[event.uuid]
|
|
var thisEventDay = event.time_start.dy
|
|
if(previousEventDay != thisEventDay){
|
|
previousEventDay = thisEventDay;
|
|
s+=render_page_convention_eventrow_daychange(event);
|
|
}
|
|
s+=render_page_convention_eventrow(event);
|
|
}
|
|
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){
|
|
document.title = intent.title[get_language()] + ' | ' + document.title;
|
|
scrollToElementId('uuid'+intent.uuid)
|
|
var s = '';
|
|
s+='<div id="uuid'+current.uuid+'" 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', 'en': 'Activity', 'es': 'Actividad'}[get_language()]
|
|
var lbl_dtl = {'pt': 'Detalhe', 'en': 'Detail', 'es': 'Detalle'}[get_language()]
|
|
var lbl_qnd = {'pt': 'Quando', 'en': 'When', 'es': 'Cuando'}[get_language()]
|
|
var lbl_plc = {'pt': 'Lugar', 'en': 'Place', 'es': 'Lugar'}[get_language()]
|
|
var lbl_lng = {'pt': 'Idioma', 'en': 'Language', 'es': 'Idioma'}[get_language()]
|
|
var lbl_dsc = {'pt': 'Descrição', 'en': 'Description', 'es': 'Descripción'}[get_language()]
|
|
var lbl_cat = {'pt': 'Categoria', 'en': 'Category', 'es': 'Categoría'}[get_language()]
|
|
var lbl_cbp = {'pt': 'Na página do conbook', 'en': 'Conbook\'s page', 'es': 'En la página del conbook'}[get_language()]
|
|
var lbl_cbi = {'pt': 'Identificado no conbook como', 'en': 'Identified on conbook as', 'es': 'Identificado en el conbook como'}[get_language()]
|
|
var lbl_elg = {'pt': 'Inscrições elegíveis', 'en': 'Eligible tiers', 'es': 'Registros elegibles'}[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()];
|
|
current = intent
|
|
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>';
|
|
setTimeout(()=>{$('[data-toggle="popover"]').popover();}, 250);
|
|
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();
|
|
}
|
|
|
|
function scrollToElementId(elementId){
|
|
setTimeout(()=>{
|
|
var elem = document.getElementById(elementId)
|
|
if(elem !== null){
|
|
elem.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "center",
|
|
inline: "center"
|
|
})
|
|
}
|
|
}, 100)
|
|
}
|
|
|
|
window.onpopstate = (event) => {
|
|
scrollToElementId("uuid"+((current||{}).uuid||""))
|
|
re_render_everything();
|
|
}
|
|
|
|
|
|
(() => {
|
|
if(
|
|
((document.location.hash.split('#')[1] || "") === "")
|
|
){
|
|
change_language(DEFAULT_LANG);
|
|
}
|
|
})();
|
|
|
|
jQuery.getJSON(
|
|
'./static/data.json',
|
|
(resp) => {
|
|
document.body.innerHTML = '';
|
|
data = resp;
|
|
init();
|
|
}
|
|
);
|