Cartera .09

kendo,router() and kendo MVVM,

by kidsysco

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>
<!-- http://css.dzone.com/articles/css3-responsive-menu -->
<!-- http://css-tricks.com/perfect-full-page-background-image/ -->
<!-- http://webplayer.yahoo.com/docs/how-to-set-up/ -->
<div id="BackgroundImageDescription" class="hide">
    <a id="BackgroundCloseButton" src="#" class="pull-right white-link"><i class="icon-remove icon-white"></i></a>
    <h3>
        <span class="name"></span>
        <small class="location"></small>
        <small>(<span class="year"></span>)</small></h3>
    <p>
        <span class="description"></span>
    </p>
</div>
<section id="SiteHeader" class="container">
    <div class="row">
        <div class="span12">
            <div class="site-title">CARTERA <small><br class="visible-tiny" />by KidSysco (Ryan Segura)</small>

            </div>
            <nav class="primary">
                <ul id="PrimaryNavigation">
                    <li class="active"><a id="Home" href="#"><i class="icon-home"></i><br />Home</a>

                    </li>
                    <li><a id="Graphics" href="#/Graphics"><i class="icon-picture"></i><br />Graphics</a>

                    </li>
                    <li><a id="WebDev" href="#/WebDev"><i class="icon-globe"></i><br />Web Dev</a>

                    </li>
                    <li><a id="Music" href="#/Music"><i class="icon-volume-up"></i><br />Music</a>

                    </li>
                    <li><a id="Contact" href="#/Contact"><i...

CSS

/* Silly JSFiddle hack needed to insert meta tags into the DOM */
 </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--[if IE 7]> <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" rel="stylesheet"> <![endif]--> <script type="text/javascript"> var YWPParams= {
    termDetection:"on", displaystate: 0, volume: 0.3, defaultalbumart:'http://ubuntuone.com/5nYHSSMNnFSBiBEuBU9woV'
}
;
 </script> <script id="ThumbnailTemplate" type="text/x-kendo-template"> <div class="thumb-tile" data-bind="events:{ click: ClickThumbnail }"> <img data-bind="attr:{src: ThumbnailUrl, title: Name, alt: Name}" /></div> </script> <script id="MusicTemplate" type="text/x-kendo-template"> <tr> <td><span data-bind="text: TrackNumber"></span>.</td> <td><a type="audio/mpeg" class="htrack" data-bind="text: Name, attr:{href: Mp3Url}"></a></td> <td>KidSysco</td> <td>2:56</td> <td>2003</td> </tr> </script> <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"> </script> <style> @import url('http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css');
 @import url('http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css');

/******* Typography *******/
 a.white-link, a.white-link:visited {
    color: #fff;
    text-decoration: none;
}
a.white-link:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
a, a:visited {
    color: #0740a7;
}
a:hover {
    color: #002aff;
}
a.btn, a.btn:visited {
    color: #000;
}
h1, h2, h3 {
    line-height: 20px;
}
/******* Layout *******/
 html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}
#SiteHeader {
    
    z-index: 100;
    top : 0px;
}
.site-header-relative{
    position: relative;
}
.site-header-fixed {
    position: fixed;
    left: 2%;
    right: 2%;
}
.site-title {
    font-size: 2.5em;
    font-weight: bold;
    padding: 14px 12px 6px 12px;
   ...

JavaScript

/**** Init Kendo Grid ****/

$(document).ready(function () {
    $("#SongList").kendoGrid({
        columns: [{
            field: "track",
            width: 25
        }, {
            field: "title",
            width: 190
        }, {
            field: "artist"
        }, {
            field: "time",
            width: 55
        }, {
            field: "year",
            width: 55
        }]
    });
});

/**** Primary Navigation View Model ****/

$(document).ready(function () {
    var _router = new kendo.Router(),
        _siteHeader = $('#SiteHeader'),
        _body = $('body');

    var PrimaryNavigationViewModel = kendo.observable({
        CurrentTabLink: '#Home',
        CurrentPanel: '#HomePanel',
        IsClickable: true,
        ClickHome: function () {
            var _tabLink = $('#Home');
            if (PrimaryNavigationViewModel.IsTabClickable(_tabLink)) {
                var _panel = $('#HomePanel');
                PrimaryNavigationViewModel.ChangePanel(_panel, _tabLink, function () {
                     _panel.show();
                   // _panel.slideDown(1000, function () {
                        PrimaryNavigationViewModel.set('IsClickable', true);
                   // });
                });
            }
        },
        ClickGraphics: function () {
            var _tabLink = $('#Graphics');
            if (PrimaryNavigationViewModel.IsTabClickable(_tabLink)) {
                var _panel = $('#GraphicsPanel');
                PrimaryNavigationViewModel.ChangePanel(_panel, _tabLink, function () {
                    _panel.show();
                    //_panel.slideDown(1000, function () {
                        PrimaryNavigationViewModel.set('IsClickable', true);
                    //});
                });
            }
        },
        ClickWebDev: function () {
            var _tabLink = $('#WebDev');
            if (PrimaryNavigationViewModel.IsTabClickable(_tabLink)) {
                var _panel = $('#WebDevPanel');
     ...