navigator.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. (function () {
  2. "use strict";
  3. var nav = WinJS.Navigation;
  4. WinJS.Namespace.define("Application", {
  5. PageControlNavigator: WinJS.Class.define(
  6. // Define the constructor function for the PageControlNavigator.
  7. function PageControlNavigator(element, options) {
  8. this._element = element || document.createElement("div");
  9. this._element.appendChild(this._createPageElement());
  10. this.home = options.home;
  11. this._eventHandlerRemover = [];
  12. var that = this;
  13. function addRemovableEventListener(e, eventName, handler, capture) {
  14. e.addEventListener(eventName, handler, capture);
  15. that._eventHandlerRemover.push(function () {
  16. e.removeEventListener(eventName, handler);
  17. });
  18. };
  19. addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
  20. addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
  21. window.onresize = this._resized.bind(this);
  22. Application.navigator = this;
  23. }, {
  24. home: "",
  25. /// <field domElement="true" />
  26. _element: null,
  27. _lastNavigationPromise: WinJS.Promise.as(),
  28. _lastViewstate: 0,
  29. // This is the currently loaded Page object.
  30. pageControl: {
  31. get: function () { return this.pageElement && this.pageElement.winControl; }
  32. },
  33. // This is the root element of the current page.
  34. pageElement: {
  35. get: function () { return this._element.firstElementChild; }
  36. },
  37. // This function disposes the page navigator and its contents.
  38. dispose: function () {
  39. if (this._disposed) {
  40. return;
  41. }
  42. this._disposed = true;
  43. WinJS.Utilities.disposeSubTree(this._element);
  44. for (var i = 0; i < this._eventHandlerRemover.length; i++) {
  45. this._eventHandlerRemover[i]();
  46. }
  47. this._eventHandlerRemover = null;
  48. },
  49. // Creates a container for a new page to be loaded into.
  50. _createPageElement: function () {
  51. var element = document.createElement("div");
  52. element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);
  53. element.style.position = "absolute";
  54. element.style.visibility = "hidden";
  55. element.style.width = "100%";
  56. element.style.height = "100%";
  57. return element;
  58. },
  59. // Retrieves a list of animation elements for the current page.
  60. // If the page does not define a list, animate the entire page.
  61. _getAnimationElements: function () {
  62. if (this.pageControl && this.pageControl.getAnimationElements) {
  63. return this.pageControl.getAnimationElements();
  64. }
  65. return this.pageElement;
  66. },
  67. _navigated: function () {
  68. this.pageElement.style.visibility = "";
  69. WinJS.UI.Animation.enterPage(this._getAnimationElements()).done();
  70. },
  71. // Responds to navigation by adding new pages to the DOM.
  72. _navigating: function (args) {
  73. var newElement = this._createPageElement();
  74. this._element.appendChild(newElement);
  75. this._lastNavigationPromise.cancel();
  76. var that = this;
  77. this._lastNavigationPromise = WinJS.Promise.as().then(function () {
  78. return WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state);
  79. }).then(function parentElement(control) {
  80. var oldElement = that.pageElement;
  81. // Cleanup and remove previous element
  82. if (oldElement.winControl) {
  83. if (oldElement.winControl.unload) {
  84. oldElement.winControl.unload();
  85. }
  86. oldElement.winControl.dispose();
  87. }
  88. oldElement.parentNode.removeChild(oldElement);
  89. oldElement.innerText = "";
  90. });
  91. args.detail.setPromise(this._lastNavigationPromise);
  92. },
  93. // Responds to resize events and call the updateLayout function
  94. // on the currently loaded page.
  95. _resized: function (args) {
  96. if (this.pageControl && this.pageControl.updateLayout) {
  97. this.pageControl.updateLayout.call(this.pageControl, this.pageElement);
  98. }
  99. },
  100. }
  101. )
  102. });
  103. })();