Notes

by Serkan Yersen

HTML

<script src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://rawgit.com/HackerWins/summernote/master/dist/summernote.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/HackerWins/summernote/master/dist/summernote.css">
<table class="table table-bordered" width="100%" height="100%">
    <tr>
        <td width="180px">
            <button class="btn btn-block add-new">Add new Note</button>
            <hr>
            <div class="list-group" id="note-list">
            </div>
        </td>
        <td>
            <div class="summernote">
            </div>
        </td>
    </tr>
</table>

<script type="text/template" id="list-item">
    <% _(notes).each(function(note){ %>
        <a href="#<%=note.url%>" class="list-group-item notes <% if(window.location.hash==='#'+note.url){ print('active'); }%>">
            <%=note.title%>
            <span class="remove-note pull-right" data-id="<%=note.url%>">
                <i class="glyphicon glyphicon-remove-circle"></i>
            </span>
        </a>
    <% }); %>
</script>

SCSS

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    margin: 0 !important;
}

JavaScript

var app = {
    firebase: "https://intense-fire-5583.firebaseio.com/",
    notes: [],
    getNotes: function () {
        var self = this;
        var notesRef = new Firebase(this.firebase + "notes");
        
        notesRef.on("value", function(snapshot) {
            if(self.getPage() == ''){
                self.openFirstNote();
            }
        });
        
        notesRef.on("child_added", function (snapshot) {
            var note = snapshot.val();
            note.url = snapshot.name();
            self.notes.push(note);
            $(self).trigger("note:added");
        });
        notesRef.on("child_changed", function (snapshot) {
            var note = snapshot.val();
            var url = snapshot.name();
            var savedNote = _(self.notes).findWhere({
                url: url
            });
            savedNote.body = note.body;
            savedNote.title = note.title;
            $(self).trigger("note:changed");
        });
        notesRef.on("child_removed", function (snapshot) {
            self.notes = _(self.notes).reject(function (note) {
                return note.url == snapshot.name();
            });
            $(self).trigger("note:removed");
        });
        
        $(self).on("note:added note:changed note:removed",
                   function (data) {
                       var html = _($("#list-item").html()).template({
                           "notes": app.notes
                       });
                       $("#note-list").html(html);
                   }
                  );
    },
    getPageChange: function () {
        var self = this;
        var change = function () {
            var page = self.getPage();
            $(self).trigger("page:change", [page]);
        };
        
        $(window).on("hashchange", change);
        if (window.location.hash) {
            change();
        }
    },
    getNote: function (id) {
        var self = this;
        var noteRef = new Firebase(this.firebase +...