From 97f0df0598a6647f19c32afa5c4d64e73fcaeb76 Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Thu, 16 Feb 2023 09:59:35 +0100 Subject: [PATCH 1/3] refactor(progress): move progress bar markup to haml --- .../shared/activestorage/progress-bar.ts | 26 +++++++++++++++---- app/views/layouts/_progress_bar.html.haml | 5 ++++ app/views/layouts/application.html.haml | 1 + 3 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 app/views/layouts/_progress_bar.html.haml diff --git a/app/javascript/shared/activestorage/progress-bar.ts b/app/javascript/shared/activestorage/progress-bar.ts index 7541ffae4..3370d790d 100644 --- a/app/javascript/shared/activestorage/progress-bar.ts +++ b/app/javascript/shared/activestorage/progress-bar.ts @@ -1,3 +1,5 @@ +import invariant from 'tiny-invariant'; + const PENDING_CLASS = 'direct-upload--pending'; const ERROR_CLASS = 'direct-upload--error'; const COMPLETE_CLASS = 'direct-upload--complete'; @@ -18,7 +20,7 @@ export default class ProgressBar { static init(input: HTMLInputElement, id: string, file: File) { clearErrors(input); const html = this.render(id, file.name); - input.insertAdjacentHTML('beforebegin', html); + input.before(html); } static start(id: string) { @@ -53,10 +55,24 @@ export default class ProgressBar { } static render(id: string, filename: string) { - return `
-
- ${filename} -
`; + const template = document.querySelector( + '#progress-bar-template' + ); + invariant(template, 'Missing progress-bar-template'); + const fragment = template.content.cloneNode(true) as DocumentFragment; + const container = fragment.querySelector('.direct-upload'); + invariant(container, 'Missing .direct-upload element in template'); + const slot = container.querySelector( + 'slot[name="filename"]' + ); + invariant(slot, 'Missing "filename" slot in template'); + + container.id = `direct-upload-${id}`; + container.dataset.directUploadId = id; + container.classList.add(PENDING_CLASS); + slot.replaceWith(document.createTextNode(filename)); + + return container; } id: string; diff --git a/app/views/layouts/_progress_bar.html.haml b/app/views/layouts/_progress_bar.html.haml new file mode 100644 index 000000000..600ab2b0b --- /dev/null +++ b/app/views/layouts/_progress_bar.html.haml @@ -0,0 +1,5 @@ +%template#progress-bar-template + .direct-upload + .direct-upload__progress{ role: "progressbar", 'aria-valuemin': "0", 'aria-valuemax': "100", style: "width: 0%" } + %span.direct-upload__filename + %slot{ name: "filename" } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 6a49c6418..5cc4da21d 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -59,3 +59,4 @@ - if Rails.env.development? = vite_typescript_tag 'axe-core' = yield :charts_js + = render partial: "layouts/progress_bar" From af31e097fb1db9e7a7283c745bc4b3bd6529e146 Mon Sep 17 00:00:00 2001 From: Julie Salha <49035942+julieSalha@users.noreply.github.com> Date: Thu, 16 Feb 2023 16:18:12 +0100 Subject: [PATCH 2/3] Add a11y attributes progressbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Peux-tu également prévoir une traduction pour l'attribut aria-label stp ? ("File upload"). N'hésite pas si tu as des questions. --- app/views/layouts/_progress_bar.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/_progress_bar.html.haml b/app/views/layouts/_progress_bar.html.haml index 600ab2b0b..4ca638ffb 100644 --- a/app/views/layouts/_progress_bar.html.haml +++ b/app/views/layouts/_progress_bar.html.haml @@ -1,5 +1,5 @@ %template#progress-bar-template .direct-upload - .direct-upload__progress{ role: "progressbar", 'aria-valuemin': "0", 'aria-valuemax': "100", style: "width: 0%" } + .direct-upload__progress{ role: "progressbar", 'aria-label': "Chargement de fichier", tabindex: "0", 'aria-valuemin': "0", 'aria-valuemax': "100", max: "100", style: "width: 0%" } %span.direct-upload__filename %slot{ name: "filename" } From 47a8d33d85dbd360dbf9f4a48abdf2ed8e775586 Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Tue, 21 Feb 2023 09:35:55 +0100 Subject: [PATCH 3/3] refactor(progress_bar): should be a component --- app/components/attachment/progress_bar_component.rb | 2 ++ .../progress_bar_component/progress_bar_component.en.yml | 3 +++ .../progress_bar_component/progress_bar_component.fr.yml | 3 +++ .../progress_bar_component/progress_bar_component.html.haml} | 2 +- app/views/layouts/application.html.haml | 2 +- 5 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 app/components/attachment/progress_bar_component.rb create mode 100644 app/components/attachment/progress_bar_component/progress_bar_component.en.yml create mode 100644 app/components/attachment/progress_bar_component/progress_bar_component.fr.yml rename app/{views/layouts/_progress_bar.html.haml => components/attachment/progress_bar_component/progress_bar_component.html.haml} (59%) diff --git a/app/components/attachment/progress_bar_component.rb b/app/components/attachment/progress_bar_component.rb new file mode 100644 index 000000000..8e4605246 --- /dev/null +++ b/app/components/attachment/progress_bar_component.rb @@ -0,0 +1,2 @@ +class Attachment::ProgressBarComponent < ApplicationComponent +end diff --git a/app/components/attachment/progress_bar_component/progress_bar_component.en.yml b/app/components/attachment/progress_bar_component/progress_bar_component.en.yml new file mode 100644 index 000000000..2aad5a17c --- /dev/null +++ b/app/components/attachment/progress_bar_component/progress_bar_component.en.yml @@ -0,0 +1,3 @@ +--- +en: + loading: Loading diff --git a/app/components/attachment/progress_bar_component/progress_bar_component.fr.yml b/app/components/attachment/progress_bar_component/progress_bar_component.fr.yml new file mode 100644 index 000000000..3d31a7529 --- /dev/null +++ b/app/components/attachment/progress_bar_component/progress_bar_component.fr.yml @@ -0,0 +1,3 @@ +--- +fr: + loading: Chargement de fichier diff --git a/app/views/layouts/_progress_bar.html.haml b/app/components/attachment/progress_bar_component/progress_bar_component.html.haml similarity index 59% rename from app/views/layouts/_progress_bar.html.haml rename to app/components/attachment/progress_bar_component/progress_bar_component.html.haml index 4ca638ffb..6675df0a5 100644 --- a/app/views/layouts/_progress_bar.html.haml +++ b/app/components/attachment/progress_bar_component/progress_bar_component.html.haml @@ -1,5 +1,5 @@ %template#progress-bar-template .direct-upload - .direct-upload__progress{ role: "progressbar", 'aria-label': "Chargement de fichier", tabindex: "0", 'aria-valuemin': "0", 'aria-valuemax': "100", max: "100", style: "width: 0%" } + .direct-upload__progress{ role: "progressbar", 'aria-label': t(".loading"), tabindex: "0", 'aria-valuemin': "0", 'aria-valuemax': "100", max: "100", style: "width: 0%" } %span.direct-upload__filename %slot{ name: "filename" } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 5cc4da21d..74b523894 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -59,4 +59,4 @@ - if Rails.env.development? = vite_typescript_tag 'axe-core' = yield :charts_js - = render partial: "layouts/progress_bar" + = render Attachment::ProgressBarComponent.new