Support for exeternal events

Author: jenyayel

dev/index.html

@@ -49,6 +49,10 @@ <h2>The shown widget is for demonstration purpose only</h2>
         </pre>
     </code>
 
+    <p>
+        To fire an event that handled inside widget, click <a href="javascript:;" onclick="_hw('event', 'open')">here to open</a>,
+        and here <a href="javascript:;" onclick="_hw('event', 'close')">to close it</a>.
+    </p>
 
     <p>
         Below is a text that doesn't make sense at all.</p>

src/App.tsx

@@ -5,7 +5,7 @@ import { AppContext } from './AppContext';
 
 type Props = Configurations;
 export const App = ({ element, ...appSettings }: Props) => (
-    <AppContext config={appSettings}>
+    <AppContext config={appSettings} element={element}>
         <Main />
     </AppContext>
 );

src/AppContext.tsx

@@ -1,24 +1,43 @@
 import { h, createContext, ComponentChildren } from 'preact';
-import { AppConfigurations, WidgetApi } from './models';
-import { useRef } from 'preact/hooks';
+import { AppConfigurations, WidgetApi, Globals } from './models';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { ApiClient } from './services/apiClient';
 
 export const ConfigContext = createContext<AppConfigurations>({} as AppConfigurations);
 export const ServiceContext = createContext<WidgetApi | undefined>(undefined);
+export const GlobalsContext = createContext<Globals>({ widgetOpen: false, setWidgetOpen: (o) => undefined });
 
 interface Props {
     children: ComponentChildren;
     config: AppConfigurations;
+    element?: HTMLElement;
 }
