diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js index 9aa7320..6f7f700 100644 --- a/packages/browser-extension/src/scripts/dialog.js +++ b/packages/browser-extension/src/scripts/dialog.js @@ -12,6 +12,196 @@ const reasons = [ 'Popup showed up', ]; +/** + * @description Report dialog ID + */ + +const reportDialogId = 'report-dialog'; + +/** + * @description Report dialog outer HTML + */ + +const reportDialogHtml = ` + + + Cookie Dialog Monster + + + + + + + + + + + ${chrome.i18n.getMessage('reportDialog_bodyText')} + + + + + ${chrome.i18n.getMessage('reportDialog_cannotClickOption')} + + + ${chrome.i18n.getMessage('reportDialog_pageVisualGlitchOption')} + + + ${chrome.i18n.getMessage('reportDialog_blankPageOption')} + + + ${chrome.i18n.getMessage('reportDialog_laggyPageOption')} + + + ${chrome.i18n.getMessage('reportDialog_pageNotRespondingOption')} + + + ${chrome.i18n.getMessage('reportDialog_popupShowUpOption')} + + + + ${chrome.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')} + + + + + + +`; + +/** + * @description Dialog close button click handler + * @param {MouseEvent} event + */ + +const closeButtonClickHandler = (event) => { + const dialog = document.getElementById(reportDialogId); + + event.preventDefault(); + dialog?.remove(); +}; + +/** + * @description Hides report dialog + */ + +const hideReportDialog = () => { + document.getElementById(reportDialogId)?.remove(); +}; + +/** + * @description Dialog radio input click handler + * @param {MouseEvent} event + */ + +const radioClickHandler = (event) => { + const dialog = document.getElementById(reportDialogId); + const radios = dialog.getElementsByTagName('report-dialog-radio'); + const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0]; + + for (const radio of radios) { + radio.setAttribute('aria-checked', 'false'); + } + + event.preventDefault(); + event.currentTarget.setAttribute('aria-checked', 'true'); + submitButton.setAttribute('aria-disabled', 'false'); + submitButton.addEventListener('click', submitButtonClickHandler); +}; + +/** + * @description Shows report dialog + */ + +const showReportDialog = () => { + const parser = new DOMParser(); + const result = parser.parseFromString(reportDialogHtml, 'text/html'); + const dialog = result.body.firstElementChild; + const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0]; + const radios = dialog.getElementsByTagName('report-dialog-radio'); + + closeButton.addEventListener('click', closeButtonClickHandler); + + for (const radio of radios) { + radio.addEventListener('click', radioClickHandler); + } + + document.body.appendChild(dialog); + dialog.showModal(); +}; + +/** + * @description Dialog submit button click handler + * @param {MouseEvent} event + */ + +const submitButtonClickHandler = (event) => { + const dialog = document.getElementById(reportDialogId); + const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0]; + const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]'); + const reasonIndex = option?.dataset.value; + const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex]; + const submitView = dialog?.getElementsByTagName('report-dialog-submit-view')[0]; + const userAgent = window.navigator.userAgent; + + event.preventDefault(); + dispatch({ userAgent, reason, type: 'REPORT' }); + formView?.setAttribute('hidden', 'true'); + submitView?.removeAttribute('hidden'); +}; + /** * @description Listens to messages */ @@ -28,150 +218,3 @@ chrome.runtime.onMessage.addListener((message) => { break; } }); - -/** - * @description Report dialog ID - */ - -const REPORT_DIALOG_ID = 'report-dialog'; - -/** - * @description Report dialog outer HTML - */ - -const REPORT_DIALOG_HTML = ` - -
- Cookie Dialog Monster - -
-
-
-

- ${chrome.i18n.getMessage('reportDialog_bodyText')} -

