move cssgallery.js handlers into user_settings.js

This commit is contained in:
Spine
2024-11-01 08:24:59 +00:00
parent e1b95fda07
commit ba148c4f10
3 changed files with 62 additions and 48 deletions

View File

@@ -1,47 +0,0 @@
document.addEventListener('DOMContentLoaded', function () {
// If the custom stylesheet field is empty, select the current style from the previews
if (!$('input#styleurl').val()){
var radiobutton = $('input[name="stylesheet_gallery"][value="' + $('select#stylesheet').val() + '"]');
radiobutton.click();
$('.preview_wrapper').removeClass('selected');
radiobutton.parent().parent().addClass('selected');
}
// If the input is clicked, redirect it to the overlay click event
$('input[name="stylesheet_gallery"]').change(function() {
$('.preview_wrapper').removeClass('selected');
var parent = $(this).parent();
parent.addClass('selected');
var radiobutton = parent.find('input');
radiobutton.prop('checked', true);
$('select#stylesheet').val(radiobutton.attr('value'));
$('input#styleurl').val('');
});
// If the drop-down is changed, select the appropriate item in gallery, clear the custom CSS field
$('select#stylesheet').change(function() {
var radiobutton = $('input[name="stylesheet_gallery"][value="' + $(this).val() + '"]');
radiobutton.prop('checked', true);
$('.preview_wrapper').removeClass('selected');
radiobutton.parent().parent().addClass('selected');
$('input#styleurl').val('');
});
// If the custom CSS field is changed, clear radio buttons
$('input#styleurl').keydown(function() {
$('input[name="stylesheet_gallery"]').each(function() {
$(this).prop('checked', false);
});
$('.preview_wrapper').removeClass('selected');
});
// If the input is empty, select appropriate gallery item again by the drop-down
$('input#styleurl').keyup(function() {
if (!$(this).val()){
$('select#stylesheet').change();
}
});
// Allow the CSS gallery to be expanded/contracted
$('#toggle_css_gallery').click(function (e) {
e.preventDefault();
$('#css_gallery').slideToggle(function () {
$('#toggle_css_gallery').text($(this).is(':visible') ? 'Hide gallery' : 'Show gallery');
});
});
});

View File

@@ -151,6 +151,66 @@ function fetchPushbulletDevices(apikey) {
});
}
function init_css_gallery() {
let gallery = Array.from(
document.querySelectorAll('input[name="stylesheet_gallery"]')
);
let stylesheet = document.querySelector('select#stylesheet');
function update_radio() {
let radio = gallery[
gallery.findIndex((g) => { return g.value == stylesheet.value; })
];
radio.click();
radio.parentNode.parentNode.classList.add('selected');
}
stylesheet.addEventListener('change', () => {
// select the appropriate gallery item, clear the external url
update_radio();
external_url.value = '';
});
// If no custom stylesheet, select the current gallery
let external_url = document.querySelector('input#styleurl');
if (external_url.value === '') {
update_radio();
}
external_url.addEventListener('keydown', () => {
// If the custom CSS field is changed, clear radio buttons
gallery.forEach((g) => {
g.checked = false;
});
});
external_url.addEventListener('keyup', (e) => {
// If the field is empty, select appropriate gallery item again by the drop-down
if (e.target.value === "") {
update_radio();
}
});
// When a gallery radio is clicked, update the drop-down
gallery.forEach((g) => {
g.addEventListener('change', () => {
stylesheet.value = g.value;
external_url.value = '';
});
});
// gallery visibility can be toggled
let toggle = document.getElementById('toggle_css_gallery');
toggle.addEventListener('click', (e) => {
if (toggle.innerHTML === 'Hide gallery') {
toggle.innerHTML = 'Show gallery';
document.getElementById('css_gallery').style.display = 'none';
} else {
toggle.innerHTML = 'Hide gallery';
document.getElementById('css_gallery').style.display = 'block';
}
e.preventDefault();
});
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll("#settings_sections li"))
.filter((li) => { return li.dataset.gazelleSectionId != 'live_search'; })
@@ -276,4 +336,5 @@ document.addEventListener('DOMContentLoaded', () => {
refresh_paranoia();
toggle_identicons();
init_css_gallery();
});

View File

@@ -1,4 +1,4 @@
{{ header(user.username ~ " Settings", {'js': 'vendor/jquery-ui,bbcode,cssgallery,donor_titles,password,password_validate,preview_paranoia,release_sort,user_settings'}) }}
{{ header(user.username ~ " Settings", {'js': 'vendor/jquery-ui,bbcode,donor_titles,password,password_validate,preview_paranoia,release_sort,user_settings'}) }}
<div class="thin">
<div class="header">
<h2>{{ user.id|user_url }} Settings</h2>