Help web component <cq-help>
displays help if available. Long-press time is set in the stxx.longHoldTime function.
Configuring help pop-ups
The chartiq/examples/help/ folder contains image files and the helpContent.js file for configuring help pop ups.
import { CIQ } from "../../js/chartiq.js";
CIQ.Help = CIQ.Help || function () {};
CIQ.Help.Message = "Dots indicate which items have help available. At any time, long press a feature to make the help window appear.";
CIQ.Help.Actions = {
close: {
label: "Exit Help",
action: "close" // Close is handled by the floating window
},
enable: {
label: "Enable This Feature",
action: function (target) {
// Click the target (parent of the <cq-help> element)
target.dispatchEvent(new Event("stxtap"));
}
}
};
CIQ.Help.Content = {
drawing_tools_toggle: {
title: "Toggle: Drawing Tools",
content:
"Toggles display of the drawing tools palette. Drawing tools allow you to add custom markings and annotations to the chart."
},
drawing_palette_rectangle: {
title: "Drawing Tool: Rectangle",
content:
"<img src='./examples/help/rectangle.png' width='200' style='float:right; margin:1em;'/> Add a rectangle shape onto the chart."
},
drawing_palette_annotation: {
title: "Drawing Tool: Annotation",
content: "Add text annotations onto the chart."
},
drawing_palette_arrow: {
title: "Drawing Tool: Arrow",
content: "Add an arrow shape onto the chart."
},
drawing_palette_line: {
title: "Drawing Tool: Line",
content: "Add a line at any angle or position across the chart."
},
drawing_palette_horizontal: {
title: "Drawing Tool: Horizontal",
content: "Add a horizontal line at any point onto the chart."
},
drawing_palette_vertical: {
title: "Drawing Tool: Vertical",
content: "Add a vertical line at any point onto the chart."
},
drawing_palette_segment: {
title: "Drawing Tool: Segment",
content: "Add a line segment onto the chart."
},
default: {
title: "Help not available.",
content: "No documentation for this topic could be found.",
actions: [CIQ.Help.Actions.close]
}
};
CIQ.Help.Content
defines the content object.- Properties such as
drawing_palette_rectangle
match with an identifier set in the HTML. - The help author adds
title
andcontent
. - Actions are optional.
Example
<cq-help help-id="rectangle"></cq-help>
Methods
-
ensureMessagingAvailable(stx)
-
Ensures that an instance of the cq-floating-window web component is available to handle event messaging and create the shortcuts legend floating window.
This function is called when the add-on is instantiated.
Parameters:
Name Type Description stx
CIQ.ChartEngine The chart engine that provides the UI context, which contains the cq-floating-window web component.
- Since:
-
8.4.0
-
press()
-
- Since:
-
8.4.0
-
verifyHelpContent()
-
Adds class
help-available
if a property matching this elements help-id attribute can be found in CIQ.Help.Content object. The help indicator (dot) will not appear unless this class is present.- Since:
-
8.4.0