{"id":17831206,"url":"https://github.com/crsten/godfather","last_synced_at":"2025-03-19T07:31:52.091Z","repository":{"id":56242596,"uuid":"109108813","full_name":"crsten/godfather","owner":"crsten","description":"A man who doesn't spend time with his customers can never be a real man.","archived":false,"fork":false,"pushed_at":"2024-02-21T03:19:33.000Z","size":1046,"stargazers_count":2,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-09-20T03:08:42.337Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/crsten.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}},"created_at":"2017-11-01T08:54:16.000Z","updated_at":"2024-01-18T13:23:49.000Z","dependencies_parsed_at":"2022-08-15T15:20:28.371Z","dependency_job_id":null,"html_url":"https://github.com/crsten/godfather","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fgodfather","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fgodfather/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fgodfather/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crsten%2Fgodfather/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crsten","download_url":"https://codeload.github.com/crsten/godfather/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221724230,"owners_count":16870236,"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":[],"created_at":"2024-10-27T19:42:23.073Z","updated_at":"2024-10-27T19:42:23.685Z","avatar_url":"https://github.com/crsten.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Godfather\n\n[![Build Status](https://travis-ci.org/crsten/godfather.svg?branch=master\u0026style=flat-square)](https://travis-ci.org/crsten/godfather)\n[![npm](https://img.shields.io/npm/dt/godfather.svg?style=flat-square)](https://www.npmjs.com/package/godfather)\n[![npm](https://img.shields.io/npm/v/godfather.svg?style=flat-square)](https://www.npmjs.com/package/godfather)\n\n\u003e A man who doesn't spend time with his customers can never be a real man.\n\nSimple vanilla plugin to create good \u0026 beautiful onscreen-guides.\n\n## Demo\n\n[Check out a simple demo](https://crsten.github.io/godfather/)\n\n## Installation\n\n`npm install godfather`\n\n## Wrappers\n\n- Vue – [vue-godfather](https://github.com/crsten/vue-godfather)\n\n## API\n\n| Function                                                          | Description                | Return   |\n| ----------------------------------------------------------------- | -------------------------- | -------- |\n| register(id, target, options) -\u003e check \"Parameters\" for more info | Register a new guide entry | Instance |\n| unregister(id)                                                    | Unregister a guide entry   | –        |\n| show(id)                                                          | Show a guide               | –        |\n| hide(id)                                                          | Hide a guide               | –        |\n| setDefault(options)                                               | Change the default options | –        |\n\n## Parameters\n\n### id\n\n| Type   | Description                         |\n| ------ | ----------------------------------- |\n| String | Set an unique id for identification |\n\n### target\n\nGuides can be attached to DOM elements\n\n| Type   | Description |\n| ------ | ----------- |\n| String | Selector    |\n| Object | DOM-Element |\n\n### options\n\nThis plugin can be customized, the following options are enabled:\n\n| Key            | Type             | Description                                                                        | Default   |\n| -------------- | ---------------- | ---------------------------------------------------------------------------------- | --------- |\n| title          | String           | The displayed title                                                                | null      |\n| content        | String           | The displayed content                                                              | null      |\n| image          | String           | The displayed image                                                                | null      |\n| hint           | Boolean          | Adds a small hint to the target                                                    | false     |\n| attachTo       | String           | Define where the tooltip should attach. Values are: \"hint\", \"element\", DOM element | \"element\" |\n| placement      | String           | Defines the placement of the tooltip element                                       | auto      |\n| scrollIntoView | Boolean          | Scrolls the guide into view                                                        | true      |\n| clickAway      | Boolean          | Cancel guiding if user clicks outside guide element                                | true      |\n| prev           | Function         | Function to be executet on prev                                                    | null      |\n| next           | String, Function | id of the next guide to show or function to be executet                            | null      |\n| overlay        | Boolean          | add an overlay on the background and highlight the target                          | false     |\n| theme          | Object           | ...                                                                                | ...       |\n| └-- background | String           | Hex or rgb background                                                              | \"#222\"    |\n| └-- color      | String           | Hex or rgb text color                                                              | \"white\"   |\n| labels         | Object           | ...                                                                                | ...       |\n| └-- prev       | String           | label for prev button                                                              | \"\u003c\"       |\n| └-- next       | String           | label for next button                                                              | \"\u003e\"       |\n| └-- close      | String           | label for close button                                                             | \"✕\"       |\n\n## Instance object\n\nThe register method return an instance of the Godfather entry with the following functions.\n\n| Function                          | Description                                                        |\n| --------------------------------- | ------------------------------------------------------------------ |\n| unregister()                      | removes the entry                                                  |\n| show()                            | shows the entry                                                    |\n| hide()                            | hides the entry                                                    |\n| addEventListener(event, callback) | hook to predefined events: \"show\", \"hide\", \"close\", \"prev\", \"next\" |\n\n## Example\n\n```js\nlet entry = Godfather.register(\"don\", \".sample-selector\", {\n  title: \"Don Vito Corleone\",\n  content: \"I'm gonna make him an offer he can't refuse\",\n  image: \"don-vito-corleone.png\",\n  hint: true,\n  next: \"michael\",\n});\n\nGodfather.show(\"don\");\n\nentry.unregister();\nentry.addEventListener(\"close\", (e) =\u003e e.unregister());\nentry.removeEventListener(\"close\", (e) =\u003e e.unregister());\n```\n\n## Development \u0026 Testing\n\n`npm run dev` starts webpack with watch mode.\n\n## License\n\n[The MIT License](http://opensource.org/licenses/MIT)\nCopyright (c) Carsten Jacobsen\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrsten%2Fgodfather","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrsten%2Fgodfather","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrsten%2Fgodfather/lists"}