progress bar

danwilson · Mar 7, 2014 · f1fb18b · f1fb18b
1 parent ea81da7
commit f1fb18b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 5 deletions.
diff --git a/Responsive/Responsive/css/default.css b/Responsive/Responsive/css/default.css
@@ -5,6 +5,16 @@ body {
     background: #fdfdff url(../images/win8talk.png) left top no-repeat; 
 }
 
+progress {
+    width: 100%;
+    position:absolute;
+    top: 1rem;
+    left: 0;
+}
+progress.inactive {
+    display: none;
+}
+
 #contenthost {
     height: 100%;
     width: 100%;

diff --git a/Responsive/Responsive/default.html b/Responsive/Responsive/default.html
@@ -20,6 +20,7 @@
     <script src="/js/SelectableList.js"></script>
 </head>
 <body>
+    <progress></progress>
     <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/groupedItems/groupedItems.html'}"></div>
     <div id="appbar" data-win-control="WinJS.UI.AppBar">
         <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'refreshCommand', label:'Refresh', icon:'refresh'}" type="button"></button>

diff --git a/Responsive/Responsive/js/navigator.js b/Responsive/Responsive/js/navigator.js
@@ -81,6 +81,7 @@
 
                 _navigated: function () {
                     this.pageElement.style.visibility = "";
+                    document.querySelector('progress').classList.add('inactive');
                     WinJS.UI.Animation.enterPage(this._getAnimationElements()).done();
                 },
 

diff --git a/Responsive/Responsive/pages/author/author.js b/Responsive/Responsive/pages/author/author.js
@@ -24,6 +24,7 @@
 
         // This function is called whenever a user navigates to this page.
         ready: function (element, options) {
+            document.querySelector('progress').classList.remove('inactive');
             this.element.querySelector(".titlearea .pagetitle").textContent = options.name;
             this.listView = document.querySelector('.groupeditemslist').winControl;
             this.listView.addEventListener('iteminvoked', this._itemInvoked.bind(this));
@@ -69,7 +70,7 @@
             nav.navigate("/pages/itemDetail/itemDetail.html", { item: item });
         },
         stopProgress: function () {
-
+            document.querySelector('progress').classList.add('inactive');
         },
         getGroupKey: function (data) {
             return data.group;

diff --git a/Responsive/Responsive/pages/groupedItems/groupedItems.js b/Responsive/Responsive/pages/groupedItems/groupedItems.js
@@ -111,17 +111,15 @@
         },
 
         updateLayout: function (element) {
-            /// <param name="element" domElement="true" />
-            document.querySelector('.groupeditemslist').winControl.recalculateItemPosition();
-            // TODO: Respond to changes in layout.
+            element.querySelector('.groupeditemslist').winControl.recalculateItemPosition();
         },
 
         _itemInvoked: function (args) {
             var item = this.groupedItems.getAt(args.detail.itemIndex);
             nav.navigate("/pages/itemDetail/itemDetail.html", { item: item });
         },
         stopProgress: function () {
-
+            document.querySelector('progress').classList.add('inactive');
         },
         compareGroups: function (a, b) {
             return a - b;

diff --git a/Responsive/Responsive/pages/groupedItemsCustom/groupedItems.js b/Responsive/Responsive/pages/groupedItemsCustom/groupedItems.js
@@ -19,6 +19,7 @@
         // This function is called whenever a user navigates to this page.
         ready: function (element, options) {
             this.element = element;
+            document.querySelector('progress').classList.remove('inactive');
             this.pastries.done(function (resp) {
                 this.stopProgress();
                 if (resp && resp.response && resp.response.length) {