Implemented css working indicator

This commit is contained in:
benweet 2013-11-17 13:32:53 +00:00
parent 2d5c6b28a0
commit e1b9e41c44
4 changed files with 31 additions and 39 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>

View File

@ -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