Program Listing

Hours of Operation

Program Listing

<!–

フィルター / Filters

–>

{{item.title}} {{item.age_rating}}

DAY {{item.day_num}}
{{item.start.day}}, {{item.start.date_en}} at {{item.start.time}}-{{item.end.time}}
{{item.location.label}} {{tag.name}}
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(); }) });