Skip to content

Commit

Permalink
use id to map elements to steps
Browse files Browse the repository at this point in the history
  • Loading branch information
Azbury committed Feb 29, 2024
1 parent b96d69f commit e24b39d
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 26 deletions.
8 changes: 4 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h1 class="text--center text--white my-3">Dashboard</h1>
<div class="block-container cards blocks px-2 pb-3">
<div class="block tablet-up-6 laptop-up-3 desktop-up-2">
<div class="card rounded-2"
data-step="1">
id="step-1">
<div class="card__content">
<h2>Headline</h2>
<p class="skeleton mt-3"
Expand All @@ -52,7 +52,7 @@ <h2>Headline</h2>
</div>
<div class="block tablet-up-6 laptop-up-6 desktop-up-8">
<div class="card rounded-2"
data-step="2">
id="step-2">
<div class="card__content h-100">
<div class="card__header mb-0">
<div class="card__group">
Expand All @@ -66,7 +66,7 @@ <h2 class="card__title text--light">Your Daily Graph</h2>
</div>
<div class="block tablet-up-6 laptop-up-3 desktop-up-2">
<div class="card rounded-2"
data-step="3">
id="step-3">
<div class="card__content h-100">
<div class="card__header">
<div class="card__group">
Expand All @@ -80,7 +80,7 @@ <h2 class="card__title text--light">Your Daily Graph</h2>
</div>
<div class="block tablet-up-6 laptop-up-4 desktop-up-2">
<div class="card rounded-2"
data-step="4">
id="step-4">
<div class="card__content h-100">
<div class="card__header mb-0">
<div class="card__group">
Expand Down
2 changes: 0 additions & 2 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import Handhold from './src/handhold';
import handholdData from './steps.json';

const startBtn = document.getElementById('start-button');
console.log({ startBtn });

const handhold = new Handhold(startBtn);
handhold.setup(handholdData);
handhold.init();
26 changes: 6 additions & 20 deletions src/handhold.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,13 @@ export default class Handhold {
this._currentStepElement;
this._mappedSteps;
this._startBtn = startElement || document.querySelector('[data-start-handhold]');
this._stepElements;
this._steps;
this._listeners;
this._root;
}

// Imports steps from JSON or JS Object
setup(data) {
this.setStepElements();

if (data.steps) {
this._steps = data.steps;
Expand All @@ -27,13 +25,6 @@ export default class Handhold {
return;
}

setStepElements() {
const elements = Array.from(document.querySelectorAll('[data-step]'));
this._stepElements = elements.length ? elements : [];

return;
}

// applies style configuration if available
applyConfig() {
if (this._config) {
Expand Down Expand Up @@ -91,17 +82,12 @@ export default class Handhold {

// Matches steps to the related element in the DOM,
mapSteps() {
if (this._stepElements.length) {
this._mappedSteps = this._stepElements.map((el) => {
const matchingStep = this._steps.find((step) => {
return parseInt(step.number) === parseInt(el.dataset.step);
});
return {
...matchingStep,
element: el,
};
});
}
this._mappedSteps = this._steps.map(step => {
return {
...step,
element: document.getElementById(step.elementId)
}
})

if (this._mappedSteps && this._mappedSteps.length) {
this._currentStepElement = this._mappedSteps.find((step) => {
Expand Down
4 changes: 4 additions & 0 deletions steps.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,25 @@
"steps": [
{
"number": "1",
"elementId": "step-1",
"title": "Your Daily Headlines",
"content": "This is where all the latest news will appear."
},
{
"number": "2",
"elementId": "step-2",
"title": "Daily Graph",
"content": "The daily graph will display relevant information."
},
{
"number": "3",
"elementId": "step-3",
"title": "Another Graph",
"content": "This will show even more relevant information"
},
{
"number": "4",
"elementId": "step-4",
"title": "Mmmm... Pie",
"content": "This will show even more relevant information"
}
Expand Down

0 comments on commit e24b39d

Please sign in to comment.