mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Use static imports for html templates

Browse source
This commit is contained in:
Bill Thornton 2020-11-25 00:17:24 -05:00
parent 75e1fc4605
commit d8f2cc1245
31 changed files with 1010 additions and 1041 deletions
Download patch file Download diff file Expand all files Collapse all files

182
src/components/guide/guide.js
View file

@ -25,6 +25,8 @@ import '../../elements/emby-scroller/emby-scroller';
import '../../assets/css/flexstyles.scss';
import 'webcomponents.js/webcomponents-lite';
import ServerConnections from '../ServerConnections';
import template from './tvguide.template.html';
function showViewSettings(instance) {
import('./guide-settings').then(({default: guideSettingsDialog}) => {
@ -1092,107 +1094,105 @@ function Guide(options) {
}
}
import('./tvguide.template.html').then(({default: template}) => {
const context = options.element;
const context = options.element;
context.classList.add('tvguide');
context.classList.add('tvguide');
context.innerHTML = globalize.translateHtml(template, 'core');
context.innerHTML = globalize.translateHtml(template, 'core');
programGrid = context.querySelector('.programGrid');
const timeslotHeaders = context.querySelector('.timeslotHeaders');
programGrid = context.querySelector('.programGrid');
const timeslotHeaders = context.querySelector('.timeslotHeaders');
if (layoutManager.tv) {
dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
capture: true,
passive: true
});
} else if (layoutManager.desktop) {
timeslotHeaders.classList.add('timeslotHeaders-desktop');
}
if (browser.iOS || browser.osx) {
context.querySelector('.channelsContainer').classList.add('noRubberBanding');
programGrid.classList.add('noRubberBanding');
}
dom.addEventListener(programGrid, 'scroll', function (e) {
onProgramGridScroll(context, this, timeslotHeaders);
}, {
if (layoutManager.tv) {
dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
capture: true,
passive: true
});
} else if (layoutManager.desktop) {
timeslotHeaders.classList.add('timeslotHeaders-desktop');
}
dom.addEventListener(timeslotHeaders, 'scroll', function () {
onTimeslotHeadersScroll(context, this);
}, {
passive: true
});
if (browser.iOS || browser.osx) {
context.querySelector('.channelsContainer').classList.add('noRubberBanding');
programGrid.addEventListener('click', onProgramGridClick);
programGrid.classList.add('noRubberBanding');
}
context.querySelector('.btnNextPage').addEventListener('click', function () {
currentStartIndex += currentChannelLimit;
reloadPage(context);
restartAutoRefresh();
});
context.querySelector('.btnPreviousPage').addEventListener('click', function () {
currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0);
reloadPage(context);
restartAutoRefresh();
});
context.querySelector('.btnGuideViewSettings').addEventListener('click', function () {
showViewSettings(self);
restartAutoRefresh();
});
context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
if (tabButton) {
const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
const date = new Date();
date.setTime(parseInt(tabButton.getAttribute('data-date')));
const scrollWidth = programGrid.scrollWidth;
let scrollToTimeMs;
if (scrollWidth) {
scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
} else {
scrollToTimeMs = 0;
}
if (previousButton) {
const previousDate = new Date();
previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
}
let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
}
});
setScrollEvents(context, true);
itemShortcuts.on(context);
Events.trigger(self, 'load');
Events.on(serverNotifications, 'TimerCreated', onTimerCreated);
Events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated);
Events.on(serverNotifications, 'TimerCancelled', onTimerCancelled);
Events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled);
self.refresh();
dom.addEventListener(programGrid, 'scroll', function (e) {
onProgramGridScroll(context, this, timeslotHeaders);
}, {
passive: true
});
dom.addEventListener(timeslotHeaders, 'scroll', function () {
onTimeslotHeadersScroll(context, this);
}, {
passive: true
});
programGrid.addEventListener('click', onProgramGridClick);
context.querySelector('.btnNextPage').addEventListener('click', function () {
currentStartIndex += currentChannelLimit;
reloadPage(context);
restartAutoRefresh();
});
context.querySelector('.btnPreviousPage').addEventListener('click', function () {
currentStartIndex = Math.max(currentStartIndex - currentChannelLimit, 0);
reloadPage(context);
restartAutoRefresh();
});
context.querySelector('.btnGuideViewSettings').addEventListener('click', function () {
showViewSettings(self);
restartAutoRefresh();
});
context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
if (tabButton) {
const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
const date = new Date();
date.setTime(parseInt(tabButton.getAttribute('data-date')));
const scrollWidth = programGrid.scrollWidth;
let scrollToTimeMs;
if (scrollWidth) {
scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
} else {
scrollToTimeMs = 0;
}
if (previousButton) {
const previousDate = new Date();
previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
}
let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
}
});
setScrollEvents(context, true);
itemShortcuts.on(context);
Events.trigger(self, 'load');
Events.on(serverNotifications, 'TimerCreated', onTimerCreated);
Events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated);
Events.on(serverNotifications, 'TimerCancelled', onTimerCancelled);
Events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled);
self.refresh();
}
export default Guide;