{"id":25888164,"url":"https://github.com/bk-chris/javascript-reuseables","last_synced_at":"2026-05-31T20:31:08.840Z","repository":{"id":278982122,"uuid":"937395518","full_name":"BK-Chris/javascript-reuseables","owner":"BK-Chris","description":"Javascript reusable collection.","archived":false,"fork":false,"pushed_at":"2025-02-23T12:49:40.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T18:39:56.583Z","etag":null,"topics":["components","javascrip","module","reuseable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BK-Chris.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-23T00:02:45.000Z","updated_at":"2025-02-23T12:49:43.000Z","dependencies_parsed_at":"2025-02-23T00:47:30.928Z","dependency_job_id":null,"html_url":"https://github.com/BK-Chris/javascript-reuseables","commit_stats":null,"previous_names":["bk-chris/javascript-reuseables"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BK-Chris/javascript-reuseables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BK-Chris%2Fjavascript-reuseables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BK-Chris%2Fjavascript-reuseables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BK-Chris%2Fjavascript-reuseables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BK-Chris%2Fjavascript-reuseables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BK-Chris","download_url":"https://codeload.github.com/BK-Chris/javascript-reuseables/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BK-Chris%2Fjavascript-reuseables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33748607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["components","javascrip","module","reuseable"],"created_at":"2025-03-02T18:32:11.972Z","updated_at":"2026-05-31T20:31:07.751Z","avatar_url":"https://github.com/BK-Chris.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Javascript Reusables\n\nWelcome to my repository of reusable JavaScript modules! This collection is designed to help developers save time and streamline their projects by providing ready-to-use components. Hopefully, I will be adding new modules over time, so stay tuned for updates and enhancements.\n\n## Table of Contents\n\nThe `TableOfContent` class represents a Table of Contents for a web page. This class can be used to dynamically generate a Table of Contents based on the headings within a specified root element. It is designed to be highly flexible, allowing multiple instances to be created for different sections of a page. Additionally, you can style the generated Table of Contents using your own CSS file.\n\n**Constructor Parameters:**\n\n- `headings` (string) [optional]: The string used by `querySelectorAll()` to select headings. Defaults to selecting all heading levels (`\"h1, h2, h3, h4, h5, h6\"`).\n\n- `container` (HTMLElement) [optional]: The container that will hold the generated Table of Contents. Defaults to a new `div` element.\n\n- `prefix` (string) [optional]: The container's id if a `div` is provided, otherwise defaults to `\"toc\"`.\n\n- `rootElement` (HTMLElement) [optional]: The root element from which to gather headings. Defaults to the `document` object.\n\n**Description:**\n\n- This class can be used with or without parameters. If no parameters are provided, default values will be used, but it is recommended to specify at least the container element.\n\n- Multiple instances of the `TableOfContent` class can be created and used on the same page, each with different configurations. For example, if you have a lot of headings or any elements with a `textContent` in separate containers, you could make use of this feature.\n\n- To style the generated Table of Contents, create your own CSS file and use the provided CSS class names.\n\n**Usage**\n\n```javascript\nimport { TableOfContent } from \"./path/to/TableOfContent.js\";\n\n// Example usage with parameters\nconst toc1 = new TableOfContent({\n  headings: \"h1, h2, h3\",\n  container: document.getElementById(\"toc-container-1\"),\n  prefix: \"custom-toc-1\",\n  rootElement: document.getElementById(\"content-section-1\"),\n});\ntoc1.generateTOC();\n\n// Example usage with default parameters\nconst toc2 = new TableOfContent();\ntoc2.generateTOC();\n\n// Example usage with different configuration\nconst toc3 = new TableOfContent({\n  headings: \"h2, h3, h4\",\n  container: document.getElementById(\"toc-container-2\"),\n  prefix: \"custom-toc-2\",\n  rootElement: document.getElementById(\"content-section-2\"),\n});\ntoc3.generateTOC();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbk-chris%2Fjavascript-reuseables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbk-chris%2Fjavascript-reuseables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbk-chris%2Fjavascript-reuseables/lists"}