@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
96 lines (95 loc) • 4.1 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { getColorContrastAnalysis, getDocument, getExperimentalMode, getWindow, isDevMode, koliBriA11yColorContrast, koliBriQuerySelector, koliBriQuerySelectorAll, koliBriQuerySelectorColors, KoliBriUtils, Log, parseJson, stringifyJson, } from "../schema";
import { initKoliBri, renderDevAdvice } from "../utils/dev.utils";
const getKoliBri = () => {
let kolibri = getWindow().KoliBri;
if (kolibri === undefined) {
kolibri = {};
Object.defineProperty(getWindow(), 'KoliBri', {
value: kolibri,
writable: false,
});
}
return kolibri;
};
function prototypeKoliBri(name, cb) {
try {
Object.defineProperty(getKoliBri(), name, {
get: function () {
return cb;
},
});
}
catch (_a) {
Log.debug(`KoliBri property ${name} is already bind.`);
}
}
const metaModeLog = (name, active) => Log.debug(`${name} ${active ? '' : 'not '}activated`);
export const initialize = () => {
initKoliBri();
if (isDevMode()) {
renderDevAdvice();
prototypeKoliBri('a11yColorContrast', koliBriA11yColorContrast);
prototypeKoliBri('querySelector', koliBriQuerySelector);
prototypeKoliBri('querySelectorAll', koliBriQuerySelectorAll);
prototypeKoliBri('querySelectorColors', koliBriQuerySelectorColors);
prototypeKoliBri('utils', function () {
return KoliBriUtils;
});
prototypeKoliBri('parseJson', parseJson);
prototypeKoliBri('stringifyJson', stringifyJson);
metaModeLog('Development mode', isDevMode());
metaModeLog('Experimental mode', getExperimentalMode());
metaModeLog('Color contrast analysis', getColorContrastAnalysis());
setTimeout(() => {
try {
const document = getDocument();
const body = document === null || document === void 0 ? void 0 : document.body;
if (document && body && typeof document.createElement === 'function') {
const div = document.createElement('svg');
div.setAttribute('aria-label', 'KoliBri-DevTools');
div.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
div.setAttribute('role', 'toolbar');
div.setAttribute('style', 'position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;');
div.innerHTML = `<svg
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
viewBox="0 0 600 600"
>
<path d="M353 322L213 304V434L353 322Z" fill="#047" />
<path d="M209 564V304L149 434L209 564Z" fill="#047" />
<path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />
<path d="M353 318L35 36L213 300L353 318Z" fill="#047" />
<path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />
<path d="M391 286L565 272L421 252L391 286Z" fill="#047" />
</svg>`;
body.appendChild(div);
}
}
catch (error) {
Log.debug(['Could not initialize DevTools UI (likely in SSR/test environment):', error]);
}
}, 100);
if (getColorContrastAnalysis()) {
const timeout = setTimeout(() => {
clearTimeout(timeout);
try {
const document = getDocument();
const body = document === null || document === void 0 ? void 0 : document.body;
if (document && body && typeof document.createElement === 'function') {
setInterval(() => {
KoliBriUtils.queryHtmlElementColors(document.createElement('div'), koliBriA11yColorContrast(body), false, false);
}, 10000);
}
}
catch (error) {
Log.debug(['Could not initialize color contrast analysis:', error]);
}
}, 2500);
}
}
};
//# sourceMappingURL=devtools.js.map