mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Use static imports for html templates
This commit is contained in:
Bill Thornton
parent
75e1fc4605
commit
d8f2cc1245
31 changed files with 1010 additions and 1041 deletions
|
|
@ -7,6 +7,7 @@ import '../../elements/emby-checkbox/emby-checkbox';
|
|||
import '../../elements/emby-radio/emby-radio';
|
||||
import '../formdialog.css';
|
||||
import 'material-design-icons-iconfont';
|
||||
import template from './guide-settings.template.html';
|
||||
|
||||
function saveCategories(context, options) {
|
||||
const categories = [];
|
||||
|
|
@ -88,59 +89,57 @@ function showEditor(options) {
|
|||
return new Promise(function (resolve, reject) {
|
||||
let settingsChanged = false;
|
||||
|
||||
import('./guide-settings.template.html').then(({ default: template }) => {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
const dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
let html = '';
|
||||
let html = '';
|
||||
|
||||
html += globalize.translateHtml(template, 'core');
|
||||
html += globalize.translateHtml(template, 'core');
|
||||
|
||||
dlg.innerHTML = html;
|
||||
dlg.innerHTML = html;
|
||||
|
||||
dlg.addEventListener('change', function () {
|
||||
settingsChanged = true;
|
||||
});
|
||||
|
||||
dlg.addEventListener('close', function () {
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
|
||||
}
|
||||
|
||||
save(dlg);
|
||||
saveCategories(dlg, options);
|
||||
|
||||
if (settingsChanged) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
|
||||
}
|
||||
|
||||
load(dlg);
|
||||
loadCategories(dlg, options);
|
||||
dialogHelper.open(dlg);
|
||||
dlg.addEventListener('change', function () {
|
||||
settingsChanged = true;
|
||||
});
|
||||
|
||||
dlg.addEventListener('close', function () {
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
|
||||
}
|
||||
|
||||
save(dlg);
|
||||
saveCategories(dlg, options);
|
||||
|
||||
if (settingsChanged) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
|
||||
}
|
||||
|
||||
load(dlg);
|
||||
loadCategories(dlg, options);
|
||||
dialogHelper.open(dlg);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue