Skip to content

Commit 7a01e7e

Browse files
josias-rjosias-r
authored
Merge pull request #35 from josias-r/next
Next
2 parents 7542bb1 + 924d748 commit 7a01e7e

File tree

14 files changed

+1178
-986
lines changed

14 files changed

+1178
-986
lines changed

‎.github/workflows/gh-pages.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
name: Build and Deploy
22
on:
33
push:
4-
branches: [master]
4+
branches: [main]
55
permissions:
66
contents: write
77
jobs:

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ name: Release CI
44

55
on:
66
push:
7-
branches: [master, next]
7+
branches: [main, next]
88

99
permissions:
1010
contents: write # to be able to publish a GitHub release
@@ -38,4 +38,3 @@ jobs:
3838
env:
3939
CI: true
4040
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
41-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
## [3.7.2](https://github.com/josias-r/boarding.js/compare/v3.7.1...v3.7.2) (2025-12-09)
2+
3+
4+
### Bug Fixes
5+
6+
* Render popover condition should not be depending on title value ([871097e](https://github.com/josias-r/boarding.js/commit/871097e1800ca77695cc26e2df947f989584f0ba)), closes [#33](https://github.com/josias-r/boarding.js/issues/33)
7+
18
## [3.7.1](https://github.com/josias-r/boarding.js/compare/v3.7.0...v3.7.1) (2025-11-28)
29

310

‎index.html‎

Lines changed: 58 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,16 @@
4848
rel="stylesheet"
4949
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
5050
/>
51+
<link
52+
rel="stylesheet"
53+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/dark.min.css"
54+
/>
5155
</head>
5256
<body>
5357
<div class="page-wrap">
5458
<section class="section__header" id="boarding-demo-head">
5559
<h1 class="brand">
56-
<img id="logo_img" src="./images/boarding.svg" />
60+
<img id="logo_img" src="./images/boarding.svg" height="67" />
5761
<span id="name_boarding">Boarding.js</span>
5862
</h1>
5963
<p class="text-muted tagline">
@@ -87,34 +91,9 @@ <h1 class="brand">
8791
</div>
8892
</section>
8993

90-
<blockquote style="font-size: 0.8rem">
91-
<p>
92-
💡 This library is a a port of
93-
<a
94-
href="https://github.com/kamranahmedse/driver.js"
95-
target="_blank"
96-
rel="noopener noreferrer"
97-
>driver.js</a
98-
>. The reason behind refactoring that library, is because driver.js
99-
under the hood works by elevating elements using css with z-index.
100-
This means it can very easily break your layout if you rely anywhere
101-
on the css stacking context.
102-
</p>
103-
<p>
104-
So how does this library approach the problem? It doesn't touch any
105-
styles at all. Instead the library renders the overlay using an SVG
106-
element. This means it works with <strong>any</strong> layout.
107-
</p>
108-
<p class="zero-bottom">
109-
It has the small downside that an SVG is less customizable in terms of
110-
how it looks visually than the approach that driver.js had. But maybe
111-
better support for styling will be added in the future, since there
112-
are other ways to approach that problem.
113-
</p>
114-
</blockquote>
11594
<blockquote>
11695
<p>
117-
A lightweight (~7.5kb gzipped) yet powerful JavaScript engine that
96+
A lightweight (~6.7kb gzipped) yet powerful JavaScript engine that
11897
helps you drive the user's focus on page.
11998
</p>
12099
<p class="zero-bottom">
@@ -150,12 +129,36 @@ <h3>What are the features?</h3>
150129
<li id="keyboard_feature">
151130
⌨️ User Friendly – <strong>Controllable by keys</strong>
152131
</li>
132+
<li id="complex_layouts_feature">
133+
🏗️ <strong>Works with complex layouts</strong> – no z-index
134+
conflicts
135+
</li>
136+
<li id="dynamic_content_feature">
137+
⚡ <strong>Dynamic content support</strong> – define steps for
138+
elements not yet mounted
139+
</li>
140+
<li id="auto_positioning_feature">
141+
🎯 <strong>Auto popover positioning</strong> with full alignment
142+
control
143+
</li>
144+
<li id="click_handling_feature">
145+
🖱️ <strong>Flexible click handling</strong> – control user
146+
interactions with strictClickHandling
147+
</li>
148+
<li id="step_preparation_feature">
149+
🔧 <strong>Step preparation</strong> – validate moves with
150+
prepareElement
151+
</li>
152+
<li id="typescript_feature">
153+
📘 <strong>Written in TypeScript</strong> – fully typed for better
154+
DX
155+
</li>
153156
<li id="free_use_feature">
154157
🆓 <strong>MIT Licensed</strong> – Free for personal and commercial
155158
use
156159
</li>
157160
<li id="lightweight_feature">
158-
🕊️ Lightweight – Only <strong>~7.5kb</strong> when gzipped
161+
🕊️ Lightweight – Only <strong>~6.7kb</strong> when gzipped
159162
</li>
160163
<li id="major_browsers_feature">
161164
🌀 <strong>Consistent behavior</strong> across all major browsers
@@ -171,94 +174,6 @@ <h3>How does it do that?</h3>
171174
you several hooks when highlighting, highlighted or un-highlighting
172175
elements making it highly customizable.
173176
</p>
174-
<h3 id="comparison-table">How does it compare to driver.js?</h3>
175-
<div style="overflow-x: auto">
176-
<table>
177-
<tr>
178-
<th style="width: 50%">Features</th>
179-
<th>Boarding.js</th>
180-
<th>Driver.js</th>
181-
</tr>
182-
<tr>
183-
<td>
184-
Works with complex layouts <br /><small
185-
>(no z-index conflicts)</small
186-
>
187-
</td>
188-
<td><i class="fa fa-check"></i></td>
189-
<td><i class="fa fa-remove"></i></td>
190-
</tr>
191-
<tr>
192-
<td>
193-
Define steps for elements which are not mounted yet <br /><small
194-
>(for highly interactive websites, such as react applications,
195-
where elements might only appear once an action has been
196-
taken)</small
197-
>
198-
</td>
199-
<td><i class="fa fa-check"></i></td>
200-
<td><i class="fa fa-remove"></i></td>
201-
</tr>
202-
<tr>
203-
<td>
204-
Has the concept of a stage<br /><small
205-
>(a customizable background for the highlighted
206-
element)</small
207-
>
208-
<br />
209-
<br />
210-
<small
211-
>* Boarding.js will add the
212-
<code>boarding-highlighted-element</code> class to the
213-
higlighted element for optional custom styling.</small
214-
>
215-
</td>
216-
<td><i class="fa fa-remove"></i>*</td>
217-
<td><i class="fa fa-check"></i></td>
218-
</tr>
219-
<tr>
220-
<td>Auto popover positioning</td>
221-
<td><i class="fa fa-check"></i></td>
222-
<td><i class="fa fa-remove"></i></td>
223-
</tr>
224-
<tr>
225-
<td>
226-
Control popover
227-
<a href="#single-element-with-popover-position">alignment</a>
228-
</td>
229-
<td><i class="fa fa-check"></i></td>
230-
<td><i class="fa fa-remove"></i></td>
231-
</tr>
232-
<tr>
233-
<td>
234-
Control allowed user (click) actions <br /><small
235-
>(<a href="#api_section">strictClickHandling</a>)</small
236-
>
237-
</td>
238-
<td><i class="fa fa-check"></i></td>
239-
<td><i class="fa fa-remove"></i></td>
240-
</tr>
241-
<tr>
242-
<td>
243-
Allow preparing/validating a move before it happens <br /><small
244-
>(<a href="#api_section">prepareElement</a>)</small
245-
>
246-
</td>
247-
<td><i class="fa fa-check"></i></td>
248-
<td><i class="fa fa-remove"></i></td>
249-
</tr>
250-
<tr>
251-
<td>Written in TypeScript</td>
252-
<td><i class="fa fa-check"></i></td>
253-
<td><i class="fa fa-remove"></i></td>
254-
</tr>
255-
</table>
256-
</div>
257-
<p>
258-
Besides the above, Boarding.js also has a few more options available
259-
for each individual step, a more stable event system and more hooks
260-
for it, such as <code>onBeforeHighlighted</code>.
261-
</p>
262177
</section>
263178
<hr class="hr__fancy" />
264179
<section class="section__examples">
@@ -750,6 +665,29 @@ <h4>API Methods</h4>
750665
</p>
751666
</section>
752667
<hr class="hr__fancy" />
668+
<blockquote style="font-size: 0.8rem">
669+
<p class="zero-bottom">
670+
💡 This library started as a rewrite of
671+
<a
672+
href="https://github.com/kamranahmedse/driver.js"
673+
target="_blank"
674+
rel="noopener noreferrer"
675+
>driver.js</a
676+
>
677+
to address several shortcomings. It has since evolved into its own
678+
fully-featured project with unique approaches and capabilities.
679+
Inspired by these improvements,
680+
<a
681+
href="https://github.com/kamranahmedse"
682+
target="_blank"
683+
rel="noopener noreferrer"
684+
>Kamran Ahmed</a
685+
>
686+
subsequently rewrote large parts of driver.js (v1.0.3+) incorporating
687+
similar approaches.
688+
</p>
689+
</blockquote>
690+
<hr class="hr__fancy" />
753691
<div class="section__example">
754692
<h4>Contributing</h4>
755693
<p>
@@ -773,6 +711,10 @@ <h4>Contributing</h4>
773711
</div>
774712

775713
<script async defer src="//buttons.github.io/buttons.js"></script>
714+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
715+
<script>
716+
hljs.highlightAll();
717+
</script>
776718
<script type="module" src="/src/main.ts"></script>
777719
</body>
778720
</html>

0 commit comments

Comments
 (0)