@aquera/nile-elements 0.1.2 → 0.1.4

package/dist/src/nile-tour/nile-tour.js

@@ -79,12 +79,12 @@ let NileTour = class NileTour extends LitElement {
             position: step.position,
             beforeChange: step.beforeChange,
             afterChange: step.afterChange,
-        }))
-            .filter((step) => step.element !== null);
+        }));
+        // .filter((step) => step.element !== null);
         this.tourInstance = introJs().setOptions({
             steps: introSteps,
-            nextLabel: "<button class='introjs-button introjs-next-button'>Next</button>",
-            prevLabel: "<button class='introjs-button introjs-prev-button'>Prev</button>",
+            nextLabel: "Next",
+            prevLabel: "Prev",
             overlayOpacity: 0,
             disableInteraction: this.disableInteraction,
             showButtons: true,
@@ -128,7 +128,25 @@ let NileTour = class NileTour extends LitElement {
                 }
             }
         });
-        this.tourInstance.start();
+        this.tourInstance.start().then(() => {
+            const currentStep = this.tourInstance?._currentStep ?? 0;
+            const totalSteps = this.steps.length;
+            const tooltip = document.querySelector('.introjs-tooltip');
+            if (tooltip) {
+                const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
+                if (navBar) {
+                    let stepCounter = navBar.querySelector('.introjs-step-counter');
+                    if (!stepCounter) {
+                        stepCounter = document.createElement('div');
+                        stepCounter.className = 'introjs-step-counter';
+                        navBar.insertBefore(stepCounter, navBar.firstChild);
+                    }
+                    stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
+                }
+            }
+        }).catch(err => {
+            console.error('Error starting the tour:', err);
+        });
     }
     shakeTooltip() {
         const tooltip = document.querySelector('.introjs-tooltip');

package/dist/src/nile-tour/nile-tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult,  } from 'lit';\nimport { customElement,property } from 'lit/decorators.js';\nimport { styles } from './nile-tour.css';\nimport introJs from 'intro.js';\n\n/**\n * Nile tour component.\n *\n * @tag nile-tour\n */\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n  private tourInstance: ReturnType<typeof introJs> | null = null;\n\n  /**\n   * The steps for the tour.\n   */\n  @property({ type: Array })\n  steps: Array<{\n    stepNo: number;\n    element: string;\n    title: string;\n    content: string;\n    position: \"top\" | \"left\" | \"right\" | \"bottom\";\n    beforeChange?: () => Promise<boolean> | boolean;\n    afterChange?: () => Promise<void> | void;\n  }> = [];\n\n  /**\n   * JSON string for steps.\n   */\n  @property({ type: String })\n  stepsJson: string = '';\n\n  /**\n   * Whether to show the backdrop overlay.\n   */\n  @property({ type: Boolean })\n  showBackdrop: boolean = false;\n\n  /**\n   * Whether to disable interaction during the tour.\n   */\n  @property({ type: Boolean })\n  disableInteraction: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  constructor() {\n    super();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('stepsJson')) {\n      this.parseStepsJson();\n    }\n    super.updated(changedProperties);\n  }\n\n  /**\n   * Parses the JSON string and updates the steps array.\n   */\n  private parseStepsJson(): void {\n    if (this.stepsJson) {\n      try {\n        const parsedSteps = JSON.parse(this.stepsJson);\n        if (Array.isArray(parsedSteps)) {\n          this.steps = parsedSteps;\n        } else {\n          console.error('Invalid JSON: Expected an array');\n        }\n      } catch (error) {\n        console.error('Failed to parse stepsJson:', error);\n      }\n    }\n  }\n\n  /**\n   * Initializes and starts the Intro.js tour.\n   */\n  public startTour(): void {\n    console.log('start of tour');\n    const introSteps = this.steps\n      .map((step) => ({\n        element: document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n        intro: step.content,\n        title: step.title,\n        position: step.position,\n        beforeChange: step.beforeChange,\n        afterChange: step.afterChange,\n      }))\n      .filter((step) => step.element !== null);\n\n    this.tourInstance = introJs().setOptions({\n      steps: introSteps,\n      nextLabel: \"<button class='introjs-button introjs-next-button'>Next</button>\",\n      prevLabel: \"<button class='introjs-button introjs-prev-button'>Prev</button>\",\n      overlayOpacity: 0,\n      disableInteraction: this.disableInteraction,\n      showButtons: true,\n      showStepNumbers: false,\n      exitOnOverlayClick: false,\n    });\n\n    this.tourInstance.onbeforechange(async (targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const currentStep = this.steps[currentStepIndex];\n\n      if (currentStep?.beforeChange) {\n        const result = await currentStep.beforeChange();\n        if (!result) {\n          this.shakeTooltip();\n          return false;\n        }\n      }\n      return true;\n    });\n\n    this.tourInstance.onafterchange((targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const currentStep = this.steps[currentStepIndex];\n\n      if (currentStep?.afterChange) {\n        currentStep.afterChange();\n      }\n    });\n\n    // Update step counter on change\n    this.tourInstance.onchange((targetElement) => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = this.steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }\n    });\n\n    this.tourInstance.start();\n  }\n\n  private shakeTooltip(): void {\n    const tooltip = document.querySelector('.introjs-tooltip');\n    if (tooltip) {\n      tooltip.classList.add('introjs-shake');\n      setTimeout(() => {\n        tooltip.classList.remove('introjs-shake');\n      }, 1500);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <style>\n        ${styles.cssText}\n      </style>\n      <slot></slot>\n    `;\n  }\n}\n\nexport default NileTour;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tour': NileTour;\n  }\n}\n"]}
+{"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult,  } from 'lit';\nimport { customElement,property } from 'lit/decorators.js';\nimport { styles } from './nile-tour.css';\nimport introJs from 'intro.js';\n\n/**\n * Nile tour component.\n *\n * @tag nile-tour\n */\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n  private tourInstance: ReturnType<typeof introJs> | null = null;\n\n  /**\n   * The steps for the tour.\n   */\n  @property({ type: Array })\n  steps: Array<{\n    stepNo: number;\n    element: string;\n    title: string;\n    content: string;\n    position: any;\n    beforeChange?: () => Promise<boolean> | boolean;\n    afterChange?: () => Promise<void> | void;\n  }> = [];\n\n  /**\n   * JSON string for steps.\n   */\n  @property({ type: String })\n  stepsJson: string = '';\n\n  /**\n   * Whether to show the backdrop overlay.\n   */\n  @property({ type: Boolean })\n  showBackdrop: boolean = false;\n\n  /**\n   * Whether to disable interaction during the tour.\n   */\n  @property({ type: Boolean })\n  disableInteraction: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  createRenderRoot() {\n    return this;\n  }\n\n  constructor() {\n    super();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('stepsJson')) {\n      this.parseStepsJson();\n    }\n    super.updated(changedProperties);\n  }\n\n  /**\n   * Parses the JSON string and updates the steps array.\n   */\n  private parseStepsJson(): void {\n    if (this.stepsJson) {\n      try {\n        const parsedSteps = JSON.parse(this.stepsJson);\n        if (Array.isArray(parsedSteps)) {\n          this.steps = parsedSteps;\n        } else {\n          console.error('Invalid JSON: Expected an array');\n        }\n      } catch (error) {\n        console.error('Failed to parse stepsJson:', error);\n      }\n    }\n  }\n\n  /**\n   * Initializes and starts the Intro.js tour.\n   */\n  public startTour(): void {\n    console.log('start of tour');\n    const introSteps = this.steps\n      .map((step) => ({\n        element: document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n        intro: step.content,\n        title: step.title,\n        position: step.position,\n        beforeChange: step.beforeChange,\n        afterChange: step.afterChange,\n      }));\n      // .filter((step) => step.element !== null);\n\n    this.tourInstance = introJs().setOptions({\n      steps: introSteps,\n      nextLabel: \"Next\",\n      prevLabel: \"Prev\",\n      overlayOpacity: 0,\n      disableInteraction: this.disableInteraction,\n      showButtons: true,\n      showStepNumbers: false,\n      exitOnOverlayClick: false,\n    });\n\n    this.tourInstance.onbeforechange(async (targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const currentStep = this.steps[currentStepIndex];\n\n      if (currentStep?.beforeChange) {\n        const result = await currentStep.beforeChange();\n        if (!result) {\n          this.shakeTooltip();\n          return false;\n        }\n      }\n      return true;\n    });\n\n    this.tourInstance.onafterchange((targetElement) => {\n      const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n      const currentStep = this.steps[currentStepIndex];\n\n      if (currentStep?.afterChange) {\n        currentStep.afterChange();\n      }\n    });\n\n    // Update step counter on change\n    this.tourInstance.onchange((targetElement) => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = this.steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }\n    });\n\n\n\n    this.tourInstance.start().then(() => {\n      const currentStep = this.tourInstance?._currentStep ?? 0;\n      const totalSteps = this.steps.length;\n      const tooltip = document.querySelector('.introjs-tooltip');\n      if (tooltip) {\n        const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n        if (navBar) {\n          let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n          if (!stepCounter) {\n            stepCounter = document.createElement('div');\n            stepCounter.className = 'introjs-step-counter';\n            navBar.insertBefore(stepCounter, navBar.firstChild);\n          }\n          stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n        }\n      }  }).catch(err => {\n      console.error('Error starting the tour:', err);\n  });\n  }\n\n  private shakeTooltip(): void {\n    const tooltip = document.querySelector('.introjs-tooltip');\n    if (tooltip) {\n      tooltip.classList.add('introjs-shake');\n      setTimeout(() => {\n        tooltip.classList.remove('introjs-shake');\n      }, 1500);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <style>\n        ${styles.cssText}\n      </style>\n      <slot></slot>\n    `;\n  }\n}\n\nexport default NileTour;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-tour': NileTour;\n  }\n}\n"]}