infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

UI: fixes based on Actionable Feedback from devtalk and frontend changes #40

Merged
Pablo Vazquez merged 15 commits from martonlente/extensions-website:ui-alpha-launch-actionable-feedback into main 2024-02-27 16:05:54 +01:00
Conversation 0 Commits 15 Files Changed 7 +35 -1
1 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c8d88b92ec - Show all commits

36
extensions/static/extensions/scripts/manage.js
View File

@ -1,3 +1,5 @@
// TODO: improve and refactor variable namings
const formsetContainer = document.getElementById('add-image-container');
const form = document.getElementById('update-extension-form');
const btnAddImage = document.getElementById('btn-add-image');
@ -11,7 +13,7 @@ function appendImageUploadForm() {
const newFormHTML = `
<div class="previews-list-item">
<div class="previews-list-item-thumbnail pl-3">
<div class="mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div>
<div class="js-input-img-thumbnail mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div>
</div>
<div class="details flex-grow-1">
<div class="mb-2">
@ -48,6 +50,9 @@ btnAddImage.addEventListener('click', function(ev) {
// Init function resetImgUploadForm
resetImgUploadForm();
// Init function setImgUploadFormThumbnail
setImgUploadFormThumbnail();
return false;
});
@ -82,8 +87,37 @@ function resetImgUploadForm() {
// Find the input image
const inputImg = rowParent.querySelector('.js-input-img');
// Find the input image thumbnail
const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail');
// Reset the selected image (if any)
inputImg.value = ''; // Clear the input value
// Reset the selected image thumbnail
inputImgThumbnail.removeAttribute('style');
});
});
}
// Create function setImgUploadFormThumbnail
function setImgUploadFormThumbnail() {
const inputImg = document.querySelectorAll('.js-input-img');
inputImg.forEach(function(item) {
item.addEventListener('change', function(e) {
// Init file image
const file = event.target.files[0];
// Find the row parent
const rowParent = this.closest('.js-ext-edit-field-row');
// Find the thumbnail image
const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail');
// Set thumbnail img
if (file) {
inputImgThumbnail.style.backgroundImage = `url('${URL.createObjectURL(file)}')`;
}
});
});
}