Firebase Test 4 (CRUDL)

trying to implement folders

by dirkk0

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4">
            <table id='thingList' class="table table-bordered">
                <thead>
                    <tr>
                        <th style="width: 10%"><i class="icon-plus addButton"></i>

                        </th>
                        <th style="width: 70%">
                            <input type='text' id='thingTitle' placeholder='Title'>
                        </th>
                        <th style="width: 10%">
                        </th>
                </thead>
                <tbody>
                    <!-- tr><td>a</td><td>a</td><td>a</td></tr>
                <tr><td>a</td><td>a</td><td>a</td></tr -->
                </tbody>
            </table>
        </div>
        <div class="span8">
            <div class="media"> <a class="pull-left" href="#">
    <!-- img class="media-object" src="http://lorempixel.com/64/64/" style="width:64px;height:64px"-->
  </a>

                <div class="media-body">
                     <h4 class="media-heading"><div id="contentTitle" class="editable">title</div></h4>

                    <div id="contentAbstract" class="editable" style="min-width:100px;min-height:100px">abstract</div>
                    <div id="contentId" style="display:none">id</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

table {
         table-layout: fixed;
     }
     table th, table td {
         overflow: hidden;
     }

JavaScript

// via http://jsfiddle.net/bgrins/tzYbU/
// Return a helper with preserved width of cells
var fixHelper = function (e, ui) {
    ui.children().each(function () {
        $(this).width($(this).width());
    });
    return ui;
};
$("#thingList tbody").sortable({
    helper: fixHelper,
    update: function (event, ui) {
        for (var i = 0; i < $('#thingList tr:gt(0)').length; i++) {
            var id = $('#thingList tr:gt(0)').eq(i).attr('id').substring(2);
            var nameRef = new Firebase(db + '/' + id);
            nameRef.setPriority(i);
        }
    }

}).disableSelection();


$(".editable").each(function (index, element) {
    element.onclick = function (e) {
        this.contentEditable = true;
        this.focus();
        if (this.innerHTML == "(enter text)") {
            this.innerHTML = "";
        }
        if (this.innerHTML == "(enter title)") {
            this.innerHTML = "";
        }

    }
});

var db = 'https://xxx.firebaseio.com/things';
var ref = new Firebase(db);

var count; // global, there must be a better solution

ref.on('value', function (snapshot) {
    count = 0;
    snapshot.forEach(function () {
        count++;
    });

});

$('#thingTitle').keypress(function (e) {
    if (e.keyCode == 13) {
        var thingTitle = $('#thingTitle').val();
        // var thingAbstract = $('#thingAbstract').val();
        ref.push({
            thingTitle: thingTitle,
            // thingAbstract: thingAbstract
            ".priority": count
        });
        $('#thingTitle').val('');
        // $('#thingAbstract').val('');
    }
});

$('.editable').keypress(function (e) {
    if (e.keyCode == 13 && !e.shiftKey) {
        console.log(this);
        // console.log($('#contentId').html());

        var nameRef = new Firebase(db + '/' + $('#contentId').html());
        nameRef.set({
            thingTitle: $('#contentTitle').html(),
            thingAbstract: $('#contentAbstract').html(),
                ".priority": count
        });


   ...