@anjuna/docs
Version:
Anjuna Documentation Web Components
228 lines (215 loc) • 8.78 kB
JavaScript
import { h } from '../anjuna-docs.core.js';
class ApiName {
static get is() { return "ad-api-name"; }
static get style() { return "ad-api-name:after{color:var(--anj-secondary-dark);content:\":\";margin-right:.5rem}"; }
}
class ArgDef {
render() {
return [
h("ad-api-name", null, this.arg.name),
h("ad-type-def", null, this.arg.type)
];
}
static get is() { return "ad-arg-def"; }
static get properties() { return {
"arg": {
"type": "Any",
"attr": "arg"
}
}; }
static get style() { return "ad-arg-def:after{color:var(--anj-secondary-dark);content:\",\";margin-right:.5rem}ad-arg-def:last-child:after{content:none;margin-right:0}"; }
}
class Decorator {
static get is() { return "ad-decorator"; }
static get style() { return "ad-decorator{color:var(--anj-secondary-dark)}.api.ng ad-method-def ad-decorator,.api.ng ad-prop-def ad-decorator{display:none}"; }
}
class EventDef {
render() {
return [
h("h4", null,
h("ad-decorator", null, "@Event"),
"\u00A0",
h("ad-api-name", null, this.event.event)),
h("p", null, this.event.docs)
];
}
static get is() { return "ad-event-def"; }
static get properties() { return {
"event": {
"type": "Any",
"attr": "event"
}
}; }
static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
}
class InputDef {
render() {
return [
h("h4", null,
h("ad-decorator", null, "@Input\u00A0"),
h("ad-api-name", null, this.input.name),
h("ad-type-def", null, this.input.type)),
h("p", null, this.input.docs)
];
}
static get is() { return "ad-input-def"; }
static get properties() { return {
"input": {
"type": "Any",
"attr": "input"
}
}; }
static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
}
class MethodDef {
nameless(name) {
return `(${name.split('(')[1]}`;
}
render() {
return [
h("h4", null,
h("ad-decorator", null, "@Method\u00A0"),
h("ad-api-name", null, this.method.name),
h("ad-type-def", null, this.nameless(this.method.signature))),
h("p", null, this.method.docs)
];
}
static get is() { return "ad-method-def"; }
static get properties() { return {
"method": {
"type": "Any",
"attr": "method"
}
}; }
static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
}
class OutputDef {
render() {
return [
h("h4", null,
h("ad-decorator", null, "@Output\u00A0"),
h("ad-api-name", null, this.output.name),
h("ad-type-def", null, this.output.type)),
h("p", null, this.output.docs)
];
}
static get is() { return "ad-output-def"; }
static get properties() { return {
"output": {
"type": "Any",
"attr": "output"
}
}; }
static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
}
class PropDef {
render() {
return [
h("h4", null,
h("ad-decorator", null, "@Prop\u00A0"),
h("ad-api-name", null, this.prop.name),
h("ad-type-def", null, this.prop.type)),
h("p", null, this.prop.docs)
];
}
static get is() { return "ad-prop-def"; }
static get properties() { return {
"prop": {
"type": "Any",
"attr": "prop"
}
}; }
static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
}
class RealTime {
static get is() { return "ad-real-time"; }
static get style() { return "ad-real-time{border:1px dashed var(--anj-border);border-radius:.25rem;display:block;margin-top:1.5rem;overflow-x:auto;padding:1rem;width:100%}"; }
}
class Toc {
constructor() {
this.activeId = '#overview';
this.docs = {};
}
onDemosChange() {
this.sectionIds = ['#overview'].concat(this.demos.map(d => `#${d.usage}`)).concat('#api');
}
componentDidLoad() {
this.navigate = debounce(this.navigate.bind(this), 50);
this.onScroll = debounce(this.onScroll.bind(this), 10);
this.onDemosChange();
if (window.location.hash) {
this.navigate();
}
}
onScroll() {
const els = this.sectionIds.map(id => document.querySelector(id));
let closest = els[0];
els.slice(1).forEach(el => {
if (el && Math.abs(window.scrollY - el.offsetTop) < Math.abs(window.scrollY - closest.offsetTop)) {
closest = el;
}
});
this.activeId = `#${closest.getAttribute('id')}`;
}
parseTitle(id) {
const usage = id.replace('#', '');
const doc = this.docs[usage];
return doc ? doc.split(/##(.*?)\n/).find(p => p !== '').trim() : usage;
}
anchorClass(usage) {
return usage === this.activeId ? 'anj-active' : '';
}
navigate() {
return new Promise(resolve => {
window.setTimeout(() => {
this.activeId = window.location.hash;
const el = document.querySelector(this.activeId);
window.scrollTo(0, el.offsetTop);
resolve();
}, 500);
});
}
render() {
if (!this.sectionIds) {
return;
}
const path = window.location.pathname;
return (h("div", { class: "anj-toc" }, this.sectionIds.map(id => h("a", { href: `${path}${id}`, onClick: () => this.activeId = id, class: this.anchorClass(id) }, this.parseTitle(id)))));
}
static get is() { return "ad-toc"; }
static get properties() { return {
"activeId": {
"state": true
},
"demos": {
"type": "Any",
"attr": "demos",
"watchCallbacks": ["onDemosChange"]
},
"docs": {
"type": "Any",
"attr": "docs"
},
"sectionIds": {
"state": true
}
}; }
static get listeners() { return [{
"name": "window:scroll",
"method": "onScroll",
"passive": true
}]; }
static get style() { return "ad-toc{display:block;position:relative}ad-toc .anj-toc{padding:1rem 0;position:fixed;top:3rem}ad-toc a{display:block;font-size:.75rem;margin-bottom:.5rem;text-transform:capitalize;-webkit-transition:color .2s ease;transition:color .2s ease}ad-toc a.anj-active,ad-toc a.anj-active:hover{color:var(--anj-primary);text-decoration:none}"; }
}
const debounce = (func, wait = 0) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(func, wait, ...args);
};
};
class TypeDef {
static get is() { return "ad-type-def"; }
static get style() { return "ad-type-def{color:var(--anj-neutral);font-size:.75rem}"; }
}
export { ApiName as AdApiName, ArgDef as AdArgDef, Decorator as AdDecorator, EventDef as AdEventDef, InputDef as AdInputDef, MethodDef as AdMethodDef, OutputDef as AdOutputDef, PropDef as AdPropDef, RealTime as AdRealTime, Toc as AdToc, TypeDef as AdTypeDef };