AngularJS Test Listview

Navigatable listview

by exe1

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div activity="mainmenu" id="main_menu" class="activity" ng-controller="MenuController as list">
            <div id="logo"></div>
            <listview list-length="6">
                <a list-item="" href="#" class="list-group-item" ng-repeat="item in list.items | slice: listview.start : listview.end">
                    {{item.title}}
                    <span class="glyphicon glyphicon-chevron-right to-right-side"></span>
                </a>
            </listview>
        </div>        
        <div activity="" id="tv_genres" class="activity" ng-controller="TVGenresController as list" ng-show="true" ng-if="true">
            <listview list-length="9">
                <a list-item="" href="#" class="list-group-item" ng-repeat="item in list.items | slice: listview.start : listview.end">
                    {{item.title}}
                    <span class="glyphicon glyphicon-chevron-right to-right-side"></span>
                </a>
            </listview>                        
        </div>

CSS

.to-right-side{
    float: right;
}
a.list-group-item:focus{
    background-color: rgba(255, 94, 0, 0.7);
    color: white;
    outline: inherit;
}
a.list-group-item:focus::before{
    background-image: radial-gradient(ellipse at 50% 150%, rgba(218, 73, 2, 0.81) 0%, rgba(0, 0, 0, 0) 80%);
    left: 0;
    bottom: 100%;
    content: '';
    position: absolute;
    width: 100%;
    height: 15px;
    
}
a.list-group-item:hover {
  color: white;
  background-color: transparent;
}
a.list-group-item {
    font-size: 28px;
    color: #FFF;
}

.list-group-item {
    margin-bottom: 9px;
    border-top: 1px solid rgba(244, 75, 0, 1);
    border-bottom: 1px solid rgba(244, 75, 0, 1);
    border-left: none;
    border-right: none;
     
    background-color: transparent;
}
body{
    background-image: url('http://newartcolorz.com/images/2014/2/desktop-wallpaper-8824-9163-hd-wallpapers.jpg');
    background-position: left top;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
div #logo {
    background-image: url('waldruhe-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 250px;
    height: 237px;
    margin: auto;
    margin-bottom: 20px;
    display: block;
}
div#main_menu {
    background-color: rgba(0, 0, 0, 0.50);
    width: 25%;
    height: 100%;
    margin-left: 5%;
    margin-top: 0;
    padding: 0;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
 /* -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;*/
}   

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
    /*-webkit-transform: translateX(-100%); /* Safari */    
    /*transform: translateX(-100%);*/
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
    opacity: 1
}
.activity {
    width: 55%;
    float: left;
    background-color: rgba(0, 0, 0, 0.59);
   ...

JavaScript

var myapp = angular.module('testTV', ['ngAnimate']);
    /**
     * Register 'undefined' with the `undefined` value.
     */
    myapp.constant('undefined');
    
    myapp.filter('slice', function() {
        return function(arr, start, end) {
            return arr.slice(start, end)
        }
    });

 myapp.controller('MenuController', ['stalker',  function(stalker){
        var list = this;
        list.items = [{title: 'TV'}, {title: 'Radio'}, {title: 'Zimmerservice'}, {title: 'Informationen'}, {title: 'YouTube'}];
    }]);

    myapp.controller('TVGenresController', ['stalker', function(stalker){
        var list = this;
        
        list.items = [];
        
        stalker.getTVGenres()
            .success(function(data){
                if(data.status == "OK")
                    list.items = data.results
        });
    }]);
    myapp.factory('keyboard', ['undefined', '$document', function(undefined, $document) {
    var keyboardService = {};
        
    keyboardService.Activities = {};
    keyboardService.Activities.elements = []
    keyboardService.itemElements = [];
    keyboardService.itemModels = [];
    keyboardService.firstItem = undefined;
    keyboardService.prevItem = undefined;
    keyboardService.activeItem = undefined;
    keyboardService.nextItem = undefined;
    keyboardService.lastItem = undefined;
    keyboardService.selectElement = undefined;
    keyboardService.itemsLength = undefined;
    
    keyboardService.prevElement = function() {
        var prevElementIndex = this.itemElements.indexOf(this.activeItem) - 1;
        if(this.firstItem !== this.activeItem){
            this.nextItem = this.activeItem;
            this.prevItem = this.itemElements[prevElementIndex];
            this.activeItem = this.prevItem;
            this.activeItem.focus();
        }
        else {
            if(this.listview.start > 0) {
                this.selectElement = this.listview.listLength - 1;
                this.listview.start -=...