From 64074e37fcb44b182ad0c690a5eb99dbb08acfdd Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Tue, 24 Oct 2023 14:18:03 +0200 Subject: [PATCH] fix(core): update --- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-chips.demo.ts | 60 +++++++++++++++++------------ ts_web/elements/dees-chips.ts | 3 +- ts_web/elements/dees-contextmenu.ts | 46 +++++++++++++++++++++- ts_web/elements/dees-table.ts | 23 ++++++----- 5 files changed, 96 insertions(+), 38 deletions(-) diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 467038a..2aae417 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.228', + version: '1.0.229', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-chips.demo.ts b/ts_web/elements/dees-chips.demo.ts index 86bec92..235f955 100644 --- a/ts_web/elements/dees-chips.demo.ts +++ b/ts_web/elements/dees-chips.demo.ts @@ -1,28 +1,40 @@ import { html } from '@design.estate/dees-element'; export const demoFunc = () => html` - - - + +
+ + + +
`; diff --git a/ts_web/elements/dees-chips.ts b/ts_web/elements/dees-chips.ts index d6a1bd6..6f7af50 100644 --- a/ts_web/elements/dees-chips.ts +++ b/ts_web/elements/dees-chips.ts @@ -70,9 +70,10 @@ export class DeesChips extends DeesElement { color: #fff; border-radius: 40px; margin-right: 4px; - margin-bottom: 8px; + margin-bottom: 4px; position: relative; overflow: hidden; + box-shadow: 0px 1px 2px rgba(0,0,0,0.3); } .chip:hover { diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts index 2df56ff..bffcd1d 100644 --- a/ts_web/elements/dees-contextmenu.ts +++ b/ts_web/elements/dees-contextmenu.ts @@ -27,7 +27,42 @@ export class DeesContextmenu extends DeesElement { public static demo = demoFunc // STATIC + // This will store all the accumulated menu items + public static contextMenuDeactivated = false; + public static accumulatedMenuItems: plugins.tsclass.website.IMenuItem[] = []; + + // Add a global event listener for the right-click context menu + public static initializeGlobalListener() { + document.addEventListener('contextmenu', (event: MouseEvent) => { + if (this.contextMenuDeactivated) { + return; + } + event.preventDefault(); + + // Get the target element of the right-click + let target: EventTarget | null = event.target; + + // Clear previously accumulated items + DeesContextmenu.accumulatedMenuItems = []; + + // Traverse up the DOM tree to accumulate menu items + while (target) { + if ((target as any).getContextMenuItems) { + DeesContextmenu.accumulatedMenuItems.push(...(target as any).getContextMenuItems()); + } + target = (target as Node).parentNode; + } + + // Open the context menu with the accumulated items + DeesContextmenu.openContextMenuWithOptions(event, DeesContextmenu.accumulatedMenuItems); + }); + } + + // allows opening of a contextmenu with options public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) { + if (this.contextMenuDeactivated) { + return; + } eventArg.preventDefault(); eventArg.stopPropagation(); const contextMenu = new DeesContextmenu(); @@ -49,6 +84,7 @@ export class DeesContextmenu extends DeesElement { contextMenu.style.transform = 'scale(1,1)'; } + // INSTANCE @property({ type: Array, }) @@ -59,6 +95,9 @@ export class DeesContextmenu extends DeesElement { super(); } + /** + * STATIC STYLES + */ public static styles = [ cssManager.defaultStyles, css` @@ -115,10 +154,11 @@ export class DeesContextmenu extends DeesElement { })} ${this.menuItems.length === 0 ? html`
{ - alert('No menu items...') + DeesContextmenu.contextMenuDeactivated = true; + this.destroy(); }}> No menu item present... + >Deactivate Contextmenu globally.
` : html``} @@ -144,3 +184,5 @@ export class DeesContextmenu extends DeesElement { this.parentElement.removeChild(this); } } + +DeesContextmenu.initializeGlobalListener(); diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts index 2ae3e7f..90713f8 100644 --- a/ts_web/elements/dees-table.ts +++ b/ts_web/elements/dees-table.ts @@ -61,8 +61,8 @@ export interface ITableAction { } export interface ITableActionDataArg { - item: T, - table: DeesTable, + item: T; + table: DeesTable; } export type TDisplayFunction = (itemArg: T) => object; @@ -396,6 +396,8 @@ export class DeesTable extends DeesElement {
+ + ${this.data.length > 0 @@ -524,10 +526,11 @@ export class DeesTable extends DeesElement { ${this.getActionsForType('inRow').map( (actionArg) => html`
actionArg.actionFunc({ - item: itemArg, - table: this, - })} + @click=${() => + actionArg.actionFunc({ + item: itemArg, + table: this, + })} > ${actionArg.iconName ? html` @@ -584,8 +587,7 @@ export class DeesTable extends DeesElement { `; } - public async firstUpdated() { - } + public async firstUpdated() {} public async updated(changedProperties: Map): Promise { super.updated(changedProperties); @@ -609,7 +611,8 @@ export class DeesTable extends DeesElement { // Get computed width const width = window.getComputedStyle(cell).width; if (cell.textContent.includes('Actions')) { - const neededWidth = this.dataActions.filter(actionArg => actionArg.type.includes('inRow')).length * 35; + const neededWidth = + this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 35; cell.style.width = `${Math.max(neededWidth, 68)}px`; } else { cell.style.width = width; @@ -620,7 +623,7 @@ export class DeesTable extends DeesElement { }); await done.promise; } - } + }; if (cells[cells.length - 1].textContent.includes('Actions')) { await handleColumnByIndex(cells.length - 1, true);