Index: lams_central/web/includes/javascript/groupDisplay.js =================================================================== diff -u -r0b3e2d202a59e6a760a54abdeca1b33f0f5986c7 -r982c9efe320a916c06079548a7118c28146195c1 --- lams_central/web/includes/javascript/groupDisplay.js (.../groupDisplay.js) (revision 0b3e2d202a59e6a760a54abdeca1b33f0f5986c7) +++ lams_central/web/includes/javascript/groupDisplay.js (.../groupDisplay.js) (revision 982c9efe320a916c06079548a7118c28146195c1) @@ -151,36 +151,60 @@ function showMonitorLessonDialog(lessonID) { - var dialog = $('#dialogContainer').dialog({ + var dialogName = "dialogMonitorLesson" + lessonID, + dialog = $('#' + dialogName); + if (dialog.length > 0) { + // is it open already? + dialog.dialog('moveToTop'); + return; + } + + // create a new dialog by cloning a template + dialog = $('#dialogContainer').clone(); + dialog.attr('id', dialogName); + $('iframe', dialog).attr('id', null); + + dialog.dialog({ 'lessonID' : lessonID, 'autoOpen' : false, 'height' : 600, 'width' : 1024, - 'modal' : true, - 'resizable' : false, + 'modal' : false, + 'draggable' : false, + 'resizable' : true, 'hide' : 'fold', 'open' : function() { // load contents after opening the dialog - $('#dialogFrame').attr('src', LAMS_URL + $('iframe', this).attr('src', LAMS_URL + 'home.do?method=monitorLesson&lessonID=' + $(this).dialog('option', 'lessonID')); }, 'beforeClose' : function(){ - $('#dialogFrame').attr('src', null); + $('iframe', this).attr('src', null); }, 'close' : function() { - // refresh if lesson was added - if ($(this).dialog('option', 'refresh')) { - loadOrgTab(null, true); - } - $(this).dialog('destroy'); + // completely delete the dialog + $(this).remove(); } }); + // tell the dialog contents that it was resized + dialog.closest('.ui-dialog').on('resizestop', function(event, ui){ + var frame = $('iframe', dialog)[0], + win = frame.contentWindow || frame.contentDocument; + win.resizeSequenceCanvas(ui.size.width, ui.size.height); + }); // tabs are the title bar, so remove dialog's one dialog.closest('.ui-dialog').children('.ui-dialog-titlebar').remove(); dialog.dialog('open'); } + +function moveDialogToTop(dialogName) { + // called from withing dialog's iframe + $('#' + dialogName).dialog('moveToTop'); +} + + function showAddLessonDialog(orgID) { var dialog = $('#dialogContainer').dialog({ 'orgID' : orgID, @@ -483,10 +507,10 @@ dialog.dialog('option', 'refresh', save).dialog('close'); } -function closeMonitorLessonDialog(refresh) { - // was the dialog just closed or a new lesson really added? +function closeMonitorLessonDialog(dialogName, refresh) { + // was the dialog just closed or // if latter, refresh the list - $("#dialogContainer").dialog('option', 'refresh', refresh ? true : false) + $("#" + dialogName).dialog('option', 'refresh', refresh ? true : false) .dialog('close'); } Index: lams_monitoring/web/css/monitorLesson.css =================================================================== diff -u -r5b6e51b5d96619f619209830fdab0ed1ef572c05 -r982c9efe320a916c06079548a7118c28146195c1 --- lams_monitoring/web/css/monitorLesson.css (.../monitorLesson.css) (revision 5b6e51b5d96619f619209830fdab0ed1ef572c05) +++ lams_monitoring/web/css/monitorLesson.css (.../monitorLesson.css) (revision 982c9efe320a916c06079548a7118c28146195c1) @@ -1,7 +1,6 @@ /********** GENERAL/DIALOG STYLES **********/ div#tabs { width: 99%; - height: 574px; overflow: hidden; border: none; } @@ -88,7 +87,7 @@ /********** LESSON TAB STYLES **********/ div#tabLesson { - height: 540px; +/* height: 540px;*/ overflow: auto; } @@ -179,7 +178,6 @@ /********** SEQUENCE TAB STYLES **********/ div#sequenceCanvas { text-align: center; - height: 478px; width: 1024px; overflow: auto; } @@ -243,7 +241,6 @@ } div#tabLearnersContainer { - height: 500px; overflow: auto; } Index: lams_monitoring/web/includes/javascript/monitorLesson.js =================================================================== diff -u -r4acdfa05e644fe0c598a82d6c6b7232190adae75 -r982c9efe320a916c06079548a7118c28146195c1 --- lams_monitoring/web/includes/javascript/monitorLesson.js (.../monitorLesson.js) (revision 4acdfa05e644fe0c598a82d6c6b7232190adae75) +++ lams_monitoring/web/includes/javascript/monitorLesson.js (.../monitorLesson.js) (revision 982c9efe320a916c06079548a7118c28146195c1) @@ -55,6 +55,45 @@ sequenceInfoDialog.dialog('close'); } } + }).draggable({ + // scroll plugin has to be disabled here as it throws errors + // when dragging helper appended to parent document + 'scroll' : false, + 'handle' : $('#tabs>ul'), + 'helper' : function(){ + // since this code is inside an iframe, the helper is + // a transparent div with black borders attached to parent document + var dialogName = "dialogMonitorLesson" + lessonId, + dialog = $('#' + dialogName, window.parent.document).closest('.ui-dialog'), + helper = dialog.clone().empty(); + helper.css({ + 'border': 'thin black solid', + 'width' : dialog.width(), + 'height' : dialog.height(), + 'background' : 'transparent' + }); + return helper; + }, + 'appendTo' : window.parent.document.body, + 'drag' : function(event, ui) { + // adjust position to be relative to parent document, not iframe contents + var dialogName = "dialogMonitorLesson" + lessonId, + dialog = $('#' + dialogName, window.parent.document).closest('.ui-dialog'); + ui.position.top += dialog.position().top; + ui.position.left += dialog.position().left; + }, + 'stop' : function(event, ui) { + var dialogName = "dialogMonitorLesson" + lessonId, + dialog = $('#' + dialogName, window.parent.document).closest('.ui-dialog'); + dialog.offset({ + 'top' : ui.offset.top, + 'left' : ui.offset.left + }); + } + }).mousedown(function(){ + // bring clicked Monitor window to front + var dialogName = "dialogMonitorLesson" + lessonId; + window.parent.moveDialogToTop(dialogName); }); } @@ -313,7 +352,7 @@ success : function() { if (state == 7) { // user chose to finish the lesson, close monitoring and refresh the lesson list - window.parent.closeMonitorLessonDialog(true); + closeMonitorLessonDialog(true); } else { refreshMonitor('lesson'); } @@ -746,18 +785,7 @@ // if it was faded out by showBranchingSequence() .fadeIn(); - var canvasHeight = sequenceCanvas.height(), - canvasWidth = Math.min('1010', sequenceCanvas.width()), - svg = $('svg', sequenceCanvas), - canvasPaddingTop = Math.max(0, canvasHeight/2 - svg.attr('height')/2), - canvasPaddingLeft = Math.max(0, canvasWidth/2 - svg.attr('width')/2); - - sequenceCanvas.css({ - 'padding-top' : canvasPaddingTop, - 'padding-left' : canvasPaddingLeft, - 'width' : canvasWidth - canvasPaddingLeft, - 'height' : canvasHeight - canvasPaddingTop - }); + resizeSequenceCanvas(); } }); } @@ -1398,7 +1426,7 @@ } else { openPopUp(LAMS_URL + 'home.do?method=author&layout=editonfly&learningDesignID=' + ldId, 'LiveEdit', 600, 800, false); - window.parent.closeMonitorLessonDialog(); + closeMonitorLessonDialog(); } } }); @@ -1428,6 +1456,33 @@ $('#closeBranchingButton').hide(); } +/** + * Adjusts sequence canvas (SVG) based on space available in the dialog. + */ +function resizeSequenceCanvas(width, height){ + // Initial resize sends no parameters. + // When resizing the dialog, parameters are sent. + // Taking body's dimensions when resizing yields erroneous results. + width = width || $('body').width(); + height = height || $('body').height(); + var sequenceCanvas = $('#sequenceCanvas'), + // can it be done nicer? + canvasHeight = height - $('#tabs>ul').height() - $('#sequenceTopButtonsContainer').height() + - Math.min(20, $('#completedLearnersContainer').height()) - 45, + canvasWidth = width - 15, + svg = $('svg', sequenceCanvas), + // center a small SVG inside large DIV + canvasPaddingTop = Math.max(0, canvasHeight/2 - svg.attr('height')/2), + canvasPaddingLeft = Math.max(0, canvasWidth/2 - svg.attr('width')/2); + + sequenceCanvas.css({ + 'padding-top' : canvasPaddingTop, + 'padding-left' : canvasPaddingLeft, + 'width' : canvasWidth - canvasPaddingLeft, + 'height' : canvasHeight - canvasPaddingTop + }); +} + //********** LEARNERS TAB FUNCTIONS ********** /** @@ -1692,6 +1747,14 @@ /** + * Tells parent document to close this Monitor dialog. + */ +function closeMonitorLessonDialog(refresh) { + var dialogName = "dialogMonitorLesson" + lessonId; + window.parent.closeMonitorLessonDialog(dialogName, refresh); +} + +/** * Show a dialog with user list and optional Force Complete and View Learner buttons. */ function showLearnerGroupDialog(activityId, dialogTitle, learners, allowForceComplete, allowView, allowEmail) { Index: lams_monitoring/web/monitor.jsp =================================================================== diff -u -r9f4a11b9b353f720012a957d066663945f0ac70b -r982c9efe320a916c06079548a7118c28146195c1 --- lams_monitoring/web/monitor.jsp (.../monitor.jsp) (revision 9f4a11b9b353f720012a957d066663945f0ac70b) +++ lams_monitoring/web/monitor.jsp (.../monitor.jsp) (revision 982c9efe320a916c06079548a7118c28146195c1) @@ -173,7 +173,7 @@
- +