core/help/help.component.ts
A component which shows a context help in the action bar.
Example :<c8y-help src="/docs/cockpit/working-with-dashboards/#working-with-dashboards"></c8y-help>| selector | c8y-help |
| templateUrl | ./help.component.html |
Properties |
Methods |
Inputs |
| icon |
Type : any
|
|
A custom icon. If not set, the navigator icon is resolved |
| isCollapsed |
Type : boolean
|
Default value : true
|
|
Indicates if the help dialog is collapsed. |
| priority |
Type : number
|
Default value : -Infinity
|
|
The priority where the help icon should be shown in the action bar. "-Infinity" value means that priority of this item is the lowest possible, so it will be placed at the right edge of action bar. |
| src |
Type : string
|
Default value : ''
|
|
The source of the documentation. Used to link to the documentation as well as to parse the source to display. |
| close |
close()
|
|
Closes the help dialog.
Returns :
void
|
| getUrl | |||||||||||||||
getUrl(src: string, index)
|
|||||||||||||||
|
Builds the URL based on the src. The Base URL can be set in the application options docBaseUrl.
Parameters :
Returns :
string
|
| open |
open()
|
|
Opens the help dialog.
Returns :
void
|
| toggle |
toggle()
|
|
Toggles the visibility of the help dialog.
Returns :
void
|
| hasError |
Default value : false
|
|
Indicates if the component failed loading the source. |
| isLoading |
Default value : true
|
|
Indicates if the component is loading. |
| sectionContent |
Type : string
|
Default value : ''
|
|
The section content in the doc which is going to be displayed. |
| sectionHeading |
Type : string
|
Default value : ''
|
|
The section heading in the doc which is going to be displayed. |
| showLangWarning |
Default value : false
|
|
Indicates if a warning should be shown. |
| title |
Type : string
|
Default value : ''
|
|
A title. Set in open by passing the source. |
<c8y-action-bar-item
[placement]="'right'"
itemClass="pull-right m-l-md-8"
[priority]="priority"
*ngIf="!!(helpService.contextHelp | async)"
>
<button
class="btn-help hidden-xs"
[attr.aria-label]="'About this page' | translate"
tooltip="{{ 'About this page' | translate }}"
placement="left"
container="body"
aria-controls="collapseHelp"
[attr.aria-expanded]="!isCollapsed"
type="button"
data-cy="help--help-btn"
[delay]="750"
(click)="toggle()"
c8yProductExperience
[actionName]="isCollapsed ? 'helpOpened' : 'helpClosed'"
[actionData]="{ src: src }"
></button>
<button
class="btn btn-link visible-xs"
title="{{ 'About this page' | translate }}"
aria-controls="collapseHelp"
[attr.aria-expanded]="!isCollapsed"
type="button"
(click)="toggle()"
c8yProductExperience
[actionName]="isCollapsed ? 'helpOpened' : 'helpClosed'"
[actionData]="{ src: src }"
>
<i c8yIcon="help-outline" class="text-info"></i>
{{ 'About this page' | translate }}
</button>
</c8y-action-bar-item>
<div
class="c8y-help-drawer"
id="collapseHelp"
[collapse]="isCollapsed"
[isAnimated]="true"
(collapsed)="onCollapsed()"
>
<div
[ngClass]="{ 'c8y-help-drawer-block': isInit }"
#docOutlet
data-cy="c8y-help--c8y-help-drawer-block"
>
<div *ngIf="isLoading">
<c8y-loading></c8y-loading>
</div>
<div *ngIf="!isLoading">
<div class="d-flex">
<i
class="c8y-icon-duocolor icon-48"
[c8yIcon]="!hasError ? icon : 'unlink'"
[ngClass]="{ 'text-warning': hasError, 'text-muted': !hasError }"
></i>
<div
class="p-l-16 flex-grow"
*ngIf="!hasError"
>
<div
class="alert alert-info m-b-16"
*ngIf="
!helpService.isSupportedLanguage() &&
!showLangWarning &&
!helpService.isWarningAlertViewed
"
>
<button
class="close"
[attr.aria-label]="'Close' | translate"
type="button"
(click)="
showLangWarning = !showLangWarning;
helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed
"
>
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<p>
{{ 'Help content is only available in English.' | translate }}
</p>
</div>
<h4 class="text-bold text-primary p-t-16 m-b-16">
{{ title }}
</h4>
<div
class="help-content"
id="helpContent"
[innerHTML]="sectionContent"
data-cy="help--c8y-help-content"
></div>
</div>
<div
class="p-l-16 p-t-16 flex-grow"
*ngIf="hasError"
>
<h4
class="text-bold m-b-16"
translate
>
Content couldn't be loaded.
</h4>
<div class="help-content">
<p translate>Check internet connection or reload page.</p>
</div>
</div>
</div>
</div>
</div>
<div
class="c8y-help-drawer-footer animated fadeIn"
style="animation-delay: 0.35s"
*ngIf="!isLoading && !hasError"
data-cy="c8y-help--c8y-help-drawer-footer"
>
<button
class="btn btn-default"
[title]="'Close help' | translate"
aria-controls="collapseHelp"
[attr.aria-expanded]="!isCollapsed"
type="button"
(click)="toggle()"
translate
>
Close
</button>
<a
class="btn btn-primary"
href="{{ hasError ? getUrl() : getUrl(src) }}"
target="_blank"
data-cy="c8y-help--user-guide"
rel="noopener noreferrer"
>
<span
translate
*ngIf="!hasError"
>
Open the
<span>user documentation</span>
</span>
<span
translate
*ngIf="hasError"
>
Check the
<span>user documentation</span>
</span>
</a>
</div>
</div>