Skip to content
Permalink
Browse files

Command palette: Git actions (#2908)

* enumerateToolbarActions

* command prefix

* docs
  • Loading branch information...
sbcgua authored and larshp committed Sep 10, 2019
1 parent 780856c commit 739b14ab6a6dc53ec9ceba61cfefcb8f01c22c29
@@ -0,0 +1,56 @@
---
title: UI - Java script
order: 93
---

This doc covers java script specifics in abapGit UI. See also the [UI - HTML pages](./developing-ui.html).

## General

abapGit UI contains JS code. Some of dynamic features relate on it e.g. keyboard navigation. The JS code is located in `ui/zabapgit_js_common.w3mi.data.js` - the recommended way to modify it described in "Recommended asset development flow" section of [UI - CSS and assets](./developing-ui-css.html).

As SAP GUI uses Internet Explorer component to render HTML the JS code must be optimized for IE11 (and use the features available in it). Although some polyfills are available (and more can be added) at the beginning of the code (like `String.includes`).

The pull request CI check includes a run of eslint, so new code should confirm to the rules defined for the abapGit repository.

## Components

The JS library contains several components which can be reused in different places.

### Command Palette

To add a command palette add the following code in the `script` method of the page.

```abap
ro_html->add( 'var gCommandPalette = new CommandPalette(enumerateFn, {' ).
ro_html->add( ' toggleKey: "F1",' ).
ro_html->add( ' hotkeyDescription: "Command ..."' ).
ro_html->add( '});' ).
```

where:
- `enumerateFn` is a function that returns list of commands in the form of array of
```js
{
action: "go_home", // sapevent action or js function
iconClass: "icon icon-star", // class for item icon, OPTIONAL !!!
title: "Go home" // title of the command
}
```
- `toggleKey` is a key to toggle the palette. `"^"` at the beginning requires `Ctrl` (`"^g" = Ctrl+g` )
- `hotkeyDescription` is the description which is a) added to the shortkey help popup b) used as placeholder in the command palette

See example of enumerators - `enumerateToolbarActions` and `enumerateTocAllRepos`.

### to do

- `debugOutput`
- `submitSapeventForm`
- `setInitialFocus`
- `setInitialFocusWithQuerySelector`
- `submitFormById`
- `findStyleSheetByName`
- `getIndocStyleSheet`
- `toggleDisplay`
- `Hotkeys.addHotkeyToHelpSheet`
- ...
@@ -3,7 +3,9 @@ title: UI - HTML pages
order: 91
---

This doc covers page creation, html rendering and event handling. See also [UI - CSS and assets](./developing-ui-css.html).
This doc covers page creation, html rendering and event handling.
- See also [UI - CSS and assets](./developing-ui-css.html).
- See also [UI - Java script](./developing-ui-js.html).

## TL;DR

@@ -0,0 +1,30 @@
---
title: UI features
category: getting-started
order: 40
---

abapGit UI has several unobvious but convenient features

## Command palettes

Command palettes is a popular UI control available in modern editors like Sublime, VSCode, Atom and etc - this is a control called usually by `Ctrl+p` or `F1` combinations.

![command palette example](img/ui-command-palette.png)

Command palettes are available:

- in the main page (repository overview), on `F1` key, to call a command from toolbars in the screen (new repo, pull, state, advanced commands ...)
- in the main page (repository overview), on `F2` key, to go to arbitrary installed repo instead of choosing it from favorites or full list
- *todo - at diff page*

## To do

- keyboard navigation
- keyboard shortcuts
- news ??
- repo list page (it is unobvious that it exists)
- stage file-by-file selection ?
- stage patch
- main page repo list settings (files only ...)
- ...
Binary file not shown.
@@ -1688,3 +1688,39 @@ function enumerateTocAllRepos() {

return items;
}

function enumerateToolbarActions() {

var items = [];
function processUL(ulNode, prefix) {
for (var i = 0; i < ulNode.children.length; i++) {
var item = ulNode.children[i];
if (item.nodeName !== "LI") continue; // unexpected node
if (item.children.length >=2 && item.children[1].nodeName === "UL") {
// submenu detected
processUL(item.children[1], item.children[0].innerText);
} else if (item.firstElementChild && item.firstElementChild.nodeName === "A") {
var anchor = item.firstElementChild;
if (anchor.href && anchor.href !== "#") items.push([anchor, prefix]);
}
}
}

var toolbarRoot = document.getElementById("toolbar-main");
if (toolbarRoot && toolbarRoot.nodeName === "UL") processUL(toolbarRoot);
toolbarRoot = document.getElementById("toolbar-repo");
if (toolbarRoot && toolbarRoot.nodeName === "UL") processUL(toolbarRoot);
// Add more toolbars ?
if (items.length === 0) return;

items = items.map(function(item) {
var anchor = item[0];
var prefix = item[1];
return {
action: anchor.href.replace("sapevent:", ""),
title: (prefix ? prefix + ": " : "") + anchor.innerText
};
});

return items;
}
@@ -385,10 +385,17 @@ CLASS ZCL_ABAPGIT_GUI_PAGE IMPLEMENTATION.

link_hints( ro_html ).
insert_hotkeys_to_page( ro_html ).

ro_html->add( 'var gGoRepoPalette = new CommandPalette(enumerateTocAllRepos, {' ).
ro_html->add( ' toggleKey: "F2",' ).
ro_html->add( ' hotkeyDescription: "Go to repo ..."' ).
ro_html->add( '});' ).

ro_html->add( 'var gCommandPalette = new CommandPalette(enumerateToolbarActions, {' ).
ro_html->add( ' toggleKey: "F1",' ).
ro_html->add( ' hotkeyDescription: "Command ..."' ).
ro_html->add( '});' ).

ENDMETHOD.


0 comments on commit 739b14a

Please sign in to comment.
You can’t perform that action at this time.