Refactored Edit Survey page to improve UI, fixed some minor bugs,
cleaned up template and css, reduced memory usage
This commit is contained in:
Patrick Donelan
parent
7209895dbf
commit
eec6ac3e47
5 changed files with 91 additions and 60 deletions
Binary file not shown.
|
|
@ -823,7 +823,7 @@ sub www_loadSurvey {
|
|||
$lastType = 'answer';
|
||||
}
|
||||
}
|
||||
|
||||
$html = "<ul class='draglist'>$html</ul>";
|
||||
my $warnings = $self->surveyJSON->validateSurvey();
|
||||
|
||||
my $return = {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue