Avi Menu Angular

by Avi Algaly

HTML

<script src="https://raw.github.com/timrwood/moment/1.7.2/min/moment.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link href='https://raw.github.com/FortAwesome/Font-Awesome/master/css/font-awesome.css'  rel='stylesheet' type='text/css'/>
<div class="page" ng-app="myapp">
    <div class="content" ng-controller="MainMenuController">
        <header class="clearfix">
            <nav class="main">
                <ul class="menu horizontal main">
                    <li ng-repeat="menuItem in menu" class="{{ menuItem.className }}" ng-class="{ selected: currentMenu == menuItem}" style="margin-left: 0;">
                        <a href="#" ng-click="setMenu(menuItem)">{{ menuItem.text }}<span class="counter" ng-show="notificationCount(menuItem.className) > 0" >
                            {{ notificationCount(menuItem.className) }}</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </header>
        <ul class="message-list" ng-show="currentMenu.className == 'messages'">
            <li ng-repeat="message in messages">
                <input type="checkbox" ng-model="message.isOld" /><span>{{ message.text }}</span>
                <span class="label">by</span><span>{{ message.createdBy }}</span>            
                <span class="label">on</span><span>{{ formatDate(message.createdOn) }}</span>            
            </li>        
        </ul>        
        <hr/>
        <div>
            <h3>Angular debug<h3>
            <button ng-click="loadMessages()">Get More Messages</button>
            <pre>{{ messages | json}}</pre>
                <pre>{{ currentMenu }}</pre>
        </div>
    </div>
</div>

SCSS

body {
  font-family: 'Signika', sans-serif;
  font-size: 1em;
}

$text-color-brown: #8d8676;

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

nav.main {
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    float: left;
}

.menu.horizontal {
    margin: 0;
    padding: 0;    
    > li {
        display: inline-block;
        position: relative;
        margin: 0;        
        padding: 0;
        > a {
            text-decoration: none;            
            text-transform: capitalize;
            display: block;           
        }        
    }
}

.menu.main {
    background: #ece6da;
    font-size: 14px;
    background: linear-gradient(to bottom, #ece6da 0%,#ddd2bc 100%); /* W3C */;
    background: -webkit-linear-gradient(top, #ece6da 0%,#ddd2bc 100%); /* Chrome10+,Safari5.1+ */
    float: left;
    text-shadow: 1px 1px 0px white; 
    white-space: nowrap;
    > li {
        border-right: 1px solid #fffae8;
        border-left: 1px solid #b5ad98;
        padding: 0 50px;
        height: 75px;
        margin-left: -5px;
        > a {
            color: $text-color-brown;
            position: relative;
            top: 50px;
            
        }

        .counter {
            position: absolute;
            background-color: #db3840;
            color: white;
            padding: 4px 8px;
            border-radius: 15px;
            top: -20px;    
            left: 15%;
            text-shadow: 1px 1px 0 #777;
            box-shadow: inset -1px 0px 0px #888;
            font-size: 12px;
            font-weight: 300;
        }

        &.selected {
            background: #c1baaa; /* Old browsers */
            background: -moz-linear-gradient(top, #c1baaa 0%, #ab9f8f 100%);...

JavaScript

var myapp = angular.module("myapp", []);
var MessageFactory = (function() {
    var creator = {
        create: function() {
            return {
                createdBy: "anonimous",
                createdOn: new Date(),
                text: "Lorem ipsum",
                isOld: false
            };
        },
        countNew: function(messages) {
            return _.countBy(messages, function(message) { 
              return message.isOld ? 'old' : 'new'; 
            }).new;
        }
    };
    
    return creator;
})();

function getStubMessages(count) {
    var messages = [];
    count = count || Math.floor((Math.random()*10)+1);
    for (var i = 0; i < count; i++) {
        messages.push(MessageFactory.create());
    }
    return messages;
}

var MainMenuController = function($scope) {
    $scope.menu = [
        { id: "rel-menu", text: "reliance", className: "reliance" },
        { id: "msg-menu", text: "messages", className: "messages" },
        { id: "not-menu", text: "notifications", className: "notifications" },
        { id: "pay-menu", text: "payments", className: "payments" }
    ];
    $scope.messages = getStubMessages(5);
    $scope.formatDate = function(date) {
        return moment(date).format("DD/MM/YYYY");
    };
    $scope.loadMessages = function() {
        var newMessages = getStubMessages();
        $scope.messages = $scope.messages.concat(newMessages);
    };
    
    $scope.notificationCount = function(notificationType) {
        var notificationCount = 0;
        switch(notificationType) {
            case "messages":
                notificationCount = MessageFactory.countNew($scope.messages);
                break;
        }
        return notificationCount;
    };
    
    $scope.setMenu = function(menuItem) {;
        $scope.currentMenu = menuItem;
    };
    $scope.currentMenu = $scope.menu[0];
};