Context menu UI built with HTML and CSS only

[Alexander Sviridenkov 360]

Code for each item is relatively simple. For example list type selector consists of two classes, first for drop down panel:

THtEditContextList = class(THtEditContextItem)
public
  function Render: string; override;
end;
  
function THtEditContextList.Render: string;

procedure Add(const ListType, ListTag: string);
begin
  Result := Result + Format('<div class="eclistbox fade" listtype="%s"><%s style="list-style-type: %s"><li>———</li><li>———</li><li>———</li></ol></div>',
    [ListType, ListTag, ListType]);
end;

begin
  Result := '';
  Add('none', 'ul');
  Add('circle', 'ul');
  Add('disc', 'ul');
  Add('square', 'ul');
  Add('decimal', 'ol');
  Add('lower-alpha', 'ol');
  Add('lower-roman', 'ol');
  Add('upper-alpha', 'ol');
  Add('upper-roman', 'ol');
end;

And second for the button:

THtEditContextListStyle = class(THtEditContextLiveItem)
public
  function Render: string; override;
  procedure OnSubmenuElementEnter(Sender: TElement); override;
  procedure OnSubmenuClick(const Sender: TElement; Button: TMouseButton; Shift: TShiftState); override;
end;

procedure THtEditContextListStyle.OnSubmenuClick(const Sender: TElement;
  Button: TMouseButton; Shift: TShiftState);
begin
  OnSubmenuElementEnter(Sender);
end;

procedure THtEditContextListStyle.OnSubmenuElementEnter(Sender: TElement);
begin
  if Sender['listtype'] <> '' then
  begin
    if Sender.NodebyName('ol') <> nil then
      Editor.SetListStyle('ol', Sender['listtype'])
    else
      Editor.SetListStyle('ul', Sender['listtype']);
    Editor.Repaint;
  end;
end;

function THtEditContextListStyle.Render: string;
begin
  id := 'list';
  Result := '<div id="list" class="ecbutton down fade"><div class="faicon">&#61643;</div>&nbsp;</div>';
  FSubmenuClass := THtEditContextList;
  FDefaultSubmenuWidth := 300;
end;

 

Code for building menu:

 

    ContextPanel.Add(THtEditContexBold).Add(THtEditContextItalic).Add(THtEditContextUnderline).
      Add(THtEditContexStrike).Add(THtEditContexSpace).Add(THtEditContextTextColor).Add(THtEditContextBGColor).
      Add(THtEditContextFontSize).Add(THtEditContextFont).
      Add(THtEditContexLineBreak).Add(THtEditContexAlignLeft).Add(THtEditContexAlignCenter).Add(THtEditContexAlignRight).Add(THtEditContexAlignFull)...

 

[Guest]

@Alexander Sviridenkov Wow. The editor "floating menu", is that deep down or can one plug in TActionList(s)/TPopupMenu(s)? Could i even intercept with TMenu decendants?

[Alexander Sviridenkov 360]

7 minutes ago, Dany Marmur said:

@Alexander Sviridenkov Wow. The editor "floating menu", is that deep down or can one plug in TActionList(s)/TPopupMenu(s)? Could i even intercept with TMenu decendants?

Class hierarchy is independend from VCL/FMX menus. Thereby menus are cross platform and HDPI ready. You can add any own item classes, but they shoud return HTML to render in menu and follow some rules.

[Guest]

I see. Thanks. Really itching to incorporate your stuff, but my clients and my "products" are taking a different route for the future. However, a specific budgeted request might give me the opportunity. I'm rooting for your stuff and keep having an "eye out".

[Rollo62 539]

@Alexander Sviridenkov

I use and like your library, although I must say this is sometimes not easy to figure out how simple, obvious tasks are intended to operate in runtime and designtime.
Please provide more of such samples, to get clear about the intended use and possibilities.
 

[Alexander Sviridenkov 360]

On 9/13/2019 at 8:19 AM, Rollo62 said:

@Alexander Sviridenkov

I use and like your library, although I must say this is sometimes not easy to figure out how simple, obvious tasks are intended to operate in runtime and designtime.
Please provide more of such samples, to get clear about the intended use and possibilities.
 

Thank you, I will publish more examples after an upcoming release.