fix: Add functionality to move workspace to the end

This commit adds the ability to move a workspace to the end of the workspace list by dragging it to a designated drop target.

The changes include:

- Creation of a new "last position drop target" element that allows dragging a workspace to the end.
- Event listeners for dragover, dragenter, dragleave, and drop events on the drop target element.
- Implementation of `moveWorkspaceToEnd` function to update the workspace positions in storage when a workspace is moved to the end.
- Reorder mode is exited if the panel is closed.
- Updates to the workspace list to include the last position drop target.
This commit is contained in:
Kristijan Ribarić 2024-10-24 20:26:32 +02:00
parent c5971af912
commit 2222d97a99

View file

@ -480,6 +480,59 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}).bind(browser.ZenWorkspaces);
return element;
};
const createLastPositionDropTarget = () => {
const element = browser.document.createXULElement('div');
element.className = 'zen-workspace-last-place-drop-target';
element.addEventListener(
'dragover',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
}
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'dragenter',
function (event) {
if (this.isReorderModeOn(browser) && this.draggedElement) {
element.classList.add('dragover');
}
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'dragleave',
function (event) {
element.classList.remove('dragover');
}.bind(browser.ZenWorkspaces)
);
element.addEventListener(
'drop',
async function (event) {
event.preventDefault();
element.classList.remove('dragover');
if (this.isReorderModeOn(browser)) {
const draggedWorkspaceId = event.dataTransfer.getData('text/plain');
await this.moveWorkspaceToEnd(draggedWorkspaceId);
await this._propagateWorkspaceData();
if (this.draggedElement) {
this.draggedElement.classList.remove('dragging');
this.draggedElement = null;
}
}
}.bind(browser.ZenWorkspaces)
);
return element;
};
browser.ZenWorkspaces._workspaceCache = null;
let workspaces = await browser.ZenWorkspaces._workspaces();
workspaceList.innerHTML = '';
@ -495,12 +548,32 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
let workspaceElement = createWorkspaceElement(workspace);
workspaceList.appendChild(workspaceElement);
}
workspaceList.appendChild(createLastPositionDropTarget());
if (!ignoreStrip) {
await browser.ZenWorkspaces._expandWorkspacesStrip(browser);
}
});
}
handlePanelHidden() {
const workspacesList = document.getElementById('PanelUI-zen-workspaces-list');
const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode');
workspacesList?.removeAttribute('reorder-mode');
reorderModeButton?.removeAttribute('active');
}
async moveWorkspaceToEnd(draggedWorkspaceId) {
const workspaces = (await this._workspaces()).workspaces;
const draggedIndex = workspaces.findIndex((w) => w.uuid === draggedWorkspaceId);
const draggedWorkspace = workspaces.splice(draggedIndex, 1)[0];
workspaces.push(draggedWorkspace);
await ZenWorkspacesStorage.updateWorkspacePositions(workspaces);
}
isReorderModeOn(browser) {
return browser.document.getElementById('PanelUI-zen-workspaces-list').getAttribute('reorder-mode') === 'true';
}