From eec6ac3e47f265e905b6e9f9c0428314847217e4 Mon Sep 17 00:00:00 2001 From: Patrick Donelan Date: Fri, 17 Apr 2009 09:39:52 +0000 Subject: [PATCH] Refactored Edit Survey page to improve UI, fixed some minor bugs, cleaned up template and css, reduced memory usage --- ...ot_import_survey_default-survey-edit.wgpkg | Bin 1862 -> 1627 bytes lib/WebGUI/Asset/Wobject/Survey.pm | 2 +- www/extras/wobject/Survey/editsurvey.js | 63 ++++++++++-------- .../wobject/Survey/editsurvey/object.js | 45 +++++++++++-- www/extras/wobject/Survey/surveyedit.css | 41 +++++------- 5 files changed, 91 insertions(+), 60 deletions(-) diff --git a/docs/upgrades/packages-7.7.4/root_import_survey_default-survey-edit.wgpkg b/docs/upgrades/packages-7.7.4/root_import_survey_default-survey-edit.wgpkg index be9e8f2c65473e837fbdf39f2bf9c3e605e103a9..0f0cb33ee729afdb771c31a22fe85e3b784a867f 100644 GIT binary patch literal 1627 zcmV-h2Bi5PiwFP!000001MOJc7{xBqO*|Ml&wz6lAxKL9UO zrQ!mQN!95(zy7vsh7!ROA`~T3j~X&f=?j7t30}WmKp?`$?g@l+7NrNZ<#$LTO4m&hCPKgBc(WQ);GHz%1V=K)*JF*?)Xp= zO4z0yI8$7G%DQmK!cKh6GT#Su>d*ivVk{>vjv_OuD;ub77LyUj0UScECNldt%w(JR zEo3DY*=(*x&Ibxj>SH*EmPj4v%*v_P>sCFZ1zHkT`s!ux3uCaupgaO&XwXw|*xgLA za7>BOhkC7Q4ZVF1&L*5$R3MWNs2-GfwoIyn#w&GMYrnZ`D>hw=;RELn%i&sCCFsbJ zL`o>)>Yz^@2T)A?$g~R-kSsVqAEnHHrsIBHM7z_zO9V28($OutT8;`&h%JBC`R?dR z$L872?oPR`+_A=FV3bfV;IVkluwW1y(&Z^stHz;VR=BqcQ%<*5y#lG_xg2vjJ#fq& zy&4WBRq_a%aWTQr9~nI~J?OFsV+o}oxIwxJW<*DN&bT15Czs3;C;KYtr&;Q!2NxAg z1Av3z!m`!n4GeyR_@|UWLC4wOqdsJEM#M5LC|h#J()+^FER6C=*bb214-SfshO&?d zs;)$IB6xfbm@(V-lsY0P@JZH^R*UP2hPj@|FDVL+#s#`RG2N5Rh;G-!RJVJXH&Dyn z=uwE-_^wv=H4o^BLX&E{vF84M`*G826%tL~V`g94UeK|D?i@oF6=Yds_m&dd+;)m7 zDm5t{Mpo%kqX?U2GT;gnfQ<_LWyF-Q(G}FC?$*97U-#XqX@jdcfu4R^?z_$QbOH6b z;nQqBDfRP-ZW4u=xC72^_w@4h**dsXo^gMY1G{t!KxGEjszv5{AajVB+u!d1YeOm-V1ws>u#a)9Q%_+;1sK6$Y*_a!bNP+D8a2aZpa?r!eHHqmfZ-Qlb9#! z{1(OvkF)!Pw=Yui%lEVQGcP_J&BFBL$@u1GR;WPb#au!+ziPZOEXS)_QVb%*+^F0Z zBjzGz8I8TpUb_VuQb+_RLTY8|wTEo*MUg>g)*P@O_T!V*dwMjk>f4^L558{VGU=Yj ZJp%U#+#_(0!2bq;KLISLZVvz)0047I9BKdn literal 1862 zcmV-M2f6qkiwFP!000001ML`VliRlOKIc~;%8Z=Mn4+Z9MV3ro#_=P**1lfiySi?){bbu0hoqEkT!B75Q261nHn+2g7EYWmzsN?L{d_b~@8D ziO~~f%u{6H$32s(bzowxgqVX2 zq_-(}pqb&nGSZtTn$!3i{YNH2 ztc23jFBXf%4o;=jL4WJ0o@?n$?gOQbLT9$h6&rT543GW7fsOpexjJ z3CkIiMc0R4*Fc683{{|Xx3FA*pEJ{aadzI7NO=x~NDwr3hA`&2-Ey8cbVdC#xP;O1 zjV@Hv4(m6lR?v%1!E+ta|D8!AaM-*$kG*wPZOw=6kHfI5jT+W(hhc=y5#sGIJH8T0x-)C&&B_#Zi`RzOS&l$Mqyo_qMajG-o?-x7)a#=i#7Zw2k=WS>%iI@622ll z0j!Lg>wpTeRVYR^SSX71VSs2Z;{&8l_fWg+B5si>;njgETF`s&n8JT+2bqxPo?EZi zs}AZ5q#dSV`#Y+?a8I=_qC`UN3X=W*Gd}Xf0z+u+4L3 zfqq$Z^+1Z9(tR{JzUzy6EZ6BN`FBMHHoC*`1u@JRs7!lst{zRGIQyG)OtAoMsDHC4 zWc&c5WS`B+_~gTE!jexT$R1ToubD5X_G#ZiAn}oT=kA?$3v$N`Rf*K-A8l2y){e2J zT7n0eKtcIknH)q+hr4R4F!vfBK&|LHf7qi9=iffY_E)vpd28j3Yo)I#wAZk=f;-}t z&Y>r3FZpGC8rh~5#I@>*3gO+U>YTv6DlQ2$`p|!)^`fv4`*cGf3N4-9hrrrR9IKG? ze_~T|D!=xq;29&6Q;8>pUhk!E?tmpOeiZ%tfv=1 zvSo)7)NZ@l>nq0_-k*=ieF%K)c1tsZ6Jt(DmJf zuA0*|6rF*wJ$C~HAMMkri<9Z}vYH`m4`d!eAH4j~H0Om%_=3Zn#t$TpC-;WK$zalO zbZx(bKKA1f;)9nwf$Y$rm9ve%bLQte;|9bHqM}+olLi96iTqqyH~=JOu(yM^bc1!} zB@Qb-&L2llg_{I*XbxkoReSX067WkHA2>Rr{;)N#$#F`e9pD4%oKBxzzIeW`TyCDL z__|W;)*y_VQdzqaxd~Zm5C@w~#*@j(c-WF!vlYi2{kR$j4Tk$>;pPG+0+r*mE@2%V+g+&Y$}%W|Z)UY;-h@~jZqzq0hz86?@& zsurveyJSON->validateSurvey(); my $return = { diff --git a/www/extras/wobject/Survey/editsurvey.js b/www/extras/wobject/Survey/editsurvey.js index 53810357a..a29ef9cb0 100644 --- a/www/extras/wobject/Survey/editsurvey.js +++ b/www/extras/wobject/Survey/editsurvey.js @@ -11,7 +11,6 @@ Survey.Data = (function(){ // Keep references to widgets here so that we can destory any instances before // creating new ones (to avoid memory leaks) - var autoComplete; var sButton, qButton, aButton; return { @@ -77,21 +76,36 @@ Survey.Data = (function(){ } // First purge any event handlers bound to sections node.. - YAHOO.util.Event.purgeElement('sections', true); + YAHOO.util.Event.purgeElement('sections-panel', true); if (!Survey.Data.ddContainer) { - Survey.Data.ddContainer = new YAHOO.widget.Panel("sections", { + + // Calculate the bottom of the warnings div (with a little padding) + var warningsBottom = YAHOO.util.Dom.getRegion('warnings').bottom + 5; + warningsBottom = YAHOO.lang.isValue(warningsBottom) ? warningsBottom : 50; + + // Calculate the bottom of the viewport (with a little padding) + var viewPortBottom = YAHOO.util.Dom.getViewportHeight() - 10; + + console.log(warningsBottom, viewPortBottom); + + // Panel has height from bottom of warnings div to bottom of viewport, + // but no smaller than 400 + var panelHeight = viewPortBottom - warningsBottom; + panelHeight = panelHeight < 400 ? 400 : panelHeight; + + Survey.Data.ddContainer = new YAHOO.widget.Panel("sections-panel", { width: "400px", - height: "600px", - draggable: true, + height: panelHeight + 'px', visible: true, - bodyStyle: { 'margin-right' : '5px' } + y: warningsBottom, + draggable: true }); Survey.Data.ddContainer.setHeader("Survey Objects..."); Survey.Data.ddContainer.setBody(d.ddhtml); Survey.Data.ddContainer.setFooter(document.getElementById("buttons")); - Survey.Data.ddContainer.render();//document.body); + Survey.Data.ddContainer.render(); } else { Survey.Data.ddContainer.setBody(d.ddhtml); @@ -100,8 +114,10 @@ Survey.Data = (function(){ // (re)Add resize handler Survey.Data.ddContainerResize && Survey.Data.ddContainerResize.destroy(); - Survey.Data.ddContainerResize = new YAHOO.util.Resize('sections', { - proxy: true + Survey.Data.ddContainerResize = new YAHOO.util.Resize('sections-panel', { + proxy: true, + minWidth: 300, + minHeight: 100 }); Survey.Data.ddContainerResize.on('resize', function(args){ Survey.Data.ddContainer.cfg.setProperty("height", args.height + "px"); @@ -115,6 +131,8 @@ Survey.Data = (function(){ var _s = new Survey.DDList(d.ids[x], "sections"); } } + + // Toggle class on selected item var selectedId = focus.join('-'); selectedId = selectedId === 'undefined' ? "0" : selectedId; if (document.getElementById(selectedId)) { @@ -124,7 +142,7 @@ Survey.Data = (function(){ sButton && sButton.destroy(); sButton = new YAHOO.widget.Button({ label: "Add Section", - id: "addsection", + id: "addSection", container: "addSection" }); sButton.on("click", this.addSection); @@ -132,7 +150,7 @@ Survey.Data = (function(){ qButton && qButton.destroy(); qButton = new YAHOO.widget.Button({ label: "Add Question", - id: "addquestion", + id: "addQuestion", container: "addQuestion" }); qButton.on("click", this.addQuestion, d.buttons.question); @@ -141,27 +159,14 @@ Survey.Data = (function(){ aButton && aButton.destroy(); aButton = new YAHOO.widget.Button({ label: "Add Answer", - id: "addanswer", + id: "addAnswer", container: "addAnswer" }); aButton.on("click", this.addAnswer, d.buttons.answer); } if (showEdit == 1) { - this.loadObjectEdit(d.edithtml, d.type); - - // build the goto auto-complete widget - if (d.gotoTargets && document.getElementById('goto')) { - var ds = new YAHOO.util.LocalDataSource(d.gotoTargets); - autoComplete = new YAHOO.widget.AutoComplete('goto', 'goto-yui-ac-container', ds); - } - } - else { - Survey.ObjectTemplate.unloadObject(); - if (autoComplete) { - autoComplete.destroy(); - autoComplete = null; - } + this.loadObjectEdit(d.edithtml, d.type, d.gotoTargets); } lastDataSet = d; }, @@ -178,9 +183,9 @@ Survey.Data = (function(){ Survey.Comm.newAnswer(id); }, - loadObjectEdit: function(edit, type){ + loadObjectEdit: function(edit, type, gotoTargets){ if (edit) { - Survey.ObjectTemplate.loadObject(edit, type); + Survey.ObjectTemplate.loadObject(edit, type, gotoTargets); } }, @@ -192,6 +197,6 @@ Survey.Data = (function(){ // Initialize survey YAHOO.util.Event.onDOMReady(function(){ - var ddTarget = new YAHOO.util.DDTarget("sections", "sections"); + //var ddTarget = new YAHOO.util.DDTarget("sections", "sections"); Survey.Comm.loadSurvey(); }); diff --git a/www/extras/wobject/Survey/editsurvey/object.js b/www/extras/wobject/Survey/editsurvey/object.js index aba0b7f99..ee4a7711b 100644 --- a/www/extras/wobject/Survey/editsurvey/object.js +++ b/www/extras/wobject/Survey/editsurvey/object.js @@ -8,8 +8,7 @@ Survey.ObjectTemplate = (function(){ // Keep references to widgets here so that we can destory any instances before // creating new ones (to avoid memory leaks) - var dialog; - var editor; + var dialog, editor, resizeGotoExpression, gotoAutoComplete; return { @@ -25,11 +24,38 @@ Survey.ObjectTemplate = (function(){ dialog.destroy(); dialog = null; } + + // remove the goto expression resizer + if (resizeGotoExpression) { + resizeGotoExpression.destroy(); + resizeGotoExpression = null; + } + + if (gotoAutoComplete) { + gotoAutoComplete.destroy(); + gotoAutoComplete = null; + } + + // Remove all hover-help + var hovers = document.getElementsByClassName('wg-hoverhelp'); + for (i = 0; i < hovers.length; i++) { + var hover = hovers[i]; + if (!hover) { + continue; + } + YAHOO.util.Event.purgeElement(hover, true); + hover.parentNode.removeChild(hover); + } + + // Finally, purge everything from the edit node + YAHOO.util.Event.purgeElement('edit', true); + }, - loadObject: function(html, type){ - // Make sure we purge any event listeners before overwrite innerHTML.. - YAHOO.util.Event.purgeElement('edit', true); + loadObject: function(html, type, gotoTargets){ + // First unload everything that already exists + this.unloadObject(); + document.getElementById('edit').innerHTML = html; var btns = [{ @@ -97,19 +123,24 @@ Survey.ObjectTemplate = (function(){ width: "600px", context: [document.body, 'tr', 'tr'], visible: false, - constraintoviewport: true, buttons: btns }); dialog.callback = Survey.Comm.callback; dialog.render(); - var resizeGotoExpression = new YAHOO.util.Resize('resize_gotoExpression_formId'); + resizeGotoExpression = new YAHOO.util.Resize('resize_gotoExpression_formId'); resizeGotoExpression.on('resize', function(ev) { YAHOO.util.Dom.setStyle('gotoExpression_formId', 'width', (ev.width - 6) + "px"); YAHOO.util.Dom.setStyle('gotoExpression_formId', 'height', (ev.height - 6) + "px"); }); + // build the goto auto-complete widget + if (gotoTargets && document.getElementById('goto')) { + var ds = new YAHOO.util.LocalDataSource(gotoTargets); + gotoAutoComplete = new YAHOO.widget.AutoComplete('goto', 'goto-yui-ac-container', ds); + } + var textareaId = type + 'Text'; var textarea = YAHOO.util.Dom.get(textareaId); diff --git a/www/extras/wobject/Survey/surveyedit.css b/www/extras/wobject/Survey/surveyedit.css index c4732d957..e4e415aab 100644 --- a/www/extras/wobject/Survey/surveyedit.css +++ b/www/extras/wobject/Survey/surveyedit.css @@ -49,11 +49,6 @@ div.trashcan { width: 175px; height: 50px; } -div.workarea { - padding:10px; - padding-top:40px; - float:left -} div.editarea { margin-top:40px; @@ -79,18 +74,13 @@ div.entry { } ul.draglist { - position: relative; - width: 340px; - background: #f7f7f7; - border: 1px solid gray; list-style: none; margin:0; padding:0; - padding-bottom:20px; } ul.draglist li { - margin: 5px; + margin: 1px; } ul.questionList { @@ -109,12 +99,6 @@ li.section { cursor: move; min-height: 10px; } -li.ssection { - - border:1px solid #7EA6B2; - cursor: move; - min-height: 10px; -} li.question { background-color: #D1E6EC; border:1px solid #7EA6B2; @@ -129,8 +113,11 @@ li.answer { padding-left:15px; min-height: 10px; } -#sections li.selected { - background: #68FFBC url(/extras/versionDotOn.gif) no-repeat scroll 99% center; +#sections-panel li.selected { + background-image: url(/extras/toolbar/bullet/moveRight.gif); + background-position:99% center; + background-repeat: no-repeat; + font-weight:bold; } #goto-yui-ac { @@ -147,9 +134,17 @@ li.answer { #warnings { color: red; } -#sections_c .yui-resize .yui-resize-handle-r { - right: -6px; +#sections-panel .bd { + overflow: auto; + background-color:#fff; + padding:10px; } -#sections_c .yui-resize .yui-resize-handle-b { - bottom: -6px; +#buttons { + height: 30px; +} +#sections-panel_c .yui-resize .yui-resize-handle-r { + right: -6px; /* make room for the scroll-bars */ +} +#sections-panel div.ft { + font-size: 100%; } \ No newline at end of file