Skip to content

Commit

Permalink
🐛 Fix event timing issue and add button for demo start (#2980)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chuckcarpenter
chuckcarpenter committed Sep 20, 2024
1 parent 73c1096 commit a94cb39
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 96 deletions.
2 changes: 1 addition & 1 deletion docs-src/src/content/docs/recipes/cookbook.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const tour = new Shepherd.Tour({
Using the already exposed API, you could add a progress indicator of your choosing
for each step to let your users know how far into a tour they may be.

The example below uses the [Step](https://docs.shepherdpro.com/api/step/classes/step/) `options`
The example below uses the [Step](https://docs.shepherdjs.dev/api/step/classes/step/) `options`
object and adds to `when` on the `show` event. Within that, we create an element
to render in the header with text of what step out of all potential steps is now
being show.
Expand Down
171 changes: 94 additions & 77 deletions landing/src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,91 +69,108 @@ const { isHome } = Astro.props;
<h2 class='font-body p-2 text-xl'>
Guide your users through a tour of your app
</h2>
<div class='flex justify-center w-full'>
{
isHome && (
<div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class='absolute a11y-icon z-20'
src='/img/accessibility.svg'
alt=''
role='presentation'
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10'></div>

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Accessibility
</h3>

<p class='font-body p-2 text-xl'>
Shepherd has full keyboard navigation support, focus
trapping, and a11y compliance via aria attributes.
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'></div>

{
isHome && (
<div class='column justify-center w-full'>
<div class='mx-auto max-w-2xl text-center'>
<div class='mt-10 flex items-center justify-center gap-x-6'>
<div class='bg-navy inline-block mb-4 w-56'>
<button
id="showTour"
type='button'
class='button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full'
>
Show Demo Tour
</button>
</div>
<a href="#hero-including" class='mb-4 text-md font-semibold leading-6 text-gray-900'>
Learn more <span aria-hidden='true'>→</span>
</a>
</div>
</div>
</div>
<div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class='absolute a11y-icon z-20'
src='/img/accessibility.svg'
alt=''
role='presentation'
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Accessibility
</h3>

<p class='font-body p-2 text-xl'>
Shepherd has full keyboard navigation support, focus trapping,
and a11y compliance via aria attributes.
</p>
</div>

<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class='absolute customizable-icon z-20'
src='/img/customizable.svg'
alt=''
role='presentation'
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10'></div>

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Highly Customizable
</h3>

<p class='font-body p-2 text-xl'>
Shepherd's styles are kept minimal, allowing you to easily
customize the look and feel, but still give you enough to
drop in and be ready to go quickly.
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'></div>
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
</div>
</div>

<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class='absolute customizable-icon z-20'
src='/img/customizable.svg'
alt=''
role='presentation'
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Highly Customizable
</h3>

<p class='font-body p-2 text-xl'>
Shepherd's styles are kept minimal, allowing you to easily
customize the look and feel, but still give you enough to drop
in and be ready to go quickly.
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
</div>
</div>

<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class='absolute framework-icon z-20'
src='/img/framework.svg'
alt=''
role='presentation'
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10'></div>

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Framework Ready
</h3>

<p class='font-body p-2 text-xl'>
Shepherd is ready to drop into your application using React,
Ember, Angular, Vue.js, ES Modules, or plain Javascript!
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'></div>
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class='absolute framework-icon z-20'
src='/img/framework.svg'
alt=''
role='presentation'
/>

<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />

<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Framework Ready
</h3>

<p class='font-body p-2 text-xl'>
Shepherd is ready to drop into your application using React,
Ember, Angular, Vue.js, ES Modules, or plain Javascript!
</p>
</div>

<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
</div>
</div>
)
}
</div>
</div>
)
}
</div>
</header>
36 changes: 19 additions & 17 deletions landing/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,39 @@ import MainPage from '@layouts/MainPage.astro';

<MainPage isHome={true}>
<div
class="font-heading mt-8 text-6xl text-center uppercase w-full"
slot="hero-heading"
class='font-heading mt-8 text-6xl text-center uppercase w-full'
slot='hero-heading'
>
<img
class="inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
src="/img/demo.svg"
alt="Demo"
class='inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
src='/img/demo.svg'
alt='Demo'
/>
</div>

<div slot="content">
<div class="hero-including mt-8">
<h3 class="demo-heading font-heading text-2xl uppercase">
<div slot='content'>
<div class='hero-including mt-8' id='hero-including'>
<h3 class='demo-heading font-heading text-2xl uppercase'>
01. How to Include
</h3>
<div class="hero-example-code text-left">
<div class='hero-example-code text-left'>
<Code
code={`
<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script type="module" src="shepherd.js/dist/shepherd.mjs"></script>
`}
lang="js"
theme="nord"
lang='js'
theme='nord'
wrap
/>
</div>
</div>

<div class="hero-example mt-8">
<h3 class="demo-heading font-heading text-2xl uppercase">02. Example</h3>
<div class='hero-example mt-8'>
<h3 class='demo-heading font-heading text-2xl uppercase'>02. Example</h3>

<div class="hero-example-code text-left">
<div class='hero-example-code text-left'>
<Code
code={`
const tour = new Shepherd.Tour({
Expand Down Expand Up @@ -77,8 +77,8 @@ import MainPage from '@layouts/MainPage.astro';
tour.start();
`}
lang="js"
theme="nord"
lang='js'
theme='nord'
wrap
/>
</div>
Expand All @@ -94,7 +94,9 @@ import MainPage from '@layouts/MainPage.astro';
// wait for shepherd to be ready
setTimeout(function () {
const shepherd = setupShepherd();
shepherd.start();
const startBtn = document.querySelector('#showTour');

startBtn?.addEventListener('click', () => shepherd.start());
}, 400);
}

Expand Down
2 changes: 1 addition & 1 deletion shepherd.js/src/tour.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,12 +332,12 @@ export class Tour extends Evented {
if (shouldSkipStep) {
this._skipStep(step, forward);
} else {
this.currentStep = step;
this.trigger('show', {
step,
previous: this.currentStep
});

this.currentStep = step;
step.show();
}
}
Expand Down

0 comments on commit a94cb39

Please sign in to comment.