Skip to content

Instantly share code, notes, and snippets.

@antonvolkoff

antonvolkoff/True Trello Printer

Forked from mathiasrw/True Trello Printer
Created November 29, 2016 15:43
Show Gist options
  • Save antonvolkoff/c9b345c1d166a8b800be313243e6a017 to your computer and use it in GitHub Desktop.
Save antonvolkoff/c9b345c1d166a8b800be313243e6a017 to your computer and use it in GitHub Desktop.
Download ZIP
Ever wanted to print your Trello board? Export as JSON and paste it into the code.
Raw
True Trello Printer
<!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')
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment