Customising Context Menus
The following context menus can be customised:
-
file_options
controllers:- Map view:
ditamap_viewer_controller
- Repository Panel:
repository_panel_controller
- Favorites Panel:
collection_tree_controller
- File Properties Reference Links:
file_references_links_controller
- Repository Search Panel:
repository_search_controller
- Subject Scheme Panel:
subject_scheme_tree_controller
- Map view:
-
folder_options
controllers:- Repository Panel:
repository_panel_controller
- Favorites Panel:
collection_tree_controller
- Repository Panel:
-
collection_options
controllers:- Favorites Panel:
collection_tree_controller
- Favorites Panel:
-
map_view_options
controllers:- Map view:
ditamap_viewer_controller
- Map view:
-
baseline_panel_menu
controllers:- Baseline Panel:
baseline_panel
- Baseline Panel:
-
preset_item_menu
controllers:- Preset Panel:
preset_panel
- Preset Panel:
You can also create your own context menu by defining a new unique id.
Now each context menu has a controller id
associated with it. This controller handles the on-event
functionality for the various context menu options
Let us take an example to understand
const loadDitaFile = (filePath, uuid) =>{
return $.ajax({
type: 'POST',
url: '/bin/referencelistener',
data: {
operation: 'getdita',
path: filePath,
type: uuid ? 'UUID' : 'PATH',
cache: false,
},
})
}
const fileOptions = {
id: "file_options",
contextMenuWidget: "repository_panel",
view: {
items: [
{
component: "div",
target: {
key:"displayName",value: "Delete",
viewState: VIEW_STATE.REPLACE
}
},
{
component: "div",
target: {
key:"displayName",value: "Edit",
viewState: VIEW_STATE.REPLACE
}
},
{
"displayName": "Download",
"data": {
"eventid": "downloadFile"
},
"icon": "downloadFromCloud",
"class": "menu-separator",
target: {
key:"displayName",value: "Duplicate",
viewState: VIEW_STATE.REPLACE
}
},
]
},
controller: {
downloadFile(){
const path = this.getValue('selectedItems')[0].path
loadDitaFile(path).then((file) => {
function download_file(name, contents) {
const mime_type = "text/plain";
const blob = new Blob([contents], {type: mime_type});
const dlink = document.createElement('a');
dlink.download = name;
dlink.href = window.URL.createObjectURL(blob);
dlink.onclick = function() {
// revokeObjectURL needs a delay to work properly
const that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
download_file(path,file.xml)
});
}
}
}
Now let us understand what this code is doing.
id
is used to identify the context menu we want to customise.contextMenuWidget
is used to define thewidget id
or thecomponent
which calls the context menu and handles theevents
.
The rest of it remains the same, whereby view
is used to define the items, target
identifies where to replace, append or prepend the option and the contextMenuWidget
controller handles the on-click
events.
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178