ONA Workshop: tabletop-handlebars-fancy-positioning

Who among you at #ONA13 is learning to how to build projects with Tabletop.js and Handlebars.js? Here's a list.

by chrislkeller

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>

<div id="container">
	
	<a href="index.html" id="example">First example</a>
	<h1 title="Get it?">Fancy positioning via Tabletop.js<br> (╯°□°）╯︵ ┻━┻</h1>
	
	<ul id="grid"> 
		<span class="gridLabel top">Really cool</span>
		<span class="gridLabel bottom">Meh</span>
		<span class="gridLabel left">Human</span>
		<span class="gridLabel right">Animal</span>
		<div id="xAxis"> </div>
		<div id="yAxis"> </div>
		
	</ul>
	
</div><!-- #container -->

<!-- Template for table of results -->
<script id="days" type="text/x-handlebars-template">
		<li style="position: absolute; top: {{top}}%; left: {{left}}%;">
			{{{plots}}}
		</li>
</script>

CSS

#grid {
	overflow: hidden;
	margin: 20px 0;
	width: 100%;
	height: 500px;
	background: #ddd;
	position: relative;
}

#grid li {
	font-size: 18px;
	z-index: 100;
}

#grid #xAxis {
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	z-index: 1;
}

#grid #yAxis {
	height: 100%;
	width: 1px;
	background: #fff;
	position: absolute;
	left: 50%;
	z-index: 1;
}

#grid span.gridLabel{
	background: #fff;
	color: #000;
	padding: 5px;
	z-index: 2;
	position: absolute;
}
	#grid .left {
		left: 0;
		top: 47%;
	}
	#grid .right {
		right: 0;
		top: 47%;
	}
	#grid .top {
		top: 0;
		left: 45.5%;
	}
	#grid .bottom {
		bottom: 0;
		left: 48%;
	}

JavaScript

var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?key=0AmUc6Li4CgEQdHloZnFCWnQxcWVrUnpwSEx4TzdEc0E&output=html';

  $(document).ready( function() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: showInfo,
                     parseNumbers: true } );
  });

  function showInfo(data, tabletop) {
    alert("Successfully processed!")
    console.log(data);
  }

function showInfo(data, tabletop) {
    var source   = $("#days").html();
    var template = Handlebars.compile(source);

    $.each( tabletop.sheets("Sheet3").all(), function(i, cat) {
      var html = template(cat);
      $("#grid").append(html);
    });
  }