{"_id":"@alexdev404/svelte-guide","name":"@alexdev404/svelte-guide","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@alexdev404/svelte-guide","version":"0.0.1","description":"A simple, minimalist touring and on-boarding library for svelte. Based upon tourjs/tour by Tanner Linsley and David Nagli.","main":"src/index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","clean":"rm -rf dist lib .parcel-cache && mkdir dist","publish":"npm publish --access public"},"repository":{"type":"git","url":"git+ssh://git@github.com/alexdev404/svelte-guide.git"},"author":{"name":"Immanuel Garcia","email":"alexdev404@proton.me"},"license":"MIT","bugs":{"url":"https://github.com/tourjs/tour/issues"},"homepage":"https://github.com/alexdev404/svelte-guide","dependencies":{"event-emitter-es6":"^1.1.5","shallow-equal":"^3.1.0"},"devDependencies":{"@types/event-emitter-es6":"^1.1.4","svelte":">4.2.17","typescript":">5.4.5"},"_id":"@alexdev404/svelte-guide@0.0.1","gitHead":"850bd8d896ea664a980dd123bb7ac9cc751f49dc","types":"./src/index.d.ts","_nodeVersion":"21.1.0","_npmVersion":"9.9.3","dist":{"integrity":"sha512-xcDuwSzK3QAGx4dd/grLWbBqx1G0tiCw3cyH0BQSPp9veNNdLy+FIKXY/OOyOInhj8/QKJ6R/mGMwNm0ogkMOA==","shasum":"5a33a5e01d8ad33f4e6858e43a7e8fb75e86b1aa","tarball":"https://registry.npmjs.org/@alexdev404/svelte-guide/-/svelte-guide-0.0.1.tgz","fileCount":24,"unpackedSize":55363,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfXBo4F0wJxh6V/gqRGZw328JKNzTT2Lp07ohQFuUXXgIgXnKAzyh27YDi594xBntP6omeIgxbMrKlBNCwC4plCM8="}]},"_npmUser":{"name":"alexdev404","email":"alexdev404@protonmail.com"},"directories":{},"maintainers":[{"name":"alexdev404","email":"alexdev404@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-guide_0.0.1_1721463155669_0.5506484483955887"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-20T08:12:35.566Z","0.0.1":"2024-07-20T08:12:35.834Z","modified":"2024-07-20T08:12:36.108Z"},"maintainers":[{"name":"alexdev404","email":"alexdev404@protonmail.com"}],"description":"A simple, minimalist touring and on-boarding library for svelte. Based upon tourjs/tour by Tanner Linsley and David Nagli.","homepage":"https://github.com/alexdev404/svelte-guide","repository":{"type":"git","url":"git+ssh://git@github.com/alexdev404/svelte-guide.git"},"author":{"name":"Immanuel Garcia","email":"alexdev404@proton.me"},"bugs":{"url":"https://github.com/tourjs/tour/issues"},"license":"MIT","readme":"# Tour\r\n\r\nA simple, minimalist touring and on-boarding library for javascript\r\n\r\n[![](https://avatars0.githubusercontent.com/u/20192755?v=3&s=500)](http://tourjs.github.io/tour)\r\n\r\n[![Join the chat at https://gitter.im/tourjs/tour](https://badges.gitter.im/tourjs/tour.svg)](https://gitter.im/tourjs/tour?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\r\n\r\n## [Awesome Demo](http://tourjs.github.io/tour)\r\n\r\n## Features\r\n\r\n- Supports single page apps, and complex scrollable content\r\n- Responsive & Intelligent\r\n- Automagic Positioning\r\n- Promise Driven Events & Hooks\r\n- Tour does not manipulate or relayer your DOM elements in any way\r\n\r\n## Installation\r\n\r\nInstall via npm\r\n\r\n```bash\r\n$ npm install tour --save\r\n```\r\n\r\nor CDN\r\n\r\nhttps://npmcdn.com/tour@latest/dist/tour.js\r\nhttps://npmcdn.com/tour@latest/dist/tour.css\r\n\r\nImport JS and CSS\r\n\r\n```javascript\r\n// ES6+\r\nimport Tour from \"tour\";\r\n\r\n// CommonJS\r\nconst Tour = require(\"tour\").default;\r\n\r\n// Vanilla\r\nvar Tour = window.Tour.default;\r\n```\r\n\r\n```css\r\n@import \"node_modules/tour/dist/tour.css\";\r\n```\r\n\r\n## Simple Usage\r\n\r\n```javascript\r\nconst myTour = {\r\n\tcanExit: true,\r\n\tnextText: 'Proceed!',\r\n\tsteps: [{\r\n\t\ttarget: '#first-element',\r\n\t\tdata: {\r\n        title: \"Wow\",\r\n\t\tcontent: 'This is the first step!',\r\n\t\t}\r\n\t}, {\r\n\t\ttarget: '.some .other .element',\r\n\t\tdata: {\r\n\t\tcontent: 'Blah blah blah. I prefer to show up on the right.',\r\n\t\t}\r\n\t\tplacement: [ 'right', 'top', 'bottom', 'left' ],\r\n\t}, {\r\n\t\ttarget: '#menu-element',\r\n\t\tdata: {\r\n\t\tcontent: 'I guess this is a menu!',\r\n\t\t}\r\n\t}, {\r\n\t\ttarget: '#last-element',\r\n\t\tdata: {\r\n\t\tcontent: 'It is over! :(',\r\n\t\t}\r\n\t}],\r\n};\r\n\r\nTour.start(myTour)\r\n  .then(() => {\r\n    console.log('Tour Finished!');\r\n  })\r\n  .catch(() => {\r\n    console.log('Tour Interrupted!')\r\n  });\r\n\r\n```\r\n\r\n## Config\r\n\r\nDefaults:\r\n\r\n```javascript\r\n{\r\n\tcustomTemplate: (data, eventHandlers, progress) => ... // Custom template for the tourbox\r\n\tcanExit: false, // Can exit the tour or not (via an X button)\r\n\tpadding: 5, // Padding around the highlighted element\r\n\tmaxHeight: 120, // Max height of the tooltip box\r\n\tmaxWidth: 250, // Max width of the tooltip box\r\n\tmaskVisible: true, // Shows the mask\r\n\tmaskVisibleOnNoTarget: false, // Shows a full page mask if no target element has been specified\r\n\tmaskClickThrough: false, // Allows the user to interact with elements beneath the mask\r\n\tmaskScrollThrough: true // Allows the user to scroll the scrollbox or window through the mask\r\n\tmaskColor: 'rgba(0,0,0,.7)' // The mask color\r\n\tscrollBox: 'body', // The container to scroll when searching for elements\r\n\tpreviousText: 'Previous',\r\n\tnextText: 'Next',\r\n\tfinishText: 'Finish',\r\n\tshowPrevious: true, // Setting to false hides the previous button\r\n\tshowNext: true // Setting to false hides the next button\r\n\tanimationDuration: 400, // Animation Duration for the box and mask\r\n\tplacement: ['bottom', 'right', 'top','left'],\r\n\tdark: false, // Dark mode (Works great with `mask.visible = false`)\r\n\tdisableInteraction: false, // Disable interaction with the highlighted elements\r\n\tdisableEscExit: false // Disable end of tour when pressing ESC,\r\n}\r\n```\r\n\r\n## API\r\n\r\n#### .start(tour)\r\n\r\n- Starts a Tour\r\n- Params:\r\n  - _tour_: Tour Object\r\n- Returns:\r\n  - Promise that resolves when the tour is finished or rejected when aborted.\r\n\r\n#### .stop()\r\n\r\n- Stops a Tour\r\n- Returns:\r\n  - Promise that resolves when the tour is stopped.\r\n\r\n#### .next()\r\n\r\n- Goes to the next step in the current tour\r\n- Returns:\r\n  - Promise that resolves when the next step is reached\r\n\r\n#### .previous()\r\n\r\n- Goes to the previous step in the current tour\r\n  - Promise that resolves when the previous step is reached\r\n\r\n#### .goto(index)\r\n\r\n- Goes to a specific step in the tour\r\n- Params:\r\n\r\n  - _index_: The 0-index number of the step eg. `0, 1, 2, 3`\r\n\r\n- Returns:\r\n  - Promise that resolves when the specific step is reached\r\n\r\n## Using Promise Event Hooks\r\n\r\nYou can pass any function that returns a promise to the `before` and `after` properties for any step. When the promise resolves, the tour moves on accordingly.\r\n\r\n#### Example\r\n\r\n```javascript\r\nvar tour = {\r\n  steps: [\r\n    {\r\n      target: \"#first-element\",\r\n      data: {\r\n        content: \"This is the first step!\",\r\n      },\r\n    },\r\n    {\r\n      target: \".some .other .element\",\r\n      data: {\r\n        content: \"Blah blah blah.\",\r\n        before: () => {\r\n          // Do something amazing\r\n          return new Promise();\r\n        },\r\n      },\r\n    },\r\n    {\r\n      target: \"#menu-element\",\r\n      data: {\r\n        content: \"I guess this is a menu!\",\r\n        after: () => {\r\n          // Do some more cool stuff\r\n          return new Promise();\r\n        },\r\n      },\r\n    },\r\n    {\r\n      target: \"#last-element\",\r\n      data: {\r\n        content: \"It is over! :(\",\r\n      },\r\n    },\r\n  ],\r\n};\r\n```\r\n\r\n## Roadmap & Contributing\r\n\r\nAll PR's and contributions are more than welcome!\r\n","readmeFilename":"README.md"}