refactor header fn

corsscripts/stacksortable.js

@@ -29,20 +29,6 @@ export function preprocess_steps(proofSteps, blockUserOpts, sortableUserOpts) {
     return [proofSteps, blockUserOpts, sortableUserOpts];
 }
 
-export function add_headers(blockUserOpts) {
-    usedList = document.getElementById("usedList");
-    availableList = document.getElementById("availableList");
-    usedList.append(_create_header(blockUserOpts.used.header));
-    availableList.append(_create_header(blockUserOpts.available.header));
-}
-
-function _create_header(innerHTML) {
-    let i = document.createElement("i");
-    i.innerHTML = innerHTML;
-    i.className = "list-group-item header";
-    return i;
-}
-
 export function flip_orientation() {
     var usedList = document.getElementById('usedList');
     var availableList = document.getElementById('availableList');
@@ -127,6 +113,18 @@ export const stack_sortable = class {
         };
     }
 
+    _create_header(innerHTML) {
+        let i = document.createElement("i");
+        i.innerHTML = innerHTML;
+        i.className = "list-group-item header";
+        return i;
+    }
+
+    add_headers(headers) {
+        this.used.append(this._create_header(headers.used.header));
+        this.available.append(this._create_header(headers.available.header));
+    }
+
     update_state(newUsed, newAvailable) {
         var newState = {used: newUsed.toArray(), available: newAvailable.toArray()};
         if (this.inputId != null) {

corsscripts/stacksortable.min.js

@@ -12,6 +12,8 @@ _generate_state(proofSteps,inputId){let stateStore=document.getElementById(input
 return stateStore.value&&stateStore.value!=""?JSON.parse(stateStore.value):{used:[],available:[...Object.keys(proofSteps)]};}
 generate_available(){for(const key in this.state.available){let li=document.createElement("li");li.innerHTML=this.proofSteps[this.state.available[key]];li.setAttribute("data-id",this.state.available[key]);li.className="list-group-item";this.available.append(li);};}
 generate_used(){for(const key in this.state.used){let li=document.createElement("li");li.innerHTML=this.proofSteps[this.state.used[key]];li.setAttribute("data-id",this.state.used[key]);li.className="list-group-item";this.used.append(li);};}
+_create_header(innerHTML){let i=document.createElement("i");i.innerHTML=innerHTML;i.className="list-group-item header";return i;}
+add_headers(headers){this.used.append(this._create_header(headers.used.header));this.available.append(this._create_header(headers.available.header));}
 update_state(newUsed,newAvailable){var newState={used:newUsed.toArray(),available:newAvailable.toArray()};if(this.inputId!=null){this.input.value=JSON.stringify(newState);this.input.dispatchEvent(new Event('change'));};this.state=newState;}
 update_state_dblclick(newUsed,newAvailable){this.available.addEventListener('dblclick',(e)=>{if(e.target.matches(".list-group-item")){var li=(this.clone==="true")?e.target.cloneNode(true):this.available.removeChild(e.target);this.used.append(li);this.update_state(newUsed,newAvailable)}});this.used.addEventListener('dblclick',(e)=>{if(e.target.matches(".list-group-item")){var li=this.used.removeChild(e.target);if(this.clone!=="true"){this.available.prepend(li);}
 this.update_state(newUsed,newAvailable);}});}};export default{stack_sortable};
\ No newline at end of file

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

@@ -162,7 +162,7 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
 
         $importcode = "\nimport {stack_js} from '" . stack_cors_link('stackjsiframe.min.js') . "';\n";
         $importcode .= "import {Sortable} from '" . stack_cors_link('sortable.min.js') . "';\n";
-        $importcode .= "import {preprocess_steps, stack_sortable, add_orientation_listener, add_headers} from '" .
+        $importcode .= "import {preprocess_steps, stack_sortable, add_orientation_listener} from '" .
             stack_cors_link('stacksortable.min.js') . "';\n";
         $r->items[] = new MP_String($importcode);
         // TODO :automatically set orientation based on device.
@@ -186,12 +186,10 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
         }
 
         // Parse steps and Sortable options separately if they exist.
-        $code = 'var blockUserOpts = {used: {header: "' . stack_string('stackBlock_used_header') . '"}, available: {header: "' . stack_string('stackBlock_available_header') . '"}};' . "\n";
+        $code = 'var headers = {used: {header: "' . stack_string('stackBlock_used_header') . '"}, available: {header: "' . stack_string('stackBlock_available_header') . '"}};' . "\n";
         $code .= 'var sortableUserOpts = {};' . "\n";
-        $code .= '[proofSteps, blockUserOpts, sortableUserOpts] = preprocess_steps(proofSteps, blockUserOpts, sortableUserOpts);' . "\n";
+        $code .= '[proofSteps, headers, sortableUserOpts] = preprocess_steps(proofSteps, headers, sortableUserOpts);' . "\n";
 
-        // Add headers
-        $code .= 'add_headers(blockUserOpts);' . "\n";
 
         // Link up to STACK inputs.
         if (count($inputs) > 0) {
@@ -206,6 +204,7 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
         $code .= 'const stackSortable = new stack_sortable(proofSteps, "availableList", "usedList", id, sortableUserOpts, "' .
                 $clone .'");' . "\n";
         // Generate the two lists in HTML.
+        $code .= 'stackSortable.add_headers(headers);' . "\n";
         $code .= 'stackSortable.generate_used();' . "\n";
         $code .= 'stackSortable.generate_available();' . "\n";