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

fix: bug about i18n placeholders

Browse Source
This commit is contained in:
wanhose 2023-09-25 20:15:47 +02:00
parent 9d4d2f4f6f
commit 8d79e35d38
2 changed files with 36 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/browser-extension/src/scripts/options.js
View File

@ -16,7 +16,7 @@ let exclusionList = [];
* @returns {void} * @returns {void}
*/ */
const createList = () => { function createList() {
const emptyItemElement = document.getElementById('exclusion-list-item-empty'); const emptyItemElement = document.getElementById('exclusion-list-item-empty');
const exclusionListElement = document.getElementById('exclusion-list'); const exclusionListElement = document.getElementById('exclusion-list');
const exclusionListItemTemplateElement = document.getElementById('exclusion-list-item-template'); const exclusionListItemTemplateElement = document.getElementById('exclusion-list-item-template');
@ -44,7 +44,7 @@ const createList = () => {
emptyItemElement.innerText = "You don't have any exclusions yet"; emptyItemElement.innerText = "You don't have any exclusions yet";
emptyItemElement.style.removeProperty('display'); emptyItemElement.style.removeProperty('display');
} }
}; }
/** /**
* @async * @async
@ -52,7 +52,7 @@ const createList = () => {
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
const handleClearClick = async () => { async function handleClearClick() {
const filterInputElement = document.getElementById('filter-input'); const filterInputElement = document.getElementById('filter-input');
for (const exclusionValue of exclusionList) { for (const exclusionValue of exclusionList) {
@ -63,14 +63,14 @@ const handleClearClick = async () => {
exclusionList = []; exclusionList = [];
createList(); createList();
updateList(filterInputElement.value.trim()); updateList(filterInputElement.value.trim());
}; }
/** /**
* @async * @async
* @description Setup handlers and items * @description Setup handlers and items
*/ */
const handleContentLoaded = async () => { async function handleContentLoaded() {
exclusionList = await dispatch({ type: 'GET_EXCLUSION_LIST' }); exclusionList = await dispatch({ type: 'GET_EXCLUSION_LIST' });
createList(); createList();
@ -90,7 +90,7 @@ const handleContentLoaded = async () => {
importButtonElement.addEventListener('click', handleImportClick); importButtonElement.addEventListener('click', handleImportClick);
translate(); translate();
}; }
/** /**
* @async * @async
@ -99,7 +99,7 @@ const handleContentLoaded = async () => {
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
const handleDeleteClick = async (event) => { async function handleDeleteClick(event) {
const filterInputElement = document.getElementById('filter-input'); const filterInputElement = document.getElementById('filter-input');
const { value } = event.currentTarget.parentElement.dataset; const { value } = event.currentTarget.parentElement.dataset;
const state = { enabled: true }; const state = { enabled: true };
@ -108,14 +108,14 @@ const handleDeleteClick = async (event) => {
exclusionList = exclusionList.filter((exclusionValue) => exclusionValue !== value); exclusionList = exclusionList.filter((exclusionValue) => exclusionValue !== value);
itemElement.remove(); itemElement.remove();
updateList(filterInputElement.value.trim()); updateList(filterInputElement.value.trim());
}; }
/** /**
* @description Exports a file with the current exclusion list * @description Exports a file with the current exclusion list
* @returns {void} * @returns {void}
*/ */
const handleExportClick = () => { function handleExportClick() {
const anchor = document.createElement('a'); const anchor = document.createElement('a');
const text = exclusionList.join('\n'); const text = exclusionList.join('\n');
const blob = new Blob([text], { type: 'octet/stream' }); const blob = new Blob([text], { type: 'octet/stream' });
@ -125,7 +125,7 @@ const handleExportClick = () => {
anchor.download = `${new Date().valueOf()}.cdm`; anchor.download = `${new Date().valueOf()}.cdm`;
anchor.click(); anchor.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
}; }
/** /**
* @description Processes a file and sends the updates * @description Processes a file and sends the updates
@ -133,7 +133,7 @@ const handleExportClick = () => {
* @returns {void} * @returns {void}
*/ */
const handleFileChange = (event) => { function handleFileChange(event) {
const file = event.currentTarget.files[0]; const file = event.currentTarget.files[0];
const filterInputElement = document.getElementById('filter-input'); const filterInputElement = document.getElementById('filter-input');
const reader = new FileReader(); const reader = new FileReader();
@ -155,7 +155,7 @@ const handleFileChange = (event) => {
event.currentTarget.value = ''; event.currentTarget.value = '';
reader.readAsText(file); reader.readAsText(file);
}; }
/** /**
* @description Applies filter to the exclusion list when the user presses ENTER key * @description Applies filter to the exclusion list when the user presses ENTER key
@ -163,48 +163,44 @@ const handleFileChange = (event) => {
* @returns {void} * @returns {void}
*/ */
const handleFilterKeyDown = (event) => { function handleFilterKeyDown(event) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
const filterValue = event.currentTarget.value.trim(); const filterValue = event.currentTarget.value.trim();
updateList(filterValue); updateList(filterValue);
} }
}; }
/** /**
* @description Shallow clicks an hidden input to open the file explorer * @description Shallow clicks an hidden input to open the file explorer
* @returns {void} * @returns {void}
*/ */
const handleImportClick = () => { function handleImportClick() {
const fileInputElement = document.getElementById('file-input'); const fileInputElement = document.getElementById('file-input');
fileInputElement.click(); fileInputElement.click();
}; }
/** /**
* @description Applies translations to tags with i18n data attribute * @description Applies translations to tags with i18n data attribute
* @returns {void} * @returns {void}
*/ */
const translate = () => { function translate() {
const nodes = document.querySelectorAll('[data-i18n]'); const nodes = document.querySelectorAll('[data-i18n], [data-i18n-placeholder]');
for (let i = nodes.length; i--; ) { for (let i = nodes.length; i--; ) {
const node = nodes[i]; const node = nodes[i];
const { i18n, i18nAriaLabel, i18nPlaceholder } = node.dataset; const { i18n, i18nPlaceholder } = node.dataset;
if (i18n) { if (i18n) {
node.innerHTML = chrome.i18n.getMessage(i18n); node.innerHTML = chrome.i18n.getMessage(i18n);
} }
if (i18nAriaLabel) {
node.setAttribute('aria-label', i18nAriaLabel);
}
if (i18nPlaceholder) { if (i18nPlaceholder) {
node.setAttribute('placeholder', i18nPlaceholder); node.setAttribute('placeholder', chrome.i18n.getMessage(i18nPlaceholder));
}
} }
} }
};
/** /**
* @description Updates exclusion items in DOM * @description Updates exclusion items in DOM
@ -212,7 +208,7 @@ const translate = () => {
* @returns {void} * @returns {void}
*/ */
const updateList = (filterValue) => { function updateList(filterValue) {
const emptyItemElement = document.getElementById('exclusion-list-item-empty'); const emptyItemElement = document.getElementById('exclusion-list-item-empty');
const exclusionListElement = document.getElementById('exclusion-list'); const exclusionListElement = document.getElementById('exclusion-list');
const exclusionListElements = exclusionListElement.querySelectorAll(`[data-value]`); const exclusionListElements = exclusionListElement.querySelectorAll(`[data-value]`);
@ -238,7 +234,7 @@ const updateList = (filterValue) => {
emptyItemElement.innerText = "You don't have any exclusions yet"; emptyItemElement.innerText = "You don't have any exclusions yet";
emptyItemElement.style.removeProperty('display'); emptyItemElement.style.removeProperty('display');
} }
}; }
/** /**
* @description Listen to document ready * @description Listen to document ready

30
packages/browser-extension/src/scripts/popup.js
View File

@ -67,7 +67,7 @@ let state = { enabled: true };
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
const handleContentLoaded = async () => { async function handleContentLoaded() {
const tab = await dispatch({ type: 'GET_TAB' }); const tab = await dispatch({ type: 'GET_TAB' });
hostname = tab?.url hostname = tab?.url
@ -99,7 +99,7 @@ const handleContentLoaded = async () => {
settingsButtonElement.addEventListener('click', handleSettingsClick); settingsButtonElement.addEventListener('click', handleSettingsClick);
translate(); translate();
}; }
/** /**
* @async * @async
@ -108,13 +108,13 @@ const handleContentLoaded = async () => {
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
const handleLinkRedirect = async (event) => { async function handleLinkRedirect(event) {
const { href } = event.currentTarget.dataset; const { href } = event.currentTarget.dataset;
if (href) { if (href) {
await chrome.tabs.create({ url: href }); await chrome.tabs.create({ url: href });
} }
}; }
/** /**
* @async * @async
@ -123,49 +123,45 @@ const handleLinkRedirect = async (event) => {
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
const handlePowerToggle = async (event) => { async function handlePowerToggle(event) {
state = { enabled: !state.enabled }; state = { enabled: !state.enabled };
dispatch({ hostname, state, type: 'SET_HOSTNAME_STATE' }); dispatch({ hostname, state, type: 'SET_HOSTNAME_STATE' });
if (state.enabled) event.currentTarget.setAttribute('data-value', 'on'); if (state.enabled) event.currentTarget.setAttribute('data-value', 'on');
else event.currentTarget.setAttribute('data-value', 'off'); else event.currentTarget.setAttribute('data-value', 'off');
await chrome.tabs.reload({ bypassCache: true }); await chrome.tabs.reload({ bypassCache: true });
window.close(); window.close();
}; }
/** /**
* @description Opens options page * @description Opens options page
* @returns {void} * @returns {void}
*/ */
const handleSettingsClick = () => { function handleSettingsClick() {
chrome.runtime.openOptionsPage(); chrome.runtime.openOptionsPage();
}; }
/** /**
* @description Applies translations to tags with i18n data attribute * @description Applies translations to tags with i18n data attribute
* @returns {void} * @returns {void}
*/ */
const translate = () => { function translate() {
const nodes = document.querySelectorAll('[data-i18n]'); const nodes = document.querySelectorAll('[data-i18n], [data-i18n-placeholder]');
for (let i = nodes.length; i--; ) { for (let i = nodes.length; i--; ) {
const node = nodes[i]; const node = nodes[i];
const { i18n, i18nAriaLabel, i18nPlaceholder } = node.dataset; const { i18n, i18nPlaceholder } = node.dataset;
if (i18n) { if (i18n) {
node.innerHTML = chrome.i18n.getMessage(i18n); node.innerHTML = chrome.i18n.getMessage(i18n);
} }
if (i18nAriaLabel) {
node.setAttribute('aria-label', i18nAriaLabel);
}
if (i18nPlaceholder) { if (i18nPlaceholder) {
node.setAttribute('placeholder', i18nPlaceholder); node.setAttribute('placeholder', chrome.i18n.getMessage(i18nPlaceholder));
}
} }
} }
};
/** /**
* @description Listen to document ready * @description Listen to document ready