File

core/help/help.component.ts

Description

A component which shows a context help in the action bar.

<c8y-help src="/users-guide/cockpit/#dashboards"></c8y-help>

Metadata

Index

Properties
Methods
Inputs

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 : 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.

Methods

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 :
Name Type Optional Default value Description
src string No ''

The source of the help on the guide.

index No false

This flag is used to call the index.json content of a guide. For example, "https://www.cumulocity.com/guides/users-guide/cockpit/index.json".

Returns : string
open
open()

Opens the help dialog.

Returns : void
toggle
toggle()

Toggles the visibility of the help dialog.

Returns : void

Properties

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 : ''

A 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="{{ 'About this page' | 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 animated fadeIn"
    style="animation-delay: 0.35s"
    *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>

results matching ""

    No results matching ""