WinJS Example

1/8/2016 - 8:03 PM
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>tryWinJs</title>
    <link href="winjs/css/ui-light.min.css" rel="stylesheet" />
    <script src="winjs/js/base.min.js"></script>
    <script src="winjs/js/ui.min.js"></script>
    <style>
body{
    height: 100%;
}
.content,
#app {
    height: 100%;
}

    /* SplitView pane content style*/
    #app .header {
        white-space: nowrap;
    }

    #app .title {
        font-size: 25px;
        left: 50px;
        margin-top: 6px;
        vertical-align: middle;
        display: inline-block;
    }

    #app .nav-commands {
        margin-top: 20px;
    }

.win-splitviewcommand-button {
    background-color: transparent;
}

#app .win-splitview-pane-hidden .win-splitviewcommand-button {
    width: 46px;
}

#app .win-splitview-pane-hidden .win-splitviewcommand-label {
    /* Workaround: Make sure pane doesn't scroll if ContentDialog restores focus to
       NavBarCommand's label
    */
    visibility: hidden;
}

/*SplitView content style*/

.not-small {
    display: none;
}

#app .win-splitview-content {
    background-color: rgba(237,237,237,1);
}

#app .contenttext {
    margin-left: 20px;
    margin-top: 6px;
    height: 100%;
}

    #app .contenttext h1 {
        font-family: Broadway;
        font-size: 40px;
    }

/*SplitView pane show button style*/
button.win-splitview-button {
    float: left;
    box-sizing: border-box;
    height: 48px;
    width: 48px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border: 1px dotted transparent;
    margin: 0;
    outline: none;
    background-color: transparent;
}

html.win-hoverable button.win-splitview-button:hover {
    background-color: rgba(255,255,255, 0.1);
}

button.win-splitview-button.win-splitview-button:active,
button.win-splitview-button.win-splitview-button:hover:active {
    background-color: rgba(255,255,255, 0.2);
}

button.win-splitview-button.win-keyboard:focus {
    border-color: rgb(255, 255, 255);
}

button.win-splitview-button:after {
    font-size: 24px;
    font-family: 'Segoe MDL2 Assets', 'Symbols';
    content: "\E700";
}

#app .description table tr td {
    padding-left: 20px;
}


/*Home vs page controls*/

.show-page .home-ui {
    display: none;
}

.show-home .page-ui {
    display: none;
}

.home-ui {
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
    overflow: auto;
}
    </style>
        
    <script>
/* global WinJS */
(function () {
    "use strict";

    var app = WinJS.Application;

    var mySplitView = window.mySplitView = {
        splitView: null,
        pageClicked: WinJS.UI.eventHandler(function (ev) {
            var pageId = ev.currentTarget.dataset.pageId;
            var page = [{
                title: "Page 1", description: "Page 1 description"
            }, {
                title: "Page 2", description: "Page 2 description"
            }, {
                title: "Page 3", description: "Page 3 description"
            }][pageId];

            //add remove tags
            document.getElementById("app").classList.add("show-page");
            document.getElementById("app").classList.remove("show-home");

            //update title
            var titleElt = document.body.querySelector(".page-title");
            titleElt.textContent = page.title;

            //update description
            var descriptionElt = document.body.querySelector(".page-description");
            descriptionElt.textContent = page.description;
        }),
        homeClicked: WinJS.UI.eventHandler(function (ev) {
            //add remove tags
            document.getElementById("app").classList.add("show-home");
            document.getElementById("app").classList.remove("show-page");
        }),    
    };

    //processAll
    WinJS.UI.processAll().then(function () {
        mySplitView.splitView = document.querySelector(".splitView").winControl;
        new WinJS.UI._WinKeyboard(mySplitView.splitView.paneElement);
    });

    app.start();
})();
    </script>
</head>
<body>
<div id="app" class="show-home win-type-body">
    <!-- SPLIT VIEW -->
    <div class="splitView" data-win-control="WinJS.UI.SplitView">
        <!-- Pane area -->
        <div>
            <div class="header">
                <button
                    class="win-splitviewpanetoggle"
                    data-win-control="WinJS.UI.SplitViewPaneToggle"
                    data-win-options="{ splitView: select('.splitView') }"
                ></button>
                <div class="title"><h2 class="win-h2">All Pages</h2></div>
                
            </div>
            <div class="nav-commands">
                <div data-win-control="WinJS.UI.SplitViewCommand" 
                     data-win-options="{ 
                        label: 'Home', 
                        icon: 'home',
                        oninvoked: mySplitView.homeClicked
                    }"></div>
                
                <!--icons: https://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx-->
                <div data-page-id="0" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Page 1', icon: 'contactpresence', oninvoked: mySplitView.pageClicked}"></div>
                <div data-page-id="1" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Page 2', icon: 'fourbars', oninvoked: mySplitView.pageClicked}"></div>
                <div data-page-id="2" data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Page 3', icon: 'settings', oninvoked: mySplitView.pageClicked}"></div>
            </div>
        </div>
         <!-- Content area -->
        <button
            class="win-splitviewpanetoggle second-button not-small"
            data-win-control="WinJS.UI.SplitViewPaneToggle"
            data-win-options="{ splitView: select('.splitView') }"
        ></button>
        <div class="contenttext">
            <div class="page-ui"> 
                <!-- PAGE DESCRIPTION -->
                <div class="description"> 
                    <!-- this is where the title, location and description are injected for each hiking page -->
                    <h2 class="page-title"></h2>
                    <p class="page-description" id="description-content"></p>
                </div>
            </div>  <!-- closes page-ui-->
            <div class="home-ui">
                <h2 class = "win-h2">Home Page</h2>
            </div>
    </div> 
</div>

</body>
</html>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

WinJS Example
