From d7c32ed79c2da89ebacc77a7f48babf4c31c4468 Mon Sep 17 00:00:00 2001 From: smmercuri <smercuri@ed.ac.uk> Date: Mon, 27 May 2024 12:06:36 +0100 Subject: [PATCH] Autoresizing of item height --- corsscripts/sortable.css | 2 +- corsscripts/sortable.min.css | 2 +- corsscripts/stacksortable.js | 51 +++++++++++++++++---- corsscripts/stacksortable.min.js | 13 ++++-- stack/cas/castext2/blocks/parsons.block.php | 8 +++- 5 files changed, 58 insertions(+), 18 deletions(-) diff --git a/corsscripts/sortable.css b/corsscripts/sortable.css index 66570e5f6..c7585fd58 100644 --- a/corsscripts/sortable.css +++ b/corsscripts/sortable.css @@ -105,7 +105,7 @@ button { width: 150px; } -.usedList:empty { +.usedList.empty { height: 50px; background-color: floralwhite; border: 1px solid rgb(155, 199, 206); padding: 10px; diff --git a/corsscripts/sortable.min.css b/corsscripts/sortable.min.css index ad854424b..674e41b13 100644 --- a/corsscripts/sortable.min.css +++ b/corsscripts/sortable.min.css @@ -1,2 +1,2 @@ @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");@import url("../styles.css");body{background-color:inherit;} -button{margin:2px 3px;}.container{display:flex;flex-wrap:wrap;}.usedList>li[data-id]{background-color:rgb(176,221,228);border-left:thick solid rgb(155,199,206);float:left;flex-shrink:1;}.usedList.col-rigid>li[data-id]{margin-left:0;}.row{margin-right:0;margin-left:0;margin-bottom:0;}.col-rigid{width:175px;flex:0 0 auto;display:inline-block}#availableList>li{background-color:rgb(243,189,88);float:left;}#availableList:empty{height:50px;background-color:lightpink;}#availableList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(226,150,9)inset;}.usedList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(155,199,206)inset;}.usedList>.header{height:50px;background-color:inherit;text-align:center;border-bottom:thick solid;padding:10px;display:inline-block;}.usedList>.index{background-color:inherit;text-align:left;border-right:thick solid;display:inline-block;margin-right:12px;}#availableList>.header{min-height:50px;height:auto;width:max(100%,150px);background-color:inherit;text-align:center;border-bottom:thick solid rgb(196,131,10);padding:10px;display:inline-block;}#availableList>.index{min-height:50px;height:auto;background-color:inherit;text-align:left;border-right:thick solid rgb(196,131,10);padding:10px;margin:12px;}.grid-item{height:50px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}.grid-item-rigid{height:50px;width:150px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}#availableList>.grid-item-rigid.index{width:150px;}.usedList:empty{height:50px;background-color:floralwhite;border:1px solid rgb(155,199,206);padding:10px;margin:12px;text-align:center;display:flex;}.usedList.col-rigid:empty{width:150px;}.parsons-button{display:inline-flex;align-items:center;padding:0.5rem 0.75rem;margin:2px 2px;font-size:25px;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;cursor:pointer;background-color:#6c757d;border:1px solid#6c757d;color:#ffffff;border-radius:0.35rem;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}.parsons-button:hover{background-color:#5a6268;border-color:#545b62;color:#ffffff;}.parsons-bin{width:33%;cursor:default;}.bin-icon{margin-right:0.75rem;}.drop-zone{vertical-align:middle;display:inline-flex;flex:1;border:2px dashed#6c757d;border-radius:0.25rem;background-color:lightgray;align-self:stretch;}.drop-zone>li{font-size:0.75rem;background-color:lightcoral;max-height:100%;max-width:100%;text-align:left;flex:1;box-shadow:0px 0px 0px 2px rgb(167,89,89)inset;}.sortable-warning{float:right;font-size:0.8em;margin:-0.3em-0.3em;} \ No newline at end of file +button{margin:2px 3px;}.container{display:flex;flex-wrap:wrap;}.usedList>li[data-id]{background-color:rgb(176,221,228);border-left:thick solid rgb(155,199,206);float:left;flex-shrink:1;}.usedList.col-rigid>li[data-id]{margin-left:0;}.row{margin-right:0;margin-left:0;margin-bottom:0;}.col-rigid{width:175px;flex:0 0 auto;display:inline-block}#availableList>li{background-color:rgb(243,189,88);float:left;}#availableList:empty{height:50px;background-color:lightpink;}#availableList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(226,150,9)inset;}.usedList>.sortable-chosen{box-shadow:0px 0px 0px 3px rgb(155,199,206)inset;}.usedList>.header{height:50px;background-color:inherit;text-align:center;border-bottom:thick solid;padding:10px;display:inline-block;}.usedList>.index{background-color:inherit;text-align:left;border-right:thick solid;display:inline-block;margin-right:12px;}#availableList>.header{min-height:50px;height:auto;width:max(100%,150px);background-color:inherit;text-align:center;border-bottom:thick solid rgb(196,131,10);padding:10px;display:inline-block;}#availableList>.index{min-height:50px;height:auto;background-color:inherit;text-align:left;border-right:thick solid rgb(196,131,10);padding:10px;margin:12px;}.grid-item{height:50px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}.grid-item-rigid{height:50px;width:150px;background-color:#fff;border:solid 1px rgb(0,0,0,0.2);padding:10px;margin:12px;display:flex;text-align:center;}#availableList>.grid-item-rigid.index{width:150px;}.usedList.empty{height:50px;background-color:floralwhite;border:1px solid rgb(155,199,206);padding:10px;margin:12px;text-align:center;display:flex;}.usedList.col-rigid:empty{width:150px;}.parsons-button{display:inline-flex;align-items:center;padding:0.5rem 0.75rem;margin:2px 2px;font-size:25px;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;cursor:pointer;background-color:#6c757d;border:1px solid#6c757d;color:#ffffff;border-radius:0.35rem;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;}.parsons-button:hover{background-color:#5a6268;border-color:#545b62;color:#ffffff;}.parsons-bin{width:33%;cursor:default;}.bin-icon{margin-right:0.75rem;}.drop-zone{vertical-align:middle;display:inline-flex;flex:1;border:2px dashed#6c757d;border-radius:0.25rem;background-color:lightgray;align-self:stretch;}.drop-zone>li{font-size:0.75rem;background-color:lightcoral;max-height:100%;max-width:100%;text-align:left;flex:1;box-shadow:0px 0px 0px 2px rgb(167,89,89)inset;}.sortable-warning{float:right;font-size:0.8em;margin:-0.3em-0.3em;} \ No newline at end of file diff --git a/corsscripts/stacksortable.js b/corsscripts/stacksortable.js index 8043c78be..6570642a5 100644 --- a/corsscripts/stacksortable.js +++ b/corsscripts/stacksortable.js @@ -292,6 +292,7 @@ export function get_iframe_height() { * @method generate_available - Generates the available list based on the current state. * @method generate_used - Generates the used list based on the current state. * @method update_state - Updates the state based on changes in the used and available lists. + * @method resize_grid_items - Resizes the height of divs with `grid-item` class according to the max height across grid items. * @method validate_options - Validates the sortable user options. * * @example @@ -371,7 +372,7 @@ export const stack_sortable = class stack_sortable { if (val !== "") {this.item_height_width["style"] += `${key}:${val}px;`}; }; this.item_height_width = (this.item_height_width["style"] === "") ? {} : this.item_height_width; - this.container_height_width = (this.item_height_width["style"] !== "") ? + this.container_height_width = (Object.keys(this.item_height_width).length !== 0) ? {"style" : this.item_height_width["style"] + "margin: 12px;"} : {}; this.state = this._generate_state(this.steps, inputId, Number(this.columns), Number(this.rows)); if (inputId !== null) { @@ -540,9 +541,9 @@ export const stack_sortable = class stack_sortable { divRowCol.id = rowColId; // In matching mode, we need to add rigid styles to colDivs if orientation === "row" if (this.orientation === "row") { - divRowCol.classList.add(...itemClassList, ...["col-rigid"]); + divRowCol.classList.add(...itemClassList, ...["empty", "col-rigid"]); } else { - divRowCol.classList.add(...itemClassList); + divRowCol.classList.add(...itemClassList, ...["empty"]); } colDiv.append(divRowCol); }) @@ -591,6 +592,31 @@ export const stack_sortable = class stack_sortable { } } + /** + * Resizes all grid-item heights according to the maximum content height across all grid-items, adding an extra `10px` padding. + * Avoids affecting proof mode by virtue of grid-item and grid-item-rigid classes not being used there. + * + * @method + * @returns {void} + */ + resize_grid_items() { + const allGridItems = document.querySelectorAll('.grid-item, .grid-item-rigid'); + const maxHeight = Math.max(...[...allGridItems].map((item) => item.scrollHeight)); + const maxWidth = Math.max(...[...allGridItems].map((item) => item.clientWidth)); + // In grid fixed grid mode we also need to resize the individual item containers. + if (this.rows !== "" && this.columns !== "") { + for (const [i, value] of this.state.used.entries()) + for (const [j, val] of value.entries()) { + this._apply_attrs(this.used[i][j], {'style' : 'height: ' + `${maxHeight + 10}px;` + 'margin: 12px;'}); + } + } + // In all cases resize all grid-item or grid-item-rigid divs. + allGridItems.forEach((item) => { + item.style.height = `${maxHeight + 10}px`; + //item.style.width = `${maxWidth + 10}px`; + }); + } + /** * Updates the state based on changes in the used and available lists. * @@ -606,6 +632,13 @@ export const stack_sortable = class stack_sortable { this.input.dispatchEvent(new Event("change")); } this.state = newState; + + const empties = document.querySelectorAll('.empty'); + empties.forEach((div) => {if (!this._is_empty(div)) { + div.classList.remove('empty'); + div.style.height = ''; + div.style.margin = ''; + }}) } /** @@ -766,7 +799,7 @@ export const stack_sortable = class stack_sortable { * @returns {boolean} - True if the list item is deletable, otherwise false. */ _deletable_li(li) { - return !li.matches(".header") && !li.matches(".index") && !this._is_empty_li(li); + return !li.matches(".header") && !li.matches(".index") && !this._is_empty(li); } /** @@ -975,13 +1008,13 @@ export const stack_sortable = class stack_sortable { } /** - * Checks if a list item (li) element is empty. + * Checks if an element is empty. * - * @param {HTMLElement} li - The list item (li) element to check. - * @returns {boolean} - True if the list item is empty, otherwise false. + * @param {HTMLElement} el - The element to check. + * @returns {boolean} - True if the element is empty, otherwise false. */ - _is_empty_li(li) { - return li.textContent.trim() === "" && li.children.length === 0; + _is_empty(el) { + return el.textContent.trim() === "" && el.children.length === 0; } /** diff --git a/corsscripts/stacksortable.min.js b/corsscripts/stacksortable.min.js index a62116224..ebda1e95d 100644 --- a/corsscripts/stacksortable.min.js +++ b/corsscripts/stacksortable.min.js @@ -14,7 +14,7 @@ function _validate_flat_steps(steps){if(typeof(steps)=="string"){steps=_stackstr return Object.values(steps).every((val)=>typeof(val)=="string");} function _validate_top_level_keys_JSON(JSON,validKeys,requiredKeys){const keys=Object.keys(JSON);const missingRequiredKeys=requiredKeys.filter((key)=>!keys.includes(key));const invalidKeys=keys.filter((key)=>!validKeys.includes(key));return invalidKeys.length===0&&missingRequiredKeys.length===0;} export function get_iframe_height(){return document.documentElement.offsetHeight;} -export const stack_sortable=class stack_sortable{constructor(steps,inputId=null,options=null,clone=false,columns=1,rows=null,orientation="col",index="",grid=false,item_height=null,item_width=null){this.steps=steps;this.inputId=inputId;this.orientation=orientation;this.columns=((this.orientation==="col")?columns:rows);this.rows=((this.orientation==="col")?rows:columns);this.index=index;this.use_index=this.index!=="";this.grid=grid;this.item_class=(this.grid?(this.orientation==="row"?"grid-item-rigid":"grid-item"):"list-group-item");this.item_height_width={"style":""};for(const[key,val]of[["height",item_height],["width",item_width]]){if(val!==""){this.item_height_width["style"]+=`${key}:${val}px;`};};this.item_height_width=(this.item_height_width["style"]==="")?{}:this.item_height_width;this.container_height_width=(this.item_height_width["style"]!=="")?{"style":this.item_height_width["style"]+"margin: 12px;"}:{};this.state=this._generate_state(this.steps,inputId,Number(this.columns),Number(this.rows));if(inputId!==null){this.input=document.getElementById(this.inputId);this.submitted=this.input.getAttribute("readonly")==="readonly"} +export const stack_sortable=class stack_sortable{constructor(steps,inputId=null,options=null,clone=false,columns=1,rows=null,orientation="col",index="",grid=false,item_height=null,item_width=null){this.steps=steps;this.inputId=inputId;this.orientation=orientation;this.columns=((this.orientation==="col")?columns:rows);this.rows=((this.orientation==="col")?rows:columns);this.index=index;this.use_index=this.index!=="";this.grid=grid;this.item_class=(this.grid?(this.orientation==="row"?"grid-item-rigid":"grid-item"):"list-group-item");this.item_height_width={"style":""};for(const[key,val]of[["height",item_height],["width",item_width]]){if(val!==""){this.item_height_width["style"]+=`${key}:${val}px;`};};this.item_height_width=(this.item_height_width["style"]==="")?{}:this.item_height_width;this.container_height_width=(Object.keys(this.item_height_width).length!==0)?{"style":this.item_height_width["style"]+"margin: 12px;"}:{};this.state=this._generate_state(this.steps,inputId,Number(this.columns),Number(this.rows));if(inputId!==null){this.input=document.getElementById(this.inputId);this.submitted=this.input.getAttribute("readonly")==="readonly"} this.ids=this._create_ids(this.rows,this.columns);this.availableId=this.ids.available;this.usedId=this.ids.used;this.clone=clone;this.defaultOptions={used:{animation:50},available:{animation:50}};this.userOptions=this._set_user_options(options);this.options=this._set_ghostClass_group_and_disabled_options();} add_dblclick_listeners(newUsed,newAvailable){this.available.addEventListener("dblclick",(e)=>{if(this._double_clickable(e.target)){var li=this._get_moveable_parent_li(e.target);li=(this.clone==="true")?li.cloneNode(true):this.available.removeChild(li);this.used[0][0].append(li);this.update_state(newUsed,newAvailable);}});this.used[0][0].addEventListener("dblclick",(e)=>{if(this._double_clickable(e.target)){var li=this._get_moveable_parent_li(e.target);this.used[0][0].removeChild(li);if(this.clone!=="true"){this.available.insertBefore(li,this.available.children[1]);} this.update_state(newUsed,newAvailable);}});} @@ -25,13 +25,16 @@ add_index(index){for(const[i,value]of index.entries()){if(i===0){var idx=this._c document.getElementById("index").append(idx);}} add_reorientation_button(){var btn=document.createElement("button");btn.id="orientation";btn.setAttribute("class","parsons-button");var icon=document.createElement("i");icon.setAttribute("class","fa fa-refresh");btn.append(icon);btn.addEventListener("click",()=>this._flip_orientation());document.body.insertBefore(btn,document.getElementById("containerRow"));} create_row_col_divs(){var usedClassList=(!this.grid||this.orientation==="col")?(["list-group",this.orientation,"usedList"]):([this.orientation,"usedList"]);var itemClass=(this.orientation==="col")?"row":"col";var itemClassList=[itemClass,"usedList"];var availClassList=(!this.grid||this.orientation==="col")?["list-group",this.orientation]:[this.orientation];var container=document.getElementById("containerRow");if(this.use_index){var indexCol=document.createElement("div");indexCol.id="index";indexCol.classList.add(...usedClassList);container.append(indexCol);} -this.colIds.forEach((id)=>{var colDiv=document.createElement("ul");colDiv.id=id;colDiv.classList.add(...usedClassList);container.append(colDiv);});if(this.rows!==""){this.colIds.forEach((colId)=>{var colDiv=document.getElementById(colId);colDiv.classList.add("container");this.rowColIds[colId].forEach((rowColId)=>{var divRowCol=document.createElement("li");divRowCol.id=rowColId;if(this.orientation==="row"){divRowCol.classList.add(...itemClassList,...["col-rigid"]);}else{divRowCol.classList.add(...itemClassList);} +this.colIds.forEach((id)=>{var colDiv=document.createElement("ul");colDiv.id=id;colDiv.classList.add(...usedClassList);container.append(colDiv);});if(this.rows!==""){this.colIds.forEach((colId)=>{var colDiv=document.getElementById(colId);colDiv.classList.add("container");this.rowColIds[colId].forEach((rowColId)=>{var divRowCol=document.createElement("li");divRowCol.id=rowColId;if(this.orientation==="row"){divRowCol.classList.add(...itemClassList,...["empty","col-rigid"]);}else{divRowCol.classList.add(...itemClassList,...["empty"]);} colDiv.append(divRowCol);})})};var availDiv=document.createElement("ul");availDiv.id=this.ids.available;availDiv.classList.add(...availClassList);if(this.orientation==="col"){container.append(availDiv);}else{container.insertBefore(availDiv,container.firstChild);} this.used=this.usedId.map(idList=>idList.map(id=>document.getElementById(id)));this.available=document.getElementById(this.availableId);} generate_available(){this.state.available.forEach(key=>this.available.append(this._create_li(key,this.item_height_width)));} generate_used(){for(const[i,value]of this.state.used.entries()){if(this.rows!==""&&this.columns!==""){for(const[j,val]of value.entries()){this._apply_attrs(this.used[i][j],this.container_height_width);val.forEach(key=>this.used[i][j].append(this._create_li(key,this.item_height_width)));}}else{value[0].forEach(key=>this.used[i][0].append(this._create_li(key,this.item_height_width)));}}} +resize_grid_items(){const allGridItems=document.querySelectorAll('.grid-item, .grid-item-rigid');const maxHeight=Math.max(...[...allGridItems].map((item)=>item.scrollHeight));const maxWidth=Math.max(...[...allGridItems].map((item)=>item.clientWidth));if(this.rows!==""&&this.columns!==""){for(const[i,value]of this.state.used.entries()) +for(const[j,val]of value.entries()){this._apply_attrs(this.used[i][j],{'style':'height: '+`${maxHeight+10}px;`+'margin: 12px;'});}} +allGridItems.forEach((item)=>{item.style.height=`${maxHeight+10}px`;});} update_state(newUsed,newAvailable){var newState={used:newUsed.map((usedList)=>usedList.map((used)=>used.toArray())),available:newAvailable.toArray()};if(this.inputId!==null){this.input.value=JSON.stringify(newState);this.input.dispatchEvent(new Event("change"));} -this.state=newState;} +this.state=newState;const empties=document.querySelectorAll('.empty');empties.forEach((div)=>{if(!this._is_empty(div)){div.classList.remove('empty');div.style.height='';div.style.margin='';}})} validate_options(possibleOptionKeys,unknownErr,overwrittenErr){var err="";var keysRecognised=true;var invalidKeys=[];Object.keys(this.options.used).forEach(key=>{if(!this._validate_option_key(key,possibleOptionKeys)){keysRecognised=false;if(!invalidKeys.includes(key)){invalidKeys.push(key);}}});Object.keys(this.options.available).forEach(key=>{if(!this._validate_option_key(key,possibleOptionKeys)){keysRecognised=false;if(!invalidKeys.includes(key)){invalidKeys.push(key);}}});if(!keysRecognised){err+=unknownErr+invalidKeys.join(", ")+". ";} var overwrittenKeys=[];var keysPreserved=true;["ghostClass","group","onSort"].forEach(key=>{if(Object.keys(this.userOptions.used).includes(key)||Object.keys(this.userOptions.available).includes(key)) {keysPreserved=false;overwrittenKeys.push(key);}});if(!keysPreserved){err+=overwrittenErr+overwrittenKeys.join(", ")+".";} @@ -42,7 +45,7 @@ _create_ids(rows,columns){var colIdx=Array.from({length:columns},(_,i)=>i);var r colIdx.forEach((i)=>this.rowColIds[this.colIds[i]]=rowIdx.map((j)=>`usedList_${j}${i}`));var usedIds=(rows==="")?this.colIds.map((id)=>[id]):Object.values(this.rowColIds);return{used:usedIds,available:"availableList"};} _create_index(innerHTML,id,attrs){let i=document.createElement("i");i.innerHTML=innerHTML;var addClass=(this.orientation==="col")?[this.item_class,"index"]:[this.item_class,"header"];i.classList.add(...addClass);this._apply_attrs(i,{...{"id":id},...attrs});return i;} _create_li(stepKey,attrs){let li=document.createElement("li");li.innerHTML=this.steps[stepKey];this._apply_attrs(li,{...{"data-id":stepKey},...attrs});li.className=this.item_class;return li;} -_deletable_li(li){return!li.matches(".header")&&!li.matches(".index")&&!this._is_empty_li(li);} +_deletable_li(li){return!li.matches(".header")&&!li.matches(".index")&&!this._is_empty(li);} _delete_all_from_used(){const lis=document.querySelectorAll(".usedList li[data-id]");lis.forEach(li=>{if(this._deletable_li(li)){this._delete_li(li);}});} _delete_li(li){li.parentNode.removeChild(li);} _display_warning(msg){var warning=document.createElement("div");warning.className="sortable-warning";var exclamation=document.createElement("i");exclamation.className="icon fa fa-exclamation-circle text-danger fa-fw";warning.append(exclamation);var warningMessage=document.createElement("span");warningMessage.textContent=msg;warning.append(warningMessage);document.body.insertBefore(warning,document.getElementById("containerRow"));} @@ -57,7 +60,7 @@ _generate_state(steps,inputId,columns,rows){const usedState=(rows===0||columns== return(stateStore.value&&stateStore.value!="")?JSON.parse(stateStore.value):{used:usedState,available:[...Object.keys(steps)]};} _get_moveable_parent_li(target){var li=target;while(!li.matches(".list-group-item")){li=li.parentNode;} return li;} -_is_empty_li(li){return li.textContent.trim()===""&&li.children.length===0;} +_is_empty(el){return el.textContent.trim()===""&&el.children.length===0;} _set_ghostClass_group_and_disabled_options(){var group_val={};group_val.used=(this.rows==="")?{name:"sortableUsed",pull:true,put:true}:{name:"sortableUsed",pull:true,put:(to)=>to.el.children.length<1};group_val.available=(this.clone==="true")?{name:"sortableAvailable",pull:"clone",revertClone:true,put:false}:{name:"sortableAvailable",put:true};var options_to_assign=this.submitted?{used:{ghostClass:"list-group-item-info",group:group_val.used,disabled:true},available:{ghostClass:"list-group-item-info",group:group_val.available,disabled:true}}:{used:{ghostClass:"list-group-item-info",group:group_val.used},available:{ghostClass:"list-group-item-info",group:group_val.available}} var options={used:Object.assign(Object.assign({},this.userOptions.used),options_to_assign.used),available:Object.assign(Object.assign({},this.userOptions.available),options_to_assign.available)};return options;} _set_user_options(options){var userOptions;if(options===null){userOptions=this.defaultOptions;}else{userOptions={used:Object.assign(this.defaultOptions.used,options.used),available:Object.assign(this.defaultOptions.available,options.available)};} diff --git a/stack/cas/castext2/blocks/parsons.block.php b/stack/cas/castext2/blocks/parsons.block.php index 6b29c5415..8b4a8a683 100644 --- a/stack/cas/castext2/blocks/parsons.block.php +++ b/stack/cas/castext2/blocks/parsons.block.php @@ -342,8 +342,12 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block { // Resize the outer iframe if the author does not pre-define width. Method depends on MathJax 2 or MathJax 3. if (!$existsuserheight) { $code .= ($mathjaxversion === "2") ? - 'MathJax.Hub.Queue(() => {stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");})' : - 'mathJaxPromise.then(() => {stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");});'; + 'MathJax.Hub.Queue(() => { + stackSortable.resize_grid_items(); + stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");})' : + 'mathJaxPromise.then(() => { + stackSortable.resize_grid_items(); + stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");});'; $code .= "\n"; } -- GitLab