Firebase

Using firebase and knockout

by anup1986

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-m-6">
            <form data-bind="submit: post">
                <input data-bind="value: user" class="form-control" type="text" placeholder="User name" />
                <input data-bind="value: tweet" class="form-control" type="text" placeholder="Message" /> <span><button class="btn btn-primary" type="submit">Post</button></span>
 <span><button data-bind="click: deleteAll, disable: !hasPosts()" class="btn btn-danger pull-right" type="button">Clear all</button></span>

            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-m-6">
            <ul class="list-group" data-bind="template: { foreach: posts, beforeRemove: onItemDelete, afterAdd: onItemAdd }">
                <li class="list-group-item" data-bind="attr: { class: status }">
                    <div class="left-small-box">
                        <span data-bind="text: likes"></span>
                    </div>
                    <div class="content-box">
                    <b data-bind="text: user"></b> says:
                    <!-- ko text: tweet -->
                    <!-- /ko -->
                    </div>
                    <div class="right-small-box" data-bind="click: like">
                        <i class="glyphicon glyphicon-thumbs-up"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

span.badge.badge-danger {
    background: red;
}

.little-liked {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #c09853;
}

.semi-liked {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #3a87ad;
}

.alot-liked {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;    
}

.very-liked {
    color: #336699;
    border-color: #336699;
    
    background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.26, #ABCBD9),
	color-stop(1, #F2F2F2)
);
background-image: -o-linear-gradient(bottom, #ABCBD9 26%, #F2F2F2 100%);
background-image: -moz-linear-gradient(bottom, #ABCBD9 26%, #F2F2F2 100%);
background-image: -webkit-linear-gradient(bottom, #ABCBD9 26%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #ABCBD9 26%, #F2F2F2 100%);
background-image: linear-gradient(to bottom, #ABCBD9 26%, #F2F2F2 100%);
}

.content-box {
    position: relative;
    margin-left: 15px;
}

.left-small-box{
    position: absolute;
    padding: inherit;
    top: 0;
    left: 0;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    width: 25px;
    border-right: 1px solid #ddd;
}

.right-small-box {
    position: absolute;
    padding: inherit;
    top: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    width: 45px;
    border-left: 1px solid #ddd;
}

.right-small-box:hover {
    opacity: 0.5;
    transition: all 0.3s ease-in;
    background: #ddd;
}

/* your custom CSS \*/
 </style> <!-- access to the HEAD element --> <style> <meta name="viewport" content="width=device-width, user-scalable=no">

JavaScript

var firebase = new Firebase('https://uppstrom.firebaseio.com/items');

var aTweet = function (data, firebaseName) {
    var self = this;
    self.id = ko.observable(firebaseName);
    ko.mapping.fromJS(data, {}, self);

    self.fullMsg = ko.computed(function () {
        return self.user() + " - " + self.tweet();
    });

    self.like = function () {        
        self.likes(self.likes() + 1);
    };

    self.status = ko.computed(function () {
        var clss = 'list-group-item ';
        switch (true) {
            case (self.likes() === 0):
                return clss;
            case (self.likes() >= 1 && self.likes() < 3):
                return clss + 'little-liked';
            case (self.likes() >= 3 && self.likes() < 5):
                return clss + 'semi-liked';
            case (self.likes() >= 5 && self.likes() < 8):
                return clss + 'alot-liked';
            default:
                return clss + 'very-liked';
        }
    });
};

var viewModel = function () {
    var self = this;

    self.posts = ko.observableArray();

    self.hasPosts = ko.computed(function () {
        return self.posts ? self.posts().length > 0 : false;
    });

    self.user = ko.observable();
    self.tweet = ko.observable();

    self.post = function () {
        if (!self.tweet()) return;

        self.user(self.user() ? self.user() : 'Anonymous');

        firebase.push({
            user: self.user(),
            tweet: self.tweet(),
            likes: 0,
            liked: false,
            checked: false
        });

        self.tweet('');
        if (self.user() == 'Anonymous') self.user('');
    };

    self.delete = function (item) {
        var child = firebase.child(item.fName);
        child.remove();
    };

    self.deleteAll = function () {
        firebase.remove();
    };

    firebase.on('child_added', function (snapshot) {
        var item = new aTweet(snapshot.val(), snapshot.name());
        self.posts.unshift(item);
        
      ...