xirzec/appbar.js

## appbar.js
(function () {
    "use strict";

    function doSearch() {
        if (WinJS.Navigation.location !== '/pages/search/search.html') {
            WinJS.Navigation.navigate('/pages/search/search.html');
        }
    }

    function doSignIn() {
        Application.Auth.signIn();
    }

    function doSignOut() {
        Application.Auth.signOut();
    }

    function updateLayout() {
        var location = WinJS.Navigation.location;
        var signedIn = Application.Auth.signedIn;
        var appBar = document.getElementById("appbar").winControl;

        var commands = [];

        var page = Application.navigator.pageControl;
        if (page.getCommands) {
            commands = page.getCommands(signedIn);
        }

        if (commands.length === 0) {
            appBar.disabled = true;
        } else {
            appBar.disabled = false;
        }

        appBar.showOnlyCommands(commands);
    }

    WinJS.Namespace.define("Application.AppBar", {
        doSignIn: WinJS.Utilities.markSupportedForProcessing(doSignIn),
        doSignOut: WinJS.Utilities.markSupportedForProcessing(doSignOut),
        doSearch: WinJS.Utilities.markSupportedForProcessing(doSearch),
        updateLayout: updateLayout
    });

})();

## default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinTube.WindowsPhone</title>

    <!-- WinJS references -->
    <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
    based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- WinTube references -->
    <link href="/css/phone.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

    <!-- Shared references -->
    <script src="/js/appbar.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/navigator.js"></script>
    <script src="/js/binding.js"></script>
    <script src="/js/util.js"></script>
</head>
<body class="phone">
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{}"> <!-- closedDisplayMode: 'minimal' -->
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'search', label:'Search', icon:'find', onclick: Application.AppBar.doSearch }" type="button"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'signIn', label:'Sign In', section: 'selection', onclick: Application.AppBar.doSignIn }" type="button"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'signOut', label:'Sign Out', section: 'selection', onclick: Application.AppBar.doSignOut }" type="button"></button>
    </div>
</body>
</html>

## home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) {
            this.pivot = element.querySelector('.hub').winControl;
            this.pivot.onselectionchanged = (function () {
                this.updateLayout(element);
            }).bind(this);
        },
        updateLayout: function (element) {
            var activePage = this.pivot.selectedItem.contentElement.querySelector('.pagecontrol');
            if (activePage) {
                var pageControl = activePage.winControl;
                pageControl.updateLayout(activePage);
            }
        },
        getCommands: function (signedIn) {
            return ['search'];
        }
    });
})();

