- Added DeesDashboardgrid class for managing a grid of dashboard widgets. - Implemented widget dragging and resizing capabilities. - Introduced layout management with collision detection and margin resolution. - Created styles for grid layout, widget appearance, and animations. - Added support for customizable margins, cell height, and grid lines. - Included methods for adding, removing, and updating widgets dynamically. - Implemented context menu for widget actions and keyboard navigation support. - Established a responsive design with breakpoint handling for different layouts.
30 lines
772 B
TypeScript
30 lines
772 B
TypeScript
import type { DashboardWidget } from './types.js';
|
|
import { DeesContextmenu } from '../dees-contextmenu.js';
|
|
import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
|
|
import * as plugins from '../00plugins.js';
|
|
|
|
export interface WidgetContextMenuOptions {
|
|
widget: DashboardWidget;
|
|
host: DeesDashboardgrid;
|
|
event: MouseEvent;
|
|
}
|
|
|
|
export const openWidgetContextMenu = ({
|
|
widget,
|
|
host,
|
|
event,
|
|
}: WidgetContextMenuOptions) => {
|
|
const items: (plugins.tsclass.website.IMenuItem | { divider: true })[] = [
|
|
{
|
|
name: 'Delete tile',
|
|
iconName: 'lucide:trash2' as any,
|
|
action: async () => {
|
|
host.removeWidget(widget.id);
|
|
return null;
|
|
},
|
|
},
|
|
];
|
|
|
|
DeesContextmenu.openContextMenuWithOptions(event, items as any);
|
|
};
|