JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="wrapper" class="container">
        <div id="flashWrapper">
          <div id="flash" class="alert alert-error"></div>  
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>Speed dial</th><th>Number</th><th>Label</th><th class="action" colspan="2"></th>
            </tr> 
          <thead>
          <tbody>

          <script id="smartKeyTemplate" type='text/html'>    
            <%
              //console.log('Attrs ',attrs);
              //console.log('Available keys ',avail_keys);

              var hot_key =  attrs.hot_key === undefined ?  '' : attrs.hot_key;
              var num = attrs.num;
              var desc = attrs.desc; 
 
              var select = ['<select class="edit hot_key">','</select>']; 
              var options = [];  

              if(attrs.hot_key !== undefined) {
                avail_keys.push(attrs.hot_key);
                avail_keys.sort();
              }
              for(var i = 0;i < avail_keys.length;i++) {
                options.push('<option value="' +  avail_keys[i] + '"' + ((avail_keys[i] === hot_key)? 'selected':'') + '>' +  avail_keys[i]  
                    + '</option>');
              }
              select =  select.join(options.join('')); 
            %>
            <td> 
              <span class="view"><%= hot_key %></span>
              <%= select %>
            </td>
            <td> 
              <span class="view"><%= num %></span>
              <input type="text" placeholder="Enter number" class="edit num" value="<%= num %>" /> 
            </td>
            <td> 
              <span class="view"><%= desc %></span>
              <input type="text" placeholder="Enter label" class="edit desc"...

CSS

#wrapper {
        margin-top: 20px;
      }  
      #flashWrapper {
        height:40px;
      }
      #flash {
        display: none;
      }
      .table td,.table th {
        border: 1px solid #dddddd;
        border-left: medium none;
        border-right: medium none;
        width: 250px;
        vertical-align: middle;
      }
      .table input,.table select {
        margin-bottom: 0;
      }  
      .table select {
        width:50px;
      } 
      .table .action {
        border: medium none;
        width:20px;
      }  
      .table .action .view { 
        opacity: 0;
        filter: alpha(opacity=0);
      }   
      .table td span { 
        border: 1px solid transparent;
        padding: 4px; 
      }
      option[selected] {
        color: green;
      }
      .icon,tr td {
        cursor: pointer;
      }  
      tr.editing td {
        cursor: default; 
      }
      tbody tr,tr .edit,tr.editing .view  {
        display: none; 
      } 
      tr.editing .edit {
        display: block;
      }

JavaScript

(function($) {   
        $(window).on('beforeunload', function() {
          if($('tr.editing').length > 0)
          return 'You have unsaved changes. Are you sure, you want to leave ?';
        });

        var ItemView = Backbone.View.extend({
          tagName: '<tr>',   
          className: 'editing',      
          template:_.template($('#smartKeyTemplate').html()),
          events: {  
            'click .save-btn'               : 'save',  
            'keydown input'                 : 'keyActions',
            'click .delete-btn'             : 'delete',
            'click .cancel-btn'             : 'cancel', 
            'mouseenter'                    : 'hover',
            'mouseleave'                    : 'hover',
            'click td:not(".action")'       : 'edit',
            'click .edit-btn'               : 'edit'
          }, 
          edit : function () {  
            // If already editing, do nothing  
            if(this.$el.hasClass('editing')) {
              return this;
            } 
            this.$el.siblings('.editing').removeClass('editing');
            this.$el.addClass('editing'); 
            listView.$('#add').prop('disabled',true);

            // Because we need to dynamically update select html whenever we are editing
            this.render(); 
          },
          doneEditing: function () {
            this.$el.removeClass('editing');  
            if(this.avail_keys().length !== 0) {
              listView.$('#add').prop('disabled',false); 
            }
            listView.$('#flash').fadeOut('slow');
          },
          hover: function (e) {  
             this.$('.action .view').stop().css('opacity',0).animate({'opacity': (e.type === 'mouseenter') ? 1 : 0 },'slow');
          },
          initialize: function() {  
            this.HOT_KEYS = [0,1,2,3,4,5,6,7,8,9]; 
            this.model.on( 'change', this.render, this ); 
            this.model.on( 'destroy', this.remove, this );
          },
         ...