Jacek Pyziak
21f7e22fe2
- Introduced an accessibility button that toggles a panel with options. - Implemented high contrast mode toggle functionality. - Added CSS styles for accessibility button and panel. - Created JavaScript to manage accessibility features and local storage for user preferences. - Included necessary CSS and JS files in the theme's head template.
64 lines
2.6 KiB
JavaScript
64 lines
2.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
||
// Tworzenie przycisku
|
||
const accessBtn = document.createElement('div');
|
||
accessBtn.id = 'accessibility-button';
|
||
accessBtn.setAttribute('aria-label', 'Opcje dostępności');
|
||
accessBtn.innerHTML = `
|
||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||
<g id="SVGRepo_iconCarrier">
|
||
<circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5"></circle>
|
||
<path d="M14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7Z" stroke="#ffffff" stroke-width="1.5"></path>
|
||
<path d="M18 10C18 10 14.4627 11.5 12 11.5C9.53727 11.5 6 10 6 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
|
||
<path d="M12 12V13.4522M12 13.4522C12 14.0275 12.1654 14.5906 12.4765 15.0745L15 19M12 13.4522C12 14.0275 11.8346 14.5906 11.5235 15.0745L9 19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
|
||
</g>
|
||
</svg>
|
||
`;
|
||
document.body.appendChild(accessBtn);
|
||
|
||
|
||
// Tworzenie panelu
|
||
const accessPanel = document.createElement('div');
|
||
accessPanel.id = 'accessibility-panel';
|
||
accessPanel.innerHTML = `
|
||
<div class="panel-header">
|
||
<span>Opcje dostępności</span>
|
||
<button id="close-accessibility-panel">×</button>
|
||
</div>
|
||
<div class="panel-body">
|
||
<button id="toggle-contrast">Wysoki kontrast: OFF</button>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(accessPanel);
|
||
|
||
// Logika
|
||
const panel = document.getElementById('accessibility-panel');
|
||
const contrastBtn = document.getElementById('toggle-contrast');
|
||
|
||
accessBtn.addEventListener('click', () => {
|
||
panel.classList.toggle('open');
|
||
});
|
||
|
||
document.getElementById('close-accessibility-panel').addEventListener('click', () => {
|
||
panel.classList.remove('open');
|
||
});
|
||
|
||
function updateContrastButton() {
|
||
const isOn = document.body.classList.contains('high-contrast');
|
||
contrastBtn.textContent = isOn ? 'Wyłącz wysoki kontrast' : 'Włącz wysoki kontrast';
|
||
}
|
||
|
||
contrastBtn.addEventListener('click', () => {
|
||
document.body.classList.toggle('high-contrast');
|
||
const isHigh = document.body.classList.contains('high-contrast');
|
||
localStorage.setItem('highContrast', isHigh ? '1' : '0');
|
||
updateContrastButton();
|
||
});
|
||
|
||
if (localStorage.getItem('highContrast') === '1') {
|
||
document.body.classList.add('high-contrast');
|
||
}
|
||
|
||
updateContrastButton();
|
||
}); |