Added dajax wrapper and loading indicators

apps/front/static/css/base.css

@@ -170,3 +170,18 @@ a.disabled {
     display: inline-block;
     text-align: center;
 }
+
+.ajax_loader {
+    background: url("../img/ajax-loader.gif") no-repeat center center transparent;
+    width: 100%;
+    height: 100%;
+}
+
+.paged-content {
+    position: relative;
+    overflow: hidden;
+}
+
+#global-loader {
+    display: none;
+}

apps/front/static/js/ajax-loader.js

@@ -0,0 +1,56 @@
+/*
+ * Ajax overlay 1.0
+ * Author: Simon Ilett @ aplusdesign.com.au
+ * Descrip: Creates and inserts an ajax loader for ajax calls / timed events
+ * Date: 03/08/2011
+ */
+function ajaxLoader(el, options) {
+    // Becomes this.options
+    var defaults = {
+        bgColor: '#ffffff',
+        duration: 100,
+        opacity: 0.7,
+        classOveride: false
+    }
+    this.options = jQuery.extend(defaults, options);
+    this.container = $(el);
+
+    this.init = function () {
+        var container = this.container;
+        // Delete any other loaders
+        this.remove();
+        // Create the overlay
+        var overlay = $('<div></div>').css({
+            'background-color': this.options.bgColor,
+            'opacity': this.options.opacity,
+            'width': container.width(),
+            'height': container.height(),
+            'position': 'absolute',
+            'top': '0px',
+            'left': '0px',
+            'z-index': 1029 //bootstrap navi index is 1030
+        }).addClass('ajax_overlay');
+        // add an overiding class name to set new loader style
+        if (this.options.classOveride) {
+            overlay.addClass(this.options.classOveride);
+        }
+        // insert overlay and loader into DOM
+        container.append(
+            overlay.append(
+                $('<div></div>').addClass('ajax_loader')
+            ).fadeIn(this.options.duration)
+        );
+    };
+
+    this.remove = function () {
+        var overlay = this.container.children(".ajax_overlay");
+        if (overlay.length) {
+            overlay.fadeOut(this.options.classOveride, function () {
+                overlay.remove();
+            });
+        }
+    }
+
+    this.init();
+}	
+

apps/front/static/js/ajax-utils.js

@@ -1,13 +1,3 @@
-var ajaxSpinner = {
-    element: $("#hero"),
-    enable: function () {
-        this.element.spin();
-    },
-    disable: function () {
-        this.element.spin(false);
-    }
-};
-
 // delay the request, to reduce the amount of requests
 // --> the request is only sent if the query does not
 //     change during a defined delay.
@@ -43,3 +33,45 @@ var autocompleteDelay = {
         autocompleteDelay.ajaxFunction(autocompleteDelay.callback, data, config);
     }
 };
+
+
+// Wrapper object to inject pre and post execute to Dajaxice requests.
+// Used to show ajax loading status
+
+DajaxWrapper = function ($container) {
+    this.$container = $container;
+    this.ajaxLoader = null;
+    this.preLoad = function () {
+        this.$container.css({'min-height': '55px'});
+        this.ajaxLoader = new ajaxLoader(this.$container);
+        GlobalAjaxIndicator.showLoading();
+    };
+
+    this.postLoad = function () {
+        this.ajaxLoader.remove();
+        GlobalAjaxIndicator.hideLoading();
+    };
+
+    this.call = function (dajaxCall, callback, params, errorHandlers) {
+        this.preLoad();
+        var callbackProxy = function (data) {
+            callback(data);
+            this.postLoad();
+        };
+        dajaxCall(callbackProxy.bind(this), params, errorHandlers);
+    };
+};
+
+var GlobalAjaxIndicator = {
+    loader: $("#global-loader"),
+    showLoading: function () {
+        if (!this._count) this.loader.show();
+        ++this._count;
+    },
+    _count: 0,
+    hideLoading: function () {
+        --this._count;
+        if (!this._count) this.loader.hide();
+    }
+};
+

apps/front/static/js/paging.js

