https://github.com/crsten/godfather
A man who doesn't spend time with his customers can never be a real man.
https://github.com/crsten/godfather
Last synced: over 1 year ago
JSON representation
A man who doesn't spend time with his customers can never be a real man.
- Host: GitHub
- URL: https://github.com/crsten/godfather
- Owner: crsten
- License: mit
- Created: 2017-11-01T08:54:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T03:19:33.000Z (over 2 years ago)
- Last Synced: 2024-09-20T03:08:42.337Z (almost 2 years ago)
- Language: JavaScript
- Size: 1020 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Godfather
[](https://travis-ci.org/crsten/godfather)
[](https://www.npmjs.com/package/godfather)
[](https://www.npmjs.com/package/godfather)
> A man who doesn't spend time with his customers can never be a real man.
Simple vanilla plugin to create good & beautiful onscreen-guides.
## Demo
[Check out a simple demo](https://crsten.github.io/godfather/)
## Installation
`npm install godfather`
## Wrappers
- Vue – [vue-godfather](https://github.com/crsten/vue-godfather)
## API
| Function | Description | Return |
| ----------------------------------------------------------------- | -------------------------- | -------- |
| register(id, target, options) -> check "Parameters" for more info | Register a new guide entry | Instance |
| unregister(id) | Unregister a guide entry | – |
| show(id) | Show a guide | – |
| hide(id) | Hide a guide | – |
| setDefault(options) | Change the default options | – |
## Parameters
### id
| Type | Description |
| ------ | ----------------------------------- |
| String | Set an unique id for identification |
### target
Guides can be attached to DOM elements
| Type | Description |
| ------ | ----------- |
| String | Selector |
| Object | DOM-Element |
### options
This plugin can be customized, the following options are enabled:
| Key | Type | Description | Default |
| -------------- | ---------------- | ---------------------------------------------------------------------------------- | --------- |
| title | String | The displayed title | null |
| content | String | The displayed content | null |
| image | String | The displayed image | null |
| hint | Boolean | Adds a small hint to the target | false |
| attachTo | String | Define where the tooltip should attach. Values are: "hint", "element", DOM element | "element" |
| placement | String | Defines the placement of the tooltip element | auto |
| scrollIntoView | Boolean | Scrolls the guide into view | true |
| clickAway | Boolean | Cancel guiding if user clicks outside guide element | true |
| prev | Function | Function to be executet on prev | null |
| next | String, Function | id of the next guide to show or function to be executet | null |
| overlay | Boolean | add an overlay on the background and highlight the target | false |
| theme | Object | ... | ... |
| └-- background | String | Hex or rgb background | "#222" |
| └-- color | String | Hex or rgb text color | "white" |
| labels | Object | ... | ... |
| └-- prev | String | label for prev button | "<" |
| └-- next | String | label for next button | ">" |
| └-- close | String | label for close button | "✕" |
## Instance object
The register method return an instance of the Godfather entry with the following functions.
| Function | Description |
| --------------------------------- | ------------------------------------------------------------------ |
| unregister() | removes the entry |
| show() | shows the entry |
| hide() | hides the entry |
| addEventListener(event, callback) | hook to predefined events: "show", "hide", "close", "prev", "next" |
## Example
```js
let entry = Godfather.register("don", ".sample-selector", {
title: "Don Vito Corleone",
content: "I'm gonna make him an offer he can't refuse",
image: "don-vito-corleone.png",
hint: true,
next: "michael",
});
Godfather.show("don");
entry.unregister();
entry.addEventListener("close", (e) => e.unregister());
entry.removeEventListener("close", (e) => e.unregister());
```
## Development & Testing
`npm run dev` starts webpack with watch mode.
## License
[The MIT License](http://opensource.org/licenses/MIT)
Copyright (c) Carsten Jacobsen