-export const AppContext = ({ children, config }: Props) => {
+export const AppContext = ({ children, config, element }: Props) => {
     const services = useRef(new ApiClient({
         baseUrl: config.serviceBaseUrl,
         debug: config.debug
     }));
+
+    const [widgetOpen, setWidgetOpen] = useState(!config.minimized);
+    useEffect(() => {
+        element?.addEventListener('widget-event', (e: CustomEvent<{ name?: string }>) => {
+            switch (e.detail.name) {
+                case 'open':
+                    setWidgetOpen(true);
+                    break;
+                case 'close':
+                    setWidgetOpen(false);
+                    break;
+            }
+        });
+    }, [element]);
+
     return (
         <ConfigContext.Provider value={config}>
             <ServiceContext.Provider value={services.current}>
-                {children}
+                <GlobalsContext.Provider value={{ widgetOpen, setWidgetOpen }}>
+                    {children}
+                </GlobalsContext.Provider>
             </ServiceContext.Provider>
         </ConfigContext.Provider>
     );

src/components/TitleBar.tsx

@@ -1,32 +1,23 @@
 import { h } from 'preact';
 import style from './titlebar.css';
-import { useContext, useState, useEffect } from 'preact/hooks';
-import { ConfigContext } from '../AppContext';
+import { useContext } from 'preact/hooks';
+import { ConfigContext, GlobalsContext } from '../AppContext';
 
 interface OwnProps {
-    onOpen?: () => void;
-    onMinimize?: () => void;
     routeTitle: string;
 }
 const TitleBar = (props: OwnProps) => {
     const config = useContext(ConfigContext);
-    const [minimized, setMinimized] = useState(config.minimized);
-    useEffect(() => {
-        if (minimized) {
-            props.onMinimize?.();
-        } else {
-            props.onOpen?.();
-        }
-    }, [minimized, props.onMinimize, props.onOpen]);
+    const { setWidgetOpen, widgetOpen } = useContext(GlobalsContext);
 
     return (
-        <div className={style.root} onClick={() => setMinimized(!minimized)}>
-            <h4>{minimized
-                ? config.text.minimizedTitle ?? 'Help'
-                : props.routeTitle}</h4>
+        <div className={style.root} onClick={() => setWidgetOpen(!widgetOpen)}>
+            <h4>{widgetOpen
+                ? props.routeTitle
+                : (config.text.minimizedTitle ?? 'Help')}</h4>
             <a
-                className={minimized ? style.minimized : style.open}
-                title={minimized ? 'Open' : 'Minimize'} />
+                className={widgetOpen ? style.open : style.minimized}
+                title={widgetOpen ? 'Minimize' : 'Open'} />
         </div>);
 };
 

src/index.ts

@@ -21,4 +21,4 @@ loader(
     window,
     defaultConfig,
     window.document.currentScript,
-    (el, config) => render(h(App, { ...config }), el));
+    (el, config) => render(h(App, { ...config, element: el }), el));

src/layout/Main.tsx

@@ -3,16 +3,17 @@ import style from './main.css';
 import ContactForm from '../routes/ContactForm';
 import ThankYou from '../routes/ThankYou';
 import { useContext, useState } from 'preact/hooks';
-import { ConfigContext } from '../AppContext';
+import { ConfigContext, GlobalsContext } from '../AppContext';
 import clsx from 'clsx';
 import TitleBar from '../components/TitleBar';
 import Faq from '../routes/Faq';
 import { Router, RouteComponent } from './Router';
 
 const Main = () => {
     const config = useContext(ConfigContext);
+    const { widgetOpen } = useContext(GlobalsContext);
+
     const [title, setTitle] = useState('');
-    const [minimized, setMinimized] = useState(config.minimized);
     const getTitle = (route: string) => {
         switch (route) {
             case '/thankyou':
@@ -28,12 +29,10 @@ const Main = () => {
     return (
         <div className={clsx(style.root, { [style.noDark]: config.disableDarkMode })}>
             <div>
-                <TitleBar routeTitle={title}
-                    onMinimize={() => setMinimized(true)}
-                    onOpen={() => setMinimized(false)} />
+                <TitleBar routeTitle={title} />
                 <div className={clsx(
                     style.container,
-                    { [style.minimized]: minimized },
+                    { [style.minimized]: !widgetOpen },
                     config.styles.classNameContainer)}>
                     <Router
                         onChange={(r) => setTitle(getTitle(r))}

src/loader.ts

@@ -1,6 +1,6 @@
 import { Configurations } from './models';
 
-type MethodNames = 'init';
+type MethodNames = 'init' | 'event';
 export const DEFAULT_NAME = '_hw';
 
 /**
@@ -45,6 +45,9 @@ export default (
             + `This means you have multiple instances with same identifier (e.g. '${DEFAULT_NAME}')`);
     }
 
+    // this will an root element of the widget instance
+    let targetElement: HTMLElement;
+
     // iterate over all methods that were called up until now
     for (let i = 0; i < loaderObject.q.length; i++) {
         const item = loaderObject.q[i];
@@ -54,6 +57,7 @@ export default (
         } else if (i !== 0 && methodName === 'init') {
             continue;
         }
+
         switch (methodName) {
             case 'init':
                 const loadedObject = Object.assign(defaultConfig, item[1]);
@@ -63,7 +67,7 @@ export default (
 
                 // the actual rendering of the widget
                 const wrappingElement = loadedObject.element ?? win.document.body;
-                const targetElement = wrappingElement.appendChild(win.document.createElement('div'));
+                targetElement = wrappingElement.appendChild(win.document.createElement('div'));
                 targetElement.setAttribute('id', `widget-${instanceName}`);
                 render(targetElement, loadedObject);
 
@@ -81,8 +85,11 @@ export default (
     // to convert LoaderObject into sync calls to methods
     win[instanceName] = (method: MethodNames, ...args: any[]) => {
         switch (method) {
-            // TODO: here you can handle additional sync interactions
-            // with the widget from page
+            case 'event': {
+                targetElement?.dispatchEvent(
+                    new CustomEvent('widget-event', { detail: { name: args?.[0] } }));
+                break;
+            }
             default:
                 console.warn(`Unsupported method [${method}]`, args);
         }

src/models.ts

@@ -41,3 +41,8 @@ export interface WidgetApi {
     getFaq: () => Promise<FaqModel[]>;
     sendForm: (model: FormModel) => Promise<void>;
 }
+
+export interface Globals {
+    widgetOpen: boolean;
+    setWidgetOpen: (open: boolean) => void;
+}