{"id":18623572,"url":"https://github.com/codica2/site-tutorial","last_synced_at":"2026-05-01T04:37:10.573Z","repository":{"id":98304080,"uuid":"178414879","full_name":"codica2/site-tutorial","owner":"codica2","description":"Is easy, animated, a lot of functionality, flexible, step tutorial for your site.","archived":false,"fork":false,"pushed_at":"2019-03-29T13:58:11.000Z","size":8823,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-17T06:41:01.889Z","etag":null,"topics":["jquery","jquery-ui","popup","tutorials"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/codica2.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":"2019-03-29T13:55:31.000Z","updated_at":"2019-04-12T05:37:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"bc26ce02-faa7-440f-b857-a1e0eadfb5e3","html_url":"https://github.com/codica2/site-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codica2/site-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fsite-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fsite-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fsite-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fsite-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codica2","download_url":"https://codeload.github.com/codica2/site-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codica2%2Fsite-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32485297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["jquery","jquery-ui","popup","tutorials"],"created_at":"2024-11-07T04:25:05.631Z","updated_at":"2026-05-01T04:37:10.554Z","avatar_url":"https://github.com/codica2.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSite-Tutorial\u003c/h1\u003e\n\nIs easy, animated, a lot of functionality, flexible, step tutorial for your site.\n\n\u003cp align=\"center\"\u003e\n \u003cimg width=\"800px\" src=\"readme.gif\" \u003e\n\u003c/p\u003e\n\nYou can test plugin. Clone project and start the next commands:\n\n```\nnpm install\ngulp start\n```\n\n## Usage\n\n\u003ch3\u003eHTML\u003c/h3\u003e\n\n```html\n\u003cdiv site-tutorial-step=\"1\" tutorial-title=\"Title 1\" tutorial-text=\"Text\" /\u003e\n\u003cdiv site-tutorial-step=\"2\" tutorial-title=\"Title 2\" tutorial-text=\"Text\" /\u003e\n```\n\n\u003ch3\u003eJavaScript\u003c/h3\u003e\n\n```javascript\nvar options = { time: 1500 };\n\nvar tutorial = new SiteTutorial();\n\ndocument.querySelector(\"elem\")\n  .addEventListener(\"click\", function() {\n    tutorial.initialize();\n  });\n```\n\n## Getting started\n\nJust download plugin and include to your HTML.\n\n```html\n\u003c!-- JS file --\u003e\n\u003cscript src=\"path/to/site-tutorial.js\"\u003e\u003c/script\u003e\n```\n\nSite-Tutorial is very simple to use.\n\n1. Choose node elements which you want to see highlighted and set it main attribute `site-tutorial-step=\"1\"` with step parameter;\n2. Also you can add `tutorial-title=\"title\"` and `tutorial-text=\"text\"` attributes for title and text respectively;\n3. Add event listener to node elem and call `tutorial.initialize()`;\n4. Create js file and create object and pass options to argument `new SiteTutorial(options)`;\n\n## Popup\n\nYou can create custom popup or use default popup. For add custom popup just pass parameter to options `popup: DOM element`. Default popup stay like default parameter, but for use it you need to connect styles. Link to styles - [download](https://www.google.com  \"Default popup styles\").\n\n```js\nvar options = { popup: document.getElementById(\"DOM-Element\") };\n\nnew SiteTutorial(options);\n```\n\n\u003ch3\u003eCustom popup setting\u003c/h3\u003e\n\n| id                            | Description                                                            |\n| ----------------------------- | ---------------------------------------------------------------------- |\n| `site-tutorial-control-panel` | Main block. Add this id for block which will follow to highlight area. |\n| `stop-site-tutorial`          | This stops tutorial and scroll page to top.                            |\n| `next-site-tutorial`          | It switchs to next step.                                               |\n| `prev-site-tutorial`          | It switchs to previous step.                                           |\n\n## Progress bar\n\nYou can connect progress bar, add `progressBar` property to oprions and pass the next parameters.\n\n```js\nvar options = {\n  progressBar: {\n    color: \"#FF3A41\",\n    counter: true\n  }\n};\n\nnew SiteTutorial(options);\n```\n\n| Parameters | Default value | Type        | Description                |\n| ---------- | ------------- | ----------- | -------------------------- |\n| `color`    | `#000`        | **string**  | Set color for progress bar |\n| `counter`  | `false`       | **boolean** | Add step counter           |\n\n\n\u003ch3\u003e! Important\u003c/h3\u003e\n\n\u003e For use progress bar in custom popup you need to add block with `id=\"progress-site-tutorial\"` and add that block to `div` with required `width`.\n\n\n## Steps\n\nSteps is a main part tutorial. You can control every step through `steps` option. Every step has `title`, `text`, `callback`, parameters and steps begin from `0`.\n\n\u003e `title`, `text`, properties has higher priority, then value in attributes.\n\n```js\nvar options = {\n  steps: {\n    0: {\n      title: \"Title\",\n      text: \"Text\",\n      callback: function(nodeElem) {\n        alert(\"innerHTML: \" + nodeElem.innerHTML);\n      }\n    },\n    1: {\n      callback: function(nodeElem) {\n        nodeElem.style.backgroundColor = \"#fff\";\n      }\n    }\n  }\n}\n\nnew SiteTutorial(options);\n```\n\n| Parameters | Default value | Type         | Description                                                          |\n| ---------- | ------------- | ------------ | -------------------------------------------------------------------- |\n| `title`    | `\"\"`          | **string**   | Set title on step                                                    |\n| `text`     | `\"\"`          | **string**   | Set text on step                                                     |\n| `callback` | `null`        | **function** | Call function after end animation. Function has current DOM Element. |\n\n## Async callback\n\nEvery step has one common callback and current step callback (see above). Async callback will allow to await result and in process execution all button will be block, that willn't allow to do next, or previous step or stop tutorial. For that return Promise. See how to this use below.\n\n\n```js\nvar options = {\n  callback: function(nodeElem) {\n    return new Promise((resolve, reject) =\u003e {\n      var timeOut = setInterval(() =\u003e {\n        alert(\"Time is stop!\")\n        resolve();\n      }, 1000);\n    });\n  }\n}\n\nnew SiteTutorial(options);\n```\n\n## Control\n\nThere is a possibility control tutorial with keyboard. Keys - `←` - step back, and `→` - step forward.\n\n## API\n\n| Options       | Default value   | Type            | Description                                             |\n| ------------- | --------------- | --------------- | ------------------------------------------------------- |\n| `popup`       | `default popup` | **DOM Element** | See above.                                              |\n| `time`        | `1000`          | **number**      | Time execution animation.                               |\n| `opacity`     | `0.7`           | **number**      | Background opacity.                                     |\n| `zIndex`      | `1000`          | **number**      | Set z-index for tutorial.                               |\n| `padding`     | `10`            | **number**      | Set offset for highlighted area. **Max value - 15**     |\n| `outclick`    | `false`         | **boolean**     | Add posibility close tutorial after outclick popup.     |\n| `autoStart`   | `false`         | **boolean**     | Add posibility start tutorial after loading page.       |\n| `progressBar` | `null`          | **object**      | Add progress bar to popup.                              |\n| `steps`       | `null`          | **object**      | With this option you can control every step. See above. |\n| `callback`    | `null`          | **function**    | Call function after stop animation.                     |\n\n\n## License\n\nsite-tutorial is Copyright © 2015-2018 Codica. It is released under the [MIT License](https://opensource.org/licenses/MIT).\n\n## About Codica\n\n[![Codica logo](https://www.codica.com/assets/images/logo/logo.svg)](https://www.codica.com)\n\nWe love open source software! See [our other projects](https://github.com/codica2) or [hire us](https://www.codica.com/) to design, develop, and grow your product.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodica2%2Fsite-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodica2%2Fsite-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodica2%2Fsite-tutorial/lists"}