From 06fd823881ed807de567385f5eca10649295b428 Mon Sep 17 00:00:00 2001 From: Valera Rozuvan Date: Tue, 25 Dec 2012 08:55:13 +0200 Subject: [PATCH] Client side drag and drop. Work in progress. Part 3. --- common/static/images/arrow-left.png | Bin 0 -> 2467 bytes common/static/images/arrow-right.png | Bin 0 -> 2457 bytes .../js/capa/drag_and_drop/config_parser.js | 2 +- .../static/js/capa/drag_and_drop/container.js | 10 ++ .../js/capa/drag_and_drop/draggables.js | 35 ++++++- common/static/js/capa/drag_and_drop/main.js | 16 ++- .../static/js/capa/drag_and_drop/scroller.js | 99 ++++++++++++++++++ common/static/js/capa/drag_and_drop/target.js | 43 +++++++- rakefile | 2 +- 9 files changed, 197 insertions(+), 10 deletions(-) create mode 100644 common/static/images/arrow-left.png create mode 100644 common/static/images/arrow-right.png create mode 100644 common/static/js/capa/drag_and_drop/scroller.js diff --git a/common/static/images/arrow-left.png b/common/static/images/arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..94ed6404aa15923eaf3fe722d56ec06dffd9efb2 GIT binary patch literal 2467 zcmV;U30(GxP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_000R#NklWQ4t%ftRl8p zf(Nl7MMdQx7GPmf+NuZ&E@feMr@i;fA8&RROjJB4_nbL*X5M}0_xXK)<=zViF(yB^ zlwUe}kDqf;>*S{%9zXGEKAbu*|GVv|naAx-rZ36*!D;EN->E3-#uQ;+GVR-zsWHMk zC2{ZNnukWr&x1^u!;0H4`{e-Ludk%)p1}Z=4w*5gKAE|{-;r(2(9^op?eH>EDkRcb z%?1I55l38sZMA!O^4+z(u2Xi*#=uyMxl zXOH;H(`%4H5XEGQL7O!zZ^5)F|@3QjlD>;7R z)9vchndwWW4A5g9cwbr+MKQ*JF^I7cu@EESEa89I0J^p)VfB>$1j!5{0>%mnRiP-x z1yf&=D}Q^Gc4<|5QHRkLm#n*Q2))M5-rtY&fq6s*-23gSJ1;wI{F1G@Wlw|Dr!v&+ zOd$LZ$pa;w&CBi-==T)i4~YAOiI%_En7H&|wczKWD7`AOv5~ zeoVzhCvTrZ|69G39v(rUT% zlyVZO%s7De{&6YRm+!pDpy{s_>`El>9&+vp`oWibLdvp%CrUDD5cp7jGdl*agI z?5XTcWe|aqn9HR3tGI36Dx8?RUvcG;R~P^B z*v>5ba*q^5Y&_c{>R5QLO<6pGib2GXRiS;e0^T2U61y8R1PXjpxke={i-+G?BUknQ{;d$K2Iyd>^&^Mdu=@!rxAAOPf8b8TwtvwWY(qN)T6 z$!tKsPR+u&Hde>}aX+A0nFF3721|@+piP}H7IF6MO(cohp;6BR#RNyJqKXU zyyXP|QW^iv1uHj8Nz}o!Eh4r>)HXzI6NVw56E?*$m+RiBVMl!yfMh11OIe%+!~2lP z@S_l9l>t3l%e&QE>NY(v?6dM~E3q~$4gq>!FsSO~LNXgL<@_V{r6nt6=f30(yOz&e zzGK-dVF>z6c#02h9r)R{U5SOWmsClI5>Fjl@_Eo0ibzg@FhOmKqb|c<*}#ta3s-y3*p)egqY+dxq)0;cJ}f(Q+1rDpP396j+F zy0vN68^E=t2>{^e@lPQl+ND)VuWr{r$w{qT3L~~Uw#g}BH6>=wcr-T`c@7mTzN2}e zm)m^8Q&E7B$UyC_=V;#>pBBe9BR`#X`4{EaR ze)y_KJ74n{YwsPLKa`sNPsN{1yPWo;E7I;yv12J(H?6)pA*nLM@3p7!h1s z@)hE_c37fr*uq`Q%5B{iPY>v!&tG`Bv>ExZ>`bHveldOMgrojCoAuL&{rttG*SOhy zI_+`*3a^;{TJxg#Irm@Dm(zN6Wck*#e!8t*HtcF(Zz@Y&(q~UHL);aPEQ{$Mx-}z~ z+%2Ok7xUrzZ#SIPtKErnZ}|Q84r40VG-LR|U(Jr2IEQ6Z!#iE~>nhuA*}3mQRepD2 z?+*0q-j?z+MSd;C)e hz4p92UOwox{{bsE`%YJ7@d^L{002ovPDHLkV1n7dwAKIs literal 0 HcmV?d00001 diff --git a/common/static/images/arrow-right.png b/common/static/images/arrow-right.png new file mode 100644 index 0000000000000000000000000000000000000000..333796a5f345d1cc5df8a54a01b036bcbdfe5291 GIT binary patch literal 2457 zcmV;K31;?*P)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_000RrNklnwJp?bRTqE7QNawrA5O!Xodk& z5;IMTip$t~;1nP2`4%DgThok`XAZoPdlI0>^bLG5Z}9a4v>dmBZ}Ubl;I%(D*j#w> zpSQPal(i(cC$V51x#?gj`%7XXnvkRib<%<=sR50wx*@tW4$Iq`7-C1^aVD(Y$@z-t zCzWf*_xtgJt_je2@;bhLbtuioEPEnm*>7)uaS(^CfE=~y8=-3|^&&A6E?t5+6{ua-y;KY&j$LuA*ye{-zN6p?^NK+{MI>7)jdBdC&^gh&ghq!=100hLrkA)u5*_8;t7XJ)5f$NOxweBTrArqZo8O{i)p)MCaV`Zi&EEDqdve7c(cw0M9 zUfcPr1w*;D)-F-1-CDFTmo8J*wYD8Ef9LEcWxW}nh=>jf66v`}DUnigzS3kww}w=h zHgVe_ZhOS5VQd%E@vt11xZ`3w9+j3OK0A}(;OkFu_{^n3DW&-Gl_6IGBpeCA!Q#?A zU(S1i%sHD083Lpq9O;4QQW3MrdoYV39qY4tU>28RiOazq2h;H(;#y{{&Er;#>)Ec^o6WOslCwTJBtnJ`LLd|sAq2K3m~u}` zCf;!qr7;^t2rfiz#(aF7`jG%>L7kLWu?gMNvlOhN}$WX z<~;c|fYNr-Y5MA9Il^Kwom6>;0&4YqGWvz8i` z?UC>#-;}!y=$6HeBl8E;n9y?Eo?Tlu;P|N$-}TbHHbg*h-^$&5QxYYhDM%@45Z0J; zZ*wY4+Yg*bD&hEPi90Tq?Qycq6umn%BWl~dY5*M9Yhy|UghYCtKYk9v5cFNO$A{1r zB#;r(c&TS|-xIa#LvmMGjz>w%A^XO9xUOtl1CSOp(k#~lYMbx+AnsqahrMTiKvM)l zO40)gf9Tnqc*3bkhna+^Rw6YLBxc#^H2^{pxYCnI??-{I4S|&4xokaFN>Ec!1PCFx zA)-+)tPx8%wRVN;o6+_V2&D9Dj|Na4HDe)74dc4W4=#8h6cy=tmkYM1fRg;Cs#L`+ zp6k_`7kg)MF`7UTf{3A#vwAP-VV%aQK}_34R|J|Z&=r9zUE-ESO3<(?s}%_9+8ILt zw&Sl>%4;iuM=WYGrB@a&^=U<=X`?8D^q@xHf-gB$9^-6zGg0$0id zwNvnqv!#`UG9vgYTpa>D%qo*qE?TX_jWNv*--zp}?*hfYhL|am~&m#@yXb;=17dcL=1!sxq10uO0LIckov(piW5V zj=aw}QCfv2BvN_^=}{83FssezxKvpVJ#I>uAMQFz@Al2#uK_rnKWfW|yN)n5r;{LN z0rIC1(#4LN%y_UPbNhFs!u0z=-H<`|g*!NYv5Lz@%x_@ju|$mt;|U)kQF%$6FOMBv zKfYhp-Lu|9xpUUL07L@%f_FbH;(=dfOI-OA2-mh5+dG@t{W}r2T~r~c6E^6uU^B-` zE76ePd9_-%OWby_5)N_Oq1;T6dutQ<{Q6I6P$xVUVCPGZU3nr34_+iMtQlY?d~dxosS!K~{MAoEmnrK2Xp|m#JZH{_6wV(ksfhW(WwjC#p(}Kl`2h#cmeY3b zUpR8U0_|$OLrRby(S%J&mC3u0ci^r+Y@};ugB}3W-nd7#b20uC>FnvC4MO+)U? z9@x8EmV9X59|h@QKOOi=C_=%r90&%`RIO&ULZ}F#T%m-Az(Y_xGey-dH+y)w|?mXz3I}?Ida+NLV=?Ac9jw-1VU3$ zlITK+TE|=A4Mw`ZKrA3g2naVt5p_%~M^%az(MhZj9fdCcUN39GocdfdSC#uLvz+M_j3-PM-H^-@VlsI+XUDGCuo69FMP z_+1IBb{t^q{!?B!s81*>7?%go{<+m0cs=)*UrxKduz@}EFW>1h$1d-GDQXV#BzHTm zmzfgu&qNjRM9k3CW16b$NDUhAomx8bi|T)FpZ+$V&wG;p>*+Ri!!Q14#(SS#*S!A# X;ZM1LG>q9a00000NkvXXu0mjfzEPn$ literal 0 HcmV?d00001 diff --git a/common/static/js/capa/drag_and_drop/config_parser.js b/common/static/js/capa/drag_and_drop/config_parser.js index 7c5e5ded73..6b4c2939f5 100644 --- a/common/static/js/capa/drag_and_drop/config_parser.js +++ b/common/static/js/capa/drag_and_drop/config_parser.js @@ -13,7 +13,7 @@ define(['logme'], function (logme) { returnStatus = true; state.config = { - 'imageDir': '/static/' + imageDir + '/images/', + 'imageDir': '/static/' + imageDir + '/images', 'draggable': [], 'target': '' }; diff --git a/common/static/js/capa/drag_and_drop/container.js b/common/static/js/capa/drag_and_drop/container.js index d9e7f51fc8..7fa922ba43 100644 --- a/common/static/js/capa/drag_and_drop/container.js +++ b/common/static/js/capa/drag_and_drop/container.js @@ -8,7 +8,17 @@ define(['logme'], function (logme) { return Container; function Container(state) { + state.containerEl = $( + '
' + ); + $('#inputtype_' + state.problemId).before(state.containerEl); } }); diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js index c291422fee..daf9c0ee02 100644 --- a/common/static/js/capa/drag_and_drop/draggables.js +++ b/common/static/js/capa/drag_and_drop/draggables.js @@ -4,11 +4,42 @@ // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system (function (requirejs, require, define) { -define([], function () { +define(['logme'], function (logme) { return Draggables; function Draggables(state) { - state.draggables = 1; + (function (i) { + while (i < state.config.draggable.length) { + processDraggable(state.config.draggable[i]); + i += 1; + } + }(0)); + + function processDraggable(obj) { + var draggableContainerEl; + + logme(obj); + + draggableContainerEl = $( + '
' + ); + + if (obj.icon.length > 0) { + draggableContainerEl.append( + $('') + ); + } + + draggableContainerEl.appendTo(state.sliderEl); + } + } }); diff --git a/common/static/js/capa/drag_and_drop/main.js b/common/static/js/capa/drag_and_drop/main.js index 2745374950..2d4fa07cd0 100644 --- a/common/static/js/capa/drag_and_drop/main.js +++ b/common/static/js/capa/drag_and_drop/main.js @@ -5,8 +5,8 @@ (function (requirejs, require, define) { define( - ['logme', 'state', 'config_parser', 'target', 'draggables'], - function (logme, State, configParser, Target, Draggables) { + ['logme', 'state', 'config_parser', 'container', 'target', 'scroller', 'draggables'], + function (logme, State, configParser, Container, Target, Scroller, Draggables) { return Main; function Main() { @@ -17,6 +17,14 @@ define( function processProblem(index, value) { var problemId, imageDir, config, state; + if ($(value).attr('data-problem-processed') === 'true') { + // This problem was already processed by us before, so we will + // skip it. + + return; + } + $(value).attr('data-problem-processed', 'true'); + problemId = $(value).attr('data-plain-id'); if (typeof problemId !== 'string') { logme('ERROR: Could not find the ID of the problem DOM element.'); @@ -24,7 +32,7 @@ define( return; } - imageDir = $(value).attr('data-plain-id'); + imageDir = $(value).attr('data-course-folder'); if (typeof imageDir !== 'string') { logme('ERROR: Could not find the name of the image directory.'); @@ -50,7 +58,7 @@ define( Container(state); Target(state); - // Scroller(state); + Scroller(state); Draggables(state); logme(state); diff --git a/common/static/js/capa/drag_and_drop/scroller.js b/common/static/js/capa/drag_and_drop/scroller.js new file mode 100644 index 0000000000..451d15907c --- /dev/null +++ b/common/static/js/capa/drag_and_drop/scroller.js @@ -0,0 +1,99 @@ +// Wrapper for RequireJS. It will make the standard requirejs(), require(), and +// define() functions from Require JS available inside the anonymous function. +// +// See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system +(function (requirejs, require, define) { + +define(['logme'], function (logme) { + return Scroller; + + function Scroller(state) { + var parentEl, moveLeftEl, showEl, moveRightEL, + moveRightEl_leftMargin; + + parentEl = $( + '
' + ); + + moveLeftEl = $( + '
' + ); + moveLeftEl.appendTo(parentEl); + + moveLeftEl.click(function () { + state.showElLeftMargin -= 100; + state.sliderEl.animate({ + 'margin-left': state.showElLeftMargin + 'px' + }); + }); + + showEl = $( + '
' + ); + showEl.appendTo(parentEl); + + state.showElLeftMargin = 0; + + state.sliderEl = $( + '
' + ); + state.sliderEl.appendTo(showEl); + + moveRightEl = $( + '
' + ); + moveRightEl.appendTo(parentEl); + + moveRightEl.click(function () { + state.showElLeftMargin += 100; + state.sliderEl.animate({ + 'margin-left': state.showElLeftMargin + 'px' + }); + }); + + parentEl.appendTo(state.containerEl); + } +}); + +// End of wrapper for RequireJS. As you can see, we are passing +// namespaced Require JS variables to an anonymous function. Within +// it, you can use the standard requirejs(), require(), and define() +// functions as if they were in the global namespace. +}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define) diff --git a/common/static/js/capa/drag_and_drop/target.js b/common/static/js/capa/drag_and_drop/target.js index eaf4ffa731..486a6264e7 100644 --- a/common/static/js/capa/drag_and_drop/target.js +++ b/common/static/js/capa/drag_and_drop/target.js @@ -4,11 +4,50 @@ // See https://edx-wiki.atlassian.net/wiki/display/LMS/Integration+of+Require+JS+into+the+system (function (requirejs, require, define) { -define([], function () { +define(['logme'], function (logme) { return Target; function Target(state) { - state.target = 1; + var targetImgSrc, targetElContainer, mouseMoveDiv; + + targetImgSrc = state.config.imageDir + '/' + state.config.target; + + targetElContainer = $( + '
' + ); + + state.targetEl = $( + '' + ); + state.targetEl.appendTo(targetElContainer); + + state.targetEl.mousemove( + function (event) { + mouseMoveDiv.html( + '[' + event.offsetX + ', ' + event.offsetY + ']' + ); + } + ); + + mouseMoveDiv = $( + '
[0, 0]
' + ); + mouseMoveDiv.appendTo(targetElContainer); + + targetElContainer.appendTo(state.containerEl); } }); diff --git a/rakefile b/rakefile index 53d7381dd7..fa0293b900 100644 --- a/rakefile +++ b/rakefile @@ -53,7 +53,7 @@ default_options = { task :predjango do sh("find . -type f -name *.pyc -delete") - sh('pip install -q --upgrade --no-deps -r local-requirements.txt') + # sh('pip install -q --upgrade --no-deps -r local-requirements.txt') end task :clean_test_files do