Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docu for modal microfrontends #454

Merged
merged 9 commits into from
Apr 3, 2019
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions client/luigi-client.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,9 @@ export declare interface LinkManager {
* @param {string} path path to be navigated to
* @param {string} sessionId current Luigi **sessionId**
* @param {boolean} preserveView Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as the standard {@link #navigate navigate()} function is used instead of {@link #goBack goBack()}.
* @param {Object} modalSettings opens a microfrontend as a modal with possibility to specify a title and size
* @param {string} modalSettings.title modal title
* @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
* @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size.
* @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty.
* @param {('l'|'m'|'s')} [modalSettings.size=l] size of the modal (optional, default `l`)
* @example
* LuigiClient.linkManager().navigate('/overview')
* LuigiClient.linkManager().navigate('users/groups/stakeholders')
Expand Down Expand Up @@ -197,11 +197,11 @@ export declare interface LinkManager {
withParams: (nodeParams: NodeParams) => this;

/**
* Opens a microfrontend as a modal
* @param {string} path path to be navigated to
* @param {Object} modalSettings settings to customize the modal title and size
* @param {string} modalSettings.title modal title
* @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
* Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is large (`l`), which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.
* @param {string} path navigation path
jesusreal marked this conversation as resolved.
Show resolved Hide resolved
* @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size.
* @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty.
* @param {('l'|'m'|'s')} [modalSettings.size=l] size of the modal (optional, default `l`)
* @example
* LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
*/
Expand Down
16 changes: 8 additions & 8 deletions client/src/luigi-client.js
Original file line number Diff line number Diff line change
Expand Up @@ -250,9 +250,9 @@ const LuigiClient = {
* @param {string} path path to be navigated to
* @param {string} sessionId current Luigi **sessionId**
* @param {boolean} preserveView Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the {@link #goBack goBack()} function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as the standard {@link #navigate navigate()} function is used instead of {@link #goBack goBack()}.
* @param {Object} modalSettings opens a microfrontend as a modal with possibility to specify a title and size
* @param {string} modalSettings.title modal title
* @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
* @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size.
* @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty.
* @param {('l'|'m'|'s')} [modalSettings.size=l] size of the modal
* @example
* LuigiClient.linkManager().navigate('/overview')
* LuigiClient.linkManager().navigate('users/groups/stakeholders')
Expand Down Expand Up @@ -282,11 +282,11 @@ const LuigiClient = {
window.parent.postMessage(navigationOpenMsg, '*');
},
/**
* Opens a microfrontend as a modal
* @param {string} path path to be navigated to
* @param {Object} modalSettings settings to customize the modal title and size
* @param {string} modalSettings.title modal title
* @param {string} modalSettings.size size of the modal (l=large 80% default, m=medium 60%, s=small 40%)
* Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is large (`l`), which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is large (`l`), which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.
* Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is `l`, which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.

* @param {string} path navigation path
* @param {Object} modalSettings opens a view in a modal. Use these settings to configure the modal's title and size.
* @param {string} modalSettings.title modal title. By default, it is the node label. If there is no label, it is left empty.
* @param {('l'|'m'|'s')} [modalSettings.size=l] size of the modal
* @example
* LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
*/
Expand Down
20 changes: 20 additions & 0 deletions docs/luigi-client-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ Navigates to the given path in the application hosted by Luigi. It contains eith
- `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** path to be navigated to
- `sessionId` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** current Luigi **sessionId**
- `preserveView` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Preserve a view by setting it to `true`. It keeps the current view opened in the background and opens the new route in a new frame. Use the [goBack()](#goBack) function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as the standard [navigate()](#navigate) function is used instead of [goBack()](#goBack).
- `modalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** opens a view in a modal. Use these settings to configure the modal's title and size.
- `modalSettings.title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** modal title. By default, it is the node label. If there is no label, it is left empty.
- `modalSettings.size` **(`"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `l`)

#### Examples

Expand All @@ -97,6 +100,23 @@ LuigiClient.linkManager().navigate('users/groups/stakeholders')
LuigiClient.linkManager().navigate('/settings', null, true) // preserve view
```

### openAsModal

Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is large (`l`), which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.

#### Parameters

- `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** navigation path
- `modalSettings` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** opens a view in a modal. Use these settings to configure the modal's title and size.
- `modalSettings.title` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** modal title. By default, it is the node label. If there is no label, it is left empty.
- `modalSettings.size` **(`"l"` \| `"m"` \| `"s"`)** size of the modal (optional, default `l`)

#### Examples

```javascript
LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
```

### fromContext

Sets the current navigation context to that of a specific parent node which has the [navigationContext](navigation-configuration.md) field declared in the navigation configuration. This navigation context is then used by the `navigate` function.
Expand Down