fix: fix demo errors

josias-r · Oct 29, 2022 · cce2b0c · cce2b0c
1 parent aa4d027
commit cce2b0c
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 87 deletions.
diff --git a/index.html b/index.html
@@ -272,68 +272,42 @@ <h4>Popover Positioning</h4>
         </div>
         <div class="section__example">
           <div class="top-90 position-btns" id="position-btns">
-            <a href="#" id="position-btn-left" data-alignment="left"
-              >Left, Left Top</a
+            <a href="#" data-alignment="start" data-preferredside="top"
+              >Top, Start</a
             >
-            <a
-              href="#"
-              id="position-btn-left-center"
-              data-alignment="left-center"
-              >Left Center</a
+            <a href="#" data-alignment="center" data-preferredside="top"
+              >Top, Center</a
             >
-            <a
-              href="#"
-              id="position-btn-left-bottom"
-              data-alignment="left-bottom"
-              >Left Bottom</a
+            <a href="#" data-alignment="end" data-preferredside="top"
+              >Top, End</a
             >
-
-            <a href="#" id="position-btn-right" data-alignment="right"
-              >Right, Right Top</a
+            <a href="#" data-alignment="start" data-preferredside="bottom"
+              >Bottom, Start</a
             >
-            <a
-              href="#"
-              id="position-btn-right-center"
-              data-alignment="right-center"
-              >Right Center</a
+            <a href="#" data-alignment="center" data-preferredside="bottom"
+              >Bottom, Center</a
             >
-            <a
-              href="#"
-              id="position-btn-right-bottom"
-              data-alignment="right-bottom"
-              >Right Bottom</a
+            <a href="#" data-alignment="end" data-preferredside="bottom"
+              >Bottom, End</a
             >
-
-            <a href="#" id="position-btn-top" data-alignment="top"
-              >Top, Top-left</a
+            <a href="#" data-alignment="start" data-preferredside="left"
+              >Left, Start</a
             >
-            <a href="#" id="position-btn-top-center" data-alignment="top-center"
-              >Top Center</a
+            <a href="#" data-alignment="center" data-preferredside="left"
+              >Left, Center</a
             >
-            <a href="#" id="position-btn-top-right" data-alignment="top-right"
-              >Top Right</a
+            <a href="#" data-alignment="end" data-preferredside="left"
+              >Left, End</a
             >
-
-            <a href="#" id="position-btn-bottom" data-alignment="bottom"
-              >Bottom, Bottom left</a
+            <a href="#" data-alignment="start" data-preferredside="right"
+              >Right, Start</a
             >
-            <a
-              href="#"
-              id="position-btn-bottom-center"
-              data-alignment="bottom-center"
-              >Bottom center</a
+            <a href="#" data-alignment="center" data-preferredside="right"
+              >Right, Center</a
             >
-            <a
-              href="#"
-              id="position-btn-bottom-right"
-              data-alignment="bottom-right"
-              >Bottom right</a
-            >
-
-            <a href="#" id="position-btn-mid-center" data-alignment="mid-center"
-              >Mid Center</a
+            <a href="#" data-alignment="end" data-preferredside="right"
+              >Right, End</a
             >
-            <!-- <a href="#" id="position-btn-auto" data-alignment="auto">Auto</a> -->
           </div>
           <p class="top-20">
             If you don't specify the position or specify it to be

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "highlight.js": "^11.6.0",
     "typescript": "^4.6.4",
     "vite": "^3.2.0"
   }

diff --git a/src/boarding-tests.ts b/src/boarding-tests.ts
@@ -0,0 +1,32 @@
+import { Boarding } from "./lib/main";
+
+// // min - no arg
+// const tour1 = new Boarding();
+// // min
+// const tour2 = new Boarding({});
+
+const tour = new Boarding({
+  onDeselected: (el) => {
+    console.log(el);
+  },
+  onHighlighted: (el) => {
+    console.log(el);
+  },
+  onHighlightStarted: (el) => {
+    console.log(el);
+  },
+  onReset: (el) => {
+    console.log(el);
+  },
+  overlayClickNext: false,
+  allowClose: false,
+});
+
+// min reqiured
+tour.defineSteps([{ element: "#min" }]);
+// min required w/ popover
+tour.defineSteps([
+  { element: "#min", popover: { title: "Min", description: "Min" } },
+]);
+
+tour.highlight("#min");
diff --git a/src/lib/boarding.ts b/src/lib/boarding.ts
@@ -21,8 +21,9 @@ import {
  * Plugin class that drives the plugin
  */
 class Boarding {
+  public isActivated: boolean;
+
   private options; // type will get inferred with default values being required
-  private isActivated: boolean;
   private steps: HighlightElement[];
   private currentStep: number;
   private currentMovePrevented: boolean;
@@ -446,9 +447,10 @@ class Boarding {
         // popover options
         title: currentStep.popover.title,
         description: currentStep.popover.description,
-        prefferedSide: currentStep.popover.prefferedSide,
-        alignment: currentStep.popover.alignment,
         // hybrid options
+        prefferedSide:
+          currentStep.popover.prefferedSide || this.options.prefferedSide,
+        alignment: currentStep.popover.alignment || this.options.alignment,
         showButtons:
           currentStep.popover.showButtons || this.options.showButtons,
         doneBtnText:

diff --git a/src/lib/core/popover.ts b/src/lib/core/popover.ts
@@ -35,15 +35,6 @@ export interface PopoverStepLevelOptions {
    * Description for the popover
    */
   description: string;
-  /**
-   * Preffered side to render the popover
-   */
-  prefferedSide?: Sides;
-  /**
-   * Alignment for the popover
-   * @default "start"
-   */
-  alignment?: Alignments;
 }
 
 /** The options of popover that will come from the top-level but can also be overwritten */
@@ -82,6 +73,15 @@ export interface PopoverHybridOptions {
    * className for the popover on element (will also add the main class scope)
    */
   className?: string;
+  /**
+   * Preffered side to render the popover
+   */
+  prefferedSide?: Sides;
+  /**
+   * Alignment for the popover
+   * @default "start"
+   */
+  alignment?: Alignments;
 }
 
 interface PopoverOptions