From ab68c696e2b8e38c83ea3c17497912a50843083a Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Wed, 27 Apr 2011 12:21:46 -0400 Subject: [PATCH] Added loading spinner animation --- apps/documents/__init__.py | 9 ++++-- apps/documents/forms.py | 28 +++++++++++++++--- apps/main/templates/base.html | 6 ++++ site_media/images/ajax-loader.gif | Bin 0 -> 3208 bytes site_media/images/blank.gif | Bin 0 -> 799 bytes .../JqueryAsynchImageLoader-0.8.min.js | 9 ++++++ 6 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 site_media/images/ajax-loader.gif create mode 100644 site_media/images/blank.gif create mode 100644 site_media/packages/JqueryAsynchImageLoader-0.8.min.js diff --git a/apps/documents/__init__.py b/apps/documents/__init__.py index 73126ba2ec..52eefbd701 100644 --- a/apps/documents/__init__.py +++ b/apps/documents/__init__.py @@ -1,5 +1,6 @@ from django.utils.translation import ugettext_lazy as _ from django.core.urlresolvers import reverse +from django.conf import settings from navigation.api import register_links, register_menu, \ register_model_list_columns, register_multi_item_links @@ -124,11 +125,13 @@ def document_exists(document): except Exception, exc: return exc - register_model_list_columns(Document, [ {'name':_(u'thumbnail'), 'attribute': - lambda x: '' % (reverse('document_preview', args=[x.id]), - reverse('document_thumbnail', args=[x.id])) + lambda x: '' % { + 'url': reverse('document_preview', args=[x.pk]), + 'thumbnail': reverse('document_thumbnail', args=[x.pk]), + 'media_url': settings.MEDIA_URL + } }, {'name':_(u'metadata'), 'attribute': lambda x: x.get_metadata_string() diff --git a/apps/documents/forms.py b/apps/documents/forms.py index 4f52de5fcc..60092b633a 100644 --- a/apps/documents/forms.py +++ b/apps/documents/forms.py @@ -7,6 +7,7 @@ from django.core.urlresolvers import reverse from django.utils.safestring import mark_safe from django.forms.formsets import formset_factory from django.template.defaultfilters import capfirst +from django.conf import settings from documents.staging import StagingFile @@ -36,11 +37,20 @@ class DocumentPageImageWidget(forms.widgets.Widget): rotation = final_attrs.get('rotation', 0) if value: output = [] - output.append('
' % { + output.append(''' +
+
+ + +
+
''' % { 'img': reverse('document_display', args=[value.document.id]), 'page': value.page_number, 'zoom': zoom, 'rotation': rotation, + 'media_url': settings.MEDIA_URL }) return mark_safe(u''.join(output)) else: @@ -106,9 +116,14 @@ class ImageWidget(forms.widgets.Widget): output.append( u'''
%(page_string)s %(page)s
+
- + + +
%(details_string)s
@@ -119,6 +134,7 @@ class ImageWidget(forms.widgets.Widget): 'view_url': reverse('document_display', args=[page.document.pk]), 'page_string': ugettext(u'Page'), 'details_string': ugettext(u'Details'), + 'media_url': settings.MEDIA_URL, }) output.append(u'
') @@ -354,7 +370,10 @@ class MetaDataImageWidget(forms.widgets.Widget):
%(page_string)s: %(document_pages)d
- + +
@@ -369,7 +388,8 @@ class MetaDataImageWidget(forms.widgets.Widget): 'page_string': ugettext(u'Pages'), 'details_string': ugettext(u'Select'), 'group_id': value['group'].pk, - 'document_name': document + 'document_name': document, + 'media_url': settings.MEDIA_URL }) output.append(u'
') output.append( diff --git a/apps/main/templates/base.html b/apps/main/templates/base.html index 3ea5025add..3491c2cda7 100644 --- a/apps/main/templates/base.html +++ b/apps/main/templates/base.html @@ -31,6 +31,7 @@ {% endblock %} {% block web_theme_javascript %} + @@ -85,6 +86,11 @@ location.replace(this.href); return false; }); + $('img.lazy-load').jail({ + event: 'load', + placeholder : '{{ MEDIA_URL }}/images/ajax-loader.gif' + //effect: 'fadeIn' + }); }); {% block javascript %}{% endblock %} diff --git a/site_media/images/ajax-loader.gif b/site_media/images/ajax-loader.gif new file mode 100644 index 0000000000000000000000000000000000000000..3288d1035d70bb86517e2c233f1a904e41f06b29 GIT binary patch literal 3208 zcmc(iX;4#H9>pJdFE7h`I{IF)0|5<6L}(j=N}5%L009EB2nYfyF)E0PvIqo$u!IC; z4PgyY5|S9AEh38G)(9eq4TbH7_UHg@yWrlIJ$6smIADL7s^P;_O;ykRc9soXl`UC*LwQJXkii*0rx|*7rI2=x7WaRkx_~XZqFJ8R3c=2Kg zf@aSAv8+BJ8+^hyay>(QR@t*blbKzsf0}bscEqRc5Hd3o(-N5RyW=zWB*zQw6Zh>* z2CROCDAbu#D`)S|J_o(lL9Yn3l*+8RdiRD_>iNz$#_IAzCna&Wl5 zSF_(rRCDD!wi#i8oAm&jYtn2_@VB%2-H*G%bN#|(6R6N?wM)3u`PiGzwuX7qmTgyF zpE)h0kuoxQ9?=kW7Y!=R@DmhU9)vwT*EZWzJ zrt+=2tqFts72yIp?|gvdLhs8Hfku^Z(){gmN%Y=K#P|%fkvgUj~HfIp3CuXqCtYGtJ#me+n+-LmP( z*XNuk%!aH8bIE@_Bj46>M*dSro|7<6vZ7WUHh5YQzN$>IJFqCb|CT!wj~R2C2%=q{ zpt8rzY$aw?W?=Ustv{jo?Ow@ZRkLe<)NItY>Cyhle*wR59dTdF6(@{5^ zAQBOB*hNtc3bkY-8{Cm$nFS@elbTtSqrt7MB{h_4y+~`!mVa}?c&N>&?P}GqdMuhQ z&@TD5Czd((DcG_Su~dKKV)Pj$-qi1WHM8_vc^O4?^!oY|tmK~i!{fjd&@_1E(T~r7 z_REZy&hMT^ySJB3W7l$4YhR`M(J7S5S~+4Q&3HPa)z%zPpisOp$^ zTEe99ig2$5_qFr!$;7A6CJ}PJmRhli>w?LC}Y`#HLGy6 zMU4EhL~dKCN5Ut;U2jd*83ShBNiu zcJB0l9>1Modc?-oM<R4?}3g}UJ%@K);kriq>)e*rh%hdqM)5Q)*+O8 zXm;SEbs@koiYS!9YXIclSg+5m_s~yrW#kKMdiRszg(gCP5HPmP7L)vCf8@fxUh6qY z@Z#TmkjzAZX{rwE+q|K~F2v5{_@vt%>yT_a#fF03SFt{0RXvDAiaY~K9CgS1O>frXgAjBCS}mEd4mIWZ$=ovd5| zR?GRdU}d6+Q`+JRW)|=v7$)XNkn3yE`!nAiSCvOB1jKT zG<1aK3s<0b0m==egTD#8i(Of=1pGDTOCho0XpIOMQ&P87cVKY1W=C6kIg z9cH=@a&zbm2+`|{(_?YC9fdm?1TY~-pwlBn?>=(~1pDKbco6jloP;0-cqRiwV1A_S zEyV0Dj8Pwy!nekzaN>{)7rgZ&_QLxK{~1yRe865^yx>}+a!ECd>#MMwddow z@CU{l+Rt$xuXuf}?ga{3IAr?Raql^c@a%sI0U5m}HvJ5O1#I%_MMPt#BH>OqUZ{-k zt>4Xzz=%jT*FVW(uYkWyx}9Gw$HdN*qU?Bit#ji(Wi7p-u|_8?h^%szIS^s^fNM}b zgGy>|=cbEufpguY5_6w~&ZLv=Bo06UF9EYIY;Er-1VK)SyF&!|J{axiE1z^(hXwVq zsFS=K-#zC}CcOs^8W{KAt+kK)jYDgDYbCXv{{rwsgqtIU3<910$CJi)s?? z_t8k{>7*0~4l~LLF7$WXT5OSq5QCTbP_l!SN|{R}3D&eWA8~0ltWh1IL+ZBX4rRSt zWF6Om3WDMu4xK^1(BF`2cL}rUCzhHAB`@j5&R-yk_l*t;mPGY|u2^o|myvcOdrg0W z%=lX;f^Vkqfp?u7*4qQq%A3Mpf!xspWBSKS@O%r*TSM}?dl(@*%{0Jm_8;(h{R__M Bt1qKcl21XVZ25SIVSOy&c literal 0 HcmV?d00001 diff --git a/site_media/packages/JqueryAsynchImageLoader-0.8.min.js b/site_media/packages/JqueryAsynchImageLoader-0.8.min.js new file mode 100644 index 0000000000..b08943a785 --- /dev/null +++ b/site_media/packages/JqueryAsynchImageLoader-0.8.min.js @@ -0,0 +1,9 @@ +/* +* JqueryAsynchImageLoader (JAIL) : plugin for jQuery +* +* Developed by +* Sebastiano Armeli-Battana (@sebarmeli) - http://www.sebastianoarmelibattana.com +* Dual licensed under the MIT or GPL Version 3 licenses. +* @version 0.8.1 +*/ +(function(a){var b=a(window);a.fn.asynchImageLoader=a.fn.jail=function(d){d=a.extend({timeout:10,effect:false,speed:400,selector:null,offset:0,event:"load+scroll",callback:jQuery.noop,placeholder:false},d);var c=this;this.data("triggerEl",(d.selector)?a(d.selector):b);if(d.placeholder!==false){c.each(function(){a(this).attr("src",d.placeholder);});}if(/^load/.test(d.event)){a.asynchImageLoader.later.call(this,d);}else{a.asynchImageLoader.onEvent.call(this,d,c);}return this;};a.asynchImageLoader={_purgeStack:function(c){var d=0;while(true){if(d===c.length){break;}else{if(c[d].getAttribute("data-href")){d++;}else{c.splice(d,1);}}}},_loadOnEvent:function(g){var f=a(this),d=g.data.options,c=g.data.images;a.asynchImageLoader._loadImage(d,f);f.unbind(d.event,a.asynchImageLoader._loadOnEvent);d.callback.call(this,d);a.asynchImageLoader._purgeStack(c);},_bufferedEventListener:function(g){var c=g.data.images,d=g.data.options,f=c.data("triggerEl");clearTimeout(c.data("poller"));c.data("poller",setTimeout(function(){c.each(function e(){a.asynchImageLoader._loadImageIfVisible(d,this,f);});a.asynchImageLoader._purgeStack(c);d.callback.call(this,d,c);},d.timeout));return false;},onEvent:function(d,c){c=c||this;if(d.event==="scroll"||d.selector){var e=c.data("triggerEl");if(c.length>0){e.bind(d.event,{images:c,options:d},a.asynchImageLoader._bufferedEventListener);if(d.event==="scroll"||!d.selector){b.resize({images:c,options:d},a.asynchImageLoader._bufferedEventListener);}}else{var f=(d.selector)?a(d.selector):b;f.unbind(d.event,a.asynchImageLoader._bufferedEventListener);}}else{c.bind(d.event,{options:d,images:c},a.asynchImageLoader._loadOnEvent);}},later:function(d){var c=this;if(d.event==="load"){c.each(function(){a.asynchImageLoader._loadImageIfVisible(d,this,c.data("triggerEl"));});}a.asynchImageLoader._purgeStack(c);setTimeout(function(){if(d.event==="load"){c.each(function(){a.asynchImageLoader._loadImage(d,a(this));});}else{c.each(function(){a.asynchImageLoader._loadImageIfVisible(d,this,c.data("triggerEl"));});}a.asynchImageLoader._purgeStack(c);if(d.event==="load+scroll"){d.event="scroll";a.asynchImageLoader.onEvent(d,c);}},d.timeout);},_loadImageIfVisible:function(d,g,f){var e=a(g),c=(d.event==="scroll"?f:b);if(a.asynchImageLoader._isInTheScreen(c,e,d.offset)){a.asynchImageLoader._loadImage(d,e);}},_isInTheScreen:function(j,c,h){var f=j[0]===window,n=j.offset()||{top:0,left:0},g=n.top+(f?j.scrollTop():0),i=n.left+(f?j.scrollLeft():0),e=i+j.width(),k=g+j.height(),m=c.offset(),l=c.width(),d=c.height();return(g-h)<=(m.top+d)&&(k+h)>=m.top&&(i-h)<=(m.left+l)&&(e+h)>=m.left;},_loadImage:function(c,d){d.hide();d.attr("src",d.attr("data-href"));d.removeAttr("data-href");if(c.effect){if(c.speed){d[c.effect](c.speed);}else{d[c.effect]();}}else{d.show();}}};}(jQuery)); \ No newline at end of file