make the 🔗 button copy branch links to clipboard
to accomplish this, I generalised emoji tooltips to a shared Tooltip class. in the long run I'd like to transform all existing `title=""` tooltips into these for stylistic consistency with the rest of the website, but this is good enough for now. I also ended up cleaning up some old code from before the /b rework.
This commit is contained in:
parent
c537eb844f
commit
74baa61122
8 changed files with 208 additions and 138 deletions
|
|
@ -1,103 +1,21 @@
|
|||
// Emoji zoom-in functionality.
|
||||
|
||||
import { addSpell } from "treehouse/spells.js";
|
||||
import { attachTooltip, Tooltip } from "treehouse/overlay.js";
|
||||
|
||||
class EmojiTooltip extends HTMLElement {
|
||||
constructor(emoji, element, { onClosed }) {
|
||||
super();
|
||||
function createEmojiTooltip(emoji, element) {
|
||||
let tooltip = new Tooltip(element, "bottom");
|
||||
tooltip.classList.add("tooltip-emoji");
|
||||
|
||||
this.emoji = emoji;
|
||||
this.emojiElement = element;
|
||||
this.onClosed = onClosed;
|
||||
}
|
||||
let img = tooltip.appendChild(new Image());
|
||||
img.src = element.src;
|
||||
|
||||
connectedCallback() {
|
||||
this.role = "tooltip";
|
||||
let description = tooltip.appendChild(document.createElement("p"));
|
||||
description.textContent = emoji.emojiName;
|
||||
|
||||
this.image = new Image();
|
||||
this.image.src = this.emojiElement.src;
|
||||
|
||||
this.description = document.createElement("p");
|
||||
this.description.textContent = `${this.emoji.emojiName}`;
|
||||
|
||||
let emojiBoundingBox = this.emojiElement.getBoundingClientRect();
|
||||
this.style.left = `${emojiBoundingBox.left + emojiBoundingBox.width / 2}px`;
|
||||
this.style.top = `calc(${emojiBoundingBox.top}px + 1.5em)`;
|
||||
|
||||
this.fullyOpaque = false;
|
||||
this.addEventListener("transitionend", event => {
|
||||
if (event.propertyName == "opacity") {
|
||||
this.fullyOpaque = !this.fullyOpaque;
|
||||
if (!this.fullyOpaque) {
|
||||
this.onClosed();
|
||||
}
|
||||
}
|
||||
});
|
||||
// Timeout is zero because we just want to execute this later, to be definitely sure
|
||||
// the transition plays out.
|
||||
setTimeout(() => this.classList.add("transitioned-in"), 0);
|
||||
|
||||
this.appendChild(this.image);
|
||||
this.appendChild(this.description);
|
||||
}
|
||||
|
||||
close() {
|
||||
this.classList.remove("transitioned-in");
|
||||
}
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
customElements.define("th-emoji-tooltip", EmojiTooltip);
|
||||
|
||||
let emojiTooltips = null;
|
||||
|
||||
class EmojiTooltips extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.tooltips = new Set();
|
||||
this.abortController = new AbortController();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
emojiTooltips = this;
|
||||
|
||||
addEventListener(
|
||||
"wheel",
|
||||
event => emojiTooltips.closeTooltips(event),
|
||||
{ signal: this.abortController.signal },
|
||||
);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.abortController.abort();
|
||||
}
|
||||
|
||||
openTooltip(emoji, element) {
|
||||
let tooltip = new EmojiTooltip(emoji, element, {
|
||||
onClosed: () => {
|
||||
this.removeChild(tooltip);
|
||||
this.tooltips.delete(tooltip);
|
||||
},
|
||||
});
|
||||
|
||||
this.appendChild(tooltip);
|
||||
this.tooltips.add(tooltip);
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
closeTooltip(tooltip) {
|
||||
tooltip.close();
|
||||
}
|
||||
|
||||
closeTooltips() {
|
||||
for (let tooltip of this.tooltips) {
|
||||
tooltip.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("th-emoji-tooltips", EmojiTooltips);
|
||||
|
||||
class Emoji {
|
||||
constructor(element) {
|
||||
this.emojiName = element.title;
|
||||
|
|
@ -106,18 +24,7 @@ class Emoji {
|
|||
// so remove the title.
|
||||
element.title = "";
|
||||
|
||||
element.addEventListener("mouseenter", () => this.openTooltip(element));
|
||||
element.addEventListener("mouseleave", () => this.closeTooltip());
|
||||
element.addEventListener("scroll", () => this.closeTooltip());
|
||||
}
|
||||
|
||||
openTooltip(element) {
|
||||
this.tooltip = emojiTooltips.openTooltip(this, element);
|
||||
}
|
||||
|
||||
closeTooltip() {
|
||||
emojiTooltips.closeTooltip(this.tooltip);
|
||||
this.tooltip = null;
|
||||
attachTooltip(element, () => createEmojiTooltip(this, element)).showOnHover();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
116
static/js/overlay.js
Normal file
116
static/js/overlay.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
export class Overlay extends HTMLElement {}
|
||||
|
||||
/** @type Overlays */
|
||||
export let overlays = null;
|
||||
|
||||
export class Overlays extends HTMLElement {
|
||||
overlays = new Set();
|
||||
|
||||
connectedCallback() {
|
||||
overlays = this;
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
overlays = null;
|
||||
}
|
||||
|
||||
open(overlay) {
|
||||
this.appendChild(overlay);
|
||||
this.overlays.add(overlay);
|
||||
return overlay;
|
||||
}
|
||||
|
||||
close(overlay) {
|
||||
this.removeChild(overlay);
|
||||
this.overlays.delete(overlay);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("th-overlays", Overlays);
|
||||
|
||||
export class Tooltip extends Overlay {
|
||||
constructor(element, side) {
|
||||
super();
|
||||
|
||||
this.element = element;
|
||||
this.side = side;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.role = "tooltip";
|
||||
this.setAttribute("th-side", this.side);
|
||||
|
||||
let bb = this.element.getBoundingClientRect();
|
||||
switch (this.side) {
|
||||
// NOTE: The elements are positioned directly at (width / 2) or (height / 2), because
|
||||
// they are transformed to the centre over on the CSS side.
|
||||
|
||||
case "bottom":
|
||||
this.style.left = `${bb.left + bb.width / 2}px`;
|
||||
this.style.top = `${bb.bottom}px`;
|
||||
break;
|
||||
|
||||
case "left":
|
||||
this.style.left = `${bb.left}px`;
|
||||
this.style.top = `${bb.top + bb.height / 2}px`;
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error(`th-tooltip: unknown attachment side ${this.side}`);
|
||||
break;
|
||||
}
|
||||
|
||||
this.addEventListener("transitionend", (event) => {
|
||||
if (event.propertyName == "opacity") {
|
||||
let style = getComputedStyle(this);
|
||||
if (style.opacity < 0.01) {
|
||||
this.dispatchEvent(new Event(".close"));
|
||||
}
|
||||
}
|
||||
});
|
||||
// Timeout is zero because we just want to execute this later, to be definitely sure
|
||||
// the transition plays out.
|
||||
setTimeout(() => this.classList.add("transitioned-in"), 0);
|
||||
}
|
||||
|
||||
close() {
|
||||
this.classList.remove("transitioned-in");
|
||||
|
||||
// NOTE: In case there is no transition, we may need to trigger the close event immediately.
|
||||
let style = getComputedStyle(this);
|
||||
if (style.opacity < 0.01) {
|
||||
this.dispatchEvent(new Event(".close"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("th-tooltip", Tooltip);
|
||||
|
||||
export function attachTooltip(element, makeTooltip) {
|
||||
let show = () => {
|
||||
let tooltip = overlays.open(makeTooltip(element));
|
||||
let abortController = new AbortController();
|
||||
|
||||
tooltip.addEventListener(".close", () => {
|
||||
overlays.close(tooltip);
|
||||
abortController.abort();
|
||||
console.log("closing tooltip");
|
||||
});
|
||||
|
||||
window.addEventListener("wheel", () => tooltip.close(), {
|
||||
signal: abortController.signal,
|
||||
passive: true,
|
||||
});
|
||||
element.addEventListener("mouseleave", () => tooltip.close(), {
|
||||
signal: abortController.signal,
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
show,
|
||||
showOnHover() {
|
||||
element.addEventListener("mouseenter", show);
|
||||
return this;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { addSpell } from "treehouse/spells.js";
|
||||
import * as ulid from "treehouse/ulid.js";
|
||||
import { attachTooltip, Tooltip } from "treehouse/overlay.js";
|
||||
|
||||
/* Branch persistence */
|
||||
|
||||
|
|
@ -38,7 +39,7 @@ export class Branch {
|
|||
this.branchContent = this.contentContainer.childNodes[1];
|
||||
this.buttonBar = this.contentContainer.childNodes[2];
|
||||
|
||||
let doPersist = !element.hasAttribute("data-th-do-not-persist");
|
||||
let doPersist = !element.hasAttribute("th-do-not-persist");
|
||||
let isOpen = branchIsOpen(element.id);
|
||||
if (doPersist && isOpen !== undefined) {
|
||||
this.details.open = isOpen;
|
||||
|
|
@ -52,6 +53,22 @@ export class Branch {
|
|||
this.namedID = element.id.replace(/^b-/, "");
|
||||
Branch.branchesByNamedID.set(this.namedID, element);
|
||||
|
||||
let permalinkButton = this.buttonBar.querySelector("a[th-p]");
|
||||
if (permalinkButton != null) {
|
||||
permalinkButton.title = "copy permalink";
|
||||
permalinkButton.addEventListener("click", (event) => {
|
||||
event.preventDefault(); // do not navigate the link
|
||||
navigator.clipboard.writeText(
|
||||
new URL(permalinkButton.href, window.location).toString(),
|
||||
);
|
||||
attachTooltip(permalinkButton, () => {
|
||||
let tooltip = new Tooltip(permalinkButton, "left");
|
||||
tooltip.append("permalink copied to clipboard!");
|
||||
return tooltip;
|
||||
}).show();
|
||||
});
|
||||
}
|
||||
|
||||
if (ulid.isCanonicalUlid(this.namedID)) {
|
||||
let timestamp = ulid.getTimestamp(this.namedID);
|
||||
let date = document.createElement("span");
|
||||
|
|
@ -76,7 +93,7 @@ class LinkedBranch extends Branch {
|
|||
constructor(element) {
|
||||
super(element);
|
||||
|
||||
this.linkedTree = element.getAttribute("data-th-link");
|
||||
this.linkedTree = element.getAttribute("th-link");
|
||||
LinkedBranch.byLink.set(this.linkedTree, this);
|
||||
|
||||
this.loadingText = document.createElement("p");
|
||||
|
|
@ -135,7 +152,7 @@ class LinkedBranch extends Branch {
|
|||
}
|
||||
}
|
||||
|
||||
loadTree() {
|
||||
loadTree(_why) {
|
||||
if (!this.loading) {
|
||||
this.loading = this.loadTreePromise();
|
||||
}
|
||||
|
|
@ -157,16 +174,16 @@ function expandDetailsRecursively(element) {
|
|||
}
|
||||
|
||||
function getCurrentlyHighlightedBranch() {
|
||||
if (window.location.pathname == "/b" && window.location.search.length > 0) {
|
||||
let shortID = window.location.search.substring(1);
|
||||
return Branch.branchesByNamedID.get(shortID).id;
|
||||
} else {
|
||||
if (window.location.hash.length > 0) {
|
||||
return window.location.hash.substring(1);
|
||||
}
|
||||
}
|
||||
|
||||
async function highlightCurrentBranch() {
|
||||
let branch = document.getElementById(getCurrentlyHighlightedBranch());
|
||||
let branchId = getCurrentlyHighlightedBranch();
|
||||
if (branchId == null) return;
|
||||
|
||||
let branch = document.getElementById(branchId);
|
||||
if (branch != null) {
|
||||
branch.scrollIntoView();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue