Skip to content

Instantly share code, notes, and snippets.

@iamphill

iamphill/index.html

Last active October 20, 2015 15:32
Show Gist options
  • Save iamphill/4e817e08bf89b30bfd39 to your computer and use it in GitHub Desktop.
Save iamphill/4e817e08bf89b30bfd39 to your computer and use it in GitHub Desktop.
Download ZIP
Trello shadow DOM
Raw
index.html
<style>
trello-board {
display: block;
height: 100%;
}
</style>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<script id="trello-board" type="text/x-handlebars-template">
<style>
trello-list {
display: inline-block;
margin-right: 15px;
width: 250px;
height: 100%;
vertical-align: top;
}
trello-list:last-child {
margin-right: 0;
}
</style>
{{#each lists}}
<trello-list list-name="{{ name }}" list-id="{{ id }}"></trello-list>
{{/each}}
</script>
<script id="trello-board-list" type="text/x-handlebars-template">
<style>
trello-card {
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
h5 {
flex: 0 0 auto;
}
.cards {
flex: 1 1 auto;
height: 100%;
overflow: scroll;
}
</style>
<div class="container">
<h5>{{ name }}</h5>
<div class="cards">
{{#each cards}}
<trello-card data="{{ json this }}"></trello-card>
{{/each}}
</div>
</div>
</script>
<script id="trello-card" type="text/x-handlebars-template">
<style>
trello-card-attachment {
display: block;
min-height: 80px;
margin-bottom: 10px;
}
.labels {
display: block;
margin-bottom: 10px;
}
trello-label {
display: inline-block;
}
</style>
{{#if idAttachmentCover}}
<trello-card-attachment card-id="{{ shortLink }}" attachment-id="{{ idAttachmentCover }}"></trello-card-attachment>
{{/if}}
{{#if labels}}
<div class="labels">
{{#each labels}}
<trello-label label-name="{{ name }}" label-color="{{ color }}"></trello-label>
{{/each}}
</div>
{{/if}}
{{ name }}
</script>
<script id="trello-card-attachment" type="text/x-handlebars-template">
<style>
.image {
height: 80px;
width: 100%;
background-size: cover;
}
</style>
<div class="image" style="background-image: url({{ url }})"></div>
</script>
<script id="trello-label" type="text/x-handlebars-template">
<style>
span {
display: block;
height: 8px;
width: 40px;
border-radius: 3px;
}
</style>
<span title="{{ name }}" style="background-color: {{ color }}"></span>
</script>
<body>
<script src="test.js"></script>
<trello-board board-id="AQ3KOLDu"></trello-board>
</body>
Raw
test.js
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
var boardProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#trello-board');
this.template = Handlebars.compile(t.innerHTML);
var req = new XMLHttpRequest();
req.open('get', 'https://api.trello.com/1/boards/' + this.getAttribute('board-id') + '?lists=open', true);
req.onload = (function () {
var json = JSON.parse(req.responseText);
this.createShadowRoot().innerHTML = this.template(json);
}).bind(this);
req.send();
}
},
attachedCallback: {
value: function () {
}
}
});
document.registerElement('trello-board', {
prototype: boardProto
});
var listProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#trello-board-list');
this.template = Handlebars.compile(t.innerHTML);
this.data = {
id: this.getAttribute('list-id'),
name: this.getAttribute('list-name'),
cards: []
};
this.createShadowRoot().innerHTML = this.template(this.data);
this.sendRequest();
}
},
sendRequest: {
value: function () {
var req = new XMLHttpRequest();
req.open('GET', 'https://api.trello.com/1/lists/' + this.data.id + '?fields=labels&cards=open', true);
req.onload = (function () {
var json = JSON.parse(req.responseText);
this.data.cards = json.cards;
this.shadowRoot.innerHTML = this.template(this.data);
}).bind(this);
req.send();
}
}
});
document.registerElement('trello-list', {
prototype: listProto
});
var cardProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#trello-card');
this.template = Handlebars.compile(t.innerHTML);
this.data = JSON.parse(this.getAttribute('data'));
this.createShadowRoot().innerHTML = this.template(this.data);
}
}
});
document.registerElement('trello-card', {
prototype: cardProto
});
var cardAttachmentProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#trello-card-attachment');
this.template = Handlebars.compile(t.innerHTML);
var id = this.getAttribute('card-id');
var attachmentId = this.getAttribute('attachment-id');
var req = new XMLHttpRequest();
req.open('GET', 'https://api.trello.com/1/cards/' + id + '/attachments/' + attachmentId, true);
req.onload = (function () {
var json = JSON.parse(req.responseText);
this.createShadowRoot().innerHTML = this.template(json);
}).bind(this);
req.send();
}
}
});
document.registerElement('trello-card-attachment', {
prototype: cardAttachmentProto
});
var labelProto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = document.querySelector('#trello-label');
this.template = Handlebars.compile(t.innerHTML);
this.data = {
name: this.getAttribute('label-name'),
color: this.getAttribute('label-color')
};
this.createShadowRoot().innerHTML = this.template(this.data);
}
}
});
document.registerElement('trello-label', {
prototype: labelProto
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment