siteguide.js 0.1.0

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,33 @@
+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

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

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

@@ -0,0 +1,19 @@
+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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,8 @@
+/**
+ * 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.cjs

@@ -0,0 +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;

package/dist/index.iife

@@ -0,0 +1 @@
+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.mjs

@@ -0,0 +1,170 @@
+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);
+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"]);
+  }
+  /**
+   * 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}
+   */
+  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 y {
+  constructor(t) {
+    /**
+     * TODO remove
+     * @deprecated remove later
+     */
+    o(this, "isStarted", !1);
+    o(this, "updatePopupStrategies", /* @__PURE__ */ new Map());
+    o(this, "_popupElement", null);
+    o(this, "_helperElement", null);
+    o(this, "_stepMap", /* @__PURE__ */ 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);
+  }
+}
+export {
+  y as Tour
+};

package/dist/index.umd

@@ -0,0 +1 @@
+(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"})});

package/dist/styles/siteguide.css

@@ -0,0 +1 @@
+.overview{width:300px;height:fit-content;background:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1000001;transition:all .3s ease-out}.overview-helper{box-shadow:0 0 #212121cc,0 0 0 5000px #21212180;border:2px dashed rgba(33,33,33,.8);border-radius:4px;opacity:1;z-index:1000000;box-sizing:border-box;position:absolute;transition:all .3s ease-out}.overview-content{width:100%;display:flex;flex-direction:column}.overview-title{font-size:20px;font-weight:700;color:#1b1b1b}.overview-description{font-weight:100;color:#666}.overview-button-list{width:100%;display:flex;align-items:center;justify-content:center}.overview-button{width:50%;height:35px;border-radius:10px;border:none;cursor:pointer;font-weight:600}.exit-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;position:absolute;top:20px;right:20px;cursor:pointer}.exit-button:hover svg{fill:#000}.exit-button svg{fill:#afafaf}

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "siteguide.js",
+    "version": "0.1.0",
+    "description": "Site guid and tours building lib.",
+    "license": "MIT",
+    "keywords": [
+        "site tour",
+        "tour",
+        "tutorial",
+        "tour",
+        "guide",
+        "onboarding tour",
+        "siteguide"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Handehoch/siteguide.js.git"
+    },
+    "author": {
+        "name": "Borislav Shelanov",
+        "email": "borislav.shelanov@gmail.com"
+    },
+    "main": "dist/index.cjs",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "type": "module",
+    "exports": {
+        "./dist/styles/siteguide.css": "./dist/styles/siteguide.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "private": false,
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "rimraf dist",
+        "dev": "vite build --watch",
+        "start": "vite --host --open",
+        "build": "npm run clean && vite build",
+        "rollup:dts": "api-extractor run",
+        "append:dts": "npm run rollup:dts",
+        "lint:scripts": "eslint ./src --ext .ts",
+        "lint:styles": "stylelint ./**/*.{css,scss}",
+        "format:scripts": "prettier ./src --write",
+        "format:styles": "stylelint ./**/*.{css,scss} --fix"
+    },
+    "devDependencies": {
+        "@types/node": "^22.9.1",
+        "postcss": "^8.4.49",
+        "rollup": "^4.27.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "typescript": "~5.6.2",
+        "vite": "^5.4.10",
+        "vite-plugin-dts": "^4.3.0"
+    }
+}