Skip to content

Instantly share code, notes, and snippets.

@elwinschmitz
Forked from mathiasrw/True Trello Printer
Last active June 9, 2023 19:27
Show Gist options
  • Save elwinschmitz/880f74fce4ad3055afe3504ac5cb8ea7 to your computer and use it in GitHub Desktop.
Save elwinschmitz/880f74fce4ad3055afe3504ac5cb8ea7 to your computer and use it in GitHub Desktop.
Ever wanted to print your Trello board? Export as JSON and 'upload' into this page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>True Trello Printer</title>
<link href="vendor/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin: 0 15%;
}
.list {
margin: 0 0 3em 0;
}
@media print {
body {
margin: 0;
}
.card,
.list {
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<form id="in">
<h1>Trello JSON Printer</h1>
<input type="file" id="data" accept="application/json">
</form>
<output id="out"></output>
<script type="text/html" id="template-output">
{{#lists}}
<div class="list">
<h1>{{name}}</h1>
{{#cards}}
<div class="card panel panel-default">
<div class="panel-heading">
<h4>
{{name}}
{{#labels}}
<small class="label label-default label-{{color}}">{{name}}</small>
{{/labels}}
</h4>
</div>
{{#desc}}
<div class="panel-body">
{{{desc}}}
</div>
{{/desc}}
{{#checklists}}
<div class="panel-body">
<h4>{{name}}</h4>
<ul class="list-group">
{{#items}}
<li class="list-group-item">
<input type="checkbox" {{#done}}checked{{/done}} disabled>
{{name}}
</li>
{{/items}}
</ul>
</div>
{{/checklists}}
<ul class="list-group">
{{#actions}}
<li class="list-group-item">
<tt style="color:gray;">{{date}}</tt> {{{text}}}
</li>
{{/actions}}
</ul>
</div>
{{/cards}}
</div>
{{/lists}}
</script>
<script src="vendor/mustache.min.js"></script>
<script src="vendor/marked.min.js"></script>
<script>
function formatDate(date) {
return new Date(date).toISOString().substr(0, 10);
}
function eatData(trelloJson) {
var data = {
board: trelloJson.name,
lists: [],
ref: {}
};
// LISTS
for (i in trelloJson.lists) {
var list = trelloJson.lists[i];
if (list.closed) {
continue;
}
data.ref[list.id] = {
name: list.name,
cards: []
};
try {
data.lists.push(data.ref[list.id]);
} catch (e) {};
}
// CARDS
for (i in trelloJson.cards) {
var card = trelloJson.cards[i];
if (card.closed) {
continue;
}
data.ref[card.id] = {
name: card.name,
desc: marked(card.desc),
labels: card.labels,
checklists: [],
actions: []
};
try {
data.ref[card.idList].cards.push(data.ref[card.id]);
} catch (e) {};
}
// CHECKLISTS
for (i in trelloJson.checklists) {
var list = trelloJson.checklists[i];
var items = [];
for (i in list.checkItems) {
var item = list.checkItems[i];
items[i] = {
name: item.name,
done: (item.state === 'complete'),
};
}
data.ref[list.id] = {
name: list.name,
items: items,
};
try {
data.ref[list.idCard].checklists.push(data.ref[list.id]);
} catch (e) {};
}
// COMMENTS
for (i in trelloJson.actions) {
var action = trelloJson.actions[i];
if (action.type != "commentCard") {
continue;
}
data.ref[action.id] = {
text: marked(action.data.text),
date: formatDate(action.date)
};
try {
data.ref[action.data.card.id].actions.push(data.ref[action.id]);
} catch (e) {};
}
console.log('data:', data);
return data;
}
function showData(data) {
var template = document.getElementById('template-output').innerHTML;
document.getElementById('out').innerHTML = Mustache.render(template, data);
}
function downloadString(text, fileType, fileName) {
var blob = new Blob([text], {
type: fileType
});
var a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob);
a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.setTimeout(function() {
URL.revokeObjectURL(a.href);
}, 1500);
}
function openFile(event) {
var reader = new FileReader();
reader.onload = function() {
var data = JSON.parse(reader.result);
showData(eatData(data));
var exportName = formatDate(Date.now()) + '--' + data.name;
document.title = exportName;
document.getElementById('in').remove();
document.querySelectorAll('script').forEach(function(element) {
element.remove();
});
if (window.confirm('Save to file?')) {
downloadString("<!DOCTYPE html>\n" + document.documentElement.outerHTML, 'text/html', exportName + '.html');
}
};
reader.readAsText(event.target.files[0]);
};
document.getElementById('data').addEventListener('change', openFile);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment