From 67927b496d6f0abe4f7166553c31727cd5a3be99 Mon Sep 17 00:00:00 2001 From: Tea Trakostanec Date: Mon, 6 May 2024 10:57:49 +0200 Subject: [PATCH] NGSTACK-878 add js for image upload and modify css --- assets/js/backoffice/components.js | 13 +++ assets/js/backoffice/index.js | 1 + .../js/backoffice/preview-uploaded-image.js | 29 ++++++ .../backoffice/ImageUpload.component.js | 68 ++++++++++++++ assets/sass/backoffice/_my_account.scss | 94 ++++++++++--------- assets/sass/backoffice/_top_navigation.scss | 10 +- .../my_account/personal_details.html.twig | 6 +- 7 files changed, 169 insertions(+), 52 deletions(-) create mode 100644 assets/js/backoffice/preview-uploaded-image.js create mode 100644 assets/js/components/backoffice/ImageUpload.component.js diff --git a/assets/js/backoffice/components.js b/assets/js/backoffice/components.js index 7fee568cb..101142ba9 100644 --- a/assets/js/backoffice/components.js +++ b/assets/js/backoffice/components.js @@ -7,6 +7,7 @@ import Sidebar from '../components/backoffice/Sidebar.component'; import EnableFilterButtons from '../components/backoffice/EnableFilterButtons.component'; import HideOverflowingFilters from '../components/backoffice/HideOverflowingFilters.component'; import DateRangeInput from '../components/backoffice/DateRangeInput.component'; +import ImageUpload from '../components/backoffice/ImageUpload.component'; const componentConfiguration = [ { @@ -53,6 +54,18 @@ const componentConfiguration = [ Component: DateRangeInput, selector: '.js-date-range-input', }, + { + Component: ImageUpload, + selector: '.js-image-upload', + options: { + parentFormSelector: '.js-custom-form', + removeButtonSelector: '.js-remove-image', + filenameWrapper: '.js-filename-wrapper', + imageFilenameSelector: '.js-image-filename', + replaceImageBtnSelector: '.js-replace-image-btn', + imagePreviewSelector: '.js-image-preview', + }, + }, ]; addDocumentEventListeners(componentConfiguration); diff --git a/assets/js/backoffice/index.js b/assets/js/backoffice/index.js index e664d107a..0e830c02b 100644 --- a/assets/js/backoffice/index.js +++ b/assets/js/backoffice/index.js @@ -2,3 +2,4 @@ import '../../sass/backoffice/style.scss'; import './components'; import 'bootstrap'; import './date'; +import './preview-uploaded-image'; diff --git a/assets/js/backoffice/preview-uploaded-image.js b/assets/js/backoffice/preview-uploaded-image.js new file mode 100644 index 000000000..75e0f6417 --- /dev/null +++ b/assets/js/backoffice/preview-uploaded-image.js @@ -0,0 +1,29 @@ +const inputElement = document.getElementById( + 'ezplatform_content_forms_content_edit_fieldsData_image_value_file' +); +const imageElement = document.getElementById('img-preview'); +const removeImageButton = document.getElementById('btn-remove-img'); +const removeImageCheckbox = document.getElementsByClassName('js-remove-image')[0]; + +function updateSource() { + const file = this.files[0]; + if (file !== undefined) { + imageElement.src = URL.createObjectURL(file); + } else { + imageElement.src = ''; + } +} + +function removeImage() { + removeImageCheckbox.checked = true; + inputElement.value = ''; + imageElement.src = ''; +} + +if (inputElement) { + inputElement.addEventListener('change', updateSource, false); +} + +if (removeImageButton) { + removeImageButton.addEventListener('click', removeImage, false); +} diff --git a/assets/js/components/backoffice/ImageUpload.component.js b/assets/js/components/backoffice/ImageUpload.component.js new file mode 100644 index 000000000..45c8a6c05 --- /dev/null +++ b/assets/js/components/backoffice/ImageUpload.component.js @@ -0,0 +1,68 @@ +export default class ImageUpload { + constructor(element, options) { + this.inputElement = element; + this.removeElement = document.querySelector(options.removeButtonSelector); + this.filenameElement = document.querySelector(options.imageFilenameSelector); + this.filenameWrapper = document.querySelector(options.filenameWrapper); + this.replaceImageBtn = document.querySelector(options.replaceImageBtnSelector); + this.imagePreview = document.querySelector(options.imagePreviewSelector); + this.onInit(); + } + + onInit() { + this.initialFilename = this.filenameElement.innerHTML.trim(); + this.initialImageSrc = this.imagePreview.src; + + this.inputElement.addEventListener('input', this.handleFileChange.bind(this)); + + this.replaceImageBtn.addEventListener('click', () => this.inputElement.click()); + + this.removeElement.addEventListener('change', this.handleRemoveImageChange.bind(this)); + } + + handleFileChange(e) { + const that = this; + + function readURL(input) { + if (input.files && input.files[0]) { + var reader = new FileReader(); + + reader.onload = function (event) { + that.imagePreview.setAttribute('src', event.target.result); + }; + + reader.readAsDataURL(input.files[0]); + } + } + + if (e.target.value) { + readURL(e.target); + this.replaceImageBtn.classList.remove('hidden'); + this.inputElement.classList.add('hidden'); + this.filenameWrapper.classList.remove('hidden'); + if (e.target.value) { + this.filenameElement.innerHTML = this.inputElement.files[0].name; + } + if (this.removeElement.checked) { + this.removeElement.click(); + } + } + } + + handleRemoveImageChange(e) { + if (!e.target.checked) return; + + if (this.inputElement.value && this.initialFilename) { + e.target.checked = false; + this.filenameElement.innerHTML = this.initialFilename; + this.imagePreview.setAttribute('src', this.initialImageSrc); + } else { + this.replaceImageBtn.classList.add('hidden'); + this.inputElement.classList.remove('hidden'); + this.filenameWrapper.classList.add('hidden'); + this.imagePreview.setAttribute('src', ''); + } + + this.inputElement.value = ''; + } +} diff --git a/assets/sass/backoffice/_my_account.scss b/assets/sass/backoffice/_my_account.scss index 8e53b18e3..15608707c 100644 --- a/assets/sass/backoffice/_my_account.scss +++ b/assets/sass/backoffice/_my_account.scss @@ -1,4 +1,44 @@ .my-account { + + + &__image-container { + display: flex; + gap: 1rem; + + @include media-breakpoint-down(sm) { + flex-direction: column; + } + } + + &__avatar { + border-radius: 4px; + max-width: 200px; + max-height: 200px; + + @include media-breakpoint-down(sm) { + align-self: flex-start; + } + + &[src=''] { + display: none; + } + } + + .custom-image-upload { + display: flex; + flex-direction: column; + gap: 0.75rem; + + .file-wrapper { + width: unset; + } + + .btn-replace-image { + align-self: flex-start; + margin-left: 0.5rem; + } + } + form { display: flex; flex-direction: column; @@ -55,44 +95,6 @@ } } - .my-account-image-container { - display: flex; - gap: 1rem; - - @include media-breakpoint-down(sm) { - flex-direction: column; - - img { - align-self: flex-start; - } - } - - img { - border-radius: 4px; - max-width: 200px; - max-height: 200px; - - &[src=''] { - display: none; - } - - + .custom-image-upload { - display: flex; - flex-direction: column; - gap: 0.75rem; - - .file-wrapper { - width: unset; - } - - .btn-replace-image { - align-self: unset; - margin-left: 0.5rem; - } - } - } - } - > .checkbox-row { @include media-breakpoint-down(sm) { @@ -204,15 +206,15 @@ margin-left: auto; display: inline-block; + @include media-breakpoint-down(lg) { + width: 100%; + } + p { font-size: 0.875rem; color: $gray-54; margin-bottom: 0; } - - @include media-breakpoint-down(lg) { - width: 100%; - } } .form-actions { @@ -223,15 +225,19 @@ justify-content: space-between; @include media-breakpoint-down(lg) { - justify-content: center; + justify-content: flex-start; + } - button { + button { + + @include media-breakpoint-down(lg) { margin-bottom: 0.5rem; } } } &.my-account-preferences { + div.checkbox-row { display: flex; align-items: center; diff --git a/assets/sass/backoffice/_top_navigation.scss b/assets/sass/backoffice/_top_navigation.scss index d78328d06..8a21865d5 100644 --- a/assets/sass/backoffice/_top_navigation.scss +++ b/assets/sass/backoffice/_top_navigation.scss @@ -1,5 +1,5 @@ .top-navigation { - height: 60px; + height: 3.75rem; border-bottom: 2px solid $secondary_2; ul { @@ -9,9 +9,9 @@ } &-btn { - height: 60px; + height: 3.75rem; - @media (max-width: 768px) { + @include media-breakpoint-down(md) { flex: 1; } @@ -32,7 +32,7 @@ cursor: pointer; - @media (max-width: 768px) { + @include media-breakpoint-down(md) { text-align: center; padding: 0 0.5rem; justify-content: center; @@ -45,7 +45,7 @@ &:hover { background-color: $secondary_4; border-color: $secondary_4; - color: $darkgray; + color: $white; } } diff --git a/templates/backoffice/my_account/personal_details.html.twig b/templates/backoffice/my_account/personal_details.html.twig index 3311e197a..7195a8394 100644 --- a/templates/backoffice/my_account/personal_details.html.twig +++ b/templates/backoffice/my_account/personal_details.html.twig @@ -24,11 +24,11 @@ {% endif %}
{{ form_label(form.image) }} -