## navigator.js
(function () {
    "use strict";

    var nav = WinJS.Navigation;

    WinJS.Namespace.define("Application", {
        PageControlNavigator: WinJS.Class.define(
            // Define the constructor function for the PageControlNavigator.
            function PageControlNavigator(element, options) {
                this._element = element || document.createElement("div");
                this._element.appendChild(this._createPageElement());

                this.home = options.home;

                this._eventHandlerRemover = [];

                var that = this;
                function addRemovableEventListener(e, eventName, handler, capture) {
                    e.addEventListener(eventName, handler, capture);
                    that._eventHandlerRemover.push(function () {
                        e.removeEventListener(eventName, handler);
                    });
                };

                addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
                addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
                window.onresize = this._resized.bind(this);

                Application.navigator = this;
            }, {
                home: "",
                /// <field domElement="true" />
                _element: null,
                _lastNavigationPromise: WinJS.Promise.as(),
                _lastViewstate: 0,

                // This is the currently loaded Page object.
                pageControl: {
                    get: function () { return this.pageElement && this.pageElement.winControl; }
                },

                // This is the root element of the current page.
                pageElement: {
                    get: function () { return this._element.firstElementChild; }
                },

                // This function disposes the page navigator and its contents.
                dispose: function () {
                    if (this._disposed) {
                        return;
                    }

                    this._disposed = true;
                    WinJS.Utilities.disposeSubTree(this._element);
                    for (var i = 0; i < this._eventHandlerRemover.length; i++) {
                        this._eventHandlerRemover[i]();
                    }
                    this._eventHandlerRemover = null;
                },

                // Creates a container for a new page to be loaded into.
                _createPageElement: function () {
                    var element = document.createElement("div");
                    element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);
                    element.style.position = "absolute";
                    element.style.visibility = "hidden";
                    element.style.width = "100%";
                    element.style.height = "100%";
                    return element;
                },

                // Retrieves a list of animation elements for the current page.
                // If the page does not define a list, animate the entire page.
                _getAnimationElements: function () {
                    if (this.pageControl && this.pageControl.getAnimationElements) {
                        return this.pageControl.getAnimationElements();
                    }
                    return this.pageElement;
                },

                _navigated: function () {
                    this.pageElement.style.visibility = "";
                    WinJS.UI.Animation.enterPage(this._getAnimationElements()).done();
                    // call updateLayout to show the relevant AppBar commands
                    if (Application.AppBar) {
                        Application.AppBar.updateLayout();
                    }
                },

                // Responds to navigation by adding new pages to the DOM.
                _navigating: function (args) {
                    var newElement = this._createPageElement();
                    this._element.appendChild(newElement);

                    this._lastNavigationPromise.cancel();

                    var that = this;

                    function cleanup() {
                        if (that._element.childElementCount > 1) {
                            var oldElement = that._element.firstElementChild;
                            // Cleanup and remove previous element
                            if (oldElement.winControl) {
                                if (oldElement.winControl.unload) {
                                    oldElement.winControl.unload();
                                }
                                oldElement.winControl.dispose();
                            }
                            if (oldElement.parentNode) {
                                oldElement.parentNode.removeChild(oldElement);
                            }
                            oldElement.innerText = "";
                        }
                    }

                    this._lastNavigationPromise = WinJS.Promise.as().then(function () {
                        return WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state);
                    }).then(cleanup, cleanup);

                    args.detail.setPromise(this._lastNavigationPromise);
                },

                // Responds to resize events and call the updateLayout function
                // on the currently loaded page.
                _resized: function (args) {
                    if (this.pageControl && this.pageControl.updateLayout) {
                        this.pageControl.updateLayout.call(this.pageControl, this.pageElement);
                    }
                }
            }
        )
    });
})();
	(function () {
	"use strict";

	function doSearch() {
	if (WinJS.Navigation.location !== '/pages/search/search.html') {
	WinJS.Navigation.navigate('/pages/search/search.html');
	}
	}

	function doSignIn() {
	Application.Auth.signIn();
	}

	function doSignOut() {
	Application.Auth.signOut();
	}

	function updateLayout() {
	var location = WinJS.Navigation.location;
	var signedIn = Application.Auth.signedIn;
	var appBar = document.getElementById("appbar").winControl;

	var commands = [];

	var page = Application.navigator.pageControl;
	if (page.getCommands) {
	commands = page.getCommands(signedIn);
	}

	if (commands.length === 0) {
	appBar.disabled = true;
	} else {
	appBar.disabled = false;
	}

	appBar.showOnlyCommands(commands);
	}

	WinJS.Namespace.define("Application.AppBar", {
	doSignIn: WinJS.Utilities.markSupportedForProcessing(doSignIn),
	doSignOut: WinJS.Utilities.markSupportedForProcessing(doSignOut),
	doSearch: WinJS.Utilities.markSupportedForProcessing(doSearch),
	updateLayout: updateLayout
	});

	})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>WinTube.WindowsPhone</title>

	<!-- WinJS references -->
	<!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
	based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
	<link href="/css/ui-themed.css" rel="stylesheet" />
	<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
	<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

	<!-- WinTube references -->
	<link href="/css/phone.css" rel="stylesheet" />
	<script src="/js/default.js"></script>

	<!-- Shared references -->
	<script src="/js/appbar.js"></script>
	<script src="/js/auth.js"></script>
	<script src="/js/navigator.js"></script>
	<script src="/js/binding.js"></script>
	<script src="/js/util.js"></script>
	</head>
	<body class="phone">
	<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
	<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{}"> <!-- closedDisplayMode: 'minimal' -->
	<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'search', label:'Search', icon:'find', onclick: Application.AppBar.doSearch }" type="button"></button>
	<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'signIn', label:'Sign In', section: 'selection', onclick: Application.AppBar.doSignIn }" type="button"></button>
	<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'signOut', label:'Sign Out', section: 'selection', onclick: Application.AppBar.doSignOut }" type="button"></button>
	</div>
	</body>
	</html>
	(function () {
	"use strict";

	WinJS.UI.Pages.define("/pages/home/home.html", {
	ready: function (element, options) {
	this.pivot = element.querySelector('.hub').winControl;
	this.pivot.onselectionchanged = (function () {
	this.updateLayout(element);
	}).bind(this);
	},
	updateLayout: function (element) {
	var activePage = this.pivot.selectedItem.contentElement.querySelector('.pagecontrol');
	if (activePage) {
	var pageControl = activePage.winControl;
	pageControl.updateLayout(activePage);
	}
	},
	getCommands: function (signedIn) {
	return ['search'];
	}
	});
	})();
	(function () {
	"use strict";

	var nav = WinJS.Navigation;

	WinJS.Namespace.define("Application", {
	PageControlNavigator: WinJS.Class.define(
	// Define the constructor function for the PageControlNavigator.
	function PageControlNavigator(element, options) {
	this._element = element \|\| document.createElement("div");
	this._element.appendChild(this._createPageElement());

	this.home = options.home;

	this._eventHandlerRemover = [];

	var that = this;
	function addRemovableEventListener(e, eventName, handler, capture) {
	e.addEventListener(eventName, handler, capture);
	that._eventHandlerRemover.push(function () {
	e.removeEventListener(eventName, handler);
	});
	};

	addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
	addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
	window.onresize = this._resized.bind(this);

	Application.navigator = this;
	}, {
	home: "",
	/// <field domElement="true" />
	_element: null,
	_lastNavigationPromise: WinJS.Promise.as(),
	_lastViewstate: 0,

	// This is the currently loaded Page object.
	pageControl: {
	get: function () { return this.pageElement && this.pageElement.winControl; }
	},

	// This is the root element of the current page.
	pageElement: {
	get: function () { return this._element.firstElementChild; }
	},

	// This function disposes the page navigator and its contents.
	dispose: function () {
	if (this._disposed) {
	return;
	}

	this._disposed = true;
	WinJS.Utilities.disposeSubTree(this._element);
	for (var i = 0; i < this._eventHandlerRemover.length; i++) {
	this._eventHandlerRemover[i]();
	}
	this._eventHandlerRemover = null;
	},

	// Creates a container for a new page to be loaded into.
	_createPageElement: function () {
	var element = document.createElement("div");
	element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);
	element.style.position = "absolute";
	element.style.visibility = "hidden";
	element.style.width = "100%";
	element.style.height = "100%";
	return element;
	},

	// Retrieves a list of animation elements for the current page.
	// If the page does not define a list, animate the entire page.
	_getAnimationElements: function () {
	if (this.pageControl && this.pageControl.getAnimationElements) {
	return this.pageControl.getAnimationElements();
	}
	return this.pageElement;
	},

	_navigated: function () {
	this.pageElement.style.visibility = "";
	WinJS.UI.Animation.enterPage(this._getAnimationElements()).done();
	// call updateLayout to show the relevant AppBar commands
	if (Application.AppBar) {
	Application.AppBar.updateLayout();
	}
	},

	// Responds to navigation by adding new pages to the DOM.
	_navigating: function (args) {
	var newElement = this._createPageElement();
	this._element.appendChild(newElement);

	this._lastNavigationPromise.cancel();

	var that = this;

	function cleanup() {
	if (that._element.childElementCount > 1) {
	var oldElement = that._element.firstElementChild;
	// Cleanup and remove previous element
	if (oldElement.winControl) {
	if (oldElement.winControl.unload) {
	oldElement.winControl.unload();
	}
	oldElement.winControl.dispose();
	}
	if (oldElement.parentNode) {
	oldElement.parentNode.removeChild(oldElement);
	}
	oldElement.innerText = "";
	}
	}

	this._lastNavigationPromise = WinJS.Promise.as().then(function () {
	return WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state);
	}).then(cleanup, cleanup);

	args.detail.setPromise(this._lastNavigationPromise);
	},

	// Responds to resize events and call the updateLayout function
	// on the currently loaded page.
	_resized: function (args) {
	if (this.pageControl && this.pageControl.updateLayout) {
	this.pageControl.updateLayout.call(this.pageControl, this.pageElement);
	}
	}
	}
	)
	});
	})();