Skip to content

Instantly share code, notes, and snippets.

@mtib

mtib/AsanaAdditionsTampermonkey.js

Last active April 19, 2023 12:56
Show Gist options
  • Save mtib/b64391657cab1cffdb6447e0de76caf1 to your computer and use it in GitHub Desktop.
Save mtib/b64391657cab1cffdb6447e0de76caf1 to your computer and use it in GitHub Desktop.
Download ZIP
Arc Boost to annotate tasks with their ID.
Raw
annotateAsanaTaskId.js
/**
* @param {object} options
* @param {string} options.key
* @param {({ title, taskId }: { title: string; taskId: string; }) => { label: string; value: string; onClick?: () => void; }} options.toRow
*/
const updateAsanaRow = (options) => {
const { key } = options;
const taskRegex = /^\/\d+(\/\S+)?\/(\d+|inbox)\/(\d+)/
const taskMatch = taskRegex.exec(window.location.pathname);
if (!taskMatch) {
return;
}
const taskId = taskMatch[3];
const tableElement = document.querySelector('.TaskPaneFields');
const titleElement = document.querySelector('div.ObjectTitleInput.TaskPane-titleRow.TaskPane-titleRowInput > div > textarea');
if (!tableElement) {
throw new Error('Cannot find required DOM elements: tableElement');
}
if (!titleElement) {
throw new Error('Cannot find required DOM elements: titleElement');
}
const title = titleElement.innerHTML;
const { label, value, onClick } = options.toRow({ title, taskId });
const rootElementId = `boost-watched-${key}`;
const existingRoot = document.getElementById(rootElementId);
if (existingRoot && existingRoot.dataset.label === label && existingRoot.dataset.value === value) {
return;
} else if (existingRoot && existingRoot.parentElement) {
existingRoot.parentElement.removeChild(existingRoot);
}
const addedRowElement = document.createElement('div');
addedRowElement.id = rootElementId;
addedRowElement.dataset.value = value;
addedRowElement.dataset.label = label;
addedRowElement.classList.add('LabeledRowStructure');
const labelDiv1 = document.createElement('div');
labelDiv1.classList.add('LabeledRowStructure-left');
labelDiv1.style.width = '120px';
addedRowElement.appendChild(labelDiv1);
const labelDiv2 = document.createElement('div');
labelDiv2.classList.add('LabeledRowStructure-labelContainer');
labelDiv1.appendChild(labelDiv2);
const labelLabel = document.createElement('label');
labelLabel.classList.add('LabeledRowStructure-label');
labelLabel.innerHTML = label;
labelDiv2.appendChild(labelLabel);
const valueDiv1 = document.createElement('div');
valueDiv1.classList.add('LabeledRowStructure-right');
addedRowElement.appendChild(valueDiv1);
const valueDiv2 = document.createElement('div');
valueDiv2.classList.add('LabeledRowStructure-content');
valueDiv2.style.display = 'flex';
valueDiv2.style.gap = '10px';
valueDiv1.appendChild(valueDiv2);
const follower = document.createElement('span');
follower.style.color = '#272';
const clickableBranchNameElement = document.createElement('span');
clickableBranchNameElement.style.minWidth = '0px';
clickableBranchNameElement.style.flexShrink = '1';
clickableBranchNameElement.style.textOverflow = 'ellipsis';
clickableBranchNameElement.style.whiteSpace = 'nowrap';
clickableBranchNameElement.style.overflow = 'hidden';
clickableBranchNameElement.innerHTML = value;
if (onClick) {
clickableBranchNameElement.style.cursor = 'pointer';
clickableBranchNameElement.onclick = () => {
onClick();
follower.innerHTML = 'clicked!';
}
}
valueDiv2.appendChild(clickableBranchNameElement);
valueDiv2.appendChild(follower);
tableElement.insertBefore(addedRowElement, tableElement.childNodes[tableElement.childNodes.length -1]);
}
const updateBranchName = () => {
updateAsanaRow({
key: 'boost-branch-id',
toRow: ({ title, taskId }) => {
const branchName = [...(title.toLocaleLowerCase().replace(/[^a-z0-9 ]/ig, '').split(' ').slice(0, 8)), taskId].join('-');
return {
label: 'Canonical branch',
value: branchName,
onClick: () => {
navigator.clipboard.writeText(branchName);
}
}
}
})
}
const updateCatsay = () => {
updateAsanaRow({ key: 'cat', toRow: ({title}) => {
const url = new URL(`https://cataas.com/cat/says/${encodeURIComponent(title)}`);
const imgElement = document.createElement('img');
imgElement.src = url.href;
imgElement.style.width = '100%';
console.log(imgElement.outerHTML);
return { label: 'Cat', value: imgElement.outerHTML };
}});
}
window.setInterval(() => {
updateBranchName();
updateAsanaRow({ key: 'numberwang', toRow: () => ({ label: 'Numberwang', value: Math.random() })});
updateCatsay();
}, 1000);
Raw
AsanaAdditionsTampermonkey.js
// ==UserScript==
// @name AsanaAdditions
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author [email protected]
// @match https://app.asana.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=asana.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
/**
* @param {object} options
* @param {string} options.key
* @param {({ title, taskId }: { title: string; taskId: string; }) => { label: string; value: string; onClick?: () => void; }} options.toRow
*/
const updateAsanaRow = (options) => {
const { key } = options;
const taskRegex = /^\/\d+(\/\S+)?\/(\d+|inbox)\/(\d+)/
const taskMatch = taskRegex.exec(window.location.pathname);
if (!taskMatch) {
return;
}
const taskId = taskMatch[3];
const tableElement = document.querySelector('.TaskPaneFields');
const titleElement = document.querySelector('div.ObjectTitleInput.TaskPane-titleRow.TaskPane-titleRowInput > div > textarea');
if (!tableElement) {
throw new Error('Cannot find required DOM elements: tableElement');
}
if (!titleElement) {
throw new Error('Cannot find required DOM elements: titleElement');
}
const title = titleElement.innerHTML;
const { label, value, onClick } = options.toRow({ title, taskId });
const rootElementId = `boost-watched-${key}`;
const existingRoot = document.getElementById(rootElementId);
if (existingRoot && existingRoot.dataset.label === label && existingRoot.dataset.value === value) {
return;
} else if (existingRoot && existingRoot.parentElement) {
existingRoot.parentElement.removeChild(existingRoot);
}
const addedRowElement = document.createElement('div');
addedRowElement.id = rootElementId;
addedRowElement.dataset.value = value;
addedRowElement.dataset.label = label;
addedRowElement.classList.add('LabeledRowStructure');
const labelDiv1 = document.createElement('div');
labelDiv1.classList.add('LabeledRowStructure-left');
labelDiv1.style.width = '120px';
addedRowElement.appendChild(labelDiv1);
const labelDiv2 = document.createElement('div');
labelDiv2.classList.add('LabeledRowStructure-labelContainer');
labelDiv1.appendChild(labelDiv2);
const labelLabel = document.createElement('label');
labelLabel.classList.add('LabeledRowStructure-label');
labelLabel.innerHTML = label;
labelDiv2.appendChild(labelLabel);
const valueDiv1 = document.createElement('div');
valueDiv1.classList.add('LabeledRowStructure-right');
addedRowElement.appendChild(valueDiv1);
const valueDiv2 = document.createElement('div');
valueDiv2.classList.add('LabeledRowStructure-content');
valueDiv2.style.display = 'flex';
valueDiv2.style.gap = '10px';
valueDiv1.appendChild(valueDiv2);
const follower = document.createElement('span');
follower.style.color = '#272';
const clickableBranchNameElement = document.createElement('span');
clickableBranchNameElement.style.minWidth = '0px';
clickableBranchNameElement.style.flexShrink = '1';
clickableBranchNameElement.style.textOverflow = 'ellipsis';
clickableBranchNameElement.style.whiteSpace = 'nowrap';
clickableBranchNameElement.style.overflow = 'hidden';
clickableBranchNameElement.innerHTML = value;
if (onClick) {
clickableBranchNameElement.style.cursor = 'pointer';
clickableBranchNameElement.onclick = () => {
onClick();
follower.innerHTML = 'clicked!';
}
}
valueDiv2.appendChild(clickableBranchNameElement);
valueDiv2.appendChild(follower);
tableElement.insertBefore(addedRowElement, tableElement.childNodes[tableElement.childNodes.length -1]);
}
const updateBranchName = () => {
updateAsanaRow({
key: 'boost-branch-id',
toRow: ({ title, taskId }) => {
const branchName = [...(title.toLocaleLowerCase().replace(/[^a-z0-9 ]/ig, '').split(' ').slice(0, 8)), taskId].join('-');
return {
label: 'Canonical branch',
value: branchName,
onClick: () => {
navigator.clipboard.writeText(branchName);
}
}
}
})
}
const updateCatsay = () => {
updateAsanaRow({ key: 'cat', toRow: ({title}) => {
const url = new URL(`https://cataas.com/cat/says/${encodeURIComponent(title)}`);
const imgElement = document.createElement('img');
imgElement.src = url.href;
imgElement.style.width = '100%';
console.log(imgElement.outerHTML);
return { label: 'Cat', value: imgElement.outerHTML };
}});
}
window.setInterval(() => {
updateBranchName();
updateAsanaRow({ key: 'numberwang', toRow: () => ({ label: 'Numberwang', value: Math.random() })});
updateCatsay();
}, 1000);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment