Various JavaScript hacks

Toggle UI chrome (for presentations)

Use d key to turn on and off the UI chrome.

let toggleChrome = () => {
	const display = document.querySelector("header").style.display === "none" ? "" : "none";
	document.querySelector("header").style.display = display;
	document.querySelector("footer").style.display = display;
	document.querySelector(".footer-wrap").style.display = display;
}

document.body.onkeypress = (e) => { if (e.key === "d") toggleChrome() }

Scroll via keyboard

Press j and k to scroll right and left by 996 pixels (which corresponds to one of the built-in Kinopio backgrounds. Might be useful for slides. Per @Charles (Discord)

 let shift = 996; document.body.onkeypress = (e) => e.key === "j" ? window.scrollBy(shift, 0) : e.key === "k" ? window.scrollBy(-shift, 0) : null

You can make the scrolling smooth:

 let shift = 996; document.body.onkeypress = (e) => e.key === "j" ? window.scrollBy({ left: shift, behavior: "smooth" }) : e.key === "k" ? window.scrollBy({ left: -shift, behavior: "smooth" }) : null

Resize all selected cards

let width = prompt('Resize all selected cards to how many pixels?', '235');
let store = document.querySelector("#app").__vue_app__.config.globalProperties.$store;
store.state.multipleCardsSelectedIds.forEach(id => store.dispatch('currentCards/update', {id: id, resizeWidth:Number(width)}));

Count cards

document.querySelector("#app").__vue_app__.config.globalProperties.$store.state.currentSpace.cards.length

Replace all card names with asterisks

document
  .querySelectorAll(".card-content .name > span")
  .forEach(name => (name.textContent = name.textContent.replace(/[^\s]/g, "*")))

Snap all moved cards to nearest 100 pixel

let store = document.querySelector("#app").__vue_app__.config.globalProperties.$store;
const event = new CustomEvent('cardDragEnded');
var isDragging = false;
document.addEventListener('cardDragEnded', e => console.log('drag ended'));
let dragDetectorId = setInterval(() => {
    if (!isDragging && store.state.currentDraggingCardId) { isDragging = true }
    else if (isDragging && !store.state.currentDraggingCardId) { document.dispatchEvent(event); isDragging = false; }
}, 100);

document.addEventListener('cardDragEnded', e => Object.entries(store.state.currentCards.cards)
    .forEach(
        ([id, card]) => 
            store.dispatch('currentCards/update', { ...card, /* x: Math.round(card.x/100)*100, y: Math.round(card.y/100)*100 */ })
    ));

:warning: This will move all your cards. I commented out the part that changes the x y positions.

Straighten connection lines

let store = document.querySelector("#app").__vue_app__.config.globalProperties.$store;
Object.entries(store.state.currentConnections.connections).forEach(([key, value]) => store.dispatch('currentConnections/update', { ...value, path: value.path.replace(/q\d+,\d+/, "") }));

Lines will reset shape if you move connected cards or reload. This is much less useful since this is now built-in.

4 Likes

Presentation pack

This lets you scroll the space by the hard-coded shift values via keyboard (to advance slides). You can toggle the chrome. It also increases h1 size.

let xShift = 996;
let yShift = 800;

document.body.addEventListener("keydown", (e) => {
  if (document.querySelector(".card-details")) return;
  e.key === "l"
    ? window.scrollBy({ left: xShift, behavior: "smooth" })
    : e.key === "h"
    ? window.scrollBy({ left: -xShift, behavior: "smooth" })
    : e.key === "j"
    ? window.scrollBy({ top: yShift, behavior: "smooth" })
    : e.key === "k"
    ? window.scrollBy({ top: -yShift, behavior: "smooth" })
    : null;
});

let toggleChrome = () => {
  const display =
    document.querySelector("header").style.display === "none" ? "" : "none";
  document.querySelector("header").style.display = display;
  document.querySelector("footer").style.display = display;
  document.querySelector(".footer-wrap").style.display = display;
};

document.body.addEventListener("keydown", (e) => {
  if (document.querySelector(".card-details")) return;
  if (e.key === "d") toggleChrome();
});


let styles = `
    .name-segment .markdown h1 { font-size: 44px; }
`

let styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
1 Like

Move currently edited card via keyboard

let store =
  document.querySelector("#app").__vue_app__.config.globalProperties.$store;
document.body.addEventListener("keydown", (e) => {
  let cardDetailsEl = document.querySelector(".card-details");
  if (cardDetailsEl) {
    if (!e.altKey) {
      return;
    }
    let delta =
      e.code === "KeyL"
        ? { x: 50, y: 0 }
        : e.code === "KeyH"
        ? { x: -50, y: 0 }
        : e.code === "KeyJ"
        ? { x: 0, y: 50 }
        : e.code === "KeyK"
        ? { x: 0, y: -50 }
        : null;
    if (delta === null) {
      return;
    }
    e.preventDefault();
    let cardId = cardDetailsEl.attributes.getNamedItem("data-card-id").value;
    let card = store.state.currentCards.cards[cardId];
    store.dispatch("currentCards/update", {
      id: cardId,
      x: card.x + delta.x,
      y: card.y + delta.y,
    });
  }
});

Use Alt/Opt+hjkl for movement by 50 pixels.

2 Likes

Love this! Are you using an extension to automatically load the js? I was pasting it in by hand to start with and would like to find a better workflow.

1 Like