sidr knockout

Sidr in a custom binding

by anup1986

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="shadow">
    <div id="wrapper" class="parent">
        <div class="kid">
            <div class="row-fluid">
                 <h1>Miscellaneous <small>A place for testing new functionality</small></h1>

            </div>
            <div class="row-fluid">
                <button class="btn" id="sideBar" type="button" data-bind="sider: { view: '#aMenu' }">Left menu</button>
            </div>
        </div>
    </div>
    <div class="child-form">
        <div class="child-kid"></div>
    </div>
    <div id="aMenu">
        <ul class="unstyled">
            <li><a href="#">Dashboard</a>
            </li>
            <li><a href="#">New Assignments</a>
            </li>
            <li><a href="#">My Assignments</a>
            </li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    background-color: lightgrey;
}
#aMenu {
    display: none;
}
.shadow {
    -webkit-box-shadow: 0 0 0 0 white, 0 4px 11px 4px rgba(122, 139, 160, 0.8), 9px 0 11px -4px rgba(122, 139, 160, 0.8), -9px 0 11px -4px rgba(122, 139, 160, 0.8);
    -moz-box-shadow: 0 0 0 0 white, 0 4px 11px 4px rgba(122, 139, 160, 0.8), 9px 0 11px -4px rgba(122, 139, 160, 0.8), -9px 0 11px -4px rgba(122, 139, 160, 0.8);
    box-shadow: 0 0 0 0 white, 0 4px 11px 4px rgba(122, 139, 160, 0.8), 9px 0 11px -4px rgba(122, 139, 160, 0.8), -9px 0 11px -4px rgba(122, 139, 160, 0.8);
}
.parent {
    height: 530px !important;
    width: 100%;
    padding-top: 20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.kid {
    padding-left: 40px;
    padding-right: 40px;
}
.child-form {
    width: 100% !important;
    height: 125px;
    background-color: #e9e8e8;
}
.child-kid {
    padding-right: 40px;
    padding-left: 40px;
}
.sidr {
    display:none;
    position:absolute;
    position:fixed;
    top:0;
    height:100%;
    z-index:999999;
    width:260px;
    overflow-x:none;
    overflow-y:auto;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
    font-size:15px;
    background:#f8f8f8;
    color:#333;
    -webkit-box-shadow:inset 0 0 5px 5px #ebebeb;
    -moz-box-shadow:inset 0 0 5px 5px #ebebeb;
    box-shadow:inset 0 0 5px 5px #ebebeb
}
.sidr .sidr-inner {
    padding:0 0 15px
}
.sidr .sidr-inner>p {
    margin-left:15px;
    margin-right:15px
}
.sidr.right {
    left:auto;
    right:-260px
}
.sidr.left {
    left:-260px;
    right:auto
}
.sidr h1, .sidr h2, .sidr h3, .sidr h4, .sidr h5, .sidr h6 {
    font-size:11px;
    font-weight:normal;
    padding:0 15px;
    margin:0 0 5px;
    color:#333;
    line-height:24px;
    background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));
    background-image:-webkit-linear-gradient(#ffffff, #dfdfdf);
    background-image:-moz-linear-gradient(#ffffff,...

JavaScript

/*! Sidr - v1.1.1 - 2013-03-14
 * https://github.com/artberri/sidr
 * Copyright (c) 2013 Alberto Varela; Licensed MIT */ (function (e) {
    var t = !1,
        i = !1,
        o = {
            isUrl: function (e) {
                var t = RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$", "i");
                return t.test(e) ? !0 : !1
            },
            loadContent: function (e, t) {
                e.html(t)
            },
            addPrefix: function (e) {
                var t = e.attr("id"),
                    i = e.attr("class");
                "string" == typeof t && "" !== t && e.attr("id", t.replace(/([A-Za-z0-9_.\-]+)/g, "sidr-id-$1")), "string" == typeof i && "" !== i && "sidr-inner" !== i && e.attr("class", i.replace(/([A-Za-z0-9_.\-]+)/g, "sidr-class-$1")), e.removeAttr("style")
            },
            execute: function (o, n, s) {
                "function" == typeof n ? (s = n, n = "sidr") : n || (n = "sidr");
                var a, d, l, c = e("#" + n),
                    f = e(c.data("body")),
                    u = e("html"),
                    p = c.outerWidth(!0),
                    y = c.data("speed"),
                    v = c.data("side");
                if ("open" === o || "toogle" === o && !c.is(":visible")) {
                    if (c.is(":visible") || t) return;
                    if (i !== !1) return r.close(i, function () {
                        r.open(n)
                    }), void 0;
                    t = !0, "left" === v ? (a = {
                        left: p + "px"
                    }, d = {
                        left: "0px"
                    }) : (a = {
                        right: p + "px"
                    }, d = {
                        right: "0px"
                    }), l = u.scrollTop(), u.css("overflow-x", "hidden").scrollTop(l), f.css({
                   ...