Browse Source

Added progress spinner

pull/160/head
Mike Olund 8 years ago
parent
commit
dce8706d58
6 changed files with 95 additions and 10 deletions
  1. +21
    -0
      edivorce/apps/core/static/css/main.scss
  2. +0
    -4
      edivorce/apps/core/static/js/jquery-3.1.1.min.js
  3. +19
    -0
      edivorce/apps/core/static/js/main.js
  4. +47
    -0
      edivorce/apps/core/static/js/vendor/spin.min.js
  5. +3
    -1
      edivorce/apps/core/templates/base.html
  6. +5
    -5
      edivorce/apps/core/templates/overview.html

+ 21
- 0
edivorce/apps/core/static/css/main.scss View File

@ -670,6 +670,27 @@ textarea {
}
}
/* Spinner */
div#progress-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
background: url(/Images/transparent.png);
background: rgba(0,0,0,0.35);
}
div#progress-overlay-spinner {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5000;
}
/* Transitions & Transforms */
.on-canvas {


+ 0
- 4
edivorce/apps/core/static/js/jquery-3.1.1.min.js
File diff suppressed because it is too large
View File


+ 19
- 0
edivorce/apps/core/static/js/main.js View File

@ -62,6 +62,25 @@ $(function () {
$('#separation_date_alert').hide();
}
});
// spinner
$('body').on('click', 'input.spinner, a.spinner', function () {
$('div#progress-overlay').show();
$('div#progress-overlay-spinner').spin('large');
});
$('body').on('click', 'a.save-spinner', function (e) {
e.preventDefault();
$('div#progress-overlay').show();
$('div#progress-overlay-spinner').spin('large');
setTimeout(function(){
$('div#progress-overlay').hide();
$('div#progress-overlay-spinner').spin(false);
}, 500);
});
});
// delete and added field and save the change


+ 47
- 0
edivorce/apps/core/static/js/vendor/spin.min.js View File

@ -0,0 +1,47 @@
// http://spin.js.org/#v2.3.2
!function(a,b){"object"==typeof module&&module.exports?module.exports=b():"function"==typeof define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in b)d[c]=b[c];return d}function b(a){for(var b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function c(a,b,c,d){var e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return m[e]||(k.insertRule("@"+i+"keyframes "+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",k.cssRules.length),m[e]=1),e}function d(a,b){var c,d,e=a.style;if(b=b.charAt(0).toUpperCase()+b.slice(1),void 0!==e[b])return b;for(d=0;d<l.length;d++)if(c=l[d]+b,void 0!==e[c])return c}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function f(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function g(a,b){return"string"==typeof a?a:a[b%a.length]}function h(a){this.opts=f(a||{},h.defaults,n)}function i(){function c(b,c){return a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',c)}k.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function f(){return e(c("group",{coordsize:k+" "+k,coordorigin:-j+" "+-j}),{width:k,height:k})}function h(a,h,i){b(m,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~h}),b(e(c("roundrect",{arcsize:d.corners}),{width:j,height:d.scale*d.width,left:d.scale*d.radius,top:-d.scale*d.width>>1,filter:i}),c("fill",{color:g(d.color,a),opacity:d.opacity}),c("stroke",{opacity:0}))))}var i,j=d.scale*(d.length+d.width),k=2*d.scale*j,l=-(d.width+d.length)*d.scale*2+"px",m=e(f(),{position:"absolute",top:l,left:l});if(d.shadow)for(i=1;i<=d.lines;i++)h(i,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(i=1;i<=d.lines;i++)h(i);return b(a,m)},h.prototype.opacity=function(a,b,c,d){var e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var j,k,l=["webkit","Moz","ms","O"],m={},n={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",opacity:.25,rotate:0,direction:1,speed:1,trail:100,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:!1,hwaccel:!1,position:"absolute"};if(h.defaults={},f(h.prototype,{spin:function(b){this.stop();var c=this,d=c.opts,f=c.el=a(null,{className:d.className});if(e(f,{position:d.position,width:0,zIndex:d.zIndex,left:d.left,top:d.top}),b&&b.insertBefore(f,b.firstChild||null),f.setAttribute("role","progressbar"),c.lines(f,c.opts),!j){var g,h=0,i=(d.lines-1)*(1-d.direction)/2,k=d.fps,l=k/d.speed,m=(1-d.opacity)/(l*d.trail/100),n=l/d.lines;!function o(){h++;for(var a=0;a<d.lines;a++)g=Math.max(1-(h+(d.lines-a)*n)%l*m,d.opacity),c.opacity(f,a*d.direction+i,g,d);c.timeout=c.el&&setTimeout(o,~~(1e3/k))}()}return c},stop:function(){var a=this.el;return a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void 0),this},lines:function(d,f){function h(b,c){return e(a(),{position:"absolute",width:f.scale*(f.length+f.width)+"px",height:f.scale*f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*k+f.rotate)+"deg) translate("+f.scale*f.radius+"px,0)",borderRadius:(f.corners*f.scale*f.width>>1)+"px"})}for(var i,k=0,l=(f.lines-1)*(1-f.direction)/2;k<f.lines;k++)i=e(a(),{position:"absolute",top:1+~(f.scale*f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,l+k*f.direction,f.lines)+" "+1/f.speed+"s linear infinite"}),f.shadow&&b(i,e(h("#000","0 0 4px #000"),{top:"2px"})),b(d,b(i,h(g(f.color,k),"0 0 1px rgba(0,0,0,.1)")));return d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}}),"undefined"!=typeof document){k=function(){var c=a("style",{type:"text/css"});return b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}();var o=e(a("group"),{behavior:"url(#default#VML)"});!d(o,"transform")&&o.adj?i():j=d(o,"animation")}return h});
// http://spin.js.org/jquery.spin.js
;(function(factory) {
if (typeof exports == 'object') {
// CommonJS
factory(require('jquery'), require('spin.js'))
} else if (typeof define == 'function' && define.amd) {
// AMD, register as anonymous module
define(['jquery', 'spin'], factory)
} else {
// Browser globals
if (!window.Spinner) throw new Error('Spin.js not present')
factory(window.jQuery, window.Spinner)
}
}(function($, Spinner) {
$.fn.spin = function(opts, color) {
return this.each(function() {
var $this = $(this)
, data = $this.data()
if (data.spinner) {
data.spinner.stop()
delete data.spinner
}
if (opts !== false) {
opts = $.extend(
{ color: color || $this.css('color') }
, $.fn.spin.presets[opts] || opts
)
data.spinner = new Spinner(opts).spin(this)
}
})
}
$.fn.spin.presets = {
tiny: { lines: 8, length: 2, width: 2, radius: 3 }
, small: { lines: 8, length: 4, width: 3, radius: 5 }
, large: { lines: 10, length: 8, width: 4, radius: 8 }
}
}));

