Browse Source

move statusbar to main jses

experimental
Paweł Jedwabny 4 years ago
parent
commit
e7a24d2639
10 changed files with 150 additions and 161 deletions
  1. +86
    -0
      index.php
  2. +0
    -0
      libs/nprogress/nprogress.css
  3. +0
    -0
      libs/nprogress/nprogress.js
  4. +2
    -14
      modules/Base/StatusBar/StatusBar_0.php
  5. +0
    -70
      modules/Base/StatusBar/theme/default.css
  6. +0
    -22
      modules/Base/StatusBar/theme/default.tpl
  7. BIN
      modules/Base/StatusBar/theme/loader.gif
  8. +53
    -54
      src/StatusBar/main.js
  9. +1
    -0
      src/epesi.js
  10. +8
    -1
      src/index.js

+ 86
- 0
index.php View File

@@ -129,6 +129,81 @@ ob_start();
}
}





.Base_StatusBar_background {
z-index: 2001;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.5);
}

.Base_StatusBar {
background-color: white;
position: fixed;
left: 50%;
top: 30%;
margin-left: -100px;
width: 200px;
text-align: center;
vertical-align: middle;
z-index: 2002;
overflow: hidden;
padding-top: 20px;
}

.Base_StatusBar .text {
font-size: 22px;
}

.Base_StatusBar .spinner {
margin: 20px auto 20px;
text-align: center;
}

