{"_id":"@abdalhamid/tourguidejs","name":"@abdalhamid/tourguidejs","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@abdalhamid/tourguidejs","version":"0.3.0","src":"src/Tour.js","main":"tourguide.js","module":"tourguide.esm.js","description":"Guided tour feature plugin for docsie manager without icons","homepage":"https://github.com/AbdalhamidAlhamad/tourguide.js","bugs":{"url":"https://github.com/AbdalhamidAlhamad/tourguide.js/issues"},"author":{"name":"Likalo LLC","url":"https://likalo.com/"},"keywords":["tourguidejs","js","guide","tour","small","tiny","guidedtour"],"license":"BSD 3-Clause","repository":{"type":"git","url":"git+https://github.com/AbdalhamidAlhamad/tourguide.js.git"},"engines":{"npm":">=3.0.0","node":">=6.0.0"},"devDependencies":{"@babel/core":"^7.14.3","@babel/plugin-external-helpers":"^7.12.13","@babel/preset-env":"^7.14.4","@floating-ui/dom":"^1.0.10","@popperjs/core":"^2.11.6","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","@rollup/plugin-replace":"^2.4.2","eslint":"^5.16.0","eslint-config-standard":"^12.0.0","eslint-plugin-import":"^2.17.2","eslint-plugin-node":"^8.0.1","eslint-plugin-promise":"^4.1.1","eslint-plugin-standard":"^4.0.0","rollup":"^2.51.0","rollup-plugin-eslint":"^5.1.0","rollup-plugin-filesize":"^9.1.1","rollup-plugin-includepaths":"^0.2.4","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-sass":"^1.2.2","rollup-plugin-sizes":"^0.4.2","rollup-plugin-terser":"^7.0.2","sass":"^1.49.0","scroll-into-view":"^1.15.0","snarkdown":"^2.0.0","umbrellajs":"^3.1.0"},"commonjs":["node_modules/**"],"scripts":{"build":"rollup -c rollup.config.js","devw":"rollup -w -c rollup.config.js","test":"npm run test --prefix ./test"},"standard":{"ignore":["build"]},"browserslist":"> 0.25%, not dead","gitHead":"4c2852e6a269a7a6d43fafdca99c6ae32e6fb50a","_id":"@abdalhamid/tourguidejs@0.3.0","_nodeVersion":"14.20.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wdDAh/JnWpqVTs7CiGu/YAz8gIBAmqoo9cRUHloyAWuEYqxjdU35HpX8JcY38R6rPnfYDKjoD3gMr0ihEXqHYQ==","shasum":"0e4009e575232ce5c98d6db43b61fb02963d3373","tarball":"https://registry.npmjs.org/@abdalhamid/tourguidejs/-/tourguidejs-0.3.0.tgz","fileCount":7,"unpackedSize":127191,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoz+ZMD6kUIagAzfbX7Y5O60ot2uMjzr+UkMv18lXzzAiEA9s7qoGir38RRa+BrZHvMRDx8Nw4lCPC4+9E4mW2qZWs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2hSgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtXRAAmuyBxfxpAPk6kjTkCCgHLwcAzlm+m5ZEosIDFV1RE3gK/1f5\r\n0+KbMEWH2yjNCJUQ9F9hG990nWn2DnfCisBWNbRhwwkf6bIZ328omcgE17RE\r\nc+3adVzkfJHwzzm8GQQfklF/eD4ioIFt9Y3CHHs8boG8S5veTRH4yaMGxQ1t\r\no1JNzmRshkCJV6ApV3Wl5nA1fDDUlV0N+GMB3/T5Ns8k6ewUpxJUW+NLTc6q\r\nStdTtpq64eKepGSJt6XYE+4VFVcjAI+6Zybqs7wr2/KKN+4nw91f5GHb2M+2\r\nGokBfIgBPeDgVCdmYghve6OGhg280WhG9jKKy3dRTZekAm8wcIGFp0snZRxa\r\nI83WkFnDym/rIvtDaCSiwV2flfm9QifCwfFwayL2E3G5J0jUw3Qt9Cl8ZGOK\r\nquVNKXTt2rnDZNq2hMT0wgI3eSeqD+LJgcDvKQPqHplyEOvBrhLk3pcfvWMy\r\n9YrPU31mxi/axe2yaGz65QxCxvxxINWLEo6FTYGdSOwhnH/a1c2/yIzlOOw0\r\n+g2LOzgAYfRSH2KXXaq0ZnSeDEIduXAO8HI7CRzbAw0JAbRg5CbgnrBTuSVA\r\n3mGfCwrEh3CBm3DFTTT+/G1llDrteYQW33Y3awnEQRoz36bPbPQm8ESfKxkV\r\nYXqueVYq+IOdqWNnvO7rKx6KwOGM6z5EqCQ=\r\n=Yaiv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abdalhamid","email":"aahalhmad@gmail.com"},"directories":{},"maintainers":[{"name":"abdalhamid","email":"aahalhmad@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tourguidejs_0.3.0_1675236512257_0.1934795463437129"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-01T07:28:32.202Z","0.3.0":"2023-02-01T07:28:32.408Z","modified":"2023-02-01T07:28:32.539Z"},"maintainers":[{"name":"abdalhamid","email":"aahalhmad@gmail.com"}],"description":"Guided tour feature plugin for docsie manager without icons","homepage":"https://github.com/AbdalhamidAlhamad/tourguide.js","keywords":["tourguidejs","js","guide","tour","small","tiny","guidedtour"],"repository":{"type":"git","url":"git+https://github.com/AbdalhamidAlhamad/tourguide.js.git"},"author":{"name":"Likalo LLC","url":"https://likalo.com/"},"bugs":{"url":"https://github.com/AbdalhamidAlhamad/tourguide.js/issues"},"license":"BSD 3-Clause","readme":"# Tourguide.js\nCustom version of tourguides without icons\n######  Simple, lightweight library for creating guided tours for your web, apps and more.\n\n>  A **tour guide** is a  person who provides assistance, information on cultural, historical and  contemporary heritage to people on organized [tours](https://en.wikipedia.org/wiki/Tourism)  and individual clients at educational establishments, religious and  historical sites, museums, and at venues of other significant interest,  attractions sites. [[https://en.wikipedia.org/wiki/Tour_guide](https://en.wikipedia.org/wiki/Tour_guide)]\n\n\n### Fiddle with It\n\nWant to see how it works right away? [Try on JSFiddle](https://jsfiddle.net/eugenetrue/q465gb7L/) \n\n## Install Tourguide.js\n\n```\nnpm i tourguidejs\n```\n## Why do I need Tourguide.js\n\nEvery time you build you next awesome web app, you sit back and stare lovingly at your handy-work :) But then inevitably someone comes along asking one and the same inconvenient question: *\"So, how do I use it?\"*\n\nYou try to explain, but people are just not getting it! You write [how-tos](https://docsie.io), [lengthy docs](https://docsie.io), and [step-by-step guides](https://docsie.io), and yet, nothing seems to be enough.\n\nThis is why we built **Tourguide.js** - a simple yet powerful explainer utility, designed to help you make the reply a little bit less painful. Because, let's face it - picture is worth a 1000 words:\n\n![](https://cdn.docsie.io/tourgudie_demo.png)\n\n## Getting started\n\nThere are a few ways you can use **Tourguide.js**\n\n### Fiddle with it\n\nWant to see how it works right away? [Try on JSFiddle](https://jsfiddle.net/eugenetrue/q465gb7L/) \n\n###  CommonJS\n\nDownload `tourguide.min.js`, add it to your project libraries, and then include it on page:\n\n```\n<script src=\"tourguide.min.js\"></script>\n```\n### ES Module support\n\nIf you use ES modules in your project ([Webpack](https://webpack.js.org/), [Rollup](https://rollupjs.org)) import **Tourguide.js** like so:\n\n```\nimport Tourguide from \"tourguidejs\";\n```\n## Usage\n\nBefore use, **Tourguide.js** must be instantiated:\n\n```\nvar tourguide = new Tourguide({options});\n```\n* `root`: root element the tour steps will attach to; default is document.body\n\n* `selector`: if you want to use content based tour approach you can use this option to specify the common selector for the tour steps; default is `[data-tour]`\n\n* `animationspeed`: speed of all tour built-in animations; default is 300\n\n* `padding`: additional padding to add to step highlighter; default is 5(px)\n\n* `steps`: if you choose to take JSON based tour approach provide use this property to provide the data; default is null\n\n* `src`: if you want to load the tour from a remote URL you may specify it here; default is null\n\n* `request`: if you want to load the tour from a remote URL you may provide request headers here\n\n* `onStart`: callback function triggered when the tour starts\n\n* `onStop`: callback function triggered when tour stops\n\n* `onComplete`: callback triggered when tour completes\n\n* `onStep`: callback triggered when a tour step is shown\n\n* `onAction`: callback triggered when user clicks on the highlighted element\n\nOnce instantiated you can use tourguide instance a several different ways:\n\n### Content based approach\n\nSimplest approach is to read the descriptions right off the elements on page. This works best if you are using an [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) approach in your application. Simply add tour descriptions to the [HTML](https://en.wikipedia.org/wiki/HTML) elements in your page template:\n\n```\n<button aria-label=\"Collaborate\" data-tour=\"step: 1; title: Step1; content: Lorem ipsum dolor sit amet\">\n  Collaborate\n</button>\n```\n* `step<number>`: tour step sequence number\n\n* `title<string>`: tour step title\n\n* `content<string>`: tour step description\n\n* `image?<url>`: tour step illustration\n\n> **?*** indicates the property is optional*\n\nIn this mode you can simply use **Tourguide.js** as-is:\n\n```\nvar tourguide = new Tourguide();\ntourguide.start();\n```\n### JSON based approach\n\nYou may also write your own steps definition using [JSON](https://www.json.org/) notation:\n\n```\n`[`\n`  {`\n`    \"selector\": null,`\n`    \"step\": 1,`\n`    \"title\": \"Lets take a moment and look around Docsie library\",`\n`    \"content\": \"Click a button to advance to the next step of this tour.<br/> To stop this tour at any time click a button in the top-right corner.\",`\n`    \"image\": \"https://somehost.com/image.jpeg\"`\n`  },`\n`  {`\n`    \"selector\": \"[data-component=library]:first-of-type\",`\n`    \"step\": 2,`\n`    \"title\": \"Shelf\",`\n`    \"content\": \"Just like a real library &lt;mark&gt;Docsie&lt;/mark&gt; starts with &lt;dfn&gt;shelves&lt;/dfn&gt;. Each &lt;dfn&gt;shelf&lt;/dfn&gt; represnts a separate collection of ideas. You may think of them as individual websites, or website sections.\"`\n`  }`\n`]`\n```\n* `selector?<string>`: [CSS selector](https://www.w3schools.com/cssref/css_selectors.asp) used to find the target element *(optional)*\n\n* `step<number>`: tour step sequence number\n\n* `title<string>`: tour step title\n\n* `content<string>`: tour step description\n\n* `image?<url>`: tour step illustration *(optional)*\n\n> **?*** indicates the property is optional*\n\nOnce you have the complete JSON description for each of your tour steps you will have to initialize **Tourguide.js** passing your JSON as `steps:` property:\n\n```\nvar steps = [...];\nvar tourguide = new Tourguide({steps: steps});\ntourguide.start();\n```\n### Remote URL approach\n\nYou may also want to load the steps remotely. To do so simply provide the target `src` as one of the **Tourguide.js** init params:\n\n```\nvar tourguide = new Tourguide({src: \"https://somedomain.com/tours/guide.json\"});\ntourguide.start();\n```\n## Controlling the tour\n\nOnce your tour has started you have several ways to manually control the tour flow:\n\n### tourguide.start([step])\n\nStart the tour at any time by calling start(). You may optionally provide the step number to start the tour at a specific step (by default a tour always starts at step 1):\n\n```\ntourguide.start(2)\n```\n### tourguide.stop()\n\nStop the tour at any moment by calling stop()\n\n### tourguide.next()\n\nCauses tour to go to the next step in the sequence\n\n### tourguide.previous()\n\nCauses tour to go to the previous step in the sequence\n\n### tourguide.go(step)\n\nCauses tour to go to the step specified\n\n```\ntourguide.go(2)\n```\n### Additional properties\n\n* `tourguide.currentstep`: returns the current [step object](#step_object)\n\n* `tourguide.length`: return the number of steps on the tour\n\n* `tourguide.steps`: returns the tour steps as JSON notation\n\n* `tourguide.hasnext`: return true if there are steps remaining in the tour, otherwise returns false\n\n* `tourguide.options`: returns **Tourguide.js** options object\n\n## Attaching callbacks\n\n**Tourguide.js** supports several helpful [callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) to help you better control the tour. You may optionally pass the callback functions into the tour instance at initialization time:\n\n```\nvar tourguide = new Tourguide({\n  `onStart:function(options){...},`\n  `onStop:function(options){...},`\n  `onComplete:function(){...},`\n  `onStep:function(currentstep, type){...},`\n  `onAction:function(currentstep, e){...}`\n});\n```\n### onStart\n\nFires when the guided tour is started. The callback function will receive a single param:\n\n* `options`: tour options object\n\n### onStop\n\nFires when the guided tour stops. The callback function will receive a single param:\n\n* `options`: tour options object\n\n### onComplete\n\nFires when the guided tour is complete. The callback function will receives no params.\n\n> NOTE: onStop is always fired first, before onComplete is fired\n\n### onStep\n\nFires when tour step is activated. The callback function receives two params:\n\n*  `currentstep`: tour [step object](#step_object)\n\n* `type`: string representing the current direction of the tor; can be one of: \"previous\" | \"next\"\n\n### onAction\n\nFires when user has clicked on the step target. The callback function receives two params:\n\n* `currentstep`: tour [step object](#step_object)\n\n* `event`: [MouseEvent onclick](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)\n\n## Step object\n\nEach step of the tour is wrapped into a Step class. This allows you to have a direct access to the individual step properties and actions:\n\n* `target`: returns the target element step is attached to\n\n* `el`: returns the step view element\n\n* `show()`: show step element\n\n* `hide()`: hide step element\n\nYou can obtain the current step object an any time during the tour execution by calling `tourguide.currentstep` property:\n\n```\nvar currentstep = tourguide.currentstep;\nvar stepTarget = currentstep.target;\nvar stepView = currentstep.el;\n```\n## License\n\n**Tourguide.js** is licensed under BSD 3-Clause \"New\" or \"Revised\" License\n\n A permissive license similar to the BSD 2-Clause License, but with a 3rd  clause that prohibits others from using the name of the project or its  contributors to promote derived products without written consent. \n\n","readmeFilename":"README.md"}