-
- - - - - - - -
-
- -
-
-`; - -/** - * @description Hides report dialog - */ - -const hideReportDialog = () => { - document.getElementById(REPORT_DIALOG_ID)?.close(); -}; - -/** - * @description Shows report dialog - */ - -const showReportDialog = () => { - const element = document.getElementById(REPORT_DIALOG_ID); - - if (element) { - element.showModal(); - } else { - const parser = new DOMParser(); - const result = parser.parseFromString(REPORT_DIALOG_HTML, 'text/html'); - const dialog = result.body.firstElementChild; - const closeButton = dialog.getElementsByClassName('report-dialog-close-button')[0]; - const form = dialog.querySelector('#report-dialog-form'); - const formView = dialog.querySelector('[data-view="form"]'); - const labels = dialog.getElementsByTagName('label'); - const submitButton = dialog.getElementsByClassName('report-dialog-submit-button')[0]; - const submitView = dialog.querySelector('[data-view="submit"]'); - - closeButton.addEventListener('click', () => { - dialog.close(); - formView.removeAttribute('hidden'); - submitView.setAttribute('hidden', 'true'); - }); - - form.addEventListener('submit', (event) => { - const formData = new FormData(form); - const reasonIndex = Number(formData.get('report-dialog-option')); - const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex]; - const userAgent = window.navigator.userAgent; - - event.preventDefault(); - dispatch({ userAgent, reason, type: 'REPORT' }); - formView.setAttribute('hidden', 'true'); - submitView.removeAttribute('hidden'); - }); - - for (const label of labels) { - label.addEventListener('click', () => { - submitButton.removeAttribute('disabled'); - }); - } - - document.body.appendChild(dialog); - dialog.showModal(); - } -}; diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css index af28d00..8ec18c8 100644 --- a/packages/browser-extension/src/styles/dialog.css +++ b/packages/browser-extension/src/styles/dialog.css @@ -6,130 +6,192 @@ --cookie-dialog-monster-color-white: #ffffff; } -.report-dialog { - background-color: var(--cookie-dialog-monster-color-white) !important; - border: none !important; - border-radius: 4px !important; - box-sizing: border-box !important; - color: var(--cookie-dialog-monster-color-secondary) !important; - font-family: 'Lato', Arial, Helvetica, sans-serif !important; - font-size: 14px !important; - font-weight: normal !important; +#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-family: 'Lato', Arial, Helvetica, sans-serif; + font-size: 100%; margin: auto !important; - height: 380px !important; padding: 0px !important; - width: 320px !important; + width: 320px; } -.report-dialog::backdrop { - background-color: rgba(0, 0, 0, 0.75) !important; +#report-dialog::backdrop { + background-color: rgba(0, 0, 0, 0.5); } -.report-dialog * { - box-sizing: border-box !important; +#report-dialog * { + box-sizing: border-box; } -.report-dialog [data-view][hidden] { - display: none !important; +report-dialog-body { + display: block; + font-size: 14px; + line-height: 14px; + padding: 16px; } -.report-dialog-body { - height: 326px !important; - padding: 16px !important; +report-dialog-body-text { + display: block; + margin: 0px; + padding: 0px; } -.report-dialog-body-text { - margin: 0px !important; - padding: 0px !important; +report-dialog-close-button { + align-items: center; + background-color: transparent; + border: none; + border-radius: 4px; + color: inherit; + cursor: pointer; + display: inline-flex; + justify-content: center; + margin: 0px; + outline: none; + padding: 0px; + transition: 0.4s; } -.report-dialog-close-button { - align-items: center !important; - background-color: transparent !important; - border: none !important; - border-radius: 4px !important; - color: inherit !important; - cursor: pointer !important; - display: inline-flex !important; - justify-content: center !important; - margin: 0px !important; - outline: none !important; - padding: 0px !important; - transition: 0.4s !important; +report-dialog-close-button:focus, +report-dialog-close-button:hover { + background-color: var(--cookie-dialog-monster-color-white); + color: var(--cookie-dialog-monster-color-secondary); } -.report-dialog-close-button:focus, -.report-dialog-close-button:hover { - background-color: var(--cookie-dialog-monster-color-white) !important; - color: var(--cookie-dialog-monster-color-secondary) !important; +report-dialog-form-view[hidden] { + display: none; } -#report-dialog-form > label { - color: var(--cookie-dialog-monster-color-tertiary) !important; - cursor: pointer !important; - display: block !important; - margin-top: 16px !important; -} - -.report-dialog-header { - align-items: center !important; - background-color: var(--cookie-dialog-monster-color-secondary) !important; - color: var(--cookie-dialog-monster-color-white) !important; - display: flex !important; - font-size: 16px !important; +report-dialog-header { + align-items: center; + background-color: var(--cookie-dialog-monster-color-secondary); + color: var(--cookie-dialog-monster-color-white); + display: flex; + font-size: 16px; height: 54px; - justify-content: space-between !important; - padding: 16px !important; + justify-content: space-between; + line-height: 16px; + padding: 16px; } -.report-dialog-submit-button { - background-color: var(--cookie-dialog-monster-color-secondary) !important; - border: 1px solid var(--cookie-dialog-monster-color-secondary) !important; - border-radius: 4px !important; - color: var(--cookie-dialog-monster-color-white) !important; - cursor: pointer !important; - display: block !important; - font-family: inherit !important; - font-size: inherit !important; - margin-top: 32px !important; - outline: none !important; - padding: 8px 16px !important; - text-align: center !important; - transition: 0.4s !important; - width: 100% !important; +report-dialog-radio { + color: var(--cookie-dialog-monster-color-tertiary); + cursor: pointer; + display: block; + margin-top: 18px; + outline: none; + padding-left: 24px; + position: relative; } -.report-dialog-submit-button:focus, -.report-dialog-submit-button:hover { - background-color: var(--cookie-dialog-monster-color-white) !important; - color: var(--cookie-dialog-monster-color-secondary) !important; +report-dialog-radio[aria-checked='true']:after { + opacity: 1; + transform: scale(1, 1); } -.report-dialog-submit-button:disabled { - background-color: var(--cookie-dialog-monster-color-tertiary) !important; - border: 1px solid var(--cookie-dialog-monster-color-tertiary) !important; - color: var(--cookie-dialog-monster-color-white) !important; - cursor: not-allowed !important; +report-dialog-radio:after { + background-color: var(--cookie-dialog-monster-color-primary); + border-radius: 50%; + box-sizing: border-box; + content: ''; + display: block; + height: 8px; + left: 3px; + opacity: 0; + position: absolute; + top: 3px; + transform: scale(0, 0); + transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53); + width: 8px; } -.report-dialog-submit-extra-text { - font-size: 14px !important; - margin: 0px !important; - margin-top: 16px !important; - text-align: center !important; +report-dialog-radio:focus:not([aria-checked='true']):after, +report-dialog-radio:hover:not([aria-checked='true']):after { + background: var(--cookie-dialog-monster-color-tertiary); + opacity: 1; + transform: scale(1, 1); } -.report-dialog-submit-text { - font-size: 18px !important; - margin: 0px !important; - margin-top: 24px !important; - text-align: center !important; +report-dialog-radio:before { + background: var(--cookie-dialog-monster-color-white); + border: 1px solid var(--cookie-dialog-monster-color-tertiary); + border-radius: 50%; + box-sizing: border-box; + content: ''; + display: block; + height: 14px; + left: 0px; + margin-right: 5px; + position: absolute; + top: 0px; + width: 14px; } -.report-dialog-submit-view { - align-items: center !important; - display: flex !important; - flex-direction: column !important; - height: 100% !important; - justify-content: center !important; +report-dialog-radio-group { + display: flex; + flex-direction: column; +} + +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: inherit; + font-size: 14px; + height: 39px; + justify-content: center; + margin-top: 24px; + outline: none; + padding: 8px 16px; + text-align: center; + transition: 0.4s; + width: 100%; +} + +report-dialog-submit-button:focus, +report-dialog-submit-button:hover { + background-color: var(--cookie-dialog-monster-color-white); + color: var(--cookie-dialog-monster-color-secondary); +} + +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-submit-extra-text { + font-size: 14px; + line-height: 14px; + margin: 0px; + margin-top: 16px; + text-align: center; +} + +report-dialog-submit-text { + font-size: 18px; + line-height: 18px; + margin: 0px; + margin-top: 24px; + text-align: center; +} + +report-dialog-submit-view { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 269px; +} + +report-dialog-submit-view[hidden] { + display: none; }