shepherd/shepherd.js/dummy/index.html at f96a5358ddfcd742aab97abd56c244391b0be21d · shipshapecode/shepherd · GitHub

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Shepherd — Guide your users through a tour of your app.</title>
    <meta
      name="description"
      content="Guide your users through a tour of your app."
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />

    <!--favicons-->

    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="assets/favicons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="assets/favicons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="assets/favicons/favicon-16x16.png"
    />
    <link rel="manifest" href="assets/favicons/manifest.json" />
    <link
      rel="mask-icon"
      href="assets/favicons/safari-pinned-tab.svg"
      color="#426170"
    />
    <link rel="shortcut icon" href="assets/favicons/favicon.ico" />
    <meta
      name="msapplication-config"
      content="assets/favicons/browserconfig.xml"
    />
    <meta name="theme-color" content="#ffffff" />

    <!-- Welcome docs styles -->
    <link rel="stylesheet" href="../dist/css/shepherd.css" />
    <link rel="stylesheet" href="./css/fonts.css" />
    <link rel="stylesheet" href="./css/prism.css" />
    <link rel="stylesheet" href="./css/welcome.css" />
  </head>

  <body>
    <div class="hero-outer" data-test-hero-outer>
      <div class="hero-inner">
        <div class="hero-welcome" data-test-hero-welcome>
          <h1>Shepherd</h1>

          <h2>Guide your users through a tour of your app.</h2>
        </div>

        <div class="hero-including" data-test-hero-including>
          <h3>Including</h3>

          <script
            type="text/plain"
            class="language-markup"
            id="hero-including-code"
          >
            <script type="module" src="shepherd.min.js">&lt;/script>
          </script>
        </div>

        <div class="hero-example">
          <h3>Example</h3>

          <pre id="hero-example-code">
          <code class="language-javascript">
            const tour = new Shepherd.Tour({
              defaultStepOptions: {
                classes: 'shadow-md bg-purple-dark',
                scrollTo: true
              }
            });

            tour.addStep({
              title: 'Example Shepherd',
              text: 'Creating a Shepherd is easy too! Just create ...',
              attachTo: {
                element: '.hero-example',
                on: 'bottom'
              },
              advanceOn: {
                selector: '.docs-link',
                event: 'click'
              },
              id: 'example'
            });

            tour.start();
          </code>
        </pre>
        </div>

        <div class="hero-followup">
          <p>
            <a
              class="button star"
              href="https://github.com/shipshapecode/shepherd"
              >★ on Github</a
            >
            &nbsp;&nbsp;
            <a class="button" href="https://shepherdjs.dev/docs/">View Docs</a>
          </p>
        </div>
        <div>
          <img src="sheep.svg" />
        </div>
      </div>
    </div>

    <!-- Shepherd -->
    <script type="module">
      import Shepherd from '../dist/js/shepherd.mjs';

      window.Shepherd = Shepherd;

      const shepherd = new Shepherd.Tour({
        defaultStepOptions: {
          cancelIcon: {
            enabled: true
          }
        },
        useModalOverlay: true
      });

      const steps = [
        {
          text: `
         <p>
           Shepherd is a JavaScript library for guiding users through your app.
           It uses <a href="https://floating-ui.com/" data-test-popper-link>Floating UI</a>,
           another open source library, to render dialogs for each tour "step".
         </p>

         <p>
           Among many things, Floating UI makes sure your steps never end up off screen or cropped by an overflow.
           (Try resizing your browser to see what we mean.)
         </p>`,
          attachTo: {
            element: '.hero-welcome',
            on: 'bottom'
          },
          classes: 'shepherd-step-element shepherd-transparent-text first-step',
          buttons: [
            {
              action: shepherd.cancel,
              classes: 'shepherd-button-secondary',
              text: 'Exit'
            },
            {
              action: shepherd.next,
              classes: 'shepherd-button-example-primary',
              text: 'Next'
            }
          ],
          id: 'welcome'
        },
        {
          title: 'Including',
          text: 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.',
          attachTo: {
            element: '.hero-including',
            on: 'bottom'
          },
          buttons: [
            {
              action: shepherd.back,
              classes: 'shepherd-button-secondary',
              text: 'Back'
            },
            {
              action: shepherd.next,
              classes: 'shepherd-button-example-primary',
              text: 'Next'
            }
          ],
          id: 'including',
          classes: 'shepherd-step-element second-step'
        },
        {
          title: 'Example Shepherd',
          text: 'Creating a Shepherd is easy too! Just create Shepherd and add as many steps as you want. Check out the <a href="https://shepherdjs.dev/docs/">documentation</a> to learn more.',
          attachTo: {
            element: '.hero-example',
            on: 'bottom'
          },
          buttons: [
            {
              action: shepherd.back,
              classes: 'shepherd-button-secondary',
              text: 'Back'
            },
            {
              action: shepherd.next,
              classes: 'shepherd-button-example-primary',
              text: 'Next'
            }
          ],
          id: 'example',
          classes: 'shepherd-step-element third-step'
        },
        {
          title: 'Learn more',
          text: 'Star Shepherd on Github so you remember it for your next project',
          attachTo: {
            element: '.hero-followup',
            on: 'left'
          },
          buttons: [
            {
              action: shepherd.back,
              classes: 'shepherd-button-secondary',
              text: 'Back'
            },
            {
              action: shepherd.next,
              classes: 'shepherd-button-example-primary',
              text: 'Done'
            }
          ],
          id: 'followup',
          classes: 'shepherd-step-element fourth-step'
        }
      ];

      shepherd.addSteps(steps);
      shepherd.start();
    </script>

    <!-- Welcome page -->
    <script src="js/prism.js"></script>
  </body>
</html>