Last active
May 31, 2018 22:42
-
-
Save bennettmcelwee/d1a3857fe98aa038bc8e5efdff0f636d to your computer and use it in GitHub Desktop.
Add formatting tools to Trello - inject using something like https://chrome.google.com/webstore/detail/custom-javascript-for-web/ddbjnfjiigjmcpcpkmhogomapikjbjdk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(() => { | |
const observer = new MutationObserver(addFormatControls) | |
observer.observe(document.querySelector('body'), {attributes: true, subtree: true}) | |
function getCommentInput (optionsElement) { | |
return $(optionsElement).closest('.comment-box').find('textarea').get(0) | |
} | |
function wrapSelection (input, wrap) { | |
const selection = input.value.slice(input.selectionStart, input.selectionEnd) | |
if (selection.length > 0) { | |
if (selection.length >= wrap.length * 2 && selection.startsWith(wrap) && selection.endsWith(wrap)) { | |
replaceSelection(input, selection.slice(wrap.length, - wrap.length)) | |
} | |
else { | |
replaceSelection(input, wrap + selection + wrap) | |
} | |
} | |
} | |
function replaceSelection (input, replacement) { | |
const text = input.value | |
const selectionStart = input.selectionStart | |
const selection = text.slice(selectionStart, input.selectionEnd) | |
input.value = text.slice(0, selectionStart) + replacement + text.slice(input.selectionEnd) | |
input.setSelectionRange(selectionStart, selectionStart + replacement.length) | |
input.focus() | |
} | |
function handleWrapButton(button, wrap) { | |
const input = getCommentInput(button) | |
wrapSelection(input, wrap) | |
input.focus() | |
} | |
function addFormatControls () { | |
$('.comment-box-options:visible:not(.bnnt)') | |
.addClass('bnnt') | |
.prepend('<a class="comment-box-options-item js-comment-bnnt-italic" href="#" title="Italic"><span class="icon-sm"><i>I</i></span></a>') | |
.prepend('<a class="comment-box-options-item js-comment-bnnt-bold" href="#" title="Bold"><span class="icon-sm"><b>B</b></span></a>') | |
.append('<a class="comment-box-options-item js-comment-bnnt-help" href="https://help.trello.com/article/821-using-markdown-in-trello" target="_blank" title="Help"><span class="icon-sm"></span></a>') | |
.each(function() { | |
$(this).find('.js-comment-bnnt-bold').click(function() { handleWrapButton(this, '**') }) | |
$(this).find('.js-comment-bnnt-italic').click(function() { handleWrapButton(this, '_') }) | |
}) | |
} | |
}) | |
/* UNUSED | |
//check for relevant path changes (in Trello, DOM mutation can happen without any path change so this is inappropriate) | |
let currentPath = document.location.pathname | |
function checkForCard() { | |
const newPath = document.location.pathname | |
if (currentPath !== newPath) { | |
if ( ! /^\/c\//.test(currentPath) && /^\/c\//.test(newPath)) { | |
window.setTimeout(addFormatControls, 500) | |
} | |
currentPath = newPath | |
} | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment