angular-vlibras
Version:
A library for integrating VLibras into Angular applications.
119 lines (112 loc) • 5.27 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component } from '@angular/core';
class AngularVlibrasService {
constructor() { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularVlibrasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularVlibrasService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularVlibrasService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
const mapPosition = {
'left': 'L',
'right': 'R',
'bottom': 'B',
'top': 'T',
'bottom-left': 'BL',
'top-left': 'TL',
'bottom-right': 'BR',
'top-right': 'TR',
};
class AngularVlibras {
src = 'https://vlibras.gov.br/app/vlibras-plugin.js';
urlWidget = 'https://vlibras.gov.br/app';
position;
avatar = 'guga';
opacity = 1;
script = null;
ngOnInit() {
this.init();
}
init() {
this.script = document.createElement('script');
this.script.addEventListener('load', () => this.createWidget());
this.script.src = this.src;
document.body.appendChild(this.script);
}
createWidget() {
this.script?.removeEventListener('load', () => this.createWidget());
new window.VLibras.Widget({
position: mapPosition[this.position ?? 'right'],
rootPath: this.urlWidget,
avatar: this.avatar,
opacity: this.opacity
});
this.observeDOMChanges();
}
generateUniqueKeyframeName(baseName) {
return `${baseName}-${Math.random().toString(36).substring(2, 15)}`;
}
updateKeyframeNameInStyles(oldName, newName) {
document.querySelectorAll('style').forEach((styleTag) => {
const containsOldName = new RegExp(`@keyframes\\s+${oldName}|\\b${oldName}\\b`, 'g').test(styleTag.textContent || '');
if (this.containsVpOrVw(styleTag.textContent || '') && containsOldName) {
const updatedContent = (styleTag.textContent || '')
.replace(new RegExp(`@keyframes\\s+${oldName}`, 'g'), `@keyframes ${newName}`)
.replace(new RegExp('(animation:\\s*[^;}]*?)(;|})', 'g'), (match) => {
return match.replace(new RegExp(`\\b${oldName}\\b`, 'g'), newName);
});
styleTag.textContent = updatedContent;
}
});
}
containsVpOrVw(selectorText) {
return /\[vp\]|\[vw\]|\.vp|\.vw|\.vpw/.test(selectorText);
}
validationStyleSheet(node) {
if (node.nodeName === 'STYLE' || (node.nodeName === 'LINK' && node.rel === 'stylesheet')) {
const styleSheet = node.sheet;
return styleSheet !== null && styleSheet.cssRules !== null;
}
return false;
}
observeDOMChanges() {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (this.validationStyleSheet(node)) {
Array.from(node.sheet.cssRules).forEach((rule) => {
if (rule.type === CSSRule.KEYFRAMES_RULE) {
this.updateKeyframeNameInStyles(rule.name, this.generateUniqueKeyframeName(rule.name));
}
});
}
});
});
});
observer.observe(document.head, { childList: true, subtree: true });
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularVlibras, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: AngularVlibras, isStandalone: true, selector: "angular-vlibras", inputs: { position: "position", avatar: "avatar", opacity: "opacity" }, ngImport: i0, template: "<div vw class=\"enabled\">\r\n <div vw-access-button class=\"active\"></div>\r\n <div vw-plugin-wrapper>\r\n <div class=\"vw-plugin-top-wrapper\"></div>\r\n </div>\r\n</div>\r\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AngularVlibras, decorators: [{
type: Component,
args: [{ selector: 'angular-vlibras', standalone: true, template: "<div vw class=\"enabled\">\r\n <div vw-access-button class=\"active\"></div>\r\n <div vw-plugin-wrapper>\r\n <div class=\"vw-plugin-top-wrapper\"></div>\r\n </div>\r\n</div>\r\n" }]
}], propDecorators: { position: [{
type: Input
}], avatar: [{
type: Input
}], opacity: [{
type: Input
}] } });
/*
* Public API Surface of angular-vlibras
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularVlibras, AngularVlibrasService };
//# sourceMappingURL=angular-vlibras.mjs.map