Convert Left Click to Right Click in TMS WebCore

How to convert left click to right click in TMS WebCore?

Sometimes you want a left click to trigger the same behavior as a right click - typically to show a context menu. This is useful for mobile users or to make context menus more discoverable. Here's how to do it in TMS WebCore.

The Code

class procedure THtml.Left_To_Right_Click (const AElementId : string);
begin
  asm
    const targetElement = document.getElementById(AElementId);
    if (targetElement) {
      targetElement.addEventListener('click', function(event) {
        // Prevent default left-click behavior
        event.preventDefault();

        // Create a right-click event
        const rightClick = new MouseEvent('contextmenu', {
          bubbles: true,
          cancelable: true,
          view: window,
          button: 2,   // 2 is right button
          buttons: 2,  // Secondary button mask
          clientX: event.clientX,
          clientY: event.clientY
        });

        // Dispatch the right-click event
        targetElement.dispatchEvent(rightClick);
      });
    }
  end;
end;

How to Use It

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  // Convert left clicks on a button to right clicks
  THtml.Left_To_Right_Click('MyButton');
  
  // Or for any element with an ID
  THtml.Left_To_Right_Click('MyDiv');
end;

What This Does

When a user left-clicks the specified element:

1. The default left-click action is prevented
2. A new right-click (contextmenu) event is created
3. The event is dispatched to the same element
4. The browser's default context menu appears

Showing a Custom Context Menu Instead

If you want to show your own menu instead of the browser's default, add a contextmenu handler:

class procedure THtml.Setup_Custom_Menu (const AElementId : string);
begin
  asm
    const targetElement = document.getElementById(AElementId);
    if (targetElement) {
      // Convert left click to right click
      targetElement.addEventListener('click', function(event) {
        event.preventDefault();
        const rightClick = new MouseEvent('contextmenu', {
          bubbles: true,
          cancelable: true,
          view: window,
          button: 2,
          buttons: 2,
          clientX: event.clientX,
          clientY: event.clientY
        });
        targetElement.dispatchEvent(rightClick);
      });
      
      // Handle the right-click with custom menu
      targetElement.addEventListener('contextmenu', function(event) {
        event.preventDefault(); // Stop browser menu
        
        // Show your custom menu here
        // For example, show a TWebPopupMenu
        pas.Unit1.Form1.ShowCustomMenu(event.clientX, event.clientY);
      });
    }
  end;
end;

Practical Example: Grid with Context Menu

// In your form unit
type
  TForm1 = class(TWebForm)
    WebStringGrid1: TWebStringGrid;
    PopupMenu1: TWebPopupMenu;
    procedure WebFormCreate(Sender: TObject);
  public
    procedure ShowGridMenu(X, Y: Integer);
  end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  // Make left click trigger context menu on grid
  THtml.Setup_Grid_Menu('WebStringGrid1');
end;

procedure TForm1.ShowGridMenu(X, Y: Integer);
begin
  // Position and show your popup menu
  PopupMenu1.Popup(X, Y);
end;

Why Use This?

• Mobile compatibility - Phones don't have right-click
• Discoverability - Users might not know to right-click
• Accessibility - Easier for users with disabilities
• Consistency - Same behavior across devices

Important Notes

• This shows the browser's default context menu unless you prevent it
• To show a custom menu, add a contextmenu event handler that calls preventDefault()
• The element must have an ID set in the Object Inspector
• Call this after the element is rendered (WebFormCreate or later)

Button Properties for Mouse Events

Understanding the button property values:

• 0 - Left button (main)
• 1 - Middle button (wheel)
• 2 - Right button (secondary)
• 3 - Back button
• 4 - Forward button

Alternative: Direct Menu Trigger

If you just want to show a TWebPopupMenu on left click without simulating right click:

procedure TForm1.WebButton1Click(Sender: TObject);
var
  MousePos: TPoint;
begin
  // Get current mouse position
  MousePos := Mouse.CursorPos;
  
  // Show popup menu
  PopupMenu1.Popup(MousePos.X, MousePos.Y);
end;

Browser Compatibility

This technique works in all modern browsers:

• Chrome/Edge (Chromium)
• Firefox
• Safari
• Mobile browsers (iOS Safari, Chrome Mobile)