Bakckbone + KendoUI: PanelBar With Marionette

Combining BackboneJS and KendoUI controls

by aaronaudic

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.wreqr/0.1.0/backbone.wreqr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.eventbinder/0.1.0/backbone.eventbinder.min.js "></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js"></script>
<script src="//mock.truthopoly.com/scripts/utilities/date.js"></script>
<script src="//mock.truthopoly.com/scripts/utilities/moment.js"></script>
<link rel="stylesheet" href="//mock.truthopoly.com/assets/css/application.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2013.1.319/styles/kendo.black.min.css">
<script type="text/html" id="book-view-template">
    <div class="itemdiv dialogdiv" itemscope itemtype="http://schema.org/Comment" style="padding-bottom: 10px;">

					<div class="user" itemprop="avatar">
                        {{ userType == "admin" ? '<a class="userName"><img src="http://mock.truthopoly.com/images/comments/star_red_16.png" class="imgStar" alt="Admin" title="Admin" /></a>' : userType == "moderator" ? '<a class="userName"><img src="http://mock.truthopoly.com/images/comments/star_yellow_16.png" class="imgStar" alt="Moderator" title="Moderator" /></a>' : '' }}
                        
                        <a class="userName">{{ avatarSmall == "blankman_avatar_sm.jpg" & gender == "female" ? '<img src="http://mock.truthopoly.com/images/avatars/blankWoman_avatar_sm.jpg" class="userType-' + userType + '" />' : '<img src="http://mock.truthopoly.com/images/avatars/' + avatarSmall + '" class="userType-' + userType + '" />'...

CSS

.book {
    margin: 10px 0px;
    padding: 0px 0px 5px 5px;
    border-bottom: 1px solid #ccc;
}

strong {
    font-weight: bold;
}

JavaScript

String.prototype.toVerboseDiff = function (startTime) {

    var date1 = new Date(startTime);
    var date2 = Date.now();
    var timeDiff = Math.abs(date2 - date1);
    //var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    //var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
    //return diffDays​;

    var d = timeDiff / 1000;
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);
    
    if (s <= 60 & m == 0 & h == 0) {
        return s + " sec" + (s != 1 ? "s" : "") + " ago";
    } else if (m <= 60 & h == 0) {
        return m + " min" + (s > 0 ? ", " + s + " sec" + (s != 1 ? "s" : "") : "") + " ago";
    } else {
        if (h <= (moment().hours() - moment().startOf('day').hours())) {
            return "Today at " + moment(startTime).format("h:mm a");
        }
        else if (h <= (moment().hours() - moment().startOf('day').hours() + 24)) {
            return "Yesterday at " + moment(startTime).format("h:mm a");
        } else {
            return moment(startTime).format("MMM Do [at] h:mm a");
        }
    } 

    //return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
}

function subtractTimes(startTime, endTime) {
    //var a = moment(endTime);
    //var b = moment();
    //return a.from(b); // "a day ago"

    //console.log(new Date(moment(endTime).format("YYYY"), moment(endTime).format("MM"), moment(endTime).format("DD"), moment(endTime).format("h"), moment(endTime).format("mm"), moment(endTime).format("ss")));

    var dateDiff = function (d1, d2) {
        var diff = Math.abs(d1 - d2);
        //console.log(d1 + " , " + d2);
        if (Math.floor(diff / 86400000)) {
            return Math.floor(diff / 86400000) + " days";
        } else if (Math.floor(diff / 3600000)) {
            return Math.floor(diff / 3600000) + " hours";
        } else if (Math.floor(diff / 60000)) {
            //var seconds;
        ...