Implement Web Assets' theme system and selection, and add 'light' theme #118

Merged
Márton Lente merged 97 commits from martonlente/extensions-website:ui/theme-light into main 2024-05-08 14:20:07 +02:00
Showing only changes of commit f27fd7678d - Show all commits

View File

@ -1,99 +1,101 @@
// Create function btnBack (function() {
function btnBack() { // Create function btnBack
const btnBack = document.querySelectorAll('.js-btn-back'); function btnBack() {
const btnBack = document.querySelectorAll('.js-btn-back');
btnBack.forEach(function(item) { btnBack.forEach(function(item) {
item.addEventListener('click', function(e) { item.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
window.history.back(); window.history.back();
});
}); });
});
}
// Create finction commentForm
function commentForm() {
const commentForm = document.querySelector('.js-comment-form');
if (!commentForm) {
return;
} }
const commentFormSelect = commentForm.querySelector('select'); // Create finction commentForm
if (!commentFormSelect) { function commentForm() {
return; const commentForm = document.querySelector('.js-comment-form');
} if (!commentForm) {
// Create event comment form select change
commentFormSelect.addEventListener('change', function(e) {
let value = e.target.value;
let verb = 'Comment';
const activitySubmitButton = document.getElementById('activity-submit');
activitySubmitButton.classList.remove('btn-success', 'btn-warning');
// Hide or show comment form msg on change
if (value == 'AWC') {
verb = 'Set as Awaiting Changes';
activitySubmitButton.classList.add('btn-warning');
} else if (value == 'AWR') {
verb = 'Set as Awaiting Review';
} else if (value == 'APR') {
verb = 'Approve!';
activitySubmitButton.classList.add('btn-success');
}
activitySubmitButton.querySelector('span').textContent = verb;
});
}
// Create function copyInstallUrl
function copyInstallUrl() {
function init() {
// Create variables
const btnInstall = document.querySelector('.js-btn-install');
const btnInstallAction = document.querySelector('.js-btn-install-action');
const btnInstallGroup = document.querySelector('.js-btn-install-group');
const btnInstallDrag = document.querySelector('.js-btn-install-drag');
const btnInstallDragGroup = document.querySelector('.js-btn-install-drag-group');
if (btnInstall == null) {
return; return;
} }
// Get data install URL const commentFormSelect = commentForm.querySelector('select');
const btnInstallUrl = btnInstall.getAttribute('data-install-url'); if (!commentFormSelect) {
return;
}
btnInstall.addEventListener('click', function() { // Create event comment form select change
// Hide btnInstallGroup commentFormSelect.addEventListener('change', function(e) {
btnInstallGroup.classList.add('d-none'); let value = e.target.value;
let verb = 'Comment';
const activitySubmitButton = document.getElementById('activity-submit');
activitySubmitButton.classList.remove('btn-success', 'btn-warning');
// Show btnInstallAction // Hide or show comment form msg on change
btnInstallAction.classList.add('show'); if (value == 'AWC') {
}); verb = 'Set as Awaiting Changes';
activitySubmitButton.classList.add('btn-warning');
} else if (value == 'AWR') {
verb = 'Set as Awaiting Review';
} else if (value == 'APR') {
verb = 'Approve!';
activitySubmitButton.classList.add('btn-success');
}
// Drag btnInstallUrl activitySubmitButton.querySelector('span').textContent = verb;
btnInstallDrag.addEventListener('dragstart', function(e) {
// Set data install URL to be transferred during drag
e.dataTransfer.setData('text/plain', btnInstallUrl);
// Set drag area active
btnInstallDragGroup.classList.add('opacity-50');
});
// Undrag btnInstallUrl
btnInstallDrag.addEventListener('dragend', function() {
// Set drag area inactive
btnInstallDragGroup.classList.remove('opacity-50');
}); });
} }
init(); // Create function copyInstallUrl
} function copyInstallUrl() {
// Create function init function init() {
function init() { // Create variables
btnBack(); const btnInstall = document.querySelector('.js-btn-install');
commentForm(); const btnInstallAction = document.querySelector('.js-btn-install-action');
copyInstallUrl(); const btnInstallGroup = document.querySelector('.js-btn-install-group');
} const btnInstallDrag = document.querySelector('.js-btn-install-drag');
const btnInstallDragGroup = document.querySelector('.js-btn-install-drag-group');
document.addEventListener('DOMContentLoaded', function() { if (btnInstall == null) {
init(); return;
}); }
// Get data install URL
const btnInstallUrl = btnInstall.getAttribute('data-install-url');
btnInstall.addEventListener('click', function() {
// Hide btnInstallGroup
btnInstallGroup.classList.add('d-none');
// Show btnInstallAction
btnInstallAction.classList.add('show');
});
// Drag btnInstallUrl
btnInstallDrag.addEventListener('dragstart', function(e) {
// Set data install URL to be transferred during drag
e.dataTransfer.setData('text/plain', btnInstallUrl);
// Set drag area active
btnInstallDragGroup.classList.add('opacity-50');
});
// Undrag btnInstallUrl
btnInstallDrag.addEventListener('dragend', function() {
// Set drag area inactive
btnInstallDragGroup.classList.remove('opacity-50');
});
}
init();
}
// Create function init
function init() {
btnBack();
commentForm();
copyInstallUrl();
}
document.addEventListener('DOMContentLoaded', function() {
init();
});
}())