From ca0db28fc425b38b5fa2c20afe7e1731eec915f7 Mon Sep 17 00:00:00 2001 From: Nick Taylor Date: Thu, 18 Nov 2021 12:23:24 -0500 Subject: [PATCH] Add logo preview to creator settings form (#15363) --- app/assets/stylesheets/setup-mode.scss | 5 ++ app/javascript/.eslintrc.js | 1 + .../creator_settings_controller.js | 70 +++++++++++++++++++ app/javascript/packs/base.jsx | 20 ++++++ .../admin/creator_settings/_form.html.erb | 17 +++-- app/views/admin/creator_settings/new.html.erb | 2 +- config/webpack/environment.js | 4 ++ .../creatorSettings.spec.js | 13 +++- jsconfig.json | 3 +- 9 files changed, 121 insertions(+), 14 deletions(-) create mode 100644 app/javascript/admin/controllers/creator_settings_controller.js diff --git a/app/assets/stylesheets/setup-mode.scss b/app/assets/stylesheets/setup-mode.scss index 724d9937e..4f4132ce1 100644 --- a/app/assets/stylesheets/setup-mode.scss +++ b/app/assets/stylesheets/setup-mode.scss @@ -18,6 +18,11 @@ body.default-header { background: white; } +[data-creator-settings-target='previewLogo'] { + max-height: 80px; + height: 80px; +} + // This ID is tied the global "Setup not complete" banner // and is necessary for the removal of the banner on the // Creator Settings page diff --git a/app/javascript/.eslintrc.js b/app/javascript/.eslintrc.js index 428288345..12bc93779 100644 --- a/app/javascript/.eslintrc.js +++ b/app/javascript/.eslintrc.js @@ -28,6 +28,7 @@ module.exports = { '@crayons': path.join(__dirname, './crayons'), '@utilities': path.join(__dirname, './utilities'), '@components': path.join(__dirname, './shared/components'), + '@admin-controllers': path.join(__dirname, './admin/controllers'), }, extensions: ['.js', '.jsx'], }, diff --git a/app/javascript/admin/controllers/creator_settings_controller.js b/app/javascript/admin/controllers/creator_settings_controller.js new file mode 100644 index 000000000..cda796eb4 --- /dev/null +++ b/app/javascript/admin/controllers/creator_settings_controller.js @@ -0,0 +1,70 @@ +import { Controller } from '@hotwired/stimulus'; + +const MAX_LOGO_PREVIEW_HEIGHT = 80; +const MAX_LOGO_PREVIEW_WIDTH = 220; + +/** + * Manages interactions on the Creator Settings page. + */ +export class CreatorSettingsController extends Controller { + static targets = ['previewLogo']; + + /** + * Displays a preview of the image selected by the user. + * + * @param {Event} event + */ + previewLogo(event) { + const { + target: { + files: [firstFile], + }, + } = event; + + if (!firstFile) { + // Most likely the user cancelled the file selection. + return; + } + + const reader = new FileReader(); + + reader.onload = () => { + const imageURL = reader.result; + const image = document.createElement('img'); + image.src = imageURL; + + // The logo preview image is purely visual so no need to communicate this to assistive technology. + image.alt = 'preview of logo selected'; + + image.addEventListener( + 'load', + (event) => { + let { + target: { width, height }, + } = event; + + if (height > MAX_LOGO_PREVIEW_HEIGHT) { + width = (width / height) * MAX_LOGO_PREVIEW_HEIGHT; + height = MAX_LOGO_PREVIEW_HEIGHT; + } + + if (width > MAX_LOGO_PREVIEW_WIDTH) { + width = MAX_LOGO_PREVIEW_WIDTH; + height = (height / width) * MAX_LOGO_PREVIEW_WIDTH; + } + + image.style.width = `${width}px`; + image.style.height = `${height}px`; + + this.previewLogoTarget.replaceChild( + image, + this.previewLogoTarget.firstChild, + ); + }, + { once: true }, + ); + }; + + reader.readAsDataURL(firstFile); + } +} diff --git a/app/javascript/packs/base.jsx b/app/javascript/packs/base.jsx index 44489da42..abeb6641a 100644 --- a/app/javascript/packs/base.jsx +++ b/app/javascript/packs/base.jsx @@ -143,3 +143,23 @@ getInstantClick().then((spa) => { }); initializeNav(); + +async function loadCreatorSettings() { + try { + const [{ CreatorSettingsController }, { Application }] = await Promise.all([ + import('@admin-controllers/creator_settings_controller'), + import('@hotwired/stimulus'), + ]); + + const application = Application.start(); + application.register('creator-settings', CreatorSettingsController); + } catch (error) { + Honeybadger.notify( + `Error loading the creator settings controller: ${error.message}`, + ); + } +} + +if (document.location.pathname === '/admin/creator_settings/new') { + loadCreatorSettings(); +} diff --git a/app/views/admin/creator_settings/_form.html.erb b/app/views/admin/creator_settings/_form.html.erb index ca7e6c66e..2a82e49ce 100644 --- a/app/views/admin/creator_settings/_form.html.erb +++ b/app/views/admin/creator_settings/_form.html.erb @@ -11,17 +11,16 @@ <%= label_tag :logo_svg, class: "crayons-field__label" do %> Logo -

Ideally SVG, but PNG will work, too. Min size: 300x300px.

+

Ideally SVG, but PNG or JPEG will work, too.

<% end %> - - <%= file_field_tag :logo_svg, class: "crayons-btn crayons-btn--secondary w-100 ", role: "button", required: true %> - - - <% if ::Settings::General.logo_svg.present? %> -
diff --git a/app/views/admin/creator_settings/new.html.erb b/app/views/admin/creator_settings/new.html.erb index 6de6019a9..73d547096 100644 --- a/app/views/admin/creator_settings/new.html.erb +++ b/app/views/admin/creator_settings/new.html.erb @@ -3,7 +3,7 @@ <%= Rails.application.assets["setup-mode.css"].to_s.html_safe %> -
+
<% if flash[:error] %>