Skip to content
Snippets Groups Projects
Commit c43d6dd7 authored by smmercuri's avatar smmercuri
Browse files

Add delete all button in clone mode

parent 726f41ad
Branches
No related tags found
No related merge requests found
......@@ -379,7 +379,7 @@ export const stack_sortable = class {
* @param {Object} newAvailable - Updated available list.
* @returns {void}
*/
update_state_dblclick(newUsed, newAvailable) {
add_dblclick_listeners(newUsed, newAvailable) {
this.available.addEventListener('dblclick', (e) => {
if (this._double_clickable(e.target)) {
var li = (this.clone === "true") ? e.target.cloneNode(true) : this.available.removeChild(e.target);
......@@ -398,6 +398,16 @@ export const stack_sortable = class {
});
}
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);});
}
_delete_all_from_used() {
const lis = document.querySelectorAll(`#${this.usedId} > .list-group-item`);
lis.forEach(li => {if (!li.matches(".header")) {li.parentNode.removeChild(li);}});
}
/**
* Generates the initial state of used and available items based on the provided proof steps and input ID.
*
......
......@@ -26,8 +26,10 @@ generate_used(){for(const key in this.state.used){let li=document.createElement(
add_headers(headers){this.used.append(this._create_header(headers.used.header,"usedHeader"));this.available.append(this._create_header(headers.available.header,"availableHeader"));}
add_item_to_available(innerHTML){let li=document.createElement("li");li.innerHTML=innerHTML;li.className="list-group-item";this.available.append(li);}
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(this._double_clickable(e.target)){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(this._double_clickable(e.target)){var li=this.used.removeChild(e.target);if(this.clone!=="true"){this.available.insertBefore(li,this.available.children[1]);}
add_dblclick_listeners(newUsed,newAvailable){this.available.addEventListener('dblclick',(e)=>{if(this._double_clickable(e.target)){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(this._double_clickable(e.target)){var li=this.used.removeChild(e.target);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);});}
_delete_all_from_used(){const lis=document.querySelectorAll(`#${this.usedId}>.list-group-item`);lis.forEach(li=>{if(!li.matches(".header")){li.parentNode.removeChild(li);}});}
_generate_state(proofSteps,inputId){let stateStore=document.getElementById(inputId);if(stateStore==null){return{used:[],available:[...Object.keys(proofSteps)]}}
return(stateStore.value&&stateStore.value!="")?JSON.parse(stateStore.value):{used:[],available:[...Object.keys(proofSteps)]};}
_double_clickable(item){return(item.matches(".list-group-item")&&!item.matches(".header"));}
......
......@@ -111,7 +111,7 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
]);
$r->items[] = new MP_List([
new MP_String('script'),
new MP_String(json_encode(['type' => 'text/javascript', 'src' => $js]))
new MP_String(json_encode(['type' => 'module', 'src' => $js]))
]);
// We need to define a size for the inner content.
......@@ -141,6 +141,8 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
if ($clone === 'true') {
$r->items[] = new MP_String('<div class="parsons-button parsons-bin">
<i class="fa fa-trash bin-icon"></i><div class="drop-zone" id="bin"></div></div>');
$r->items[] = new MP_String('<div class="parsons-button" id="delete-all">
<i class="fa fa-times-circle "></i></div>');
}
$r->items[] = new MP_String('<div class="container" id="sortableContainer" style="' . $astyle . '">
......@@ -162,13 +164,13 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
stack_cors_link('stacksortable.min.js') . "';\n";
$r->items[] = new MP_String($importcode);
// Add flip orientation listener to the orientation button
// TODO: automatically set orientation based on device?
$r->items[] = new MP_String('add_orientation_listener("orientation", "usedList", "availableList");' . "\n");
// Add the resize button listener
$r->items[] = new MP_String('document.getElementById("resize").addEventListener(
"click", () => {stack_js.resize_containing_frame("' . $width . '", get_iframe_height() + "px");});' . "\n");
// Add flip orientation listener to the orientation button
// TODO: automatically set orientation based on device?
$r->items[] = new MP_String('add_orientation_listener("orientation", "usedList", "availableList");' . "\n");
// Extract the proof steps from the inner content.
$r->items[] = new MP_String('var proofSteps = ');
......@@ -236,7 +238,10 @@ class stack_cas_castext2_parsons extends stack_cas_castext2_block {
}
// Add double-click events.
$code .= 'stackSortable.update_state_dblclick(sortableUsed, sortableAvailable);' . "\n";
$code .= 'stackSortable.add_dblclick_listeners(sortableUsed, sortableAvailable);' . "\n";
// Add delete-all button events.
$code .= 'stackSortable.add_delete_all_listener("delete-all", sortableUsed, sortableAvailable);' . "\n";
// Typeset MathJax. MathJax 2 uses Queue, whereas 3 works with promises.
$code .= ($mathjaxversion === "2") ?
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment