{"id":26689570,"url":"https://github.com/ritterim/handholdjs","last_synced_at":"2025-04-12T20:24:27.143Z","repository":{"id":74360260,"uuid":"521651508","full_name":"ritterim/handholdJS","owner":"ritterim","description":"JS configurable hand held walk-through for the UI","archived":false,"fork":false,"pushed_at":"2024-05-28T19:15:03.000Z","size":186,"stargazers_count":4,"open_issues_count":0,"forks_count":5,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-26T14:46:31.631Z","etag":null,"topics":["hacktoberfest","javascript","js","walkthrough"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ritterim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-05T13:37:37.000Z","updated_at":"2024-12-08T08:38:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c8a6f0e-ddec-436a-aa45-21873e263425","html_url":"https://github.com/ritterim/handholdJS","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritterim%2FhandholdJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritterim%2FhandholdJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritterim%2FhandholdJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritterim%2FhandholdJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ritterim","download_url":"https://codeload.github.com/ritterim/handholdJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248626917,"owners_count":21135760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","js","walkthrough"],"created_at":"2025-03-26T14:38:19.144Z","updated_at":"2025-04-12T20:24:27.123Z","avatar_url":"https://github.com/ritterim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# handholdJS\nA configurable JavaScript hand held walk-through for user interfaces.\n## Table of Contents\n- [handholdJS](#handholdjs)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Adding to project](#adding-to-project)\n  - [Creating steps](#creating-steps)\n  - [Customization](#customization)\n    - [Full Example](#full-example)\n  - [Adding steps](#adding-steps)\n  - [Initiate Handhold](#initiate-handhold)\n  - [Matching steps to DOM elements](#matching-steps-to-dom-elements)\n  - [Developer Notes](#developer-notes)\n    - [Project setup](#project-setup)\n    - [Dependencies](#dependencies)\n## Installation\nInstall package via NPM.\n\n`npm install @ritterim/handholdJS`\n\n## Adding to project\nImport handholdJS into your project and instantiate it to a new variable.\n\nmain.js:\n```JavaScript\nimport Handhold from '@ritterim/handholdJS';\nimport '../path/to/node_modules/@ritterim/handholdJS/dist/style.css';\n\nconst handhold = new Handhold();\n```\n## Creating steps\nCreate either a JSON file or JavaScript object and include the steps in an array:\n\nhandhold-config.json:\n```JSON\n{\n  \"steps\": [\n    {\n      \"number\": \"1\",\n      \"title\": \"Step 1\",\n      \"description\": \"Lorem ipsum dolor sit amet\"\n    },\n    {\n      \"number\": \"2\",\n      \"title\": \"Step 2\",\n      \"description\": \"Lorem ipsum dolor sit amet\"\n    },\n    {\n      \"number\": \"3\",\n      \"title\": \"Step 3\",\n      \"description\": \"Lorem ipsum dolor sit amet\"\n    }\n  ]\n}\n```\n\n## Customization\nInside your created JSON or JavaScript object, create a `config` property to include directions for customization:\n\nhandhold-config.json:\n```JSON\n{\n  \"config\": {\n    // Config...\n  },\n  \"steps\": [\n    // Steps...\n  ]\n}\n```\n\nYou can customize the following Handhold elements:\n- `boundingBox` - Box that wraps around the highlighted element.\n- `modal` - Modal element where steps will be displayed.\n- `nextButton` - Button that moves to the next step.\n- `previousButton` - Button that moves to the next step.\n- `finishBtn` - Button that moves to the next step.\n\nEach Handhold element can be customized using the following properties:\n\n- `classList` - An array of classes to be applied to the element.\n- `style` - An object containing CSS properties and values to apply to the element.\n\n### Full Example\nhandhold-config.json:\n```JSON\n{\n  \"config\": {\n    \"boundingBox\": {\n      \"style\": {\n        \"outlineStyle\": \"solid\",\n        \"outlineColor\": \"var(--navy)\"\n      }\n    },\n    \"finishBtn\": {\n      \"classList\": [\"button\", \"button--orange\", \"text--white\"]\n    },\n    \"nextButton\": {\n      \"classList\": [\"button\"]\n    },\n    \"previousButton\": {\n      \"classList\": [\"button\"]\n    }\n  },\n  \"steps\": [\n    {\n      \"number\": \"1\",\n      \"title\": \"Step 1\",\n      \"description\": \"Lorem ipsum dolor sit amet\"\n    },\n    {\n      \"number\": \"2\",\n      \"title\": \"Step 2\",\n      \"description\": \"Lorem ipsum dolor sit amet\"\n    },\n    {\n      \"number\": \"3\",\n      \"title\": \"Step 3\",\n      \"description\": \"Lorem ipsum dolor sit amet\"\n    }\n  ]\n}\n```\n\n## Adding steps\nImport the JSON file into your JavaScript and pass it into the `.setup()` method.\n\nmain.js:\n```JavaScript\nimport Handhold from '@ritterim/handholdJS';\nimport '../path/to/node_modules/@ritterim/handholdJS/dist/style.css';\nimport handholdConfig from '../path/to/handhold-config.json'\n\nconst handhold = new Handhold();\nhandhold.setup(handholdConfig);\n```\n\n## Initiate Handhold\nCall the `.init()` method.\n\nmain.js:\n```JavaScript\nimport Handhold from '@ritterim/handholdJS';\nimport '../path/to/node_modules/@ritterim/handholdJS/dist/style.css';\nimport handholdConfig from '../path/to/handhold-config.json'\n\nconst handhold = new Handhold();\nhandhold.setup(handholdConfig);\nhandhold.init();\n```\n\n## Matching steps to DOM elements\nInside your HTML you must include a clickable \"start\" element and pair the steps to relevant HTML elements.\n\nOn the start element, apply the `data-handhold-start` data attribute.\n\nOn related HTML elements add the `data-step` attribute and give it the value of the corresponding step number you want to display.\n\nindex.html:\n```HTML\n\u003c!-- On start button: --\u003e\n\u003cbutton type=\"button\" data-start-handhold\u003e\n  Start Product Tour\n\u003c/button\u003e\n\n\u003c!-- On elements: --\u003e\n\u003cdiv class=\"element\" data-step=\"1\"\u003e\n  \u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"element\" data-step=\"2\"\u003e\n  \u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"element\" data-step=\"3\"\u003e\n  \u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Developer Notes\n\n### Project setup\n- Fork repo and clone to local machine\n- Inside the project, run `npm install` to install all dependencies\n- Start the project by running `npm run dev`\n\n### Dependencies\n- Autoprefixer\n- PostCSS\n- PostCSS CLI\n- Sass\n- Vite\n- Vite Plugin Banner","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritterim%2Fhandholdjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fritterim%2Fhandholdjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritterim%2Fhandholdjs/lists"}