wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 304 Pull Requests Releases 18 Wiki Activity

fix(browser-extension): issue #924

Browse Source
This commit is contained in:
wanhose 2024-09-12 20:00:32 +02:00
parent 1e1a98f476
commit 3f772cc2ab
2 changed files with 12 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/browser-extension/src/scripts/dialog.js
View File

@ -40,16 +40,12 @@ const reportDialogHtml = `
${browser.i18n.getMessage('reportDialog_urlInputLabel')} ${browser.i18n.getMessage('reportDialog_urlInputLabel')}
<span class="report-dialog-input-label-required">*</span> <span class="report-dialog-input-label-required">*</span>
</div> </div>
<div <input
aria-labelledby="report-dialog-label-url" aria-labelledby="report-dialog-label-url"
aria-multiline="false"
aria-required="true" aria-required="true"
class="report-dialog-input" class="report-dialog-input"
contenteditable="true"
id="report-dialog-input-url" id="report-dialog-input-url"
role="textbox" />
tabindex="0"
></div>
<div class="report-dialog-input-error" id="report-dialog-input-url-error"> <div class="report-dialog-input-error" id="report-dialog-input-url-error">
${browser.i18n.getMessage('reportDialog_urlInputError')} ${browser.i18n.getMessage('reportDialog_urlInputError')}
</div> </div>
@ -59,19 +55,13 @@ const reportDialogHtml = `
${browser.i18n.getMessage('reportDialog_reasonInputLabel')} ${browser.i18n.getMessage('reportDialog_reasonInputLabel')}
<span class="report-dialog-input-label-required">*</span> <span class="report-dialog-input-label-required">*</span>
</div> </div>
<div <textarea
aria-labelledby="report-dialog-label-reason" aria-labelledby="report-dialog-label-reason"
aria-multiline="true"
aria-placeholder="${browser.i18n.getMessage('reportDialog_reasonInputLabel')}"
aria-required="true" aria-required="true"
class="report-dialog-input" class="report-dialog-input"
contenteditable="true"
id="report-dialog-input-reason" id="report-dialog-input-reason"
role="textbox" rows="4"
tabindex="0" >${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}</textarea>
>
${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}
</div>
<div class="report-dialog-input-error" id="report-dialog-input-reason-error"> <div class="report-dialog-input-error" id="report-dialog-input-reason-error">
${browser.i18n.getMessage('reportDialog_reasonInputError')} ${browser.i18n.getMessage('reportDialog_reasonInputError')}
</div> </div>
@ -152,8 +142,8 @@ function inputKeyDownHandler(event) {
*/ */
function inputPasteHandler(event) { function inputPasteHandler(event) {
event.preventDefault(); event.preventDefault();
const text = event.clipboardData?.getData('text').replace(/\r?\n|\r/g, ' ');
const text = event.clipboardData?.getData('text').replace(/\r?\n|\r/g, ' ');
const selection = window.getSelection(); const selection = window.getSelection();
if (selection.rangeCount) { if (selection.rangeCount) {
@ -174,7 +164,7 @@ function showReportDialog() {
existingDialog.showModal(); existingDialog.showModal();
submitButton.setAttribute('aria-disabled', 'false'); submitButton.setAttribute('aria-disabled', 'false');
urlInput.textContent = window.location.origin + window.location.pathname; urlInput.setAttribute('value', window.location.origin + window.location.pathname);
return; return;
} }
@ -188,8 +178,7 @@ function showReportDialog() {
const urlInput = dialog?.querySelector('#report-dialog-input-url'); const urlInput = dialog?.querySelector('#report-dialog-input-url');
closeButton.addEventListener('click', closeButtonClickHandler); closeButton.addEventListener('click', closeButtonClickHandler);
dialog.querySelector('#report-dialog-input-url').textContent = urlInput.setAttribute('value', window.location.origin + window.location.pathname);
window.location.origin + window.location.pathname;
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter'); link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
link.setAttribute('id', 'report-dialog-font'); link.setAttribute('id', 'report-dialog-font');
link.setAttribute('rel', 'stylesheet'); link.setAttribute('rel', 'stylesheet');
@ -222,9 +211,9 @@ async function submitButtonClickHandler(event) {
const dialog = document.getElementById(reportDialogId); const dialog = document.getElementById(reportDialogId);
const reasonInput = dialog?.querySelector('#report-dialog-input-reason'); const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
const reasonText = reasonInput?.textContent.trim(); const reasonText = reasonInput?.value.trim();
const urlInput = dialog?.querySelector('#report-dialog-input-url'); const urlInput = dialog?.querySelector('#report-dialog-input-url');
const urlText = urlInput?.textContent.trim(); const urlText = urlInput?.value.trim();
const errors = validateForm({ reason: reasonText, url: urlText }); const errors = validateForm({ reason: reasonText, url: urlText });

3
packages/browser-extension/src/styles/dialog.css
View File

@ -126,6 +126,7 @@
} }
#report-dialog .report-dialog-input { #report-dialog .report-dialog-input {
all: unset;
border: 1px solid var(--cookie-dialog-monster-color-tertiary); border: 1px solid var(--cookie-dialog-monster-color-tertiary);
border-radius: 4px; border-radius: 4px;
color: var(--cookie-dialog-monster-color-secondary); color: var(--cookie-dialog-monster-color-secondary);
@ -213,7 +214,7 @@
display: flex; display: flex;
font-family: Inter, Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 14px; font-size: 14px;
height: 39px; height: 42px;
justify-content: center; justify-content: center;
line-height: 1.2; line-height: 1.2;
outline: none; outline: none;