Table of Contents

Show Dialog in Template

// Example, with own buttons in component
<span onclick="dialog:my-dialog">Show a dialog</span>

// Example, with OK button to close
<span onclick="dialog:my-dialog/ok">Show a dialog</span>

Show Menu in Template

Use Attribute to Show Menu

// Example
<span onclick="menu:my-menu">Foobar</span>
<span oncontextmenu="menu:my-menu">Barfoo</span>

Example Menu File

// my-menu.js
export default [
    ["IC_RELOAD_APP", "reload_app"],
    ["IC_COMMUNITIES", null,[
        ["IC_NEWS", "show_news_site"],
        ["IC_GROUP", "show_group_site"],
        ["IC_FEEDBACK", "show_feedb_site"]
    ]],
    ["IC_ABOUT","show_about"]
];
// EOF

Show Menu in Code

// See Sobuuk source code for details
ui.show_menu(Ev,Ele,Menu);

Params to ui.show_menu:

• Ev: The event in JS, usually click or contextmenu
• Ele: Element to show menu next to, use null value for contextmenu case to use mouse coords
  • Non-null use case: Triple-dot menu (mobile friendly)
  • Null use case: Context menu (not mobile friendly, avoid context menus)
• Menu: Array of menu items, each item is also array, and should have 3 values
  • Required. First value: Text to show
  • Optional. Second value: Function to call, put as null if having children
  • Optional. Third value: The array of children

Show Menu Example

Ctx_Span.on("click",Ev=>{
    ui.show_menu(Ev,Ctx_Span,[
        [__h("IC_ADD_FOLDER"), this.add_folder],
        [__h("IC_RENAME_COLLECTION"), this.rename_coll],
        [__h("IC_ADD_TO_PINS"), this.add_coll_to_pins],
        [__h("IC_REMOVE_FROM_PINS"), this.rem_coll_from_pins],
        ["---sep---"],
        ["Test with children",null,[
		        ["Child 1"],
		        ["Child 2"]
        ]],
        [__h("IC_DELETE_COLLECTION"), this.del_coll],
    ]); 
});

Ctx_Span.on("contextmenu",Ev=>{
		ui.show_menu(Ev,null,[
				["Item 1"],
				["Item 2"],
				["Item 3"],
		]);
});