Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ever wanted to print your Trello board? Export as JSON and paste it into the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>True Trello Printer</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style>
body{margin:15%;}
.panel-body{
font-size: 1.2em;
}
</style>
<STYLE type="text/css" media="print">
body{margin:0;}
</STYLE>
</head>
<body>
<div id="out">
No Trello JSON data found
</div>
</ul>
</div>
<script type="text/html" id="template-output" >
{{#lists}}
<h1>Område: {{name}}</h1>
{{#cards}}
<div class="panel panel-default">
<div class="panel-heading"><h4>{{name}}</h4>{{{desc}}}</div>
<!--div class="panel-body" >
</div-->
<ul class="list-group">
{{#actions}}
<li class="list-group-item"><tt style="color:gray;">{{date}} </tt> {{{text}}}</li>
{{/actions}}
</ul>
</div>
{{/cards}}
<hr><br><br>
{{/lists}}
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.0/marked.min.js
" type="text/javascript"></script>
<script type="text/javascript">
function eatData(trelloJson){
var data = {
board: trelloJson.name
,
lists: []
,
ref: {}
}
for(i in trelloJson.lists){
var list = trelloJson.lists[i]
if(list.closed){
//continue
}
data.ref[list.id] = {
name: list.name
,
cards: []
}
data.lists.push(data.ref[list.id])
}
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)
,
actions: []
}
data.ref[card.idList].cards.push(data.ref[card.id])
}
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: moment(action.date).format('YYYY-MM-DD')
}
try{
data.ref[action.data.card.id].actions.push(data.ref[action.id])
} catch(e){}
}
return data;
}
function showData(data){
var template = $('#template-output').html()
console.log(JSON.stringify(data,null,2))
$('#out').html(Mustache.render(template, data))
}
function autorun()
{
/*if(null == data){
return alert('Please insert JSON data from Trello in the code')
}*/
var url = document.currentScript.getAttribute('data-url'); // passed with script tag <script src="this-code.js" data-url="jsonblob.com"></script>
$.getJSON(url, function(data) {
showData(eatData(data));
});
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;
data = null;
/*
data = {
"id": "52a9b37c0fc9b3",
"name": "My board",
"desc": "",
"descData": null,
"closed": false,
"idOrganization": "502a0988d99341fe81a",
"invited": false,
"pinned": false,
"starred": false,
"url": "https://trello.com/b/fsvDkUV1/bec-f-rste-gang-the-movie",
......................
}
//*/
</script>
</body>
</html>
@AWolf81

This comment has been minimized.

Copy link
Owner Author

AWolf81 commented May 2, 2017

Not tested yet - I'll setup a github page for this to test it. Maybe it's better to pass the resource url in the address bar of browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.