maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Creator Settings: Fixed the resizing of the preview logo (#15688)

Browse source
This commit is contained in:
Nick Taylor 2021-12-07 07:04:07 -05:00 • committed by GitHub
parent b71865fc42
commit 8c1b1f1982
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/javascript/admin/controllers/creator_settings_controller.js
View file

@ -3,7 +3,6 @@ import { isLowContrast } from '@utilities/color/contrastValidator';
import { brightness } from '@utilities/color/accentCalculator';
const MAX_LOGO_PREVIEW_HEIGHT = 80;
const MAX_LOGO_PREVIEW_WIDTH = 220;
/**
* Manages interactions on the Creator Settings page.
@ -34,6 +33,7 @@ export class CreatorSettingsController extends Controller {
const imageURL = reader.result;
const image = document.createElement('img');
image.src = imageURL;
image.className = 'site-logo';
// The logo preview image is purely visual so no need to communicate this to assistive technology.
image.alt = 'preview of logo selected';
@ -45,23 +45,28 @@ export class CreatorSettingsController extends Controller {
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,
);
const maxLogoPreviewWidth = parseInt(
getComputedStyle(image).getPropertyValue('--max-width'),
10,
);
if (height > MAX_LOGO_PREVIEW_HEIGHT) {
width = (MAX_LOGO_PREVIEW_HEIGHT / height) * width;
height = MAX_LOGO_PREVIEW_HEIGHT;
}
if (width > maxLogoPreviewWidth) {
height = (maxLogoPreviewWidth / width) * height;
width = maxLogoPreviewWidth;
}
image.width = width;
image.height = height;
},
{ once: true },
);