# j-Tour

> IMPORTANT: Put this component on the bottom of the body element

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 3d1894fc358d7d07d376e6536140f75d995603a6e5c0e61473b1afd5074c2d3b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Supports keyboard arrows
- Supports `tab` key
- Supports `esc` key

__IMPORTANT: Put this component on the bottom of the body element__

__Configuration__:

- `escape` {Boolean} toggle possibility to hide Tour with `esc` key (default: `true`)
- `skiptext` {String} a text of the `skip` button (default: `Skip`)
- `nexttext` {String} a text of the `next` button (default: `Next`)
- `backtext` {String} a text of the `back` button (default: `Back`)
- `endtext` {String} a text of the `end` button (default: `End`)
- `datasource` {String} path to data-source
- `bghide` {Number} toggle possibility to hide Tour by clicking on the background (default: `false`)
- `hide` {String} path to method `function(type)` (type - 0: by PATH (e.g. null) 1: end button 2: skip button 3: `esc` key 4: click on bg)

```javascript
// datasource
var example = [
	{
		target: '.test1',
		title: 'My title 1',
		text: 'Message 1'
	},
	{
		target: '.test2',
		title: 'My title 2',
		text: 'Message with offset',
		offsetY: 10
	}
];
```

__PATH is the actual tour `page`__

Use it with `<ui-component name="tour">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Denis Granec. Source: the Componentator components repository, MIT license.

```html example.html
<div class="row">
	<div class="col-md-8 col-md-offset-2">

		<h1 class="test1">My First Web Page</h1>

		<h2>Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful.</p>

		<h2>Web Pages Are Exciting Too</h2>
		<p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a class="test7" href="https://www.totalavengers.com" target="_blank">Total Avengers</a>

		<ul class="test2">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote  class="test7">"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img class="test3" src="https://placegoat.com/300/380" />

		<div>This is a DIV container</div>
		<h1 class="test4">My First Web Page</h1>

		<h2>Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>

		<h2>Web Pages Are Exciting Too</h2>
		<p class="test5">Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a href="https://www.totalavengers.com">Total Avengers</a>

		<ul>
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img src="https://placegoat.com/300/380" />

		<div>This is a DIV container</div>
		<h1>My First Web Page</h1>

		<h2 class="test6">Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>

		<h2>Web Pages Are Exciting Too</h2>
		<p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a href="https://www.totalavengers.com">Total Avengers</a>

		<ul>
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img src="https://placegoat.com/300/380" />

		<div>This is a DIV container</div>
		<h1>My First Web Page</h1>

		<h2>Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>

		<h2>Web Pages Are Exciting Too</h2>
		<p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a href="https://www.totalavengers.com">Total Avengers</a>

		<ul class="test8">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img src="https://placegoat.com/300/380" />
		<div class="test9">This is a DIV container</div>
	</div>
</div>


<ui-component name="tour" path="page" config="datasource:example"></ui-component>

<script>
	var example = [
		{
			target: '.test1',
			title: 'My title 1',
			text: 'Welcome on Componentator.com'
		},
		{
			target: '.test2',
			title: 'My title 2',
			text: 'Message with offset',
			offsetY: 10
		},
		{
			target: '.test3',
			title: 'My title 3',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test4',
			title: 'My title 4',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test5',
			title: 'My title 5',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test6',
			title: 'My title 6',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test7',
			title: 'My title 7',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test8',
			title: 'My title 8',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test9',
			title: 'My title 9',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		}
	];

	setTimeout(function() {
		SET('page', 0);
	}, 1000);
</script>
```