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

refactor: drop old dialog stuff

Browse Source
This commit is contained in:
wanhose 2024-10-09 02:00:09 +02:00
parent 46aefd4688
commit c7f0b31dd9
3 changed files with 1 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/browser-extension/src/manifest.json
View File

@ -51,7 +51,7 @@
"*://translate.google.it/*",
"*://www.cookie-dialog-monster.com/*"
],
"js": ["scripts/content.js", "scripts/dialog.js"],
"js": ["scripts/content.js"],
"matches": ["http://*/*", "https://*/*"],
"run_at": "document_start"
}

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

@ -1,275 +0,0 @@
if (typeof browser === 'undefined') {
browser = chrome;
}
/**
* @description Report dialog ID
*/
const reportDialogId = 'report-dialog';
/**
* @description Report dialog outer HTML
*/
const reportDialogHtml = `
<dialog id="${reportDialogId}" tabindex="0">
<div class="report-dialog-header">
<div class="report-dialog-header-title">Cookie Dialog Monster</div>
<div class="report-dialog-close-button" role="button" tabindex="0">
<svg
fill="none"
height="20"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="20"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</div>
</div>
<div class="report-dialog-body">
<div class="report-dialog-form-view">
<div class="report-dialog-body-text">
${browser.i18n.getMessage('reportDialog_bodyText')}
</div>
<div class="report-dialog-form">
<div class="report-dialog-input-group">
<div class="report-dialog-input-label" id="report-dialog-label-url">
${browser.i18n.getMessage('reportDialog_urlInputLabel')}
<span class="report-dialog-input-label-required">*</span>
</div>
<input
aria-labelledby="report-dialog-label-url"
aria-required="true"
class="report-dialog-input"
id="report-dialog-input-url"
/>
<div class="report-dialog-input-error" id="report-dialog-input-url-error">
${browser.i18n.getMessage('reportDialog_urlInputError')}
</div>
</div>
<div class="report-dialog-input-group">
<div class="report-dialog-input-label" id="report-dialog-label-reason">
${browser.i18n.getMessage('reportDialog_reasonInputLabel')}
<span class="report-dialog-input-label-required">*</span>
</div>
<textarea
aria-labelledby="report-dialog-label-reason"
aria-required="true"
class="report-dialog-input"
id="report-dialog-input-reason"
rows="4"
>${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}</textarea>
<div class="report-dialog-input-error" id="report-dialog-input-reason-error">
${browser.i18n.getMessage('reportDialog_reasonInputError')}
</div>
</div>
<div class="report-dialog-submit-button" role="button" tabindex="0">
${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
</div>
</div>
</div>
<div class="report-dialog-submit-view" hidden>
<svg
fill="none"
height="48"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
stroke="var(--cookie-dialog-monster-color-success)"
viewBox="0 0 24 24"
width="48"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
</svg>
<div class="report-dialog-submit-text">
${browser.i18n.getMessage('reportDialog_submitText')}
</div>
<div class="report-dialog-submit-extra-text">
${browser.i18n.getMessage('reportDialog_submitExtraText')}
</div>
<div class="report-dialog-issue-button" role="button" tabindex="0">
${browser.i18n.getMessage('contextMenu_issueOption')}
</div>
</div>
</div>
</dialog>
`;
/**
* @description Dialog close button click handler
* @param {MouseEvent} event
*/
function closeButtonClickHandler(event) {
const dialog = document.getElementById(reportDialogId);
event.preventDefault();
dialog?.remove();
}
/**
* @description Hide report dialog
*/
function hideReportDialog() {
document.getElementById(reportDialogId)?.remove();
}
/**
* @description Input change handler
* @param {InputEvent} event
*/
function inputChangeHandler(event) {
event.currentTarget.removeAttribute('aria-invalid');
}
/**
* @description Input key down handler
* @param {KeyboardEvent} event
*/
function inputKeyDownHandler(event) {
if (event.key === 'Enter') {
event.preventDefault();
event.currentTarget.blur();
}
}
/**
* @description Show report dialog
*/
function showReportDialog() {
const existingDialog = document.getElementById(reportDialogId);
if (existingDialog) {
const submitButton = existingDialog.getElementsByClassName('report-dialog-submit-button')[0];
const urlInput = existingDialog.querySelector('#report-dialog-input-url');
existingDialog.showModal();
submitButton.setAttribute('aria-disabled', 'false');
urlInput.setAttribute('value', window.location.origin + window.location.pathname);
return;
}
const parser = new DOMParser();
const result = parser.parseFromString(reportDialogHtml, 'text/html');
const dialog = result.body.firstElementChild;
const closeButton = dialog.getElementsByClassName('report-dialog-close-button')[0];
const link = document.createElement('link');
const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
const submitButton = dialog?.getElementsByClassName('report-dialog-submit-button')[0];
const urlInput = dialog?.querySelector('#report-dialog-input-url');
closeButton.addEventListener('click', closeButtonClickHandler);
urlInput.setAttribute('value', window.location.origin + window.location.pathname);
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
link.setAttribute('id', 'report-dialog-font');
link.setAttribute('rel', 'stylesheet');
reasonInput.addEventListener('input', inputChangeHandler);
reasonInput.addEventListener('keydown', inputKeyDownHandler);
submitButton.addEventListener('click', submitButtonClickHandler);
urlInput.addEventListener('input', inputChangeHandler);
urlInput.addEventListener('keydown', inputKeyDownHandler);
dispatch({ type: 'INSERT_DIALOG_CSS' });
document.body.appendChild(dialog);
document.head.appendChild(link);
dialog.showModal();
}
/**
* @description Dialog submit button click handler
* @param {MouseEvent} event
*/
async function submitButtonClickHandler(event) {
event.preventDefault();
if (event.currentTarget.getAttribute('aria-disabled') === 'true') {
return;
}
event.currentTarget.setAttribute('aria-disabled', 'true');
const dialog = document.getElementById(reportDialogId);
const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
const reasonText = reasonInput?.value.trim();
const urlInput = dialog?.querySelector('#report-dialog-input-url');
const urlText = urlInput?.value.trim();
const errors = validateForm({ reason: reasonText, url: urlText });
if (errors) {
if (errors.reason) {
reasonInput?.setAttribute('aria-invalid', 'true');
reasonInput?.setAttribute('aria-errormessage', 'report-dialog-input-reason-error');
}
if (errors.url) {
urlInput?.setAttribute('aria-invalid', 'true');
urlInput?.setAttribute('aria-errormessage', 'report-dialog-input-url-error');
}
event.currentTarget.setAttribute('aria-disabled', 'false');
return;
}
const formView = dialog?.getElementsByClassName('report-dialog-form-view')[0];
const issueButton = dialog?.getElementsByClassName('report-dialog-issue-button')[0];
const submitView = dialog?.getElementsByClassName('report-dialog-submit-view')[0];
const userAgent = window.navigator.userAgent;
const issueUrl = await dispatch({ userAgent, reason: reasonText, url: urlText, type: 'REPORT' });
const issue = { expiresIn: Date.now() + 8 * 60 * 60 * 1000, flags: ['bug'], url: issueUrl };
await dispatch({ hostname, state: { issue }, type: 'UPDATE_STORE' });
await dispatch({ hostname, type: 'ENABLE_ICON' });
formView?.setAttribute('hidden', 'true');
issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank'));
submitView?.removeAttribute('hidden');
}
/**
* @description Validate form
* @param {{ reason: string | undefined | undefined, url: string | undefined }} params
* @returns {{ reason: string | undefined, url: string | undefined } | undefined}
*/
function validateForm(params) {
const { reason, url } = params;
let errors = undefined;
if (!reason || reason.length < 10 || reason.length > 1000) {
errors = {
...(errors ?? {}),
reason: browser.i18n.getMessage('reportDialog_reasonInputError'),
};
}
try {
new URL(url);
} catch {
errors = {
...(errors ?? {}),
url: browser.i18n.getMessage('reportDialog_urlInputError'),
};
}
return errors;
}
/**
* @description Listen to messages
*/
browser.runtime.onMessage.addListener((message) => {
const isPage = window === window.top;
switch (message.type) {
case 'HIDE_REPORT_DIALOG':
if (isPage) hideReportDialog();
break;
case 'SHOW_REPORT_DIALOG':
if (isPage) showReportDialog();
break;
default:
break;
}
});

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

