Added help center handlers.

Author: azaslonov

src/grid/ko/gridEditor.ts

@@ -105,6 +105,25 @@ export class GridEditor {
             binding: binding,
             half: half,
             providers: providers,
+            openHelpCenter: (articleKey: string) => {
+                const view: View = {
+                    heading: "Help center",
+                    component: {
+                        name: "help-center",
+                        params: {
+                            articleKey: articleKey,
+                        }
+                    },
+                    resizing: {
+                        directions: "vertically horizontally",
+                        initialWidth: 500,
+                        initialHeight: 700
+                    },
+                    scrolling: false
+                };
+
+                this.viewManager.openViewAsPopup(view);
+            },
             openWidgetEditor: () => {
                 this.viewManager.openWidgetEditor(binding);
             },

src/ko/bindingHandlers/bindingHandlers.helpCenter.ts

@@ -21,13 +21,14 @@ export class HelpCenterBindingHandler {
                             directions: "vertically horizontally",
                             initialWidth: 500,
                             initialHeight: 700
-                        }
+                        },
+                        scrolling: false
                     };
 
                     this.viewManager.openViewAsPopup(view);
                 };
 
-                ko.applyBindingsToNode(element, { click: openHelpCenter }, null);
+                ko.applyBindingsToNode(element, { activate: openHelpCenter }, null);
             }
         };
     }

src/ko/bindingHandlers/bindingHandlers.tooltip.ts

@@ -5,11 +5,21 @@ import { BalloonHandle, BalloonActivationMethod } from "@paperbits/common/ui/bal
 const defaultTooltipDelayMs = 700;
 
 interface TooltipOptions {
+    /**
+     * Tooltip heading.
+     */
+    heading?: string;
+
     /**
      * Tooltip message.
      */
     message: string;
 
+    /**
+     * Tooltip help article.
+     */
+    articleKey?: string;
+
     /**
      * Preferred tooltip position, e.g. `top`.
      */
@@ -31,6 +41,11 @@ interface TooltipOptions {
     isDisabled: ko.Observable<boolean>;
 }
 
+interface TooltipParams {
+    heading: string;
+    observableText: ko.Observable<string>;
+    articleKey: string;
+}
 
 ko.bindingHandlers["tooltip"] = {
     init: (triggerElement: HTMLElement, valueAccessor: () => TooltipOptions) => {
@@ -63,7 +78,11 @@ ko.bindingHandlers["tooltip"] = {
         let hasText: boolean = false;
         const isDisabled: () => boolean = () => !!options.isDisabled ? options.isDisabled() : false;
 
-        const textParams: any = {};
+        const textParams: TooltipParams = {
+            heading: options.heading,
+            observableText: null,
+            articleKey: options.articleKey
+        };
         let closeTimeout = 0;
 
         if (ko.isObservable(tooltipMessage)) {
@@ -80,7 +99,7 @@ ko.bindingHandlers["tooltip"] = {
         }
         else {
             hasText = !!tooltipMessage;
-            textParams.text = tooltipMessage;
+            textParams.observableText = tooltipMessage;
         }
 
         ko.applyBindingsToNode(triggerElement, {

src/ko/ui/tooltip.html

@@ -1,2 +1,12 @@
-<div class="tooltip" data-bind="html: observableText, scrollable: true"></div>
+<div class="tooltip">
+    <!-- ko if: heading -->
+    <h1 data-bind="text: heading"></h1>
+    <!-- /ko-->
+    <div data-bind="html: observableText, scrollable: true"></div>
+
+    <!-- ko if: articleKey -->
+    <a href="#" class="btn btn-link" data-bind="helpCenter: articleKey">Learn more ></a>
+    <!-- /ko-->
+</div>
+
 <span class="text-hide" aria-live="polite" data-bind="text: announcementText"></span>

src/ko/ui/tooltip.ts

@@ -11,16 +11,24 @@ export class Tooltip {
     public readonly announcementText: ko.Observable<string>;
 
     constructor() {
+        this.heading = ko.observable();
         this.observableText = ko.observable();
         this.announcementText = ko.observable();
+        this.articleKey = ko.observable();
     }
 
     @Param()
     public text: any;
 
+    @Param()
+    public heading: any;
+
     @Param()
     public observableText: any;
 
+    @Param()
+    public articleKey: any;
+
     @OnMounted()
     public init(): void {
         if (!this.text) {

src/workshops/navigation/ko/navigationToolButton.ts

@@ -1,6 +1,6 @@
 import { ToolButton, ViewManager, View } from "@paperbits/common/ui";
 
-const helpText = "<h1>Navigation</h1><p>Add or edit navigation menus.</p>";
+const helpText = "<p>Add or edit navigation menus.</p>";
 
 export class NavigationToolButton implements ToolButton {
     public readonly iconClass: string = "paperbits-icon paperbits-menu-34";
@@ -15,6 +15,7 @@ export class NavigationToolButton implements ToolButton {
         const view: View = {
             heading: this.title,
             helpText: helpText,
+            helpArticle: "/navigation",
             component: { name: "navigation" }
         };
 

src/workshops/page/ko/pagesToolButton.ts

@@ -1,6 +1,6 @@
 import { ToolButton, ViewManager, View } from "@paperbits/common/ui";
 
-const helpText = "<h1>Pages</h1><p>Add or edit pages of your website. Each page has a unique URL, which also automatically defines the layout it is part of.</p>";
+const helpText = "<p>Add or edit pages of your website. Each page has a unique URL, which also automatically defines the layout it is part of.</p>";
 
 export class PagesToolButton implements ToolButton {
     public readonly iconClass: string = "paperbits-icon paperbits-menu-4";
@@ -14,7 +14,9 @@ export class PagesToolButton implements ToolButton {
 
         const view: View = {
             heading: this.title,
+            helpHeading: this.title,
             helpText: helpText,
+            helpArticle: "/pages",
             component: { name: "pages" }
         };
 

src/workshops/workshops.html

@@ -28,7 +28,7 @@ <h1>
                 <span data-bind="text: heading"></span>
                 <!-- ko if: $data.helpText -->
                 <button class="btn-help" role="tooltip" aria-label="Help"
-                    data-bind="tooltip: { message: $data.helpText, position: 'right', activateOn: 'clickOrKeyDown' }">
+                    data-bind="tooltip: { heading: $data.helpHeading, message: $data.helpText, articleKey: $data.helpArticle, position: 'right', activateOn: 'clickOrKeyDown' }">
                     <i aria-hidden="true" class="paperbits-icon paperbits-c-question"></i>
                 </button>
                 <!--/ko -->