From 6d2b95e94309d3b420b08e3ae1d00baee8334033 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 3 Jul 2012 23:41:11 +0200
Subject: [PATCH] DocPanel: add loading indication

---
 source/Ox.UI/js/Code/DocPanel.js | 53 ++++++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/source/Ox.UI/js/Code/DocPanel.js b/source/Ox.UI/js/Code/DocPanel.js
index 2dfef38e..69da031f 100644
--- a/source/Ox.UI/js/Code/DocPanel.js
+++ b/source/Ox.UI/js/Code/DocPanel.js
@@ -23,6 +23,7 @@ Ox.DocPanel <f> Documentation Panel
         resize <a|[128, 256, 384]> List resize positions
         runTests <b|false> If true, run tests
         selected <s|''> Id of the selected item
+        showLoading <b|false> If true, show loading icon when parsing files
         showTests <b|false> If true, show test results in list
         showTooltips <b|false> If true, show test result tooltips in list
         size <s|256> Default list size
@@ -56,6 +57,7 @@ Ox.DocPanel = function(options, self) {
             results: null,
             runTests: false,
             selected: '',
+            showLoading: false,
             showTests: false,
             showTooltips: false,
             size: 256,
@@ -112,16 +114,20 @@ Ox.DocPanel = function(options, self) {
     );
 
     if (self.options.files && self.options.files.length) {
-        self.options.files = Ox.makeArray(self.options.files);
-        self.options.items = Ox.doc(self.options.files.map(function(file) {
-            return self.options.path + file;
-        }), function(docItems) {
-            self.options.items = docItems;
-            getExamples(function() {
-                self.$sidebar.replaceElement(1, self.$toolbar);
-                renderList();
-                self.options.runTests && runTests();
-                that.triggerEvent('load', {items: self.options.items});
+        setTimeout(function() {
+            self.options.showLoading && showLoadingScreen();
+            self.options.files = Ox.makeArray(self.options.files);
+            self.options.items = Ox.doc(self.options.files.map(function(file) {
+                return self.options.path + file;
+            }), function(docItems) {
+                self.options.items = docItems;
+                getExamples(function() {
+                    self.options.showLoading && hideLoadingScreen();
+                    self.$sidebar.replaceElement(1, self.$toolbar);
+                    renderList();
+                    self.options.runTests && runTests();
+                    that.triggerEvent('load', {items: self.options.items});
+                });
             });
         });
     } else {
@@ -219,6 +225,11 @@ Ox.DocPanel = function(options, self) {
             : 'No tests';
     }
 
+    function hideLoadingScreen() {
+        self.$loadingIcon.stop().remove();
+        self.$loadingText.remove();
+    }
+
     function parseFiles(callback) {
         var counter = 0,
             docItems = [],
@@ -357,6 +368,28 @@ Ox.DocPanel = function(options, self) {
         that.triggerEvent('select', {id: self.options.selected});
     }
 
+    function showLoadingScreen() {
+        self.$loadingIcon = Ox.LoadingIcon({size: 16})
+            .css({
+                position: 'absolute',
+                left: (self.$page.width() - self.options.size) / 2 - 8,
+                top: self.$page.height() / 2 - 20
+            })
+            .appendTo(self.$page)
+            .start();
+        self.$loadingText = $('<div>')
+            .addClass('OxLight')
+            .css({
+                position: 'absolute',
+                left: (self.$page.width() - self.options.size) / 2 - 128,
+                top: self.$page.height() / 2 + 4,
+                width: 256,
+                textAlign: 'center'
+            })
+            .html('Generating Documentation...')
+            .appendTo(self.$page);
+    }
+
     function sortByTitle(a, b) {
         var a = Ox.stripTags(a.title).toLowerCase(),
             b = Ox.stripTags(b.title).toLowerCase();