siteguide.js 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var _=Object.defineProperty;var m=(i,t,e)=>t in i?_(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var o=(i,t,e)=>m(i,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(i,t){const e=document.createElement(i);return t&&t.length>0&&(t=t.filter(s=>s),e.classList.add(...t)),e}function a(i,t){i.innerHTML="";const e=p("div",["overview-header"]);i.appendChild(e);const s=p("button",["overview-exit-button"]);e.appendChild(s);const r=p("div",["overview-content"]);i.appendChild(r);const n=p("div",["overview-button-list"]);t.buttonCollection.forEach(h=>{const l=p("button",["overview-button",h.className??""]);l.innerText=h.title,l.onclick=()=>{h.action()},n.appendChild(l)}),i.appendChild(n)}class w{updatePopupView(t,e){a(t,e),t.querySelector(".overview-content").appendChild(e.node)}}class f{updatePopupView(t,e){a(t,e);const s=t.querySelector(".overview-content");this.appendContent(s,"h2",e.title,["overview-title"]),this.appendContent(s,"p",e.text,["overview-description"])}appendContent(t,e,s,r){const n=p(e,r);n.innerText=s,t.appendChild(n)}}function v(i){return i===null||typeof i>"u"}class E{constructor(t,e){o(this,"id");o(this,"_hostData");o(this,"_popupData");o(this,"_tour");o(this,"_hostElement",null);this.id=e.id,this._hostData=e.host,this._popupData=e.popup,this._tour=t}show(){this._hostElement=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),this.updatePopup()}hide(){}updatePopupPosition(){const t=this._hostElement.getBoundingClientRect(),e=8,s=4,r=this.resolvePopupPosition();this._tour.helperElement.style.position=r,this._tour.helperElement.style.left=`${t.left-e}px`,this._tour.helperElement.style.top=`${t.top-s}px`,this._tour.helperElement.style.width=`${t.width+2*e}px`,this._tour.helperElement.style.height=`${t.height+2*s}px`,this._tour.popupElement.style.position=r;const n=this._tour.popupElement.offsetHeight,h=this._tour.popupElement.offsetWidth,l=window.innerHeight,c=window.innerWidth;let u=t.top+window.scrollY-n,d=t.left+window.scrollX;u<0&&(u=t.bottom+window.scrollY),d+h>c&&(d=t.right+window.scrollX-h),d<0&&(d=t.left+window.scrollX),u+n>l&&(u=t.top+window.scrollY),this._tour.popupElement.style.left=`${d}px`,this._tour.popupElement.style.top=`${u}px`}updatePopup(){var t;if(!this._tour.updatePopupStrategies.has(this._popupData.type))throw new Error("Missing popup creator strategy");this._tour.updatePopupStrategies.get(this._popupData.type).updatePopupView(this._tour.popupElement,this._popupData),this.updatePopupPosition(),(t=this._hostElement)==null||t.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})}resolveHostElement(t){return typeof this._hostData=="string"?document.querySelector(this._hostData):t}resolvePopupPosition(){let t=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),e="absolute";for(;!v(t);)(t==null?void 0:t.style.position)==="fixed"&&(e="fixed"),t=(t==null?void 0:t.parentElement)??null;return e}}class S{constructor(t){o(this,"isStarted",!1);o(this,"updatePopupStrategies",new Map);o(this,"_popupElement",null);o(this,"_helperElement",null);o(this,"_stepMap",new Map);o(this,"_stepList",[]);o(this,"_currentStep",null);o(this,"_bodyResizeObserver");this._config=t,this.setUpStrategies(),this.setUpBodySizeObserver()}get stepList(){return[...this._stepList]}get config(){return this._config}get popupElement(){return this._popupElement}get helperElement(){return this._helperElement}addStep(t){if(this._stepMap.has(t.id))throw new Error("Step with provided id has been already registered");const e=new E(this,t);t.popup.buttonCollection.forEach(s=>s.action=s.action.bind(this)),this._stepList.push(e),this._stepMap.set(t.id,e)}removeStep(t){this._stepList=this._stepList.filter(e=>t!==e.id),this._stepMap.delete(t)}start(){this.isStarted=!0,this._popupElement=p("div",["overview",this._config.className??""]),document.body.appendChild(this._popupElement),this._helperElement=p("div",["overview-helper",this._config.helperClassName??""]),document.body.appendChild(this._helperElement),this.next()}complete(){this.isStarted=!1,this._popupElement&&document.body.removeChild(this._popupElement),this._helperElement&&document.body.removeChild(this._helperElement)}prev(){var e;(e=this._currentStep)==null||e.hide();const t=this._stepList.indexOf(this._currentStep)-1;if(t<0){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}next(){var e;const t=this._stepList.indexOf(this._currentStep)+1;if((e=this._currentStep)==null||e.hide(),t>=this._stepList.length){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}setUpStrategies(){this.updatePopupStrategies.set("default",new f),this.updatePopupStrategies.set("custom",new w)}setUpBodySizeObserver(){this._bodyResizeObserver=new ResizeObserver(()=>{var t;this.isStarted&&((t=this._currentStep)==null||t.updatePopupPosition())}),this._bodyResizeObserver.observe(document.body)}}exports.Tour=S;
+"use strict";var w=Object.defineProperty;var f=(i,t,e)=>t in i?w(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var o=(i,t,e)=>f(i,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(i,t){const e=document.createElement(i);return t&&t.length>0&&(t=t.filter(s=>s),e.classList.add(...t)),e}function a(i,t){i.innerHTML="";const e=n("div",["overview-header"]);i.appendChild(e);const s=n("button",["overview-exit-button"]);e.appendChild(s);const r=n("div",["overview-content"]);i.appendChild(r);const p=n("div",["overview-button-list"]);t.buttonCollection.forEach(h=>{const l=n("button",["overview-button",h.className??""]);l.innerText=h.title,l.onclick=()=>{h.action()},p.appendChild(l)}),i.appendChild(p)}class v{updatePopupView(t,e){a(t,e),t.querySelector(".overview-content").appendChild(e.node)}}class E{updatePopupView(t,e){a(t,e);const s=t.querySelector(".overview-content");this.appendContent(s,"h2",e.title,["overview-title"]),this.appendContent(s,"p",e.text,["overview-description"])}appendContent(t,e,s,r){const p=n(e,r);p.innerText=s,t.appendChild(p)}}function c(i){return i===null||typeof i>"u"}class _{constructor(t,e){o(this,"id");o(this,"_hostData");o(this,"_popupData");o(this,"_tour");o(this,"_hostElement",null);this.id=e.id,this._hostData=e.host,this._popupData=e.popup,this._tour=t}show(){this._hostElement=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),this.updatePopup()}hide(){}updatePopupPosition(){const t=this._hostElement.getBoundingClientRect(),e=8,s=4,r=this.resolvePopupPosition();this._tour.helperElement.style.position=r,this._tour.helperElement.style.left=`${t.left-e}px`,this._tour.helperElement.style.top=`${t.top-s}px`,this._tour.helperElement.style.width=`${t.width+2*e}px`,this._tour.helperElement.style.height=`${t.height+2*s}px`,this._tour.popupElement.style.position=r;const p=this._tour.popupElement.offsetHeight,h=this._tour.popupElement.offsetWidth,l=window.innerHeight,m=window.innerWidth;let u=t.top+window.scrollY-p,d=t.left+window.scrollX;u<0&&(u=t.bottom+window.scrollY),d+h>m&&(d=t.right+window.scrollX-h),d<0&&(d=t.left+window.scrollX),u+p>l&&(u=t.top+window.scrollY),this._tour.popupElement.style.left=`${d}px`,this._tour.popupElement.style.top=`${u}px`}updatePopup(){var t;if(!this._tour.updatePopupStrategies.has(this._popupData.type))throw new Error("Missing popup creator strategy");this._tour.updatePopupStrategies.get(this._popupData.type).updatePopupView(this._tour.popupElement,this._popupData),this.updatePopupPosition(),(t=this._hostElement)==null||t.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})}resolveHostElement(t){return typeof this._hostData=="string"?document.querySelector(this._hostData):t}resolvePopupPosition(){let t=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),e="absolute";for(;!c(t);)(t==null?void 0:t.style.position)==="fixed"&&(e="fixed"),t=(t==null?void 0:t.parentElement)??null;return e}}class S{constructor(t){o(this,"isStarted",!1);o(this,"updatePopupStrategies",new Map);o(this,"_popupElement",null);o(this,"_helperElement",null);o(this,"_stepMap",new Map);o(this,"_stepList",[]);o(this,"_currentStep",null);o(this,"_bodyResizeObserver");this._config=t,this.setUpStrategies(),this.setUpBodySizeObserver()}get stepList(){return[...this._stepList]}get config(){return this._config}get popupElement(){return this._popupElement}get helperElement(){return this._helperElement}addStep(t){if(this._stepMap.has(t.id))throw new Error("Step with provided id has been already registered");const e=new _(this,t);t.popup.buttonCollection.forEach(s=>s.action=s.action.bind(this)),this._stepList.push(e),this._stepMap.set(t.id,e)}removeStep(t){this._stepList=this._stepList.filter(e=>t!==e.id),this._stepMap.delete(t)}start(){this.isStarted=!0,this._popupElement=n("div",["overview",this._config.className??""]),document.body.appendChild(this._popupElement),this._helperElement=n("div",["overview-helper",this._config.helperClassName??""]),document.body.appendChild(this._helperElement),this.next()}complete(){this.isStarted=!1,this._popupElement&&document.body.removeChild(this._popupElement),this._helperElement&&document.body.removeChild(this._helperElement)}prev(){var e;(e=this._currentStep)==null||e.hide();const t=this._stepList.indexOf(this._currentStep)-1;if(t<0){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}next(){var e;const t=this._stepList.indexOf(this._currentStep)+1;if((e=this._currentStep)==null||e.hide(),t>=this._stepList.length){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}setUpStrategies(){this.updatePopupStrategies.set("default",new E),this.updatePopupStrategies.set("custom",new v)}setUpBodySizeObserver(){this._bodyResizeObserver=new ResizeObserver(()=>{var t;this.isStarted&&((t=this._currentStep)==null||t.updatePopupPosition())}),this._bodyResizeObserver.observe(document.body)}}exports.Tour=S;exports.TourStep=_;exports.createElement=n;exports.isNullOrUndefined=c;

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+export declare type ButtonConfig = {
+    title: string;
+    className?: string;
+    action: () => void | (() => Promise<void>);
+};
+
+/**
+ * Creates an HTML element with the specified tag name and applies the given class list.
+ * @template T
+ * @param {T} tagName - The name of the HTML tag to create.
+ * @param {string[]} [classList] - An array of class names to add to the created element.
+ * @returns {HTMLElementTagNameMap[T]} The created HTML element with the specified tag name and class list.
+ */
+export declare function createElement<T extends keyof HTMLElementTagNameMap>(tagName: T, classList?: string[]): HTMLElementTagNameMap[T];
+
+export declare type CustomPopupData = SharedPopupData & {
+    type: Extract<PopupType, 'custom'>;
+    node: HTMLElement;
+};
+
+export declare type DefaultPopupData = SharedPopupData & {
+    type: Extract<PopupType, 'default'>;
+    title: string;
+    text: string;
+    buttonCollection: ButtonConfig[];
+};
+
+export declare type HostData = string | HTMLElement | (() => HTMLElement | string);
+
+/**
+ * Checks if a value is null or undefined.
+ * @param {any} value - The value to check.
+ * @returns {boolean} True if the value is null or undefined, false otherwise.
+ */
+export declare function isNullOrUndefined(value: any): value is null | undefined;
+
+export declare interface IUpdatePopup {
+    updatePopupView(popupElement: HTMLElement, popupData: PopupData): void;
+}
+
+export declare type PopupData = DefaultPopupData | CustomPopupData;
+
+export declare type PopupPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export declare type PopupType = 'default' | 'custom';
+
+export declare type SharedPopupData = {
+    className?: string;
+    position: PopupPosition;
+    buttonCollection: ButtonConfig[];
+};
+
+export declare type StepId = string;
+
+export declare class Tour {
+    private readonly _config;
+    get stepList(): TourStep[];
+    get config(): TourConfig;
+    get popupElement(): HTMLElement | null;
+    get helperElement(): HTMLElement | null;
+    /**
+     * TODO remove
+     * @deprecated remove later
+     */
+    isStarted: boolean;
+    readonly updatePopupStrategies: Map<PopupType, IUpdatePopup>;
+    private _popupElement;
+    private _helperElement;
+    private readonly _stepMap;
+    private _stepList;
+    private _currentStep;
+    private _bodyResizeObserver;
+    constructor(_config: TourConfig);
+    addStep(config: TourStepConfig): void;
+    removeStep(stepId: StepId): void;
+    start(): void;
+    complete(): void;
+    prev(): void;
+    next(): void;
+    private setUpStrategies;
+    private setUpBodySizeObserver;
+}
+
+export declare type TourConfig = {
+    className?: string;
+    helperClassName?: string;
+};
+
+export declare class TourStep {
+    readonly id: StepId;
+    private readonly _hostData;
+    private readonly _popupData;
+    private readonly _tour;
+    private _hostElement;
+    constructor(tour: Tour, config: TourStepConfig);
+    show(): void;
+    hide(): void;
+    updatePopupPosition(): void;
+    private updatePopup;
+    private resolveHostElement;
+    private resolvePopupPosition;
+}
+
+export declare type TourStepConfig = {
+    id: StepId;
+    host: HostData;
+    popup: PopupData;
+};
+
+export { }

package/dist/index.mjs

@@ -166,5 +166,8 @@ class y {
   }
 }
 export {
-  y as Tour
+  y as Tour,
+  E as TourStep,
+  p as createElement,
+  v as isNullOrUndefined
 };

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "siteguide.js",
-    "version": "0.1.0",
-    "description": "Site guid and tours building lib.",
+    "version": "0.1.1",
+    "description": "Site guide and tours building lib",
     "license": "MIT",
     "keywords": [
+        "siteguide",
         "site tour",
         "tour",
         "tutorial",
         "tour",
         "guide",
-        "onboarding tour",
-        "siteguide"
+        "onboarding tour"
     ],
     "repository": {
         "type": "git",
@@ -52,7 +52,7 @@
         "postcss": "^8.4.49",
         "rollup": "^4.27.4",
         "rollup-plugin-postcss": "^4.0.2",
-        "typescript": "~5.6.2",
+        "typescript": "^5.4.2",
         "vite": "^5.4.10",
         "vite-plugin-dts": "^4.3.0"
     }

package/dist/d/element-creator/interfaces/update-popup.interface.d.ts

@@ -1,4 +0,0 @@
-import { PopupData } from '../../types/popup.type';
-export interface IUpdatePopup {
-    updatePopupView(popupElement: HTMLElement, popupData: PopupData): void;
-}

package/dist/d/element-creator/strategies/custom-step.strategy.d.ts

@@ -1,5 +0,0 @@
-import { CustomPopupData } from '../../types/popup.type';
-import { IUpdatePopup } from '../interfaces/update-popup.interface';
-export declare class CustomStepStrategy implements IUpdatePopup {
-    updatePopupView(popupElement: HTMLElement, popupData: CustomPopupData): void;
-}

package/dist/d/element-creator/strategies/default-step.strategy.d.ts

@@ -1,14 +0,0 @@
-import { DefaultPopupData } from '../../types/popup.type';
-import { IUpdatePopup } from '../interfaces/update-popup.interface';
-export declare class DefaultStepStrategy implements IUpdatePopup {
-    updatePopupView(popupElement: HTMLElement, popupData: DefaultPopupData): void;
-    /**
-     * Appends a new HTML element with the specified class list and inner text to the parent element.
-     * @param {HTMLElement} parent - The parent element to which the new element will be appended.
-     * @param {keyof HTMLElementTagNameMap} tagType - The type of HTML element to create and append.
-     * @param {string} innerText - The inner text to set for the new element.
-     * @param {string[]} classList - An array of class names to add to the new element.
-     * @returns {void}
-     */
-    private appendContent;
-}

package/dist/d/element-creator/utils/update-popup-layout.util.d.ts

@@ -1,8 +0,0 @@
-import { PopupData } from '../../types/popup.type';
-/**
- * Updates the layout of a popup element by clearing its content and adding new elements
- * such as a header, exit button, content area, and a collection of buttons.
- * @param {HTMLElement} popup - The popup element to be updated.
- * @param {PopupData} popupData - The data containing configuration for the popup, including button configurations.
- */
-export declare function updatePopupLayout(popup: HTMLElement, popupData: PopupData): void;

package/dist/d/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/d/tour-step.d.ts

@@ -1,16 +0,0 @@
-import { Tour } from './tour';
-import { StepId, TourStepConfig } from './types/tour-step-config.type';
-export declare class TourStep {
-    readonly id: StepId;
-    private readonly _hostData;
-    private readonly _popupData;
-    private readonly _tour;
-    private _hostElement;
-    constructor(tour: Tour, config: TourStepConfig);
-    show(): void;
-    hide(): void;
-    updatePopupPosition(): void;
-    private updatePopup;
-    private resolveHostElement;
-    private resolvePopupPosition;
-}

package/dist/d/tour.d.ts

@@ -1,33 +0,0 @@
-import { IUpdatePopup } from './element-creator/interfaces/update-popup.interface';
-import { TourStep } from './tour-step';
-import { PopupType } from './types/popup.type';
-import { TourConfig } from './types/tour-config.type';
-import { StepId, TourStepConfig } from './types/tour-step-config.type';
-export declare class Tour {
-    private readonly _config;
-    get stepList(): TourStep[];
-    get config(): TourConfig;
-    get popupElement(): HTMLElement | null;
-    get helperElement(): HTMLElement | null;
-    /**
-     * TODO remove
-     * @deprecated remove later
-     */
-    isStarted: boolean;
-    readonly updatePopupStrategies: Map<PopupType, IUpdatePopup>;
-    private _popupElement;
-    private _helperElement;
-    private readonly _stepMap;
-    private _stepList;
-    private _currentStep;
-    private _bodyResizeObserver;
-    constructor(_config: TourConfig);
-    addStep(config: TourStepConfig): void;
-    removeStep(stepId: StepId): void;
-    start(): void;
-    complete(): void;
-    prev(): void;
-    next(): void;
-    private setUpStrategies;
-    private setUpBodySizeObserver;
-}

package/dist/d/types/button-config.type.d.ts

@@ -1,5 +0,0 @@
-export type ButtonConfig = {
-    title: string;
-    className?: string;
-    action: () => void | (() => Promise<void>);
-};

package/dist/d/types/popup.type.d.ts

@@ -1,19 +0,0 @@
-import { ButtonConfig } from './button-config.type';
-export type PopupData = DefaultPopupData | CustomPopupData;
-export type PopupType = 'default' | 'custom';
-export type PopupPosition = 'top' | 'bottom' | 'left' | 'right';
-export type SharedPopupData = {
-    className?: string;
-    position: PopupPosition;
-    buttonCollection: ButtonConfig[];
-};
-export type DefaultPopupData = SharedPopupData & {
-    type: Extract<PopupType, 'default'>;
-    title: string;
-    text: string;
-    buttonCollection: ButtonConfig[];
-};
-export type CustomPopupData = SharedPopupData & {
-    type: Extract<PopupType, 'custom'>;
-    node: HTMLElement;
-};

package/dist/d/types/tour-config.type.d.ts

@@ -1,4 +0,0 @@
-export type TourConfig = {
-    className?: string;
-    helperClassName?: string;
-};

package/dist/d/types/tour-step-config.type.d.ts

@@ -1,8 +0,0 @@
-import { PopupData } from './popup.type';
-export type TourStepConfig = {
-    id: StepId;
-    host: HostData;
-    popup: PopupData;
-};
-export type HostData = string | HTMLElement | (() => HTMLElement | string);
-export type StepId = string;

package/dist/d/utils/base.util.d.ts

@@ -1,6 +0,0 @@
-/**
- * Checks if a value is null or undefined.
- * @param {any} value - The value to check.
- * @returns {boolean} True if the value is null or undefined, false otherwise.
- */
-export declare function isNullOrUndefined(value: any): value is null | undefined;

package/dist/d/utils/create-element.util.d.ts

@@ -1,8 +0,0 @@
-/**
- * Creates an HTML element with the specified tag name and applies the given class list.
- * @template T
- * @param {T} tagName - The name of the HTML tag to create.
- * @param {string[]} [classList] - An array of class names to add to the created element.
- * @returns {HTMLElementTagNameMap[T]} The created HTML element with the specified tag name and class list.
- */
-export declare function createElement<T extends keyof HTMLElementTagNameMap>(tagName: T, classList?: string[]): HTMLElementTagNameMap[T];

package/dist/index.iife

@@ -1 +0,0 @@
-var g=Object.defineProperty;var S=(p,i,h)=>i in p?g(p,i,{enumerable:!0,configurable:!0,writable:!0,value:h}):p[i]=h;var o=(p,i,h)=>S(p,typeof i!="symbol"?i+"":i,h);this.siteguide=this.siteguide||{};this.siteguide.js=function(p){"use strict";function i(n,t){const e=document.createElement(n);return t&&t.length>0&&(t=t.filter(s=>s),e.classList.add(...t)),e}function h(n,t){n.innerHTML="";const e=i("div",["overview-header"]);n.appendChild(e);const s=i("button",["overview-exit-button"]);e.appendChild(s);const l=i("div",["overview-content"]);n.appendChild(l);const r=i("div",["overview-button-list"]);t.buttonCollection.forEach(u=>{const d=i("button",["overview-button",u.className??""]);d.innerText=u.title,d.onclick=()=>{u.action()},r.appendChild(d)}),n.appendChild(r)}class _{updatePopupView(t,e){h(t,e),t.querySelector(".overview-content").appendChild(e.node)}}class m{updatePopupView(t,e){h(t,e);const s=t.querySelector(".overview-content");this.appendContent(s,"h2",e.title,["overview-title"]),this.appendContent(s,"p",e.text,["overview-description"])}appendContent(t,e,s,l){const r=i(e,l);r.innerText=s,t.appendChild(r)}}function w(n){return n===null||typeof n>"u"}class f{constructor(t,e){o(this,"id");o(this,"_hostData");o(this,"_popupData");o(this,"_tour");o(this,"_hostElement",null);this.id=e.id,this._hostData=e.host,this._popupData=e.popup,this._tour=t}show(){this._hostElement=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),this.updatePopup()}hide(){}updatePopupPosition(){const t=this._hostElement.getBoundingClientRect(),e=8,s=4,l=this.resolvePopupPosition();this._tour.helperElement.style.position=l,this._tour.helperElement.style.left=`${t.left-e}px`,this._tour.helperElement.style.top=`${t.top-s}px`,this._tour.helperElement.style.width=`${t.width+2*e}px`,this._tour.helperElement.style.height=`${t.height+2*s}px`,this._tour.popupElement.style.position=l;const r=this._tour.popupElement.offsetHeight,u=this._tour.popupElement.offsetWidth,d=window.innerHeight,E=window.innerWidth;let a=t.top+window.scrollY-r,c=t.left+window.scrollX;a<0&&(a=t.bottom+window.scrollY),c+u>E&&(c=t.right+window.scrollX-u),c<0&&(c=t.left+window.scrollX),a+r>d&&(a=t.top+window.scrollY),this._tour.popupElement.style.left=`${c}px`,this._tour.popupElement.style.top=`${a}px`}updatePopup(){var t;if(!this._tour.updatePopupStrategies.has(this._popupData.type))throw new Error("Missing popup creator strategy");this._tour.updatePopupStrategies.get(this._popupData.type).updatePopupView(this._tour.popupElement,this._popupData),this.updatePopupPosition(),(t=this._hostElement)==null||t.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})}resolveHostElement(t){return typeof this._hostData=="string"?document.querySelector(this._hostData):t}resolvePopupPosition(){let t=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),e="absolute";for(;!w(t);)(t==null?void 0:t.style.position)==="fixed"&&(e="fixed"),t=(t==null?void 0:t.parentElement)??null;return e}}class v{constructor(t){o(this,"isStarted",!1);o(this,"updatePopupStrategies",new Map);o(this,"_popupElement",null);o(this,"_helperElement",null);o(this,"_stepMap",new Map);o(this,"_stepList",[]);o(this,"_currentStep",null);o(this,"_bodyResizeObserver");this._config=t,this.setUpStrategies(),this.setUpBodySizeObserver()}get stepList(){return[...this._stepList]}get config(){return this._config}get popupElement(){return this._popupElement}get helperElement(){return this._helperElement}addStep(t){if(this._stepMap.has(t.id))throw new Error("Step with provided id has been already registered");const e=new f(this,t);t.popup.buttonCollection.forEach(s=>s.action=s.action.bind(this)),this._stepList.push(e),this._stepMap.set(t.id,e)}removeStep(t){this._stepList=this._stepList.filter(e=>t!==e.id),this._stepMap.delete(t)}start(){this.isStarted=!0,this._popupElement=i("div",["overview",this._config.className??""]),document.body.appendChild(this._popupElement),this._helperElement=i("div",["overview-helper",this._config.helperClassName??""]),document.body.appendChild(this._helperElement),this.next()}complete(){this.isStarted=!1,this._popupElement&&document.body.removeChild(this._popupElement),this._helperElement&&document.body.removeChild(this._helperElement)}prev(){var e;(e=this._currentStep)==null||e.hide();const t=this._stepList.indexOf(this._currentStep)-1;if(t<0){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}next(){var e;const t=this._stepList.indexOf(this._currentStep)+1;if((e=this._currentStep)==null||e.hide(),t>=this._stepList.length){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}setUpStrategies(){this.updatePopupStrategies.set("default",new m),this.updatePopupStrategies.set("custom",new _)}setUpBodySizeObserver(){this._bodyResizeObserver=new ResizeObserver(()=>{var t;this.isStarted&&((t=this._currentStep)==null||t.updatePopupPosition())}),this._bodyResizeObserver.observe(document.body)}}return p.Tour=v,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"}),p}({});

package/dist/index.umd

@@ -1 +0,0 @@
-(function(o,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(o=typeof globalThis<"u"?globalThis:o||self,i((o.siteguide=o.siteguide||{},o.siteguide.js={})))})(this,function(o){"use strict";var y=Object.defineProperty;var S=(o,i,h)=>i in o?y(o,i,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[i]=h;var n=(o,i,h)=>S(o,typeof i!="symbol"?i+"":i,h);function i(p,t){const e=document.createElement(p);return t&&t.length>0&&(t=t.filter(s=>s),e.classList.add(...t)),e}function h(p,t){p.innerHTML="";const e=i("div",["overview-header"]);p.appendChild(e);const s=i("button",["overview-exit-button"]);e.appendChild(s);const l=i("div",["overview-content"]);p.appendChild(l);const r=i("div",["overview-button-list"]);t.buttonCollection.forEach(u=>{const d=i("button",["overview-button",u.className??""]);d.innerText=u.title,d.onclick=()=>{u.action()},r.appendChild(d)}),p.appendChild(r)}class _{updatePopupView(t,e){h(t,e),t.querySelector(".overview-content").appendChild(e.node)}}class f{updatePopupView(t,e){h(t,e);const s=t.querySelector(".overview-content");this.appendContent(s,"h2",e.title,["overview-title"]),this.appendContent(s,"p",e.text,["overview-description"])}appendContent(t,e,s,l){const r=i(e,l);r.innerText=s,t.appendChild(r)}}function m(p){return p===null||typeof p>"u"}class w{constructor(t,e){n(this,"id");n(this,"_hostData");n(this,"_popupData");n(this,"_tour");n(this,"_hostElement",null);this.id=e.id,this._hostData=e.host,this._popupData=e.popup,this._tour=t}show(){this._hostElement=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),this.updatePopup()}hide(){}updatePopupPosition(){const t=this._hostElement.getBoundingClientRect(),e=8,s=4,l=this.resolvePopupPosition();this._tour.helperElement.style.position=l,this._tour.helperElement.style.left=`${t.left-e}px`,this._tour.helperElement.style.top=`${t.top-s}px`,this._tour.helperElement.style.width=`${t.width+2*e}px`,this._tour.helperElement.style.height=`${t.height+2*s}px`,this._tour.popupElement.style.position=l;const r=this._tour.popupElement.offsetHeight,u=this._tour.popupElement.offsetWidth,d=window.innerHeight,E=window.innerWidth;let a=t.top+window.scrollY-r,c=t.left+window.scrollX;a<0&&(a=t.bottom+window.scrollY),c+u>E&&(c=t.right+window.scrollX-u),c<0&&(c=t.left+window.scrollX),a+r>d&&(a=t.top+window.scrollY),this._tour.popupElement.style.left=`${c}px`,this._tour.popupElement.style.top=`${a}px`}updatePopup(){var t;if(!this._tour.updatePopupStrategies.has(this._popupData.type))throw new Error("Missing popup creator strategy");this._tour.updatePopupStrategies.get(this._popupData.type).updatePopupView(this._tour.popupElement,this._popupData),this.updatePopupPosition(),(t=this._hostElement)==null||t.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})}resolveHostElement(t){return typeof this._hostData=="string"?document.querySelector(this._hostData):t}resolvePopupPosition(){let t=this.resolveHostElement(typeof this._hostData=="function"?this._hostData():this._hostData),e="absolute";for(;!m(t);)(t==null?void 0:t.style.position)==="fixed"&&(e="fixed"),t=(t==null?void 0:t.parentElement)??null;return e}}class v{constructor(t){n(this,"isStarted",!1);n(this,"updatePopupStrategies",new Map);n(this,"_popupElement",null);n(this,"_helperElement",null);n(this,"_stepMap",new Map);n(this,"_stepList",[]);n(this,"_currentStep",null);n(this,"_bodyResizeObserver");this._config=t,this.setUpStrategies(),this.setUpBodySizeObserver()}get stepList(){return[...this._stepList]}get config(){return this._config}get popupElement(){return this._popupElement}get helperElement(){return this._helperElement}addStep(t){if(this._stepMap.has(t.id))throw new Error("Step with provided id has been already registered");const e=new w(this,t);t.popup.buttonCollection.forEach(s=>s.action=s.action.bind(this)),this._stepList.push(e),this._stepMap.set(t.id,e)}removeStep(t){this._stepList=this._stepList.filter(e=>t!==e.id),this._stepMap.delete(t)}start(){this.isStarted=!0,this._popupElement=i("div",["overview",this._config.className??""]),document.body.appendChild(this._popupElement),this._helperElement=i("div",["overview-helper",this._config.helperClassName??""]),document.body.appendChild(this._helperElement),this.next()}complete(){this.isStarted=!1,this._popupElement&&document.body.removeChild(this._popupElement),this._helperElement&&document.body.removeChild(this._helperElement)}prev(){var e;(e=this._currentStep)==null||e.hide();const t=this._stepList.indexOf(this._currentStep)-1;if(t<0){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}next(){var e;const t=this._stepList.indexOf(this._currentStep)+1;if((e=this._currentStep)==null||e.hide(),t>=this._stepList.length){this.complete();return}this._currentStep=this._stepList[t],this._currentStep.show()}setUpStrategies(){this.updatePopupStrategies.set("default",new f),this.updatePopupStrategies.set("custom",new _)}setUpBodySizeObserver(){this._bodyResizeObserver=new ResizeObserver(()=>{var t;this.isStarted&&((t=this._currentStep)==null||t.updatePopupPosition())}),this._bodyResizeObserver.observe(document.body)}}o.Tour=v,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});