Index: lams_central/web/includes/javascript/authoring/authoringActivity.js =================================================================== diff -u -r90d5d886ec84b60e0d5ee543c8caeccc7fd183e6 -r0cbfe8e52b48e47d7bd3bb317fda683596cce2ec --- lams_central/web/includes/javascript/authoring/authoringActivity.js (.../authoringActivity.js) (revision 90d5d886ec84b60e0d5ee543c8caeccc7fd183e6) +++ lams_central/web/includes/javascript/authoring/authoringActivity.js (.../authoringActivity.js) (revision 0cbfe8e52b48e47d7bd3bb317fda683596cce2ec) @@ -364,7 +364,13 @@ } if (this.isStart) { // uiid is needed in Monitoring - this.items.attr('uiid', this.branchingActivity.uiid); + this.items.attr({ + 'uiid' : this.branchingActivity.uiid, + 'data-x' : x, + 'data-y' : y, + 'data-width' : 30, + 'data-height': 30 + }); } this.items.shape = shape; @@ -455,7 +461,13 @@ this.items.attr('filter', layout.conf.readOnlyFilter); } // uiid is needed in Monitoring - this.items.attr('uiid', this.uiid); + this.items.attr({ + 'uiid' : this.uiid, + 'data-x' : x, + 'data-y' : y, + 'data-width' : 40, + 'data-height': 40 + }); this.items.shape = shape; ActivityLib.activityHandlersInit(this); @@ -539,6 +551,9 @@ this.childActivities = childActivities; } + var width = null, + height = null; + if (this.childActivities && this.childActivities.length > 0) { // draw one by one, vertically var activityY = y + layout.conf.containerActivityPadding + 10, @@ -559,14 +574,16 @@ // area containing all drawn child activities box = allElements.getBBox(); - this.drawContainer(x, y, - box.x2 + layout.conf.containerActivityPadding, - box.y2 + layout.conf.containerActivityPadding, + width = box.x2 + layout.conf.containerActivityPadding - x; + height = box.y2 + layout.conf.containerActivityPadding - y; + + this.drawContainer(x, y, x + width, y + height, layout.colors.optionalActivity, layout.colors.optionalActivityBorder, 0.5); } else { - this.drawContainer(x, y, - x + layout.conf.containerActivityEmptyWidth, - y + layout.conf.containerActivityEmptyHeight, + width = layout.conf.containerActivityEmptyWidth; + height = layout.conf.containerActivityEmptyHeight; + + this.drawContainer(x, y, x + width, y + height, layout.colors.optionalActivity, layout.colors.optionalActivityBorder, 0.5); } @@ -577,6 +594,13 @@ this.items.data('parentObject', this); this.items.addClass('svg-activity-optional'); + this.items.attr({ + 'uiid' : this.uiid, + 'data-x' : x, + 'data-y' : y, + 'data-width' : width, + 'data-height': height + }); }, @@ -594,7 +618,10 @@ x = GeneralLib.snapToGrid(x); y = GeneralLib.snapToGrid(y); - + + var width = null, + height = null; + if (this.childActivities && this.childActivities.length > 0) { // draw one by one, vertically var activityY = y + layout.conf.containerActivityPadding + 10, @@ -610,14 +637,16 @@ // area containing all drawn child activities var box = allElements.getBBox(); - this.drawContainer(x, y, - box.x2 + layout.conf.containerActivityPadding, - box.y2 + layout.conf.containerActivityPadding, + width = box.x2 + layout.conf.containerActivityPadding - x; + height = box.y2 + layout.conf.containerActivityPadding - y; + + this.drawContainer(x, y, x + width, y + height, layout.colors.optionalActivity, layout.colors.optionalActivityBorder, 0.5); } else { - this.drawContainer(x, y, - x + layout.conf.containerActivityEmptyWidth, - y + layout.conf.containerActivityEmptyHeight, + width = layout.conf.containerActivityEmptyWidth; + height = layout.conf.containerActivityEmptyHeight; + + this.drawContainer(x, y, x + width, y + height, layout.colors.optionalActivity, layout.colors.optionalActivityBorder, 0.5); } @@ -632,6 +661,13 @@ this.items.data('parentObject', this); this.items.addClass('svg-activity-parallel'); + this.items.attr({ + 'uiid' : this.uiid, + 'data-x' : x, + 'data-y' : y, + 'data-width' : width, + 'data-height': height + }); }, Index: lams_monitoring/web/css/_monitorLesson_base.scss =================================================================== diff -u -r4032b1b03d4bf650f44d7c49a5745e3524a876d7 -r0cbfe8e52b48e47d7bd3bb317fda683596cce2ec --- lams_monitoring/web/css/_monitorLesson_base.scss (.../_monitorLesson_base.scss) (revision 4032b1b03d4bf650f44d7c49a5745e3524a876d7) +++ lams_monitoring/web/css/_monitorLesson_base.scss (.../_monitorLesson_base.scss) (revision 0cbfe8e52b48e47d7bd3bb317fda683596cce2ec) @@ -305,6 +305,7 @@ /********** SEQUENCE TAB STYLES **********/ div#sequenceCanvas { + position: relative; text-align: center; width: 100%; height: 100%; Index: lams_monitoring/web/includes/javascript/monitorLesson.js =================================================================== diff -u -r90d5d886ec84b60e0d5ee543c8caeccc7fd183e6 -r0cbfe8e52b48e47d7bd3bb317fda683596cce2ec --- lams_monitoring/web/includes/javascript/monitorLesson.js (.../monitorLesson.js) (revision 90d5d886ec84b60e0d5ee543c8caeccc7fd183e6) +++ lams_monitoring/web/includes/javascript/monitorLesson.js (.../monitorLesson.js) (revision 0cbfe8e52b48e47d7bd3bb317fda683596cce2ec) @@ -1195,6 +1195,9 @@ $.each(response.activities, function(index, activity){ var activityGroup = $('g[id="' + activity.id + '"]', sequenceCanvas), isGate = [3,4,5,14].indexOf(activity.type) > -1; + + learnerCount += activity.learnerCount; + if (isGate) { var gateClosedIcon = activityGroup.find('.gateClosed'); @@ -1238,6 +1241,9 @@ addActivityIcons(activity); }); + // modyfing SVG in DOM does not render changes, so we need to reload it + sequenceCanvas.html(sequenceCanvas.html()); + if (sequenceSearchedLearner != null && !response.searchedLearnerFound) { // the learner has not started the lesson yet, display an info box sequenceClearSearchPhrase(); @@ -1539,14 +1545,26 @@ isGrouping = activity.type == 2, // branching and gates require extra adjustments isBranching = [10,11,12,13].indexOf(activity.type) > -1, - isGate = [3,4,5,14].indexOf(activity.type) > -1; - - if (activity.learnerCount > 0){ + isGate = [3,4,5,14].indexOf(activity.type) > -1, + isContainer = [6,7].indexOf(activity.type) > -1; + + if (activity.learnerCount > 0){ + if (activity.learners) { + activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners] + activity.learnerCount = activity.learners.length; + } + + var learningDesignSvgViewbox = learningDesignSvg.attr('viewBox').split(' '), + learningDesignSvgInternalLeftOffset = +learningDesignSvgViewbox[0], + learningDesignSvgInternalTopOffset = +learningDesignSvgViewbox[1], + learningDesignSvgExternalOffset = learningDesignSvg.offset(), + activityLeftOffset = learningDesignSvgExternalOffset.left + coord.x - learningDesignSvgInternalLeftOffset + sequenceCanvas.scrollLeft(), + activityTopOffset = learningDesignSvgExternalOffset.top + coord.y - learningDesignSvgInternalTopOffset + sequenceCanvas.scrollTop(); + if (isTool || isGrouping) { // if learners reached the activity, make room for their icons: make activity icon and label smaller and move to top var activityGroup = $('g[id="' + activity.id + '"]', learningDesignSvg); - // $('svg', activityGroup).attr({ 'x' : coord.x + 20, 'y' : coord.y + 3, @@ -1567,22 +1585,15 @@ }) .addClass('activityTitleLabel') .appendTo(activityGroup); - - var learningDesignSvgViewbox = learningDesignSvg.attr('viewBox').split(' '), - learningDesignSvgInternalLeftOffset = +learningDesignSvgViewbox[0], - learningDesignSvgInternalTopOffset = +learningDesignSvgViewbox[1], - learningDesignSvgExternalOffset = learningDesignSvg.offset(), - activityLeftOffset = learningDesignSvgExternalOffset.left + coord.x - learningDesignSvgInternalLeftOffset, - activityTopOffset = learningDesignSvgExternalOffset.top + coord.y - learningDesignSvgInternalTopOffset; - activity.learners = [...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners,...activity.learners] + $.each(activity.learners, function(learnerIndex, learner){ - if (learnerIndex >= 7 && activity.learners.length > 8) { + if (learnerIndex >= 7 && activity.learnerCount > 8) { return false; } $(definePortrait(learner.portraitId, learner.id, STYLE_SMALL, true, LAMS_URL)) .css({ - 'left' : activityLeftOffset + (learnerIndex * (activity.learners.length < 5 ? 45 : 20)) + 20 + 'px', - 'top' : activityTopOffset + 40 + 'px', + 'left' : activityLeftOffset + (learnerIndex * (activity.learnerCount < 5 ? 45 : 20)) - 2 + 'px', + 'top' : activityTopOffset - 60 + 'px', 'z-index' : 100 + learnerIndex }) .addClass('popover-link new-popover learner-icon') @@ -1595,18 +1606,46 @@ .appendTo(sequenceCanvas); }); - if (activity.learners.length > 8) { + if (activity.learnerCount > 8) { $('
') .css({ - 'left' : activityLeftOffset + 160 + 'px', - 'top' : activityTopOffset + 40 + 'px' + 'left' : activityLeftOffset + 138 + 'px', + 'top' : activityTopOffset - 60 + 'px' }) .addClass('more-learner-icon') - .text('+' + (activity.learners.length - 7)) + .text('+' + (activity.learnerCount - 7)) .appendTo(sequenceCanvas); } + + } else if (isGate) { + $('
') + .css({ + 'left' : activityLeftOffset + 'px', + 'top' : activityTopOffset - 80 + 'px' + }) + .addClass('more-learner-icon') + .text(activity.learnerCount) + .appendTo(sequenceCanvas); + } else if (isBranching) { + $('
') + .css({ + 'left' : activityLeftOffset - 20 + 'px', + 'top' : activityTopOffset - 100 + 'px' + }) + .addClass('more-learner-icon') + .text(activity.learnerCount) + .appendTo(sequenceCanvas); + } else if (isContainer) { + $('
') + .css({ + 'left' : activityLeftOffset + coord.width - 50 + 'px', + 'top' : activityTopOffset - 98 + 'px' + }) + .addClass('more-learner-icon') + .text(activity.learnerCount) + .appendTo(sequenceCanvas); } - + /* @@ -1668,6 +1707,7 @@ } if (activity.requiresAttention) { + /* var element = appendXMLElement('image', { 'id' : 'act' + activity.id + 'attention', 'x' : isBranching ? coord.x + 14 : coord.x2 - 19, @@ -1678,6 +1718,7 @@ 'style' : 'cursor : pointer' }, null, learningDesignSvg[0]); appendXMLElement('title', null, LABELS.CONTRIBUTE_ATTENTION, element); + */ } } @@ -1861,34 +1902,18 @@ activity.y = 0; } - // special processing for gates - if ([3,4,5,14].indexOf(activity.type) > -1) { - return { - 'x' : activity.x, - 'y' : activity.y - 18, - 'x2' : activity.x + 39, - 'y2' : activity.y + 40 - } - } - - // special processing for branching and optional sequences - if ([10,11,12,13].indexOf(activity.type) > -1) { - return { - 'x' : activity.x, - 'y' : activity.y - } - } - var group = $('g[id="' + activity.id + '"]', sequenceCanvas); if (group.length == 0) { return; } return { - 'x' : +group.data('x'), - 'y' : +group.data('y'), - 'x2' : +group.data('x') + +group.data('width'), - 'y2' : +group.data('y') + +group.data('height') + 'x' : +group.data('x'), + 'y' : +group.data('y'), + 'x2' : +group.data('x') + +group.data('width'), + 'y2' : +group.data('y') + +group.data('height'), + 'width' : +group.data('width'), + 'height': +group.data('height'), } } @@ -2737,26 +2762,7 @@ } } - /** - * Makes a XML element with given attributes. - * jQuery does not work well with SVG in Chrome, so all this manipulation need to be done manually. - */ -function appendXMLElement(tagName, attributesObject, content, target) { - var elementText = '<' + tagName + (content ? '>' + content + '' - : ' />'); - var element = $.parseXML(elementText).firstChild; - if (attributesObject) { - for (attrKey in attributesObject) { - element.setAttribute(attrKey, attributesObject[attrKey]); - } - } - - target.appendChild(element); - return element; -} - -/** * Works as dblclick for mobile devices. */ function dblTap(elem, dblClickFunction) {