Drag event resizing

corsscripts/stacksortable.js

@@ -442,7 +442,7 @@ export const stack_sortable = class stack_sortable {
     add_delete_all_listener(buttonId, newUsed, newAvailable) {
         const button = document.getElementById(buttonId);
         button.addEventListener("click", () => {
-            this._delete_all_from_used(); this.update_state(newUsed, newAvailable);});
+            this._delete_all_from_used(); this.update_state(newUsed, newAvailable); this.update_grid_empty_css();});
     }
 
     /**
@@ -662,7 +662,7 @@ export const stack_sortable = class stack_sortable {
         usedLists.forEach((el) => {if (this._is_empty(el)) {
             el.classList.add('empty');
             // We need to auto-resize the height again in this case. 
-            this._resize_set_height(el, this._resize_compute_max_height('.grid-item, .grid-item-rigid'));
+            this._resize_set_height(el, this._resize_compute_max_height('.grid-item, .grid-item-rigid') + 12);
         }})
     }
 

corsscripts/stacksortable.min.js

@@ -20,7 +20,7 @@ this.item_height_width=(this.item_height_width["style"]==="")?{}:this.item_heigh
 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);}});}
-add_delete_all_listener(buttonId,newUsed,newAvailable){const button=document.getElementById(buttonId);button.addEventListener("click",()=>{this._delete_all_from_used();this.update_state(newUsed,newAvailable);});}
+add_delete_all_listener(buttonId,newUsed,newAvailable){const button=document.getElementById(buttonId);button.addEventListener("click",()=>{this._delete_all_from_used();this.update_state(newUsed,newAvailable);this.update_grid_empty_css();});}
 add_headers(headers,available_header){for(const[i,value]of headers.entries()){var parentEl=document.getElementById(`usedList_${i}`);var header=this._create_header(value,`usedHeader_${i}`,this.item_height_width);parentEl.insertBefore(header,parentEl.firstChild);}
 var parentEl=document.getElementById("availableList");parentEl.insertBefore(this._create_header(available_header,"availableHeader",this.item_height_width),parentEl.firstChild);}
 add_index(index){for(const[i,value]of index.entries()){if(i===0){var idx=this._create_index(value,`usedIndex_${i}`,this.item_height_width);var addClass=this.orientation==="col"?"header":"index";idx.classList.add(addClass);}else{var idx=this._create_index(value,`usedIndex_${i}`,this.item_height_width);}
@@ -36,7 +36,7 @@ resize_grid_items(){const maxHeight=this._resize_compute_max_height('.grid-item,
 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;}
 update_grid_empty_css(){const empties=document.querySelectorAll('.empty');empties.forEach((el)=>{if(!this._is_empty(el)){el.classList.remove('empty');el.style.height='';el.style.margin='';}})
-const usedLists=document.querySelectorAll('.usedList');usedLists.forEach((el)=>{if(this._is_empty(el)){el.classList.add('empty');this._resize_set_height(el,this._resize_compute_max_height('.grid-item, .grid-item-rigid'));}})}
+const usedLists=document.querySelectorAll('.usedList');usedLists.forEach((el)=>{if(this._is_empty(el)){el.classList.add('empty');this._resize_set_height(el,this._resize_compute_max_height('.grid-item, .grid-item-rigid')+12);}})}
 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(", ")+".";}

doc/en/Topics/Matching.md

@@ -72,6 +72,7 @@ See the examples below for more details.
 ## Item style
 
 In **Grouping** and **Grid** configurations, the height and width of individual items will by default auto-resize so that all their heights and widths are set to contain the largest item content. 
+This will also apply to headers and index items as well.
 
 This can be overriden via the `item-height` and `item-width` header parameters. Parameter values should be a string containing a number, and this will set the pixels of the height/width. 
 The default is `50px` (`item-height="50"`) for height, and the width is automatically deduced from the page layout and number of columns for the vertical orientation, or it is `100px` (`item-width="100"`) for the horizontal configuration. 

stack/cas/castext2/blocks/parsons.block.php

@@ -341,6 +341,9 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
             $code .= 'stackSortable.add_dblclick_listeners(sortableUsed, sortableAvailable);' . "\n";
         }
 
+        // Resize grid-items if window size is changed.
+        $code .= 'window.addEventListener("resize", () => stackSortable.resize_grid_items())' . "\n";
+
         // Typeset MathJax. MathJax 2 uses Queue, whereas 3 works with promises.
         $code .= ($mathjaxversion === "2") ?
             'MathJax.Hub.Queue(["Typeset", MathJax.Hub]);' :