Improved Edit Survey section list.

Removed unnecessary <br>'s from Section list
Made sections panel resizable
Made current selection highlighted via CSS
This commit is contained in:
Patrick Donelan 2009-04-16 05:18:45 +00:00
parent c08b0755dd
commit feb17b8acf
3 changed files with 54 additions and 68 deletions

View file

@ -800,7 +800,7 @@ sub www_loadSurvey {
elsif ( $lastType eq 'question' ) { elsif ( $lastType eq 'question' ) {
$q = 1; $q = 1;
} }
$html .= "<li id='$scount' class='section'>S" . ( $scount + 1 ) . ": $_->{text}<\/li><br>\n"; $html .= "<li id='$scount' class='section'>S" . ( $scount + 1 ) . ": $_->{text}<\/li>\n";
push( @ids, $scount ); push( @ids, $scount );
} }
elsif ( $_->{type} eq 'question' ) { elsif ( $_->{type} eq 'question' ) {
@ -808,7 +808,7 @@ sub www_loadSurvey {
if ( $lastType eq 'answer' ) { if ( $lastType eq 'answer' ) {
$a = 1; $a = 1;
} }
$html .= "<li id='$scount-$qcount' class='question'>Q" . ( $qcount + 1 ) . ": $_->{text}<\/li><br>\n"; $html .= "<li id='$scount-$qcount' class='question'>Q" . ( $qcount + 1 ) . ": $_->{text}<\/li>\n";
push @ids, "$scount-$qcount"; push @ids, "$scount-$qcount";
$lastType = 'question'; $lastType = 'question';
$acount = -1; $acount = -1;
@ -818,7 +818,7 @@ sub www_loadSurvey {
$html $html
.= "<li id='$scount-$qcount-$acount' class='answer'>A" .= "<li id='$scount-$qcount-$acount' class='answer'>A"
. ( $acount + 1 ) . ( $acount + 1 )
. ": $_->{text}<\/li><br>\n"; . ": $_->{text}<\/li>\n";
push @ids, "$scount-$qcount-$acount"; push @ids, "$scount-$qcount-$acount";
$lastType = 'answer'; $lastType = 'answer';
} }

View file

@ -77,26 +77,35 @@ Survey.Data = (function(){
} }
// First purge any event handlers bound to sections node.. // First purge any event handlers bound to sections node..
YAHOO.util.Event.purgeElement('sections', true); YAHOO.util.Event.purgeElement('sections', true);
// Now we can re-write its innerHTML without fear of memory leaks if (!Survey.Data.ddContainer) {
// document.getElementById('sections').innerHTML = d.ddhtml; Survey.Data.ddContainer = new YAHOO.widget.Panel("sections", {
width: "400px",
height: "600px",
draggable: true,
visible: true,
bodyStyle: { 'margin-right' : '5px' }
});
if(! Survey.Data.ddContainer){ Survey.Data.ddContainer.setHeader("Survey Objects...");
Survey.Data.ddContainer = Survey.Data.ddContainer.setBody(d.ddhtml);
new YAHOO.widget.Panel("sections", Survey.Data.ddContainer.setFooter(document.getElementById("buttons"));
{ width:"440px", Survey.Data.ddContainer.render();//document.body);
height: "420px",
draggable:true,
visible:true
}
);
} }
Survey.Data.ddContainer.setHeader("Survey Objects..."); else {
Survey.Data.ddContainer.setBody(d.ddhtml); Survey.Data.ddContainer.setBody(d.ddhtml);
Survey.Data.ddContainer.setFooter(document.getElementById("buttons")); Survey.Data.ddContainer.setFooter(document.getElementById("buttons"));
Survey.Data.ddContainer.render();//document.body); }
// (re)Add resize handler
Survey.Data.ddContainerResize && Survey.Data.ddContainerResize.destroy();
Survey.Data.ddContainerResize = new YAHOO.util.Resize('sections', {
proxy: true
});
Survey.Data.ddContainerResize.on('resize', function(args){
Survey.Data.ddContainer.cfg.setProperty("height", args.height + "px");
});
//add event handlers for if a tag is clicked //add event handlers for if a tag is clicked
for (var x in d.ids) { for (var x in d.ids) {
@ -106,6 +115,11 @@ Survey.Data = (function(){
var _s = new Survey.DDList(d.ids[x], "sections"); var _s = new Survey.DDList(d.ids[x], "sections");
} }
} }
var selectedId = focus.join('-');
selectedId = selectedId === 'undefined' ? "0" : selectedId;
if (document.getElementById(selectedId)) {
YAHOO.util.Dom.addClass(selectedId, 'selected');
}
sButton && sButton.destroy(); sButton && sButton.destroy();
sButton = new YAHOO.widget.Button({ sButton = new YAHOO.widget.Button({

View file

@ -109,64 +109,30 @@ li.section {
cursor: move; cursor: move;
min-height: 10px; min-height: 10px;
} }
li.ssection { li.ssection {
background-color: #E76300;
border:1px solid #7EA6B2; border:1px solid #7EA6B2;
cursor: move; cursor: move;
min-height: 10px; min-height: 10px;
} }
li.squestion {
background-color: #CC6600;
border:1px solid #7EA6B2;
cursor: move;
padding-left:15px;
width: 80%;
min-height: 10px;
}
li.newQuestion {
/*
background-color: #D1E6EC;
border:1px solid #7EA6B2;
cursor: move;
*/
padding-left:25px;
}
li.question { li.question {
background-color: #D1E6EC; background-color: #D1E6EC;
border:1px solid #7EA6B2; border:1px solid #7EA6B2;
cursor: move; cursor: move;
padding-left:15px; padding-left:10px;
width:80%;
min-height: 10px; min-height: 10px;
} }
li.answer {
background-color: #F1FFB8;
border:1px solid #7EA6B2;
cursor: move;
padding-left:15px;
min-height: 10px;
}
#sections li.selected {
background: #68FFBC url(/extras/versionDotOn.gif) no-repeat scroll 99% center;
}
li.answer {
background-color: #D1E6EC;
border:1px solid #7EA6B2;
cursor: move;
padding-left:50px;
width:60%;
min-height: 10px;
}
li.sanswer {
background-color: #CC6600;
border:1px solid #7EA6B2;
cursor: move;
padding-left:50px;
width:60%;
min-height: 10px;
}
li.newAnswer {
/*
background-color: #D1E6EC;
border:1px solid #7EA6B2;
cursor: move;
*/
padding-left:50px;
}
#goto-yui-ac { #goto-yui-ac {
width:15em; width:15em;
margin-top:0.5em; margin-top:0.5em;
@ -181,3 +147,9 @@ li.newAnswer {
#warnings { #warnings {
color: red; color: red;
} }
#sections_c .yui-resize .yui-resize-handle-r {
right: -6px;
}
#sections_c .yui-resize .yui-resize-handle-b {
bottom: -6px;
}