Published
Edited
Jan 18, 2021
class WikiLink extends HTMLElement {
constructor() {
super();
this.click = this.click.bind(this);
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `<a href="#" target="_blank" onclick="return false"><slot></slot></a>`;
this.setAttribute("site", "wiki.dbbs.co");
}
static get observedAttributes() { return ["site"] }
get site() { return this.getAttribute('site'); }
set site(value = "") { this.setAttribute("site", value); }
get title() { return this.innerHTML; }
set title(value) {
this.innerHTML = value;
this.update();
}
get inFrame() { return window.parent !== window.self; }
get slug() { return this.innerHTML.replace(/\s/g, "-").replace(/[^A-Za-z0-9-]/g, "").toLowerCase(); }
get href() { return `//${this.site}/${this.slug}.html`; }
get anchor() { return this.shadowRoot.querySelector("a"); }
update() { this.anchor.setAttribute("href", this.href); }
attributeChangedCallback(name, oldValue, newValue) {
if (name == "site") this.update();
}
connectedCallback() {
this.update();
this.anchor.addEventListener("click", this.click);
}
disconnectedCallback() {
this.anchor.removeEventListener("click", this.click);
}
click(event) {
if (false /*this.inFrame*/) {
const pageKey = (window.frameElement || {}).name;
const postMessage = {
action: "doInternalLink",
title: this.title,
pageKey,
keepLineup: event.shiftKey
};
console.log({ postMessage });
window.parent.postMessage(postMessage, "*");
} else {
window.open(this.href)
}
return false;
}
}
defineCustomElement = {
if (!window.customElements.get("wiki-link")) {
window.customElements.define("wiki-link", WikiLink);
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
