From f6e61a68fa86cedc6ddec96edfd8eb230fb9c98b Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Sat, 20 Feb 2010 13:59:03 +0530
Subject: [PATCH] adding loading icon

---
 build/css/ox.ui.css                 |  15 ++++++
 build/js/ox.ui.js                   |  77 ++++++++++++++++++++++------
 build/png/ox.ui.classic/loading.png | Bin 0 -> 4771 bytes
 demos/test/index.html               |  29 ++++++++++-
 4 files changed, 103 insertions(+), 18 deletions(-)
 create mode 100644 build/png/ox.ui.classic/loading.png

diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 6ef3f68..3e46f2c 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -651,3 +651,18 @@ Panels
     bottom: 0;
     overflow: hidden;
 }
+
+/*
+================================================================================
+Requests
+================================================================================
+*/
+
+.OxLoadingIcon {
+    opacity: 0;
+}
+
+.OxLoadingIcon.OxMedium {
+    width: 16px;
+    height: 16px;
+}
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 61c3fb0..b264003 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -2230,7 +2230,9 @@ requires
                 .addClass("OxExtras")
                 .appendTo(that.$element);
             $.each(self.options.extras, function(position, extra) {
-                extra.appendTo(that.extras);
+                extra.css({
+                    float: "left" // fixme: need class!
+                }).appendTo(that.extras);
             });
         }
 
@@ -3188,23 +3190,64 @@ requires
         
     };
 
-})();
+    /*
+    ============================================================================
+    Requests
+    ============================================================================
+    */
 
-/*
-============================================================================
-Requests
-============================================================================
-*/
+    /*
+    ----------------------------------------------------------------------------
+    Ox.LoadingIcon
+    ----------------------------------------------------------------------------
+    */
 
-/*
-----------------------------------------------------------------------------
-Ox.Progressbar
-----------------------------------------------------------------------------
-*/
+    Ox.LoadingIcon = function(options, self) {
+        var self = self || {},
+            that = new Ox.Element("img", self)
+                .defaults({
+                    size: "medium"
+                })
+                .options(options || {})
+                .attr({
+                    src: oxui.path + "/png/ox.ui.classic/loading.png"
+                })
+                .addClass(
+                    "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
+                );
+        self.deg = 0;
+        function update() {
+            Ox.print(self.deg, "deg");
+            that.css({
+                MozTransform: "rotate(" + self.deg + "deg)",
+                WebkitTransform: "rotate(" + self.deg + "deg)"
+            });
+        }
+        that.start = function() {
+            self.deg = 0;
+            that.css({
+                opacity: 1
+            });
+            self.interval = setInterval(function() {
+                self.deg = (self.deg + 30) % 360;
+                update();
+            }, 83);
+        };
+        that.stop = function() {
+            clearTimeout(self.interval);
+            self.deg = 0;
+            that.css({
+                opacity: 0
+            });
+        }
+        return that;
+    }
 
-/*
-----------------------------------------------------------------------------
-Ox.Spinner
-----------------------------------------------------------------------------
-*/
+    /*
+    ----------------------------------------------------------------------------
+    Ox.Progressbar
+    ----------------------------------------------------------------------------
+    */
 
+
+})();
\ No newline at end of file
diff --git a/build/png/ox.ui.classic/loading.png b/build/png/ox.ui.classic/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..82153b7ead5c5d5386683baddbc71e2cd9692cbe
GIT binary patch
literal 4771
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

literal 0
HcmV?d00001

diff --git a/demos/test/index.html b/demos/test/index.html
index dfa8229..bef1056 100644
--- a/demos/test/index.html
+++ b/demos/test/index.html
@@ -59,6 +59,13 @@
                     borderBottom: "1px solid rgb(160, 160, 160)"
                 })*/;
 
+                var loadingIcon = new Ox.LoadingIcon({
+                        size: "medium"
+                    })
+                    .css({
+                        marginLeft: "4px"
+                    });
+
                 var mainMenu = new Ox.MainMenu({
                     extras: [
                         new Ox.Input({
@@ -107,7 +114,8 @@
                             id: "find",
                             label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
                             labelWidth: 96
-                        }).width(320)
+                        }).width(320),
+                        loadingIcon
                     ],
                     menus: [
                         {
@@ -169,6 +177,12 @@
                     ],
                     size: "large"
                 });
+                Ox.Event.bind(null, "submit_find", function(data) {
+                    loadingIcon.start();
+                    setTimeout(function() {
+                        loadingIcon.stop();
+                    }, 5000);
+                });
                 var bottomPanel = Ox.Bar({size: "small"})
                     .css({
                         zIndex: 2,
@@ -455,6 +469,19 @@
                     placeholder: ["City", "State"],
                     selected: 1
                 }).addClass("margin").width(160).appendTo(mainPanel);
+                Ox.Button({
+                    selectable: true,
+                    size: size,
+                    type: "text",
+                    value: "Foo"
+                }).addClass("margin").appendTo(mainPanel);
+                Ox.Button({
+                    selectable: true,
+                    size: size,
+                    type: "text",
+                    value: "Bar"
+                }).addClass("margin").appendTo(mainPanel);
+                
                 //*/
                 function openDialog() {
                     var $dialog = new Ox.Dialog({