Hours of Operation
{{item.title}} {{item.age_rating}}
DAY {{item.day_num}}
Guests: {{item.speaker_list}}
Panelist: {{item.panelist_list}}
<!—->
.modal-backdrop {
z-index: 10000;
}
#shareModal {
top: 80px;
z-index: 10020;
}
#eventix {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
#eventix .pill.category {
color: black;
float: left;
text-align: center;
height: 2.9rem;
width: 3rem;
line-height: 3rem;
margin-right: .5rem;
font-size: 1.1rem;
}
.event-schedule h2 {
margin-top: 2rem;
}
.event-schedule .pill {
color: white;
background-color: gray;
display: inline-block;
padding: 0 5px;
border-radius: 5px;
margin-left: .1rem;
font-size: .9rem;
}
.event-schedule .location {
background-color: grey;
}
.fa.icon-gray {
color: grey;
}
#filter-location .location, #filter-category .category {
padding: 0;
border-radius: 15px;
margin-bottom: 3px;
}
#filter-location .location label {
color: white;
}
#filter-location label > [type=’checkbox’] {
margin-bottom: 0;
}
/*.filter-container {
position: sticky;
top: 150px;
}*/
article .schedule-container {
display: flex;
}
article .schedule-body {
width: 100%;
}
article .schedule-container .day {
writing-mode: vertical-rl;
text-orientation: sideways;
float: left;
padding: 5px 2px;
margin-right: 10px;
}
.day.day-1,
.day.day-2,
.day.day-3 {
background: black;
color: white;
}
.tooltip-inner {
text-align: left;
}
@media (max-width: 576px) {
article .schedule-container .day {
display: none;
}
}
$(function () {
$(‘[data-toggle=”tooltip”]’).tooltip()
$(‘#shareModal’).on(‘shown.bs.modal’, function (e) {
app1.copyHash();
})
})
function multiDimensionalUnique(arr) {
var uniques = [];
var itemsFound = {};
for(var i = 0, l = arr.length; i < l; i++) {
var stringified = JSON.stringify(arr[i]);
if(itemsFound[stringified]) { continue; }
uniques.push(arr[i]);
itemsFound[stringified] = true;
}
return uniques;
}
function sortArrayByName(array1) {
array1.sort(function(a, b) {
if (a.name
b.name) {
return 1;
}
return 0; // equal
});
return array1;
}
// Dumped on Jul 27, 2018 at 11PM
var app1 = new Vue({
el: ‘#eventix’,
computed: {
resetFilters: function() {
this.filters.keywords = ”;
this.filters.categories = [];
this.filters.locations = [];
this.filters.sortBy = ‘datetime’;
},
filteredItems: function() {
var textsearch = this.filters.keywords.toLowerCase();
var filter_cat = this.filters.categories;
var filter_loc = this.filters.locations;
var sort_by = this.filters.sortBy;
var filtered_schedule = this.schedule.filter(function(item) {
var alltext = item.title + ‘ ‘ + item.description + ‘ ‘ + item.category.label + ‘ ‘ + item.location.label;
if (textsearch != ” && alltext.toLowerCase().indexOf(textsearch) 0 && !filter_cat.includes(item.category.name)) {
return false;
}
if (filter_loc.length > 0 && !filter_loc.includes(item.location.name)) {
return false;
}
return true;
});
this.getFilterHash();
return this.sortSchedule(filtered_schedule, sort_by);
},
listCategories: function() {
var categories = this.schedule.map(function(a) {
return a.category;
});
categories = multiDimensionalUnique(categories);
categories = sortArrayByName(categories);
return categories;
},
listLocations: function() {
var locations = this.schedule.map(function(a) {
return a.location;
});
locations = multiDimensionalUnique(locations);
locations = sortArrayByName(locations);
return locations;
},
},
methods: {
// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
sortSchedule: function(schedule, sort_by) {
if (sort_by == ‘datetime’) {
schedule.sort(function(a, b) {
return a.start.timestamp – b.start.timestamp;
});
}
// Alphabetical sorting
else {
schedule.sort(function(a, b) {
if (a.order b.order) {
return 1;
}
return 0; // Equal.
});
}
return schedule;
},
getCategory: function(catname) {
if (!this.categories) {
return null;
}
let categories = this.categories.filter(function(cat) {
return cat.id == catname;
});
if (categories) {
return categories[0];
}
return null;
},
getCategoryIcon: function(catname) {
let category = this.getCategory(catname);
if (category && category.icon_fa) {
return category.icon_fa;
}
return ‘file’;
},
getCategoryStyle: function(catname) {
let category = this.getCategory(catname);
if (category && category.color) {
return ‘background-color:’ + category.color;
}
return null;
},
getFilterHash: function() {
let hash = btoa(JSON.stringify(this.filters));
let url = window.location.origin + window.location.pathname + ‘#’ + hash;
// window.alert(url);
this.filterHash = url;
console.log(url)
},
loadFilterHash: function() {
if (!window.location.hash) {
return false;
}
let hash = window.location.hash.substring(1);
let filters = JSON.parse(atob(hash))
if (filters) {
this.filters.keywords = filters.keywords;
this.filters.categories = filters.categories;
this.filters.locations = filters.locations;
this.filters.sortBy = filters.sortBy;
}
},
copyHash: function() {
$(‘#txtUrlWithHash’).select();
document.execCommand(‘copy’);
},
},
data: {
filters: {
sortBy: ‘datetime’,
keywords: ”,
categories: [],
locations: [],
},
filterHash: null,
schedule: [],
rooms: [],
categories: []
}
})
fetch(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/213153/convention-anirevo.json?8’)
.then(function(response) {
return response.json();
})
.then(function(data) {
//app1.rooms = data[‘program-rooms’];
app1.categories = data[‘program-categories’];
});
fetch(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/213153/sched-anirevo.json?8’)
.then(function(response) {
return response.json();
})
.then(function(data) {
app1.schedule = data;
app1.loadFilterHash();
Vue.nextTick(function () {
jQuery(‘[data-toggle=”tooltip”]’).tooltip();
})
});
