From f6d046dd045cfed04008cbc779a5a12d6d9fa1b1 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Tue, 16 Oct 2012 17:08:56 -0400
Subject: [PATCH] added autosaving to field inputs on unit and subsection pages

---
 cms/static/img/spinner-in-field.gif | Bin 0 -> 5478 bytes
 cms/static/js/base.js               |  52 ++++++++++++++++++++++++++--
 cms/static/sass/_graphics.scss      |   8 +++++
 cms/static/sass/_unit.scss          |   1 +
 4 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 cms/static/img/spinner-in-field.gif

diff --git a/cms/static/img/spinner-in-field.gif b/cms/static/img/spinner-in-field.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fe2f556f5e61beae7e0a9bac094928ce46326aed
GIT binary patch
literal 5478
zcmdT{YgAL$w%&P?gb)%4Gze-4ARw;<0wfe{5&}j98hKc>)FzN9RD>9!qO~>&Ap}I;
zDk55lC?M1V(iW|@2@gR;4L(}*R7gU2ioC=g?d?71hPL+JafkND{df1s7}<O6IoF)u
zn&14^+8Z}T(&&5)fC2v52h7aBc((Y<<g*t~7ha6dF3&CgVtl$hHTUAjv8Ai`pH0ub
z_<8bq;WrZ#&tCLCnx9?x#q@M};OB)a_nti(U%K{S?tyXXgQ_RDo-BN$duEtk{>ilT
zc;flTXGXsrdUp8ISl{D?k7`CfIj0|cx}1D^MD_Lf$kg-E>F3&?=D&Y9_vNjp{r^}P
zGAv%a`LyHi?6J;?VbhXncKQ5`nfu1Yl(VDTt4Bl)hHa-tK5sSYMi=$d%m0{o-u2V`
zx!#$R-%qJ~rcYd-d^ooB!;f>9@66sFS$Hz_JoAF#V9VIepBL_oE*|}MqHB1*^4jF!
zlZ9%{)S)lOimy!Y&W?We)tKg|IpfUo=+yJw^@bad=bubI&u%o{9bMetY%IMxS)-kn
zwVA4Zm}<K-d+FBG^mF>Y$MYBZX4>z}p6QzI9-ja3^hiVBjONF=A^oCGzu0;2S;>`&
z#{Q=*15azar*Drew%(qVTr>*n^yS}88fKP%csTb(_w;x7=W<%c<n5-c3x?F%(KFiV
zo=5X(YJJkFCuh5+PyH};XJm0})svld`nKD%*B{JfoHty5IQO;gS>EOG=7Fb8H=m|_
zF<N$Y@}6O_XLvrl$tZ0zDLcmZUo_@-j0<b^g4)shhQ)^dnM;GS71t(tXGV9`=}&w=
zwM(tv+h{y~eKNP*wCB8`wr4u8W4yk1=0Nk<zKcdllTqAgZ0w)e+hE*LGqUyMllmJo
zbv@H%-%X}|F{<vJ`Si;%d7CN!>+#EXXKS=m(pJ-FUztv8rYgRhJkV_XYH(K3KF&Wo
znt1X_(YF(d%i~ABGR-gj0{lO@od0bZ8<7wn&g4e;`;s9bbK2&iq!=!d&6n`a|Do^Y
zi1?|yg%V<la94U}7-{~yA4tS>K^W<Sz!-9jC|sD9&N(C&#vh7JNIkSWl`bH?w}BX%
z6Oyw>v_~l66La=tWM+rtgpv4ytQ290`F>^Ck3{_4M6x@K#9VnnT!|T;B^D9`eFJ<_
z$rK7PD9D#W4GapRcoY4}6n{Um`4{9vp@swoh4=>(|GY@%Xkx+6kT`bapRvqOVWc#P
zL=@uZci_MQ-va@@S>j!O6gr*0GKasvkJ-W}`(UPopW~C6?ecmCwlF(YoGy~2XJrys
zX5^=2?URI&%$fcHVUH*#=C6q}vweRD<eQqc$1jI3@}u~Y{r2ox!S%a!wj@sY-)X$j
zIy>Q@Naz<Q%+A^;P8FKXU0yqz*Y58Ftr(iK33*?fZY~NxgPoPSZ;vojvWXo=GQaT^
zqzgjmk?bI9Ae%x9^d|?=C={B%KQn?wVUvRcA_8f&;Ma4!$(QCIK&CLsRB~h_okEH5
zr_<Sik>tQ|vcG>YIh-Ew+ILfCwuGOVDtsL`-5mE%-+;gM4G9+u`I0PgLRMDBYX)%B
zvLspAX;~s-czh7iBZi-vp1CsMxl*7%@Un&C^!-9Xq&RC2@%I%DNq<8IWICHor3Oa?
zvHnEP3}Qz_P+8%uKxSY7JBakBui*c(YJTQq{8s4kKj`v$$jrf&+rP+fe)y|>gqh}^
z5u2L>^zVQD=WqY<>#LXl{N=^+^QFaw`MGDaPiLm5CMU*CV@891bmYm;|9Jdp_@^Hq
zKDd8xNO$+n?ZI0EH~af;^!9XjX*EB5fBo8bSFdz_`_0!Km)qM~zq<5gOY_C1#)b>$
z>(8m{YQH#prsj0@sj8DFj#pNcmz9<jA1gXqSfI*R<|%UJGU?|>K0EyBp@TUG_V1Hq
zi}#AMGWTTc{v<tZ*G{1zHHFXnc*jS{A8y~4^ugA|g!s5E-1lQ+qBlov;%tnJV287q
zjQ2K#g}xg?rv(QEQUm-cWItaYZ?E;99`5VhTwO@c#I<WyJ2|d$AiQI5hqtxCVXZM%
zXiF3lVF8ChAz-t_IKP4-0iX}?UJ=QajTk_D1(YBM^$j=L0P8h~<eca(msR!{FpbF5
zuuxnEqtXLVf`GnRMU|G%E>DHQvE<TjHi%kB9=h6%l@@q~AZ9PxOjv}=_OH8^L~e>K
zqrO*yYvh7B7wOrqZh=xrU!iMcMlT0t>Vn05oGGE_DV%Wum<`@iX|oN4vzp}mvJ~h=
zTA*CWIqmfY*7jnuD}ycME4I{jzD$Efs-UFzkeqaUF3i!D2!li4hM^|T>!FKBb~G|M
zr-<db{VYS*3LG`G*(L%)Iccb?4S;~10%|XERPUFDbPz!{QhBQ9)&k=>1s?<huL3yg
zzH;KxKD-9Yl*Zw$F;Z}UsSD&>*ry3VSSt@yw#JnJK(-rup(LBL8QVy?bt*gm^#md?
zv(Yx*eTR2aT?)tEfpnRQQxw7+kW8n>PJnNyPD&dootCEMqagM$C;okw90G;dzZpZD
zxeiopcei_VWR42kzkoSGmh2P}m=F|7S)OEv<fq+e4hTX~@CJTybKGWE9*<{8k^z0+
z58q3jwhotp;AjMQG7`Tg7`A~cVt|m5^&6mJLA4+d*q1==Y{g4K5Yj-#sfQ^|GMfan
z$FGJwOZjQ&jtm{MmU+s5gHyrK7BC3ofLNy~GC^)TIwNBb^W@?25T$>d=#w&{D%XXB
zfZ8!U5HQbof<k!&?3*glx`INlj5|(Vlfp2gP@E+tZg{Z>Ro`8$#4NX5#4Y0TanuYG
z9d0;b>yvcN#2+(8*Rq_7eP&Vya|z16kR;kxeNsu3R;L#b^x9naO$0XKkT)Q0I74I>
zc1z5xX*`53*L27b2&?@fZSD*#7W6@*iAE$wqBn|tu{T>mTIg!GLt90aEEUvqt&z=I
zFaqIFmc3hP$~fx;3anhi9b??g4`hSMXvEt<C`yg@>Q{ZVU26t$*UG1*Q1SACy8^FV
z?{QEUu!(fW!D)wcNF)*2<QO|p%K?xmRX_*Zl_&KY#wq(;i&}9ii?cz#ae92xO;%lE
z*a=BtKqX%WPOheIx!<9YHXn<A)p;MU0l^?WMSCk*7O?;pfgp&8Fn4F02LdVI7=?jY
zmR!f)lgZ0nXwr<%6fn?@#Lsa;<ZPu9hElF)Xk1zLR`G8G(QdAUf_dSXg^Oz(7TeE-
zL88{g#TYC4k2@&C%ab45y4jr|IkSe4;udYAJ36-Ru}p12j4tV7Z~`vgsc=S@Y{}^{
zJR}6i9O~%zECs1>hd$Bb>XlP%$w3)|X@NV@*am@j(n7~n49Y9k5|5>sHd_WIh~WU4
z$N<4?Ts_L`K}rA&g?a!)kxachMVVI3O^F%-&;=?wi&LS5tz)B!D8|M-lwTBr;6*0B
ztro7jI*W6@A7XIW{?bkE@Z(o=bOC)TJLT>p4ATBhYJ2a)QO{`WfRdALdy;6w+VhcW
zY#@&&?H1}*Df_sJmx_YklY|X6di=2R$085UBpTR%nE=N)u|6wv*~PkV?-D6s$?CdG
zFPzL6erZ<#M!CVO?b|gF4JKf%GMNql8YuuPE}-o+cEg+)5&==f(?DwWx3gKb-B2h9
zwPbWEP1S;Jp@9DFgu+V^cWvQe_JP=btc5vKLd}d#UO7tXzd(J}mIpfL_)T2Xui3Lw
z$F)NE>NrE~i88vn1KX(q$M`s)OU_^uUAGiMYes7NJw=;T<WI>R*d_TCB}h3{IZ#2=
zf*S}s2N8U?eq>B+#WkaznVV~kLzsFPV}mLRghbYYdH^W^D&E#gfpk$IG(lQt3PbbJ
zbtIun*IK8L!BKF$Xcce+kF&xAycxs_q3|NojmB+9ToGnM#e4gP&2$pAsvejUp<D16
ziy&PJ3l3G$_cJg@DedHBZd>|E3zusM!K<z&99Y@+uc<A05yg14Pm3N;>rb?@@$hif
zQI?bB?8MfpM{T)L@klA~khjFlQ(k!gSHa`2rO0wSONVxYepA(HkQdciH>78RY=Z7c
z$xs6U1a*ueV9ENbylZ#@s<Rv-2LO<AFM~qW$lxUqCtK~C3ALiL30Niv9q%3MgzXox
zE(M=H{Bp6~WPwpyk`bW$0~YUaFQ0Ygi_w}hP=blGO=jBc2=6RM=tSTM@M?5PL?`>=
z=6o7vu;r#_Y2PuAeO1Y{a@kZHHL~dEq+Eyvw83LyaB)EmmOI5VA2w<=8nYh3P4!rH
z6p0K{RgraiEd}knhL1|jWo&{#F^ykS<lX4#bOHto5H%D_Dnk)sph{D*CvuYQ-mbII
zR`^gI-e-e{xh?uv2VJ4HsX!Y~pq2E>T8>U$;kZU#y{y@r!GK!0dpI$PE=)h}nIi~d
zm#f^)7F~i{dUyjyg6=L&>-TKML2RyKfhLA@iegbzNEv3lkjA?OXC@46>0(0~gf+CL
zYz?4*gT(Mt^--HIfvunbg3*$zh)pc)^uI?1q!xYNH3pppcSiu)5=yY28f<ouy!;Jx
z3x)D=PvgBsXD^#e;RKjUpy-2D0Jfi;TV;z6L4dmDFtC#3dzh<k>^>QMI!9Bscb4hO
z!Z`^Z)jG#`hbBW;x5o2f&Jc9Tm%8!szG5#wtarcX0=HpXsLEUCYzATXe)5C13g>Q?
zdMl?ihXuf8&Gdt_&Vh&(!Bwqa#EwVirvhv6hzF6Zvui3k2v;65c%Y=9NJgEl+}eKg
zR>C&`69TP_mfED_!aJZfA4|GsQ<zdd<82z{L^gCGBi?;r#=(V_yL>J;X&K5vsM3n$
zT%ad%<o4oKSC}Gi4V37mOz3RaMxlZ!IuBy20fq&mOA;BvsM6z}ZuY}BJzH}xt@CCR
zS}&JQ!MNwDsa3y9r`lXT{N^`66DUm#Mwjc63z}wi4TeLxTDg(vZRs+@WoUbmeo?Ma
zr_@v#9Kl!G6toLIfQ6$2XrcZId3WnQHmXiE3Y(*j#q&g{H@El7&W+}&yGjw!RJ0j{
zMuDQ4Yaj>r+9^@?(SUkFZs&;~_I@mC(csrxQoU)LI9+N#763>^OF(z3Ek>43Wy=6C
zI1?2;wlm)H6bg(8yP(W3p@7uBValG8wQKu$cH*|>&DMV2zd_q6q}#U<AMV`uxC}CY
zz?`}UeS|X~2;bS9u})9Uja9AM9x9>t@(|%jJ}a@QZs4YsjWVlxxMNpwnY)ktZ$NnK
zqytbWA}Z9}+){+C<&Ff6*3^Ypf>ts5v0LEfh^>QFScDz`L9kGUZb2Kp$`gVLC5U)t
z5D9WFhs)$ifnZqVl+@YE$}&%mdcc_AT4JebuH5a0+m7@khP3e<^=?%RLBKr4=iIyP
zEsuUhD|arcBOliP_Np|c;N*@Cc&B*$g-S1<E#_uQIRFc1H@DUow&yF3u2p931jf{x
z&od7~-_jN<LK_N~GT<aPG?d^$mV!Z8aq=l?Ef{1ziaSZmQe{fiZllV)A4SV7P?%8f
zx^=M%g!Mp@G_e*4hv0f>Rm6eFT30me5|<PKtHimuLc=aVa4`I5p$FBi5>`G2StL;3
zPi?CA6U_Ahc(sb4v~voKDianql3I$2w(RBOoD$OF0NQ@}aX0r$PRFYuOKWQ=<orUR
z_^872<1jsd42kG3as4odLnpskXjcdo`imYwzq=m+CD24>dB*xDKU!dE7|1?wsKUHu
z9z}WaoNj^Cx;Bu9od9SjS(aPmq(R#?3j{Rlonr5#Kx5I->b~`dMP%0scMMW$^Js6^
zV8e#b@SrCQ84GJI?Lvcp1%+D#oVKyks^!k$*nCAxl^S)_-ny97Q-<vxa`Xp^J%@~@
z8=miMuGSO`MRhaWKFa(^Y`Asw3xd*Nl}0DH<v}gSp#SI!*#G)E`W?hpy$lSp!r%!W
zScpn);Vh^X^LSuK`(lR-o^(Kt1Q!c)*e={UFbIx)*$83+Yn>QHwHht}cJPXxI%Pf#
zh07e<vE{ff?7Hgr0@x~1U4jbBJhH~ipwZ@s9sUGSzRI0bjX1V-o7hHXP+*WAL@ciN
zrd6cI*mwn^98^Og#q>^QVNb={BPne_c3L;X0!_$xRk!&^0$J(6;t+Rp9mwl}6%g<K
E7uWU`YXATM

literal 0
HcmV?d00001

diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 907e01e3d3..a043bb3bfd 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -4,6 +4,8 @@ var $modalCover;
 var $newComponentItem;
 var $newComponentStep1;
 var $newComponentStep2;
+var $changedInput;
+var $spinner;
 
 $(document).ready(function() {
     $body = $('body');
@@ -13,6 +15,7 @@ $(document).ready(function() {
     $newComponentTypePicker = $('.new-component');
     $newComponentTemplatePickers = $('.new-component-templates');
     $newComponentButton = $('.new-component-button');
+    $spinner = $('<span class="spinner-in-field-icon"></span>');
     $body.bind('keyup', onKeyUp);
 
     $('.expand-collapse-icon').bind('click', toggleSubmodules);
@@ -31,6 +34,14 @@ $(document).ready(function() {
     $('.new-unit-item').bind('click', createNewUnit);
     $('.save-subsection').bind('click', saveSubsection);
 
+    // autosave when a field is updated on the subsection page
+    $body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value', checkForNewValue);
+    $('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
+        this.nameString = $(this).val();
+    });
+    $("#start_date, #start_time, #due_date, #due_time").bind('change', autosaveInput);
+    $('.sync-date, .remove-date').bind('click', autosaveInput);
+
     // making the unit list sortable
     $('.sortable-unit-list').sortable({
         axis: 'y',
@@ -207,8 +218,45 @@ function getEdxTimeFromDateTimeInputs(date_id, time_id, format) {
     return getEdxTimeFromDateTimeVals(input_date, input_time, format);
 }
 
+function checkForNewValue(e) {
+    this.hasChanged = this.nameString != $(this).val() && this.nameString;
+    this.nameString = $(this).val();
+    if(this.hasChanged) {
+        if(this.saveTimer) {
+            clearTimeout(this.saveTimer);
+        }
+
+        this.saveTimer = setTimeout(function() {
+            $changedInput = $(e.target);
+            $('.save-subsection').click();
+            this.saveTimer = null;
+        }, 500);
+    }
+}
+
+function autosaveInput(e) {
+    if(this.saveTimer) {
+        clearTimeout(this.saveTimer);
+    }
+
+    this.saveTimer = setTimeout(function() {
+        $changedInput = $(e.target);
+        $('.save-subsection').click();
+        this.saveTimer = null;
+    }, 500);
+}
+
 function saveSubsection(e) {
     e.preventDefault();
+
+    // add an inline spinner
+    $spinner.css({
+        'position': 'absolute',
+        'top': Math.floor($changedInput.position().top + ($changedInput.outerHeight() / 2) + 3),
+        'left': $changedInput.position().left + $changedInput.outerWidth() - 24,
+        'margin-top': '-10px'
+    });
+    $changedInput.after($spinner);
     
     var id = $(this).data('id');
 
@@ -252,10 +300,10 @@ function saveSubsection(e) {
 		contentType: "application/json",
 		data:JSON.stringify({ 'id' : id, 'metadata' : metadata, 'data': null, 'children' : children}),
 		success: function() {
-        showToastMessage('Your changes have been saved.', null, 3);
+            $spinner.delay(500).fadeOut(150);
 	    },
 		error: function() {
-        showToastMessage('There has been an error while saving your changes.', null, 3);
+            showToastMessage('There has been an error while saving your changes.');
 	    }
 	});
 }
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss
index 994372504e..c6d775ed12 100644
--- a/cms/static/sass/_graphics.scss
+++ b/cms/static/sass/_graphics.scss
@@ -269,3 +269,11 @@
   vertical-align: middle;
   background: url(../img/blue-spinner.gif) no-repeat;
 }
+
+.spinner-in-field-icon {
+	display: inline-block;
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+  background: url(../img/spinner-in-field.gif) no-repeat;
+}
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 208404eecd..e15288024f 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -323,6 +323,7 @@
 
   .save-button {
     @include blue-button;
+    display: none;
   }
 
   .save-button,