Implemented css working indicator
This commit is contained in:
parent
2d5c6b28a0
commit
e1b9e41c44
@ -1,42 +1,27 @@
|
|||||||
define([
|
define([
|
||||||
"jquery",
|
"jquery",
|
||||||
"underscore",
|
"underscore",
|
||||||
"classes/Extension",
|
"classes/Extension"
|
||||||
"crel"
|
], function ($, _, Extension) {
|
||||||
], function ($, _, Extension, crel) {
|
|
||||||
|
|
||||||
var workingIndicator = new Extension("workingIndicator", "Working Indicator");
|
var workingIndicator = new Extension("workingIndicator", "Working Indicator");
|
||||||
|
|
||||||
var $bodyElt;
|
var $bodyElt;
|
||||||
var $workingIndicatorElt;
|
var $workingIndicatorElt;
|
||||||
var intervalId;
|
|
||||||
workingIndicator.onAsyncRunning = function (isRunning) {
|
workingIndicator.onAsyncRunning = function (isRunning) {
|
||||||
$bodyElt.toggleClass("working", isRunning);
|
$bodyElt.toggleClass("working", isRunning);
|
||||||
$workingIndicatorElt.toggleClass("show", isRunning);
|
$workingIndicatorElt.toggleClass("show", isRunning);
|
||||||
if(isRunning) {
|
|
||||||
animate();
|
|
||||||
intervalId = setInterval(animate, 200);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
clearInterval(intervalId);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var indicatorElts = [];
|
|
||||||
var loop = 0;
|
|
||||||
function animate() {
|
|
||||||
indicatorElts[loop].className = '';
|
|
||||||
loop = (loop + 1) % 3;
|
|
||||||
indicatorElts[loop].className = 'highlighted';
|
|
||||||
}
|
|
||||||
|
|
||||||
workingIndicator.onReady = function () {
|
workingIndicator.onReady = function () {
|
||||||
$bodyElt = $(document.body);
|
$bodyElt = $(document.body);
|
||||||
$workingIndicatorElt = $(".working-indicator");
|
$workingIndicatorElt = $(".working-indicator");
|
||||||
for (var i = 0; i < 3; i++) {
|
for (var i = 0; i < 4; i++) {
|
||||||
indicatorElts.push(crel('div'));
|
$workingIndicatorElt.append($('<div class="bar">').css({
|
||||||
|
'animation-delay': '0.' + (i*2) + 's',
|
||||||
|
'-webkit-animation-delay': '0.' + (i*2) + 's',
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
$workingIndicatorElt.append(indicatorElts);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return workingIndicator;
|
return workingIndicator;
|
||||||
|
@ -28,15 +28,13 @@
|
|||||||
<li id="extension-buttons"></li>
|
<li id="extension-buttons"></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
|
<li><div class="working-indicator"></div></li>
|
||||||
<li><a class="btn btn-success file-title-navbar" href="#"
|
<li><a class="btn btn-success file-title-navbar" href="#"
|
||||||
title="Rename document"> </a></li>
|
title="Rename document"> </a></li>
|
||||||
<li><input type="text"
|
<li><input type="text"
|
||||||
class="col-lg-4 form-control hide input-file-title"
|
class="col-lg-4 form-control hide input-file-title"
|
||||||
placeholder="Document title" /></li>
|
placeholder="Document title" /></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav pull-right">
|
|
||||||
<li><div class="working-indicator"></div></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="wmd-input" class="ui-layout-center"></div>
|
<div id="wmd-input" class="ui-layout-center"></div>
|
||||||
|
@ -26,12 +26,9 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
|
<li><div class="working-indicator"></div></li>
|
||||||
<li><span class="file-title-navbar"></span></li>
|
<li><span class="file-title-navbar"></span></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav pull-right">
|
|
||||||
<li><div class="working-indicator"></div></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="wmd-button-bar" class="hide"></div>
|
<div id="wmd-button-bar" class="hide"></div>
|
||||||
|
@ -330,19 +330,22 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.working-indicator {
|
.working-indicator {
|
||||||
margin: 12px -2px 0;
|
overflow: hidden;
|
||||||
div {
|
height: @input-height-base;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-right: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
.bar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 14px;
|
width: 8px;
|
||||||
height: 14px;
|
height: 7px;
|
||||||
border-radius: 6px;
|
border-radius: 1px;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
background-color: fade(@btn-success-color, 25%);
|
background-color: @btn-success-color;
|
||||||
.transition(~"background-color linear .15s");
|
opacity: 0;
|
||||||
&.highlighted {
|
animation: indicator 0.6s ease-out infinite;
|
||||||
background-color: fade(@btn-success-color, 75%);
|
-webkit-animation: indicator 0.6s ease-out infinite; /* Safari and Chrome */
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&.show div {
|
&.show div {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
@ -350,6 +353,15 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes indicator {
|
||||||
|
from {opacity: 1;}
|
||||||
|
to {opacity: 0.25;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes indicator /* Safari and Chrome */ {
|
||||||
|
from {opacity: 1;}
|
||||||
|
to {opacity: 0.25;}
|
||||||
|
}
|
||||||
|
|
||||||
/*********************
|
/*********************
|
||||||
* Menu/Document panels
|
* Menu/Document panels
|
||||||
|
Loading…
Reference in New Issue
Block a user