#3 - Progress Indicator for buttons

inc/js/functions.js

@@ -146,7 +146,18 @@ function showPopupAnyHtml(sUrl, sId) {
 }
 
 
+function bx_loading_btn (e, b) {
+    e = $(e);
+    if (!b) {
+        e.find('.bx-loading-ajax-btn').remove();
+    } else if (!e.find('.bx-loading-ajax-btn').length) {
+        e.append('<b class="bx-loading-ajax-btn"></b>');
+        new Spinner(aSpinnerSmallOpts).spin(e.find('.bx-loading-ajax-btn').get(0));
+    }
+}
+
 function bx_loading_animate (e) {
+    e = $(e);
     if (!e.length)
         return false;
     if (e.find('.bx-sys-spinner').length)

samples/ajax.php

@@ -21,7 +21,7 @@ bx_import('BxDolLanguages');
 bx_import('BxTemplFunctions');
 
 if  (bx_get('ajax') || (isset( $_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
-    sleep(5);
+    sleep(3);
     echo '<div class="bx-def-padding bx-def-color-bg-block">AJAX content here: ' .  date(DATE_RFC822) . '</div>';
     exit;
 }
@@ -39,10 +39,22 @@ $oTemplate->getPageCode();
 function PageCompMainCode() {
 
     ob_start();
-
-    echo '<button class="bx-btn" onclick="getHtmlData(\'bx-result\', \'' . BX_DOL_URL_ROOT . 'samples/ajax.php?ajax=1\')">Нажми Меня</button><div class="bx-clear"></div>';
-    echo '<div id="bx-result" style="width:500px; height:200px;" class="bx-def-border bx-def-round-corners bx-def-margin-top"></div>';
-
+?>
+    <script>
+    function ajaxTest(e) {
+        bx_loading_btn(e, 1);
+        getHtmlData('bx-result', 'samples/ajax.php?ajax=1', function () {
+            bx_loading_btn(e, 0);
+        });
+    }
+    </script>
+    <button class="bx-btn" onclick="getHtmlData('bx-result', 'samples/ajax.php?ajax=1')">Нажми Меня</button>
+    <button class="bx-btn bx-def-margin-left" onclick="ajaxTest(this)">И Меня!</button>
+
+    <div class="bx-clear"></div>
+
+    <div id="bx-result" style="width:500px; height:200px;" class="bx-def-border bx-def-round-corners bx-def-margin-top"></div>
+<?php
     return DesignBoxContent("AJAX", ob_get_clean(), BX_DB_PADDING_DEF);
 }
 

template/_header.html

@@ -20,10 +20,10 @@
     <script type="text/javascript" language="javascript">
         var sUrlRoot = '<bx_url_root />';
         var aSpinnerOpts = {
-            lines: 8, // The number of lines to draw
+            lines: 7, // The number of lines to draw
             length: 0, // The length of each line
             width: 8, // The line thickness
-            radius: 10, // The radius of the inner circle
+            radius: 7, // The radius of the inner circle
             corners: 1, // Corner roundness (0..1)
             rotate: 0, // The rotation offset
             direction: 1, // 1: clockwise, -1: counterclockwise
@@ -36,7 +36,13 @@
             zIndex: 2e9, // The z-index (defaults to 2000000000)
             top: 'auto', // Top position relative to parent in px
             left: 'auto' // Left position relative to parent in px
-        };        
+        };
+        var aSpinnerSmallOpts = $.extend({}, aSpinnerOpts, {
+            lines: 6,
+            width: 6,
+            radius: 4,
+            color: '#333'
+        }); 
     </script>
     __extra_js__
 

template/css/common.css

@@ -161,8 +161,8 @@ blockquote {
 
 .bx-loading-ajax {
     position:absolute;
-    width:60px;
-    height:60px;
+    width:50px;
+    height:50px;
     z-index:10;
     margin-left:auto;
     margin-right:auto;
@@ -172,12 +172,20 @@ blockquote {
 
 	border-radius:5px;
 	-moz-border-radius:5px;
-	-webkit-border-radius:5px;	
+	-webkit-border-radius:5px;
 
     text-align:center;
     color:#CCCCCC;
 }
 
+.bx-loading-ajax-btn {
+    display:inline-block;
+    width:20px;
+    height:20px;
+    margin-left:5px;
+    vertical-align:middle;
+}
+
 /* --------------- button */
 
 .bx-btn {