Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revisiting handholdJS #3

Merged
merged 6 commits into from
Jun 29, 2023
Merged

Revisiting handholdJS #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fdb22a7
chore: updates packages, refactors and cleans up code
mrtrimble Jun 27, 2023
020b457
feat: adds edge detection for modal
mrtrimble Jun 28, 2023
321677a
feat: adds resizeObserver to update positions on screen resizing
mrtrimble Jun 28, 2023
927646d
bugfix: updates todo list, working on scrolling issues
mrtrimble Jun 28, 2023
7a34a86
chore: updates readme
mrtrimble Jun 29, 2023
aa3f1be
refactor: removes todos from comments, turned into issues
mrtrimble Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 20 additions & 36 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ const handhold = new Handhold();
## Creating steps
Create either a JSON file or JavaScript object and include the steps in an array:

handhold.json:
handhold-config.json:
```JSON
handhold: {
steps: [
{
"steps": [
{
"number": "1",
"title": "Step 1",
Expand All @@ -58,9 +58,9 @@ handhold: {
## Customization
Inside your created JSON or JavaScript object, create a `config` property to include directions for customization:

handhold.json:
handhold-config.json:
```JSON
handhold: {
{
"config": {
// Config...
},
Expand All @@ -72,50 +72,34 @@ handhold: {

You can customize the following Handhold elements:
- `boundingBox` - Box that wraps around the highlighted element.
- `classList` - Array of CSS classes.
- `style` - Object containing any CSS properties you want
to apply to the element.
- `overlay` - Backdrop used to emphasize the highlighted element.
- `dimBackground` - Boolean value to determine whether it should display the dimmed out background.
- `classList` - Array of CSS classes.
- `style` - Object containing any CSS properties you want
to apply to the element.
- `modal` - Modal element where steps will be displayed.
- `classList` - Array of CSS classes.
- `style` - Object containing any CSS properties you want
to apply to the element.
- `nextBtn` - Button that moves to the next step.
- `classList` - Array of CSS classes.
- `style` - Object containing any CSS properties you want
to apply to the element.
- `prevBtn` - Button that moves to the next step.
- `classList` - Array of CSS classes.
- `style` - Object containing any CSS properties you want
to apply to the element.
- `nextButton` - Button that moves to the next step.
- `previousButton` - Button that moves to the next step.
- `finishBtn` - Button that moves to the next step.
- `classList` - Array of CSS classes.
- `style` - Object containing any CSS properties you want
to apply to the element.

Each Handhold element can be customized using the following properties:

- `classList` - An array of classes to be applied to the element.
- `style` - An object containing CSS properties and values to apply to the element.

### Full Example
handhold.json:
handhold-config.json:
```JSON
{
"config": {
"boundingBox": {
"style": {
"backgroundColor": "white",
"outlineStyle": "solid",
"outlineColor": "var(--navy)"
}
},
"finishBtn": {
"classList": ["button", "button--orange", "text--white"]
},
"nextBtn": {
"nextButton": {
"classList": ["button"]
},
"prevBtn": {
"previousButton": {
"classList": ["button"]
}
},
Expand Down Expand Up @@ -146,10 +130,10 @@ main.js:
```JavaScript
import Handhold from '@ritterim/handholdJS';
import '../path/to/node_modules/@ritterim/handholdJS/dist/style.css';
import data from '../path/to/handhold.json'
import handholdConfig from '../path/to/handhold-config.json'

const handhold = new Handhold();
handhold.setup(data);
handhold.setup(handholdConfig);
```

## Initiate Handhold
Expand All @@ -159,10 +143,10 @@ main.js:
```JavaScript
import Handhold from '@ritterim/handholdJS';
import '../path/to/node_modules/@ritterim/handholdJS/dist/style.css';
import data from '../path/to/handhold.json'
import handholdConfig from '../path/to/handhold-config.json'

const handhold = new Handhold();
handhold.setup(data);
handhold.setup(handholdConfig);
handhold.init();
```

Expand All @@ -171,7 +155,7 @@ Inside your HTML you must include a clickable "start" element and pair the steps

On the start element, apply the `data-handhold-start` data attribute.

On related HTML elements add the `data-step=""` attribute and include the matching step number you want to display.
On related HTML elements add the `data-step` attribute and give it the value of the corresponding step number you want to display.

index.html:
```HTML
Expand Down
Loading