core/help/help.component.ts
A component which shows a context help in the action bar.
<c8y-help src="/users-guide/cockpit/#dashboards"></c8y-help>| selector | c8y-help |
| templateUrl | ./help.component.html |
Properties |
Methods |
Inputs |
| icon |
Type : any
|
|
An 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 : any
|
Default value : Infinity
|
|
The priority where the help icon should be shown in the 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 :
any
|
| 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 |
Type : boolean
|
Default value : false
|
|
Indicates if a warning should be shown. |
| title |
Type : string
|
Default value : ''
|
|
An title. Set in open by passing the source. |
<c8y-action-bar-item
[placement]="'right'"
itemClass="pull-right"
[priority]="priority"
*ngIf="!!(helpService.contextHelp | async)"
>
<button
class="btn btn-help"
[title]="'Open help' | translate"
(click)="toggle()"
[attr.aria-expanded]="!isCollapsed"
aria-controls="collapseHelp"
c8yProductExperience
[actionName]="isCollapsed ? 'helpOpened' : 'helpClosed'"
[actionData]="{ src: src }"
>
<i [c8yIcon]="'question-circle-o'" class="text-info"></i>
</button>
</c8y-action-bar-item>
<div
id="collapseHelp"
class="c8y-help-drawer"
[collapse]="isCollapsed"
[isAnimated]="true"
(collapsed)="onCollapsed()"
>
<div [ngClass]="{ 'c8y-help-drawer-block': isInit }" #docOutlet>
<div *ngIf="isLoading">
<c8y-loading></c8y-loading>
</div>
<div *ngIf="!isLoading">
<div class="d-flex">
<i
[c8yIcon]="!hasError ? icon : 'unlink'"
[ngClass]="{ 'text-warning': hasError, 'text-muted': !hasError }"
class="c8y-icon-duocolor icon-48"
></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"
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 id="helpContent" class="help-content" [innerHTML]="sectionContent"></div>
</div>
<div class="p-l-16 p-t-16 flex-grow" *ngIf="hasError">
<h4 class="text-bold m-b-16" translate>Sorry, that didn't work</h4>
<div class="help-content">
<p translate>The content couldn't be loaded.</p>
</div>
</div>
</div>
</div>
</div>
<div class="c8y-help-drawer-footer" *ngIf="!isLoading && !hasError">
<button
class="btn btn-default"
(click)="toggle()"
[title]="'Close help' | translate"
[attr.aria-expanded]="!isCollapsed"
aria-controls="collapseHelp"
translate
>
Close
</button>
<a
href="{{ hasError ? getUrl() : getUrl(src) }}"
class="btn btn-primary"
target="_blank"
rel="noopener noreferrer"
>
<span translate *ngIf="!hasError"> Open the <span>User guide`KEEP_ORIGINAL`</span> </span>
<span translate *ngIf="hasError"> Check the <span>User guide`KEEP_ORIGINAL`</span> </span>
</a>
</div>
</div>