Kontextmenüs anpassen
Die folgenden Kontextmenüs können angepasst werden:
-
file_options
Controller:- Kartenansicht:
ditamap_viewer_controller - Repository-Bedienfeld:
repository_panel_controller - Bedienfeld „Favoriten“:
collection_tree_controller - Referenzlinks für Dateieigenschaften:
file_references_links_controller - Repository-Suchbereich:
repository_search_controller - Bedienfeld „Betreff-Schema“:
subject_scheme_tree_controller
- Kartenansicht:
-
folder_options
Controller:- Repository-Bedienfeld:
repository_panel_controller - Bedienfeld „Favoriten“:
collection_tree_controller
- Repository-Bedienfeld:
-
collection_options
Controller:- Bedienfeld „Favoriten“:
collection_tree_controller
- Bedienfeld „Favoriten“:
-
map_view_options
Controller:- Kartenansicht:
ditamap_viewer_controller
- Kartenansicht:
-
baseline_panel_menu
Controller:- Baseline-Bedienfeld:
baseline_panel
- Baseline-Bedienfeld:
-
preset_item_menu
Controller:- Voreinstellungsfenster:
preset_panel
- Voreinstellungsfenster:
Sie können auch ein eigenes Kontextmenü erstellen, indem Sie eine neue eindeutige ID definieren.
Nun ist jedem Kontextmenü ein controller id zugeordnet. Dieser Controller übernimmt die on-event Funktionen für die verschiedenen Kontextmenüoptionen
Nehmen wir ein Beispiel, um das zu verstehen
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)
});
}
}
}
Lassen Sie uns nun verstehen, was dieser Code tut.
idwird verwendet, um das Kontextmenü zu identifizieren, das angepasst werden soll.contextMenuWidgetwird verwendet, um diewidget idoder diecomponentzu definieren, die das Kontextmenü aufruft und dieeventsverarbeitet.
Der Rest bleibt gleich, wobei view verwendet wird, um die Elemente zu definieren, target angibt, wo die Option ersetzt, angehängt oder vorangestellt werden soll, und der contextMenuWidget-Controller die on-click behandelt.