mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
continue jquery removal
This commit is contained in:
parent
c5fa5d10b5
commit
c4c34ba314
5 changed files with 117 additions and 29 deletions
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="button" is="paper-icon-button-light" class="btnNewCollection"><iron-icon icon="add"></iron-icon></button>
|
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="itemsContainer" style="text-align:center;"></div>
|
<div class="itemsContainer" style="text-align:center;"></div>
|
||||||
<div class="noItemsMessage" style="display: none; text-align: center;">
|
<div class="noItemsMessage" style="display: none; text-align: center;">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
|
define(['alphaPicker'], function (alphaPicker) {
|
||||||
|
|
||||||
return function (view, params, tabContent) {
|
return function (view, params, tabContent) {
|
||||||
|
|
||||||
|
@ -155,18 +155,29 @@
|
||||||
elem.innerHTML = html + pagingHtml;
|
elem.innerHTML = html + pagingHtml;
|
||||||
ImageLoader.lazyChildren(elem);
|
ImageLoader.lazyChildren(elem);
|
||||||
|
|
||||||
$('.btnNextPage', context).on('click', function () {
|
function onNextPageClick() {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
reloadItems(context);
|
reloadItems(tabContent);
|
||||||
});
|
}
|
||||||
|
|
||||||
$('.btnPreviousPage', context).on('click', function () {
|
function onPreviousPageClick() {
|
||||||
query.StartIndex -= query.Limit;
|
query.StartIndex -= query.Limit;
|
||||||
reloadItems(context);
|
reloadItems(tabContent);
|
||||||
});
|
}
|
||||||
|
|
||||||
$('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
|
var elems, i, length;
|
||||||
|
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onNextPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onPreviousPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onChangeLayout(e) {
|
||||||
|
var layout = e.detail.viewStyle;
|
||||||
if (layout == 'Timeline') {
|
if (layout == 'Timeline') {
|
||||||
getQuery(context).SortBy = 'ProductionYear,PremiereDate,SortName';
|
getQuery(context).SortBy = 'ProductionYear,PremiereDate,SortName';
|
||||||
getQuery(context).SortOrder = 'Descending';
|
getQuery(context).SortOrder = 'Descending';
|
||||||
|
@ -175,14 +186,23 @@
|
||||||
getPageData(context).view = layout;
|
getPageData(context).view = layout;
|
||||||
LibraryBrowser.saveViewSetting(getSavedQueryKey(context), layout);
|
LibraryBrowser.saveViewSetting(getSavedQueryKey(context), layout);
|
||||||
reloadItems(context);
|
reloadItems(context);
|
||||||
});
|
}
|
||||||
|
|
||||||
$('.btnFilter', context).on('click', function () {
|
elems = tabContent.querySelectorAll('.btnChangeLayout');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('layoutchange', onChangeLayout);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFilterClick() {
|
||||||
showFilterMenu(context);
|
showFilterMenu(context);
|
||||||
});
|
}
|
||||||
|
|
||||||
// On callback make sure to set StartIndex = 0
|
elems = tabContent.querySelectorAll('.btnFilter');
|
||||||
$('.btnSort', context).on('click', function () {
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onFilterClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSortClick() {
|
||||||
LibraryBrowser.showSortMenu({
|
LibraryBrowser.showSortMenu({
|
||||||
items: [{
|
items: [{
|
||||||
name: Globalize.translate('OptionNameSort'),
|
name: Globalize.translate('OptionNameSort'),
|
||||||
|
@ -241,7 +261,12 @@
|
||||||
},
|
},
|
||||||
query: query
|
query: query
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnSort');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onSortClick);
|
||||||
|
}
|
||||||
|
|
||||||
LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
|
LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
|
||||||
|
|
||||||
|
|
|
@ -190,15 +190,38 @@
|
||||||
infos.push(getTheaterInfo);
|
infos.push(getTheaterInfo);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!AppInfo.enableAppLayouts && browserInfo.mobile) {
|
||||||
|
infos.push(getUpgradeMobileLayoutsInfo);
|
||||||
|
}
|
||||||
|
|
||||||
appSettings.set(cacheKey, new Date().getTime());
|
appSettings.set(cacheKey, new Date().getTime());
|
||||||
|
|
||||||
return infos[getRandomInt(0, 1)]();
|
return infos[getRandomInt(0, infos.length - 1)]();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCard(img, target) {
|
function getCard(img, target, shape) {
|
||||||
|
|
||||||
return '<div class="card backdropCard"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div><a class="cardContent" href="' + target + '" target="_blank"><div class="cardImage lazy" data-src="' + img + '"></div></a></div></div></div>';
|
shape = shape || 'backdropCard';
|
||||||
|
var html = '<div class="card ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>';
|
||||||
|
|
||||||
|
if (target) {
|
||||||
|
html += '<a class="cardContent" href="' + target + '" target="_blank">';
|
||||||
|
} else {
|
||||||
|
html += '<div class="cardContent">';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div class="cardImage lazy" data-src="' + img + '"></div>';
|
||||||
|
|
||||||
|
if (target) {
|
||||||
|
html += '</a>';
|
||||||
|
} else {
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '</div></div></div>';
|
||||||
|
|
||||||
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTheaterInfo() {
|
function getTheaterInfo() {
|
||||||
|
@ -225,13 +248,32 @@
|
||||||
html += '<div>';
|
html += '<div>';
|
||||||
html += '<h1>Try Emby Premiere<button is="paper-icon-button-light" style="margin-left:1em;" onclick="this.parentNode.parentNode.remove();"><iron-icon icon="close"></iron-icon></button></h1>';
|
html += '<h1>Try Emby Premiere<button is="paper-icon-button-light" style="margin-left:1em;" onclick="this.parentNode.parentNode.remove();"><iron-icon icon="close"></iron-icon></button></h1>';
|
||||||
|
|
||||||
|
var cardTarget = AppInfo.isNativeApp ? '' : 'https://emby.media/premiere';
|
||||||
var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
|
var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
|
||||||
|
|
||||||
html += '<p>Design beautiful Cover Art, enjoy free access to Emby apps, and more. ' + learnMoreText + '</p>';
|
html += '<p>Design beautiful Cover Art, enjoy free access to Emby apps, and more. ' + learnMoreText + '</p>';
|
||||||
html += '<div class="itemsContainer">';
|
html += '<div class="itemsContainer">';
|
||||||
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater1.png', 'https://emby.media/premiere');
|
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater1.png', cardTarget);
|
||||||
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater2.png', 'https://emby.media/premiere');
|
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater2.png', cardTarget);
|
||||||
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.png', 'https://emby.media/premiere');
|
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.png', cardTarget);
|
||||||
|
html += '</div>';
|
||||||
|
html += '<br/>';
|
||||||
|
html += '</div>';
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUpgradeMobileLayoutsInfo() {
|
||||||
|
var html = '';
|
||||||
|
html += '<div>';
|
||||||
|
html += '<h1>Unlock Improved Layouts with Emby Premiere<button is="paper-icon-button-light" style="margin-left:1em;" onclick="this.parentNode.parentNode.remove();"><iron-icon icon="close"></iron-icon></button></h1>';
|
||||||
|
|
||||||
|
var cardTarget = AppInfo.isNativeApp ? '' : 'https://emby.media/premiere';
|
||||||
|
var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
|
||||||
|
|
||||||
|
html += '<p>Combined horizontal and vertical swiping, better detail layouts, and more. ' + learnMoreText + '</p>';
|
||||||
|
html += '<div class="itemsContainer">';
|
||||||
|
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms1.png', cardTarget, 'portraitCard');
|
||||||
|
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms2.png', cardTarget, 'portraitCard');
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '<br/>';
|
html += '<br/>';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
@ -3242,9 +3242,20 @@ var AppInfo = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
require(postInitDependencies);
|
require(postInitDependencies);
|
||||||
|
upgradeLayouts();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function upgradeLayouts() {
|
||||||
|
if (!AppInfo.enableAppLayouts && browserInfo.mobile) {
|
||||||
|
Dashboard.getPluginSecurityInfo().then(function (info) {
|
||||||
|
if (info.IsMBSupporter) {
|
||||||
|
AppInfo.enableAppLayouts = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
initRequire();
|
initRequire();
|
||||||
|
|
||||||
function onWebComponentsReady() {
|
function onWebComponentsReady() {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['events', 'libraryBrowser', 'imageLoader', 'jQuery', 'alphaPicker'], function (events, libraryBrowser, imageLoader, $, alphaPicker) {
|
define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
|
||||||
|
|
||||||
return function (view, params, tabContent) {
|
return function (view, params, tabContent) {
|
||||||
|
|
||||||
|
@ -141,20 +141,30 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var i, length;
|
var i, length;
|
||||||
var pagingElems = tabContent.querySelectorAll('.paging');
|
var elems = tabContent.querySelectorAll('.paging');
|
||||||
for (i = 0, length = pagingElems.length; i < length; i++) {
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
pagingElems[i].innerHTML = pagingHtml;
|
elems[i].innerHTML = pagingHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.btnNextPage', tabContent).on('click', function () {
|
function onNextPageClick() {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
reloadItems(tabContent);
|
reloadItems(tabContent);
|
||||||
});
|
}
|
||||||
|
|
||||||
$('.btnPreviousPage', tabContent).on('click', function () {
|
function onPreviousPageClick() {
|
||||||
query.StartIndex -= query.Limit;
|
query.StartIndex -= query.Limit;
|
||||||
reloadItems(tabContent);
|
reloadItems(tabContent);
|
||||||
});
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onNextPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||||
|
for (i = 0, length = elems.length; i < length; i++) {
|
||||||
|
elems[i].addEventListener('click', onPreviousPageClick);
|
||||||
|
}
|
||||||
|
|
||||||
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
var itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||||
itemsContainer.innerHTML = html;
|
itemsContainer.innerHTML = html;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue