restore recipe on refresh

This commit is contained in:
Robin Scholtes 2023-08-02 17:38:52 +12:00
parent 21ed26e104
commit 4a07d52230
11 changed files with 215 additions and 217 deletions

View file

@ -37,7 +37,7 @@ export class COperationList extends HTMLElement {
ul.classList.add("op-list");
this.opNames.forEach((opName => {
const li = new COperationLi(
const cOpLi = new COperationLi(
this.app,
opName,
{
@ -47,41 +47,91 @@ export class COperationList extends HTMLElement {
this.includeStarIcon
);
ul.appendChild(li);
ul.appendChild(cOpLi);
}))
if (this.isSortable) {
const sortableList = Sortable.create(ul, {
group: "sorting",
sort: true,
draggable: "c-operation-li",
onFilter: function (e) {
const el = sortableList.closest(e.item);
if (el && el.parentNode) {
$(el).popover("dispose");
el.parentNode.removeChild(el);
}
},
onEnd: function(e) {
if (this.removeIntent) {
$(e.item).popover("dispose");
e.item.remove();
}
}.bind(this),
});
this.createSortableList(ul);
} else if (!this.app.isMobileView() && this.isCloneable) {
const cloneableList = Sortable.create(ul, {
group: {
name: "recipe",
pull: "clone",
},
draggable: "c-operation-li",
sort: false
})
this.createCloneableList(ul, "recipe", "rec-list"); // target name and id can be component params if needed to make it reusable
}
this.append(ul);
}
/**
* Create a sortable ( not cloneable ) list
*
* @param { HTMLElement } ul
* */
createSortableList(ul) {
const sortableList = Sortable.create(ul, {
group: "sorting",
sort: true,
draggable: "c-operation-li",
onFilter: function (e) {
const el = sortableList.closest(e.item);
if (el && el.parentNode) {
$(el).popover("dispose");
el.parentNode.removeChild(el);
}
},
onEnd: function(e) {
if (this.app.manager.recipe.removeIntent) {
$(e.item).popover("dispose");
e.item.remove();
}
}.bind(this),
});
}
/**
* Create a cloneable ( not sortable ) list
*
* @param { HTMLElement } ul
* @param { string } targetListName
* @param { string } targetListId
* */
createCloneableList(ul, targetListName, targetListId) {
Sortable.create(ul, {
group: {
name: targetListName,
pull: "clone",
put: false,
},
draggable: "c-operation-li",
sort: false,
setData: function(dataTransfer, dragEl) {
dataTransfer.setData("Text", dragEl.querySelector("li").getAttribute("data-name"));
},
onStart: function(e) {
// Removes popover element and event bindings from the dragged operation but not the
// event bindings from the one left in the operations list. Without manually removing
// these bindings, we cannot re-initialise the popover on the stub operation.
$(e.item)
.popover("dispose")
.removeData("bs.popover")
.off("mouseenter")
.off("mouseleave")
.attr("data-toggle", "popover-disabled");
$(e.clone)
.off(".popover")
.removeData("bs.popover");
},
// @todo: popovers dont display anymore after dragging into recipe list and then hovering the op
onEnd: ({item}) => {
if (item.parentNode.id === targetListId) {
this.app.manager.recipe.addOperation(item.name);
item.remove();
return;
}
if (item.parentNode.id !== targetListId) {
return;
}
}
});
}
}
customElements.define("c-operation-list", COperationList);