JSFiddle - React, Tailwind, and code Playground

by Couto

HTML

<script src="https://raw.github.com/bestiejs/xstats.js/master/xstats.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="wrapper">
    <canvas></canvas>
  </div>
  <script src="https://raw.github.com/bestiejs/xstats.js/master/xstats.js"></script>
  <script src="http://jsconsole.com/remote.js?19EE35BE-9D50-4E70-80DE-94C8F92FF623"></script>
  <!-- Small fake system of templates, should be enough for this example-->
  <script type="text/x-fake-template" id="colorpicker">
    <div class="colorpicker well">
      <div class="row">
      <canvas class="span3" width="220" heigth="165"></canvas>
      </div>
      <div class="row">
        <code class="colorview span1"></code>
        <code class="colorhex span1">#bada55</code>
      </div>
      <div class="row">
        <button class="cancel btn span2"><i class="icon-remove"></i> Cancel </button>
        <button class="confirm btn btn-primary span1"><i class="icon-white icon-ok"></i> Ok </button>
      </div>
    </div>
  </script>
  <script type="text/x-fake-template" id="menu-item">
    <li class="{{classname}}">
      <a href="#">
        <i class="{{icon}}"></i>{{text}}
      </a>
     </li>
  </script>

CSS

html, body{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
  
  ul, ol {
    list-style: none;
    margin: 0; padding: 0;
  }
  
  .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 90px;
  }
  
  .xstats {
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
  }
  canvas {
    background-color: #eee;
    cursor: crosshair;
  }
  
  .colorpicker {
    width: 220px;
    position: absolute;
    top: 20px;
    left : 90px;
    z-index: 2
  }
  
  .colorpicker .row{
    margin-bottom: 20px;
  }
  
  .colorpicker .row:last-child{
    margin-bottom: 0px;
  }
  
  .colorpicker .btn {
    display: inline-block;
  }
  
  .colorpicker .colorview{
    height: 18px;
  }
  
  .colorpicker .example {
    background-color: #bada55;
  }
  
  .nav {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60px;    
  }

JavaScript

(function(w, d, X) {
    'use strict';

    // Alguns browsers não suportam o Function.bind()
    // Como tal, vamos criar um helper que nos ajude
    // a atingir esse fim, e que seja compativel em todos os browsers
    // mais info: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

    function bind(fn, ctx) {
        var slice = Array.prototype.slice,
            args = slice.call(arguments, 2);

        return function() {
            return fn.apply(ctx, args.concat(slice.call(arguments)));
        };
    }

    var $ = function(selector) {
        var value;
        // if it's an id, then use getElementById
        // since it's way faster...
        if (/#+\w*/gi.test(selector)) {
            value = d.getElementById(selector.replace('#', ''));
        } else {
            value = d.querySelectorAll(selector);
        }

        return value;
    },
        canvas = $('canvas')[0],
        context = canvas.getContext('2d'),
        wrapper = $('.wrapper')[0],
        // Turn xstats on to monitor the memory use
        // and fps
        stats = new X({
            'height': 100,
            'width': 200,
            'mode': 'mem'
        }),
        // Vamos testar se o browser é de um produto Apple
        // Esta não é a forma mais correcta, mas confesso que
        // estou com preguiça, e até porque não há nenhuma forma
        // 100% segura de detectar que o browser é mobile
        // muitas outras formas apresentam grande numero de 
        // falsos positivos.
        // mais info: http://modernizr.github.com/Modernizr/touch.html 
        iOS = (/(iPhone|iPad|iPod)/gi).test(w.navigator.userAgent),
        // No browser os eventos sao para os ratos
        // No iPad sao para dedos (touch)
        // visto que tem nomes diferentes
        // isto permite-nos uniformizar a forma como chamamos
        // os eventos
        events = {
            mousedown: (iOS) ? 'touchstart' : 'mousedown',
            mouseup:...