@project161/yang-furigana
Version:
An easy way to use <ruby> tags in Angular
54 lines • 6.35 kB
JavaScript
import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
const SPAN = 'span';
export class YangFuriganaDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
ngAfterViewInit() {
if (!this.isValidElement()) {
console.warn('Warning: yangFurigana works only on <span> elements without children.');
return;
}
const html = this.generateRubyTag();
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', html);
}
/**
* Check if the element passed as argument is a <span> element and has no child tags
* @param el the Element to evaluate
*/
isValidElement() {
return (this.el.nativeElement.nodeName.toLowerCase() === SPAN &&
this.el.nativeElement.childElementCount === 0);
}
/**
* Generate the template to be added to the HTML as result
*/
generateRubyTag() {
let styleCode = '';
if (!!this.yangFuriganaClass) {
const encapsulationAttribute = this.el.nativeElement.attributes[0];
styleCode = ` ${encapsulationAttribute.name} class="${this.yangFuriganaClass}"`;
}
if (!!this.yangFuriganaStyle) {
styleCode += ` style="${this.yangFuriganaStyle}"`;
}
const furiganaHTML = `<rp>(</rp><rt${styleCode}>${this.yangFurigana}</rt><rp>)</rp>`;
return `<ruby>${this.el.nativeElement.innerHTML}${furiganaHTML}</ruby>`;
}
}
YangFuriganaDirective.decorators = [
{ type: Directive, args: [{
selector: '[yangFurigana]'
},] }
];
YangFuriganaDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
YangFuriganaDirective.propDecorators = {
yangFurigana: [{ type: Input }],
yangFuriganaClass: [{ type: Input }],
yangFuriganaStyle: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieWFuZy1mdXJpZ2FuYS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiQzovY29kZS95YW5nL3Byb2plY3RzL3lhbmctZnVyaWdhbmEvc3JjLyIsInNvdXJjZXMiOlsibGliL3lhbmctZnVyaWdhbmEuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFVBQVUsRUFDVixTQUFTLEVBRVYsTUFBTSxlQUFlLENBQUM7QUFFdkIsTUFBTSxJQUFJLEdBQUcsTUFBTSxDQUFDO0FBS3BCLE1BQU0sT0FBTyxxQkFBcUI7SUFLaEMsWUFBb0IsRUFBYyxFQUFVLFFBQW1CO1FBQTNDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxhQUFRLEdBQVIsUUFBUSxDQUFXO0lBQUcsQ0FBQztJQUVuRSxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsRUFBRTtZQUMxQixPQUFPLENBQUMsSUFBSSxDQUNWLHVFQUF1RSxDQUN4RSxDQUFDO1lBQ0YsT0FBTztTQUNSO1FBRUQsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3BDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFdBQVcsRUFBRSxJQUFJLENBQUMsQ0FBQztJQUN0RSxDQUFDO0lBRUQ7OztPQUdHO0lBQ0ssY0FBYztRQUNwQixPQUFPLENBQ0wsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxLQUFLLElBQUk7WUFDckQsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsaUJBQWlCLEtBQUssQ0FBQyxDQUM5QyxDQUFDO0lBQ0osQ0FBQztJQUVEOztPQUVHO0lBQ0ssZUFBZTtRQUNyQixJQUFJLFNBQVMsR0FBRyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixFQUFFO1lBQzVCLE1BQU0sc0JBQXNCLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ25FLFNBQVMsR0FBRyxJQUFJLHNCQUFzQixDQUFDLElBQUksV0FBVyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQztTQUNqRjtRQUNELElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtZQUM1QixTQUFTLElBQUksV0FBVyxJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQztTQUNuRDtRQUVELE1BQU0sWUFBWSxHQUFHLGdCQUFnQixTQUFTLElBQUksSUFBSSxDQUFDLFlBQVksaUJBQWlCLENBQUM7UUFDckYsT0FBTyxTQUFTLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFNBQVMsR0FBRyxZQUFZLFNBQVMsQ0FBQztJQUMxRSxDQUFDOzs7WUFoREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxnQkFBZ0I7YUFDM0I7OztZQVRDLFVBQVU7WUFDVixTQUFTOzs7MkJBVVIsS0FBSztnQ0FDTCxLQUFLO2dDQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIERpcmVjdGl2ZSxcclxuICBJbnB1dCxcclxuICBFbGVtZW50UmVmLFxyXG4gIFJlbmRlcmVyMixcclxuICBBZnRlclZpZXdJbml0XHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5jb25zdCBTUEFOID0gJ3NwYW4nO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbeWFuZ0Z1cmlnYW5hXSdcclxufSlcclxuZXhwb3J0IGNsYXNzIFlhbmdGdXJpZ2FuYURpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xyXG4gIEBJbnB1dCgpIHlhbmdGdXJpZ2FuYTogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHlhbmdGdXJpZ2FuYUNsYXNzOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgeWFuZ0Z1cmlnYW5hU3R5bGU6IHN0cmluZztcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7fVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICBpZiAoIXRoaXMuaXNWYWxpZEVsZW1lbnQoKSkge1xyXG4gICAgICBjb25zb2xlLndhcm4oXHJcbiAgICAgICAgJ1dhcm5pbmc6IHlhbmdGdXJpZ2FuYSB3b3JrcyBvbmx5IG9uIDxzcGFuPiBlbGVtZW50cyB3aXRob3V0IGNoaWxkcmVuLidcclxuICAgICAgKTtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIGNvbnN0IGh0bWwgPSB0aGlzLmdlbmVyYXRlUnVieVRhZygpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdpbm5lckhUTUwnLCBodG1sKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENoZWNrIGlmIHRoZSBlbGVtZW50IHBhc3NlZCBhcyBhcmd1bWVudCBpcyBhIDxzcGFuPiBlbGVtZW50IGFuZCBoYXMgbm8gY2hpbGQgdGFnc1xyXG4gICAqIEBwYXJhbSBlbCB0aGUgRWxlbWVudCB0byBldmFsdWF0ZVxyXG4gICAqL1xyXG4gIHByaXZhdGUgaXNWYWxpZEVsZW1lbnQoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gKFxyXG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQubm9kZU5hbWUudG9Mb3dlckNhc2UoKSA9PT0gU1BBTiAmJlxyXG4gICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuY2hpbGRFbGVtZW50Q291bnQgPT09IDBcclxuICAgICk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBHZW5lcmF0ZSB0aGUgdGVtcGxhdGUgdG8gYmUgYWRkZWQgdG8gdGhlIEhUTUwgYXMgcmVzdWx0XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBnZW5lcmF0ZVJ1YnlUYWcoKTogc3RyaW5nIHtcclxuICAgIGxldCBzdHlsZUNvZGUgPSAnJztcclxuICAgIGlmICghIXRoaXMueWFuZ0Z1cmlnYW5hQ2xhc3MpIHtcclxuICAgICAgY29uc3QgZW5jYXBzdWxhdGlvbkF0dHJpYnV0ZSA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5hdHRyaWJ1dGVzWzBdO1xyXG4gICAgICBzdHlsZUNvZGUgPSBgICR7ZW5jYXBzdWxhdGlvbkF0dHJpYnV0ZS5uYW1lfSBjbGFzcz1cIiR7dGhpcy55YW5nRnVyaWdhbmFDbGFzc31cImA7XHJcbiAgICB9XHJcbiAgICBpZiAoISF0aGlzLnlhbmdGdXJpZ2FuYVN0eWxlKSB7XHJcbiAgICAgIHN0eWxlQ29kZSArPSBgIHN0eWxlPVwiJHt0aGlzLnlhbmdGdXJpZ2FuYVN0eWxlfVwiYDtcclxuICAgIH1cclxuXHJcbiAgICBjb25zdCBmdXJpZ2FuYUhUTUwgPSBgPHJwPig8L3JwPjxydCR7c3R5bGVDb2RlfT4ke3RoaXMueWFuZ0Z1cmlnYW5hfTwvcnQ+PHJwPik8L3JwPmA7XHJcbiAgICByZXR1cm4gYDxydWJ5PiR7dGhpcy5lbC5uYXRpdmVFbGVtZW50LmlubmVySFRNTH0ke2Z1cmlnYW5hSFRNTH08L3J1Ynk+YDtcclxuICB9XHJcbn1cclxuIl19