Dispatch Markup

by Eric Blanchette

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://1-ps.googleusercontent.com/h/www.htmldrive.net/edit_media/2011/201108/20110816/jquery-horizontal-scrollbars/jquery.horizontal.scroll.js.pagespeed.jm.J-mQ-w4Ko1.js"></script>
Dyanmic height?
assigned

<div class="dispatch">
    <div class="toolbar">
        <select id="filter"></select>
    </div>
    
    
    
    <h4 class="name">Inbox</h4>

    <div class="inbox">
        <div class="outerDiv">
            <ul class="source connected"></ul>
        </div>
        <div class="clear"></div>
    </div>
    
    <h4 class="name">Users</h4>
    
    <div class="outbox">
        <div class="outerDiv">
            <ul id="users" class="users"></ul>
        </div>
        <div class="clear"></div>
    </div>
    
</div>

<div id="cardTemplate" class="template">
    <li class="card">
        <div class="title"></div>
        <div class="clear"></div>
        <meter value=".5" high=".8" optimium="1"></meter>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
          </div>
        </div>
        
        
Index: <span class="orderingIndex"></span>
        
        <div class="clear"></div>
        
        <div class="dueDate">??/??/????</div>
        <div class="estimate">? / ?</div>
        
        <div class="clear"></div>

    </li>
</div>
<div id="userTemplate" class="template">
    <li class="user"> <span class="name"></span>
[<span class="group"></span>]
        <ul class="target connected"></ul>
    </li>  
</div>

<div id="ribbonTemplate" class="template">
    <div class="ribbon">
        <div class="title"></div>
    </div>
</div>

CSS

.dispatch {
    padding:10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.toolbar{
    float:right;
}

.inbox,
.outbox {
    /*background-color:#fcf8e3;*/
    margin:10px;
}

ul.source, ul.target {
    min-height: 50px;
    margin: 0px 25px 10px 0px;
    padding: 2px;
    list-style-type: none;
    list-style-position: inside;
}
ul.source {
    border-color: #f8e0b1;
}
ul.target {
    width:315px;
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-color: #add38d;
}
.source li {
    float:left;
}
.source li, .target li {
    margin: 5px;
    padding: 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    //text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.source li {
    background-color: white;
    border: 1px solid #fbeed5;
    color: #c09853;
}
.target li {
    background-color: #ebf5e6;
    border: 1px solid #d6e9c6;
    color: #468847;
}
.sortable-dragging {
    border-color: #ccc !important;
    background-color: #fafafa !important;
    color: #bbb !important;
}
.sortable-placeholder {
}
.source .sortable-placeholder {
    border: 2px dashed #f8e0b1 !important;
    background-color: #fefcf5 !important;
    height:80px;
}
.target .sortable-placeholder {
    border: 2px dashed #add38d !important;
    background-color: #f6fbf4 !important;
    height:80px;
}
.outerDiv {
    overflow:auto;
}
.dragHelper {
    opacity:0.4;
    -webkit-transform: rotate(-5deg);
}

.template {
    display:none;
}
.clear {
    clear:both;
}

.users {
    overflow:auto;
    padding:0;
}

.user {
    width:340px;
    float:left;
    display: inline-block;
    margin: 0 2px 5px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 5px;
    padding-bottom:...

JavaScript

$(function () {

    var $scope = $(this);

    $scope.users = [];
    $scope.cards = [];

    // Templates
    var cardTemplate = $("#cardTemplate").html();
    var userTemplate = $("#userTemplate").html();
    var ribbonTemplate = $("#ribbonTemplate").html();
    
    var $source = $(".source"),
        $users = $("#users"),
        users = ["Mike", "Ted", "Glen", "Carey", "Barry", "Mark"];

    // Configure Filters
    var $filter = $("#filter");
    var filters = ["ALL", "SUPPORT", "BILLING", "DEVELOPMENT", "DESIGN"];
    for (var i = 0; i < filters.length; i++) {
        $filter.append("<option>" + filters[i] + "</options>");
    }
    $filter.on("change", function () {
        $scope.filter = $(this).val();
        $scope.trigger("filter-change");
    });

    function loadUsers(eventName) {

        for (var i = 0; i < users.length; i++) {
            
            counter++;

            var user = {
                _id: counter,
                name: users[i],
                group: filters[(i % (filter.length - 1)) + 1]
            }

            $scope.trigger('user-add', user);
        }
    }

    function addUser(eventName, user) {
        var $user = $(userTemplate);
        $user.attr("id", "user-" + user._id);
        $user.data("_id", user._id);
        $user.fadeIn("slow");
        $users.append($user);
        $scope.users.push(user);
        $scope.trigger('user-update', user);
    }
    
    function updateUser(eventName, user){
        
        console.log('u', user);
        
        var $user = $('#user-' + user._id);

        if ($user && $user.length > 0) {
            $user.find(".name").text(user.name);
            $user.find(".group").text(user.group);
            $user.addClass(user.group);
            
            $user.fadeOut("fast",
                function () {
                    $user.fadeIn("fast");
                });
        }
    }
    
    // Dummy counter remove me
    var counter = 0;

    function loadCards(eventName)...