riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

make the 🔗 button copy branch links to clipboard

Browse source 
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:
りき萌 2025-01-11 00:15:29 +01:00
parent c537eb844f
commit 74baa61122
8 changed files with 208 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

33
static/js/tree.js
View file

@ -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();