From 72280ec51e1cfc864081f6f8d857b0ad6a269e70 Mon Sep 17 00:00:00 2001
From: Jared Hancock <jared@osticket.com>
Date: Mon, 21 Apr 2014 11:01:02 -0500
Subject: [PATCH] pjax: Use loading bar for loading transition
---
css/loadingbar.css | 165 +++++++++++++++++++++++++++++++++++
include/staff/header.inc.php | 1 +
scp/js/scp.js | 21 ++++-
3 files changed, 184 insertions(+), 3 deletions(-)
create mode 100644 css/loadingbar.css
diff --git a/css/loadingbar.css b/css/loadingbar.css
new file mode 100644
index 000000000..983910e84
--- /dev/null
+++ b/css/loadingbar.css
@@ -0,0 +1,165 @@
+#loadingbar {
+ position: fixed;
+ z-index: 2147483647;
+ top: 0;
+ left: -6px;
+ width: 1%;
+ height: 2px;
+ background: #ff9100;
+ -moz-border-radius: 1px;
+ -webkit-border-radius: 1px;
+ border-radius: 1px;
+ -moz-transition: all 500ms ease-in-out;
+ -ms-transition: all 500ms ease-in-out;
+ -o-transition: all 500ms ease-in-out;
+ -webkit-transition: all 500ms ease-in-out;
+ transition: all 500ms ease-in-out;
+}
+
+#loadingbar.left {
+ left: 100%;
+ right: 0px;
+ width: 100%;
+}
+
+#loadingbar.up {
+ left: 0px;
+ top: 100%;
+ width: 5px;
+ bottom: 0px;
+ height: 100%;
+}
+
+#loadingbar.down {
+ left: 0;
+ width: 5px;
+ height: 0;
+}
+
+#loadingbar.waiting dd, #loadingbar.waiting dt {
+ -moz-animation: pulse 2s ease-out 0s infinite;
+ -ms-animation: pulse 2s ease-out 0s infinite;
+ -o-animation: pulse 2s ease-out 0s infinite;
+ -webkit-animation: pulse 2s ease-out 0s infinite;
+ animation: pulse 2s ease-out 0s infinite;
+}
+
+#loadingbar dt {
+opacity: .6;
+width: 180px;
+right: -80px;
+clip: rect(-6px,90px,14px,-6px);
+}
+
+#loadingbar dd {
+ opacity: .6;
+ width: 20px;
+ right: 0;
+ clip: rect(-6px,22px,14px,10px);
+}
+
+#loadingbar dd, #loadingbar dt {
+ position: absolute;
+ top: 0;
+ height: 2px;
+ -moz-box-shadow: #b91f1f 1px 0 6px 1px;
+ -ms-box-shadow: #b91f1f 1px 0 6px 1px;
+ -webkit-box-shadow: #B91F1F 1px 0 6px 1px;
+ box-shadow: #B91F1F 1px 0 6px 1px;
+ -moz-border-radius: 100%;
+ -webkit-border-radius: 100%;
+ border-radius: 100%;
+}
+
+#loadingbar.left dt {
+opacity: .6;
+width: 180px;
+left: -4px;
+clip: rect(-6px,185px,14px,25px);
+}
+
+#loadingbar.left dd {
+ opacity: .6;
+ width: 20px;
+ left: 0;
+ margin: 0;
+ clip: rect(-6px,22px,14px,0px);
+}
+
+#loadingbar.left dd, #loadingbar.left dt {
+ top: 0;
+ height: 2px;
+}
+
+#loadingbar.down dt {
+ opacity: .6;
+ height: 180px;
+ top: auto;
+ bottom: -47px;
+ clip: rect(-6px,20px,130px,-6px);
+}
+
+#loadingbar.down dd {
+ opacity: .6;
+ height: 20px;
+ top: auto;
+ bottom: 0;
+ clip: rect(-6px,22px,20px,10px);
+ margin: 0;
+}
+
+#loadingbar.down dd, #loadingbar.down dt {
+ left: -5px;
+ right: auto;
+ width: 10px;
+}
+
+#loadingbar.up dt {
+ opacity: .6;
+ height: 180px;
+ bottom: auto;
+ top: -10px;
+ clip: rect(13px,20px,190px,-6px);
+}
+
+#loadingbar.up dd {
+ opacity: .6;
+ height: 20px;
+ bottom: auto;
+ top: 0;
+ clip: rect(-6px,22px,25px,10px);
+ margin: 0;
+}
+
+#loadingbar.up dd, #loadingbar.up dt {
+ left: -5px;
+ right: auto;
+ width: 10px;
+}
+
+@keyframes pulse {
+ 30% { opacity:0.6; }
+ 60% { opacity:0; }
+ 100% { opacity:0.6; }
+}
+
+@-moz-keyframes pulse
+{
+ 30% { opacity:0.6; }
+ 60% { opacity:0; }
+ 100% { opacity:0.6; }
+}
+
+@-ms-keyframes pulse
+{
+ 30% { opacity:0.6; }
+ 60% { opacity:0; }
+ 100% { opacity:0.6; }
+}
+
+@-webkit-keyframes pulse
+{
+ 30% { opacity:0.6; }
+ 60% { opacity:0; }
+ 100% { opacity:0.6; }
+}
diff --git a/include/staff/header.inc.php b/include/staff/header.inc.php
index 2b0870d27..60df692fc 100644
--- a/include/staff/header.inc.php
+++ b/include/staff/header.inc.php
@@ -33,6 +33,7 @@
<link rel="stylesheet" href="<?php echo ROOT_PATH; ?>css/font-awesome-ie7.min.css">
<![endif]-->
<link type="text/css" rel="stylesheet" href="./css/dropdown.css">
+ <link type="text/css" rel="stylesheet" href="<?php echo ROOT_PATH; ?>css/loadingbar.css"/>
<script type="text/javascript" src="./js/jquery.dropdown.js"></script>
<?php
if($ost && ($headers=$ost->getExtraHeaders())) {
diff --git a/scp/js/scp.js b/scp/js/scp.js
index 60eef9e66..77b2b8688 100644
--- a/scp/js/scp.js
+++ b/scp/js/scp.js
@@ -344,7 +344,7 @@ var scp_prep = function() {
//Overlay
$('#overlay').css({
- opacity : 0.3,
+ opacity : 0.5,
top : 0,
left : 0
});
@@ -639,16 +639,31 @@ $(document).on('pjax:start', function() {
if (event instanceof PopStateEvent)
return;
+ //if ($(event.target).closest('redactor_editor').length())
+ // return;
+
clearInterval(window.ticket_refresh);
- $('#loading').show().css({opacity:0.7});
// Clear all timeouts
var id = window.setTimeout(function() {}, 0);
while (id--) {
window.clearTimeout(id);
}
+
+ if ($("#loadingbar").length === 0) {
+ $("body").append("<div id='loadingbar'></div>");
+ $("#loadingbar").addClass("waiting").append($("<dt/><dd/>"));
+
+ // right
+ $("#loadingbar").width((50 + Math.random() * 30) + "%");
+ $('#overlay').css('background-color','white').fadeIn();
+ }
});
$(document).on('pjax:complete', function() {
- $('#loading').hide().css({opacity:1});
+ // right
+ $("#loadingbar").width("101%").delay(200).fadeOut(400, function() {
+ $(this).remove();
+ });
+ $('#overlay').hide().removeAttr('style');
});
$(document).on('click', 'a', function() {
var ul = $(this).closest('ul');
--
GitLab