pending message prototype

by HugeHugh

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<div class="message-list">
    <div class="message">
        <div class="message-inner">
            some test message text
        </div>
    </div>
    <div class="message">
        <div class="message-inner">
            some test message text
        </div>
    </div>
    <div class="message message-pending">
        <div class="message-inner">
            some test message text
        </div>
    </div>
    <div class="message message-pending">
        <div class="message-inner">
            some test message text
        </div>
    </div>
    <div class="pending-loader greenGrad" data-bind="visible: pendingVisible, style: { height: pendingHeight }"></div>
</div>

CSS

.message-list {
    position: relative;
    width: 400px;
    padding-left: 8px;
}
.message {
    margin: 4px 0;
    background: #f6f6f6;
    padding: 10px;
}
.message-pending {
    background: #f2fff2;
}
.pending-loader {
    position: absolute;
    left:0;
    width: 8px;
    bottom: 0;
    background-size: 100% 40px;
    -webkit-animation: greenbars_anim 1s linear infinite;
    animation: greenbars_anim 1s linear infinite;
}

@-webkit-keyframes greenbars_anim
{
  0% {
      background-position:0 40px;
  }
  100% {
      background-position:0 0;
  }
}
@keyframes greenbars_anim
{
  0% {
      background-position:0 30px;
  }
  100% {
      background-position:0 0;
  }
}

.greenGrad2 {
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #F2FFF2),
	color-stop(0.2, #F2FFF2),
	color-stop(0.4, #177814),
	color-stop(0.6, #177814),
	color-stop(0.8, #F2FFF2),
	color-stop(1, #F2FFF2)
);
background-image: -o-linear-gradient(bottom, #F2FFF2 0%, #F2FFF2 20%, #177814 40%, #177814 60%, #F2FFF2 80%, #F2FFF2 100%);
background-image: -moz-linear-gradient(bottom, #F2FFF2 0%, #F2FFF2 20%, #177814 40%, #177814 60%, #F2FFF2 80%, #F2FFF2 100%);
background-image: -webkit-linear-gradient(bottom, #F2FFF2 0%, #F2FFF2 20%, #177814 40%, #177814 60%, #F2FFF2 80%, #F2FFF2 100%);
background-image: -ms-linear-gradient(bottom, #F2FFF2 0%, #F2FFF2 20%, #177814 40%, #177814 60%, #F2FFF2 80%, #F2FFF2 100%);
background-image: linear-gradient(to bottom, #F2FFF2 0%, #F2FFF2 20%, #177814 40%, #177814 60%, #F2FFF2 80%, #F2FFF2 100%);
}

.greenGrad {
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgba(255,255,255,0)),
    color-stop(0.3, rgba(255,255,255,0)),
    color-stop(0.4, rgb(74, 250, 118)),
    color-stop(0.6, rgb(74, 250, 118)),
    color-stop(0.7, rgba(255,255,255,0)),
    color-stop(1, rgba(255,255,255,0))
);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgb(74,...

JavaScript

$(function() {
    var pendingVisible = ko.observable(false);
    var pendingHeight = ko.observable(0);
    
    function doPending() {
        var pendingMessages = $('.message-pending');
        var minTop = 1000000000, maxBottom = 0;
        pendingMessages.each(function(index, item) {
            console.log('ot=' + item.offsetTop);
            minTop = Math.min(minTop, item.offsetTop);
            maxBottom = Math.max(maxBottom, item.offsetTop + item.clientHeight);
        });
        pendingHeight(maxBottom - minTop + 'px');
        pendingVisible(true);
    }
    
    doPending();
    
    var viewModel = {
        pendingVisible: pendingVisible,
        pendingHeight: pendingHeight
    };
    
    ko.applyBindings(viewModel);
});