.Base_StatusBar .spinner > div {
width: 18px;
height: 18px;
background-color: #333;

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.Base_StatusBar .spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.Base_StatusBar .spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

</style>
<?php print(TRACKING_CODE); ?>
</head>
@@ -151,6 +226,17 @@ ob_start();
<div class="bounce3"></div>
</div>
</div>
<div id="Base_StatusBar" class="Base_StatusBar_background">
<div class="Base_StatusBar panel panel-default">
<p id="statusbar_text" class="lead">Loading...</p>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div id="dismiss">Click anywhere to dismiss</div>
</div>
</div>
</div>
<?php
/*


modules/Base/StatusBar/theme/nprogress.css → libs/nprogress/nprogress.css View File


modules/Base/StatusBar/js/nprogress.js → libs/nprogress/nprogress.js View File


+ 2
- 14
modules/Base/StatusBar/StatusBar_0.php View File

@@ -14,25 +14,13 @@ defined("_VALID_ACCESS") || die('Direct access forbidden');
class Base_StatusBar extends Module {

public function body() {
$theme = $this->init_module("Base/Theme");
$theme->assign('statusbar_id','Base_StatusBar');
$theme->assign('text_id','statusbar_text');
$theme->assign('close_text', __('Click anywhere to dismiss'));
$theme->display();
$this->load_js();
$close_text = __('Click anywhere to dismiss');
eval_js("document.getElementById('dismiss').innerHTML = '{$close_text}'");
on_exit(array($this, 'messages'),null,false);
}

public function messages() {
eval_js("statusbar_message('".Epesi::escapeJS(Base_StatusBarCommon::$message,false)."')");
}

private function load_js() {
load_js('modules/Base/StatusBar/js/main.js');
load_js('modules/Base/StatusBar/js/nprogress.js');
load_css('modules/Base/StatusBar/theme/nprogress.css');
}


}
?>

+ 0
- 70
modules/Base/StatusBar/theme/default.css View File

@@ -1,70 +0,0 @@
.Base_StatusBar_background {
z-index: 2001;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.5);
}

.Base_StatusBar {
background-color: white;
position: fixed;
left: 50%;
top: 30%;
margin-left: -100px;
width: 200px;
text-align: center;
vertical-align: middle;
z-index: 2002;
overflow: hidden;
padding-top: 20px;
}

.Base_StatusBar .text {
font-size: 22px;
}

.Base_StatusBar .spinner {
margin: 20px auto 20px;
text-align: center;
}

.Base_StatusBar .spinner > div {
width: 18px;
height: 18px;
background-color: #333;

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.Base_StatusBar .spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.Base_StatusBar .spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

+ 0
- 22
modules/Base/StatusBar/theme/default.tpl View File

@@ -1,22 +0,0 @@
{*<div id="{$statusbar_id}" class="Base_StatusBar">*}
{*<div class="layer">*}
{*<div class="shadow_15px" id="statusbar_content">*}
{*<div id="{$text_id}" class="message loading">*}
{*Loading...*}
{*</div>*}
{*<div id="dismiss">{$close_text}</div>*}
{*</div>*}
{*</div>*}
{*</div>*}

<div id="{$statusbar_id}" class="Base_StatusBar_background">
<div class="Base_StatusBar panel panel-default">
<p id="{$text_id}" class="lead">Loading...</p>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div id="dismiss">{$close_text}</div>
</div>
</div>

BIN
modules/Base/StatusBar/theme/loader.gif View File

Before After
Width: 31  |  Height: 31  |  Size: 1.2 KiB

modules/Base/StatusBar/js/main.js → src/StatusBar/main.js View File

@@ -1,54 +1,53 @@
var statusbar_message_t='';
statusbar_message=function(text){
statusbar_message_t=text;
};
statusbar_fade_count = 0;
statusbar_fade=function(fade_count){
NProgress.configure({parent: '#nano-bar'});
NProgress.start();
if (fade_count && statusbar_fade_count!=fade_count) return;
var seconds = 0.2;
wait_while_null('jq(\'#Base_StatusBar\').get(0)','jq(\'#Base_StatusBar\').fadeOut();NProgress.done();');
jq('#Base_StatusBar').get(0).onclick = null;
setTimeout('statusbar_fade_double_check('+statusbar_fade_count+')',seconds*1000+50);
};
statusbar_fade_double_check = function(fade_count) {
if (fade_count && statusbar_fade_count!=fade_count) jq('#Base_StatusBar').show();
else jq('#Base_StatusBar').get(0).onclick = Function("if(!Epesi.procOn)statusbar_fade();");
};
updateEpesiIndicatorFunction=function(){
Epesi.indicator_text='statusbar_text';
Epesi.indicator='Base_StatusBar';
statbar = jq('#Base_StatusBar').get(0);
if (!statbar) {
setTimeout('updateEpesiIndicatorFunction();',3000);
return;
}
jq('#epesiStatus').hide();
jq('#main_content').show();
statbar.onclick = Function("if(!Epesi.procOn)statusbar_fade();");
statbar.style.display='none';
Epesi.updateIndicator=function(){
statbar = jq('#Base_StatusBar').get(0);
statusbar_fade_count++;
if(Epesi.procOn){
jq('#dismiss').hide();
statbar.style.display='block';
cache_pause=true;
}else{
if(statusbar_message_t!='') {
jq('#dismiss').show();
t=jq('#statusbar_text');
if(t.length>0)t.html(statusbar_message_t);
statusbar_message('');
setTimeout('statusbar_fade('+statusbar_fade_count+')',5000);
}else{
statusbar_fade();
};
cache_pause=false;
};
};
};
updateEpesiIndicatorFunction();
window.statusbar_message_t='';
window.statusbar_message=function(text){
statusbar_message_t=text;
};

window.statusbar_fade_count = 0;
window.statusbar_fade=function(fade_count){
NProgress.configure({parent: '#nano-bar'});
NProgress.start();
if (fade_count && statusbar_fade_count!=fade_count) return;
let seconds = 0.2;
wait_while_null('jq(\'#Base_StatusBar\').get(0)','jq(\'#Base_StatusBar\').fadeOut();NProgress.done();');
jq('#Base_StatusBar').get(0).onclick = null;
setTimeout('statusbar_fade_double_check('+statusbar_fade_count+')',seconds*1000+50);
};
window.statusbar_fade_double_check = function(fade_count) {
if (fade_count && statusbar_fade_count!=fade_count) jq('#Base_StatusBar').show();
else jq('#Base_StatusBar').get(0).onclick = Function("if(!Epesi.procOn)statusbar_fade();");
};
window.updateEpesiIndicatorFunction=function(){
Epesi.indicator_text='statusbar_text';
Epesi.indicator='Base_StatusBar';
let statbar = jq('#Base_StatusBar').get(0);
if (!statbar) {
setTimeout('updateEpesiIndicatorFunction();',3000);
return;
}
jq('#epesiStatus').hide();
jq('#main_content').show();
statbar.onclick = Function("if(!Epesi.procOn)statusbar_fade();");
statbar.style.display='none';
Epesi.updateIndicator=function(){
let statbar = jq('#Base_StatusBar').get(0);
let cache_pause;
statusbar_fade_count++;
if(Epesi.procOn){
jq('#dismiss').hide();
statbar.style.display='block';
cache_pause=true;
}else{
if(statusbar_message_t!='') {
jq('#dismiss').show();
t=jq('#statusbar_text');
if(t.length>0)t.html(statusbar_message_t);
// statusbar_message('');
setTimeout('statusbar_fade('+statusbar_fade_count+')',5000);
}else{
statusbar_fade();
};
cache_pause=false;
};
};
};

+ 1
- 0
src/epesi.js View File

@@ -33,6 +33,7 @@ class Epesi {
this.history_add(0);

if(!params) params = '';
setTimeout(updateEpesiIndicatorFunction);
this.request(params,0).then(() => {
document.getElementById('epesi_loader').style.display = 'none';
document.getElementById('main_content').style.display = '';


+ 8
- 1
src/index.js View File

@@ -11,14 +11,21 @@ import 'select2';
import 'select2/dist/css/select2.css';

import 'script-loader!../libs/jquery.clonePosition.js';

import Chart from 'chart.js';
window.Chart = Chart;

import 'gentelella/production/less/custom.css';

import 'font-awesome/css/font-awesome.css';

window.Chart = Chart;
import 'script-loader!../libs/nprogress/nprogress';
import '../libs/nprogress/nprogress.css';

import 'script-loader!./StatusBar/main';

import Epesi from './epesi';

window.EpesiClass = Epesi;

window.focus_by_id = (idd) => {


Loading…
Cancel
Save