ngx-notion
Version:
An Notion page renderer for Angular
49 lines • 10.6 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
export class TableOfContentsComponent {
constructor() {
this.headings = [];
this.items = [];
}
ngOnInit() {
this.items = [];
this.headings.forEach((heading, index) => {
const prevElement = this.items[index - 1];
let level = 0;
if (prevElement) {
level = prevElement.level;
if (this.getHeaderLevel(prevElement.type) > this.getHeaderLevel(heading.type)) {
level = level > 0 ? level - 1 : level;
}
else if (this.getHeaderLevel(prevElement.type) < this.getHeaderLevel(heading.type)) {
level += 1;
}
}
this.items.push({
id: heading.id,
type: heading.type,
text: heading[heading.type].rich_text.reduce((text, item) => text + item.plain_text, ''),
level,
});
});
}
getHeaderLevel(type) {
const headings = {
heading_1: 0,
heading_2: 1,
heading_3: 2,
};
return headings[type] || 0;
}
}
TableOfContentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableOfContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TableOfContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: TableOfContentsComponent, selector: "table-of-contents", inputs: { headings: "headings" }, ngImport: i0, template: "<div class=\"table-of-contents\">\n <div [style.position]=\"'relative'\">\n <div\n *ngFor=\"let item of items\"\n class=\"content-item\"\n >\n <a class=\"content-link\" [routerLink]=\"[]\" [fragment]=\"item.id\">\n <div class=\"content-link-item\">\n <div\n class=\"content-text-wrapper\"\n [style.margin-left.px]=\"item.level * 24\"\n >\n <div class=\"content-text\">\n {{ item.text }}\n </div>\n </div>\n </div>\n </a>\n </div>\n </div>\n</div>\n", styles: [".table-of-contents{width:100%;margin-top:4px;margin-bottom:4px}.table-of-contents .content-item{color:#787774;fill:#787774}.table-of-contents .content-link{display:block;color:inherit;text-decoration:none}.table-of-contents .content-link-item{width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background 20ms ease-in 0s}.table-of-contents .content-link-item:hover{background:rgba(55,53,47,.08)}.table-of-contents .content-text{background-image:linear-gradient(to right,rgba(55,53,47,.16) 0%,rgba(55,53,47,.16) 100%);background-repeat:repeat-x;background-position:0 100%;background-size:100% 1px}.table-of-contents .content-text-wrapper{padding:6px 2px;font-size:14px;line-height:1.3;display:flex;align-items:center;margin-left:0}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableOfContentsComponent, decorators: [{
type: Component,
args: [{ selector: 'table-of-contents', template: "<div class=\"table-of-contents\">\n <div [style.position]=\"'relative'\">\n <div\n *ngFor=\"let item of items\"\n class=\"content-item\"\n >\n <a class=\"content-link\" [routerLink]=\"[]\" [fragment]=\"item.id\">\n <div class=\"content-link-item\">\n <div\n class=\"content-text-wrapper\"\n [style.margin-left.px]=\"item.level * 24\"\n >\n <div class=\"content-text\">\n {{ item.text }}\n </div>\n </div>\n </div>\n </a>\n </div>\n </div>\n</div>\n", styles: [".table-of-contents{width:100%;margin-top:4px;margin-bottom:4px}.table-of-contents .content-item{color:#787774;fill:#787774}.table-of-contents .content-link{display:block;color:inherit;text-decoration:none}.table-of-contents .content-link-item{width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background 20ms ease-in 0s}.table-of-contents .content-link-item:hover{background:rgba(55,53,47,.08)}.table-of-contents .content-text{background-image:linear-gradient(to right,rgba(55,53,47,.16) 0%,rgba(55,53,47,.16) 100%);background-repeat:repeat-x;background-position:0 100%;background-size:100% 1px}.table-of-contents .content-text-wrapper{padding:6px 2px;font-size:14px;line-height:1.3;display:flex;align-items:center;margin-left:0}\n"] }]
}], propDecorators: { headings: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtb2YtY29udGVudHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW5vdGlvbi9zcmMvbGliL2NvbXBvbmVudHMvYmxvY2tzL3RhYmxlLW9mLWNvbnRlbnRzL3RhYmxlLW9mLWNvbnRlbnRzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ub3Rpb24vc3JjL2xpYi9jb21wb25lbnRzL2Jsb2Nrcy90YWJsZS1vZi1jb250ZW50cy90YWJsZS1vZi1jb250ZW50cy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQU96RCxNQUFNLE9BQU8sd0JBQXdCO0lBTHJDO1FBUUksYUFBUSxHQUFVLEVBQUUsQ0FBQztRQUVyQixVQUFLLEdBQVUsRUFBRSxDQUFDO0tBcUNyQjtJQW5DRyxRQUFRO1FBQ0osSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFFaEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLEVBQUU7WUFDckMsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFFMUMsSUFBSSxLQUFLLEdBQUcsQ0FBQyxDQUFDO1lBRWQsSUFBSSxXQUFXLEVBQUU7Z0JBQ2IsS0FBSyxHQUFHLFdBQVcsQ0FBQyxLQUFLLENBQUM7Z0JBQzFCLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7b0JBQzNFLEtBQUssR0FBRyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7aUJBQ3pDO3FCQUFNLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7b0JBQ2xGLEtBQUssSUFBSSxDQUFDLENBQUM7aUJBQ2Q7YUFDSjtZQUVELElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDO2dCQUNaLEVBQUUsRUFBRSxPQUFPLENBQUMsRUFBRTtnQkFDZCxJQUFJLEVBQUUsT0FBTyxDQUFDLElBQUk7Z0JBQ2xCLElBQUksRUFBRSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFZLEVBQUUsSUFBUyxFQUFFLEVBQUUsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRSxFQUFFLENBQUM7Z0JBQ3JHLEtBQUs7YUFDUixDQUFDLENBQUM7UUFDUCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxjQUFjLENBQUMsSUFBWTtRQUN2QixNQUFNLFFBQVEsR0FBUTtZQUNsQixTQUFTLEVBQUUsQ0FBQztZQUNaLFNBQVMsRUFBRSxDQUFDO1lBQ1osU0FBUyxFQUFFLENBQUM7U0FDZixDQUFDO1FBRUYsT0FBTyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQy9CLENBQUM7O3FIQXpDUSx3QkFBd0I7eUdBQXhCLHdCQUF3QiwyRkNQckMsdXRCQXFCQTsyRkRkYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0ksbUJBQW1COzhCQU83QixRQUFRO3NCQURQLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0YWJsZS1vZi1jb250ZW50cycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RhYmxlLW9mLWNvbnRlbnRzLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1vZi1jb250ZW50cy5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUYWJsZU9mQ29udGVudHNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gICAgQElucHV0KClcbiAgICBoZWFkaW5nczogYW55W10gPSBbXTtcblxuICAgIGl0ZW1zOiBhbnlbXSA9IFtdO1xuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMuaXRlbXMgPSBbXTtcblxuICAgICAgICB0aGlzLmhlYWRpbmdzLmZvckVhY2goKGhlYWRpbmcsIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBwcmV2RWxlbWVudCA9IHRoaXMuaXRlbXNbaW5kZXggLSAxXTtcblxuICAgICAgICAgICAgbGV0IGxldmVsID0gMDtcblxuICAgICAgICAgICAgaWYgKHByZXZFbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgbGV2ZWwgPSBwcmV2RWxlbWVudC5sZXZlbDtcbiAgICAgICAgICAgICAgICBpZiAodGhpcy5nZXRIZWFkZXJMZXZlbChwcmV2RWxlbWVudC50eXBlKSA+IHRoaXMuZ2V0SGVhZGVyTGV2ZWwoaGVhZGluZy50eXBlKSkge1xuICAgICAgICAgICAgICAgICAgICBsZXZlbCA9IGxldmVsID4gMCA/IGxldmVsIC0gMSA6IGxldmVsO1xuICAgICAgICAgICAgICAgIH0gZWxzZSBpZiAodGhpcy5nZXRIZWFkZXJMZXZlbChwcmV2RWxlbWVudC50eXBlKSA8IHRoaXMuZ2V0SGVhZGVyTGV2ZWwoaGVhZGluZy50eXBlKSkge1xuICAgICAgICAgICAgICAgICAgICBsZXZlbCArPSAxO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgdGhpcy5pdGVtcy5wdXNoKHtcbiAgICAgICAgICAgICAgICBpZDogaGVhZGluZy5pZCxcbiAgICAgICAgICAgICAgICB0eXBlOiBoZWFkaW5nLnR5cGUsXG4gICAgICAgICAgICAgICAgdGV4dDogaGVhZGluZ1toZWFkaW5nLnR5cGVdLnJpY2hfdGV4dC5yZWR1Y2UoKHRleHQ6IHN0cmluZywgaXRlbTogYW55KSA9PiB0ZXh0ICsgaXRlbS5wbGFpbl90ZXh0LCAnJyksXG4gICAgICAgICAgICAgICAgbGV2ZWwsXG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgZ2V0SGVhZGVyTGV2ZWwodHlwZTogc3RyaW5nKTogbnVtYmVyIHtcbiAgICAgICAgY29uc3QgaGVhZGluZ3M6IGFueSA9IHtcbiAgICAgICAgICAgIGhlYWRpbmdfMTogMCxcbiAgICAgICAgICAgIGhlYWRpbmdfMjogMSxcbiAgICAgICAgICAgIGhlYWRpbmdfMzogMixcbiAgICAgICAgfTtcblxuICAgICAgICByZXR1cm4gaGVhZGluZ3NbdHlwZV0gfHwgMDtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidGFibGUtb2YtY29udGVudHNcIj5cbiAgICA8ZGl2IFtzdHlsZS5wb3NpdGlvbl09XCIncmVsYXRpdmUnXCI+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCJcbiAgICAgICAgICAgIGNsYXNzPVwiY29udGVudC1pdGVtXCJcbiAgICAgICAgPlxuICAgICAgICAgICAgPGEgY2xhc3M9XCJjb250ZW50LWxpbmtcIiBbcm91dGVyTGlua109XCJbXVwiIFtmcmFnbWVudF09XCJpdGVtLmlkXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRlbnQtbGluay1pdGVtXCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiY29udGVudC10ZXh0LXdyYXBwZXJcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW3N0eWxlLm1hcmdpbi1sZWZ0LnB4XT1cIml0ZW0ubGV2ZWwgKiAyNFwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjb250ZW50LXRleHRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7eyBpdGVtLnRleHQgfX1cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvYT5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==