oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactored Edit Survey page to improve UI, fixed some minor bugs,

Browse source 
cleaned up template and css, reduced memory usage
This commit is contained in:
Patrick Donelan 2009-04-17 09:39:52 +00:00
parent 7209895dbf
commit eec6ac3e47
5 changed files with 91 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
docs/upgrades/packages-7.7.4/root_import_survey_default-survey-edit.wgpkg
View file

Binary file not shown.

2
lib/WebGUI/Asset/Wobject/Survey.pm
View file

@ -823,7 +823,7 @@ sub www_loadSurvey {
$lastType = 'answer'; $lastType = 'answer';
} }
} }
$html = "<ul class='draglist'>$html</ul>";
my $warnings = $self->surveyJSON->validateSurvey(); my $warnings = $self->surveyJSON->validateSurvey();
my $return = { my $return = {

63
www/extras/wobject/Survey/editsurvey.js
View file

@ -11,7 +11,6 @@ Survey.Data = (function(){
// Keep references to widgets here so that we can destory any instances before // Keep references to widgets here so that we can destory any instances before
// creating new ones (to avoid memory leaks) // creating new ones (to avoid memory leaks)
var autoComplete;
var sButton, qButton, aButton; var sButton, qButton, aButton;
return { return {
@ -77,21 +76,36 @@ 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-panel', true);
if (!Survey.Data.ddContainer) { 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", width: "400px",
height: "600px", height: panelHeight + 'px',
draggable: true,
visible: true, visible: true,
bodyStyle: { 'margin-right' : '5px' } y: warningsBottom,
draggable: true
}); });
Survey.Data.ddContainer.setHeader("Survey Objects..."); Survey.Data.ddContainer.setHeader("Survey Objects...");
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); Survey.Data.ddContainer.render();
} }
else { else {
Survey.Data.ddContainer.setBody(d.ddhtml); Survey.Data.ddContainer.setBody(d.ddhtml);
@ -100,8 +114,10 @@ Survey.Data = (function(){
// (re)Add resize handler // (re)Add resize handler
Survey.Data.ddContainerResize && Survey.Data.ddContainerResize.destroy(); Survey.Data.ddContainerResize && Survey.Data.ddContainerResize.destroy();
Survey.Data.ddContainerResize = new YAHOO.util.Resize('sections', { Survey.Data.ddContainerResize = new YAHOO.util.Resize('sections-panel', {
proxy: true proxy: true,
minWidth: 300,
minHeight: 100
}); });
Survey.Data.ddContainerResize.on('resize', function(args){ Survey.Data.ddContainerResize.on('resize', function(args){
Survey.Data.ddContainer.cfg.setProperty("height", args.height + "px"); 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"); var _s = new Survey.DDList(d.ids[x], "sections");
} }
} }
// Toggle class on selected item
var selectedId = focus.join('-'); var selectedId = focus.join('-');
selectedId = selectedId === 'undefined' ? "0" : selectedId; selectedId = selectedId === 'undefined' ? "0" : selectedId;
if (document.getElementById(selectedId)) { if (document.getElementById(selectedId)) {
@ -124,7 +142,7 @@ Survey.Data = (function(){
sButton && sButton.destroy(); sButton && sButton.destroy();
sButton = new YAHOO.widget.Button({ sButton = new YAHOO.widget.Button({
label: "Add Section", label: "Add Section",
id: "addsection", id: "addSection",
container: "addSection" container: "addSection"
}); });
sButton.on("click", this.addSection); sButton.on("click", this.addSection);
@ -132,7 +150,7 @@ Survey.Data = (function(){
qButton && qButton.destroy(); qButton && qButton.destroy();
qButton = new YAHOO.widget.Button({ qButton = new YAHOO.widget.Button({
label: "Add Question", label: "Add Question",
id: "addquestion", id: "addQuestion",
container: "addQuestion" container: "addQuestion"
}); });
qButton.on("click", this.addQuestion, d.buttons.question); qButton.on("click", this.addQuestion, d.buttons.question);
@ -141,27 +159,14 @@ Survey.Data = (function(){
aButton && aButton.destroy(); aButton && aButton.destroy();
aButton = new YAHOO.widget.Button({ aButton = new YAHOO.widget.Button({
label: "Add Answer", label: "Add Answer",
id: "addanswer", id: "addAnswer",
container: "addAnswer" container: "addAnswer"
}); });
aButton.on("click", this.addAnswer, d.buttons.answer); aButton.on("click", this.addAnswer, d.buttons.answer);
} }
if (showEdit == 1) { if (showEdit == 1) {
this.loadObjectEdit(d.edithtml, d.type); this.loadObjectEdit(d.edithtml, d.type, d.gotoTargets);
// 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;
}
} }
lastDataSet = d; lastDataSet = d;
}, },
@ -178,9 +183,9 @@ Survey.Data = (function(){
Survey.Comm.newAnswer(id); Survey.Comm.newAnswer(id);
}, },
loadObjectEdit: function(edit, type){ loadObjectEdit: function(edit, type, gotoTargets){
if (edit) { if (edit) {
Survey.ObjectTemplate.loadObject(edit, type); Survey.ObjectTemplate.loadObject(edit, type, gotoTargets);
} }
}, },
@ -192,6 +197,6 @@ Survey.Data = (function(){
// Initialize survey // Initialize survey
YAHOO.util.Event.onDOMReady(function(){ YAHOO.util.Event.onDOMReady(function(){
var ddTarget = new YAHOO.util.DDTarget("sections", "sections"); //var ddTarget = new YAHOO.util.DDTarget("sections", "sections");
Survey.Comm.loadSurvey(); Survey.Comm.loadSurvey();
}); });

45
www/extras/wobject/Survey/editsurvey/object.js
View file

@ -8,8 +8,7 @@ Survey.ObjectTemplate = (function(){
// Keep references to widgets here so that we can destory any instances before // Keep references to widgets here so that we can destory any instances before
// creating new ones (to avoid memory leaks) // creating new ones (to avoid memory leaks)
var dialog; var dialog, editor, resizeGotoExpression, gotoAutoComplete;
var editor;
return { return {
@ -25,11 +24,38 @@ Survey.ObjectTemplate = (function(){
dialog.destroy(); dialog.destroy();
dialog = null; 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){ loadObject: function(html, type, gotoTargets){
// Make sure we purge any event listeners before overwrite innerHTML.. // First unload everything that already exists
YAHOO.util.Event.purgeElement('edit', true); this.unloadObject();
document.getElementById('edit').innerHTML = html; document.getElementById('edit').innerHTML = html;
var btns = [{ var btns = [{
@ -97,19 +123,24 @@ Survey.ObjectTemplate = (function(){
width: "600px", width: "600px",
context: [document.body, 'tr', 'tr'], context: [document.body, 'tr', 'tr'],
visible: false, visible: false,
constraintoviewport: true,
buttons: btns buttons: btns
}); });
dialog.callback = Survey.Comm.callback; dialog.callback = Survey.Comm.callback;
dialog.render(); dialog.render();
var resizeGotoExpression = new YAHOO.util.Resize('resize_gotoExpression_formId'); resizeGotoExpression = new YAHOO.util.Resize('resize_gotoExpression_formId');
resizeGotoExpression.on('resize', function(ev) { resizeGotoExpression.on('resize', function(ev) {
YAHOO.util.Dom.setStyle('gotoExpression_formId', 'width', (ev.width - 6) + "px"); YAHOO.util.Dom.setStyle('gotoExpression_formId', 'width', (ev.width - 6) + "px");
YAHOO.util.Dom.setStyle('gotoExpression_formId', 'height', (ev.height - 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 textareaId = type + 'Text';
var textarea = YAHOO.util.Dom.get(textareaId); var textarea = YAHOO.util.Dom.get(textareaId);

41
www/extras/wobject/Survey/surveyedit.css
View file

@ -49,11 +49,6 @@ div.trashcan {
width: 175px; width: 175px;
height: 50px; height: 50px;
} }
div.workarea {
padding:10px;
padding-top:40px;
float:left
}
div.editarea { div.editarea {
margin-top:40px; margin-top:40px;
@ -79,18 +74,13 @@ div.entry {
} }
ul.draglist { ul.draglist {
position: relative;
width: 340px;
background: #f7f7f7;
border: 1px solid gray;
list-style: none; list-style: none;
margin:0; margin:0;
padding:0; padding:0;
padding-bottom:20px;
} }
ul.draglist li { ul.draglist li {
margin: 5px; margin: 1px;
} }
ul.questionList { ul.questionList {
@ -109,12 +99,6 @@ li.section {
cursor: move; cursor: move;
min-height: 10px; min-height: 10px;
} }
li.ssection {
border:1px solid #7EA6B2;
cursor: move;
min-height: 10px;
}
li.question { li.question {
background-color: #D1E6EC; background-color: #D1E6EC;
border:1px solid #7EA6B2; border:1px solid #7EA6B2;
@ -129,8 +113,11 @@ li.answer {
padding-left:15px; padding-left:15px;
min-height: 10px; min-height: 10px;
} }
#sections li.selected { #sections-panel li.selected {
background: #68FFBC url(/extras/versionDotOn.gif) no-repeat scroll 99% center; background-image: url(/extras/toolbar/bullet/moveRight.gif);
background-position:99% center;
background-repeat: no-repeat;
font-weight:bold;
} }
#goto-yui-ac { #goto-yui-ac {
@ -147,9 +134,17 @@ li.answer {
#warnings { #warnings {
color: red; color: red;
} }
#sections_c .yui-resize .yui-resize-handle-r { #sections-panel .bd {
right: -6px; overflow: auto;
background-color:#fff;
padding:10px;
} }
#sections_c .yui-resize .yui-resize-handle-b { #buttons {
bottom: -6px; 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%;
} }