Add overlay & loading spinner to client interface - shown on form sub…

…mission to help cut down on double submits.

css/osticket.css

@@ -0,0 +1,25 @@
+/* Overlay */
+#overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    z-index: 1000;
+    -webkit-transform: translate3d(0,0,0);
+}
+
+#loading {
+    border:1px solid #2a67ac;
+    padding: 10px 10px 10px 60px;
+    width: 300px;
+    height: 100px;
+    background: rgb( 255, 255, 255) url('../images/FhHRx-Spinner.gif') 10px 50% no-repeat;
+    position: fixed;
+    display: none;
+    z-index: 3000;
+}
+
+#loading h4 { margin: 3px 0 0 0; padding: 0; color: #d80; }

include/client/footer.inc.php

@@ -4,5 +4,10 @@
         <p>Copyright &copy; <?php echo date('Y'); ?> <a href="http://osticket.com" target="_blank" title="osTicket">osTicket.com</a> - All rights reserved.</p>
         <a id="poweredBy" href="http://osticket.com" target="_blank">Powered by osTicket</a>
     </div>
+<div id="overlay"></div>
+<div id="loading">
+    <h4>Please Wait!</h4>
+    <p>Please wait... it will take a second!</p>
+</div>    
 </body>
 </html>  

include/client/header.inc.php

@@ -10,6 +10,7 @@
     <meta name="description" content="customer support platform">
     <meta name="keywords" content="osTicket, Customer support system, support ticket system">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link rel="stylesheet" href="<?php echo ROOT_PATH; ?>css/osticket.css" media="screen">
     <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/theme.css" media="screen">
     <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/print.css" media="print">
     <script src="<?php echo ROOT_PATH; ?>js/jquery-1.7.2.min.js"></script>

js/osticket.js

@@ -8,18 +8,31 @@ $(document).ready(function(){
     $("input:not(.dp):visible:enabled:first").focus();
     $('table.list tbody tr:odd').addClass('odd');
 
-    $("form#save :input").change(function() {
+    //Overlay
+    $('#overlay').css({
+        opacity : 0.3,
+        top     : 0,
+        left    : 0
+     });
+
+    /* loading ... */
+    $("#loading").css({
+        top  : ($(window).height() / 3),
+        left : ($(window).width() / 2 - 160)    
+     });
+
+    $("form :input").change(function() {
         var fObj = $(this).closest('form');
         if(!fObj.data('changed')){
             fObj.data('changed', true);
             $('input[type=submit]', fObj).css('color', 'red');
             $(window).bind('beforeunload', function(e) {
-                return 'Are you sure you want to leave? Any changes or info you\'ve entered will be discarded!';
+                return "Are you sure you want to leave? Any changes or info you've entered will be discarded!";
              });
         }
        });
 
-    $("form#save :input[type=reset]").click(function() {
+    $("form :input[type=reset]").click(function() {
         var fObj = $(this).closest('form');
         if(fObj.data('changed')){
             $('input[type=submit]', fObj).removeAttr('style');
@@ -30,8 +43,9 @@ $(document).ready(function(){
         }
        });
 
-    $('form#save').submit(function() {
+    $('form').submit(function() {
         $(window).unbind('beforeunload');
+        $('#overlay, #loading').show();
         return true;
        });