diff --git a/src/pages/widget/index.tsx b/src/pages/widget/index.tsx index 111b89e0..c81c8906 100644 --- a/src/pages/widget/index.tsx +++ b/src/pages/widget/index.tsx @@ -38,6 +38,13 @@ const initializeCode = html` const widget = window.PlannerWeb.createWidget({ urlBase: 'https://reiseplanlegger.example.no/', language: 'nn', // supports 'nb', 'nn' and 'en' + + // Optional options + outputOverrideOptions: { + // Inherit font from page website. + // By default it uses Roboto as the hosted planner web solution. + inheritFont: false, + }, }); // After loading JS and CSS file it can be initialized @@ -171,7 +178,10 @@ function WidgetContent({

Demo

-

Note: Widget is without padding. Should be up to consumer to decide when integrating.

+

+ Note: Widget is without padding. Should be up to consumer to decide when + integrating. +

Installation (latest version v{data.latest.version})

@@ -184,6 +194,22 @@ function WidgetContent({

HTML output

+
+

+ Note: If using output override options when calling{' '} + createWidget and copy-paste the HTML code you would have + to add classes to the container (element with the class{' '} + widget-module__wrapper) manually. +

+ +
    +
  • + .widget-inheritFont: Inherit font family from the + website +
  • +
+
+

Scripts (UMD / ESM)

diff --git a/src/widget/widget.module.css b/src/widget/widget.module.css index 120754fa..8f63a7e7 100644 --- a/src/widget/widget.module.css +++ b/src/widget/widget.module.css @@ -321,3 +321,10 @@ .messageBox[hidden] { display: none; } +/** + * Configurable options for widget +*/ +.inheritFont, +.inheritFont * { + font-family: inherit !important; +} diff --git a/src/widget/widget.ts b/src/widget/widget.ts index 3a0b3e5c..449f452e 100644 --- a/src/widget/widget.ts +++ b/src/widget/widget.ts @@ -39,9 +39,13 @@ function createSettingsConstants(urlBase: string) { }; } +type OutputOverrideOptions = { + inheritFont?: boolean; +}; export type WidgetOptions = { urlBase: string; language?: Languages; + outputOverrideOptions?: Partial; }; export type PlannerWebOutput = { output: string; @@ -51,10 +55,18 @@ export type PlannerWebOutput = { export function createWidget({ urlBase, language = 'en', + outputOverrideOptions = {}, }: WidgetOptions): PlannerWebOutput { const texts = translations(language); const settings = createSettingsConstants(urlBase); - const output = createOutput(settings, texts); + + const defaultOutputOverrideOptions: OutputOverrideOptions = { + inheritFont: false, + ...outputOverrideOptions, + }; + + const output = createOutput(settings, texts, defaultOutputOverrideOptions); + return { output, init, @@ -225,7 +237,11 @@ class MessageBox extends HTMLElement { } } -function createOutput({ URL_BASE }: SettingConstants, texts: Texts) { +function createOutput( + { URL_BASE }: SettingConstants, + texts: Texts, + outputOverrideOptions: OutputOverrideOptions, +) { function searchItem(item: GeocoderFeature) { const img = venueIcon(item); const title = el('span', [item.name]); @@ -704,7 +720,11 @@ function createOutput({ URL_BASE }: SettingConstants, texts: Texts) { `; const output = html` -
+