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
28235b050f
commit
e8eb73d742
3 changed files with 115 additions and 70 deletions
|
@ -1,4 +1,4 @@
|
||||||
<div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHomeScreenSettings}" data-require="scripts/mypreferenceshome,emby-checkbox,paper-fab,paper-item-body,paper-icon-item,emby-button" data-backbutton="true" data-menubutton="false">
|
<div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHomeScreenSettings}" data-backbutton="true" data-menubutton="false">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<form class="homeScreenPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
|
<form class="homeScreenPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery'], function ($) {
|
define([], function () {
|
||||||
|
|
||||||
function renderViews(page, user, result) {
|
function renderViews(page, user, result) {
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
|
|
||||||
folderHtml += '</div>';
|
folderHtml += '</div>';
|
||||||
|
|
||||||
$('.folderGroupList', page).html(folderHtml);
|
page.querySelector('.folderGroupList').innerHTML = folderHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderLatestItems(page, user, result) {
|
function renderLatestItems(page, user, result) {
|
||||||
|
@ -55,7 +55,7 @@
|
||||||
|
|
||||||
folderHtml += '</div>';
|
folderHtml += '</div>';
|
||||||
|
|
||||||
$('.latestItemsList', page).html(folderHtml);
|
page.querySelector('.latestItemsList').innerHTML = folderHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderViewOrder(page, user, result) {
|
function renderViewOrder(page, user, result) {
|
||||||
|
@ -97,7 +97,7 @@
|
||||||
|
|
||||||
}).join('');
|
}).join('');
|
||||||
|
|
||||||
$('.viewOrderList', page).html(html);
|
page.querySelector('.viewOrderList').innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadForm(page, user, displayPreferences) {
|
function loadForm(page, user, displayPreferences) {
|
||||||
|
@ -105,10 +105,10 @@
|
||||||
page.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
|
page.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
|
||||||
page.querySelector('.chkDisplayChannelsInline').checked = !(user.Configuration.EnableChannelView || false);
|
page.querySelector('.chkDisplayChannelsInline').checked = !(user.Configuration.EnableChannelView || false);
|
||||||
|
|
||||||
$('#selectHomeSection1', page).val(displayPreferences.CustomPrefs.home0 || '');
|
page.querySelector('#selectHomeSection1').value = displayPreferences.CustomPrefs.home0 || '';
|
||||||
$('#selectHomeSection2', page).val(displayPreferences.CustomPrefs.home1 || '');
|
page.querySelector('#selectHomeSection2').value = displayPreferences.CustomPrefs.home1 || '';
|
||||||
$('#selectHomeSection3', page).val(displayPreferences.CustomPrefs.home2 || '');
|
page.querySelector('#selectHomeSection3').value = displayPreferences.CustomPrefs.home2 || '';
|
||||||
$('#selectHomeSection4', page).val(displayPreferences.CustomPrefs.home3 || '');
|
page.querySelector('#selectHomeSection4').value = displayPreferences.CustomPrefs.home3 || '';
|
||||||
|
|
||||||
var promise1 = ApiClient.getItems(user.Id, {
|
var promise1 = ApiClient.getItems(user.Id, {
|
||||||
sortBy: "SortName"
|
sortBy: "SortName"
|
||||||
|
@ -133,41 +133,53 @@
|
||||||
|
|
||||||
return 'webclient';
|
return 'webclient';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getCheckboxItems(selector, page, isChecked) {
|
||||||
|
|
||||||
|
var inputs = page.querySelectorAll(selector);
|
||||||
|
var list = [];
|
||||||
|
|
||||||
|
for (var i = 0, length = inputs.length; i < length; i++) {
|
||||||
|
|
||||||
|
if (inputs[i].checked == isChecked) {
|
||||||
|
list.push(inputs[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
function saveUser(page, user, displayPreferences) {
|
function saveUser(page, user, displayPreferences) {
|
||||||
|
|
||||||
user.Configuration.HidePlayedInLatest = page.querySelector('.chkHidePlayedFromLatest').checked;
|
user.Configuration.HidePlayedInLatest = page.querySelector('.chkHidePlayedFromLatest').checked;
|
||||||
|
|
||||||
user.Configuration.EnableChannelView = !page.querySelector('.chkDisplayChannelsInline').checked;
|
user.Configuration.EnableChannelView = !page.querySelector('.chkDisplayChannelsInline').checked;
|
||||||
|
|
||||||
user.Configuration.LatestItemsExcludes = $(".chkIncludeInLatest", page).get().filter(function (i) {
|
user.Configuration.LatestItemsExcludes = getCheckboxItems(".chkIncludeInLatest", page, false).map(function (i) {
|
||||||
|
|
||||||
return !i.checked;
|
|
||||||
|
|
||||||
}).map(function (i) {
|
|
||||||
|
|
||||||
return i.getAttribute('data-folderid');
|
return i.getAttribute('data-folderid');
|
||||||
});
|
});
|
||||||
|
|
||||||
user.Configuration.ExcludeFoldersFromGrouping = null;
|
user.Configuration.ExcludeFoldersFromGrouping = null;
|
||||||
|
|
||||||
user.Configuration.GroupedFolders = $(".chkGroupFolder", page).get().filter(function (i) {
|
user.Configuration.GroupedFolders = getCheckboxItems(".chkGroupFolder", page, true).map(function (i) {
|
||||||
|
|
||||||
return i.checked;
|
|
||||||
|
|
||||||
}).map(function (i) {
|
|
||||||
|
|
||||||
return i.getAttribute('data-folderid');
|
return i.getAttribute('data-folderid');
|
||||||
});
|
});
|
||||||
|
|
||||||
user.Configuration.OrderedViews = $(".viewItem", page).get().map(function (i) {
|
var viewItems = page.querySelectorAll('.viewItem');
|
||||||
|
var orderedViews = [];
|
||||||
|
for (var i = 0, length = viewItems.length; i < length; i++) {
|
||||||
|
orderedViews.push(viewItems[i].getAttribute('data-viewid'));
|
||||||
|
}
|
||||||
|
|
||||||
return i.getAttribute('data-viewid');
|
user.Configuration.OrderedViews = orderedViews;
|
||||||
});
|
|
||||||
|
|
||||||
displayPreferences.CustomPrefs.home0 = $('#selectHomeSection1', page).val();
|
displayPreferences.CustomPrefs.home0 = page.querySelector('#selectHomeSection1').value;
|
||||||
displayPreferences.CustomPrefs.home1 = $('#selectHomeSection2', page).val();
|
displayPreferences.CustomPrefs.home1 = page.querySelector('#selectHomeSection2').value;
|
||||||
displayPreferences.CustomPrefs.home2 = $('#selectHomeSection3', page).val();
|
displayPreferences.CustomPrefs.home2 = page.querySelector('#selectHomeSection3').value;
|
||||||
displayPreferences.CustomPrefs.home3 = $('#selectHomeSection4', page).val();
|
displayPreferences.CustomPrefs.home3 = page.querySelector('#selectHomeSection4').value;
|
||||||
|
|
||||||
return ApiClient.updateDisplayPreferences('home', displayPreferences, user.Id, displayPreferencesKey()).then(function () {
|
return ApiClient.updateDisplayPreferences('home', displayPreferences, user.Id, displayPreferencesKey()).then(function () {
|
||||||
|
|
||||||
|
@ -206,43 +218,80 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSubmit() {
|
function parentWithClass(elem, className) {
|
||||||
|
|
||||||
var page = $(this).parents('.page')[0];
|
while (!elem.classList || !elem.classList.contains(className)) {
|
||||||
|
elem = elem.parentNode;
|
||||||
|
|
||||||
save(page);
|
if (!elem) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSibling(elem, type, className) {
|
||||||
|
|
||||||
|
var sibling = elem[type];
|
||||||
|
|
||||||
|
while (sibling != null) {
|
||||||
|
if (sibling.classList.contains(className)) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sibling != null) {
|
||||||
|
if (!sibling.classList.contains(className)) {
|
||||||
|
sibling = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return sibling;
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (view, params) {
|
||||||
|
|
||||||
|
function onSubmit(e) {
|
||||||
|
|
||||||
|
save(view);
|
||||||
|
|
||||||
// Disable default form submission
|
// Disable default form submission
|
||||||
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
pageIdOn('pageinit', "homeScreenPreferencesPage", function () {
|
view.querySelector('.viewOrderList').addEventListener('click', function (e) {
|
||||||
|
|
||||||
var page = this;
|
var target = parentWithClass(e.target, 'btnViewItemMove');
|
||||||
|
|
||||||
$('.viewOrderList', page).on('click', '.btnViewItemMove', function () {
|
var li = parentWithClass(target, 'viewItem');
|
||||||
|
var ul = parentWithClass(li, 'paperList');
|
||||||
|
|
||||||
var li = $(this).parents('.viewItem');
|
if (target.classList.contains('btnViewItemDown')) {
|
||||||
var ul = li.parents('.paperList');
|
|
||||||
|
|
||||||
if ($(this).hasClass('btnViewItemDown')) {
|
var next = li.nextSibling;
|
||||||
|
|
||||||
var next = li.next();
|
li.parentNode.removeChild(li);
|
||||||
|
next.parentNode.insertBefore(li, next.nextSibling);
|
||||||
li.remove().insertAfter(next);
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
var prev = li.prev();
|
var prev = li.previousSibling;
|
||||||
|
|
||||||
li.remove().insertBefore(prev);
|
li.parentNode.removeChild(li);
|
||||||
|
prev.parentNode.insertBefore(li, prev);
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.viewItem', ul).each(function () {
|
var viewItems = ul.querySelectorAll('.viewItem');
|
||||||
|
for (var i = 0, length = viewItems.length; i < length; i++) {
|
||||||
|
var viewItem = viewItems[i];
|
||||||
|
|
||||||
var btn = $('.btnViewItemMove', this)[0];
|
var btn = viewItem.querySelector('.btnViewItemMove');
|
||||||
|
|
||||||
if ($(this).prev('.viewItem').length) {
|
var prevViewItem = getSibling(viewItem, 'previousSibling', 'viewItem');
|
||||||
|
|
||||||
|
if (prevViewItem) {
|
||||||
|
|
||||||
btn.classList.add('btnViewItemUp');
|
btn.classList.add('btnViewItemUp');
|
||||||
btn.classList.remove('btnViewItemDown');
|
btn.classList.remove('btnViewItemDown');
|
||||||
|
@ -253,22 +302,18 @@
|
||||||
btn.classList.add('btnViewItemDown');
|
btn.classList.add('btnViewItemDown');
|
||||||
btn.icon = 'keyboard-arrow-down';
|
btn.icon = 'keyboard-arrow-down';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.homeScreenPreferencesForm').off('submit', onSubmit).on('submit', onSubmit);
|
view.querySelector('.homeScreenPreferencesForm').addEventListener('submit', onSubmit);
|
||||||
|
|
||||||
if (AppInfo.enableAutoSave) {
|
if (AppInfo.enableAutoSave) {
|
||||||
page.querySelector('.btnSave').classList.add('hide');
|
view.querySelector('.btnSave').classList.add('hide');
|
||||||
} else {
|
} else {
|
||||||
page.querySelector('.btnSave').classList.remove('hide');
|
view.querySelector('.btnSave').classList.remove('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
view.addEventListener('viewshow', function () {
|
||||||
|
|
||||||
pageIdOn('pageshow', "homeScreenPreferencesPage", function () {
|
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
Dashboard.showLoadingMsg();
|
Dashboard.showLoadingMsg();
|
||||||
|
@ -285,13 +330,12 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
pageIdOn('pagebeforehide', "homeScreenPreferencesPage", function () {
|
view.addEventListener('viewbeforehide', function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
||||||
if (AppInfo.enableAutoSave) {
|
if (AppInfo.enableAutoSave) {
|
||||||
save(page);
|
save(page);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
};
|
||||||
});
|
});
|
|
@ -2769,9 +2769,10 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/mypreferenceshome.html',
|
path: '/mypreferenceshome.html',
|
||||||
dependencies: ['emby-button'],
|
dependencies: ['emby-checkbox', 'paper-fab', 'paper-item-body', 'paper-icon-item', 'emby-button'],
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
transition: 'fade'
|
transition: 'fade',
|
||||||
|
controller: 'scripts/mypreferenceshome'
|
||||||
});
|
});
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue