From 1da29869aa81a1c3f327ab8ab667dff484f5ec15 Mon Sep 17 00:00:00 2001 From: Frederic Massart Date: Tue, 26 Aug 2014 15:04:29 +0800 Subject: [PATCH] MDL-46951 gradereport_grader: Handling of user cells when resizing For some reason, the max-width/min-width/width of the table cell containing the name of the users did not work, leading to very large columns but a very narrow floating one. Handling the size of those columsn upon resize was also necessary after with this fix. This issue is a part of the MDL-46658 Task. This issue is a part of the MDL-25544 Epic. --- grade/report/grader/styles.css | 1 - ...oodle-gradereport_grader-gradereporttable-debug.js | 11 +++++++++++ .../moodle-gradereport_grader-gradereporttable-min.js | 2 +- .../moodle-gradereport_grader-gradereporttable.js | 11 +++++++++++ .../yui/src/gradereporttable/js/floatingheaders.js | 11 +++++++++++ 5 files changed, 34 insertions(+), 2 deletions(-) diff --git a/grade/report/grader/styles.css b/grade/report/grader/styles.css index 99f2ae293f4..19ced6af95d 100644 --- a/grade/report/grader/styles.css +++ b/grade/report/grader/styles.css @@ -79,7 +79,6 @@ .gradeparent th.user { padding: 4px; min-width: 200px; - max-width: 200px; width: 200px; border-color: #666666; border-right-width: 1px; diff --git a/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-debug.js b/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-debug.js index 9a1f2375081..f3e3fad410c 100644 --- a/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-debug.js +++ b/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-debug.js @@ -887,6 +887,17 @@ FloatingHeaders.prototype = { // Simulate a scroll. this._handleScrollEvent(); + // Resize user cells. + var userWidth = this.firstUserCell.getComputedStyle(WIDTH); + var userCells = Y.all(SELECTORS.USERCELL); + this.userColumnHeader.setStyle('width', userWidth); + this.userColumn.all('.gradebook-user-cell').each(function(cell, idx) { + cell.setStyles({ + width: userWidth, + height: userCells.item(idx).getComputedStyle(HEIGHT) + }); + }, this); + // Resize headers & footers. // This is an expensive operation, not expected to happen often. var headers = this.gradeItemHeadingContainer.all(SELECTORS.HEADERCELL); diff --git a/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-min.js b/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-min.js index ad0faafcb9a..665a98c7550 100644 --- a/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-min.js +++ b/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable-min.js @@ -1,2 +1,2 @@ YUI.add("moodle-gradereport_grader-gradereporttable",function(e,t){function i(){i.superclass.constructor.apply(this,arguments)}function u(){}function d(){}function v(){}var n={FOOTERROW:"#user-grades .avg",GRADECELL:"td.grade",GRADERTABLE:".gradeparent table",GRADEPARENT:".gradeparent",HEADERCELL:".gradebook-header-cell",HEADERROW:"#user-grades tr.heading",STUDENTHEADER:"#studentheader",USERCELL:"#user-grades .user.cell"},r={OVERRIDDEN:"overridden",TOOLTIPACTIVE:"tooltipactive"};e.extend(i,e.Base,{_eventHandles:[],graderTable:null,initializer:function(){this.graderRegion=e.one(n.GRADEPARENT),this.graderTable=e.one(n.GRADERTABLE),this.setupFloatingHeaders(),this.setupTooltips()},getGradeUserName:function(e){var t=e.ancestor("tr"),n=t.one("th.user .username");return n?n.get("text"):""},getGradeItemName:function(t){var n=e.one("th.item[data-itemid='"+t.getData("itemid")+"']");return n?n.get("text"):""},getGradeFeedback:function(e){return e.getData("feedback")}}),e.namespace("M.gradereport_grader").ReportTable=i,e.namespace("M.gradereport_grader").init=function(t){return new e.M.gradereport_grader.ReportTable(t)};var s="vmarked",o="hmarked";u.ATTRS={};var a="th.user, th.userreport, th.userfield, .gradebook-user-cell",f="tr[data-itemid] th.item, .gradebook-header-cell";u.prototype={setupHighlighter:function(){return this._eventHandles.push(this.graderRegion.delegate("click",this._highlightUser,a,this),this.graderRegion.delegate("click",this._highlightColumn,f,this)),this},_highlightColumn:function(e){var t=e.target.getData("itemid");if(typeof t=="undefined")return;this.graderRegion.all('td.cell[data-itemid="'+t+'"]').toggleClass(s)},_highlightUser:function(e){var t=e.target.ancestor("[data-uid]",!0),n,r;t&&(r=t.getData("uid"));if(typeof r=="undefined")return;n=this.graderRegion.one('tr[data-uid="'+r+'"]'),n&&n.toggleClass(o)}},e.Base.mix(e.M.gradereport_grader.ReportTable,[u]);var l="height",c="width",h="offsetWidth",p="offsetHeight";d.ATTRS={},d.prototype={pageHeaderHeight:0,container:null,headerCell:null,headerRow:null,firstUserCell:null,tableFooterRow:null,footerRow:null,gradeItemHeadingContainer:null,userColumnHeader:null,userColumn:null,firstUserCellBottom:0,firstUserCellLeft:0,lastUserCellTop:0,_eventHandles:[],setupFloatingHeaders:function(){return this.firstUserCell=e.one(n.USERCELL),this.container=e.one(n.GRADEPARENT),this.firstUserCell?(this._setupFloatingUserColumn(),this._setupFloatingUserHeader(),this._setupFloatingAssignmentHeaders(),this._setupFloatingAssignmentFooter(),this._calculateCellPositions(),this._handleScrollEvent(),this._setupEventHandlers(),this):this},_calculateCellPositions:function(){this.headerRowTop=this.headerRow.getY(),this.tableFooterRow&&(this.footerRowPosition=this.tableFooterRow.getY());var t=e.all(n.USERCELL);this.firstUserCellLeft=this.headerRow.getX();if(t.size()>1){var r=t.item(1);this.firstUserCellBottom=r.getY()+parseInt(r.getComputedStyle(l),10),this.lastUserCellTop=t.item(t.size()-2).getY()}else{var i=t.item(0);this.lastUserCellTop=i.getY(),this.tableFooterRow?this.firstUserCellBottom=this.footerRowPosition+parseInt(this.tableFooterRow.getComputedStyle(l),10):this.firstUserCellBottom=i.getY()+i.get("offsetHeight")}var s=e.one("header");this.pageHeaderHeight=0,s&&s.getComputedStyle("position")==="fixed"&&(this.pageHeaderHeight=s.get(p))},_getRelativeXY:function(e){return this._getRelativeXYFromXY(e.getX(),e.getY())},_getRelativeXYFromXY:function(e,t){var n=this.container.getXY();return[Math.floor(e-n[0]),Math.floor(t-n[1])]},_getRelativeXFromX:function(e){return this._getRelativeXYFromXY(e,0)[0]},_getRelativeYFromY:function(e){return this._getRelativeXYFromXY(0,e)[1]},_getScrollBarHeight:function(){return e.config.doc.body.scrollWidth>e.config.doc.body.clientWidth?e.DOM.getScrollbarWidth():0},_setupEventHandlers:function(){this._eventHandles.push(e.one(e.config.win).on("scroll",this._handleScrollEvent,this),e.one(e.config.win).on("resize",this._handleResizeEvent,this),e.one(e.config.win).on("orientationchange",this._handleResizeEvent,this))},_setupFloatingUserColumn:function(){var t=e.all(n.USERCELL),r=e.Node.create(''),i=this._getRelativeXY(this.firstUserCell);t.each(function(t){var n=e.Node.create('');n.set("innerHTML",t.get("innerHTML")).setAttribute("data-uid",t.ancestor("tr").getData("uid")).setStyles({height:t.getComputedStyle(l),width:t.getComputedStyle(c)}),r.appendChild(n)},this),r.setStyles({left:i[0]+"px",position:"absolute",top:i[1]+"px"}),this.graderRegion.append(r),this.userColumn=r},_setupFloatingUserHeader:function(){this.headerRow=e.one(n.HEADERROW),this.headerCell=e.one(n.STUDENTHEADER);var t=e.Node.create(''),r=this._getRelativeXY(this.firstUserCell),i=this._getRelativeXY(this.headerRow);t.set("innerHTML",this.headerCell.getHTML()),t.setStyles({height:this.headerCell.getComputedStyle(l),left:r[0]+"px",position:"absolute",top:i[1]+"px",width:this.firstUserCell.getComputedStyle(c)}),this.graderRegion.append(t),this.userColumnHeader=t},_setupFloatingAssignmentHeaders:function(){this.headerRow=e.one("#user-grades tr.heading");var t=e.all("#user-grades tr.heading .cell"),n=e.Node.create(''),r=this._getRelativeXY(this.headerRow),i=0,s=0,o=r[0];t.each(function(t){var r=this._getRelativeXY(t)[0],u=e.Node.create('
');u.append(t.getHTML()).addClass(t.getAttribute("class")).setData("itemid",t.getData("itemid")).setStyles({height:t.getComputedStyle(l),left:r-o+"px",position:"absolute",width:t.getComputedStyle(c)}),i+=parseInt(t.get(h),10),s=t.get(p),n.appendChild(u)},this),n.setStyles({height:s+"px",left:r[0]+"px",position:"absolute",top:r[1]+"px",width:i+"px"}),this.userColumnHeader.insert(n,"before") -,this.gradeItemHeadingContainer=n},_setupFloatingAssignmentFooter:function(){this.tableFooterRow=e.one("#user-grades .avg");if(!this.tableFooterRow)return;var t=this.tableFooterRow.all(".cell"),n=e.Node.create(''),r=0,i=this._getRelativeXY(this.tableFooterRow),s=i[0];t.each(function(t){var i=e.Node.create('
'),o=this._getRelativeXY(t)[0];i.set("innerHTML",t.getHTML()),i.setStyles({height:this._getHeight(t),left:o-s+"px",position:"absolute",width:this._getWidth(t)}),n.append(i),r+=parseInt(t.get(h),10)},this);var o=e.one("#gradersubmit");if(o){var u=e.Node.create('");u.on("click",function(){o.simulate("click")}),n.one(".gradebook-footer-cell").append(u)}n.setStyles({position:"absolute",left:i[0]+"px",bottom:0,height:this._getHeight(this.tableFooterRow),width:r+"px"}),this.graderRegion.append(n),this.footerRow=n},_handleScrollEvent:function(){var t={},n={},r={},i={},s=0;t.left=this._getRelativeXFromX(this.headerRow.getX()),e.config.win.pageYOffset+this.pageHeaderHeight>this.headerRowTop?e.config.win.pageYOffset+this.pageHeaderHeightthis.firstUserCellLeft?(s=this._getRelativeXFromX(e.config.win.pageXOffset),r.left=s+"px",n.left=s+"px"):(s=this._getRelativeXFromX(this.firstUserCellLeft),r.left=s+"px",n.left=s+"px");if(this.footerRow){i.left=this._getRelativeXFromX(this.headerRow.getX());var o=e.config.win.innerHeight,u=e.config.win.pageYOffset,a=o-this._getScrollBarHeight()+u,f=parseInt(this.footerRow.getComputedStyle(l),10),c=f+this.footerRowPosition;athis.firstUserCellBottom?i.bottom=Math.ceil(c-a)+"px":i.bottom=0}this.gradeItemHeadingContainer.setStyles(t),this.userColumnHeader.setStyles(n),this.userColumn.setStyles(r),this.footerRow.setStyles(i)},_handleResizeEvent:function(){this._calculateCellPositions(),this._handleScrollEvent();var t=this.gradeItemHeadingContainer.all(n.HEADERCELL),r=e.all("#user-grades .heading .cell"),i=this.headerRow.getX(),s=0;r.each(function(e,n){var r=t.item(n);s+=e.get(h);var o={width:e.getComputedStyle(c),left:e.getX()-i+"px"};r.setStyles(o)});var o=e.all("#gradebook-footer-container .gradebook-footer-cell");if(o.size()!==0){var u=e.all("#user-grades .avg .cell");u.each(function(e,t){var n=o.item(t),r={width:e.getComputedStyle(c),left:e.getX()-i+"px"};n.setStyles(r)})}this.gradeItemHeadingContainer.setStyle("width",s)},_getHeight:function(t){return e.UA.ie?t.get(p)+"px":t.getComputedStyle(l)},_getWidth:function(t){return e.UA.ie?t.get(h)+"px":t.getComputedStyle(c)}},e.Base.mix(e.M.gradereport_grader.ReportTable,[d]),v.ATTRS={};var m='';v.prototype={_tooltip:null,_tooltipBoundingBox:null,_tooltipTemplate:null,setupTooltips:function(){return this._eventHandles.push(this.graderTable.delegate("hover",this._showTooltip,this._hideTooltip,n.GRADECELL,this),this.graderTable.delegate("click",this._toggleTooltip,n.GRADECELL,this)),this},_getTooltip:function(){return this._tooltip||(this._tooltip=new e.Overlay({visible:!1,render:e.one(n.GRADEPARENT)}),this._tooltipBoundingBox=this._tooltip.get("boundingBox"),this._tooltipTemplate=e.Handlebars.compile(m),this._tooltipBoundingBox.addClass("grader-information-tooltip")),this._tooltip},_showTooltip:function(e){var t=e.currentTarget,n=this._getTooltip();n.set("bodyContent",this._tooltipTemplate({cellid:t.get("id"),username:this.getGradeUserName(t),itemname:this.getGradeItemName(t),feedback:this.getGradeFeedback(t),overridden:t.hasClass(r.OVERRIDDEN)?r.OVERRIDDEN:""})).set("xy",[t.getX()+t.get("offsetWidth")/2,t.getY()+t.get("offsetHeight")/2]).show(),e.currentTarget.addClass(r.TOOLTIPACTIVE)},_hideTooltip:function(e){if(e.relatedTarget&&this._tooltipBoundingBox&&this._tooltipBoundingBox.contains(e.relatedTarget))return;this._tooltip&&(e.currentTarget.removeClass(r.TOOLTIPACTIVE),this._tooltip.hide())},_toggleTooltip:function(e){e.currentTarget.hasClass(r.TOOLTIPACTIVE)?this._hideTooltip(e):this._showTooltip(e)}},e.Base.mix(e.M.gradereport_grader.ReportTable,[v])},"@VERSION@",{requires:["base","node","event","handlebars","overlay","event-hover","node-event-simulate"]}); +,this.gradeItemHeadingContainer=n},_setupFloatingAssignmentFooter:function(){this.tableFooterRow=e.one("#user-grades .avg");if(!this.tableFooterRow)return;var t=this.tableFooterRow.all(".cell"),n=e.Node.create(''),r=0,i=this._getRelativeXY(this.tableFooterRow),s=i[0];t.each(function(t){var i=e.Node.create('
'),o=this._getRelativeXY(t)[0];i.set("innerHTML",t.getHTML()),i.setStyles({height:this._getHeight(t),left:o-s+"px",position:"absolute",width:this._getWidth(t)}),n.append(i),r+=parseInt(t.get(h),10)},this);var o=e.one("#gradersubmit");if(o){var u=e.Node.create('");u.on("click",function(){o.simulate("click")}),n.one(".gradebook-footer-cell").append(u)}n.setStyles({position:"absolute",left:i[0]+"px",bottom:0,height:this._getHeight(this.tableFooterRow),width:r+"px"}),this.graderRegion.append(n),this.footerRow=n},_handleScrollEvent:function(){var t={},n={},r={},i={},s=0;t.left=this._getRelativeXFromX(this.headerRow.getX()),e.config.win.pageYOffset+this.pageHeaderHeight>this.headerRowTop?e.config.win.pageYOffset+this.pageHeaderHeightthis.firstUserCellLeft?(s=this._getRelativeXFromX(e.config.win.pageXOffset),r.left=s+"px",n.left=s+"px"):(s=this._getRelativeXFromX(this.firstUserCellLeft),r.left=s+"px",n.left=s+"px");if(this.footerRow){i.left=this._getRelativeXFromX(this.headerRow.getX());var o=e.config.win.innerHeight,u=e.config.win.pageYOffset,a=o-this._getScrollBarHeight()+u,f=parseInt(this.footerRow.getComputedStyle(l),10),c=f+this.footerRowPosition;athis.firstUserCellBottom?i.bottom=Math.ceil(c-a)+"px":i.bottom=0}this.gradeItemHeadingContainer.setStyles(t),this.userColumnHeader.setStyles(n),this.userColumn.setStyles(r),this.footerRow.setStyles(i)},_handleResizeEvent:function(){this._calculateCellPositions(),this._handleScrollEvent();var t=this.firstUserCell.getComputedStyle(c),r=e.all(n.USERCELL);this.userColumnHeader.setStyle("width",t),this.userColumn.all(".gradebook-user-cell").each(function(e,n){e.setStyles({width:t,height:r.item(n).getComputedStyle(l)})},this);var i=this.gradeItemHeadingContainer.all(n.HEADERCELL),s=e.all("#user-grades .heading .cell"),o=this.headerRow.getX(),u=0;s.each(function(e,t){var n=i.item(t);u+=e.get(h);var r={width:e.getComputedStyle(c),left:e.getX()-o+"px"};n.setStyles(r)});var a=e.all("#gradebook-footer-container .gradebook-footer-cell");if(a.size()!==0){var f=e.all("#user-grades .avg .cell");f.each(function(e,t){var n=a.item(t),r={width:e.getComputedStyle(c),left:e.getX()-o+"px"};n.setStyles(r)})}this.gradeItemHeadingContainer.setStyle("width",u)},_getHeight:function(t){return e.UA.ie?t.get(p)+"px":t.getComputedStyle(l)},_getWidth:function(t){return e.UA.ie?t.get(h)+"px":t.getComputedStyle(c)}},e.Base.mix(e.M.gradereport_grader.ReportTable,[d]),v.ATTRS={};var m='';v.prototype={_tooltip:null,_tooltipBoundingBox:null,_tooltipTemplate:null,setupTooltips:function(){return this._eventHandles.push(this.graderTable.delegate("hover",this._showTooltip,this._hideTooltip,n.GRADECELL,this),this.graderTable.delegate("click",this._toggleTooltip,n.GRADECELL,this)),this},_getTooltip:function(){return this._tooltip||(this._tooltip=new e.Overlay({visible:!1,render:e.one(n.GRADEPARENT)}),this._tooltipBoundingBox=this._tooltip.get("boundingBox"),this._tooltipTemplate=e.Handlebars.compile(m),this._tooltipBoundingBox.addClass("grader-information-tooltip")),this._tooltip},_showTooltip:function(e){var t=e.currentTarget,n=this._getTooltip();n.set("bodyContent",this._tooltipTemplate({cellid:t.get("id"),username:this.getGradeUserName(t),itemname:this.getGradeItemName(t),feedback:this.getGradeFeedback(t),overridden:t.hasClass(r.OVERRIDDEN)?r.OVERRIDDEN:""})).set("xy",[t.getX()+t.get("offsetWidth")/2,t.getY()+t.get("offsetHeight")/2]).show(),e.currentTarget.addClass(r.TOOLTIPACTIVE)},_hideTooltip:function(e){if(e.relatedTarget&&this._tooltipBoundingBox&&this._tooltipBoundingBox.contains(e.relatedTarget))return;this._tooltip&&(e.currentTarget.removeClass(r.TOOLTIPACTIVE),this._tooltip.hide())},_toggleTooltip:function(e){e.currentTarget.hasClass(r.TOOLTIPACTIVE)?this._hideTooltip(e):this._showTooltip(e)}},e.Base.mix(e.M.gradereport_grader.ReportTable,[v])},"@VERSION@",{requires:["base","node","event","handlebars","overlay","event-hover","node-event-simulate"]}); diff --git a/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable.js b/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable.js index 0b37f15d295..1d7e0f7d62b 100644 --- a/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable.js +++ b/grade/report/grader/yui/build/moodle-gradereport_grader-gradereporttable/moodle-gradereport_grader-gradereporttable.js @@ -886,6 +886,17 @@ FloatingHeaders.prototype = { // Simulate a scroll. this._handleScrollEvent(); + // Resize user cells. + var userWidth = this.firstUserCell.getComputedStyle(WIDTH); + var userCells = Y.all(SELECTORS.USERCELL); + this.userColumnHeader.setStyle('width', userWidth); + this.userColumn.all('.gradebook-user-cell').each(function(cell, idx) { + cell.setStyles({ + width: userWidth, + height: userCells.item(idx).getComputedStyle(HEIGHT) + }); + }, this); + // Resize headers & footers. // This is an expensive operation, not expected to happen often. var headers = this.gradeItemHeadingContainer.all(SELECTORS.HEADERCELL); diff --git a/grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js b/grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js index fe8e36b8182..b41c6840ed3 100644 --- a/grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js +++ b/grade/report/grader/yui/src/gradereporttable/js/floatingheaders.js @@ -639,6 +639,17 @@ FloatingHeaders.prototype = { // Simulate a scroll. this._handleScrollEvent(); + // Resize user cells. + var userWidth = this.firstUserCell.getComputedStyle(WIDTH); + var userCells = Y.all(SELECTORS.USERCELL); + this.userColumnHeader.setStyle('width', userWidth); + this.userColumn.all('.gradebook-user-cell').each(function(cell, idx) { + cell.setStyles({ + width: userWidth, + height: userCells.item(idx).getComputedStyle(HEIGHT) + }); + }, this); + // Resize headers & footers. // This is an expensive operation, not expected to happen often. var headers = this.gradeItemHeadingContainer.all(SELECTORS.HEADERCELL);