{"id":20597502,"url":"https://github.com/gerrproger/tutorjs","last_synced_at":"2025-09-03T10:41:45.266Z","repository":{"id":19804453,"uuid":"23064522","full_name":"Gerrproger/TutorJS","owner":"Gerrproger","description":"Smart tutorials for site users","archived":false,"fork":false,"pushed_at":"2025-08-23T11:47:56.000Z","size":103,"stargazers_count":3,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-23T17:32:00.201Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://gerrproger.github.io/TutorJS/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gerrproger.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-08-18T08:46:49.000Z","updated_at":"2023-02-22T19:10:43.000Z","dependencies_parsed_at":"2022-08-25T18:20:48.719Z","dependency_job_id":"4f3132fa-a174-41a3-ac3c-9d2a2cc1b790","html_url":"https://github.com/Gerrproger/TutorJS","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":"0.47058823529411764","last_synced_commit":"9b5f9a8306d0f570b4653ed138a1a9be8086c70f"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Gerrproger/TutorJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2FTutorJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2FTutorJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2FTutorJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2FTutorJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gerrproger","download_url":"https://codeload.github.com/Gerrproger/TutorJS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gerrproger%2FTutorJS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273431361,"owners_count":25104491,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"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":[],"created_at":"2024-11-16T08:22:46.232Z","updated_at":"2025-09-03T10:41:45.241Z","avatar_url":"https://github.com/Gerrproger.png","language":"JavaScript","readme":"# TutorJS\n\n**Interactive step-by-step tutorials with elements highlighting for your website, made with SVG.**\n\n## \u003ca href=\"http://gerrproger.github.io/TutorJS/\" target=\"_blank\"\u003eDemo \u0026 examples\u003c/a\u003e\n\n### Browser compatibility\n\n- IE 9+\n- All other popular browsers\n\n### Dependences\n\n- None\n\n### License\n\n- [https://github.com/Gerrproger/TutorJS/blob/master/LICENSE](https://github.com/Gerrproger/TutorJS/blob/master/LICENSE)\n\n### You can use Bower or NPM for installation:\n\n`npm install tutorjs`\\\n`yarn add tutorjs`\\\n`bower install tutorjs`\n\n# Usage\n\nInclude the script in the `\u003chead\u003e` of your document:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"js/tutor.min.js\"\u003e\u003c/script\u003e\n```\n\nPlace code in the `\u003cbody\u003e` of your document:\n\n```html\n\u003csvg\n  id=\"tutorJS-svg\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  style=\"position: fixed; z-index: 100000; width:100%; height: 100%; cursor: default; top: 0; left: 0; display: none\"\n\u003e\n  ...\n\u003c/svg\u003e\n```\n\n_Note:_ You can change svg styles as you like!\n\nAnd just start your tutorial:\n\n```javascript\ntutorJS.start(\n  [\n    {\n      element: 'someId',\n      caption: 'This is it!',\n    },\n    {\n      element: 'anotherId',\n      position: 'top',\n    },\n  ],\n  {\n    auto: 4000,\n    time: 400,\n  }\n);\n```\n\n# Api\n\n## start\n\nThe main method that starts your tutorial.\n\n```javascript\ntutorJS.start(elements, options);\n```\n\n_Note:_ You can start the new tutorial not even quitting the previous!\n\n#### elements\n\nAn array of objects or just an object with steps data for your tutorial.\n\n```javascript\n[\n  {\n    element: 'someId',\n    captions: 'My element',\n  },\n  {\n    element: 'anotherId',\n    position: 'top',\n    onActive: function () {},\n  },\n];\n```\n\n\u003cbr\u003e**Type:** array of objects / object\n\u003cbr\u003e**Required:** yes\n\n#### options\n\nAn object with options for this tutorial instance.\n\n```javascript\n{\n  auto: 1000,\n  onQuit: function(){},\n  showHint: false\n}\n```\n\n\u003cbr\u003e**Type:** object\n\u003cbr\u003e**Required:** no\n\n### element.element\n\nAn element to highlight. Can be the `id` or DOM object or coordinates object (`{top: \u003c\u003e, left: \u003c\u003e, width: \u003c\u003e, height: \u003c\u003e}` in px).\n\n```javascript\nelement: 'someId'\n// or\nelement: {top: 100, left: 100, width: 50, height: 50}\n```\n\n\u003cbr\u003e**Type:** string / DOM obj / coordianates\n\u003cbr\u003e**Required:** yes\n\n### element.caption\n\nText that will be displayed on the hint when the element is highlighted\n\n```javascript\ncaption: 'This is some super button!';\n```\n\n\u003cbr\u003e**Type:** string\n\u003cbr\u003e**Default:** null\n\u003cbr\u003e**Required:** no\n\n### element.position\n\nPosition of the hint related to the element. Can be `left`, `top`, `right` or `bottom`.\n\n```javascript\nposition: 'right';\n```\n\n\u003cbr\u003e**Type:** string\n\u003cbr\u003e**Default:** bottom\n\u003cbr\u003e**Required:** no\n\n### element.onActive\n\nFunction that would be called when this element would be highlighted.\n\n```javascript\nonActive: function(element, step){ console.log('This is it!', element) }\n```\n\n\u003cbr\u003e**Type:** function\n\u003cbr\u003e**Default:** null\n\u003cbr\u003e**Required:** no\n\n### options.auto\n\nAutomatically switches steps (autoplay). Just pass delay for viewing one step (ms). Pass `0` for no autoplaying.\n\n```javascript\nauto: 1000;\n```\n\n\u003cbr\u003e**Type:** number\n\u003cbr\u003e**Default:** 0\n\u003cbr\u003e**Required:** no\n\n### options.onQuit\n\nFunction that is called on quitting active tutorial.\n\n```javascript\nonQuit: function(instance){ console.log('Tutor has ended!'); }\n```\n\n\u003cbr\u003e**Type:** function\n\u003cbr\u003e**Default:** null\n\u003cbr\u003e**Required:** no\n\n### options.bgQuit\n\nQuit this tutorial on the background dark layout click or not.\n\n```javascript\nbgQuit: false;\n```\n\n\u003cbr\u003e**Type:** boolen\n\u003cbr\u003e**Default:** true\n\u003cbr\u003e**Required:** no\n\n### options.showNext\n\nShow the `Next` button or not.\n\n```javascript\nshowNext: false;\n```\n\n\u003cbr\u003e**Type:** boolen\n\u003cbr\u003e**Default:** true\n\u003cbr\u003e**Required:** no\n\n### options.showQuit\n\nShow the `Quit` button or not.\n\n```javascript\nshowQuit: false;\n```\n\n\u003cbr\u003e**Type:** boolen\n\u003cbr\u003e**Default:** true\n\u003cbr\u003e**Required:** no\n\n### options.showCount\n\nShow the pagination or not.\n\n```javascript\nshowCount: false;\n```\n\n\u003cbr\u003e**Type:** boolen\n\u003cbr\u003e**Default:** true\n\u003cbr\u003e**Required:** no\n\n### options.showHint\n\nShow the hint block or not.\n\n```javascript\nshowHint: false;\n```\n\n\u003cbr\u003e**Type:** boolen\n\u003cbr\u003e**Default:** true\n\u003cbr\u003e**Required:** no\n\n### options.time\n\nThe average duration of animations and effects in ms (this actually is the factor).\n\n```javascript\ntime: 1000;\n```\n\n\u003cbr\u003e**Type:** number\n\u003cbr\u003e**Default:** 300\n\u003cbr\u003e**Required:** no\n\n## quit\n\nThe method that quits your tutorial. No parametrs.\n\n```javascript\ntutorJS.quit();\n```\n\n## next\n\nThe method that shows the next step of your tutorial or quits it if no next step is available. No parametrs.\n\n```javascript\ntutorJS.next();\n```\n\n## recalc\n\nRecalculates TutorJS elements positions (highlighting and the hint). No parameters.\n\n```javascript\ntutorJS.recalc();\n```\n\n## set\n\nReconfigures current tutorial options and the current element.\n\n```javascript\ntutorJS.set(options, element);\n```\n\n#### options\n\nAn object with options for the current tutorial instance (as in the start method).\n\u003cbr\u003e**Required:** no\n\n#### element\n\nAn object with the current step data for the current tutorial (as in the start method).\n\u003cbr\u003e**Required:** no\n\n---\n\n## Getting data\n\nYou can get some data of the current tutorial and the current element.\n\n#### Elements (steps)\n\n```javascript\nvar elements = tutorJS.elements;\nvar stepsN = elements.length;\n```\n\n#### Current element\n\n```javascript\nvar currentStep = tutorJS.activeEl;\n```\n\n#### Current step number\n\n```javascript\nvar stepN = tutorJS.active;\n```\n\n#### Instance options\n\n```javascript\nvar options = tutorJS.options;\n```\n\n#### TutorJS version\n\n```javascript\nvar ver = tutorJS.VERSION;\n```\n\n# Utils\n\nYou can use some other methods of the TutorJS for your needs.\n\n### tutorJS.ID\n\nReturns the DOM object for the element with the passed id.\n\n```javascript\nvar el = tutorJS.ID('myId');\n```\n\n### tutorJS.EL\n\nReturns the DOM object for the element with the passed jQuery-like selector (only the first found).\n\n```javascript\nvar el = tutorJS.EL('.myClass \u003e someTag');\n```\n\n### tutorJS.ELS\n\nReturns an array with the DOM objects for the elements with the passed jQuery-like selector.\n\n```javascript\nvar els = tutorJS.ELS('.myClass \u003e someTag');\n```\n\n### tutorJS.extend\n\nReturns the new object extended by another.\n\n```javascript\nvar obj = tutorJS.extend(obj1, obj2);\n```\n\n### tutorJS.attr\n\nAdds attributes to the element from the passed object.\n\n```javascript\nvar el = tutorJS.attr(tutorJS.EL('input'), {\n  required: 'required',\n  placeholder: 'Required input!',\n});\n```\n\n### tutorJS.offset\n\nReturns an offset of the element relative to the window (in px).\n\n```javascript\nvar offset = tutorJS.offset(element);\nvar offTop = offset.top;\n```\n\n### tutorJS.width\n\nReturns width of the element (in px).\n\n```javascript\nvar elementWidth = tutorJS.width(element);\n```\n\n### tutorJS.height\n\nReturns height of the element (in px).\n\n```javascript\nvar elementHeight = tutorJS.height(element);\n```\n\n### tutorJS.positionTop\n\nReturns the top offset of the element related to the document (in px).\n\n```javascript\nvar elementTop = tutorJS.positionTop(element);\n```\n\n### tutorJS.scrolledTop\n\nReturns number of the scrolled pixels (from the top of the document).\n\n```javascript\nvar scr = tutorJS.scrolledTop();\n```\n\n### tutorJS.animateScroll\n\nScrolls to the passed position with animation (vertically).\n\n```javascript\ntutorJS.animateScroll(position, callback);\n```\n\n### tutorJS.isInView\n\nChecks if specified element is fully visible on the page (only vertically).\n\n```javascript\nvar isInView = tutorJS.isInView(element);\n```\n\n### tutorJS.on\n\nCalls specified callback when an event fired on the element. Supports chaining.\n\n```javascript\ntutorJS.on(element, 'click', callback).on(element2, 'mouseover', callback2);\n```\n\n---\n\n### tutorJS.create\n\nCreates new SVG element tag or node if specified the second argument. Only SVG tags!\n\n```javascript\nvar newCircle = tutorJS.create('circle');\nvar newNode = tutorJS.create('My special text', true);\n```\n\n### tutorJS.anim\n\nAnimates SVG element via adding animate tag. Just pass the special object with the parameters (`{attr: \u003c\u003e, to: \u003c\u003e, dur: \u003c\u003e}`). Supports chaining. Only for SVG!\n\n```javascript\ntutorJS\n  .anim(element, { attr: 'opacity', to: 1, dur: 300 }, callback1)\n  .and({ attr: 'height', to: '200px', dur: 1000 }, callback2)\n  .anim(anotherElement, { attr: 'width', to: '100px', dur: 500 }, callback3);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerrproger%2Ftutorjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerrproger%2Ftutorjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerrproger%2Ftutorjs/lists"}