#3 - Progress Indicator

inc/classes/BxDolTemplate.php

@@ -301,9 +301,11 @@ class BxDolTemplate extends BxDol {
         //--- Load default JS ---//
         $this->addJs(array(
             'jquery.js',
+            'jquery.migrate.js',
             'functions.js',
             'jquery.dolPopup.js',
             'jquery.ui.position.min.js',
+            BX_DOL_URL_PLUGINS . 'spin.min.js',
         ));
 
         //--- Load injection's cache ---//

inc/js/functions.js

@@ -21,9 +21,10 @@ function getHtmlData( elem, url, callback, method , confirmation)
 
     $block.css('position', 'relative'); // set temporarily for displaying "loading icon"
 
-    var $loadingDiv = $('<div class="bx-loading-ajax"><div class="bx-loading-ajax-rotating"></div></div>').appendTo($block);
+    bx_loading_content($block, true);
+    var $loadingDiv = $block.find('.bx-loading-ajax');
 
-     var iLeftOff = parseInt(($block.innerWidth() / 2.0) - ($loadingDiv.outerWidth()  / 2.0));
+    var iLeftOff = parseInt(($block.innerWidth() / 2.0) - ($loadingDiv.outerWidth()  / 2.0));
     var iTopOff  = parseInt(($block.innerHeight() / 2.0) - ($loadingDiv.outerHeight()));
     if (iTopOff<0) iTopOff = 0;
 
@@ -51,9 +52,10 @@ function getHtmlData( elem, url, callback, method , confirmation)
     } else {
 
         $block.load(url + '&_r=' + Math.random(), function() {
-	        $(this)
-			    .css('position', blockPos) // return previous value
-		        .addWebForms();
+	        $(this).css('position', blockPos); // return previous value
+
+            if ($.isFunction($.addWebForms))
+		        $(this).addWebForms();
 
             if (typeof callback == 'function')
                 callback.apply(this);
@@ -144,16 +146,25 @@ function showPopupAnyHtml(sUrl, sId) {
 }
 
 
+function bx_loading_animate (e) {
+    if (!e.length)
+        return false;
+    if (e.find('.bx-sys-spinner').length)
+        return false;
+    return new Spinner(aSpinnerOpts).spin(e.get(0));
+}
+
 function bx_loading_content (elem, b, isReplace) {
     var block = $(elem);
-    if (1 == b || true == b) {
+    if (!b) {
+        block.find(".bx-loading-ajax").remove();
+    } else if (!block.find('.bx-loading-ajax').length) {
         if ('undefined' != typeof(isReplace) && isReplace)
-            block.html('<div class="bx-loading-ajax" style="position:static;"><div class="bx-loading-ajax-rotating"></div></div>');
+            block.html('<div class="bx-loading-ajax" style="position:static;"></div>');
         else
-            block.append('<div class="bx-loading-ajax"><div class="bx-loading-ajax-rotating"></div></div>');
-    } else {
-        block.find(".bx-loading-ajax").remove();
-    }
+            block.append('<div class="bx-loading-ajax"></div>');
+        bx_loading_animate(block.find('.bx-loading-ajax'));
+    } 
 }
 
 function bx_loading (elem, b) {

inc/js/jquery.dolRSSFeed.js

@@ -7,7 +7,7 @@
 // jQuery plugin - Dolphin RSS Aggregator
 (function($){
     $.fn.dolRSSFeed = function(sForceUrl) {
-        return this.each( function(){
+        return this.each( function() {
 
             var $Cont = $(this);
             var iRSSID = $Cont.attr( 'rssid' );
@@ -19,6 +19,8 @@
 
             var sFeedURL = (sForceUrl != undefined) ? sForceUrl : sUrlRoot + 'get_rss_feed.php?ID=' + iRSSID + '&member=' + iMemID;
 
+            bx_loading_animate($(this).find('.bx-loading-ajax'));
+
             $.getFeed( {
                 url: sFeedURL ,
                 success: function(feed) {

samples/ajax.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    DolphinCore Samples
+ * @{
+ */
+
+/** 
+ * @page samples
+ * @section ajax AJAX loader
+ */
+
+$aPathInfo = pathinfo(__FILE__);
+require_once ($aPathInfo['dirname'] . '/../inc/header.inc.php');
+require_once(BX_DIRECTORY_PATH_INC . "params.inc.php");
+require_once(BX_DIRECTORY_PATH_INC . "design.inc.php");
+
+bx_import('BxDolLanguages');
+bx_import('BxTemplFunctions');
+
+if  (bx_get('ajax') || (isset( $_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
+    sleep(5);
+    echo '<div class="bx-def-padding bx-def-color-bg-block">AJAX content here: ' .  date(DATE_RFC822) . '</div>';
+    exit;
+}
+
+$oTemplate = BxDolTemplate::getInstance();
+$oTemplate->setPageNameIndex (BX_PAGE_DEFAULT);
+$oTemplate->setPageHeader ("AJAX");
+$oTemplate->setPageContent ('page_main_code', PageCompMainCode());
+$oTemplate->getPageCode();
+
+
+/**
+ * page code function
+ */
+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>';
+
+    return DesignBoxContent("AJAX", ob_get_clean(), BX_DB_PADDING_DEF);
+}
+
+
+/** @} */

template/_header.html

@@ -19,6 +19,24 @@
     <bx_include_js />
     <script type="text/javascript" language="javascript">
         var sUrlRoot = '<bx_url_root />';
+        var aSpinnerOpts = {
+            lines: 8, // 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
+            corners: 1, // Corner roundness (0..1)
+            rotate: 0, // The rotation offset
+            direction: 1, // 1: clockwise, -1: counterclockwise
+            color: '#165ea1', // #rgb or #rrggbb or array of colors
+            speed: 1, // Rounds per second
+            trail: 60, // Afterglow percentage
+            shadow: false, // Whether to render a shadow
+            hwaccel: false, // Whether to use hardware acceleration
+            className: 'bx-sys-spinner', // The CSS class to assign to the spinner
+            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
+        };        
     </script>
     __extra_js__
 

template/css/common.css

@@ -161,12 +161,11 @@ blockquote {
 
 .bx-loading-ajax {
     position:absolute;
-    width:43px;
-    height:11px;
+    width:60px;
+    height:60px;
     z-index:10;
     margin-left:auto;
     margin-right:auto;
-    padding:10px 10px;
 
     background-color:rgb(148, 189, 233);
     background-color:rgba(128, 169, 213, 0.5);
@@ -178,13 +177,6 @@ blockquote {
     text-align:center;
     color:#CCCCCC;
 }
-.bx-loading-ajax-rotating {
-    width:43px;
-    height:11px;
-    z-index:11;
-
-    background-image:url(../images/loading.gif);
-}
 
 /* --------------- button */