JSFiddle - React, Tailwind, and code Playground

by ethan_selzer

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<title>Playground</title>
	</head>
	<body>
		<script type="text/x-handlebars" data-template-name="application">
<h1>Playground</h1>
{{outlet}}
		</script>
		<script type="text/x-handlebars" data-template-name="catalog">
<h2>Products</h2>
<div>
	{{#each product in controller}}
	{{partial "catalog-item"}}
	{{else}}
	<div>None</div>
	{{/each}}
</div>
{{outlet}}
		</script>
		
		<script type="text/x-handlebars" data-template-name="_catalog-item">
<button {{action "gotoQuickLook" product}}>{{product.name}}</button>
		</script>
		
		<script type="text/x-handlebars" data-template-name="product">
{{#if currentProduct}}
<div class="product" {{bindAttr data-id="currentProduct.id"}}>
	<h1>{{currentProduct.name}}</h1>
</div>
{{else}}
<h4>Please select a product!</h4>
{{/if}}
		</script>
		
		<script type="text/x-handlebars" data-template-name="quick-look">
<div {{bindAttr class="hideQuickLook :overlay"}} {{action "doHideQuickLook"}}></div>
<div id="quick-look" {{bindAttr class="hideQuickLook"}}>
	<div class="quick-look-body">
		<a href="javascript:void" class="close-button" {{action "doHideQuickLook"}}>X</a>
		{{view App.ProductView}}
	</div>
</div>
		</script>
		
		<script type="text/javascript" src="fiddle.js"></script>
	</body>
</html>

CSS

.hidden
{
	display: none;
}

div.overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.8);
}

#quick-look
{
	position: absolute;
	top: 5em;
	right: 50%;
	text-align: center;
	z-index: 20;
	width: 20em;
}

#quick-look div.quick-look-body
{
	position: absolute;
	display: inline-block;
	left: 0;
	background-color: #fff;
	min-height: 5em;
	width: 40em;
}

div.product
{
	padding: 1em;
}

JavaScript

function initEmber() {
	window.App = Ember.Application.create({
		LOG_TRANSITIONS: true
	});
	
	Ember.EXTEND_PROTOTYPES = false;
	
	App.Router.map(function(){
		this.resource("catalog", {path: "/catalog"}, function() {
			this.resource("quick-look", {path: "/quick-look/:product_id"});
		}),
		this.resource("product", {path: "/product/:product_id"})
	});
	
	App.IndexRoute = Ember.Route.extend({
		redirect: function() {
			this.transitionTo("catalog");
		}
	});
	
	App.CatalogRoute = Ember.Route.extend({
		model: function() {
			return App.CatalogIndex.find();
		}
	});
	
	App.CatalogIndexRoute = Ember.Route.extend({
		model: function() {
			return App.CatalogIndex.find();
		}
	});
	
	App.CatalogController = Ember.ArrayController.extend({
		gotoQuickLook: function(product) {
			this.transitionTo("quick-look", product);
		}
	});
	
	App.CatalogIndex = {
		find: function() {
			return App.CatalogIndex.FIXTURES;
		}
	};
	
	App.QuickLookRoute = Ember.Route.extend({
		model: function(params) {
			return App.QuickLook.find(params.product_id);
		},
		setupController: function(controller) {
			controller.set("hideQuickLook", "");
			controller.set("currentProduct", this.currentModel);
		}
	});
	
	App.QuickLookController = Ember.ObjectController.extend({
		doShowQuickLook: function(product) {
			this.set('currentProduct', product);
			this.set('hideQuickLook', "");
		},
		doHideQuickLook: function(product) {
			this.set("hideQuickLook", "hidden");
			this.set("currentProduct", null);
		},
		currentProduct: null,
		hideQuickLook: "hidden"
	});
	
	App.QuickLook = {
		find: function(productID) {
			// Set some default properties here.
			var result = Ember.Object.create({
				isLoaded: false
			});
	
			for(var i = 0; i < App.CatalogIndex.FIXTURES.length; i++) {
				if(App.CatalogIndex.FIXTURES[i].id == productID) {
					result.setProperties(App.CatalogIndex.FIXTURES[i]);
					result.isLoaded = true;
					break;
				}
			}
	
			return result;
		}
	};
	
	App.ProductRoute =...