If you don't specify the position or specify it to be
diff --git a/package-lock.json b/package-lock.json
index abad323..6ea3648 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "boarding.js",
"version": "0.0.0",
"devDependencies": {
+ "highlight.js": "^11.6.0",
"typescript": "^4.6.4",
"vite": "^3.2.0"
}
@@ -433,6 +434,15 @@
"node": ">= 0.4.0"
}
},
+ "node_modules/highlight.js": {
+ "version": "11.6.0",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+ "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+ "dev": true,
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/is-core-module": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
@@ -812,6 +822,12 @@
"function-bind": "^1.1.1"
}
},
+ "highlight.js": {
+ "version": "11.6.0",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+ "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+ "dev": true
+ },
"is-core-module": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
diff --git a/package.json b/package.json
index 4c7b10e..fbe1bc2 100644
--- 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
new file mode 100644
index 0000000..51d6721
--- /dev/null
+++ 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
index fd92fc0..e4767f3 100644
--- 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
index 5df1e60..831a388 100644
--- 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
diff --git a/src/main.ts b/src/main.ts
index 576e79f..1564bfa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
import "./lib/boarding.css";
import { BoardingStepDefinition } from "./lib/boarding-types";
import { Boarding } from "./lib/main";
+import hljs from "highlight.js";
import "./demo/styles/styles.css";
@@ -14,6 +15,8 @@ document.addEventListener("DOMContentLoaded", function () {
description:
"This is just one use-case, make sure to check out the rest of the docs below.",
nextBtnText: "Okay, Start!",
+ prefferedSide: "left",
+ alignment: "center",
},
},
{
@@ -37,7 +40,7 @@ document.addEventListener("DOMContentLoaded", function () {
title: "Let's talk features",
description:
"You may leave your mouse and use the arrow keys to move next and back or escape key anytime to close this",
- position: "bottom",
+ prefferedSide: "bottom",
},
},
{
@@ -54,7 +57,7 @@ document.addEventListener("DOMContentLoaded", function () {
title: "Feature Introductions",
description:
"With it's powerful API you can use it to make programmatic or user driven feature introductions",
- position: "bottom",
+ prefferedSide: "bottom",
},
},
{
@@ -63,7 +66,7 @@ document.addEventListener("DOMContentLoaded", function () {
title: "Focus Shifters",
description:
"If some element or part of the page needs user's interaction, you can just call the highlight method. Boarding will take care of driving the user there",
- position: "bottom",
+ prefferedSide: "bottom",
},
},
{
@@ -72,7 +75,7 @@ document.addEventListener("DOMContentLoaded", function () {
title: "Highly Customizable",
description:
"Boarding has a powerful API allowing you to customize the experience as much as you can.",
- position: "bottom",
+ prefferedSide: "bottom",
},
},
{
@@ -81,7 +84,7 @@ document.addEventListener("DOMContentLoaded", function () {
title: "User Friendly",
description:
"Your users can control it with the arrow keys on keyboard, or escape to close it",
- position: "bottom",
+ prefferedSide: "bottom",
},
},
{
@@ -121,7 +124,8 @@ document.addEventListener("DOMContentLoaded", function () {
const animatedTourBoarding = new Boarding({
animate: true,
opacity: 0.8,
- padding: 5,
+ padding: 10,
+ offset: 20,
showButtons: true,
});
@@ -153,7 +157,7 @@ document.addEventListener("DOMContentLoaded", function () {
});
try {
- document.querySelectorAll("pre code").forEach((element) => {
+ document.querySelectorAll