@@ -107,7 +107,10 @@ var Pager = function() {
         var filterQuery = this.getFilterQuery();
         var paramObject = this.getParamObject(filterQuery);
         this.loading = true;
-        Dajaxice.apps.front.paging(this.pagingCallback.bind(this), paramObject, {'error_callback': function() {
+
+        var callback = this.pagingCallback.bind(this);
+        var ajaxWrapper = new DajaxWrapper(this.$contentContainer);
+        ajaxWrapper.call(Dajaxice.apps.front.paging, callback, paramObject, {'error_callback': function() {
             alert('Error: Failed to fetch "' + paramObject.config_name + '" paging.');
         }});
     };
@@ -151,7 +154,7 @@ var Pager = function() {
 
     this.getFilterQuery = function() {
         if(this.$filterInput) {
-            if (this.$filterInput.val() != '') {
+            if(this.$filterInput.val() != '') {
                 return this.$filterInput.val();
             }
         }
@@ -208,7 +211,7 @@ var Pager = function() {
     this.getInitalURLParam = function() {
         var params = HashQuery.getHashQueryObject();
         for (var key in params) {
-            if (hasOwnProperty.call(params, key)) {
+            if(hasOwnProperty.call(params, key)) {
                 if(key == this.pageParam) {
                     var currIdx = parseInt(params[key]);
                     if(!isNaN(currIdx)) {

apps/front/templates/front/base.html

@@ -10,7 +10,7 @@
     <meta name="author" content="HSR University of Applied Sciences Rapperswil">
 
     <!-- styles -->
-    <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" media="screen">
+    <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" media="screen"/>
     <link href="{{ STATIC_URL }}css/base.css" rel="stylesheet" type="text/css"/>
     <link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet"/>
     <link href="{{ STATIC_URL }}css/select2.css" rel="stylesheet"/>
@@ -51,6 +51,10 @@
             <div class="nav-collapse collapse">
                 <div class="pull-right">
                     <ul class="nav pull-right">
+                        <li class="brand" id="global-loader">Loading...
+                            <img src="{{ STATIC_URL }}img/ajax-loader-black-bg.gif" width="20px">
+                        </li>
+
                         <form class="navbar-search" action="{% url 'front:search' %}" method="get">
                             <input type="text" class="search-query" name="q" placeholder="Search">
                         </form>
@@ -129,8 +133,7 @@
         </p>
     </footer>
 
-    <div id="logoutModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel"
-         aria-hidden="true">
+    <div id="logoutModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="logoutModalLabel" aria-hidden="true">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h3 id="logoutModalLabel">Are you sure to logout?</h3>
@@ -152,15 +155,15 @@ <h4>You're about to sign out from the system.</h4>
 <!-- Placed at the end of the document so the pages load faster -->
 <script type="text/javascript">
 
-    $(document).ready(function () {
+    $(document).ready(function() {
         $('.slct2-dropdown').select2({
             'width': 'element',
             'minimumResultsForSearch': 15
         });
 
         // copy title and rel attribute from original form-element
         // to the select2 substitute to support bootstrap tooltips
-        $('.select2-container').each(function () {
+        $('.select2-container').each(function() {
             var $this = $(this);
             var originId = $this.attr('id').split('_')[1];
             var $originElement = $('#' + originId);
@@ -181,11 +184,11 @@ <h4>You're about to sign out from the system.</h4>
 
         $.tablesorter.addParser({
             id: 'strongTNCDate',
-            is: function (s, table, cell) {
+            is: function(s, table, cell) {
                 // return false so this parser is not auto detected
                 return false;
             },
-            format: function (s, table, cell, cellIndex) {
+            format: function(s, table, cell, cellIndex) {
                 return Date.parse(s);
             },
             type: 'numeric'
@@ -201,24 +204,24 @@ <h4>You're about to sign out from the system.</h4>
         // http://jqueryvalidation.org
         // validation rules can be found in `[app]/static/js`
         $.validator.addMethod("regex",
-            function (value, element, regexp) {
-                var re = new RegExp(regexp);
-                return this.optional(element) || re.test(value);
-            }, "Please check your input."
+                function(value, element, regexp) {
+                    var re = new RegExp(regexp);
+                    return this.optional(element) || re.test(value);
+                }, "Please check your input."
         );
 
         $.validator.addMethod("directory",
-            function (value, element) {
-                var re = new RegExp(/^\/.*/);
-                return this.optional(element) || re.test(value);
-            }, "Not a valid absolute path."
+                function(value, element) {
+                    var re = new RegExp(/^\/.*/);
+                    return this.optional(element) || re.test(value);
+                }, "Not a valid absolute path."
         );
 
         // checkbox in the save-delete modal
         $('#sure').click(function() {
             var $this = $(this);
             var $deleteButton = $('#deleteButton');
-            if ($this.is(':checked')) {
+            if($this.is(':checked')) {
                 $deleteButton.attr('disabled', false);
                 $deleteButton.on('click', function() {
                     deleteform.submit();
@@ -233,9 +236,10 @@ <h4>You're about to sign out from the system.</h4>
 
 </script>
 {% block footer_js %}
-<script src="{{ STATIC_URL }}js/jquery.validate.min.js"></script>
-<script src="{{ STATIC_URL }}js/ajax-utils.js"></script>
-<script src="{{ STATIC_URL }}js/common.js"></script>
+    <script src="{{ STATIC_URL }}js/jquery.validate.min.js"></script>
+    <script src="{{ STATIC_URL }}js/ajax-utils.js"></script>
+    <script src="{{ STATIC_URL }}js/ajax-loader.js"></script>
+    <script src="{{ STATIC_URL }}js/common.js"></script>
 {% endblock %}
 </body>
 </html>