Skip to content

Instantly share code, notes, and snippets.

@kasajian

kasajian/tryWinJs.html

Created January 8, 2016 20:03
Show Gist options
  • Save kasajian/9ea575fa0084b320549c to your computer and use it in GitHub Desktop.
Save kasajian/9ea575fa0084b320549c to your computer and use it in GitHub Desktop.
Download ZIP
WinJS Example
Raw
tryWinJs.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment