File size: 2,883 Bytes
25ec032 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
/* eslint-disable */
const tourSholo = new Sholo({
animate: true,
opacity: 0.8,
padding: 5,
});
tourSholo.defineSteps([
{
element: '.section__header',
popover: {
title: 'Adding Introductions',
description: 'You can use it to add popovers on top of the website',
position: 'bottom',
},
},
{
element: '.btn__dark',
popover: {
title: 'This is Button',
description: 'Yeah I know I dont need to tell that but anyways, we need a step in the listing so yeah!'
}
},
{
element: '#free-use',
popover: {
title: 'Free to Use',
description: 'Yes, you can use it in your personal or commercial products'
}
},
{
element: '.section__how',
popover: {
title: 'Just Specify the Item',
description: 'All you have to do is provide the query selector of element to highlight',
position: 'right',
},
},
{
element: '.section__purpose',
popover: {
title: 'Automatically Position',
description: 'It can automatically position too if you dont provide',
},
},
{
element: '.section__examples',
},
{
element: '.section__contributing',
popover: {
title: 'Automatically Position',
description: 'It can automatically position too if you dont provide',
},
},
]);
document.querySelector('.btn__example')
.addEventListener('click', () => {
tourSholo.start();
});
document.querySelectorAll('pre code').forEach((element) => {
hljs.highlightBlock(element);
});
/////////////////////////////////////////////
// First example – highlighting without popover
/////////////////////////////////////////////
const singleSholoNoPopover = new Sholo();
document.querySelector('#run-single-element-no-popover')
.addEventListener('click', (e) => {
e.preventDefault();
singleSholoNoPopover.highlight('#single-element-no-popover');
});
/////////////////////////////////////////////
// Form focus examples
/////////////////////////////////////////////
const focusSholo = new Sholo({ padding: 0 });
const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4'];
inputIds.forEach(inputId => {
// Highlight the section on focus
document.getElementById(inputId).addEventListener('focus', () => {
focusSholo.highlight(`#${inputId}`);
});
});
/////////////////////////////////////////////
// Highlighting single element with popover
/////////////////////////////////////////////
const singleSholoWithPopover = new Sholo();
document.querySelector('#run-single-element-with-popover')
.addEventListener('click', (e) => {
e.preventDefault();
singleSholoWithPopover.highlight({
element: '#single-element-with-popover',
popover: {
title: 'Did you know?',
description: 'You can add HTML in title or description also!',
}
});
});
|