@ -1,276 +0,0 @@
:root {
--cookie-dialog-monster-color-error: #cc0000;
--cookie-dialog-monster-color-primary: #3dd9eb;
--cookie-dialog-monster-color-secondary: #34495e;
--cookie-dialog-monster-color-success: #5cb85c;
--cookie-dialog-monster-color-tertiary: #6b7280;
--cookie-dialog-monster-color-white: #ffffff;
}
#report-dialog {
background-color: var(--cookie-dialog-monster-color-white);
border: none;
border-radius: 4px;
box-sizing: border-box;
color: var(--cookie-dialog-monster-color-secondary);
font-size: 100%;
letter-spacing: normal;
margin: auto;
padding: 0px;
text-align: left;
width: 320px;
}
#report-dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
#report-dialog * {
box-sizing: border-box;
}
#report-dialog div {
all: unset;
display: block;
box-sizing: border-box;
}
#report-dialog *::-moz-selection {
color: var(--cookie-dialog-monster-color-white);
background: var(--cookie-dialog-monster-color-tertiary);
}
#report-dialog *::selection {
color: var(--cookie-dialog-monster-color-white);
background: var(--cookie-dialog-monster-color-tertiary);
}
#report-dialog .report-dialog-body {
display: block;
font-size: 14px;
line-height: 1.2;
padding: 16px;
}
#report-dialog .report-dialog-body-text {
display: block;
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.2;
margin: 0px;
padding: 0px;
}
#report-dialog .report-dialog-close-button {
align-items: center;
background-color: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
justify-content: center;
margin: 0px;
outline: none;
padding: 0px;
}
#report-dialog .report-dialog-close-button {
stroke: var(--cookie-dialog-monster-color-white);
}
#report-dialog .report-dialog-close-button:focus,
#report-dialog .report-dialog-close-button:hover > svg {
stroke: var(--cookie-dialog-monster-color-secondary);
}
#report-dialog .report-dialog-close-button:focus-visible {
box-shadow: initial;
transition: initial;
}
#report-dialog .report-dialog-close-button:focus,
#report-dialog .report-dialog-close-button:hover {
background-color: var(--cookie-dialog-monster-color-white);
}
#report-dialog .report-dialog-form {
display: grid;
gap: 10px;
}
#report-dialog .report-dialog-form-view {
display: flex;
flex-direction: column;
gap: 24px;
}
#report-dialog .report-dialog-form-view[hidden] {
display: none;
}
#report-dialog .report-dialog-header {
align-items: center;
background-color: var(--cookie-dialog-monster-color-secondary);
display: flex;
font-size: 16px;
height: 54px;
justify-content: space-between;
line-height: 1.2;
padding: 16px;
}
#report-dialog .report-dialog-header-title {
color: var(--cookie-dialog-monster-color-white);
font-family: Inter, Arial, Helvetica, sans-serif;
font-weight: 500;
}
#report-dialog .report-dialog-input {
all: unset;
border: 1px solid var(--cookie-dialog-monster-color-tertiary);
border-radius: 4px;
color: var(--cookie-dialog-monster-color-secondary);
cursor: text;
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1;
outline: none;
padding: 12px 8px;
}
#report-dialog .report-dialog-input:hover {
border-color: var(--cookie-dialog-monster-color-secondary);
}
#report-dialog .report-dialog-input:focus {
border-color: var(--cookie-dialog-monster-color-primary);
}
#report-dialog .report-dialog-input:focus-visible {
box-shadow: initial;
transition: initial;
}
#report-dialog .report-dialog-input::-webkit-scrollbar {
display: none;
}
#report-dialog .report-dialog-input[aria-invalid='true'] {
border-color: var(--cookie-dialog-monster-color-error);
}
#report-dialog .report-dialog-input[aria-invalid='true'] + .report-dialog-input-error {
visibility: visible;
}
#report-dialog .report-dialog-input[aria-multiline='false'] {
-ms-overflow-style: none;
display: flex;
height: 40px;
overflow-x: auto;
scrollbar-width: none;
text-wrap: nowrap;
}
#report-dialog .report-dialog-input[aria-multiline='true'] {
-ms-overflow-style: none;
height: 120px;
overflow-y: auto;
scrollbar-width: none;
}
#report-dialog .report-dialog-input-error {
color: var(--cookie-dialog-monster-color-error);
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.2;
visibility: hidden;
}
#report-dialog .report-dialog-input-group {
display: grid;
gap: 4px;
}
#report-dialog .report-dialog-input-label {
color: var(--cookie-dialog-monster-color-secondary);
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.2;
}
#report-dialog .report-dialog-input-label-required {
color: var(--cookie-dialog-monster-color-error);
}
#report-dialog .report-dialog-issue-button,
#report-dialog .report-dialog-submit-button {
align-items: center;
background-color: var(--cookie-dialog-monster-color-secondary);
border: 1px solid var(--cookie-dialog-monster-color-secondary);
border-radius: 4px;
color: var(--cookie-dialog-monster-color-white);
cursor: pointer;
display: flex;
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 14px;
height: 42px;
justify-content: center;
line-height: 1.2;
outline: none;
padding: 8px 16px;
text-align: center;
width: 100%;
}
#report-dialog .report-dialog-issue-button:focus,
#report-dialog .report-dialog-issue-button:hover,
#report-dialog .report-dialog-submit-button:focus,
#report-dialog .report-dialog-submit-button:hover {
background-color: var(--cookie-dialog-monster-color-white);
color: var(--cookie-dialog-monster-color-secondary);
}
#report-dialog .report-dialog-issue-button:focus-visible,
#report-dialog .report-dialog-submit-button:focus-visible {
box-shadow: initial;
transition: initial;
}
#report-dialog .report-dialog-issue-button[aria-disabled='true'],
#report-dialog .report-dialog-submit-button[aria-disabled='true'] {
background-color: var(--cookie-dialog-monster-color-tertiary);
border: 1px solid var(--cookie-dialog-monster-color-tertiary);
color: var(--cookie-dialog-monster-color-white);
cursor: not-allowed;
}
#report-dialog .report-dialog-submit-extra-text {
font-family: inherit;
font-size: 14px;
line-height: 1.2;
margin: 0px;
text-align: justify;
}
#report-dialog .report-dialog-submit-text {
font-family: inherit;
font-size: 18px;
line-height: 1.2;
margin: 0px;
text-align: center;
}
#report-dialog .report-dialog-submit-view {
align-items: center;
display: flex;
flex-direction: column;
font-family: Inter, Arial, Helvetica, sans-serif;
gap: 24px;
justify-content: center;
margin-top: 16px;
}
#report-dialog .report-dialog-submit-view[hidden] {
display: none;
}