+ 3
- 1
edivorce/apps/core/templates/base.html View File

@ -90,7 +90,7 @@
<div class="form-buttons clearfix">
<a class="btn btn-primary" href="{% block formBack %}#{% endblock %}"><i class="fa fa-arrow-circle-o-left"></i>&nbsp;&nbsp;&nbsp;Back</a>
<a class="btn btn-success pull-right" href="{% block formNext %}#{% endblock %}">Next&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-circle-o-right"></i></a>
<a class="btn btn-primary pull-right" href="#"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;&nbsp;Save and return another time</a>
<a class="btn btn-primary pull-right save-spinner" href="#"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;&nbsp;Save and return another time</a>
</div>
{% endblock %}
@ -113,10 +113,12 @@
</footer>
<div id="progress-overlay" style="display: none"><div id="progress-overlay-spinner"></div></div>
<script type="text/javascript" src="{% static 'js/vendor/jquery-1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/vendor/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/vendor/bootstrap-datepicker.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/vendor/spin.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/controllers.js' %}"></script>
<script type="text/javascript" src="{% static 'js/ajax.js' %}"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>


+ 5
- 5
edivorce/apps/core/templates/overview.html View File

@ -29,7 +29,7 @@
<p>
Notice of Joint Family Claim(F1)
<a href="{% url 'pdf_form' '1' %}?html">Preview</a> |
<a href="{% url 'pdf_form' '1' %}">Print</a>
<a href="{% url 'pdf_form' '1' %}" class="spinner">Print</a>
</p>
</li>
<li>
@ -43,28 +43,28 @@
<p>
Requisition (Form F35)
<a href="{% url 'pdf_form' '35' %}?html">Preview</a> |
<a href="{% url 'pdf_form' '35' %}">Print</a>
<a href="{% url 'pdf_form' '35' %}" class="spinner">Print</a>
</p>
</li>
<li>
<p>
Draft Final Order (Form F52)
<a href="{% url 'pdf_form' '52' %}?html">Preview</a> |
<a href="{% url 'pdf_form' '52' %}">Print</a>
<a href="{% url 'pdf_form' '52' %}" class="spinner">Print</a>
</p>
</li>
<li>
<p>
Certificate of Pleadings (F36)
<a href="{% url 'pdf_form' '36' %}?html">Preview</a> |
<a href="{% url 'pdf_form' '36' %}">Print</a>
<a href="{% url 'pdf_form' '36' %}" class="spinner">Print</a>
</p>
</li>
<li>
<p>
Affidavit Desk Order Divorce (F38)
<a href="{% url 'pdf_form' '38' %}?html">Preview</a> |
<a href="{% url 'pdf_form' '38' %}">Print</a>
<a href="{% url 'pdf_form' '38' %}" class="spinner">Print</a>
</p>
</li>
</ul>


Loading…
Cancel
Save