From 2e7ce603ffd0aca5c5a5e4815ca8966265991e44 Mon Sep 17 00:00:00 2001
From: Sam Hemelryk <sam@moodle.com>
Date: Wed, 13 Jun 2012 12:01:19 +1200
Subject: [PATCH 1/2] MDL-33423 filepicker: Added delay and fade in to loading
 icon

---
 repository/filepicker.js | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/repository/filepicker.js b/repository/filepicker.js
index f5ec4a6501f..bfa61d8e401 100644
--- a/repository/filepicker.js
+++ b/repository/filepicker.js
@@ -518,7 +518,7 @@ M.core_filepicker.init = function(Y, options) {
     Y.extend(FilePickerHelper, Y.Base, {
         api: M.cfg.wwwroot+'/repository/repository_ajax.php',
         cached_responses: {},
-
+        waitinterval : null, // When the loading template is being displayed and its animation is running this will be an interval instance.
         initializer: function(options) {
             this.options = options;
             if (!this.options.savepath) {
@@ -1188,7 +1188,37 @@ M.core_filepicker.init = function(Y, options) {
             }, this);
         },
         wait: function() {
-            this.fpnode.one('.fp-content').setContent(M.core_filepicker.templates.loading);
+            // First check there isn't already an interval in play, and if there is kill it now.
+            if (this.waitinterval != null) {
+                clearInterval(this.waitinterval);
+            }
+            // Prepare the root node we will set content for and the loading template we want to display as a YUI node.
+            var root = this.fpnode.one('.fp-content');
+            var content = Y.Node.create(M.core_filepicker.templates.loading).setStyle('visibility', 'hidden').setStyle('opacity', 0);
+            var count = 0;
+            // Initiate an interval, we will have a count which will increment every 100 milliseconds.
+            // Count 0 - the loading icon will have visibility set to hidden (invisible) and have an opacity of 0 (invisible also)
+            // Count 5 - the visiblity will be switched to visible but opacity will still be at 0 (inivisible)
+            // Counts 6 - 15 opacity will be increased by 0.1 making the loading icon visible over the period of a second
+            // Count 16 - The interval will be cancelled.
+            var interval = setInterval(function(){
+                if (!content || !root.contains(content) || count >= 15) {
+                    clearInterval(interval);
+                    return true;
+                }
+                if (count == 5) {
+                    content.setStyle('visibility', 'visible');
+                } else if (count > 5) {
+                    var opacity = parseFloat(content.getStyle('opacity'));
+                    content.setStyle('opacity', opacity + 0.1);
+                }
+                count++;
+                return false;
+            }, 100);
+            // Store the wait interval so that we can check it in the future.
+            this.waitinterval = interval;
+            // Set the content to the loading template.
+            root.setContent(content);
         },
         viewbar_set_enabled: function(mode) {
             var viewbar = this.fpnode.one('.fp-viewbar')

From 9d7d2b03c8bca76306780cc3b1efcf31c3eed29e Mon Sep 17 00:00:00 2001
From: Sam Hemelryk <sam@moodle.com>
Date: Tue, 19 Jun 2012 16:49:28 +1200
Subject: [PATCH 2/2] MDL-33423 filepicker: Fixed visibility problem with
 loading icon

---
 repository/filepicker.js         | 4 ++--
 theme/base/style/filemanager.css | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/repository/filepicker.js b/repository/filepicker.js
index bfa61d8e401..0b1ae1df59f 100644
--- a/repository/filepicker.js
+++ b/repository/filepicker.js
@@ -1194,7 +1194,7 @@ M.core_filepicker.init = function(Y, options) {
             }
             // Prepare the root node we will set content for and the loading template we want to display as a YUI node.
             var root = this.fpnode.one('.fp-content');
-            var content = Y.Node.create(M.core_filepicker.templates.loading).setStyle('visibility', 'hidden').setStyle('opacity', 0);
+            var content = Y.Node.create(M.core_filepicker.templates.loading).addClass('fp-content-hidden').setStyle('opacity', 0);
             var count = 0;
             // Initiate an interval, we will have a count which will increment every 100 milliseconds.
             // Count 0 - the loading icon will have visibility set to hidden (invisible) and have an opacity of 0 (invisible also)
@@ -1207,7 +1207,7 @@ M.core_filepicker.init = function(Y, options) {
                     return true;
                 }
                 if (count == 5) {
-                    content.setStyle('visibility', 'visible');
+                    content.removeClass('fp-content-hidden');
                 } else if (count > 5) {
                     var opacity = parseFloat(content.getStyle('opacity'));
                     content.setStyle('opacity', opacity + 0.1);
diff --git a/theme/base/style/filemanager.css b/theme/base/style/filemanager.css
index 060485c7593..8726d950834 100644
--- a/theme/base/style/filemanager.css
+++ b/theme/base/style/filemanager.css
@@ -10,6 +10,7 @@
 .filemanager input[type="text"], .file-picker input[type="text"] {border: 1px solid #BBBBBB;width: 265px;height: 18px;padding: 1px 6px;}
 .filemanager select, .file-picker select {height: 22px;padding: 2px 1px;}
 .fp-content-center {height: 100%;width: 100%;display:table-cell;vertical-align: middle;}
+.fp-content-hidden {visibility: hidden;}
 
 /*
  * Dialogue (File Picker and File Manager)