From cce2b0c7a22991d08651dace2eba221febedc50c Mon Sep 17 00:00:00 2001 From: josias-r Date: Sat, 29 Oct 2022 17:50:57 +0200 Subject: [PATCH] fix: fix demo errors --- index.html | 74 +++++++++++++---------------------------- package-lock.json | 16 +++++++++ package.json | 1 + src/boarding-tests.ts | 32 ++++++++++++++++++ src/lib/boarding.ts | 8 +++-- src/lib/core/popover.ts | 18 +++++----- src/main.ts | 60 +++++++++++++++++++-------------- 7 files changed, 122 insertions(+), 87 deletions(-) create mode 100644 src/boarding-tests.ts diff --git a/index.html b/index.html index db5b6f9..ca02056 100644 --- a/index.html +++ b/index.html @@ -272,68 +272,42 @@

Popover Positioning

- Left, Left TopTop, Start - Left CenterTop, Center - Left BottomTop, End - - Right, Right TopBottom, Start - Right CenterBottom, Center - Right BottomBottom, End - - Top, Top-leftLeft, Start - Top CenterLeft, Center - Top RightLeft, End - - Bottom, Bottom leftRight, Start - Bottom centerRight, Center - Bottom right - - Mid CenterRight, End -

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("pre code").forEach((element) => { hljs.highlightBlock(element); }); } catch (e) { @@ -198,11 +202,11 @@ document.addEventListener("DOMContentLoaded", function () { e.preventDefault(); singleBoardingWithPopover.highlight({ element: "#single-element-with-popover", - showButtons: false, popover: { + showButtons: false, title: "Did you know?", description: "You can add HTML in title or description also!", - position: "top", + prefferedSide: "top", }, }); }); @@ -218,11 +222,11 @@ document.addEventListener("DOMContentLoaded", function () { singleBoardingWithPopoverPosition.highlight({ element: "#single-element-with-popover-position", - showButtons: false, popover: { + showButtons: false, title: "Did you know?", description: "You can add HTML in title or description also!", - position: "top", + prefferedSide: "top", }, }); }); @@ -239,16 +243,22 @@ document.addEventListener("DOMContentLoaded", function () { let id = (e.target as HTMLElement).id; let alignment = (e.target as HTMLElement).dataset.alignment; + let preferredside = (e.target as HTMLElement).dataset.preferredside; if (!alignment) return; + console.log(e.target); + positionBtnsBoarding.highlight({ - element: `#${id}`, - showButtons: false, + element: id + ? `#${id}` + : `#position-btns [data-alignment="${alignment}"][data-preferredside="${preferredside}"]`, popover: { + showButtons: false, title: "Did you know?", description: "You can add HTML in title or description also!", - position: alignment, + alignment: alignment as any, + prefferedSide: preferredside as any, }, }); }); @@ -265,11 +275,11 @@ document.addEventListener("DOMContentLoaded", function () { htmlBoarding.highlight({ element: "#single-element-with-popover-html", - showButtons: false, popover: { + showButtons: false, title: "Tags in title or body", description: "Body can also have html tags!", - position: "top", + prefferedSide: "top", }, }); }); @@ -292,7 +302,7 @@ document.addEventListener("DOMContentLoaded", function () { popover: { title: "Title for the Popover", description: "Description for it", - position: "top", // can be `top`, `left`, `right`, `bottom` + prefferedSide: "top", // can be `top`, `left`, `right`, `bottom` }, }); }); @@ -302,7 +312,7 @@ document.addEventListener("DOMContentLoaded", function () { ///////////////////////////////////////////// const singleNoClose = new Boarding({ allowClose: false, - position: "top", + prefferedSide: "top", }); singleNoClose.defineSteps([ @@ -318,7 +328,7 @@ document.addEventListener("DOMContentLoaded", function () { popover: { title: "Title on Popover", description: "Body of the popover", - position: "top", + prefferedSide: "top", }, }, ]); @@ -341,7 +351,7 @@ document.addEventListener("DOMContentLoaded", function () { className: "first-step-popover-class", title: "Title on Popover", description: "Body of the popover", - position: "top", + prefferedSide: "top", }, }, { @@ -349,7 +359,7 @@ document.addEventListener("DOMContentLoaded", function () { popover: { title: "Title on Popover", description: "Body of the popover", - position: "bottom", + prefferedSide: "bottom", }, }, { @@ -357,7 +367,7 @@ document.addEventListener("DOMContentLoaded", function () { popover: { title: "Title on Popover", description: "Body of the popover", - position: "top", + prefferedSide: "top", }, }, { @@ -365,7 +375,7 @@ document.addEventListener("DOMContentLoaded", function () { popover: { title: "Title on Popover", description: "Body of the popover", - position: "top", + prefferedSide: "top", }, }, { @@ -373,7 +383,7 @@ document.addEventListener("DOMContentLoaded", function () { popover: { title: "Title on Popover", description: "Body of the popover", - position: "top", + prefferedSide: "top", }, }, ]); @@ -388,7 +398,7 @@ document.addEventListener("DOMContentLoaded", function () { const newURL = location.href.split("?")[0]; if (newURL !== location.href) { - window.location = newURL; + (window.location as any) = newURL; window.location.href = newURL; } });